updated BASE4 page
This commit is contained in:
twotalesanimation
@@ -68,6 +68,7 @@ RewriteRule ^instapage$ src/pages/events/instapage.php [L]
|
||||
|
||||
# === OTHER PAGES ===
|
||||
RewriteRule ^about$ src/pages/other/about.php [L]
|
||||
RewriteRule ^base4$ src/pages/other/base4.php [L]
|
||||
RewriteRule ^contact$ src/pages/other/contact.php [L]
|
||||
RewriteRule ^privacy_policy$ src/pages/other/privacy_policy.php [L]
|
||||
RewriteRule ^track-map$ src/pages/track-map.php [L]
|
||||
@@ -163,7 +164,7 @@ RewriteRule ^autosave$ src/processors/blog/autosave.php [L]
|
||||
|
||||
</IfModule>
|
||||
|
||||
php_flag display_errors On
|
||||
php_flag display_errors Off
|
||||
# php_value error_reporting -1
|
||||
RedirectMatch 403 ^/\.well-known
|
||||
Options -Indexes
|
||||
|
||||
BIN
assets/images/base4/01.jpeg
Normal file
BIN
assets/images/base4/01.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
@@ -260,7 +260,7 @@ if ($headerStyle === 'light') {
|
||||
<ul class="navigation clearfix">
|
||||
<li><a href="index">Home</a></li>
|
||||
<li><a href="about">About</a></li>
|
||||
<li><a href="track-map">Track Map</a></li>
|
||||
<li><a href="base4">BASE 4</a></li>
|
||||
<li><a href="trips">Trips</a>
|
||||
<?php if ($headerStyle === 'dark'): ?>
|
||||
<ul>
|
||||
|
||||
16
index.php
16
index.php
@@ -784,6 +784,7 @@ if (countUpcomingTrips() > 0) { ?>
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@@ -805,6 +806,10 @@ if (countUpcomingTrips() > 0) { ?>
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
animation: slideDown 0.3s ease-out;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
/* Limit height so the modal never exceeds the viewport and allow internal scrolling */
|
||||
max-height: calc(100vh - 80px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
@@ -890,8 +895,17 @@ if (countUpcomingTrips() > 0) { ?>
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.updates-modal {
|
||||
/* Align to top on small screens so content's top (and close button) is visible */
|
||||
align-items: flex-start;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.updates-modal-content {
|
||||
padding: 30px 20px;
|
||||
padding: 20px;
|
||||
max-width: 92%;
|
||||
width: 92%;
|
||||
max-height: calc(100vh - 36px);
|
||||
}
|
||||
|
||||
.updates-modal-header h2 {
|
||||
|
||||
@@ -159,13 +159,18 @@ require_once($rootPath . '/components/banner.php');
|
||||
<h2>4WDCSA Committee and Other Office Bearers</h2>
|
||||
<div>
|
||||
<h3>Committee</h3>
|
||||
<li>Chairman - John Runciman</li>
|
||||
<li>Chairman - Peter Hutchison</li>
|
||||
<li>Vice Chairman - Davin Webster</li>
|
||||
<li>National Liaison - Peter Hutchison</li>
|
||||
<li>Treasurer - Doug Timm</li>
|
||||
<li>Outings - John Runciman</li>
|
||||
<li>Events - Noelene Runciman</li>
|
||||
<li>Driver Training - John Runciman</li>
|
||||
<li>Events - Noelene Koertzen</li>
|
||||
<li>Driver Training - VACANT</li>
|
||||
<li>Digital Media - Christopher Pinto</li>
|
||||
<li>Marketing - Janet Erasmus</li>
|
||||
<li>Outdoor - Carla Holtzhausen</li>
|
||||
<li>Clubhouse - Tree Stiebel</li>
|
||||
<li>Maintenance - Kit Muirhead</li>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="pt-30 pb-20">
|
||||
@@ -238,7 +243,7 @@ require_once($rootPath . '/components/banner.php');
|
||||
<div class="cta-item" style="background-image: url(assets/images/trips/1_01.jpg);">
|
||||
<span class="category">Extended Trips</span>
|
||||
<h2>Come and Explore Africa and beyond</h2>
|
||||
<a href="<?= url('trips') ?>" class="theme-btn style-two bgc-secondary">
|
||||
<a href="trips" class="theme-btn style-two bgc-secondary">
|
||||
<span data-hover="Explore Tours">Explore Trips</span>
|
||||
<i class="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
@@ -248,7 +253,7 @@ require_once($rootPath . '/components/banner.php');
|
||||
<div class="cta-item" style="background-image: url(assets/images/courses/driver_training.png);">
|
||||
<span class="category">Driver Training</span>
|
||||
<h2>Level up your 4x4 Driving Skills</h2>
|
||||
<a href="<?= url('driver_training') ?>" class="theme-btn style-two">
|
||||
<a href="driver_training" class="theme-btn style-two">
|
||||
<span data-hover="Explore Tours">Explore Training</span>
|
||||
<i class="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
@@ -258,7 +263,7 @@ require_once($rootPath . '/components/banner.php');
|
||||
<div class="cta-item" style="background-image: url(assets/images/base4/camping.jpg);">
|
||||
<span class="category">Events</span>
|
||||
<h2>See whats cooking at BASE4!</h2>
|
||||
<a href="<?= url('events') ?>" class="theme-btn style-two bgc-secondary">
|
||||
<a href="events" class="theme-btn style-two bgc-secondary">
|
||||
<span data-hover="Explore Tours">Explore Events</span>
|
||||
<i class="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
|
||||
816
src/pages/other/base4.php
Normal file
816
src/pages/other/base4.php
Normal file
@@ -0,0 +1,816 @@
|
||||
<?php
|
||||
$headerStyle = 'light';
|
||||
$rootPath = dirname(dirname(dirname(__DIR__)));
|
||||
include_once($rootPath . '/header.php');
|
||||
?>
|
||||
|
||||
<!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin="" />
|
||||
<style>
|
||||
.gallery-slider-active {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
/* spacing between images */
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gallery-three-item {
|
||||
width: 520px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
background: #f9f9f9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gallery-three-item .image {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gallery-three-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
/* ensures aspect ratio while filling container */
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.track-map-section {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.track-info-box {
|
||||
background: #f9f9f9;
|
||||
padding: 30px;
|
||||
margin: 20px auto;
|
||||
max-width: 1200px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.track-info-box h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.track-info-box p {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Shared marker styling for both legend and map obstacles */
|
||||
.legend-marker,
|
||||
.obstacle-marker {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.legend-marker span,
|
||||
.obstacle-marker span {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.legend-marker.red,
|
||||
.obstacle-marker.red {
|
||||
background: #e61e25;
|
||||
}
|
||||
|
||||
.legend-marker.green,
|
||||
.obstacle-marker.green {
|
||||
background: #28a745;
|
||||
}
|
||||
|
||||
.legend-marker.black,
|
||||
.obstacle-marker.black {
|
||||
background: #343a40;
|
||||
}
|
||||
|
||||
.legend-marker.split,
|
||||
.obstacle-marker.split {
|
||||
background: linear-gradient(45deg, #e61e25 50%, #28a745 50%);
|
||||
}
|
||||
|
||||
.obstacle-marker {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Leaflet marker container */
|
||||
.custom-marker-container {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#map {
|
||||
/* width: 100%; */
|
||||
height: 700px;
|
||||
margin: 50px;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.obstacle-popup h4 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.obstacle-popup .difficulty-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.obstacle-popup .difficulty-badge.easy {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.obstacle-popup .difficulty-badge.medium {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.obstacle-popup .difficulty-badge.hard {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.obstacle-popup .difficulty-badge.extreme {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
}
|
||||
|
||||
.obstacle-popup img {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin: 10px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.obstacle-popup .description {
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.obstacle-marker:hover {
|
||||
transform: rotate(45deg) scale(1.1);
|
||||
}
|
||||
|
||||
.obstacle-marker span {
|
||||
transform: rotate(-45deg);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Obstacle Form Modal */
|
||||
.obstacle-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 10000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.obstacle-modal.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.obstacle-modal-content {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.obstacle-modal-content h3 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.obstacle-modal-content .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.obstacle-modal-content label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.obstacle-modal-content input,
|
||||
.obstacle-modal-content select {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.obstacle-modal-content .btn-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.obstacle-modal-content .btn-group button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 10001;
|
||||
display: none;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
.alert-message.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert-message.success {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
|
||||
.alert-message.error {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<?php
|
||||
$pageTitle = 'BASE4 & 4X4 Track';
|
||||
$breadcrumbs = [['Home' => 'index.php']];
|
||||
require_once($rootPath . '/components/banner.php');
|
||||
?>
|
||||
|
||||
<!-- Features Area start -->
|
||||
<section class="features-area pt-100 pb-45 rel z-1">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-xl-7">
|
||||
<div class=" mb-55" data-aos="fade-left" data-aos-duration="1500"
|
||||
data-aos-offset="50">
|
||||
<div class="section-title mb-20">
|
||||
<h2><b>BASE 4:</b> The home of 4WDCSA.</h2>
|
||||
<p>Nestled near the Hennops river, in Doornradje, Centurion, BASE4 is the ultimate weekend getaway for 4x4 enthusiasts and outdoor lovers. This vibrant hub offers an array of exciting activities, including a challenging 4x4 test track, relaxing camping spots, and a clubhouse with food and refreshments. Take a dip in the swimming pool, fire up the braai, or unwind our brand new clubhouse. Whether you're here for adventure or relaxation, BASE4 provides the perfect setting for all your off-road and outdoor adventures. Join the Four Wheel Drive Club of Southern Africa and be part of the thrill!</p>
|
||||
<div class="image">
|
||||
<img style="border-radius:10px;" src="assets/images/base4/01.jpeg" alt="Hotel">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="menu-btns py-10">
|
||||
<a href="membership" class="theme-btn style-two bgc-secondary">
|
||||
<span data-hover="Become a Member">Become a Member</span>
|
||||
<i class="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-5" data-aos="fade-right" data-aos-duration="1500" data-aos-offset="50">
|
||||
<div class="row pb-25">
|
||||
<div class="section-title text-center counter-text-wrap mb-70" data-aos="fade-up"
|
||||
data-aos-duration="1500" data-aos-offset="50">
|
||||
<h2><b>BASE4</b><br>Non Member Fees:</h2>
|
||||
<div class="pt-20 pb-20">
|
||||
<h3>Day visitors*:</h3>
|
||||
<h4>R 50.00 per vehicle</h4>
|
||||
</div>
|
||||
<div class="pt-20 pb-20">
|
||||
<h3>Day visit & Track Pass*:</h3>
|
||||
<h4>R 150.00 per vehicle</h4>
|
||||
</div>
|
||||
<div class="pt-20 pb-20">
|
||||
<h3>Camping:</h3>
|
||||
<h4>R 250.00 per vehicle</h4>
|
||||
<p>Single night camping. Includes access to the track.</p>
|
||||
</div>
|
||||
<div class="pt-20 pb-20">
|
||||
<h3>BASE4 Weekend Pass:</h3>
|
||||
<h4>R 400.00 per vehicle</h4>
|
||||
<p>Camping from Friday till Sunday. Includes access to the track</p>
|
||||
</div>
|
||||
<p style="font-size:0.8rem;">
|
||||
*Day visitor charge not applicable on Open Days. Non-members require a 4WDCSA member to accompany them on the track at all times. Indemnity waiver must be signed at the clubhouse upon entry.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Features Area end -->
|
||||
|
||||
<!-- Hotel Area start -->
|
||||
<section class="hotel-area bgc-black py-100 rel z-1">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-title text-white text-center counter-text-wrap mb-70" data-aos="fade-up"
|
||||
data-aos-duration="1500" data-aos-offset="50">
|
||||
<h2>BASE4 Open Days</h2>
|
||||
<p style="max-width: 60%; margin: auto;">Whether you're a member or just curious, everyone's welcome at our monthly open events. Come camp with us, enjoy guest speakers, take your rig for a spin on the 4x4 track, or just relax by the swimming pool. Food and refreshments are available all weekend, plus braai fires ready to go—just bring your tongs! It’s the perfect way to experience the spirit of the club and connect with fellow adventurers. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-slider-active">
|
||||
<?php
|
||||
$folder = $rootPath . '/assets/images/opendays/';
|
||||
$images = glob($folder . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
|
||||
// Convert absolute paths to web-relative paths
|
||||
$images = array_map(function ($path) use ($rootPath) {
|
||||
return str_replace($rootPath, '', $path);
|
||||
}, $images);
|
||||
|
||||
// Shuffle and pick first 5
|
||||
shuffle($images);
|
||||
$selected = array_slice($images, 0, 10);
|
||||
|
||||
foreach ($selected as $image) {
|
||||
echo '<div class="gallery-three-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
|
||||
<div class="image">
|
||||
<img src="' . $image . '" alt="Gallery">
|
||||
</div>
|
||||
|
||||
</div>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="hotel-more-btn text-center mt-40">
|
||||
<a href="destination2.html" class="theme-btn style-four">
|
||||
<span data-hover="Explore More Hotel">Explore More Hotel</span>
|
||||
<i class="fal fa-arrow-right"></i>
|
||||
</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
<!-- Hotel Area end -->
|
||||
<!-- Track Map Section -->
|
||||
<section class="track-map-section">
|
||||
<div class="container">
|
||||
<div class="track-info-box">
|
||||
<div class="section-title text-center counter-text-wrap mb-70" data-aos="fade-up"
|
||||
data-aos-duration="1500" data-aos-offset="50">
|
||||
<h2>BASE4 4x4 Training Track</h2>
|
||||
<p>The training track at BASE4 was first created when the property was acquired in 2000. It has since been developed to provide a variety of obstacles and terrain challenges suitable for all skill levels. Open to all members. Join us on our next Driver Training Course to enhance your off-road skills and confidence and put your vehicle to the test.</p>
|
||||
</div>
|
||||
<?php if ($role === 'superadmin'): ?>
|
||||
<div style="margin: 20px 0; padding: 15px; background: #fff3cd; border-radius: 8px; border-left: 4px solid #ffc107;">
|
||||
<button id="toggleEditMode" class="btn btn-warning" style="margin-bottom: 10px;">
|
||||
🔧 Enable Edit Mode
|
||||
</button>
|
||||
<p id="editModeStatus" style="margin: 0; color: #856404; font-weight: bold; display: none;">
|
||||
✏️ Edit Mode Active - Click on map to place new markers, drag to reposition
|
||||
</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-marker green"><span></span></div>
|
||||
<span>Beginner</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-marker red"><span></span></div>
|
||||
<span>Intermediate</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-marker black"><span></span></div>
|
||||
<span>Advanced</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map"></div>
|
||||
</section>
|
||||
|
||||
<!-- Obstacle Form Modal -->
|
||||
<div id="obstacleModal" class="obstacle-modal">
|
||||
<div class="obstacle-modal-content">
|
||||
<h3>Add New Obstacle</h3>
|
||||
<form id="obstacleForm">
|
||||
<input type="hidden" id="clickedLat" name="clickedLat">
|
||||
<input type="hidden" id="clickedLng" name="clickedLng">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="obstacleNumber">Obstacle Number *</label>
|
||||
<input type="number" id="obstacleNumber" name="obstacleNumber" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="markerColor">Marker Color *</label>
|
||||
<select id="markerColor" name="markerColor" required>
|
||||
<option value="green">Green (Beginner)</option>
|
||||
<option value="red">Red (Intermediate)</option>
|
||||
<option value="black">Black (Advanced)</option>
|
||||
<option value="split">Split (Mixed)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="obstacleName">Name</label>
|
||||
<input type="text" id="obstacleName" name="obstacleName" value="New Obstacle">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="obstacleDifficulty">Difficulty</label>
|
||||
<select id="obstacleDifficulty" name="obstacleDifficulty">
|
||||
<option value="Easy">Easy</option>
|
||||
<option value="Medium" selected>Medium</option>
|
||||
<option value="Hard">Hard</option>
|
||||
<option value="Extreme">Extreme</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeObstacleModal()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Save Obstacle</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert Message -->
|
||||
<div id="alertMessage" class="alert-message"></div>
|
||||
|
||||
<?php
|
||||
require_once($rootPath . '/components/insta_footer.php');
|
||||
?>
|
||||
|
||||
<!-- Leaflet JS -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||||
crossorigin=""></script>
|
||||
|
||||
<!-- Track Map JavaScript -->
|
||||
<script>
|
||||
console.log('Track map script loaded');
|
||||
|
||||
// Check if Leaflet is available
|
||||
if (typeof L === 'undefined') {
|
||||
console.error('Leaflet library not loaded!');
|
||||
} else {
|
||||
console.log('Leaflet library is available, version:', L.version);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('DOM loaded, initializing map...');
|
||||
|
||||
const mapElement = document.getElementById('map');
|
||||
console.log('Map element:', mapElement);
|
||||
|
||||
if (!mapElement) {
|
||||
console.error('Map element not found!');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Map element dimensions:', mapElement.offsetWidth, 'x', mapElement.offsetHeight);
|
||||
|
||||
try {
|
||||
// Image dimensions: 2876 x 2035 pixels
|
||||
const imageWidth = 7942;
|
||||
const imageHeight = 3913;
|
||||
|
||||
// Create map with simple CRS (pixel coordinates)
|
||||
// Note: Leaflet uses [y, x] format, so bounds are [[0, 0], [height, width]]
|
||||
const bounds = [
|
||||
[0, 0],
|
||||
[imageHeight, imageWidth]
|
||||
];
|
||||
const map = L.map('map', {
|
||||
crs: L.CRS.Simple,
|
||||
minZoom: -1.5,
|
||||
maxZoom: 2,
|
||||
center: [imageHeight / 2, imageWidth / 2],
|
||||
zoom: -1,
|
||||
maxBounds: bounds,
|
||||
maxBoundsViscosity: 1.0
|
||||
});
|
||||
console.log('Map object created with CRS.Simple:', map);
|
||||
|
||||
// Add aerial image overlay
|
||||
const imageUrl = '/assets/images/track-aerial.jpg';
|
||||
L.imageOverlay(imageUrl, bounds).addTo(map);
|
||||
console.log('Aerial image overlay added');
|
||||
|
||||
// Add SVG overlay
|
||||
const svgUrl = '/assets/images/track-route.svg';
|
||||
L.imageOverlay(svgUrl, bounds, {
|
||||
opacity: 1,
|
||||
interactive: false
|
||||
}).addTo(map);
|
||||
console.log('SVG route overlay added');
|
||||
|
||||
// Fit map to image bounds
|
||||
map.fitBounds(bounds);
|
||||
|
||||
console.log('Map initialized successfully');
|
||||
|
||||
// Edit mode state
|
||||
let editMode = false;
|
||||
let markers = [];
|
||||
|
||||
// Edit mode toggle (only for admins)
|
||||
const toggleBtn = document.getElementById('toggleEditMode');
|
||||
const statusText = document.getElementById('editModeStatus');
|
||||
|
||||
if (toggleBtn) {
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
editMode = !editMode;
|
||||
if (editMode) {
|
||||
toggleBtn.textContent = '🔒 Disable Edit Mode';
|
||||
toggleBtn.classList.remove('btn-warning');
|
||||
toggleBtn.classList.add('btn-success');
|
||||
statusText.style.display = 'block';
|
||||
|
||||
// Make existing markers draggable
|
||||
markers.forEach(m => m.marker.dragging.enable());
|
||||
} else {
|
||||
toggleBtn.textContent = '🔧 Enable Edit Mode';
|
||||
toggleBtn.classList.remove('btn-success');
|
||||
toggleBtn.classList.add('btn-warning');
|
||||
statusText.style.display = 'none';
|
||||
|
||||
// Disable dragging
|
||||
markers.forEach(m => m.marker.dragging.disable());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Click on map to add new marker (only in edit mode)
|
||||
map.on('click', (e) => {
|
||||
if (!editMode) return;
|
||||
|
||||
const coords = e.latlng;
|
||||
|
||||
// Store clicked coordinates and show modal
|
||||
document.getElementById('clickedLat').value = coords.lat;
|
||||
document.getElementById('clickedLng').value = coords.lng;
|
||||
document.getElementById('obstacleModal').classList.add('show');
|
||||
});
|
||||
|
||||
// Modal functions
|
||||
window.closeObstacleModal = function() {
|
||||
document.getElementById('obstacleModal').classList.remove('show');
|
||||
document.getElementById('obstacleForm').reset();
|
||||
};
|
||||
|
||||
window.showAlert = function(message, type = 'success') {
|
||||
const alertDiv = document.getElementById('alertMessage');
|
||||
alertDiv.textContent = message;
|
||||
alertDiv.className = 'alert-message ' + type + ' show';
|
||||
|
||||
setTimeout(() => {
|
||||
alertDiv.classList.remove('show');
|
||||
}, 4000);
|
||||
};
|
||||
|
||||
// Handle form submission
|
||||
document.getElementById('obstacleForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const lat = parseFloat(document.getElementById('clickedLat').value);
|
||||
const lng = parseFloat(document.getElementById('clickedLng').value);
|
||||
const obstacleNumber = document.getElementById('obstacleNumber').value;
|
||||
const markerColor = document.getElementById('markerColor').value;
|
||||
const name = document.getElementById('obstacleName').value;
|
||||
const difficulty = document.getElementById('obstacleDifficulty').value;
|
||||
|
||||
// Create temporary marker
|
||||
const markerHtml = `
|
||||
<div class="obstacle-marker ${markerColor}">
|
||||
<span>${obstacleNumber}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const customIcon = L.divIcon({
|
||||
html: markerHtml,
|
||||
className: 'custom-marker-container',
|
||||
iconSize: [40, 40],
|
||||
iconAnchor: [20, 20]
|
||||
});
|
||||
|
||||
const marker = L.marker([lat, lng], {
|
||||
icon: customIcon,
|
||||
draggable: true
|
||||
}).addTo(map);
|
||||
|
||||
// Save to database
|
||||
const obstacleData = {
|
||||
obstacle_number: obstacleNumber,
|
||||
x_position: Math.round(lng),
|
||||
y_position: Math.round(lat),
|
||||
marker_color: markerColor,
|
||||
name: name,
|
||||
difficulty: difficulty,
|
||||
description: 'New obstacle - edit details in admin panel'
|
||||
};
|
||||
|
||||
saveObstacle(obstacleData, marker);
|
||||
closeObstacleModal();
|
||||
});
|
||||
|
||||
function saveObstacle(data, marker) {
|
||||
fetch('/src/processors/track-obstacles.php?action=create', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.status === 'success') {
|
||||
showAlert('Obstacle #' + data.obstacle_number + ' created successfully!', 'success');
|
||||
marker.obstacleId = result.obstacle_id;
|
||||
markers.push({
|
||||
marker,
|
||||
data: {
|
||||
...data,
|
||||
obstacle_id: result.obstacle_id
|
||||
}
|
||||
});
|
||||
|
||||
// Add dragend event to update position
|
||||
marker.on('dragend', function() {
|
||||
const pos = marker.getLatLng();
|
||||
updateObstaclePosition(marker.obstacleId, Math.round(pos.lng), Math.round(pos.lat));
|
||||
});
|
||||
} else {
|
||||
showAlert('Error: ' + result.message, 'error');
|
||||
map.removeLayer(marker);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showAlert('Error creating obstacle: ' + error, 'error');
|
||||
map.removeLayer(marker);
|
||||
});
|
||||
}
|
||||
|
||||
function updateObstaclePosition(obstacleId, x, y) {
|
||||
fetch('/src/processors/track-obstacles.php?action=updatePosition', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
obstacle_id: obstacleId,
|
||||
x_position: x,
|
||||
y_position: y
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.status === 'success') {
|
||||
showAlert('Position updated', 'success');
|
||||
} else {
|
||||
showAlert('Error updating position: ' + result.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fetch and add obstacle markers
|
||||
fetch('/src/processors/track-obstacles.php?action=getAll')
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
console.log('Obstacles data:', result);
|
||||
|
||||
if (result.status === 'success' && result.data) {
|
||||
result.data.forEach((obstacle, index) => {
|
||||
// Leaflet uses [y, x] format for coordinates
|
||||
const position = [obstacle.y_position, obstacle.x_position];
|
||||
|
||||
// Create custom marker HTML
|
||||
const markerHtml = `
|
||||
<div class="obstacle-marker ${obstacle.marker_color}">
|
||||
<span>${obstacle.obstacle_number}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Create custom icon
|
||||
const customIcon = L.divIcon({
|
||||
html: markerHtml,
|
||||
className: 'custom-marker-container',
|
||||
iconSize: [40, 40],
|
||||
iconAnchor: [20, 20]
|
||||
});
|
||||
|
||||
// Create popup content
|
||||
const popupContent = `
|
||||
<div class="obstacle-popup">
|
||||
<h4>${obstacle.name}</h4>
|
||||
<span class="difficulty-badge ${obstacle.difficulty.toLowerCase()}">${obstacle.difficulty}</span>
|
||||
${obstacle.image_path ? `<img src="${obstacle.image_path}" alt="${obstacle.name}" style="width: 100%; max-width: 300px; margin: 10px 0; border-radius: 8px;">` : ''}
|
||||
<p>${obstacle.description}</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add marker to map
|
||||
const marker = L.marker(position, {
|
||||
icon: customIcon,
|
||||
draggable: false
|
||||
})
|
||||
.addTo(map)
|
||||
.bindPopup(popupContent, {
|
||||
maxWidth: 350,
|
||||
className: 'obstacle-popup-container'
|
||||
});
|
||||
|
||||
marker.obstacleId = obstacle.obstacle_id;
|
||||
markers.push({
|
||||
marker,
|
||||
data: obstacle
|
||||
});
|
||||
|
||||
// Add dragend event for position updates
|
||||
marker.on('dragend', function() {
|
||||
const pos = marker.getLatLng();
|
||||
updateObstaclePosition(obstacle.obstacle_id, Math.round(pos.lng), Math.round(pos.lat));
|
||||
});
|
||||
});
|
||||
|
||||
console.log('Added ' + result.data.length + ' obstacle markers');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading obstacles:', error);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error initializing map:', error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php ob_end_flush(); ?>
|
||||
@@ -1,660 +0,0 @@
|
||||
<?php
|
||||
$headerStyle = 'light';
|
||||
$rootPath = dirname(dirname(__DIR__));
|
||||
include_once($rootPath . '/header.php');
|
||||
?>
|
||||
|
||||
<!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin=""/>
|
||||
|
||||
<style>
|
||||
.track-map-section {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.track-info-box {
|
||||
background: #f9f9f9;
|
||||
padding: 30px;
|
||||
margin: 20px auto;
|
||||
max-width: 1200px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.track-info-box h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.track-info-box p {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Shared marker styling for both legend and map obstacles */
|
||||
.legend-marker,
|
||||
.obstacle-marker {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.legend-marker span,
|
||||
.obstacle-marker span {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.legend-marker.red,
|
||||
.obstacle-marker.red {
|
||||
background: #e61e25;
|
||||
}
|
||||
|
||||
.legend-marker.green,
|
||||
.obstacle-marker.green {
|
||||
background: #28a745;
|
||||
}
|
||||
|
||||
.legend-marker.black,
|
||||
.obstacle-marker.black {
|
||||
background: #343a40;
|
||||
}
|
||||
|
||||
.legend-marker.split,
|
||||
.obstacle-marker.split {
|
||||
background: linear-gradient(45deg, #e61e25 50%, #28a745 50%);
|
||||
}
|
||||
|
||||
.obstacle-marker {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Leaflet marker container */
|
||||
.custom-marker-container {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.obstacle-popup h4 {
|
||||
margin: 0 0 10px 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.obstacle-popup .difficulty-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.obstacle-popup .difficulty-badge.easy {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.obstacle-popup .difficulty-badge.medium {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.obstacle-popup .difficulty-badge.hard {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.obstacle-popup .difficulty-badge.extreme {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
}
|
||||
|
||||
.obstacle-popup img {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin: 10px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.obstacle-popup .description {
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.obstacle-marker:hover {
|
||||
transform: rotate(45deg) scale(1.1);
|
||||
}
|
||||
|
||||
.obstacle-marker span {
|
||||
transform: rotate(-45deg);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* Obstacle Form Modal */
|
||||
.obstacle-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 10000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.obstacle-modal.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.obstacle-modal-content {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.obstacle-modal-content h3 {
|
||||
margin: 0 0 20px 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.obstacle-modal-content .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.obstacle-modal-content label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.obstacle-modal-content input,
|
||||
.obstacle-modal-content select {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.obstacle-modal-content .btn-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.obstacle-modal-content .btn-group button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
z-index: 10001;
|
||||
display: none;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
.alert-message.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert-message.success {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
|
||||
.alert-message.error {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<?php
|
||||
$pageTitle = 'BASE4 4x4 Training Track';
|
||||
$breadcrumbs = [['Home' => 'index.php']];
|
||||
require_once($rootPath . '/components/banner.php');
|
||||
?>
|
||||
|
||||
<!-- Track Map Section -->
|
||||
<section class="track-map-section">
|
||||
<div class="container">
|
||||
<div class="track-info-box">
|
||||
<h3>BASE4 4x4 Training Track</h3>
|
||||
<p>The training track at BASE4 was first created when the property was acquired in 2000. It has since been developed to provide a variety of obstacles and terrain challenges suitable for all skill levels. Open to all members. Join us on our next Driver Training Course to enhance your off-road skills and confidence and put your vehicle to the test.</p>
|
||||
|
||||
<?php if ($role === 'superadmin'): ?>
|
||||
<div style="margin: 20px 0; padding: 15px; background: #fff3cd; border-radius: 8px; border-left: 4px solid #ffc107;">
|
||||
<button id="toggleEditMode" class="btn btn-warning" style="margin-bottom: 10px;">
|
||||
🔧 Enable Edit Mode
|
||||
</button>
|
||||
<p id="editModeStatus" style="margin: 0; color: #856404; font-weight: bold; display: none;">
|
||||
✏️ Edit Mode Active - Click on map to place new markers, drag to reposition
|
||||
</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-marker green"><span></span></div>
|
||||
<span>Beginner</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-marker red"><span></span></div>
|
||||
<span>Intermediate</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-marker black"><span></span></div>
|
||||
<span>Advanced</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map"></div>
|
||||
</section>
|
||||
|
||||
<!-- Obstacle Form Modal -->
|
||||
<div id="obstacleModal" class="obstacle-modal">
|
||||
<div class="obstacle-modal-content">
|
||||
<h3>Add New Obstacle</h3>
|
||||
<form id="obstacleForm">
|
||||
<input type="hidden" id="clickedLat" name="clickedLat">
|
||||
<input type="hidden" id="clickedLng" name="clickedLng">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="obstacleNumber">Obstacle Number *</label>
|
||||
<input type="number" id="obstacleNumber" name="obstacleNumber" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="markerColor">Marker Color *</label>
|
||||
<select id="markerColor" name="markerColor" required>
|
||||
<option value="green">Green (Beginner)</option>
|
||||
<option value="red">Red (Intermediate)</option>
|
||||
<option value="black">Black (Advanced)</option>
|
||||
<option value="split">Split (Mixed)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="obstacleName">Name</label>
|
||||
<input type="text" id="obstacleName" name="obstacleName" value="New Obstacle">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="obstacleDifficulty">Difficulty</label>
|
||||
<select id="obstacleDifficulty" name="obstacleDifficulty">
|
||||
<option value="Easy">Easy</option>
|
||||
<option value="Medium" selected>Medium</option>
|
||||
<option value="Hard">Hard</option>
|
||||
<option value="Extreme">Extreme</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeObstacleModal()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Save Obstacle</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert Message -->
|
||||
<div id="alertMessage" class="alert-message"></div>
|
||||
|
||||
<?php
|
||||
require_once($rootPath . '/components/insta_footer.php');
|
||||
?>
|
||||
|
||||
<!-- Leaflet JS -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||||
crossorigin=""></script>
|
||||
|
||||
<!-- Track Map JavaScript -->
|
||||
<script>
|
||||
console.log('Track map script loaded');
|
||||
|
||||
// Check if Leaflet is available
|
||||
if (typeof L === 'undefined') {
|
||||
console.error('Leaflet library not loaded!');
|
||||
} else {
|
||||
console.log('Leaflet library is available, version:', L.version);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('DOM loaded, initializing map...');
|
||||
|
||||
const mapElement = document.getElementById('map');
|
||||
console.log('Map element:', mapElement);
|
||||
|
||||
if (!mapElement) {
|
||||
console.error('Map element not found!');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Map element dimensions:', mapElement.offsetWidth, 'x', mapElement.offsetHeight);
|
||||
|
||||
try {
|
||||
// Image dimensions: 2876 x 2035 pixels
|
||||
const imageWidth = 7942;
|
||||
const imageHeight = 3913;
|
||||
|
||||
// Create map with simple CRS (pixel coordinates)
|
||||
// Note: Leaflet uses [y, x] format, so bounds are [[0, 0], [height, width]]
|
||||
const bounds = [[0, 0], [imageHeight, imageWidth]];
|
||||
const map = L.map('map', {
|
||||
crs: L.CRS.Simple,
|
||||
minZoom: -1.5,
|
||||
maxZoom: 2,
|
||||
center: [imageHeight / 2, imageWidth / 2],
|
||||
zoom: -1,
|
||||
maxBounds: bounds,
|
||||
maxBoundsViscosity: 1.0
|
||||
});
|
||||
console.log('Map object created with CRS.Simple:', map);
|
||||
|
||||
// Add aerial image overlay
|
||||
const imageUrl = '/assets/images/track-aerial.jpg';
|
||||
L.imageOverlay(imageUrl, bounds).addTo(map);
|
||||
console.log('Aerial image overlay added');
|
||||
|
||||
// Add SVG overlay
|
||||
const svgUrl = '/assets/images/track-route.svg';
|
||||
L.imageOverlay(svgUrl, bounds, {
|
||||
opacity: 1,
|
||||
interactive: false
|
||||
}).addTo(map);
|
||||
console.log('SVG route overlay added');
|
||||
|
||||
// Fit map to image bounds
|
||||
map.fitBounds(bounds);
|
||||
|
||||
console.log('Map initialized successfully');
|
||||
|
||||
// Edit mode state
|
||||
let editMode = false;
|
||||
let markers = [];
|
||||
|
||||
// Edit mode toggle (only for admins)
|
||||
const toggleBtn = document.getElementById('toggleEditMode');
|
||||
const statusText = document.getElementById('editModeStatus');
|
||||
|
||||
if (toggleBtn) {
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
editMode = !editMode;
|
||||
if (editMode) {
|
||||
toggleBtn.textContent = '🔒 Disable Edit Mode';
|
||||
toggleBtn.classList.remove('btn-warning');
|
||||
toggleBtn.classList.add('btn-success');
|
||||
statusText.style.display = 'block';
|
||||
|
||||
// Make existing markers draggable
|
||||
markers.forEach(m => m.marker.dragging.enable());
|
||||
} else {
|
||||
toggleBtn.textContent = '🔧 Enable Edit Mode';
|
||||
toggleBtn.classList.remove('btn-success');
|
||||
toggleBtn.classList.add('btn-warning');
|
||||
statusText.style.display = 'none';
|
||||
|
||||
// Disable dragging
|
||||
markers.forEach(m => m.marker.dragging.disable());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Click on map to add new marker (only in edit mode)
|
||||
map.on('click', (e) => {
|
||||
if (!editMode) return;
|
||||
|
||||
const coords = e.latlng;
|
||||
|
||||
// Store clicked coordinates and show modal
|
||||
document.getElementById('clickedLat').value = coords.lat;
|
||||
document.getElementById('clickedLng').value = coords.lng;
|
||||
document.getElementById('obstacleModal').classList.add('show');
|
||||
});
|
||||
|
||||
// Modal functions
|
||||
window.closeObstacleModal = function() {
|
||||
document.getElementById('obstacleModal').classList.remove('show');
|
||||
document.getElementById('obstacleForm').reset();
|
||||
};
|
||||
|
||||
window.showAlert = function(message, type = 'success') {
|
||||
const alertDiv = document.getElementById('alertMessage');
|
||||
alertDiv.textContent = message;
|
||||
alertDiv.className = 'alert-message ' + type + ' show';
|
||||
|
||||
setTimeout(() => {
|
||||
alertDiv.classList.remove('show');
|
||||
}, 4000);
|
||||
};
|
||||
|
||||
// Handle form submission
|
||||
document.getElementById('obstacleForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const lat = parseFloat(document.getElementById('clickedLat').value);
|
||||
const lng = parseFloat(document.getElementById('clickedLng').value);
|
||||
const obstacleNumber = document.getElementById('obstacleNumber').value;
|
||||
const markerColor = document.getElementById('markerColor').value;
|
||||
const name = document.getElementById('obstacleName').value;
|
||||
const difficulty = document.getElementById('obstacleDifficulty').value;
|
||||
|
||||
// Create temporary marker
|
||||
const markerHtml = `
|
||||
<div class="obstacle-marker ${markerColor}">
|
||||
<span>${obstacleNumber}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const customIcon = L.divIcon({
|
||||
html: markerHtml,
|
||||
className: 'custom-marker-container',
|
||||
iconSize: [40, 40],
|
||||
iconAnchor: [20, 20]
|
||||
});
|
||||
|
||||
const marker = L.marker([lat, lng], {
|
||||
icon: customIcon,
|
||||
draggable: true
|
||||
}).addTo(map);
|
||||
|
||||
// Save to database
|
||||
const obstacleData = {
|
||||
obstacle_number: obstacleNumber,
|
||||
x_position: Math.round(lng),
|
||||
y_position: Math.round(lat),
|
||||
marker_color: markerColor,
|
||||
name: name,
|
||||
difficulty: difficulty,
|
||||
description: 'New obstacle - edit details in admin panel'
|
||||
};
|
||||
|
||||
saveObstacle(obstacleData, marker);
|
||||
closeObstacleModal();
|
||||
});
|
||||
|
||||
function saveObstacle(data, marker) {
|
||||
fetch('/src/processors/track-obstacles.php?action=create', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.status === 'success') {
|
||||
showAlert('Obstacle #' + data.obstacle_number + ' created successfully!', 'success');
|
||||
marker.obstacleId = result.obstacle_id;
|
||||
markers.push({ marker, data: {...data, obstacle_id: result.obstacle_id} });
|
||||
|
||||
// Add dragend event to update position
|
||||
marker.on('dragend', function() {
|
||||
const pos = marker.getLatLng();
|
||||
updateObstaclePosition(marker.obstacleId, Math.round(pos.lng), Math.round(pos.lat));
|
||||
});
|
||||
} else {
|
||||
showAlert('Error: ' + result.message, 'error');
|
||||
map.removeLayer(marker);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showAlert('Error creating obstacle: ' + error, 'error');
|
||||
map.removeLayer(marker);
|
||||
});
|
||||
}
|
||||
|
||||
function updateObstaclePosition(obstacleId, x, y) {
|
||||
fetch('/src/processors/track-obstacles.php?action=updatePosition', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
obstacle_id: obstacleId,
|
||||
x_position: x,
|
||||
y_position: y
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.status === 'success') {
|
||||
showAlert('Position updated', 'success');
|
||||
} else {
|
||||
showAlert('Error updating position: ' + result.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fetch and add obstacle markers
|
||||
fetch('/src/processors/track-obstacles.php?action=getAll')
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
console.log('Obstacles data:', result);
|
||||
|
||||
if (result.status === 'success' && result.data) {
|
||||
result.data.forEach((obstacle, index) => {
|
||||
// Leaflet uses [y, x] format for coordinates
|
||||
const position = [obstacle.y_position, obstacle.x_position];
|
||||
|
||||
// Create custom marker HTML
|
||||
const markerHtml = `
|
||||
<div class="obstacle-marker ${obstacle.marker_color}">
|
||||
<span>${obstacle.obstacle_number}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Create custom icon
|
||||
const customIcon = L.divIcon({
|
||||
html: markerHtml,
|
||||
className: 'custom-marker-container',
|
||||
iconSize: [40, 40],
|
||||
iconAnchor: [20, 20]
|
||||
});
|
||||
|
||||
// Create popup content
|
||||
const popupContent = `
|
||||
<div class="obstacle-popup">
|
||||
<h4>${obstacle.name}</h4>
|
||||
<span class="difficulty-badge ${obstacle.difficulty.toLowerCase()}">${obstacle.difficulty}</span>
|
||||
${obstacle.image_path ? `<img src="${obstacle.image_path}" alt="${obstacle.name}" style="width: 100%; max-width: 300px; margin: 10px 0; border-radius: 8px;">` : ''}
|
||||
<p>${obstacle.description}</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add marker to map
|
||||
const marker = L.marker(position, {
|
||||
icon: customIcon,
|
||||
draggable: false
|
||||
})
|
||||
.addTo(map)
|
||||
.bindPopup(popupContent, {
|
||||
maxWidth: 350,
|
||||
className: 'obstacle-popup-container'
|
||||
});
|
||||
|
||||
marker.obstacleId = obstacle.obstacle_id;
|
||||
markers.push({ marker, data: obstacle });
|
||||
|
||||
// Add dragend event for position updates
|
||||
marker.on('dragend', function() {
|
||||
const pos = marker.getLatLng();
|
||||
updateObstaclePosition(obstacle.obstacle_id, Math.round(pos.lng), Math.round(pos.lat));
|
||||
});
|
||||
});
|
||||
|
||||
console.log('Added ' + result.data.length + ' obstacle markers');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading obstacles:', error);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error initializing map:', error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php ob_end_flush(); ?>
|
||||
Reference in New Issue
Block a user