lelo/bethaus-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add map to dashboard

Browse Source
This commit is contained in:
lelo 2025-12-20 10:23:50 +00:00
parent 44ec9fc0a0
commit 4f9cac6f08
1 changed files with 59 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
templates/dashboard.html
View File

@ -15,6 +15,11 @@
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
#dashboard-map-modal {
width: 100%;
height: 100%;
min-height: 480px;
}
</style>
{% endblock %}
@ -204,8 +209,11 @@
<div class="col-lg-7 mb-3">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Zugriffe auf der Karte</h5>
<div id="dashboard-map"></div>
<div class="d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0">Zugriffe auf der Karte</h5>
<button id="mapFullscreenToggle" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#mapModal">Vollbild</button>
</div>
<div id="dashboard-map" class="mt-3"></div>
</div>
</div>
</div>
@ -246,6 +254,21 @@
</div>
<!-- Map fullscreen modal -->
<div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mapModalLabel">Karte im Vollbild</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div id="dashboard-map-modal"></div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
@ -256,10 +279,7 @@
// Leaflet map with aggregated downloads (fail-safe so charts still render)
try {
(function initDashboardMap() {
const mapElement = document.getElementById('dashboard-map');
if (!mapElement || typeof L === 'undefined') return;
const createLeafletMap = (mapElement) => {
const map = L.map(mapElement).setView([50, 10], 4);
const bounds = L.latLngBounds();
const defaultCenter = [50, 10];
@ -295,7 +315,7 @@
mapElement.appendChild(msg);
}
if (!bounds.isEmpty()) {
if (bounds.isValid()) {
map.fitBounds(bounds, { padding: [24, 24] });
} else {
map.setView(defaultCenter, defaultZoom);
@ -305,6 +325,38 @@
refreshSize();
window.addEventListener('resize', refreshSize);
window.addEventListener('orientationchange', refreshSize);
return { map, refreshSize };
};
(function initDashboardMap() {
const mapElement = document.getElementById('dashboard-map');
if (!mapElement || typeof L === 'undefined') return;
createLeafletMap(mapElement);
const modalEl = document.getElementById('mapModal');
let modalMapInstance = null;
if (modalEl) {
modalEl.addEventListener('shown.bs.modal', () => {
const modalMapElement = document.getElementById('dashboard-map-modal');
if (!modalMapElement) return;
const modalBody = modalEl.querySelector('.modal-body');
const modalHeader = modalEl.querySelector('.modal-header');
if (modalBody && modalHeader) {
const availableHeight = window.innerHeight - modalHeader.offsetHeight;
modalBody.style.height = `${availableHeight}px`;
modalMapElement.style.height = '100%';
}
if (!modalMapInstance) {
const { map, refreshSize } = createLeafletMap(modalMapElement);
modalMapInstance = { map, refreshSize };
}
// Ensure proper sizing after modal animation completes
setTimeout(() => {
modalMapInstance.map.invalidateSize();
if (modalMapInstance.refreshSize) modalMapInstance.refreshSize();
}, 200);
});
}
})();
} catch (err) {
console.error('Dashboard map init failed:', err);