update for app.js

2026-02-16 11:24:23 +01:00
parent b8b2aec67d
commit d081477d63
11 changed files with 432 additions and 449 deletions
@@ -0,0 +1,135 @@
+// static/js/ui-soundboard.js
+// Verantwortlich für: Soundboard-Buttons, Play/Stop, Volume-Regler
+
+let currentSoundButton = null; // welcher Button gerade spielt (für optisches Feedback)
+
+// Initialisierung – wird von app.js aufgerufen
+function initSoundboard() {
+  console.log('ui-soundboard.js → Initialisierung');
+
+  // ── Volume-Regler ──────────────────────────────────────────────────────────
+  const volumeSlider  = document.getElementById('volume-slider');
+  const volumeDisplay = document.getElementById('volume-display');
+
+  if (volumeSlider && volumeDisplay) {
+    // Startwert anzeigen
+    volumeDisplay.textContent = `${volumeSlider.value} %`;
+
+    volumeSlider.addEventListener('input', () => {
+      const vol = parseInt(volumeSlider.value) / 100;
+      volumeDisplay.textContent = `${volumeSlider.value} %`;
+
+      // Lautstärke an Server senden
+      fetch('/api/set_volume', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ volume: vol })
+      })
+      .then(res => {
+        if (!res.ok) throw new Error('Volume-Set-Fehler');
+        console.log(`Volume auf ${vol} gesetzt`);
+      })
+      .catch(err => {
+        console.error('Volume-Set-Fehler:', err);
+        alert('Lautstärke konnte nicht gesetzt werden');
+      });
+    });
+  } else {
+    console.warn('Volume-Regler nicht gefunden im DOM');
+  }
+
+  // ── Play-Buttons ───────────────────────────────────────────────────────────
+  document.querySelectorAll('.play-sound-btn').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      const soundId = btn.dataset.soundId;
+
+      // Alten Play-Button zurücksetzen
+      if (currentSoundButton && currentSoundButton !== btn) {
+        currentSoundButton.classList.remove('btn-success');
+        currentSoundButton.classList.add('btn-outline-primary', 'btn-outline-secondary');
+        currentSoundButton.innerHTML = currentSoundButton.dataset.originalText || '<i class="bi bi-play-fill me-2"></i> Abspielen';
+        currentSoundButton.disabled = false;
+      }
+
+      // Neuen Button markieren
+      btn.disabled = true;
+      const originalText = btn.innerHTML;
+      btn.dataset.originalText = originalText;
+      btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Spielt...';
+
+      try {
+        const res = await fetch('/api/play_sound', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ sound_id: soundId })
+        });
+
+        const data = await res.json();
+
+        if (data.success) {
+          btn.classList.remove('btn-outline-primary', 'btn-outline-secondary');
+          btn.classList.add('btn-success');
+          btn.innerHTML = '<i class="bi bi-check-lg me-2"></i> Gespielt';
+          currentSoundButton = btn;
+
+          // Optional: Automatisch nach 3–5 Sekunden zurücksetzen
+          setTimeout(() => {
+            if (currentSoundButton === btn) {
+              btn.classList.remove('btn-success');
+              btn.classList.add('btn-outline-primary');
+              btn.innerHTML = originalText;
+              btn.disabled = false;
+            }
+          }, 4000); // 4 Sekunden – anpassbar
+        } else {
+          alert('Fehler beim Abspielen:\n' + (data.message || 'Unbekannt'));
+          btn.innerHTML = originalText;
+          btn.disabled = false;
+        }
+      } catch (err) {
+        console.error('Sound-Play-Fehler:', err);
+        alert('Netzwerkfehler beim Abspielen');
+        btn.innerHTML = originalText;
+        btn.disabled = false;
+      }
+    });
+  });
+
+  // ── Stop-Button für aktuellen Sound ────────────────────────────────────────
+  document.querySelectorAll('.stop-sound-btn').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      try {
+        const res = await fetch('/api/stop_sound', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' }
+        });
+
+        const data = await res.json();
+
+        if (data.success) {
+          // Visuelles Feedback: aktuellen Play-Button zurücksetzen
+          if (currentSoundButton) {
+            currentSoundButton.classList.remove('btn-success');
+            currentSoundButton.classList.add('btn-outline-primary', 'btn-outline-secondary');
+            currentSoundButton.innerHTML = currentSoundButton.dataset.originalText || '<i class="bi bi-play-fill me-2"></i> Abspielen';
+            currentSoundButton.disabled = false;
+            currentSoundButton = null;
+          }
+
+          console.log('Aktueller Sound gestoppt');
+          // Optional: kurzes Feedback am Button
+          btn.classList.add('btn-danger');
+          setTimeout(() => btn.classList.remove('btn-danger'), 800);
+        } else {
+          alert('Fehler beim Stoppen: ' + (data.message || 'Unbekannt'));
+        }
+      } catch (err) {
+        console.error('Stop-Sound-Fehler:', err);
+        alert('Netzwerkfehler beim Stoppen');
+      }
+    });
+  });
+}
+
+// Export für app.js
+window.initSoundboard = initSoundboard;