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

UI: Compacting sidebar, removing auto-load section, and optimizing input layouts
Deploy Bürgerwind / deploy (push) Successful in 17s Details

This commit is contained in:
Johannes Baumeister 2026-05-13 09:03:45 +02:00
parent 636286024c
commit a47047d34d
2 changed files with 75 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
index.html
View File

@ -44,99 +44,81 @@
<div class="section">
<h2>Anlagen-Konfiguration</h2>
<div class="control-group">
<label for="turbineManufacturer">Hersteller</label>
<select id="turbineManufacturer" class="input-styled">
<option value="Enercon">Enercon</option>
<option value="Nordex">Nordex</option>
<option value="Vestas">Vestas</option>
<option value="GE">GE</option>
</select>
<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 class="control-group">
<label for="turbineType">Anlagentyp</label>
<input type="text" id="turbineType" class="input-styled" placeholder="z.B. V162">
<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 class="control-group">
<label for="rotorDiameter">Rotordurchmesser (m)</label>
<input type="number" id="rotorDiameter" class="input-styled" value="160">
<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 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 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: 8px; flex-wrap: wrap;">
<button class="btn-primary" id="btnPlaceTurbine" style="flex: 1; min-width: 140px;">
<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" id="btnManageOwners"
style="flex: 1; min-width: 140px; margin-top: 0;">
<span>👥</span> Eigentümer verwalten
<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" 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>
<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: 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;">
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
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">
<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
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">
<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" id="btnCreateAtUTM" style="font-size: 0.8rem; padding: 8px;">
An UTM-Position erzeugen
<button class="btn-primary btn-mini" id="btnCreateAtUTM" style="font-size: 0.75rem;">
An UTM 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 (Lokal)</button>
<button class="btn-primary" id="btnSaveDB">In Datenbank speichern</button>
<button class="btn-secondary" id="btnLoadProject">Projekt laden (Lokal)</button>
<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>

34
style.css
View File

@ -46,7 +46,7 @@ body {
}
.sidebar-header {
padding: 15px;
padding: 10px;
border-bottom: 1px solid var(--border-color);
}
@ -62,33 +62,39 @@ body {
.sidebar-content {
flex-grow: 1;
overflow-y: auto;
padding: 12px;
padding: 8px;
}
.section {
margin-bottom: 15px;
margin-bottom: 8px;
}
.section h2 {
font-size: 0.75rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-dim);
margin-bottom: 8px;
margin-bottom: 4px;
}
/* Control Elements */
.control-group {
margin-bottom: 12px;
margin-bottom: 6px;
}
.control-group label {
display: block;
font-size: 0.8rem;
margin-bottom: 4px;
font-size: 0.75rem;
margin-bottom: 2px;
color: var(--text-main);
}
.label-small {
font-size: 0.7rem !important;
color: var(--text-dim);
margin-bottom: 2px;
}
.input-styled {
width: 100%;
background: rgba(255, 255, 255, 0.05);
@ -100,6 +106,11 @@ body {
transition: all 0.3s ease;
}
.input-small {
padding: 4px 6px !important;
font-size: 0.8rem !important;
}
.input-styled option {
background: #1e1e1e;
color: white;
@ -107,7 +118,7 @@ body {
/* Compact number inputs */
.input-number {
width: 80px !important;
width: 60px !important;
}
.input-styled:focus {
@ -133,6 +144,11 @@ body {
gap: 6px;
}
.btn-mini {
padding: 4px 8px !important;
font-size: 0.75rem !important;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);