gitea-enwelo-jba
/
Standortplaner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dynamic legend updates; collapse on load
Deploy Standortplaner / deploy (push) Successful in 17s Details

This commit is contained in:
Johannes Baumeister 2026-07-04 22:25:54 +02:00
parent b08bdf8bac
commit 4216718992
2 changed files with 71 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app.js
View File

@ -334,20 +334,29 @@ document.addEventListener('DOMContentLoaded', async () => {
function updateLegend() {
if (!legendContent) return;
let html = '<div class="legend-section-title">Anlagen-Geometrien</div>';
let html = '';
if (state.turbines.length > 0) {
html += '<div class="legend-section-title">Anlagen & Geometrien</div>';
html += '<div class="legend-item"><span class="color-box" style="background: #00c8ff; border-radius: 50%; width: 14px; height: 14px; border: 1px solid #fff;"></span> WEA Standort</div>';
html += '<div class="legend-item"><span class="color-box" style="background: rgba(0, 200, 255, 0.2); border: 1px dashed #00c8ff;"></span> Rotorfläche</div>';
if (state.showAuxiliary) {
html += `
<div class="legend-item"><span class="color-box" style="background: #00c8ff;"></span> Rotorfläche</div>
<div class="legend-item"><span class="color-box" style="border: 2px dashed #ffcc00; background: transparent;"></span> Techn. Abstand (Ellipse)</div>
<div class="legend-item"><span class="color-box" style="border: 1.5px dotted #ffcc00; background: transparent;"></span> Techn. Abstand (Circle)</div>
<div class="legend-item"><span class="color-box" style="border: 1.5px dotted #ffcc00; background: transparent;"></span> Techn. Abstand (Kreis)</div>
<div class="legend-item"><span class="color-box" style="background: rgba(255, 68, 68, 0.2); border: 1px solid #ff4444;"></span> Auflastenradius</div>
<div class="legend-item"><span class="color-box" style="background: rgba(52, 152, 219, 0.3); border: 1px solid #3498db;"></span> Fundament</div>
<div class="legend-item"><span class="color-box" style="background: #e74c3c; opacity: 0.6;"></span> Kranstellfläche (KSF)</div>
`;
} else {
html += '<div style="font-size: 0.7rem; opacity: 0.6; padding-left: 20px;">Keine Anlagen gesetzt</div>';
}
if (document.getElementById('checkShowProximity') && document.getElementById('checkShowProximity').checked) {
html += '<div class="legend-item"><span class="color-box" style="border-top: 2px dashed #ff8800; background: transparent; margin-top: 7px; height: 0;"></span> Abstandslinien (WEA)</div>';
}
}
// ALKIS Status
const checkShowOwners = document.getElementById('checkShowOwners');
if (checkShowOwners && checkShowOwners.checked) {
html += '<div class="legend-section-title" style="margin-top: 15px;">Sicherungsstand (ALKIS)</div>';
Object.keys(STATUS_MAP).forEach(status => {
const data = STATUS_MAP[status];
@ -361,6 +370,39 @@ document.addEventListener('DOMContentLoaded', async () => {
</div>
`;
});
}
// Outline
const checkShowOwnersOutline = document.getElementById('checkShowOwnersOutline');
if (checkShowOwnersOutline && checkShowOwnersOutline.checked) {
html += '<div class="legend-item" style="margin-top: 8px;"><span class="color-box" style="border: 1.5px solid #000; background: transparent;"></span> Flurstücke (Umriss)</div>';
}
// Check other layers
let otherLayersHtml = '';
if (typeof overlays !== 'undefined' && state.map) {
Object.keys(overlays).forEach(layerName => {
if (state.map.hasLayer(overlays[layerName])) {
if (layerName === 'Hilfs-Geometrien' || layerName.includes('Abstände') || layerName.includes('ALKIS') || layerName.includes('Umriss') || layerName.startsWith('Variante')) return;
let color = '#9b59b6';
if (state.bakedData && state.bakedData[layerName] && state.bakedData[layerName].style) {
color = state.bakedData[layerName].style.color || state.bakedData[layerName].style.fillColor || color;
} else if (layerName === 'Gebietsumring (DB)') {
color = '#00aaff';
} else if (layerName === 'Artennachweis') {
color = '#ff4444';
}
otherLayersHtml += `<div class="legend-item"><span class="color-box" style="background: ${color}; opacity: 0.6; border: 1px solid ${color};"></span> ${layerName}</div>`;
}
});
}
if (otherLayersHtml) {
html += '<div class="legend-section-title" style="margin-top: 15px;">Weitere Layer</div>' + otherLayersHtml;
}
if (!html) {
html = '<div style="font-size: 0.7rem; opacity: 0.6; padding-left: 20px;">Keine aktiven Layer</div>';
}
legendContent.innerHTML = html;
}
@ -675,6 +717,7 @@ document.addEventListener('DOMContentLoaded', async () => {
}
});
});
updateLegend();
};
}
@ -690,6 +733,7 @@ document.addEventListener('DOMContentLoaded', async () => {
state.map.removeLayer(proxLayer);
}
}
updateLegend();
};
}
@ -705,6 +749,7 @@ document.addEventListener('DOMContentLoaded', async () => {
state.map.removeLayer(ownerLayer);
}
}
updateLegend();
};
}
@ -719,6 +764,7 @@ document.addEventListener('DOMContentLoaded', async () => {
state.map.removeLayer(outlineLayer);
}
}
updateLegend();
};
}

4
index.html
View File

@ -210,10 +210,10 @@
</div>
<!-- Floating Legend -->
<div id="floatingLegend" class="floating-panel collapsible">
<div id="floatingLegend" class="floating-panel collapsible collapsed">
<div class="panel-header" id="legendHeader">
<span>📑 Legende</span>
<button class="toggle-btn" id="btnToggleLegend">▲</button>
<button class="toggle-btn" id="btnToggleLegend">▼</button>
</div>
<div class="panel-content" id="legendContent">
<!-- Dynamic content injected via JS -->