121 lines
3.9 KiB
Python
121 lines
3.9 KiB
Python
import sys
|
|
|
|
file_path = 'core/templates/core/door_visits.html'
|
|
with open(file_path, 'r') as f:
|
|
content = f.read()
|
|
|
|
# 1. Add style for the custom control
|
|
style_to_add = """
|
|
#map-controls {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 5;
|
|
}
|
|
.map-control-btn {
|
|
background-color: #fff;
|
|
border: 2px solid #fff;
|
|
border-radius: 3px;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,.3);
|
|
cursor: pointer;
|
|
margin-bottom: 22px;
|
|
text-align: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #666;
|
|
}
|
|
.map-control-btn:hover {
|
|
color: #333;
|
|
}
|
|
"""
|
|
|
|
if '</style>' in content:
|
|
content = content.replace('</style>', style_to_add + '\n</style>')
|
|
|
|
# 2. Add the map controls container in the modal body
|
|
map_div = '<div id="map" style="width: 100%; height: 100%; min-height: 500px;"></div>'
|
|
map_controls = """
|
|
<div id="map" style="width: 100%; height: 100%; min-height: 500px; position: relative;">
|
|
<div id="map-controls">
|
|
<button id="center-user" class="map-control-btn" title="Center on My Location">
|
|
<i class="bi bi-geo-alt-fill"></i>
|
|
</button>
|
|
</div>
|
|
</div>"""
|
|
|
|
content = content.replace(map_div, map_controls)
|
|
|
|
# 3. Update the JavaScript
|
|
old_vars = ' var map;\n var markers = [];\n var mapData = {{ map_data_json|safe }};'
|
|
new_vars = ' var map;\n var markers = [];\n var userLocationMarker;\n var mapData = {{ map_data_json|safe }};'
|
|
content = content.replace(old_vars, new_vars)
|
|
|
|
geolocation_logic = """
|
|
function showUserLocation(centerOnUser = false) {
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(function(position) {
|
|
var pos = {
|
|
lat: position.coords.latitude,
|
|
lng: position.coords.longitude
|
|
};
|
|
|
|
if (userLocationMarker) {
|
|
userLocationMarker.setPosition(pos);
|
|
} else {
|
|
userLocationMarker = new google.maps.Marker({
|
|
position: pos,
|
|
map: map,
|
|
title: 'Your Location',
|
|
icon: {
|
|
path: google.maps.SymbolPath.CIRCLE,
|
|
fillColor: '#4285F4',
|
|
fillOpacity: 1,
|
|
scale: 8,
|
|
strokeColor: 'white',
|
|
strokeWeight: 2
|
|
}
|
|
});
|
|
}
|
|
|
|
if (centerOnUser) {
|
|
map.setCenter(pos);
|
|
map.setZoom(15);
|
|
}
|
|
}, function(error) {
|
|
console.warn("Geolocation failed: " + error.message);
|
|
}, {
|
|
enableHighAccuracy: true,
|
|
timeout: 5000,
|
|
maximumAge: 0
|
|
});
|
|
}
|
|
}
|
|
"""
|
|
|
|
content = content.replace(' function initMap() {', geolocation_logic + '\n function initMap() {')
|
|
|
|
# Add call to showUserLocation in initMap and setup button
|
|
init_map_end = ' if (markers.length > 0) {\n map.fitBounds(bounds);\n }\n }'
|
|
new_init_map_end = """ if (markers.length > 0) {
|
|
map.fitBounds(bounds);
|
|
}
|
|
|
|
// Initial attempt to show user location
|
|
showUserLocation();
|
|
|
|
// Setup control button
|
|
var centerBtn = document.getElementById('center-user');
|
|
if (centerBtn) {
|
|
centerBtn.addEventListener('click', function() {
|
|
showUserLocation(true);
|
|
});
|
|
}
|
|
}"""
|
|
content = content.replace(init_map_end, new_init_map_end)
|
|
|
|
with open(file_path, 'w') as f:
|
|
f.write(content)
|