From ee49adc084b8a3b82794a9ccac0dc4bc3cd0de8a Mon Sep 17 00:00:00 2001 From: orson Date: Mon, 14 Apr 2025 17:24:31 -0600 Subject: [PATCH] fixed crosshair and part of the dashboard displays --- app.py | 6 ++- static/styles.css | 15 +++++++- templates/add_pin.html | 9 ++++- templates/base.html | 21 +++++----- templates/camera.html | 78 ++++++++++++++++++++++++++++++++++---- templates/dashboard.html | 51 +++++++++++++++++++++---- templates/index.html | 4 +- templates/leaderboard.html | 2 +- 8 files changed, 154 insertions(+), 32 deletions(-) diff --git a/app.py b/app.py index 550bd14..3fbb25f 100644 --- a/app.py +++ b/app.py @@ -275,7 +275,8 @@ def create_app(config=Config): qr_update = mongo.db.users.update_one({'_id': ObjectId(current_user.id)}, {'$set': {'referral_code': invite_code}}) print(invite_code) if not current_user.is_admin: - pins = list(mongo.db.pins.find({"added_by": current_user.id})) + pins = list(mongo.db.pins.find({"added_by": current_user.id}).sort("time", -1)) + print(pins) return render_template('dashboard.html', pins=pins, invite_code=invite_code) if current_user.is_admin: users = list(mongo.db.users.find()) @@ -362,7 +363,7 @@ def create_app(config=Config): if len(username) >= 2: cleaned_username = username[0] + "***" + username[-1] else: - cleaned_username = username + cleaned_username = username+"***"+random.choice(string.ascii_letters, k=1) cleaned_leaders.append({"username": cleaned_username, "count": count}) except Exception as e: print(f"Error processing user_id {user_id}: {e}") @@ -385,6 +386,7 @@ def create_app(config=Config): # Calculate percentage (handle case where total_users might be 0) active_percentage = round((active_users / total_users) * 100, 1) if total_users > 0 else 0 + return render_template('leaderboard.html', leaders=cleaned_leaders, percentage = active_percentage) diff --git a/static/styles.css b/static/styles.css index d1f89fa..960309d 100644 --- a/static/styles.css +++ b/static/styles.css @@ -398,7 +398,9 @@ section#pinner-modal::-webkit-scrollbar-thumb { /* Animation removed as it was causing visibility issues */ } - +#dash-container { + max-width: 75vw; +} /* Notifications */ .flashes { @@ -422,6 +424,13 @@ ul.flashes li { font-size: 1.2rem; color: black; } + +/*/html/body/main/div[1]/div[1]/div[2]/svg/g/path */ + +path { + cursor: crosshair !important; +} + /* Animations */ @keyframes fadeOut { 0% { opacity: 1; transform: translateY(0); } @@ -474,7 +483,9 @@ ul.flashes li { nav ul { justify-content: center; } - + #dash-container { + max-width: 95vw; + } } @media (min-width: 812px) { diff --git a/templates/add_pin.html b/templates/add_pin.html index a8d4fa0..4e57ae1 100644 --- a/templates/add_pin.html +++ b/templates/add_pin.html @@ -28,7 +28,14 @@ diff --git a/templates/base.html b/templates/base.html index 2df1d7d..9efecd3 100644 --- a/templates/base.html +++ b/templates/base.html @@ -17,14 +17,15 @@ integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""> - - - - - - - + + + + + + + +
@@ -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.

-
+
-
-

Tu link es:

-

https://baches.qro.mx/registrame/{{invite_code}}

+
+ + + +

¡Cada vez que recargas esta página, tu código de invitación cambia para prevenir malos usos!

+

Asegúrate de que a quien invites use su invitación de inmediato 😈

{% if pins %} {% for pin in pins %} - -
+
Foto de mejora urbana

{{ pin.typeofpin }}

-

Agregado el: {{ pin.time }}

+

Agregado: {{ pin.time }}

+ {% if pin.reviewed and pin.reviewed == False %}

Estado: Pendiente de revisión

{% endif %} +

Modificado: {% if pin.last_mod %} {{pin.last_mod}} {% endif %}

Descripción: {{ pin.description }}

Dirección: {{ pin.address }}

Coordenadas: {{ pin.lat }}, {{ pin.lng }}

diff --git a/templates/index.html b/templates/index.html index 08f7d39..647c95a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,7 +1,7 @@ {% extends 'base.html' %} {% block content %} -
+