250 lines
12 KiB
HTML
250 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WindPlaner Standalone</title>
|
|
<!-- Config and Standalone Data (Bypass CORS) -->
|
|
<script src="config/layers.js"></script>
|
|
<script src="data/baked_layers.js"></script>
|
|
|
|
<!-- Dependencies -->
|
|
<link rel="stylesheet" href="libs/leaflet.css">
|
|
<link rel="stylesheet" href="libs/leaflet.draw.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h1>WindPlaner</h1>
|
|
</div>
|
|
|
|
<div class="sidebar-content">
|
|
<div class="section">
|
|
<h2>Varianten-Management</h2>
|
|
<div class="variant-tabs" id="variantTabs">
|
|
<div class="variant-tab active" data-variant="A">Var A</div>
|
|
<div class="variant-tab" data-variant="B">Var B</div>
|
|
<div class="variant-tab" data-variant="C">Var C</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Anlagen-Konfiguration</h2>
|
|
<div class="control-group">
|
|
<label for="turbineType">Anlagentyp</label>
|
|
<input type="text" id="turbineType" class="input-styled" placeholder="z.B. Vestas V162">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="rotorDiameter">Rotordurchmesser (m)</label>
|
|
<input type="number" id="rotorDiameter" class="input-styled" value="160">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="hubHeight">Nabenhöhe (m)</label>
|
|
<input type="number" id="hubHeight" class="input-styled" value="165">
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="foundationRadius">Fundament Radius (m)</label>
|
|
<input type="number" id="foundationRadius" class="input-styled" value="15">
|
|
</div>
|
|
<div class="section">
|
|
<h2>Werkzeuge</h2>
|
|
<div class="control-group" style="display: flex; gap: 8px; flex-wrap: wrap;">
|
|
<button class="btn-primary" id="btnPlaceTurbine" style="flex: 1; min-width: 140px;">
|
|
<span>📍</span> Anlage setzen
|
|
</button>
|
|
<button class="btn-secondary" id="btnManageOwners"
|
|
style="flex: 1; min-width: 140px; margin-top: 0;">
|
|
<span>👥</span> Eigentümer verwalten
|
|
</button>
|
|
<button class="btn-secondary" id="btnMeasureDist" title="Distanz messen"
|
|
style="flex: 0.5; padding: 10px; margin-top: 0;">📏</button>
|
|
<button class="btn-secondary" id="btnMeasureArea" title="Fläche messen"
|
|
style="flex: 0.5; padding: 10px; margin-top: 0;">📐</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- UTM Coordinate Input -->
|
|
<div class="section"
|
|
style="border: 1px solid var(--border-color); padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.02);">
|
|
<h2 style="margin-bottom: 10px;">Manuelle Koordinaten (UTM)</h2>
|
|
<div style="display: flex; gap: 8px; margin-bottom: 10px;">
|
|
<div style="flex: 1;">
|
|
<label
|
|
style="font-size: 0.75rem; color: var(--text-dim); display: block; margin-bottom: 3px;">Rechtswert
|
|
(E)</label>
|
|
<input type="number" id="utm-e" class="input-styled" placeholder="32..." step="0.01">
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<label
|
|
style="font-size: 0.75rem; color: var(--text-dim); display: block; margin-bottom: 3px;">Hochwert
|
|
(N)</label>
|
|
<input type="number" id="utm-n" class="input-styled" placeholder="5..." step="0.01">
|
|
</div>
|
|
</div>
|
|
<button class="btn-primary" id="btnCreateAtUTM" style="font-size: 0.8rem; padding: 8px;">
|
|
An UTM-Position erzeugen
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Daten-Laden Section -->
|
|
<div class="section" id="importSection">
|
|
<h2>Daten-Laden & Automatik</h2>
|
|
<div
|
|
style="background: rgba(255, 136, 0, 0.1); border: 1px dashed #ff8800; padding: 10px; border-radius: 8px;">
|
|
<p style="font-size: 0.75rem; color: #ff8800; margin-bottom: 8px;">
|
|
<b>1. Einmalig:</b> Dateien (.shp + .dbf) wählen ODER auf Karte ziehen.<br>
|
|
<b>2. Dauerhaft machen:</b> Unten auf "Daten-Bundle speichern" klicken und in /data als
|
|
<i>baked_layers.js</i> speichern.
|
|
</p>
|
|
<button class="btn-secondary" id="btnManualImport"
|
|
style="border-color: #ff8800; color: #ff8800;">
|
|
📂 Dateien wählen
|
|
</button>
|
|
<input type="file" id="manualShpInput" style="display: none;" multiple accept=".shp,.dbf">
|
|
|
|
<button class="btn-secondary" id="btnExportBundle"
|
|
style="margin-top: 10px; background: #ff8800; color: white; border: none;">
|
|
💾 Daten-Bundle speichern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Projektverwaltung</h2>
|
|
<button class="btn-secondary" id="btnSaveProject">Projekt speichern</button>
|
|
<button class="btn-secondary" id="btnLoadProject">Projekt laden</button>
|
|
<input type="file" id="projectInput" style="display: none;" accept=".json">
|
|
</div>
|
|
|
|
<div id="statusInfo"
|
|
style="margin-top: auto; padding-top: 20px; font-size: 0.8rem; color: var(--text-dim);">
|
|
Bereit.
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Floating Edit Panel -->
|
|
<div id="editPanel" style="display: none;">
|
|
<div class="edit-panel-content">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
|
|
<h2 style="margin: 0; font-size: 1.1rem; color: var(--primary-color);">WEA bearbeiten</h2>
|
|
<button id="btnCloseEdit"
|
|
style="background: transparent; border: none; color: white; cursor: pointer; font-size: 1.2rem;">✕</button>
|
|
</div>
|
|
<div class="edit-rows-container">
|
|
<div class="edit-row">
|
|
<label>Nr:</label>
|
|
<input type="text" id="edit-wea-nr" class="edit-input">
|
|
</div>
|
|
<div class="edit-row separator">
|
|
<label>Typ:</label>
|
|
<input type="text" id="edit-wea-type" class="edit-input">
|
|
</div>
|
|
<div class="edit-row">
|
|
<label>RD (m):</label>
|
|
<input type="number" id="edit-wea-rd" class="edit-input">
|
|
</div>
|
|
<div class="edit-row separator">
|
|
<label>NH (m):</label>
|
|
<input type="number" id="edit-wea-nh" class="edit-input">
|
|
</div>
|
|
<div class="edit-row">
|
|
<label>Fund (m):</label>
|
|
<input type="number" id="edit-wea-fr" class="edit-input">
|
|
</div>
|
|
<div class="edit-row separator">
|
|
<label>Wink (°):</label>
|
|
<input type="number" id="edit-wea-ksf-angle" class="edit-input" value="0">
|
|
</div>
|
|
<div class="edit-row" style="margin-top: 5px;">
|
|
<label
|
|
style="cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: normal; font-size: 0.8rem; width: 100%;">
|
|
<input type="checkbox" id="edit-wea-ksf-mirrored"> Spiegeln (KSF)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 6px; margin-top: 10px;">
|
|
<button class="btn-primary-mini" id="btnSaveEdit">Speichern</button>
|
|
<button class="btn-danger-mini" id="btnDeleteWEA">Anlage löschen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Legend -->
|
|
<div id="floatingLegend" class="floating-panel collapsible">
|
|
<div class="panel-header" id="legendHeader">
|
|
<span>📑 Legende</span>
|
|
<button class="toggle-btn" id="btnToggleLegend">▲</button>
|
|
</div>
|
|
<div class="panel-content" id="legendContent">
|
|
<!-- Dynamic content injected via JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Owner Management Modal -->
|
|
<div id="ownerModal" class="modal-overlay" style="display: none;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Eigentümer-Management</h2>
|
|
<button id="btnCloseOwnerModal" class="modal-close">✕</button>
|
|
</div>
|
|
|
|
<!-- Stage 1: Column Mapping (Shown if not configured) -->
|
|
<div id="ownerMappingSection" style="display: none;">
|
|
<p>Bitte ordnen Sie die Spalten für Namen aus dem Layer "Eigentümer" zu:</p>
|
|
<div style="display: flex; gap: 15px; justify-content: center; margin-top: 15px;">
|
|
<div>
|
|
<label style="display: block; font-size: 0.8rem; margin-bottom: 5px;">Vorname</label>
|
|
<select id="selectFirstName" class="input-styled" style="width: 150px;"></select>
|
|
</div>
|
|
<div>
|
|
<label style="display: block; font-size: 0.8rem; margin-bottom: 5px;">Nachname</label>
|
|
<select id="selectLastName" class="input-styled" style="width: 150px;"></select>
|
|
</div>
|
|
</div>
|
|
<button class="btn-primary" id="btnConfirmMapping"
|
|
style="margin-top: 20px; width: auto; padding: 10px 30px;">
|
|
Konfiguration bestätigen
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Stage 2: Owner List -->
|
|
<div id="ownerListSection" style="display: none;">
|
|
<div style="padding: 15px; border-bottom: 1px solid var(--border-color);">
|
|
<input type="text" id="ownerSearch" class="input-styled" placeholder="Eigentümer suchen...">
|
|
</div>
|
|
<div class="owner-table-container">
|
|
<table id="ownerTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Flächen</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<main id="map"></main>
|
|
|
|
<!-- JS Dependencies -->
|
|
<script src="libs/proj4.js"></script>
|
|
<script src="libs/shp.min.js"></script>
|
|
<script src="libs/leaflet.js"></script>
|
|
<script src="libs/turf.min.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
|
|
</html> |