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