fixed issues with registration and with icon displays

app.py

@@ -74,7 +74,20 @@ def create_app(config=Config):
         if request.method == 'GET':
             form = PinForm()
             pins = mongo.db.pins.find()
-            return render_template('index.html', pins=pins, form=form)
+            clean_pins=[]
+            for pin in pins:
+                pin['_id'] = str(pin['_id'])
+                if 'time' in pin and pin['time']:
+                    pin['time'] = pin['time'].strftime("%d/%m/%Y %H:%M")
+                if 'last_mod' in pin and pin['last_mod']:
+                    pin['last_mod'] = pin['last_mod'].strftime("%d/%m/%Y %H:%M")
+                if 'reviewed' in pin:
+                    pin['reviewed'] = str(pin['reviewed'])
+                if 'fixed' in pin:
+                    pin['fixed'] = str(pin['fixed'])
+                clean_pins.append(pin)
+            print(type(pins))
+            return render_template('index.html', pins=clean_pins, form=form)
         else:
             form = request.form
             try:
@@ -149,7 +162,7 @@ def create_app(config=Config):
             #return render_template('dashboard.html', invite_link=invite_link)
         
         if request.method == 'GET':
-            return render_template('register.html', form=RegistrationForm())
+            return render_template('register.html', rform=RegistrationForm())
 
     @app.route('/thelogin', methods=['GET', 'POST'])
     def thelogin():
@@ -245,7 +258,9 @@ def create_app(config=Config):
     @app.route('/manifest.json')
     def manifest():
         return send_from_directory('static', 'manifest.json')
-
+    @app.route('/src')
+    def src():
+        return send_from_directory('static', 'src')
     @app.route('/dashboard')
     @login_required
     def dashboard():
@@ -254,7 +269,7 @@ def create_app(config=Config):
             #    return redirect(url_for('thelogin'))
             #else:
         old_qr = mongo.db.users.find_one({'_id': ObjectId(current_user.id)})
-        print(old_qr)
+        print(old_qr.get('referral_code'))
         invite_code = str(uuid4())
         qr_update = mongo.db.users.update_one({'_id': ObjectId(current_user.id)}, {'$set': {'referral_code': invite_code}})
         print(invite_code)

static/styles.css

@@ -256,11 +256,11 @@ button:hover::after {
     opacity: 1;
 }
 
-/* #pinner-top {
+#pinner-top {
     background-color: rgba(0, 0, 0, 0.2);
     color: white;
     border-radius: 4px;
-} */
+}
 
 button a {
     color: white;
@@ -360,6 +360,12 @@ section#pinner-modal::-webkit-scrollbar-thumb {
     font-size: 1.5rem;
     /* filter: drop-shadow(0 0 0.2rem var(--accent-color)); */
 }
