Alpha and Omega Motorcycle/Motocicleta - Led By Pablo Mojica +
Details
Rev your engines and ride with the Alpha & Omega Motorcycle Group! This fellowship is for all motorcycle enthusiasts who share a love for the open road and a passion for Christ. We're a community that combines faith, fellowship, and the thrill of the ride. Whether you cruise on two wheels or enjoy the rumble of a trike, come connect with brothers and sisters who share your passion. We'll plan rides, share testimonies, and support each other in our journey with God. Let's hit the road together, honoring God in every mile! ¡Arranca motores y rueda con el grupo de motociclistas Alpha & Omega! Este compañerismo es para todos los entusiastas de las motocicletas que comparten el amor por la carretera abierta y una pasión por Cristo. Somos una comunidad que combina la fe, el compañerismo y la emoción de rodar. Ya sea que manejes en dos ruedas o disfrutes del rugido de un triciclo, ven y conéctate con hermanos y hermanas que comparten tu pasión. Planearemos paseos, compartiremos testimonios y nos apoyaremos mutuamente en nuestro caminar con Dios. ¡Salgamos a la carretera juntos, honrando a Dios en cada milla! Meets Every 1st Saturday
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Group Finder — Buttons Only (All Groups)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap & jQuery (CDN for quick testing) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Handlebars -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<style>
/* ===== Buttons-only (CSS override) ===== */
#groupsTable .groupsTableHeader,
#toggleMap { display: none !important; }
/* Hide all columns in each row… */
#groupsTable .groupsTableBody .groupsTableRow > div { display: none !important; }
/* …then re-show ONLY the Join-button column, make it full width */
#groupsTable .groupsTableBody .groupsTableRow > div.groupTableBtn {
display: block !important;
float: none !important;
width: 100% !important;
text-align: left !important;
padding: 0 !important;
}
/* Button look & spacing */
.groupsTableRow .groupTableBtn .btn {
margin: 8px 0;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="page" class="container" style="max-width:900px;">
<div class="container-fluid" id="groupsTable">
<div class="row groupsTableHeader">
<div class="col-xs-6 col-sm-6 groupTableTransItem">Group</div>
<div class="col-xs-4 col-sm-4 smLeftPad">Details</div>
</div>
<div class="row groupsTableBody"></div>
</div>
<!-- Join Modal -->
<div class="modal fade" id="joinModal" tabindex="-1" role="dialog" aria-labelledby="groupLeaderModald" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Edit Leader</h4>
</div>
<form action="" method="post" id="joinForm" role="form">
<div class="modal-body">
<div class="form-group">
<label>First Name <span class="form-required" title="This field is required.">*</span></label>
<input class="form-control" type="text" name="fname" id="fname" />
</div>
<div class="form-group">
<label>Last Name <span class="form-required" title="This field is required.">*</span></label>
<input class="form-control" type="text" name="lname" id="lname" />
</div>
<div class="form-group">
<label>Cell Phone Number <span class="form-required" title="This field is required.">*</span></label>
<input class="form-control" type="tel" name="phoneCell" id="phoneCell" />
</div>
<div class="form-group">
<label>Email Address <span class="form-required" title="This field is required.">*</span></label>
<input class="form-control" type="email" name="mail" id="mail" />
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="code" name="code" />
<input type="hidden" id="gid" name="gid" />
<input class="btn btn-success" type="submit" value="Join" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
<div class="modal-body" id="joinConfirmation" style="display:none;">
<p>Your request has been submitted. Thank you!</p>
</div>
</div>
</div>
</div>
<!-- Template kept intact; CSS hides everything but the button column -->
<script id="groups-table-template" type="text/x-handlebars-template">
<div class="row groupsTableRow">
<!-- name/description column (hidden by CSS) -->
<div class="col-xs-12 col-sm-6">
<h4></h4>
</div>
<!-- details column (hidden by CSS) -->
<div class="col-xs-12 col-sm-4 smLeftPad groupTableLeaders"></div>
<!-- visible: button column -->
<div class="col-xs-12 col-sm-2 smLeftPad text-center groupTableBtn">
<button disabled="disabled" class="btn btn-primary" data-gid="" data-name="">Request Submitted</button>
<button class="btn btn-primary join" data-gid="" data-name="">Join</button>
</div>
</div>
</script>
<script>
/* === Your groups (gid + name only) === */
var groups = [
{ gid:"121", name:"Alpha and Omega Motorcycle/Motocicleta - Led By Pablo Mojica +" },
];
var userGroups = {}; // track buttons that were submitted
function processGroups(list){
groups = list.map(function(g){
g.hasJoined = !!userGroups[g.gid];
return g;
});
}
function renderGroups(){
var tpl = Handlebars.compile(document.getElementById('groups-table-template').innerHTML);
document.querySelector("#groupsTable .groupsTableBody").innerHTML = tpl({ groups: groups });
}
// Open modal on Join click
$(document).on('click', '.join', function(){
var gid = $(this).data('gid');
var name = $(this).data('name');
$("#myModalLabel").text('Join - ' + name);
$("#joinModal").modal('show');
$("#code").val(3412); // keep whatever your backend expects
$("#gid").val(gid);
});
// Submit form (fake submit UI + disable button; replace $.post with your endpoint if needed)
$("#joinForm").on('submit', function(){
if(!$("#fname").val() || !$("#lname").val() || !$("#phoneCell").val() || !$("#mail").val()){
alert("Please fill in all fields.");
return false;
}
// Success UI
$("#joinForm").hide();
$("#joinConfirmation").slideDown('fast');
// Mark as joined for this gid (disables its button)
userGroups[$("#gid").val()] = true;
processGroups(groups);
renderGroups();
// Close modal and reset form UI
setTimeout(function(){
$("#joinModal").modal('hide');
setTimeout(function(){
$("#joinForm").show();
$("#joinConfirmation").hide();
$("#joinForm")[0].reset();
}, 600);
}, 1200);
// Optional: send to your backend (uncomment and ensure endpoint exists)
// $.post('/groupfinder/joinGroup', $("#joinForm").serialize());
return false; // prevent real navigation
});
// init
processGroups(groups);
renderGroups();
</script>
</div>
</body>
</html>
