79 lines
2.8 KiB
HTML
79 lines
2.8 KiB
HTML
{% 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>
|
||
<!-- Reconnect-Bereich – wird nur angezeigt, wenn Verbindung verloren -->
|
||
<div class="text-center mt-5" id="reconnect-section" style="display: none;">
|
||
<div class="alert alert-warning">
|
||
<strong>Verbindung unterbrochen</strong><br>
|
||
Der Hub reagiert nicht mehr. Bitte erneut verbinden.
|
||
</div>
|
||
<button id="reconnect-btn" class="btn btn-warning btn-lg px-5 py-3">
|
||
<i class="bi bi-arrow-repeat me-2"></i> Erneut verbinden
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{% endblock %}
|
||
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
const config = {{ config | tojson | safe }};
|
||
console.log("Config im JS:", config);
|
||
console.log("Channels:", config?.channels || "KEINE CHANNELS");
|
||
</script>
|
||
{% endblock %} |