9133b7bbc6
- Add map-based location picker with centered pin for campsites (two-step process) - Hide edit buttons for campsites not owned by current user - Allow numbers in campsite names (fix validateName function) - Prepopulate edit form with existing campsite data - Preserve country/province selection when confirming location - Add real-time filter functionality to campsites table - Fix events publish button error handling (use output buffering cleanup) - Improve AJAX response handling with complete callback Changes: - src/pages/bookings/campsites.php: Location mode UI, filter, edit form improvements - src/config/functions.php: Allow numbers in validateName regex - src/admin/toggle_event_published.php: Clean output buffers before JSON response - src/admin/admin_events.php: Use complete callback instead of success/error handlers
766 lines
30 KiB
PHP
766 lines
30 KiB
PHP
<?php
|
|
$headerStyle = 'light';
|
|
$rootPath = dirname(dirname(dirname(__DIR__)));
|
|
include_once($rootPath . '/header.php');
|
|
|
|
// Check if user has active membership
|
|
if (!isset($_SESSION['user_id'])) {
|
|
header('Location: login');
|
|
exit;
|
|
}
|
|
|
|
$is_member = getUserMemberStatus($_SESSION['user_id']);
|
|
if (!$is_member) {
|
|
header('Location: index');
|
|
exit;
|
|
}
|
|
|
|
$conn = openDatabaseConnection();
|
|
$stmt = $conn->prepare("SELECT * FROM campsites");
|
|
$stmt->execute();
|
|
$result = $stmt->get_result();
|
|
$campsites = [];
|
|
while ($row = $result->fetch_assoc()) {
|
|
$campsites[] = $row;
|
|
}
|
|
?>
|
|
|
|
<style>
|
|
#map {
|
|
height: 600px;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
/* Center pin overlay */
|
|
.map-center-pin {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
font-size: 48px;
|
|
}
|
|
|
|
/* Location mode indicator */
|
|
.location-mode-indicator {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
background: #4CAF50;
|
|
color: white;
|
|
padding: 12px 20px;
|
|
border-radius: 6px;
|
|
z-index: 11;
|
|
font-weight: 500;
|
|
display: none;
|
|
}
|
|
|
|
/* Confirm location button */
|
|
.confirm-location-btn {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #4CAF50;
|
|
color: white;
|
|
padding: 12px 30px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
z-index: 11;
|
|
display: none;
|
|
}
|
|
|
|
.confirm-location-btn:hover {
|
|
background: #45a049;
|
|
}
|
|
|
|
.cancel-location-btn {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
background: #f44336;
|
|
color: white;
|
|
padding: 12px 30px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
z-index: 11;
|
|
display: none;
|
|
}
|
|
|
|
.cancel-location-btn:hover {
|
|
background: #da190b;
|
|
}
|
|
|
|
/* Form styling to match manage_trips */
|
|
.campsite-form-container {
|
|
background: #f9f9f7;
|
|
border: 1px solid #d8d8d8;
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
margin: 20px 0;
|
|
display: none;
|
|
}
|
|
|
|
.campsite-form-container h5 {
|
|
color: #2c3e50;
|
|
font-weight: 600;
|
|
margin-bottom: 30px;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.campsite-form-container .form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.campsite-form-container label {
|
|
font-weight: 500;
|
|
color: #34495e;
|
|
margin-bottom: 8px;
|
|
display: block;
|
|
}
|
|
|
|
.campsite-form-container .form-control {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.campsite-form-container .form-control:focus {
|
|
border-color: #4CAF50;
|
|
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
|
|
outline: none;
|
|
}
|
|
|
|
.campsite-form-container .form-control select {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.campsite-form-container .btn {
|
|
border-radius: 6px;
|
|
font-weight: 500;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
/* Table styling to match admin trips */
|
|
.campsites-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.campsites-table thead th {
|
|
cursor: pointer;
|
|
text-align: left;
|
|
padding: 10px;
|
|
font-weight: bold;
|
|
position: relative;
|
|
}
|
|
|
|
.campsites-table thead th::after {
|
|
content: '\25B2';
|
|
font-size: 0.8em;
|
|
position: absolute;
|
|
right: 10px;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.campsites-table thead th.asc::after {
|
|
content: '\25B2';
|
|
opacity: 1;
|
|
}
|
|
|
|
.campsites-table thead th.desc::after {
|
|
content: '\25BC';
|
|
opacity: 1;
|
|
}
|
|
|
|
.campsites-table tbody tr:nth-child(odd) {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.campsites-table tbody tr:nth-child(even) {
|
|
background-color: rgb(255, 255, 255);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.campsites-table tbody td {
|
|
padding: 10px;
|
|
}
|
|
|
|
.campsites-table tbody tr:nth-child(even) td:first-child {
|
|
border-top-left-radius: 10px;
|
|
border-bottom-left-radius: 10px;
|
|
}
|
|
|
|
.campsites-table tbody tr:nth-child(even) td:last-child {
|
|
border-top-right-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
.filter-input {
|
|
width: 100%;
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
background-color: rgb(255, 255, 255);
|
|
border-radius: 25px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.campsite-group {
|
|
color: #484848;
|
|
background: #f9f9f7;
|
|
border: 1px solid #d8d8d8;
|
|
border-radius: 10px;
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
padding: 10px;
|
|
}
|
|
</style>
|
|
|
|
<?php
|
|
$pageTitle = 'Campsites Directory';
|
|
$breadcrumbs = [['Home' => 'index.php']];
|
|
require_once($rootPath . '/components/banner.php');
|
|
?>
|
|
|
|
<section class="tour-list-page py-100 rel">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<h3>Campsites Map</h3>
|
|
<button class="theme-btn" id="toggleFormBtn" onclick="startLocationMode()">
|
|
<i class="far fa-plus"></i> Add Campsite
|
|
</button>
|
|
</div>
|
|
<p style="color: #666; margin-bottom: 15px;">Click on a marker to view details, or use the "Add Campsite" button to add a new location.</p>
|
|
|
|
<!-- Map with location mode UI -->
|
|
<div style="position: relative; margin-bottom: 20px;">
|
|
<div id="map" style="width: 100%; height: 500px;"></div>
|
|
|
|
<!-- Location Mode Indicator -->
|
|
<div class="location-mode-indicator">
|
|
📍 Position the map center pin over your campsite location
|
|
</div>
|
|
|
|
<!-- Confirm and Cancel Buttons -->
|
|
<button type="button" class="confirm-location-btn" onclick="confirmLocation()">
|
|
✓ Confirm Location
|
|
</button>
|
|
<button type="button" class="cancel-location-btn" onclick="cancelLocationMode()">
|
|
✕ Cancel
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Collapsible Campsite Form -->
|
|
<div class="campsite-form-container" id="campsiteFormContainer">
|
|
<h5>Add New Campsite</h5>
|
|
<form id="addCampsiteForm" method="POST" action="add_campsite" enctype="multipart/form-data">
|
|
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
|
|
<input type="hidden" name="latitude" id="latitude">
|
|
<input type="hidden" name="longitude" id="longitude">
|
|
|
|
<div class="row mt-35">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="campsite_name">Campsite Name *</label>
|
|
<input type="text" id="campsite_name" class="form-control" name="name" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="countrySelect">Country *</label>
|
|
<select id="countrySelect" class="form-control" name="country" required>
|
|
<option value="">-- Select Country --</option>
|
|
<option value="South Africa">South Africa</option>
|
|
<option value="Botswana">Botswana</option>
|
|
<option value="Eswatini">Eswatini</option>
|
|
<option value="Lesotho">Lesotho</option>
|
|
<option value="Namibia">Namibia</option>
|
|
<option value="Zimbabwe">Zimbabwe</option>
|
|
<option value="Other">Other</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="provinceSelect">Province *</label>
|
|
<select id="provinceSelect" class="form-control" name="province" required>
|
|
<option value="">-- Select Province --</option>
|
|
<option value="Eastern Cape">Eastern Cape</option>
|
|
<option value="Free State">Free State</option>
|
|
<option value="Gauteng">Gauteng</option>
|
|
<option value="KwaZulu-Natal">KwaZulu-Natal</option>
|
|
<option value="Limpopo">Limpopo</option>
|
|
<option value="Mpumalanga">Mpumalanga</option>
|
|
<option value="Northern Cape">Northern Cape</option>
|
|
<option value="North West">North West</option>
|
|
<option value="Western Cape">Western Cape</option>
|
|
<option value="Other">Other</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="campsite_description">Description</label>
|
|
<textarea id="campsite_description" class="form-control" name="description" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="campsite_website">Booking URL</label>
|
|
<input type="url" id="campsite_website" class="form-control" name="website">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="campsite_phone">Phone Number</label>
|
|
<input type="text" id="campsite_phone" class="form-control" name="telephone">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="latitude_display">Latitude</label>
|
|
<input type="text" id="latitude_display" class="form-control" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="longitude_display">Longitude</label>
|
|
<input type="text" id="longitude_display" class="form-control" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="campsite_thumbnail">Thumbnail Image</label>
|
|
<input type="file" id="campsite_thumbnail" class="form-control" name="thumbnail" accept="image/*">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-group mb-0">
|
|
<button class="theme-btn style-two" type="submit" style="width: 100%; margin-right: 10px;">Save Campsite</button>
|
|
<button class="theme-btn" type="button" onclick="toggleCampsiteForm()" style="width: 100%; margin-top: 10px;">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Campsites Table -->
|
|
<div style="margin-top: 40px;">
|
|
<h4 style="margin-bottom: 20px;">All Campsites</h4>
|
|
<input type="text" class="filter-input" id="campsitesFilter" placeholder="Filter results...">
|
|
<div class="table-responsive">
|
|
<table class="campsites-table">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Description</th>
|
|
<th>Booking Website</th>
|
|
<th>Phone</th>
|
|
<th>Added By</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="campsitesTableBody">
|
|
<!-- Populated by JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
let map;
|
|
let centerPinMarker;
|
|
let isLocationMode = false;
|
|
const currentUserId = <?php echo $_SESSION['user_id']; ?>;
|
|
const campsites = <?php echo json_encode($campsites); ?>;
|
|
|
|
function startLocationMode() {
|
|
if (isLocationMode) return;
|
|
|
|
isLocationMode = true;
|
|
|
|
// Show location mode UI elements
|
|
document.querySelector(".location-mode-indicator").style.display = "block";
|
|
document.querySelector(".confirm-location-btn").style.display = "block";
|
|
document.querySelector(".cancel-location-btn").style.display = "block";
|
|
document.getElementById("toggleFormBtn").disabled = true;
|
|
|
|
// Create invisible marker at map center
|
|
const mapCenter = map.getCenter();
|
|
centerPinMarker = new google.maps.Marker({
|
|
position: mapCenter,
|
|
map: map,
|
|
title: "Campsite Location",
|
|
draggable: true,
|
|
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
|
|
});
|
|
|
|
// Update coordinates when marker is dragged
|
|
centerPinMarker.addListener('drag', function() {
|
|
const position = centerPinMarker.getPosition();
|
|
updateCoordinatesDisplay(position.lat(), position.lng());
|
|
});
|
|
|
|
// Set initial coordinates
|
|
updateCoordinatesDisplay(mapCenter.lat(), mapCenter.lng());
|
|
|
|
// Update coordinates when map is moved
|
|
const moveListener = map.addListener('center_changed', function() {
|
|
const mapCenter = map.getCenter();
|
|
centerPinMarker.setPosition(mapCenter);
|
|
updateCoordinatesDisplay(mapCenter.lat(), mapCenter.lng());
|
|
});
|
|
|
|
// Store listener for cleanup
|
|
window.mapMoveListener = moveListener;
|
|
}
|
|
|
|
function updateCoordinatesDisplay(lat, lng) {
|
|
document.getElementById("latitude").value = lat;
|
|
document.getElementById("longitude").value = lng;
|
|
document.getElementById("latitude_display").value = lat.toFixed(6);
|
|
document.getElementById("longitude_display").value = lng.toFixed(6);
|
|
}
|
|
|
|
function confirmLocation() {
|
|
if (!isLocationMode) return;
|
|
|
|
isLocationMode = false;
|
|
|
|
// Hide location mode UI elements
|
|
document.querySelector(".location-mode-indicator").style.display = "none";
|
|
document.querySelector(".confirm-location-btn").style.display = "none";
|
|
document.querySelector(".cancel-location-btn").style.display = "none";
|
|
document.getElementById("toggleFormBtn").disabled = false;
|
|
|
|
// Remove map move listener
|
|
if (window.mapMoveListener) {
|
|
google.maps.event.removeListener(window.mapMoveListener);
|
|
}
|
|
|
|
// Remove the center marker
|
|
if (centerPinMarker) {
|
|
centerPinMarker.setMap(null);
|
|
centerPinMarker = null;
|
|
}
|
|
|
|
// Reset form fields and show form (for new campsite only)
|
|
resetFormForNewCampsite();
|
|
document.getElementById("campsiteFormContainer").style.display = "block";
|
|
document.getElementById("campsiteFormContainer").scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
}
|
|
|
|
function cancelLocationMode() {
|
|
if (!isLocationMode) return;
|
|
|
|
isLocationMode = false;
|
|
|
|
// Hide location mode UI elements
|
|
document.querySelector(".location-mode-indicator").style.display = "none";
|
|
document.querySelector(".confirm-location-btn").style.display = "none";
|
|
document.querySelector(".cancel-location-btn").style.display = "none";
|
|
document.getElementById("toggleFormBtn").disabled = false;
|
|
|
|
// Remove map move listener
|
|
if (window.mapMoveListener) {
|
|
google.maps.event.removeListener(window.mapMoveListener);
|
|
}
|
|
|
|
// Remove the center marker
|
|
if (centerPinMarker) {
|
|
centerPinMarker.setMap(null);
|
|
centerPinMarker = null;
|
|
}
|
|
}
|
|
|
|
function toggleCampsiteForm() {
|
|
if (isLocationMode) return;
|
|
|
|
const container = document.getElementById("campsiteFormContainer");
|
|
container.style.display = container.style.display === "none" ? "block" : "none";
|
|
if (container.style.display === "block") {
|
|
container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
}
|
|
}
|
|
|
|
function resetFormForNewCampsite() {
|
|
// This is called when confirming location for a NEW campsite
|
|
// Only clears text fields and removes ID, but keeps country/province selections
|
|
document.querySelector("#addCampsiteForm input[name='name']").value = '';
|
|
document.querySelector("#addCampsiteForm textarea[name='description']").value = '';
|
|
document.querySelector("#addCampsiteForm input[name='website']").value = '';
|
|
document.querySelector("#addCampsiteForm input[name='telephone']").value = '';
|
|
|
|
// Remove the ID input if it exists
|
|
let idInput = document.querySelector("#addCampsiteForm input[name='id']");
|
|
if (idInput) {
|
|
idInput.remove();
|
|
}
|
|
|
|
// Change form heading
|
|
document.querySelector("#campsiteFormContainer h5").textContent = "Add New Campsite";
|
|
}
|
|
|
|
function resetForm() {
|
|
// This is called when canceling the form - fully resets everything
|
|
document.querySelector("#campsiteFormContainer h5").textContent = "Add New Campsite";
|
|
|
|
// Clear the form completely
|
|
document.getElementById("addCampsiteForm").reset();
|
|
|
|
// Remove the ID input if it exists
|
|
let idInput = document.querySelector("#addCampsiteForm input[name='id']");
|
|
if (idInput) {
|
|
idInput.remove();
|
|
}
|
|
|
|
// Clear coordinate displays
|
|
document.getElementById("latitude_display").value = '';
|
|
document.getElementById("longitude_display").value = '';
|
|
}
|
|
|
|
function initMap() {
|
|
map = new google.maps.Map(document.getElementById("map"), {
|
|
center: {
|
|
lat: -28.0,
|
|
lng: 24.0
|
|
},
|
|
zoom: 6,
|
|
});
|
|
|
|
// Load existing campsites from PHP
|
|
fetch("get_campsites")
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
data.forEach(site => {
|
|
const marker = new google.maps.Marker({
|
|
position: {
|
|
lat: parseFloat(site.latitude),
|
|
lng: parseFloat(site.longitude)
|
|
},
|
|
map,
|
|
title: site.name,
|
|
});
|
|
|
|
const content = `
|
|
<div class="info-box">
|
|
<strong>${site.name}</strong><br>
|
|
${site.description ? site.description + "<br>" : ""}
|
|
${site.website ? `<a href="${site.website}" target="_blank">Visit Website</a><br>` : ""}
|
|
${site.telephone ? `Phone: ${site.telephone}<br>` : ""}
|
|
${site.thumbnail ? `<img src="${site.thumbnail}" style="width: 100%; max-width: 200px; border-radius: 8px; margin-top: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);">` : ""}
|
|
${site.user && site.user.first_name ? `
|
|
<div class="user-info mt-2 d-flex align-items-center">
|
|
<img src="${site.user.profile_pic}" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 10px;">
|
|
<div>
|
|
<small>Added by:</small><br>
|
|
<strong>${site.user.first_name} ${site.user.last_name}</strong>
|
|
</div>
|
|
</div>` : ""}
|
|
<br>
|
|
<button class="btn btn-sm btn-warning mt-2" onclick='editCampsite(${JSON.stringify(site)})'>Edit</button>
|
|
<a href="https://www.google.com/maps/dir/?api=1&destination=${site.latitude},${site.longitude}" target="_blank" class="btn btn-sm btn-outline-primary mt-2 ms-2">Get Directions</a>
|
|
</div>
|
|
`;
|
|
|
|
const infowindow = new google.maps.InfoWindow({
|
|
content: content
|
|
});
|
|
|
|
marker.addListener("click", () => {
|
|
infowindow.open(map, marker);
|
|
});
|
|
});
|
|
|
|
// Populate the table
|
|
populateCampsitesTable(data);
|
|
})
|
|
.catch(err => console.error("Failed to load campsites:", err));
|
|
}
|
|
|
|
function populateCampsitesTable(campsites) {
|
|
const tableBody = document.getElementById("campsitesTableBody");
|
|
tableBody.innerHTML = ""; // Clear existing rows
|
|
|
|
if (campsites.length === 0) {
|
|
tableBody.innerHTML = `
|
|
<tr>
|
|
<td colspan="6" class="text-center text-muted" style="padding: 30px;">
|
|
No campsites added yet. Click on the map to add one!
|
|
</td>
|
|
</tr>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
// Group campsites by country and province
|
|
const groupedByCountryAndProvince = {};
|
|
campsites.forEach(site => {
|
|
const country = site.country || 'Unknown Country';
|
|
const province = site.province || 'Unknown Province';
|
|
|
|
if (!groupedByCountryAndProvince[country]) {
|
|
groupedByCountryAndProvince[country] = {};
|
|
}
|
|
if (!groupedByCountryAndProvince[country][province]) {
|
|
groupedByCountryAndProvince[country][province] = [];
|
|
}
|
|
groupedByCountryAndProvince[country][province].push(site);
|
|
});
|
|
|
|
// Sort countries alphabetically
|
|
const sortedCountries = Object.keys(groupedByCountryAndProvince).sort();
|
|
|
|
// Populate table with grouped data
|
|
sortedCountries.forEach(country => {
|
|
// Sort provinces alphabetically for this country
|
|
const sortedProvinces = Object.keys(groupedByCountryAndProvince[country]).sort();
|
|
|
|
sortedProvinces.forEach(province => {
|
|
// Add province group header
|
|
const groupRow = document.createElement("tr");
|
|
groupRow.innerHTML = `
|
|
<td colspan="6" style="font-weight: 600; padding: 10px 8px; background-color: #f0f0f0;">
|
|
<i class="fas fa-globe" style="color: #2196F3; margin-right: 8px;"></i>${country} - ${province}
|
|
</td>
|
|
`;
|
|
tableBody.appendChild(groupRow);
|
|
|
|
// Add campsite rows for this province
|
|
groupedByCountryAndProvince[country][province].forEach(site => {
|
|
const row = document.createElement("tr");
|
|
const userName = site.user && site.user.first_name
|
|
? `${site.user.first_name} ${site.user.last_name}`
|
|
: "Unknown";
|
|
|
|
// Only show edit button if current user is the owner
|
|
const editButtonHTML = site.user_id == currentUserId
|
|
? `<button class="btn btn-sm btn-warning" onclick='editCampsite(${JSON.stringify(site)})'>Edit</button>`
|
|
: '';
|
|
|
|
row.innerHTML = `
|
|
<td><strong>${site.name}</strong></td>
|
|
<td>${site.description ? site.description.substring(0, 50) + (site.description.length > 50 ? '...' : '') : '-'}</td>
|
|
<td>${site.website ? `<a href="${site.website}" target="_blank" class="link-primary">Visit</a>` : '-'}</td>
|
|
<td>${site.telephone || '-'}</td>
|
|
<td><small>${userName}</small></td>
|
|
<td>
|
|
${editButtonHTML}
|
|
<a href="https://www.google.com/maps/dir/?api=1&destination=${site.latitude},${site.longitude}" target="_blank" class="btn btn-sm btn-outline-primary">Directions</a>
|
|
</td>
|
|
`;
|
|
tableBody.appendChild(row);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function editCampsite(site) {
|
|
// Change form heading to indicate editing
|
|
document.querySelector("#campsiteFormContainer h5").textContent = "Edit Campsite";
|
|
|
|
// Pre-fill form with a slight delay to ensure DOM is ready
|
|
setTimeout(() => {
|
|
document.querySelector("#addCampsiteForm input[name='name']").value = site.name;
|
|
document.querySelector("#addCampsiteForm textarea[name='description']").value = site.description || "";
|
|
document.querySelector("#addCampsiteForm input[name='website']").value = site.website || "";
|
|
document.querySelector("#addCampsiteForm input[name='telephone']").value = site.telephone || "";
|
|
document.querySelector("#addCampsiteForm input[name='latitude']").value = site.latitude;
|
|
document.querySelector("#addCampsiteForm input[name='longitude']").value = site.longitude;
|
|
document.getElementById("latitude_display").value = parseFloat(site.latitude).toFixed(6);
|
|
document.getElementById("longitude_display").value = parseFloat(site.longitude).toFixed(6);
|
|
|
|
// Set country and province LAST to ensure they stick
|
|
document.querySelector("#addCampsiteForm select[name='country']").value = site.country || '';
|
|
document.querySelector("#addCampsiteForm select[name='province']").value = site.province || '';
|
|
|
|
// Add hidden ID input
|
|
let idInput = document.querySelector("#addCampsiteForm input[name='id']");
|
|
if (!idInput) {
|
|
idInput = document.createElement("input");
|
|
idInput.type = "hidden";
|
|
idInput.name = "id";
|
|
document.querySelector("#addCampsiteForm").appendChild(idInput);
|
|
}
|
|
idInput.value = site.id;
|
|
}, 0);
|
|
|
|
// Show the form container
|
|
document.getElementById("campsiteFormContainer").style.display = "block";
|
|
document.getElementById("campsiteFormContainer").scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
}
|
|
|
|
function filterCampsites() {
|
|
const filterInput = document.getElementById("campsitesFilter");
|
|
const filterValue = filterInput.value.toLowerCase();
|
|
const tableBody = document.getElementById("campsitesTableBody");
|
|
const rows = tableBody.getElementsByTagName("tr");
|
|
|
|
let visibleRows = 0;
|
|
|
|
for (let i = 0; i < rows.length; i++) {
|
|
const row = rows[i];
|
|
const text = row.textContent.toLowerCase();
|
|
|
|
// Show rows that match the filter or are group headers
|
|
if (text.includes(filterValue) || row.innerHTML.includes('fas fa-globe')) {
|
|
row.style.display = "";
|
|
if (row.innerHTML.includes('fas fa-globe') === false) {
|
|
visibleRows++;
|
|
}
|
|
} else {
|
|
row.style.display = "none";
|
|
}
|
|
}
|
|
|
|
// Hide group headers if no campsites match in that group
|
|
for (let i = 0; i < rows.length; i++) {
|
|
const row = rows[i];
|
|
if (row.innerHTML.includes('fas fa-globe')) {
|
|
// Check if next visible row is also a header
|
|
let hasVisibleChildren = false;
|
|
for (let j = i + 1; j < rows.length; j++) {
|
|
if (rows[j].style.display !== "none") {
|
|
if (!rows[j].innerHTML.includes('fas fa-globe')) {
|
|
hasVisibleChildren = true;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
row.style.display = hasVisibleChildren ? "" : "none";
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add filter event listener when page loads
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const filterInput = document.getElementById("campsitesFilter");
|
|
if (filterInput) {
|
|
filterInput.addEventListener("keyup", filterCampsites);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-JuvnbUYc8WGjQBFFVZtKiv5_bFJoWLU&callback=initMap" async defer></script>
|
|
|
|
|
|
<?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
|