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