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

92
app.js
View File

@ -334,33 +334,75 @@ document.addEventListener('DOMContentLoaded', async () => {
function updateLegend() { function updateLegend() {
if (!legendContent) return; if (!legendContent) return;
let html = '<div class="legend-section-title">Anlagen-Geometrien</div>'; let html = '';
if (state.turbines.length > 0) { if (state.turbines.length > 0) {
html += ` html += '<div class="legend-section-title">Anlagen & Geometrien</div>';
<div class="legend-item"><span class="color-box" style="background: #00c8ff;"></span> Rotorfläche</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>';
<div class="legend-item"><span class="color-box" style="border: 2px dashed #ffcc00; background: transparent;"></span> Techn. Abstand (Ellipse)</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>';
<div class="legend-item"><span class="color-box" style="border: 1.5px dotted #ffcc00; background: transparent;"></span> Techn. Abstand (Circle)</div> if (state.showAuxiliary) {
<div class="legend-item"><span class="color-box" style="background: rgba(255, 68, 68, 0.2); border: 1px solid #ff4444;"></span> Auflastenradius</div> html += `
<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="border: 2px dashed #ffcc00; background: transparent;"></span> Techn. Abstand (Ellipse)</div>
<div class="legend-item"><span class="color-box" style="background: #e74c3c; opacity: 0.6;"></span> Kranstellfläche (KSF)</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>
} else { <div class="legend-item"><span class="color-box" style="background: rgba(52, 152, 219, 0.3); border: 1px solid #3498db;"></span> Fundament</div>
html += '<div style="font-size: 0.7rem; opacity: 0.6; padding-left: 20px;">Keine Anlagen gesetzt</div>'; <div class="legend-item"><span class="color-box" style="background: #e74c3c; opacity: 0.6;"></span> Kranstellfläche (KSF)</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>';
}
} }
html += '<div class="legend-section-title" style="margin-top: 15px;">Sicherungsstand (ALKIS)</div>'; // ALKIS Status
Object.keys(STATUS_MAP).forEach(status => { const checkShowOwners = document.getElementById('checkShowOwners');
const data = STATUS_MAP[status]; if (checkShowOwners && checkShowOwners.checked) {
html += ` html += '<div class="legend-section-title" style="margin-top: 15px;">Sicherungsstand (ALKIS)</div>';
<div class="legend-item-status"> Object.keys(STATUS_MAP).forEach(status => {
<span class="status-dot" style="background: ${data.color};"></span> const data = STATUS_MAP[status];
<div class="status-text-container"> html += `
<div class="status-label">${status}</div> <div class="legend-item-status">
<div class="status-desc">${data.desc}</div> <span class="status-dot" style="background: ${data.color};"></span>
<div class="status-text-container">
<div class="status-label">${status}</div>
<div class="status-desc">${data.desc}</div>
</div>
</div> </div>
</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; legendContent.innerHTML = html;
} }
@ -675,6 +717,7 @@ document.addEventListener('DOMContentLoaded', async () => {
} }
}); });
}); });
updateLegend();
}; };
} }
@ -690,6 +733,7 @@ document.addEventListener('DOMContentLoaded', async () => {
state.map.removeLayer(proxLayer); state.map.removeLayer(proxLayer);
} }
} }
updateLegend();
}; };
} }
@ -705,6 +749,7 @@ document.addEventListener('DOMContentLoaded', async () => {
state.map.removeLayer(ownerLayer); state.map.removeLayer(ownerLayer);
} }
} }
updateLegend();
}; };
} }
@ -719,6 +764,7 @@ document.addEventListener('DOMContentLoaded', async () => {
state.map.removeLayer(outlineLayer); state.map.removeLayer(outlineLayer);
} }
} }
updateLegend();
}; };
} }

4
index.html
View File

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