forked from orson/bachemap
fixed issues with registration and with icon displays
This commit is contained in:
parent
54ad0dcc17
commit
d4b46fb621
23
app.py
23
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)
|
||||
|
||||
1405
static/MarkerClusterGroup.js
Normal file
1405
static/MarkerClusterGroup.js
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -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);
|
||||
|
||||
@ -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 %}
|
||||
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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;">
|
||||
|
||||
@ -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));
|
||||
var user_marker = new L.marker([20.57, -100.38]);
|
||||
var user_radial = new L.circle(L.circle(user_marker.latlng));
|
||||
|
||||
// document.addEventListener('DOMContentLoaded', function() {
|
||||
var map = new L.map('map', {center: [20.57, -100.38], zoom:16, zoomControl: false });
|
||||
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>',
|
||||
'coladera': '<i class="fas fa-ring"></i>',
|
||||
'obra sin terminar': '<i class="fas fa-wrench"></i>',
|
||||
'escombro': '<i class="far fa-trash-alt"></i>',
|
||||
'robo-asalto': '<i class="fas fa-skull"></i>',
|
||||
'biciestacionamiento': '<i class="fas fa-flag-checkered"></i>',
|
||||
'mala iluminación': '<i class="far fa-lightbulb"></i>',
|
||||
'bici blanca': '<i style="color:white" class="fas fa-bicycle"></i>',
|
||||
'zapato blanco': '<i style="color:white" class="fas fa-shoe-prints"></i>',
|
||||
'bache': '<i class="indicator fas fa-exclamation-triangle"></i>',
|
||||
'coladera': '<i class="indicator fas fa-ring"></i>',
|
||||
'obra sin terminar': '<i class="indicator fas fa-wrench"></i>',
|
||||
'escombro': '<i class="indicator far fa-trash-alt"></i>',
|
||||
'robo-asalto': '<i class="indicator fas fa-skull"></i>',
|
||||
'biciestacionamiento': '<i class="indicator fas fa-flag-checkered"></i>',
|
||||
'mala iluminación': '<i class="indicator far fa-lightbulb"></i>',
|
||||
'bici blanca': '<i style="color:white" class="indicator fas fa-bicycle"></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;
|
||||
var lng = position.coords.longitude;
|
||||
var latlng = L.latLng(lat, lng);
|
||||
var radius = position.coords.accuracy / 2; // Accuracy of the location
|
||||
console.warn("Geolocalización exitosa:", position);
|
||||
let lat = position.coords.latitude.toFixed(6);
|
||||
let lng = position.coords.longitude.toFixed(6);
|
||||
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)
|
||||
.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;
|
||||
}
|
||||
user_marker.setLatLng(latlng).bindPopup("Te detectamos en un radio de " + parseInt(radius) + " metros de este punto").openPopup();
|
||||
|
||||
// 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;
|
||||
document.getElementById('lat').value = latlng.lat;
|
||||
document.getElementById('lng').value = latlng.lng;
|
||||
console.warn("Click detectado en el mapa:", e);
|
||||
let latlng = e.latlng;
|
||||
// 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>
|
||||
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 %}
|
||||
|
||||
@ -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 }}
|
||||
{{ form.hidden_tag() }}
|
||||
{{ form.username.label }}<br>
|
||||
{{ form.username() }}
|
||||
{{ form.pwd.label }}
|
||||
{{ form.pwd() }}
|
||||
{{ rform.csrf_token }}
|
||||
{{ rform.hidden_tag() }}
|
||||
{{ rform.username.label }}<br>
|
||||
{{ rform.username() }}
|
||||
{{ rform.pwd.label }}
|
||||
{{ rform.pwd() }}
|
||||
|
||||
<p>{{ form.submit() }}</p>
|
||||
<p>{{ rform.submit() }}</p>
|
||||
</form>
|
||||
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue
Block a user