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

@ -12,6 +12,7 @@
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
<link rel="stylesheet" href="/static/traffic.css">
<script src="/static/demo_auth.js"></script>
<script src="/static/event-types.js"></script>
</head>
<body>
<div class="container">
@ -187,11 +188,6 @@
</div>
</div>
<button id="geolocateBtn" class="geolocation-btn">
<span id="geolocateSpinner" class="loading" style="display: none;"></span>
Obtenir ma position actuelle
</button>
<span id="gpsStatus" class="gps-status" title="État GPS">GPS: inconnu</span>
<form id="trafficForm">
<div class="form-group">
@ -269,7 +265,13 @@
<div class="form-group">
<label class="required">Location</label>
<div id="map"></div>
<div class="note">Cliquez sur la carte pour définir la localisation du problème ou utilisez le bouton "Obtenir ma position actuelle"</div>
<div style="margin-top: 10px;">
<button type="button" id="geolocateMapBtn" class="geolocation-btn" style="background-color: #28a745; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">
📍 Obtenir ma position actuelle
</button>
<span id="geolocateStatus" class="gps-status" style="margin-left: 10px; font-size: 0.9em; color: #666;">Cliquez pour vous géolocaliser</span>
</div>
<div class="note">Cliquez sur la carte pour définir la localisation du problème ou utilisez le bouton de géolocalisation</div>
</div>
<button id="report_issue_button" type="submit" disabled>Signaler le problème</button>
@ -622,10 +624,14 @@
}
// Handle geolocation button click
document.getElementById('geolocateBtn').addEventListener('click', function() {
// Show loading spinner
document.getElementById('geolocateSpinner').style.display = 'inline-block';
document.getElementById('geolocateMapBtn').addEventListener('click', function() {
// Update button text and disable it
const originalText = this.textContent;
this.textContent = '📍 Localisation en cours...';
this.disabled = true;
const statusElement = document.getElementById('geolocateStatus');
statusElement.textContent = 'Localisation en cours...';
// Check if geolocation is available
if (navigator.geolocation) {
@ -644,12 +650,17 @@
zoom: 14
});
// Hide loading spinner
document.getElementById('geolocateSpinner').style.display = 'none';
document.getElementById('geolocateBtn').disabled = false;
// Reset button
document.getElementById('geolocateMapBtn').textContent = '📍 Position obtenue';
document.getElementById('geolocateMapBtn').disabled = false;
document.getElementById('geolocateMapBtn').style.backgroundColor = '#28a745';
const statusElement = document.getElementById('geolocateStatus');
statusElement.textContent = `Position: ${lat.toFixed(4)}, ${lng.toFixed(4)}`;
statusElement.style.color = '#28a745';
// Show success message
showResult('Current location detected successfully', 'success');
showResult('Position actuelle détectée avec succès', 'success');
// Validate form after setting marker
validateForm();
@ -684,26 +695,34 @@
},
// Error callback
function(error) {
// Hide loading spinner
document.getElementById('geolocateSpinner').style.display = 'none';
document.getElementById('geolocateBtn').disabled = false;
// Reset button
document.getElementById('geolocateMapBtn').textContent = '📍 Réessayer la géolocalisation';
document.getElementById('geolocateMapBtn').disabled = false;
document.getElementById('geolocateMapBtn').style.backgroundColor = '#dc3545';
const statusElement = document.getElementById('geolocateStatus');
// Show error message
let errorMsg = 'Unable to get your location. ';
let errorMsg = 'Impossible d\'obtenir votre position. ';
switch(error.code) {
case error.PERMISSION_DENIED:
errorMsg += 'You denied the request for geolocation.';
errorMsg += 'Vous avez refusé la demande de géolocalisation.';
statusElement.textContent = 'Permission refusée';
break;
case error.POSITION_UNAVAILABLE:
errorMsg += 'Location information is unavailable.';
errorMsg += 'Les informations de position ne sont pas disponibles.';
statusElement.textContent = 'Position indisponible';
break;
case error.TIMEOUT:
errorMsg += 'The request to get your location timed out.';
errorMsg += 'La demande de géolocalisation a expiré.';
statusElement.textContent = 'Temps dépassé';
break;
case error.UNKNOWN_ERROR:
errorMsg += 'An unknown error occurred.';
errorMsg += 'Une erreur inconnue s\'est produite.';
statusElement.textContent = 'Erreur inconnue';
break;
}
statusElement.style.color = '#dc3545';
showResult(errorMsg, 'error');
},
// Options
@ -714,12 +733,17 @@
}
);
} else {
// Hide loading spinner
document.getElementById('geolocateSpinner').style.display = 'none';
document.getElementById('geolocateBtn').disabled = false;
// Reset button
document.getElementById('geolocateMapBtn').textContent = '📍 Non supporté';
document.getElementById('geolocateMapBtn').disabled = true;
document.getElementById('geolocateMapBtn').style.backgroundColor = '#6c757d';
const statusElement = document.getElementById('geolocateStatus');
statusElement.textContent = 'Géolocalisation non supportée';
statusElement.style.color = '#dc3545';
// Show error message
showResult('Geolocation is not supported by your browser', 'error');
showResult('La géolocalisation n\'est pas supportée par votre navigateur', 'error');
}
});