tabs for sounds added
This commit is contained in:
+146
-106
@@ -11,6 +11,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const stopAllBtn = document.getElementById('stop-all-btn');
|
||||
const reconnectSection = document.getElementById('reconnect-section');
|
||||
const reconnectBtn = document.getElementById('reconnect-btn');
|
||||
const statusBadge = document.getElementById('connection-status');
|
||||
const volumeSlider = document.getElementById('volume-slider');
|
||||
const volumeDisplay = document.getElementById('volume-display');
|
||||
|
||||
if (!connectBtn) {
|
||||
console.warn('Nicht auf der Steuerseite – Connect-Button nicht gefunden');
|
||||
@@ -18,8 +21,68 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
// ── Config aus Template ────────────────────────────────────────────────────
|
||||
const config = window.mkConfig || {};
|
||||
console.log("app.js verwendet config:", config);
|
||||
const config = {{ config | tojson | safe }};
|
||||
const globalSounds = {{ global_sounds | tojson | safe }};
|
||||
window.mkConfig = config; // global für Konsistenz
|
||||
|
||||
console.log("Config im JS:", config);
|
||||
console.log("Globale Sounds:", globalSounds);
|
||||
|
||||
// ── Status-Anzeige ─────────────────────────────────────────────────────────
|
||||
function updateStatus(connected, message = '') {
|
||||
if (!statusBadge) return;
|
||||
|
||||
if (connected) {
|
||||
statusBadge.className = 'badge bg-success px-3 py-2 fs-6';
|
||||
statusBadge.innerHTML = '<i class="bi bi-circle-fill me-2"></i> Verbunden' + (message ? ` – ${message}` : '');
|
||||
if (reconnectSection) reconnectSection.style.display = 'none';
|
||||
} else {
|
||||
statusBadge.className = 'badge bg-danger px-3 py-2 fs-6';
|
||||
statusBadge.innerHTML = '<i class="bi bi-circle-fill me-2"></i> Getrennt' + (message ? ` – ${message}` : '');
|
||||
if (reconnectSection) reconnectSection.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// Initialer Status
|
||||
updateStatus(false);
|
||||
|
||||
// ── Automatische Verbindungsprüfung ────────────────────────────────────────
|
||||
let connectionCheckInterval = null;
|
||||
let failedChecks = 0;
|
||||
const MAX_FAILED_CHECKS = 3;
|
||||
|
||||
function startConnectionCheck() {
|
||||
if (connectionCheckInterval) clearInterval(connectionCheckInterval);
|
||||
|
||||
connectionCheckInterval = setInterval(async () => {
|
||||
try {
|
||||
console.log("→ Status-Check ...");
|
||||
const res = await fetch('/api/status');
|
||||
const data = await res.json();
|
||||
|
||||
if (data.connected) {
|
||||
failedChecks = 0;
|
||||
updateStatus(true);
|
||||
} else {
|
||||
failedChecks++;
|
||||
console.warn(`Status-Check fehlgeschlagen (${failedChecks}/${MAX_FAILED_CHECKS}):`, data.message);
|
||||
if (failedChecks >= MAX_FAILED_CHECKS) {
|
||||
updateStatus(false, data.message || 'Mehrere Checks fehlgeschlagen');
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
failedChecks++;
|
||||
console.warn(`Status-Check Netzwerkfehler (${failedChecks}/${MAX_FAILED_CHECKS}):`, err);
|
||||
if (failedChecks >= MAX_FAILED_CHECKS) {
|
||||
updateStatus(false, 'Keine Antwort vom Hub/Server');
|
||||
}
|
||||
}
|
||||
}, 6000); // 6 Sekunden
|
||||
}
|
||||
|
||||
window.addEventListener('beforeunload', () => {
|
||||
if (connectionCheckInterval) clearInterval(connectionCheckInterval);
|
||||
});
|
||||
|
||||
// ── Connect-Button ────────────────────────────────────────────────────────
|
||||
connectBtn.addEventListener('click', async () => {
|
||||
@@ -43,16 +106,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
controlSection.style.display = 'block';
|
||||
reconnectSection.style.display = 'none';
|
||||
|
||||
// Status aktualisieren
|
||||
updateStatus(true);
|
||||
startConnectionCheck();
|
||||
|
||||
console.log("→ Rufe renderChannels() auf");
|
||||
renderChannels();
|
||||
|
||||
console.log("→ renderChannels() abgeschlossen");
|
||||
|
||||
// Automatische Prüfung starten
|
||||
startConnectionCheck();
|
||||
} else {
|
||||
console.warn("→ Connect fehlgeschlagen:", result.message);
|
||||
alert('Verbindung fehlgeschlagen:\n' + (result.message || 'Unbekannter Fehler'));
|
||||
@@ -179,7 +239,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
// Licht, Sound, Fogger etc. → Toggle
|
||||
controlHTML = `
|
||||
<label class="form-label fw-bold">${channel.name} (${channel.port})</label>
|
||||
<button class="btn btn-outline-secondary w-100 toggle-btn"
|
||||
@@ -275,11 +334,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
throw new Error(errData.message || 'Steuerbefehl fehlgeschlagen');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('sendControl Fehler:', err);
|
||||
failedChecks++;
|
||||
if (failedChecks >= MAX_FAILED_CHECKS) {
|
||||
updateStatus(false, 'Mehrere Steuerbefehle fehlgeschlagen');
|
||||
}
|
||||
console.error('sendControl Fehler:', err);
|
||||
// Bei Fehler: Verbindungsprüfung triggern
|
||||
updateStatus(false, 'Fehler beim Senden');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -291,110 +348,93 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
}
|
||||
|
||||
// ── Status-Anzeige ─────────────────────────────────────────────────────────
|
||||
const statusBadge = document.getElementById('connection-status');
|
||||
// ── Soundboard Buttons ─────────────────────────────────────────────────────
|
||||
let currentSoundButton = null;
|
||||
|
||||
function updateStatus(connected, message = '') {
|
||||
if (!statusBadge) return;
|
||||
document.querySelectorAll('.play-sound-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const soundId = btn.dataset.soundId;
|
||||
|
||||
if (connected) {
|
||||
statusBadge.className = 'badge bg-success px-3 py-2 fs-6';
|
||||
statusBadge.innerHTML = '<i class="bi bi-circle-fill me-2"></i> Verbunden';
|
||||
} else {
|
||||
statusBadge.className = 'badge bg-danger px-3 py-2 fs-6';
|
||||
statusBadge.innerHTML = '<i class="bi bi-circle-fill me-2"></i> Getrennt' + (message ? ` – ${message}` : '');
|
||||
showReconnect();
|
||||
}
|
||||
}
|
||||
|
||||
// ── Soundboard Buttons ─────────────────────────────────────────────────────
|
||||
document.querySelectorAll('.play-sound-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const soundId = btn.dataset.soundId;
|
||||
btn.disabled = true;
|
||||
const originalText = btn.innerHTML;
|
||||
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';
|
||||
setTimeout(() => {
|
||||
btn.classList.remove('btn-success');
|
||||
btn.classList.add('btn-outline-primary'); // oder secondary
|
||||
btn.innerHTML = originalText;
|
||||
btn.disabled = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
alert('Fehler: ' + (data.message || 'Unbekannt'));
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = originalText;
|
||||
// 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';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Sound-Play-Fehler:', err);
|
||||
alert('Netzwerkfehler beim Abspielen');
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = originalText;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Initialer Status
|
||||
updateStatus(false);
|
||||
btn.disabled = true;
|
||||
const originalText = btn.innerHTML;
|
||||
btn.dataset.originalText = originalText;
|
||||
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Spielt...';
|
||||
|
||||
// ── Automatische Verbindungsprüfung ────────────────────────────────────────
|
||||
let connectionCheckInterval = null;
|
||||
let failedChecks = 0;
|
||||
const MAX_FAILED_CHECKS = 3; // erst nach 3 Fehlschlägen in Folge rot
|
||||
try {
|
||||
const res = await fetch('/api/play_sound', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ sound_id: soundId })
|
||||
});
|
||||
|
||||
function startConnectionCheck() {
|
||||
if (connectionCheckInterval) clearInterval(connectionCheckInterval);
|
||||
|
||||
connectionCheckInterval = setInterval(async () => {
|
||||
try {
|
||||
console.log("→ Status-Check ...");
|
||||
const res = await fetch('/api/status');
|
||||
const data = await res.json();
|
||||
|
||||
if (data.connected) {
|
||||
failedChecks = 0;
|
||||
updateStatus(true);
|
||||
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;
|
||||
} else {
|
||||
failedChecks++;
|
||||
console.warn(`Status-Check fehlgeschlagen (${failedChecks}/${MAX_FAILED_CHECKS}):`, data.message);
|
||||
if (failedChecks >= MAX_FAILED_CHECKS) {
|
||||
updateStatus(false, data.message || 'Mehrere Checks fehlgeschlagen');
|
||||
}
|
||||
alert('Fehler: ' + (data.message || 'Unbekannt'));
|
||||
btn.innerHTML = originalText;
|
||||
btn.disabled = false;
|
||||
}
|
||||
} catch (err) {
|
||||
failedChecks++;
|
||||
console.warn(`Status-Check Netzwerkfehler (${failedChecks}/${MAX_FAILED_CHECKS}):`, err);
|
||||
if (failedChecks >= MAX_FAILED_CHECKS) {
|
||||
updateStatus(false, 'Keine Antwort vom Hub/Server');
|
||||
}
|
||||
}
|
||||
}, 6000); // 6 Sekunden – aggressiver als 8 s
|
||||
}
|
||||
|
||||
// In Connect- und Reconnect-Handler nach erfolgreichem Connect/Reconnect:
|
||||
startConnectionCheck();
|
||||
updateStatus(true);
|
||||
|
||||
|
||||
|
||||
window.addEventListener('beforeunload', () => {
|
||||
if (connectionCheckInterval) clearInterval(connectionCheckInterval);
|
||||
} catch (err) {
|
||||
console.error('Sound-Play-Fehler:', err);
|
||||
alert('Netzwerkfehler beim Abspielen');
|
||||
btn.innerHTML = originalText;
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Optional: Bei Seitenlade den Check starten (falls schon verbunden)
|
||||
// startConnectionCheck(); // ← auskommentiert, da nach Connect gestartet
|
||||
// ── 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' });
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
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('Sound gestoppt');
|
||||
} else {
|
||||
alert('Fehler: ' + data.message);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Stop-Sound-Fehler:', err);
|
||||
alert('Netzwerkfehler beim Stoppen');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ── Volume-Regler
|
||||
if (volumeSlider && volumeDisplay) {
|
||||
volumeSlider.addEventListener('input', () => {
|
||||
const vol = volumeSlider.value / 100;
|
||||
volumeDisplay.textContent = `${volumeSlider.value} %`;
|
||||
|
||||
try {
|
||||
fetch('/api/set_volume', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ volume: vol })
|
||||
}).catch(err => console.error('Volume-Set-Fehler:', err));
|
||||
} catch (err) {
|
||||
console.error('Volume-Fehler:', err);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user