erikandClaude Fable 5.1
22e84081d4
js/hilfe.js + css/hilfe.css: selbstgebautes Hilfe-Modal mit 8 Bereichen und 35 Themen (Suche, Querverweise über data-hilfe, letztes Thema im localStorage, Stylesheet aus dem Skriptpfad, Bilder aus img/ bzw. data-eab-base). index.html verliert das statische Hilfe-Modal, bekommt ?-Zeichen an den Abschnittsköpfen und ?v=20260908g; app.js bindet ?-Knopf, F1 und data-hilfe an EABHilfe.oeffnen(), Bilanzstände-Tabelle scrollt horizontal. tools/hilfe_screenshots.py erzeugt die Bilder mit Playwright (Beispiel- Vorhaben im Zwischenspeicher, API-Attrappe für Öffnen/Bilanzstände, Quantisierung auf 256 Farben). tools/build_meinvln_vorlage.py kopiert hilfe.js, hilfe.css und die PNG mit und bindet hilfe.js in die Vorlage ein. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
237 lines
18 KiB
HTML
237 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de" class="eab-standalone">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Eingriffs- und Kompensationsbilanz Sachsen</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/css/bootstrap-select.min.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/10.6.1/ol.css">
|
||
<link rel="stylesheet" href="css/app.css?v=20260908g">
|
||
</head>
|
||
<body class="eab-standalone">
|
||
<div class="eab-app">
|
||
|
||
<nav class="navbar navbar-dark bg-dark navbar-expand px-3 py-1 app-nav">
|
||
<span class="navbar-brand mb-0 h1 fs-6 text-truncate"><i class="bi bi-tree-fill me-1"></i>Eingriffs- und Kompensationsbilanz <span class="text-secondary fw-normal d-none d-xl-inline">Sachsen · Biotopwertverfahren (Stand 01/2017)</span></span>
|
||
<div class="ms-auto d-flex align-items-center gap-2">
|
||
<span class="text-secondary small d-none d-lg-inline" id="server-stand"></span>
|
||
<span class="text-secondary small d-none d-xl-inline" id="autosave-info"></span>
|
||
<div class="btn-group btn-group-sm">
|
||
<button class="btn btn-outline-light" id="btn-neu" title="Neues Vorhaben (leert alle Eingaben)"><i class="bi bi-file-earmark-plus"></i><span class="d-none d-lg-inline"> Neu</span></button>
|
||
<button class="btn btn-outline-light eab-server" id="btn-liste" title="Vorhaben vom Server öffnen"><i class="bi bi-folder2-open"></i><span class="d-none d-lg-inline"> Öffnen</span></button>
|
||
<button class="btn btn-outline-light eab-server" id="btn-server" title="Auf dem Server speichern (Strg+S)"><i class="bi bi-cloud-arrow-up"></i><span class="d-none d-lg-inline"> Speichern</span></button>
|
||
<button class="btn btn-outline-light" id="btn-export" title="Vorhaben als JSON-Datei exportieren"><i class="bi bi-download"></i><span class="d-none d-lg-inline"> Datei</span></button>
|
||
<button class="btn btn-outline-light" id="btn-import" title="Vorhaben aus JSON-Datei laden"><i class="bi bi-upload"></i><span class="d-none d-lg-inline"> Laden</span></button>
|
||
<button class="btn btn-outline-light" id="btn-geojson" title="Flächen als GeoJSON (EPSG:25833) exportieren"><i class="bi bi-geo"></i><span class="d-none d-lg-inline"> GeoJSON</span></button>
|
||
<button class="btn btn-outline-light" id="btn-print" title="Formblätter drucken"><i class="bi bi-printer"></i><span class="d-none d-lg-inline"> Drucken</span></button>
|
||
<button class="btn btn-outline-light" id="btn-hilfe" title="Hilfe (F1)"><i class="bi bi-question-circle"></i></button>
|
||
</div>
|
||
<input type="file" id="file-import" accept=".json,application/json" class="d-none">
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="app-body">
|
||
<!-- Karte -->
|
||
<div class="map-col">
|
||
<div class="map-toolbar d-flex flex-wrap align-items-center gap-2 px-2 py-1">
|
||
<select class="form-select form-select-sm w-auto" id="sel-basis" title="Hintergrundkarte">
|
||
<option value="osm">OpenStreetMap</option>
|
||
<option value="dop">Luftbild (DOP GeoSN)</option>
|
||
<option value="webatlas">WebAtlasSN</option>
|
||
<option value="none">kein Hintergrund</option>
|
||
</select>
|
||
<div class="form-check form-check-inline form-switch m-0 small">
|
||
<input class="form-check-input" type="checkbox" id="chk-flst">
|
||
<label class="form-check-label" for="chk-flst">Flurstücke (ALKIS)</label>
|
||
</div>
|
||
<div class="input-group input-group-sm w-auto">
|
||
<input type="text" class="form-control" id="inp-suche" placeholder="Ort / Adresse …" style="width:11rem">
|
||
<button class="btn btn-outline-secondary" id="btn-suche" title="Suchen (OSM Nominatim)"><i class="bi bi-search"></i></button>
|
||
</div>
|
||
<div class="btn-group btn-group-sm ms-auto" role="group" id="map-tools">
|
||
<button class="btn btn-outline-secondary active" data-tool="select" title="Auswählen / Verschieben der Karte"><i class="bi bi-cursor"></i></button>
|
||
<button class="btn btn-outline-secondary" data-tool="modify" title="Stützpunkte der gewählten Fläche bearbeiten"><i class="bi bi-pencil"></i></button>
|
||
<button class="btn btn-outline-secondary" data-tool="delete" title="Geometrie der gewählten Fläche löschen"><i class="bi bi-trash"></i></button>
|
||
<button class="btn btn-outline-danger" id="btn-draw-cancel" title="Zeichnen abbrechen (Esc)" hidden><i class="bi bi-x-lg"></i> Abbrechen</button>
|
||
</div>
|
||
<a href="#" class="eab-hilfe-link ms-1" data-hilfe="karte-zeichnen" title="Hilfe zu diesem Abschnitt"><i class="bi bi-question-circle"></i></a>
|
||
</div>
|
||
<div class="map-wrap"><div id="map"></div>
|
||
<div class="map-legend small">
|
||
<span><i class="lg lg-eingriff"></i>Eingriff</span>
|
||
<span><i class="lg lg-komp"></i>Kompensation</span>
|
||
<span><i class="lg lg-funk"></i>Funktionsraum</span>
|
||
<span><i class="lg lg-land"></i>Landschaftsbild</span>
|
||
<span><i class="lg lg-baum"></i>Einzelbaum</span>
|
||
</div></div>
|
||
<div class="map-status small px-2 py-1 d-flex gap-3">
|
||
<span id="map-hint" class="text-muted">Flächen über „Fläche zeichnen“ in den Tabs rechts anlegen. Klick auf eine Fläche wählt den zugehörigen Eintrag.</span>
|
||
<span class="ms-auto text-nowrap" id="map-coord"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Panel -->
|
||
<div class="panel-col">
|
||
<ul class="nav nav-tabs nav-fill small" id="tabs" role="tablist">
|
||
<li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-vorhaben">Vorhaben</button></li>
|
||
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-eingriff">Eingriff <span class="badge rounded-pill text-bg-secondary" id="badge-eingriff">F1</span></button></li>
|
||
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-komp">Kompensation <span class="badge rounded-pill text-bg-secondary" id="badge-komp">0</span></button></li>
|
||
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-bilanz">Bilanz</button></li>
|
||
<li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-form">Formblätter</button></li>
|
||
</ul>
|
||
<div class="tab-content panel-scroll">
|
||
|
||
<!-- Vorhaben -->
|
||
<div class="tab-pane fade show active p-3" id="tab-vorhaben">
|
||
<h6 class="text-uppercase text-muted small mb-2">Vorhaben<a href="#" class="eab-hilfe-link" data-hilfe="vorhaben-anlegen" title="Hilfe zu diesem Abschnitt"><i class="bi bi-question-circle"></i></a></h6>
|
||
<div class="row g-2">
|
||
<div class="col-12"><label class="form-label small mb-0">Bezeichnung des Vorhabens</label><input class="form-control form-control-sm" data-meta="name" placeholder="z. B. Neubau Wirtschaftsweg W 12"></div>
|
||
<div class="col-6"><label class="form-label small mb-0">Verfahren (VKZ)</label><input class="form-control form-control-sm" data-meta="vkz" placeholder="Verfahrenskennzahl"><div class="form-text small" id="hint-vkz"></div></div>
|
||
<div class="col-6"><label class="form-label small mb-0">Gemeinde / Gemarkung</label><input class="form-control form-control-sm" data-meta="ort"></div>
|
||
<div class="col-6"><label class="form-label small mb-0">Vorhabenträger</label><input class="form-control form-control-sm" data-meta="traeger"></div>
|
||
<div class="col-6"><label class="form-label small mb-0">Bearbeiter</label><input class="form-control form-control-sm" data-meta="bearbeiter"></div>
|
||
<div class="col-3"><label class="form-label small mb-0">Datum</label><input type="date" class="form-control form-control-sm" data-meta="datum"></div>
|
||
<div class="col-3"><label class="form-label small mb-0">Status</label><select class="form-select form-select-sm" data-meta="status"><option value="entwurf">Entwurf</option><option value="abgestimmt">mit UNB abgestimmt</option><option value="genehmigt">genehmigt</option><option value="archiv">Archiv</option></select></div>
|
||
<div class="col-6"><label class="form-label small mb-0">Zuständige Naturschutzbehörde</label><input class="form-control form-control-sm" data-meta="unb"></div>
|
||
<div class="col-6"><label class="form-label small mb-0">Maßnahmekennzahl (optional)</label><input class="form-control form-control-sm" data-meta="mkz" placeholder="MKZ des Vorhabens im Verfahren"></div>
|
||
<div class="col-12"><label class="form-label small mb-0">Beschreibung / Wirkfaktoren</label><textarea class="form-control form-control-sm" rows="3" data-meta="beschreibung" placeholder="Vorhabenbeschreibung, bau-/anlage-/betriebsbedingte Wirkfaktoren, Einwirkungsbereich …"></textarea></div>
|
||
</div>
|
||
|
||
<h6 class="text-uppercase text-muted small mt-4 mb-2">Anwendungsvoraussetzungen<a href="#" class="eab-hilfe-link" data-hilfe="vorhaben-einfachfall" title="Hilfe zu diesem Abschnitt"><i class="bi bi-question-circle"></i></a></h6>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" id="chk-einfachfall" data-meta="einfachfall">
|
||
<label class="form-check-label" for="chk-einfachfall">Einfachfall nach Anlage 1 – kein gutachterlicher Darlegungsbedarf (vereinfachte verbale Gegenüberstellung genügt)</label>
|
||
</div>
|
||
<details class="small mt-1"><summary class="text-primary">Liste der Einfachfälle (Anlage 1)</summary><ul id="liste-einfachfaelle" class="mt-1"></ul></details>
|
||
<div class="form-check mt-2">
|
||
<input class="form-check-input" type="checkbox" id="chk-fallb" data-meta="fall_b">
|
||
<label class="form-check-label" for="chk-fallb">Werte und Funktionen besonderer Bedeutung (Anlage 3, Stufen mittel bis sehr hoch) voraussichtlich betroffen → Erfassung nach Anlage 3/4 erforderlich</label>
|
||
</div>
|
||
|
||
<h6 class="text-uppercase text-muted small mt-4 mb-2">Vermeidung (Anlage 5)</h6>
|
||
<textarea class="form-control form-control-sm" rows="3" data-meta="vermeidung" placeholder="Durchgeführte Vermeidungs-/Minderungsmaßnahmen und Begründung verbleibender Beeinträchtigungen (§ 15 Abs. 1 BNatSchG)"></textarea>
|
||
|
||
<h6 class="text-uppercase text-muted small mt-4 mb-2">Kompensationskonzept</h6>
|
||
<textarea class="form-control form-control-sm" rows="3" data-meta="konzept" placeholder="Funktionaler, räumlicher und zeitlicher Zusammenhang zwischen Eingriff und Kompensation (Anlage 6 Nr. 3)"></textarea>
|
||
</div>
|
||
|
||
<!-- Eingriff -->
|
||
<div class="tab-pane fade p-3" id="tab-eingriff">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<h6 class="text-uppercase text-muted small mb-0">1 · Biotoptypen – allgemeine Lebensraumfunktion<a href="#" class="eab-hilfe-link" data-hilfe="eingriff-flaeche" title="Hilfe zu diesem Abschnitt"><i class="bi bi-question-circle"></i></a></h6>
|
||
<div class="btn-group btn-group-sm ms-auto">
|
||
<button class="btn btn-primary" id="btn-ef-draw"><i class="bi bi-vector-pen"></i> Fläche zeichnen</button>
|
||
<button class="btn btn-outline-primary" id="btn-ef-add" title="Zeile ohne Geometrie (Fläche manuell eingeben)"><i class="bi bi-plus-lg"></i></button>
|
||
</div>
|
||
</div>
|
||
<div id="list-ef" class="vstack gap-2"></div>
|
||
<div class="text-muted small mt-1">Bestand = Biotopwert (BW), Zustand nach Eingriff = Planungswert (PW) des Zielbiotoptyps; Versiegelung → z. B. 11.06.110 „Einzelgebäude ohne Begrünung“ (0 WP) oder 11.04.xxx Verkehrsflächen.</div>
|
||
|
||
<div class="d-flex align-items-center mt-4 mb-2">
|
||
<h6 class="text-uppercase text-muted small mb-0">2 · Werte und Funktionen besonderer Bedeutung (Anlage 3 / 4)<a href="#" class="eab-hilfe-link" data-hilfe="eingriff-funktionen" title="Hilfe zu diesem Abschnitt"><i class="bi bi-question-circle"></i></a></h6>
|
||
<div class="btn-group btn-group-sm ms-auto">
|
||
<button class="btn btn-primary" id="btn-fk-draw" title="Funktionsraum als Fläche zeichnen"><i class="bi bi-vector-pen"></i> Funktionsraum</button>
|
||
<button class="btn btn-outline-primary" id="btn-fk-add" title="Zeile ohne Geometrie"><i class="bi bi-plus-lg"></i></button>
|
||
</div>
|
||
</div>
|
||
<div id="list-fk" class="vstack gap-2"></div>
|
||
<div class="text-muted small mt-1">Beeinträchtigung: FMF × Grundfläche des Funktionsraums (Tab. 4-1). Aufwertungen im Planungszustand (z. B. Gestaltungsmaßnahmen am Eingriffsort) als „Funktionsherstellung/-erhöhung“ (FH/FE) eintragen → P2.</div>
|
||
|
||
<div class="d-flex align-items-center mt-4 mb-2">
|
||
<h6 class="text-uppercase text-muted small mb-0">3 · Landschaftsbild – landschaftsästhetische Funktion (Anlage 6.2)<a href="#" class="eab-hilfe-link" data-hilfe="eingriff-landschaft" title="Hilfe zu diesem Abschnitt"><i class="bi bi-question-circle"></i></a></h6>
|
||
</div>
|
||
<div id="box-land" class="card card-body p-2 small"></div>
|
||
|
||
<div class="card mt-4 border-primary">
|
||
<div class="card-body p-2 small" id="box-f1-summe"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Kompensation -->
|
||
<div class="tab-pane fade p-3" id="tab-komp">
|
||
<h6 class="text-uppercase text-muted small mb-1">Kompensationsmaßnahmen<a href="#" class="eab-hilfe-link" data-hilfe="komp-anlegen" title="Hilfe zu diesem Abschnitt"><i class="bi bi-question-circle"></i></a></h6>
|
||
<div class="d-flex align-items-center mb-1 gap-2">
|
||
<select class="form-select form-select-sm flex-grow-1" id="sel-mtyp" style="min-width:0" title="Maßnahmentyp / Formblatt"></select>
|
||
<div class="btn-group btn-group-sm flex-shrink-0">
|
||
<button class="btn btn-success" id="btn-m-draw"><i class="bi bi-vector-pen"></i> Fläche zeichnen</button>
|
||
<button class="btn btn-outline-success" id="btn-m-add" title="Maßnahme ohne Geometrie"><i class="bi bi-plus-lg"></i></button>
|
||
</div>
|
||
</div>
|
||
<div class="small text-muted mb-2" id="mtyp-info"></div>
|
||
<div id="list-m" class="vstack gap-2"></div>
|
||
<div class="text-muted small mt-2">Anforderungen (Anlage 6): Aufwertung des Zielbiotoptyps um mind. 3 WP/m² gegenüber dem Bestand (oder Aufwertung von Funktionen nach Anlage 3/4); Biotoptypen der Kategorie D haben keinen Planungswert. Bei Maßnahmenkombinationen gilt nur der höhere Bonusfaktor.</div>
|
||
</div>
|
||
|
||
<!-- Bilanz -->
|
||
<div class="tab-pane fade p-3" id="tab-bilanz">
|
||
<div id="box-bilanz"></div>
|
||
<div id="box-staende" class="eab-server mt-4">
|
||
<div class="d-flex align-items-center mb-2"><h6 class="text-uppercase text-muted small mb-0">Festgehaltene Bilanzstände (Server)<a href="#" class="eab-hilfe-link" data-hilfe="bilanz-stand" title="Hilfe zu diesem Abschnitt"><i class="bi bi-question-circle"></i></a></h6><button class="btn btn-sm btn-outline-primary ms-auto" id="btn-stand" disabled><i class="bi bi-pin-angle"></i> Bilanzstand festhalten</button></div>
|
||
<div class="staende-liste"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Formblätter -->
|
||
<div class="tab-pane fade p-3" id="tab-form">
|
||
<div class="d-flex mb-2"><span class="text-muted small">Formblätter nach Anlage 7 (F1 – F14). Druck über <i class="bi bi-printer"></i>.<a href="#" class="eab-hilfe-link" data-hilfe="bilanz-formblaetter" title="Hilfe zu diesem Abschnitt"><i class="bi bi-question-circle"></i></a></span><button class="btn btn-sm btn-outline-secondary ms-auto" id="btn-form-refresh"><i class="bi bi-arrow-clockwise"></i> Aktualisieren</button></div>
|
||
<div id="box-form" class="formblaetter"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Vorhaben vom Server -->
|
||
<div class="modal fade" id="modal-liste" tabindex="-1">
|
||
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
||
<div class="modal-content">
|
||
<div class="modal-header py-2"><h6 class="modal-title">Vorhaben auf dem Server</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
|
||
<div class="modal-body small p-0">
|
||
<table class="table table-sm table-hover mb-0"><thead><tr><th>Vorhaben</th><th>Verfahren</th><th>Ort</th><th>Status</th><th>geändert</th><th class="text-end">Flächen / Maßn.</th><th class="text-end">letzter Bilanzwert</th><th></th></tr></thead><tbody id="liste-body"></tbody></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Auf-/Abschläge -->
|
||
<div class="modal fade" id="modal-aas" tabindex="-1">
|
||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||
<div class="modal-content">
|
||
<div class="modal-header py-2"><h6 class="modal-title">Auf- und Abschläge (Anlage 2, Spalte 12)</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
|
||
<div class="modal-body small" id="aas-body"></div>
|
||
<div class="modal-footer py-1">
|
||
<span class="me-auto" id="aas-summe"></span>
|
||
<button class="btn btn-sm btn-outline-secondary" id="aas-reset">Zurücksetzen</button>
|
||
<button class="btn btn-sm btn-primary" id="aas-ok">Übernehmen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal: Biotoptyp-Info -->
|
||
<div class="modal fade" id="modal-bt" tabindex="-1">
|
||
<div class="modal-dialog modal-dialog-scrollable">
|
||
<div class="modal-content">
|
||
<div class="modal-header py-2"><h6 class="modal-title" id="bt-title">Biotoptyp</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
|
||
<div class="modal-body small" id="bt-body"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toasts"></div>
|
||
</div><!-- /eab-app -->
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/js/bootstrap-select.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/js/i18n/defaults-de_DE.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.15.0/proj4.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/10.6.1/dist/ol.js"></script>
|
||
<script src="js/bilanz.js?v=20260908g"></script>
|
||
<script src="js/karte.js?v=20260908g"></script>
|
||
<script src="js/hilfe.js?v=20260908g"></script>
|
||
<script src="js/app.js?v=20260908g"></script>
|
||
</body>
|
||
</html>
|