fixxes to soundboard

app/routes/main.py

@@ -78,9 +78,13 @@ def control_page():
 
 @main_bp.route('/soundboard')
 def soundboard():
-    if state.current_config is None or 'sounds' not in state.current_config:
+    if state.current_config is None:
         return redirect(url_for('main.index'))
     
-    sounds = state.current_config.get('sounds', [])
+    sounds_local = state.current_config.get('sounds', [])
-    return render_template('soundboard.html', sounds=sounds, config=state.current_config)
+    sounds_global = load_default_sounds(current_app.config['CONFIG_DIR'])
+    return render_template('soundboard.html',
+                           sounds_local=sounds_local,
+                           sounds_global=sounds_global,
+                           config=state.current_config)
     pass

templates/soundboard.html

@@ -7,9 +7,13 @@
   <h1>Soundboard – {{ config.name }}</h1>
   <p class="lead mb-4">Wähle einen Sound aus – wird direkt über den Raspberry Pi ausgegeben.</p>
 
-  {% if sounds %}
+  {% set has_local = sounds_local and sounds_local|length > 0 %}
+  {% set has_global = sounds_global and sounds_global|length > 0 %}
+
+  {% if has_local %}
+    <h4 class="mt-3 mb-3">Lok-spezifische Sounds</h4>
     <div class="row g-3">
-      {% for sound in sounds %}
+      {% for sound in sounds_local %}
         <div class="col-md-4 col-lg-3">
           <div class="card h-100 shadow-sm">
             <div class="card-body text-center">
@@ -18,7 +22,9 @@
                 <p class="card-text text-muted small">{{ sound.description }}</p>
               {% endif %}
               <button class="btn btn-primary mt-3 play-sound-btn"
-                      data-sound-id="{{ sound.id }}">
+                      data-sound-id="{{ sound.id }}"
+                      data-channel="{{ sound.channel | default('') }}"
+                      data-loop="{{ 1 if sound.loop else 0 }}">
                 <i class="bi bi-play-fill me-2"></i> Abspielen
               </button>
             </div>
@@ -26,9 +32,35 @@
         </div>
       {% endfor %}
     </div>
-  {% else %}
+  {% endif %}
+
+  {% if has_global %}
+    <h4 class="mt-5 mb-3">Standard-Sounds</h4>
+    <div class="row g-3">
+      {% for sound in sounds_global %}
+        <div class="col-md-4 col-lg-3">
+          <div class="card h-100 shadow-sm">
+            <div class="card-body text-center">
+              <h5 class="card-title">{{ sound.name }}</h5>
+              {% if sound.description %}
+                <p class="card-text text-muted small">{{ sound.description }}</p>
+              {% endif %}
+              <button class="btn btn-outline-secondary mt-3 play-sound-btn"
+                      data-sound-id="{{ sound.id }}"
+                      data-channel="{{ sound.channel | default('') }}"
+                      data-loop="{{ 1 if sound.loop else 0 }}">
+                <i class="bi bi-play-fill me-2"></i> Abspielen
+              </button>
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  {% endif %}
+
+  {% if not has_local and not has_global %}
     <div class="alert alert-info">
-      In dieser Konfiguration sind noch keine Sounds definiert.
+      In dieser Konfiguration sind keine Sounds definiert und keine Default-Sounds vorhanden.
     </div>
   {% endif %}
 
@@ -44,6 +76,8 @@
   document.querySelectorAll('.play-sound-btn').forEach(btn => {
     btn.addEventListener('click', async () => {
       const soundId = btn.dataset.soundId;
+      const channel = btn.dataset.channel || null;
+      const loopFlag = btn.dataset.loop === '1' || btn.dataset.loop === 'true';
       btn.disabled = true;
       btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Spielt...';
 
@@ -51,7 +85,7 @@
         const res = await fetch('/api/play_sound', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ sound_id: soundId })
+          body: JSON.stringify({ sound_id: soundId, channel, loop: loopFlag })
         });
 
         const data = await res.json();
@@ -80,4 +114,4 @@
     });
   });
 </script>
-{% endblock %}
+{% endblock %}