tabs for sounds added
This commit is contained in:
+71
-31
@@ -14,7 +14,7 @@
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Linke Spalte: Kanal-Steuerung (8/12 auf lg) -->
|
||||
<!-- Linke Spalte: Kanal-Steuerung (8/12) -->
|
||||
<div class="col-lg-8">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-md-8">
|
||||
@@ -65,7 +65,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reconnect-Bereich – wird nur bei Verbindungsverlust eingeblendet -->
|
||||
<!-- Reconnect-Bereich -->
|
||||
<div id="reconnect-section" class="text-center mt-5" style="display: none;">
|
||||
<div class="alert alert-warning">
|
||||
<strong>Verbindung unterbrochen</strong><br>
|
||||
@@ -77,45 +77,82 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rechte Spalte: Soundboard (4/12 auf lg) -->
|
||||
<!-- Rechte Spalte: Soundboard (4/12) -->
|
||||
<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;">
|
||||
<div class="card-body">
|
||||
|
||||
<!-- 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 %}
|
||||
<!-- Volume-Regler (global) -->
|
||||
<div class="mb-4">
|
||||
<label for="volume-slider" class="form-label fw-bold">Lautstärke</label>
|
||||
<input type="range" class="form-range" id="volume-slider" min="0" max="100" value="80" step="5">
|
||||
<div class="text-center mt-1">
|
||||
<span id="volume-display">80 %</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 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 %}
|
||||
<!-- Tabs -->
|
||||
<ul class="nav nav-tabs mb-3" id="soundTabs" role="tablist">
|
||||
{% if config.sounds and config.sounds|length > 0 %}
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="lok-tab" data-bs-toggle="tab" data-bs-target="#lok-sounds" type="button" role="tab">
|
||||
Lok-spezifisch
|
||||
</button>
|
||||
{% endfor %}
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link {% if not config.sounds or config.sounds|length == 0 %}active{% endif %}" id="global-tab" data-bs-toggle="tab" data-bs-target="#global-sounds" type="button" role="tab">
|
||||
Standard-Sounds
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" id="soundTabContent" style="max-height: 50vh; overflow-y: auto;">
|
||||
<!-- Lok-spezifische Sounds -->
|
||||
{% if config.sounds and config.sounds|length > 0 %}
|
||||
<div class="tab-pane fade show active" id="lok-sounds" role="tabpanel">
|
||||
<div class="d-grid gap-2">
|
||||
{% for sound in config.sounds %}
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-outline-primary flex-grow-1 play-sound-btn"
|
||||
data-sound-id="{{ sound.id }}">
|
||||
{{ sound.name }}
|
||||
{% if sound.description %}
|
||||
<small class="d-block text-muted">{{ sound.description }}</small>
|
||||
{% endif %}
|
||||
</button>
|
||||
<button class="btn btn-outline-danger stop-sound-btn" title="Aktuellen Sound stoppen">
|
||||
<i class="bi bi-stop-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Globale Standard-Sounds -->
|
||||
<div class="tab-pane fade {% if not config.sounds or config.sounds|length == 0 %}show active{% endif %}" id="global-sounds" role="tabpanel">
|
||||
<div class="d-grid gap-2">
|
||||
{% for sound in global_sounds %}
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-outline-secondary flex-grow-1 play-sound-btn"
|
||||
data-sound-id="{{ sound.id }}">
|
||||
{{ sound.name }}
|
||||
{% if sound.description %}
|
||||
<small class="d-block text-muted">{{ sound.description }}</small>
|
||||
{% endif %}
|
||||
</button>
|
||||
<button class="btn btn-outline-danger stop-sound-btn" title="Aktuellen Sound stoppen">
|
||||
<i class="bi bi-stop-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% 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>
|
||||
@@ -134,5 +171,8 @@
|
||||
const config = {{ config | tojson | safe }};
|
||||
const globalSounds = {{ global_sounds | tojson | safe }};
|
||||
window.mkConfig = config; // falls du es global brauchst
|
||||
|
||||
console.log("Config im JS:", config);
|
||||
console.log("Globale Sounds:", globalSounds);
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user