+
+.indicator {
+    color: tomato;
+    filter: drop-shadow 0 0 0.2rem var(--accent-color);
+}
+
 .control-button {
     position: fixed;
     bottom: 30px;
@@ -367,7 +373,6 @@ section#pinner-modal::-webkit-scrollbar-thumb {
     width: 15vw;
     height: 15vw;
     /* transform: translateX(-50%); */
-    padding: 15px 30px;
     background-color: rgba(60, 245, 9, 0.8);
     border-radius: 100%;
     border: 4px solid rgba(255, 255, 255, 0.5);

templates/base.html

@@ -10,6 +10,9 @@
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
+    <!-- <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.src.js"
+    integrity="sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU="
+    crossorigin=""></script> -->
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
@@ -17,11 +20,16 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 <link rel="icon" href="{{ url_for('static', filename='images/favico.ico') }}" type="image/x-icon">
 <link rel="shortcut icon" href="{{ url_for('static', filename='images/favico.ico') }}" type="image/x-icon">
-    
+<!-- <script src="https://app.unpkg.com/leaflet.markercluster@1.4.1/files/dist/leaflet.markercluster.js" type="text/javascript"></script> -->
+<script type="application/importmap" src="https://app.unpkg.com/leaflet.markercluster@1.4.1/files/dist/leaflet.markercluster-src.js.map"></script>
+<link href="https://app.unpkg.com/leaflet.markercluster@1.4.1/files/dist/MarkerCluster.css">
+<link href="https://app.unpkg.com/leaflet.markercluster@1.4.1/files/dist/MarkerCluster.Default.css">
     <script src="{{ url_for('static', filename='leaflet.markercluster.js')}}"></script>
-    <script type="importmap" src="{{ url_for('static', filename='leaflet.markercluster.js.map')}}"></script>
+    <!-- <script src="{{ url_for('static', filename='src/MarkerClusterGroup.js')}}"></script> -->
+
+    <!-- <script type="importmap" src="{{ url_for('static', filename='leaflet.markercluster.js.map')}}"></script>
     <link href="{{ url_for('static', filename='MarkerCluster.css')}}">
-    <link href="{{ url_for('static', filename='MarkerCluster.Default.css')}}">
+    <link href="{{ url_for('static', filename='MarkerCluster.Default.css')}}"> -->
     <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
 
     <!-- Primary Meta Tags -->
@@ -87,7 +95,7 @@
         </div>
         {% endif %}
     {% endwith %}
-    <main class="container-fluid" style="padding:0px;height: 100vh; width:100vw; z-index: 5; position: static;">
+    <main class="container-fluid" style="padding:0px;height: 100vh; width:100vw; z-index: 5; position: static; display: block;">
 
         {% block content %}
 

templates/camera.html

@@ -134,7 +134,7 @@
     retakeBtn.addEventListener('click', function() {
         canvas.style.display = 'none';
         video.style.display = 'block';
-        captureBtn.style.display = 'inline-block';
+        captureBtn.style.display = 'flex';
         retakeBtn.style.display = 'none';
         sendBtn.style.display = 'none';
         hasImageInput.value = 'false';

templates/dashboard.html

@@ -7,7 +7,7 @@
     overflow-y: scroll;
   }
 </style>
-<div class="container-fluid" style="padding-top: 30px; max-width: 75vw; background-color: rgba(189, 216, 3, 0.9); padding: 3rem;">
+<div class="container-fluid" style="max-width: 75vw; background-color: rgba(189, 216, 3, 0.9); padding: 3rem; padding-top:10rem;display:block">
 <h3>Hola <span style="color: darkgreen;">{{current_user.username}}</span></h3>
 <p>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.</p>
 <div class="grid" style="padding-bottom: 2rem;">

templates/index.html

@@ -3,10 +3,16 @@
 {% block content %}
         <div id="map" style="height: 100%; position: static;"></div>
         <script>
-            var map = new L.map('map', {zoomControl: false}, center=([20.57, -100.38], zoom=16));
+        // document.addEventListener('DOMContentLoaded', function() {
-            var user_marker = new L.marker([20.57, -100.38]);
+            var map = new L.map('map', {center: [20.57, -100.38], zoom:16, zoomControl: false });
-            var user_radial = new L.circle(L.circle(user_marker.latlng));
+            console.warn("Mapa creado");
-
+            // Initialize user_marker with a default position
+            var user_marker = new L.marker([20.57, -100.38]).addTo(map);
+            document.addEventListener('DOMContentLoaded', function() {
+                getLocation();
+            });
+            var user_radial = new L.circle([20.57, -100.38], {radius:200}).addTo(map);
+            console.warn("Mapa cargado");
             L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                 attribution: '© OpenStreetMap contributors',
                 detectRetina: true,
@@ -17,47 +23,22 @@
             }).addTo(map);
             //types of markers
             var iconTypes = {
-                'bache': '<i class="fas fa-exclamation-triangle"></i>',
+                'bache': '<i class="indicator fas fa-exclamation-triangle"></i>',
-                'coladera': '<i class="fas fa-ring"></i>',
+                'coladera': '<i class="indicator fas fa-ring"></i>',
-                'obra sin terminar': '<i class="fas fa-wrench"></i>',
+                'obra sin terminar': '<i class="indicator fas fa-wrench"></i>',
-                'escombro': '<i class="far fa-trash-alt"></i>',
+                'escombro': '<i class="indicator far fa-trash-alt"></i>',
-                'robo-asalto': '<i class="fas fa-skull"></i>',
+                'robo-asalto': '<i class="indicator fas fa-skull"></i>',
-                'biciestacionamiento': '<i class="fas fa-flag-checkered"></i>',
+                'biciestacionamiento': '<i class="indicator fas fa-flag-checkered"></i>',
-                'mala iluminación': '<i class="far fa-lightbulb"></i>',
+                'mala iluminación': '<i class="indicator far fa-lightbulb"></i>',
-                'bici blanca': '<i style="color:white" class="fas fa-bicycle"></i>',
+                'bici blanca': '<i style="color:white" class="indicator fas fa-bicycle"></i>',
-                'zapato blanco': '<i style="color:white" class="fas fa-shoe-prints"></i>',
+                'zapato blanco': '<i style="color:white" class="indicator fas fa-shoe-prints"></i>',
             };
