473 lines
14 KiB
HTML
473 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Debug - Gebedstijden Tester</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<style>
|
|
.debug-container {
|
|
max-width: 1200px;
|
|
margin: 2rem auto;
|
|
padding: 2rem;
|
|
background: var(--panel-bg);
|
|
border-radius: 15px;
|
|
border: 1px solid var(--panel-border);
|
|
}
|
|
|
|
.debug-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.debug-header h1 {
|
|
color: var(--accent);
|
|
font-family: 'Cairo', sans-serif;
|
|
font-size: 2.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.debug-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.debug-panel {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 1.5rem;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.debug-panel h3 {
|
|
color: var(--accent);
|
|
margin-bottom: 1rem;
|
|
font-family: 'Cairo', sans-serif;
|
|
}
|
|
|
|
.time-controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.time-input {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.time-input input {
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 5px;
|
|
background: var(--card-bg);
|
|
color: var(--text-color);
|
|
font-size: 1.1rem;
|
|
width: 120px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.7rem 1.5rem;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
margin: 0.2rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: #1a1a2e;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.prayer-times-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.prayer-times-list li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.7rem;
|
|
margin-bottom: 0.5rem;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 5px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.prayer-times-list li.active {
|
|
background: rgba(234, 179, 8, 0.2);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.status-display {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9rem;
|
|
color: #00ff00;
|
|
}
|
|
|
|
.quick-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.back-link {
|
|
display: inline-block;
|
|
margin-bottom: 1rem;
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.back-link:hover {
|
|
color: #b8941f;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.debug-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.debug-container {
|
|
margin: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="debug-container">
|
|
<a href="/" class="back-link">← Terug naar hoofdpagina</a>
|
|
|
|
<div class="debug-header">
|
|
<h1>🔧 Debug Mode</h1>
|
|
<p>Test de adhaan functionaliteit door de tijd aan te passen</p>
|
|
</div>
|
|
|
|
<div class="debug-grid">
|
|
<div class="debug-panel">
|
|
<h3>⏰ Tijd Controles</h3>
|
|
|
|
<div class="status-display" id="statusDisplay">
|
|
Huidige tijd: <span id="currentDebugTime">--:--</span><br>
|
|
Volgende gebed: <span id="nextPrayerDebug">--</span><br>
|
|
Status: <span id="debugStatus">Normaal</span>
|
|
</div>
|
|
|
|
<div class="time-controls">
|
|
<div class="time-input">
|
|
<label>Stel tijd in:</label>
|
|
<input type="time" id="manualTime" />
|
|
<button class="btn btn-primary" onclick="setManualTime()">Zet Tijd</button>
|
|
</div>
|
|
|
|
<div class="quick-actions">
|
|
<button class="btn btn-secondary" onclick="adjustTime(-60)">-1 min</button>
|
|
<button class="btn btn-secondary" onclick="adjustTime(-10)">-10 sec</button>
|
|
<button class="btn btn-secondary" onclick="adjustTime(10)">+10 sec</button>
|
|
<button class="btn btn-secondary" onclick="adjustTime(60)">+1 min</button>
|
|
</div>
|
|
|
|
<div class="quick-actions">
|
|
<button class="btn btn-primary" onclick="setTimeToNextPrayer(-1)">1 min voor gebed</button>
|
|
<button class="btn btn-primary" onclick="setTimeToNextPrayer(0)">Exact gebedstijd</button>
|
|
<button class="btn btn-danger" onclick="resetTime()">Reset naar echte tijd</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="debug-panel">
|
|
<h3>🕌 Gebedstijden Vandaag</h3>
|
|
<ul class="prayer-times-list" id="prayerTimesList">
|
|
{% for naam, tijd in gebedstijden.items() %}
|
|
<li data-prayer="{{ naam }}" data-time="{{ tijd[:5] }}">
|
|
<span>{{ naam }}</span>
|
|
<span>{{ tijd[:5] }}</span>
|
|
<button class="btn btn-secondary" onclick="setTimeToPrayer('{{ tijd[:5] }}', -1)">-1 min</button>
|
|
<button class="btn btn-primary" onclick="setTimeToPrayer('{{ tijd[:5] }}', 0)">Nu</button>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="debug-panel">
|
|
<h3>📊 Debug Log</h3>
|
|
<div class="status-display" id="debugLog" style="height: 200px; overflow-y: auto;">
|
|
Debug log wordt hier weergegeven...<br>
|
|
</div>
|
|
<button class="btn btn-secondary" onclick="clearLog()">Wis Log</button>
|
|
</div>
|
|
|
|
<div class="debug-panel">
|
|
<h3>🔊 Sonos Status</h3>
|
|
<div class="status-display" id="sonosStatus" style="height: 150px; overflow-y: auto;">
|
|
Sonos status wordt geladen...<br>
|
|
</div>
|
|
<div class="quick-actions">
|
|
<button class="btn btn-primary" onclick="checkSonosStatus()">🔄 Ververs Status</button>
|
|
<button class="btn btn-danger" onclick="stopAllSonos()">⏹️ Stop Alle Audio</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let debugTimeOffset = 0; // Offset in seconden
|
|
let isDebugMode = false;
|
|
|
|
function log(message) {
|
|
const logElement = document.getElementById('debugLog');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
logElement.innerHTML += `[${timestamp}] ${message}<br>`;
|
|
logElement.scrollTop = logElement.scrollHeight;
|
|
}
|
|
|
|
function clearLog() {
|
|
document.getElementById('debugLog').innerHTML = 'Debug log gewist...<br>';
|
|
}
|
|
|
|
function getDebugTime() {
|
|
const now = new Date();
|
|
if (isDebugMode) {
|
|
now.setTime(now.getTime() + (debugTimeOffset * 1000));
|
|
}
|
|
return now;
|
|
}
|
|
|
|
function updateDebugDisplay() {
|
|
const debugTime = getDebugTime();
|
|
const timeStr = debugTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
document.getElementById('currentDebugTime').textContent = timeStr;
|
|
|
|
// Update status
|
|
const statusElement = document.getElementById('debugStatus');
|
|
statusElement.textContent = isDebugMode ? 'Debug Mode Actief' : 'Normaal';
|
|
statusElement.style.color = isDebugMode ? '#ff6b6b' : '#00ff00';
|
|
|
|
// Check voor gebedstijd
|
|
checkPrayerTime(timeStr);
|
|
}
|
|
|
|
function checkPrayerTime(currentTime) {
|
|
const prayerTimes = {{ gebedstijden | tojson }};
|
|
let nextPrayer = null;
|
|
let isExactTime = false;
|
|
|
|
for (const [name, time] of Object.entries(prayerTimes)) {
|
|
const prayerTime = time.substring(0, 5);
|
|
if (prayerTime === currentTime) {
|
|
isExactTime = true;
|
|
log(`🕌 ADHAAN TIJD! ${name} (${prayerTime})`);
|
|
// Trigger adhaan
|
|
triggerAdhaan(name);
|
|
}
|
|
|
|
if (prayerTime > currentTime && !nextPrayer) {
|
|
nextPrayer = `${name} (${prayerTime})`;
|
|
}
|
|
}
|
|
|
|
if (!nextPrayer) {
|
|
// Volgende dag
|
|
const firstPrayer = Object.entries(prayerTimes)[0];
|
|
nextPrayer = `${firstPrayer[0]} (${firstPrayer[1].substring(0, 5)}) - morgen`;
|
|
}
|
|
|
|
document.getElementById('nextPrayerDebug').textContent = nextPrayer;
|
|
|
|
// Update active prayer in list
|
|
document.querySelectorAll('.prayer-times-list li').forEach(li => {
|
|
li.classList.remove('active');
|
|
if (li.dataset.time === currentTime) {
|
|
li.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
function triggerAdhaan(prayerName) {
|
|
// Speel adhaan af
|
|
const audio = document.getElementById('adhanAudio');
|
|
if (audio) {
|
|
audio.play().catch(e => log(`Fout bij afspelen audio: ${e.message}`));
|
|
}
|
|
|
|
// Verstuur naar Sonos (als niet gemute)
|
|
fetch('/api/debug-adhaan', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ prayer: prayerName, time: getDebugTime().toLocaleTimeString() })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
log(`✅ Adhaan verzonden naar Sonos voor ${prayerName}`);
|
|
} else {
|
|
log(`❌ Fout bij Sonos: ${data.error}`);
|
|
}
|
|
})
|
|
.catch(e => log(`❌ Netwerk fout: ${e.message}`));
|
|
}
|
|
|
|
function setManualTime() {
|
|
const timeInput = document.getElementById('manualTime');
|
|
if (!timeInput.value) return;
|
|
|
|
const [hours, minutes] = timeInput.value.split(':');
|
|
const now = new Date();
|
|
const targetTime = new Date();
|
|
targetTime.setHours(parseInt(hours), parseInt(minutes), 0, 0);
|
|
|
|
debugTimeOffset = Math.floor((targetTime - now) / 1000);
|
|
isDebugMode = true;
|
|
|
|
log(`⏰ Tijd handmatig ingesteld op ${timeInput.value}`);
|
|
updateDebugDisplay();
|
|
}
|
|
|
|
function adjustTime(seconds) {
|
|
debugTimeOffset += seconds;
|
|
isDebugMode = true;
|
|
|
|
const sign = seconds > 0 ? '+' : '';
|
|
log(`⏰ Tijd aangepast: ${sign}${seconds} seconden`);
|
|
updateDebugDisplay();
|
|
}
|
|
|
|
function setTimeToPrayer(prayerTime, offsetMinutes) {
|
|
const [hours, minutes] = prayerTime.split(':');
|
|
const now = new Date();
|
|
const targetTime = new Date();
|
|
targetTime.setHours(parseInt(hours), parseInt(minutes), 0, 0);
|
|
targetTime.setTime(targetTime.getTime() + (offsetMinutes * 60 * 1000));
|
|
|
|
debugTimeOffset = Math.floor((targetTime - now) / 1000);
|
|
isDebugMode = true;
|
|
|
|
const offsetText = offsetMinutes === 0 ? 'exact' : `${offsetMinutes} min ervoor`;
|
|
log(`🕌 Tijd ingesteld op ${prayerTime} (${offsetText})`);
|
|
updateDebugDisplay();
|
|
}
|
|
|
|
function setTimeToNextPrayer(offsetMinutes) {
|
|
const prayerTimes = {{ gebedstijden | tojson }};
|
|
const currentTime = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
|
|
for (const [name, time] of Object.entries(prayerTimes)) {
|
|
const prayerTime = time.substring(0, 5);
|
|
if (prayerTime > currentTime) {
|
|
setTimeToPrayer(prayerTime, offsetMinutes);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Als geen gebed meer vandaag, neem eerste van morgen
|
|
const firstPrayer = Object.entries(prayerTimes)[0];
|
|
setTimeToPrayer(firstPrayer[1].substring(0, 5), offsetMinutes);
|
|
}
|
|
|
|
function resetTime() {
|
|
debugTimeOffset = 0;
|
|
isDebugMode = false;
|
|
log(`🔄 Tijd gereset naar echte tijd`);
|
|
updateDebugDisplay();
|
|
}
|
|
|
|
function checkSonosStatus() {
|
|
log('🔄 Sonos status controleren...');
|
|
fetch('/api/sonos-status')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const statusElement = document.getElementById('sonosStatus');
|
|
if (data.success) {
|
|
let statusHtml = `Sonos API: ${data.api_ip}<br><br>`;
|
|
|
|
for (const [zone, info] of Object.entries(data.zones)) {
|
|
const statusColor = info.status === 'online' ? '#00ff00' : '#ff6b6b';
|
|
statusHtml += `<span style="color: ${statusColor}">● ${zone}</span><br>`;
|
|
statusHtml += ` Status: ${info.status}<br>`;
|
|
|
|
if (info.status === 'online') {
|
|
statusHtml += ` Afspelen: ${info.playbackState}<br>`;
|
|
statusHtml += ` Track: ${info.currentTrack}<br>`;
|
|
statusHtml += ` Volume: ${info.volume}%<br>`;
|
|
} else if (info.error) {
|
|
statusHtml += ` Fout: ${info.error}<br>`;
|
|
}
|
|
statusHtml += '<br>';
|
|
}
|
|
|
|
statusElement.innerHTML = statusHtml;
|
|
log('✅ Sonos status bijgewerkt');
|
|
} else {
|
|
statusElement.innerHTML = `❌ Fout: ${data.error}`;
|
|
log(`❌ Sonos status fout: ${data.error}`);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
log(`❌ Netwerk fout bij Sonos status: ${error.message}`);
|
|
document.getElementById('sonosStatus').innerHTML = `❌ Netwerk fout: ${error.message}`;
|
|
});
|
|
}
|
|
|
|
function stopAllSonos() {
|
|
log('⏹️ Alle Sonos audio stoppen...');
|
|
fetch('/api/sonos-stop', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' }
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
log(`✅ ${data.message}`);
|
|
// Ververs status na stoppen
|
|
setTimeout(checkSonosStatus, 1000);
|
|
} else {
|
|
log(`❌ Fout bij stoppen: ${data.error}`);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
log(`❌ Netwerk fout bij stoppen: ${error.message}`);
|
|
});
|
|
}
|
|
|
|
// Update elke seconde
|
|
setInterval(updateDebugDisplay, 1000);
|
|
|
|
// Initiële updates
|
|
updateDebugDisplay();
|
|
checkSonosStatus();
|
|
log('🔧 Debug mode gestart');
|
|
</script>
|
|
|
|
<!-- Hidden audio element for testing -->
|
|
<audio id="adhanAudio" src="/static/clips/{{ settings['audio_clip'] }}" preload="auto"></audio>
|
|
</body>
|
|
</html> |