@@ -82,6 +91,11 @@
const form = document.getElementById('camera-form');
const fallbackInput = document.getElementById('file-fallback');
const hasImageInput = document.getElementById('has_image');
+ const locationStatus = document.getElementById('location-status');
+
+ // Location tracking variables
+ let hasLocation = false;
+ let watchId = null;
// Set up camera stream
async function setupCamera() {
@@ -108,6 +122,17 @@
console.error('getUserMedia not supported');
fallbackInput.style.display = 'block';
}
+
+ // Check if we can enable the send button
+ function updateSendButtonState() {
+ if (hasImageInput.value === 'true' && hasLocation) {
+ sendBtn.disabled = false;
+ sendBtn.style.opacity = '1';
+ } else {
+ sendBtn.disabled = true;
+ sendBtn.style.opacity = '0.5';
+ }
+ }
// Capture photo from video feed
captureBtn.addEventListener('click', function() {
@@ -128,6 +153,9 @@
// Mark that we have an image
hasImageInput.value = 'true';
+
+ // Check if we can enable send button
+ updateSendButtonState();
});
// Retake photo
@@ -143,7 +171,7 @@
// Send photo
sendBtn.addEventListener('click', function() {
- if (hasImageInput.value === 'true') {
+ if (hasImageInput.value === 'true' && hasLocation) {
// Convert canvas to blob and append to FormData
canvas.toBlob(function(blob) {
const formData = new FormData(form);
@@ -169,26 +197,62 @@
}
}).catch(error => console.error('Error:', error));
}, 'image/jpeg', 0.9);
+ } else if (!hasLocation) {
+ alert('Esperando ubicación GPS. Por favor espera.');
}
});
// Request Geolocation Permission and Set Form Fields
if ('geolocation' in navigator) {
- navigator.geolocation.getCurrentPosition(
+ locationStatus.textContent = 'Obteniendo ubicación...';
+ locationStatus.style.backgroundColor = 'rgba(255, 165, 0, 0.7)'; // Orange
+
+ // Start watching position for more accurate results
+ watchId = navigator.geolocation.watchPosition(
(position) => {
document.getElementById('latitude').value = position.coords.latitude;
document.getElementById('longitude').value = position.coords.longitude;
+ hasLocation = true;
+ locationStatus.textContent = 'Ubicación: ✓';
+ locationStatus.style.backgroundColor = 'rgba(0, 128, 0, 0.7)'; // Green
+ updateSendButtonState();
+
+ // Once we get a good reading, we can stop watching
+ if (position.coords.accuracy < 100) { // If accuracy is under 100 meters
+ navigator.geolocation.clearWatch(watchId);
+ }
},
(error) => {
console.error('Error getting location:', error);
+ locationStatus.textContent = 'Error de ubicación';
+ locationStatus.style.backgroundColor = 'rgba(255, 0, 0, 0.7)'; // Red
+
+ // Try getting location once more with different options
+ navigator.geolocation.getCurrentPosition(
+ (position) => {
+ document.getElementById('latitude').value = position.coords.latitude;
+ document.getElementById('longitude').value = position.coords.longitude;
+ hasLocation = true;
+ locationStatus.textContent = 'Ubicación: ✓';
+ locationStatus.style.backgroundColor = 'rgba(0, 128, 0, 0.7)'; // Green
+ updateSendButtonState();
+ },
+ (error) => {
+ console.error('Final error getting location:', error);
+ locationStatus.textContent = 'Error de ubicación';
+ },
+ { maximumAge: 60000, timeout: 10000 }
+ );
},
{
enableHighAccuracy: true,
- timeout: 5000
+ timeout: 10000
}
);
} else {
console.error('Geolocation not supported in this browser.');
+ locationStatus.textContent = 'GPS no soportado';
+ locationStatus.style.backgroundColor = 'rgba(255, 0, 0, 0.7)'; // Red
}
{% endblock %}
\ No newline at end of file
diff --git a/templates/dashboard.html b/templates/dashboard.html
index d241b31..fe26007 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -7,11 +7,11 @@
overflow-y: scroll;
}
-
+
Hola {{current_user.username}}
Aquí puedes ver los pines que has agregado y consultar tu enlace/QR de invitación. Cada vez que recargas esta página, tu enlace de invitacón cambia y el anterior se vuelve inválido.