260 lines
13 KiB
HTML
260 lines
13 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" style="display: flex; flex-direction: column; align-items: center; gap: 15px;">
|
|
<img src="Logos/20201202-ENWELO-Logo-4c_ohne_Claim.png" alt="ENWELO Logo" style="max-width: 85%; height: auto; display: block;">
|
|
<h1 style="margin: 0; text-align: center;">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 style="margin-top: 12px; padding: 0 5px;">
|
|
<label style="cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-dim);">
|
|
<input type="checkbox" id="checkShowAux" checked> Hilfsgeometrien anzeigen
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Anlagen-Konfiguration</h2>
|
|
<div style="display: flex; gap: 8px; margin-bottom: 6px;">
|
|
<div style="flex: 1;">
|
|
<label for="turbineManufacturer" class="label-small">Hersteller</label>
|
|
<select id="turbineManufacturer" class="input-styled input-small">
|
|
<option value="Enercon">Enercon</option>
|
|
<option value="Nordex">Nordex</option>
|
|
<option value="Vestas">Vestas</option>
|
|
<option value="GE">GE</option>
|
|
</select>
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<label for="turbineType" class="label-small">Anlagentyp</label>
|
|
<input type="text" id="turbineType" class="input-styled input-small" placeholder="z.B. V162">
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 8px; align-items: center; margin-bottom: 6px;">
|
|
<label for="rotorDiameter" class="label-small" style="flex: 1; margin: 0;">Rotordurchmesser (m)</label>
|
|
<input type="number" id="rotorDiameter" class="input-styled input-small" value="160" style="width: 60px;">
|
|
</div>
|
|
<div style="display: flex; gap: 8px; align-items: center; margin-bottom: 6px;">
|
|
<label for="hubHeight" class="label-small" style="flex: 1; margin: 0;">Nabenhöhe (m)</label>
|
|
<input type="number" id="hubHeight" class="input-styled input-small" value="165" style="width: 60px;">
|
|
</div>
|
|
<div style="display: flex; gap: 8px; align-items: center; margin-bottom: 6px;">
|
|
<label for="foundationRadius" class="label-small" style="flex: 1; margin: 0;">Fundament Radius (m)</label>
|
|
<input type="number" id="foundationRadius" class="input-styled input-small" value="15" style="width: 60px;">
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h2>Werkzeuge</h2>
|
|
<div class="control-group" style="display: flex; gap: 6px; flex-wrap: wrap;">
|
|
<button class="btn-primary btn-mini" id="btnPlaceTurbine" style="flex: 1.2; min-width: 100px;">
|
|
<span>📍</span> Anlage setzen
|
|
</button>
|
|
<button class="btn-secondary btn-mini" id="btnManageOwners"
|
|
style="flex: 1.2; min-width: 100px; margin-top: 0;">
|
|
<span>👥</span> Eigentümer
|
|
</button>
|
|
<button class="btn-secondary btn-mini" id="btnMeasureDist" title="Distanz messen"
|
|
style="flex: 0.4; padding: 6px; margin-top: 0;">📏</button>
|
|
<button class="btn-secondary btn-mini" id="btnMeasureArea" title="Fläche messen"
|
|
style="flex: 0.4; padding: 6px; margin-top: 0;">📐</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- UTM Coordinate Input -->
|
|
<div class="section"
|
|
style="border: 1px solid var(--border-color); padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.02);">
|
|
<h2 style="margin-bottom: 6px;">UTM-Position</h2>
|
|
<div style="display: flex; gap: 6px; margin-bottom: 6px;">
|
|
<div style="flex: 1;">
|
|
<label class="label-small">Rechts (E)</label>
|
|
<input type="number" id="utm-e" class="input-styled input-small" placeholder="32..." step="0.01">
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<label class="label-small">Hoch (N)</label>
|
|
<input type="number" id="utm-n" class="input-styled input-small" placeholder="5..." step="0.01">
|
|
</div>
|
|
</div>
|
|
<button class="btn-primary btn-mini" id="btnCreateAtUTM" style="font-size: 0.75rem;">
|
|
An UTM erzeugen
|
|
</button>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="section">
|
|
<h2>Projekt</h2>
|
|
<div style="display: flex; flex-direction: column; gap: 4px;">
|
|
<button class="btn-primary btn-mini" id="btnSaveDB">In DB speichern</button>
|
|
<div style="display: flex; gap: 4px;">
|
|
<button class="btn-secondary btn-mini" id="btnSaveProject" style="flex: 1;">Sichern</button>
|
|
<button class="btn-secondary btn-mini" id="btnLoadProject" style="flex: 1;">Laden</button>
|
|
</div>
|
|
</div>
|
|
<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. (v1.0.3 - Mirrored Nordex Default)
|
|
</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>Hersteller:</label>
|
|
<select id="edit-wea-manufacturer" class="edit-input">
|
|
<option value="Enercon">Enercon</option>
|
|
<option value="Nordex">Nordex</option>
|
|
<option value="Vestas">Vestas</option>
|
|
<option value="GE">GE</option>
|
|
</select>
|
|
</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>Nachname</th>
|
|
<th>Vorname</th>
|
|
<th>Adresse</th>
|
|
<th>Flächen</th>
|
|
<th>Status</th>
|
|
<th>Notiz</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> |