64 lines
2.1 KiB
HTML
64 lines
2.1 KiB
HTML
{% extends "faceshieldrequest_list.html" %}
|
|
|
|
{% block model_list_table %}
|
|
<div id="map" style="width: 100%; height: 800px"></div>
|
|
{% endblock %}
|
|
|
|
{% block head_css %}{{ super() }}
|
|
<link href="{{ url_for('static', filename='css/leaflet.css') }}" rel="stylesheet">
|
|
{% endblock %}
|
|
|
|
{% block tail_js %}{{ super() }}
|
|
<script src="{{ url_for('static', filename='js/leaflet.js') }}"></script>
|
|
<script>
|
|
function e(unsafe) {
|
|
return String(unsafe)
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
const mapdata = {{ data|tojson }};
|
|
const focusitem = {{ request.args.get('id')|tojson }};
|
|
const map = L.map('map');
|
|
|
|
let locationSet = false;
|
|
|
|
L.Icon.Default.imagePath = '/static/images/';
|
|
|
|
const status_colors = {
|
|
'fulfilled': '#00ff00',
|
|
'delegated': '#0000ff',
|
|
'new': '#ff0000',
|
|
'intransit': '#ff5500',
|
|
};
|
|
|
|
for (const loc of mapdata) {
|
|
const r1 = (Math.random() - 0.5) * 0.001;
|
|
const r2 = (Math.random() - 0.5) * 0.001;
|
|
|
|
const marker = L.circleMarker([loc.shipping_latitude + r1, loc.shipping_longitude + r2], {
|
|
color: status_colors[loc.status] || '#555555',
|
|
stroke: loc.id == focusitem,
|
|
fillOpacity: 0.4,
|
|
}).addTo(map);
|
|
marker.bindPopup(`<b>[${e(loc.id)}]</b> <a href="/admin/faceshieldrequest/edit/?id=${e(loc.id)}">${e(loc.entity_info)}</a><br /><b>Handling orga:</b> ${e(loc.handling_orga)}<br /><b>Status:</b> ${e(loc.status)}<br/><b>Extra:</b> ${e(loc.extra||'')}<br/><b>Remarks:</b> ${e(loc.remarks||'')}<br/><b>Full required:</b> ${e(loc.faceshield_full_required)}`);
|
|
if (loc.id == focusitem) {
|
|
map.setView([loc.shipping_latitude, loc.shipping_longitude], 10);
|
|
marker.openPopup();
|
|
locationSet = true;
|
|
}
|
|
}
|
|
|
|
if (!locationSet) {
|
|
map.setView([51.759445, 19.457216], 7);
|
|
}
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
</script>
|
|
{% endblock %}
|