-            var markerCluster = L.markerClusterGroup();
-
-            //new markerCluster = window.L.MarkerClusterGroup();
-            {% for pin in pins %}
             
-            var icon = L.divIcon({
-                className: '{{pin.typeofpin}}',
-                html: iconTypes['{{pin.typeofpin}}'],
-                iconSize:[10,10],
-                iconAnchor:[5,5],
-            });
-            var marker = L.marker([{{ pin.lat }}, {{ pin.lng }}], {icon: icon});
-            var popupContent = "<div class='container' style='width:301px'><div style='display: grid; grid-template-columns: 1fr 1fr; gap: 10px;'><div><b>{{ pin.description }}</b>{% if pin.address %}<br>{{pin.address}}{% endif %}<p>Fecha del reporte: {{pin.time}}</p></div><div><img src='{{ pin.photo }}' style='width:100%'></div></div></div>";
-            
-            marker.bindPopup(popupContent, {
-                autoPan: true,
-                autoPanPadding: [100, 100], // Large padding to position towards the area with more space
-                maxWidth: 300
-            });
-            
-            markerCluster.addLayer(marker);
-
-            //markerCluster.addlayer(
-            //L.marker([{{ pin.lat }}, {{ pin.lng }}], {icon: icon}).addTo(map)
-            //    .bindPopup("<b>{{ pin.description }}</b><p>Fecha del reporte: {{pin.time}}</p><br><img src='{{ pin.photo }}'>");                                   
-            {% endfor %}
-            map.addLayer(markerCluster);
             
             // Improved geolocation using direct browser API
             function getLocation() {
                 if (navigator.geolocation) {
+                    console.warn("Geolocalización soportada en este navegador.", navigator.geolocation);
                     navigator.geolocation.getCurrentPosition(
                         onLocationFound,
                         onLocationError,
@@ -75,30 +56,30 @@
 
             // Geolocation function
             function onLocationFound(position) {
-                var lat = position.coords.latitude;
+                console.warn("Geolocalización exitosa:", position);
-                var lng = position.coords.longitude;
+                let lat = position.coords.latitude.toFixed(6);
-                var latlng = L.latLng(lat, lng);
+                let lng = position.coords.longitude.toFixed(6);
-                var radius = position.coords.accuracy / 2;  // Accuracy of the location
+                let fullCoords = position.coords;
+                console.warn("Ubicación detectada:", fullCoords);
+                console.warn("Latitud:", lat, "Longitud:", lng);
+                let latlng = L.latLng(parseFloat(lat), parseFloat(lng));
+                console.warn("Ubicación detectada:", latlng);
+                let radius = position.coords.accuracy / 2;  // Accuracy of the location
                 
                 // Add a pin (marker) at the user's location
-                user_marker = L.marker(latlng).addTo(map)
+                user_marker.setLatLng(latlng).bindPopup("Te detectamos en un radio de " + parseInt(radius) + " metros de este punto").openPopup();
-                    .bindPopup("Te detectamos en un radio de " + parseInt(radius) + " metros de este punto").openPopup();
-                
-                if (document.getElementById('lat') && document.getElementById('lng')) {
-                    document.getElementById('lat').value = lat;
-                    document.getElementById('lng').value = lng;
-                }
                 
                 // Add a circle around the user's location
+                user_radial.remove(); // Remove existing radius
                 user_radial = L.circle(latlng, radius).addTo(map);
-                
+                console.warn("latlng:", latlng, "radio:", radius);
                 // Center the map on the user's location
-                map.setView(latlng, 18);  // Adjust zoom level as needed
+                map.setView(latlng, 16);  // Adjust zoom level as needed
             }
 
             // Error handling for geolocation
             function onLocationError(error) {
-                var errorMsg;
+                let errorMsg;
                 switch(error.code) {
                     case error.PERMISSION_DENIED:
                         errorMsg = "Usuario denegó la solicitud de geolocalización.";
@@ -110,7 +91,7 @@
                         errorMsg = "Se agotó el tiempo de espera para la solicitud de ubicación.";
                         break;
                     default:
-                        errorMsg = "Ocurrió un error desconocido al obtener la ubicación.";
+                        errorMsg = "Ocurrió un error desconocido al obtener tu ubicación.";
                 }
                 console.error("Error de geolocalización:", errorMsg);
                 alert(errorMsg);
@@ -118,32 +99,57 @@
             }
 
             // Start location detection
-            getLocation();
             map.on('click', function(e) {
-                var latlng = e.latlng;
+                console.warn("Click detectado en el mapa:", e);
-                document.getElementById('lat').value = latlng.lat;
+                let latlng = e.latlng;
-                document.getElementById('lng').value = latlng.lng;
+                // Check if elements exist before accessing
-                
+                if (document.getElementById('lat') && document.getElementById('lng')) {
+                    document.getElementById('lat').value = latlng.lat;
+                    document.getElementById('lng').value = latlng.lng;
+                }
+                latlng.lat = parseFloat(latlng.lat).toFixed(6);
+                latlng.lng = parseFloat(latlng.lng).toFixed(6);
+                console.warn("Latitud:", latlng.lat, "Longitud:", latlng.lng);
+
                 // Calculate the vertical offset (25% of the map's height)
-                var offset = map.getSize().y * 0.25;
+                let offset = map.getSize().y * 0.25;
                 // Convert the clicked location to container point
-                var containerPoint = map.latLngToContainerPoint(latlng);
+                let containerPoint = map.latLngToContainerPoint(latlng);
                 // Adjust the container point upward by the offset
-                var targetCenterPoint = L.point(containerPoint.x, containerPoint.y - offset);
+                let targetCenterPoint = L.point(containerPoint.x, containerPoint.y - offset);
                 // Convert the adjusted point back to geographical coordinates
-                var targetLatLng = map.containerPointToLatLng(targetCenterPoint);
+                let targetLatLng = map.containerPointToLatLng(targetCenterPoint);
                 
                 // Fly to the adjusted center so the marker appears 25% lower from the center
-                map.flyTo(targetLatLng, 18, { duration: 0.7 });
+                map.flyTo(latlng, 18, { duration: 0.7 });
                 map.once('moveend', function() {
                     user_marker.setLatLng(latlng).bindPopup('<button id="pinner-pop">Agregar bache-o-cosa</button>').openPopup();
                 });
                 user_radial.remove();
-            });      
+            });
-        </script>
+        // });
 
+        </script>
+        
+<script>
+    console.log("Pins data:", {{ pins | tojson }});
+    let markerCluster = L.markerClusterGroup();
+    {% for pin in pins %}
+    var icon = L.divIcon({
+        className: '{{pin.typeofpin}}',
+        html: iconTypes['{{pin.typeofpin}}'],
+        iconSize: [10,10],
+        iconAnchor: [5,5]
+    });
+    let p{{ pin._id }} = L.marker([{{ pin.lat }}, {{ pin.lng }}], { icon: icon })
+        .bindPopup("<b>{{ pin.description }}</b><p>Fecha del reporte: {{pin.time}}</p><br><img src='{{ pin.photo }}'>");
+    markerCluster.addLayer(p{{ pin._id }});
+    {% endfor %}
+    map.addLayer(markerCluster);
+</script>
+</script>
         {% if current_user.is_authenticated %}
-        <div style="position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 999;">
+        <div style="position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 999">
             <button class="control-button" onclick="window.location.href='/camera'"><i class="fas fa-camera"></i></button>
         </div>
         {% endif %}

templates/register.html

@@ -3,14 +3,14 @@
 {% block content %}
 <h1>Registro de nuevo usuario</h1>
 <form method="post" enctype="multipart/form-data" style="background-color: rgb(205, 243, 148);">
-    {{ form.csrf_token }}
+    {{ rform.csrf_token }}
-    {{ form.hidden_tag() }}
+    {{ rform.hidden_tag() }}
-        {{ form.username.label }}<br>
+        {{ rform.username.label }}<br>
-        {{ form.username() }}
+        {{ rform.username() }}
-        {{ form.pwd.label }}
+        {{ rform.pwd.label }}
-        {{ form.pwd() }}        
+        {{ rform.pwd() }}        
 
-    <p>{{ form.submit() }}</p>
+    <p>{{ rform.submit() }}</p>
 </form>
 
 {% endblock %}