update for soundboard with global soundfiles
This commit is contained in:
+108
-58
@@ -6,83 +6,133 @@
|
||||
|
||||
<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 %}
|
||||
<!-- Status-Anzeige (oben rechts fixiert) -->
|
||||
<div class="position-fixed top-0 end-0 m-3" style="z-index: 1050;">
|
||||
<div id="connection-status" class="badge bg-secondary px-3 py-2 fs-6">
|
||||
<i class="bi bi-circle-fill me-2 text-muted"></i> Nicht verbunden
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status-Anzeige -->
|
||||
<div class="position-fixed top-0 end-0 m-3" style="z-index: 1050;">
|
||||
<div id="connection-status" class="badge bg-secondary px-3 py-2 fs-6">
|
||||
<i class="bi bi-circle-fill me-2 text-muted"></i> Nicht verbunden
|
||||
<div class="row">
|
||||
<!-- Linke Spalte: Kanal-Steuerung (8/12 auf lg) -->
|
||||
<div class="col-lg-8">
|
||||
<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>
|
||||
<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>
|
||||
<!-- Connect-Bereich -->
|
||||
<div id="connect-section" class="text-center mb-5">
|
||||
<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;">
|
||||
<!-- 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 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>
|
||||
|
||||
<!-- Reconnect-Bereich – wird nur bei Verbindungsverlust eingeblendet -->
|
||||
<div id="reconnect-section" class="text-center mt-5" style="display: none;">
|
||||
<div class="alert alert-warning">
|
||||
<strong>Verbindung unterbrochen</strong><br>
|
||||
Der Hub reagiert nicht mehr. Bitte erneut verbinden.
|
||||
<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
|
||||
<i class="bi bi-arrow-repeat me-2"></i> Erneut verbinden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rechte Spalte: Soundboard (4/12 auf lg) -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card shadow sticky-top" style="top: 20px;">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h5 class="mb-0">Soundboard</h5>
|
||||
</div>
|
||||
<div class="card-body" style="max-height: 70vh; overflow-y: auto;">
|
||||
|
||||
<!-- Lok-spezifische Sounds -->
|
||||
{% if config.sounds and config.sounds|length > 0 %}
|
||||
<h6 class="mt-0 mb-3">Lok-spezifisch</h6>
|
||||
<div class="d-grid gap-2 mb-4">
|
||||
{% for sound in config.sounds %}
|
||||
<button class="btn btn-outline-primary play-sound-btn"
|
||||
data-sound-id="{{ sound.id }}">
|
||||
{{ sound.name }}
|
||||
{% if sound.description %}
|
||||
<small class="d-block text-muted">{{ sound.description }}</small>
|
||||
{% endif %}
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Globale / Standard-Sounds -->
|
||||
{% if global_sounds and global_sounds|length > 0 %}
|
||||
<h6 class="mt-4 mb-3">Standard-Sounds</h6>
|
||||
<div class="d-grid gap-2">
|
||||
{% for sound in global_sounds %}
|
||||
<button class="btn btn-outline-secondary play-sound-btn"
|
||||
data-sound-id="{{ sound.id }}">
|
||||
{{ sound.name }}
|
||||
{% if sound.description %}
|
||||
<small class="d-block text-muted">{{ sound.description }}</small>
|
||||
{% endif %}
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if (not config.sounds or config.sounds|length == 0) and (not global_sounds or global_sounds|length == 0) %}
|
||||
<p class="text-muted text-center py-4">Keine Sounds konfiguriert</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// config global verfügbar machen
|
||||
window.mkConfig = {{ config | tojson | safe }};
|
||||
|
||||
console.log("window.mkConfig gesetzt:", window.mkConfig);
|
||||
console.log("Channels:", window.mkConfig?.channels);
|
||||
// Config + globale Sounds direkt ins JS übergeben
|
||||
const config = {{ config | tojson | safe }};
|
||||
const globalSounds = {{ global_sounds | tojson | safe }};
|
||||
window.mkConfig = config; // falls du es global brauchst
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user