This commit is contained in:
Tykayn 2025-09-27 01:10:47 +02:00 committed by tykayn
parent dea71fc6b3
commit 11cd3236c5
13 changed files with 1952 additions and 71 deletions

View file

@ -38,6 +38,7 @@ class EventFormResource:
<link href="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/@mapbox/mapbox-gl-draw@1.4.3/dist/mapbox-gl-draw.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@mapbox/mapbox-gl-draw@1.4.3/dist/mapbox-gl-draw.css" type="text/css" />
<script src="/static/event-types.js"></script>
<style>
body {
margin: 0;
@ -167,8 +168,11 @@ class EventFormResource:
<div class="form-group">
<label for="what" >What</label>
<input type="text" id="what" name="what" placeholder="e.g., sport.match.football" >
<div class="note">Category of the event (e.g., sport.match.football, culture.festival)</div>
<input type="text" id="what" name="what" placeholder="e.g., traffic.accident, culture.music" >
<div class="note">
Catégorie de l'événement - Cliquez dans le champ ou utilisez le bouton pour voir les suggestions<br>
<small style="color: #0078ff;">💡 Tapez au moins 2 caractères pour filtrer les suggestions</small>
</div>
</div>
</div>
@ -201,7 +205,13 @@ class EventFormResource:
<div class="form-group">
<label >Location</label>
<div id="map"></div>
<div class="note">Click on the map to set the event location</div>
<div style="margin-top: 10px; text-align: center;">
<button type="button" id="geolocateBtn" style="background-color: #28a745; margin-bottom: 10px;">
<span id="geolocateSpinner" style="display: none;"></span>
📍 Obtenir ma position actuelle
</button>
</div>
<div class="note">Click on the map to set the event location or use the geolocation button above</div>
</div>
<button type="submit">Create Event</button>
@ -219,8 +229,11 @@ class EventFormResource:
// Set start time to current time
document.getElementById('start').value = today;
// Set end time to current time
document.getElementById('stop').value = today;
// Set end time to current time + 1 hour
const oneHourLater = new Date(now);
oneHourLater.setHours(oneHourLater.getHours() + 1);
const oneHourLaterStr = oneHourLater.toISOString().slice(0, 16); // Format: YYYY-MM-DDThh:mm
document.getElementById('stop').value = oneHourLaterStr;
}
// Call function to set default dates
@ -249,7 +262,89 @@ class EventFormResource:
map.on('click', function(e) {
marker.setLngLat(e.lngLat).addTo(map);
});
// Handle geolocation button click
document.getElementById('geolocateBtn').addEventListener('click', function() {
// Show loading spinner
document.getElementById('geolocateSpinner').style.display = 'inline-block';
this.disabled = true;
// Check if geolocation is available
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
// Success callback
function(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
// Set marker at current location
marker.setLngLat([lng, lat]).addTo(map);
// Center map on current location
map.flyTo({
center: [lng, lat],
zoom: 14
});
// Hide loading spinner
document.getElementById('geolocateSpinner').style.display = 'none';
document.getElementById('geolocateBtn').disabled = false;
// Show success message
showResult('Position actuelle détectée avec succès', 'success');
},
// Error callback
function(error) {
// Hide loading spinner
document.getElementById('geolocateSpinner').style.display = 'none';
document.getElementById('geolocateBtn').disabled = false;
// Show error message
let errorMsg = 'Impossible d\'obtenir votre position. ';
switch(error.code) {
case error.PERMISSION_DENIED:
errorMsg += 'Vous avez refusé la demande de géolocalisation.';
break;
case error.POSITION_UNAVAILABLE:
errorMsg += 'Les informations de localisation ne sont pas disponibles.';
break;
case error.TIMEOUT:
errorMsg += 'La demande de géolocalisation a expiré.';
break;
case error.UNKNOWN_ERROR:
errorMsg += 'Une erreur inconnue s\'est produite.';
break;
}
showResult(errorMsg, 'error');
},
// Options
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
}
);
} else {
// Hide loading spinner
document.getElementById('geolocateSpinner').style.display = 'none';
document.getElementById('geolocateBtn').disabled = false;
// Show error message
showResult('La géolocalisation n\'est pas supportée par votre navigateur', 'error');
}
});
// Initialize autocomplete for "what" field
document.addEventListener('DOMContentLoaded', function() {
const whatInput = document.getElementById('what');
if (whatInput && window.initializeEventTypeAutocomplete) {
initializeEventTypeAutocomplete(whatInput, function(suggestion) {
console.log('Type d\'événement sélectionné:', suggestion);
});
console.log('✅ Autocomplétion initialisée pour le champ "what"');
}
});
// Handle form submission
document.getElementById('eventForm').addEventListener('submit', function(e) {
e.preventDefault();