From 0d9306741e88567d714b3c93cb8fa1ba6cbdf52a Mon Sep 17 00:00:00 2001 From: Johannes Baumeister Date: Wed, 13 May 2026 09:13:48 +0200 Subject: [PATCH] UI: Finalized sidebar compaction, collapsible handle, dropdown fixes, and owner status filtering --- app.js | 78 ++++++++++++++++++++++++++++++++++++++++++++++-------- index.html | 20 ++++++++++---- style.css | 54 ++++++++++++++++++++++++++++++++++--- 3 files changed, 133 insertions(+), 19 deletions(-) diff --git a/app.js b/app.js index ad54132..e648140 100644 --- a/app.js +++ b/app.js @@ -594,20 +594,30 @@ document.addEventListener('DOMContentLoaded', async () => { variantTabs.forEach(tab => { tab.addEventListener('click', () => { if (state.activeVariant === tab.dataset.variant) return; - variantTabs.forEach(t => t.classList.remove('active')); tab.classList.add('active'); - - const newVariant = tab.dataset.variant; - state.map.removeLayer(variantLayers[state.activeVariant]); - state.activeVariant = newVariant; + state.activeVariant = tab.dataset.variant; variantLayers[state.activeVariant].addTo(state.map); - - document.getElementById('statusInfo').innerText = `Variante ${newVariant} aktiv.`; + updateProximityLines(); + closeEditPanel(); + document.getElementById('statusInfo').innerText = `Variante ${state.activeVariant} aktiv.`; }); }); + // Sidebar Toggle Logic + const btnToggleSidebar = document.getElementById('btnToggleSidebar'); + const sidebar = document.querySelector('.sidebar'); + if (btnToggleSidebar && sidebar) { + btnToggleSidebar.onclick = () => { + sidebar.classList.toggle('collapsed'); + // Give the transition time to finish before invalidating map size + setTimeout(() => { + state.map.invalidateSize(); + }, 300); + }; + } + // Hilfsgeometrien Toggle const checkShowAux = document.getElementById('checkShowAux'); if (checkShowAux) { @@ -627,6 +637,21 @@ document.addEventListener('DOMContentLoaded', async () => { }; } + // Eigentümerzustimmung Toggle + const checkShowOwners = document.getElementById('checkShowOwners'); + if (checkShowOwners) { + checkShowOwners.onchange = () => { + const ownerLayer = overlays["Eigentümer (ALKIS DB)"]; + if (ownerLayer) { + if (checkShowOwners.checked) { + state.map.addLayer(ownerLayer); + } else { + state.map.removeLayer(ownerLayer); + } + } + }; + } + // UTM Creation Logic const btnCreateAtUTM = document.getElementById('btnCreateAtUTM'); const inputUtmE = document.getElementById('utm-e'); @@ -923,7 +948,7 @@ document.addEventListener('DOMContentLoaded', async () => { }); } - const layerControl = L.control.layers(baseLayers, overlays, { collapsed: false }).addTo(state.map); + const layerControl = L.control.layers(baseLayers, overlays, { collapsed: true }).addTo(state.map); // Update proximity lines when layers are toggled in legend state.map.on('overlayadd overlayremove', () => { @@ -1425,7 +1450,13 @@ document.addEventListener('DOMContentLoaded', async () => { }); overlays[layerName] = layer; - state.map.addLayer(layer); + + // Only add to map if checkbox is checked + const checkShowOwners = document.getElementById('checkShowOwners'); + if (!checkShowOwners || checkShowOwners.checked) { + state.map.addLayer(layer); + } + layerControl.addOverlay(layer, layerName); layer.bringToFront(); // Ensure it's on top of local shapefiles } @@ -1470,6 +1501,16 @@ document.addEventListener('DOMContentLoaded', async () => { const btnConfirmMapping = document.getElementById('btnConfirmMapping'); const ownerTableBody = document.querySelector('#ownerTable tbody'); const ownerSearch = document.getElementById('ownerSearch'); + const ownerStatusFilter = document.getElementById('ownerStatusFilter'); + + // Populate Status Filter Options + if (ownerStatusFilter) { + ownerStatusFilter.innerHTML = ` + + + ${Object.keys(STATUS_MAP).map(s => ``).join('')} + `; + } btnManageOwners.onclick = () => { const ownerLayer = Object.keys(overlays).find(k => k.toLowerCase().includes('eigentümer')); @@ -1595,17 +1636,32 @@ document.addEventListener('DOMContentLoaded', async () => { renderOwnerRows(owners); - ownerSearch.oninput = () => { + const runFilter = () => { const query = ownerSearch.value.toLowerCase(); + const statusFilter = ownerStatusFilter.value; const filtered = {}; + for (let name in owners) { const o = owners[name]; - if (name.toLowerCase().includes(query) || (o.address && o.address.toLowerCase().includes(query))) { + const stored = state.ownerStatuses[name.toLowerCase()] || { status: 'none' }; + const currentStatus = typeof stored === 'object' ? (stored.status || 'none') : (stored || 'none'); + + const matchesQuery = name.toLowerCase().includes(query) || (o.address && o.address.toLowerCase().includes(query)); + let matchesStatus = !statusFilter || currentStatus === statusFilter; + + if (statusFilter === 'HAS_STATUS') { + matchesStatus = currentStatus !== 'none' && currentStatus !== ''; + } + + if (matchesQuery && matchesStatus) { filtered[name] = o; } } renderOwnerRows(filtered); }; + + ownerSearch.oninput = runFilter; + ownerStatusFilter.onchange = runFilter; } function renderOwnerRows(owners) { diff --git a/index.html b/index.html index 296d96c..fb9dbc7 100644 --- a/index.html +++ b/index.html @@ -35,9 +35,12 @@
Var B
Var C
-
-
@@ -127,6 +130,9 @@ Bereit. (v1.0.3 - Mirrored Nordex Default) + @@ -225,8 +231,12 @@