QA page
This commit is contained in:
parent
dea71fc6b3
commit
11cd3236c5
13 changed files with 1952 additions and 71 deletions
|
@ -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();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue