next step - added control.html and functions

2026-02-03 16:03:05 +01:00
parent 8955cff47b
commit 127754ba15
3 changed files with 250 additions and 15 deletions
@@ -0,0 +1,67 @@
+{% extends "base.html" %}
+
+{% block title %}{{ config.name }} – Steuerung{% endblock %}
+
+{% block content %}
+
+<div class="container my-4">
+
+  <div class="row mb-4 align-items-center">
+    <div class="col-md-8">
+      <h1 class="mb-1">{{ config.name }}</h1>
+      <p class="text-muted">
+        Hub-ID: {{ config.hub_id | default('unbekannt') }} •
+        Typ: {{ config.hub_type | default('unbekannt') }} •
+        Datei: {{ config.filename }}
+      </p>
+    </div>
+    <div class="col-md-4 text-md-end">
+      {% if config.image %}
+        <img src="{{ url_for('serve_config_file', filename=config.image) }}"
+             alt="{{ config.name }}"
+             class="img-fluid rounded shadow"
+             style="max-height: 180px; object-fit: cover;">
+      {% else %}
+        <div class="bg-light rounded d-flex align-items-center justify-content-center shadow"
+             style="height: 180px; width: 100%; max-width: 300px; margin-left: auto;">
+          <i class="bi bi-train-freight-front display-1 text-muted"></i>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+
+  <!-- Connect-Button -->
+  <div class="text-center mb-5" id="connect-section">
+    <button id="connect-btn" class="btn btn-lg btn-success px-5 py-3">
+      <i class="bi bi-bluetooth me-2"></i> Mit Hub verbinden
+    </button>
+    <p class="mt-3 text-muted small">Stelle sicher, dass der Hub eingeschaltet ist und im Bluetooth-Modus ausgewählt wurde.</p>
+  </div>
+
+  <!-- Steuerbereich – anfangs versteckt -->
+  <div id="control-section" style="display: none;">
+    <div class="card shadow">
+      <div class="card-header bg-primary text-white">
+        <h5 class="mb-0">Steuerung</h5>
+      </div>
+      <div class="card-body" id="channels-container">
+        <!-- Dynamische Kanäle werden hier per JavaScript eingefügt -->
+      </div>
+      <div class="card-footer text-center">
+        <button id="stop-all-btn" class="btn btn-danger btn-lg px-5">
+          <i class="bi bi-stop-fill me-2"></i> Alle stoppen
+        </button>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+{% endblock %}
+
+{% block scripts %}
+  <script>
+    // Config direkt ins JS übergeben
+    const config = {{ config | tojson | safe }};
+  </script>
+{% endblock %}