diff --git a/.lh/adhan-webapp/static/countdown.js.json b/.lh/adhan-webapp/static/countdown.js.json index df5bc65..1324430 100644 --- a/.lh/adhan-webapp/static/countdown.js.json +++ b/.lh/adhan-webapp/static/countdown.js.json @@ -3,7 +3,7 @@ "activeCommit": 0, "commits": [ { - "activePatchIndex": 2, + "activePatchIndex": 3, "patches": [ { "date": 1748182675995, @@ -16,6 +16,10 @@ { "date": 1748204399019, "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,10 +1,30 @@\n function updateCurrentTime() {\n const now = new Date();\n const timeStr = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n document.getElementById(\"current-time\").textContent = timeStr;\n+ \n+ // Update datum informatie elke minuut\n+ updateDateInfo();\n }\n \n+function updateDateInfo() {\n+ fetch('/api/date-info')\n+ .then(response => response.json())\n+ .then(data => {\n+ const gregorianElement = document.querySelector('.gregorian-datum');\n+ const hijriArabicElement = document.querySelector('.hijri-datum-arabic');\n+ const hijriDutchElement = document.querySelector('.hijri-datum-dutch');\n+ \n+ if (gregorianElement) gregorianElement.textContent = data.gregorian_full;\n+ if (hijriArabicElement) hijriArabicElement.textContent = data.hijri_arabic;\n+ if (hijriDutchElement) hijriDutchElement.textContent = data.hijri_dutch;\n+ })\n+ .catch(error => {\n+ console.log('Fout bij bijwerken datum:', error);\n+ });\n+}\n+\n // Gebedstijden ophalen uit een globale variabele (wordt in de template gezet)\n let prayerTimes = window.prayerTimes || [];\n let prayerNames = window.prayerNames || [];\n let currentPrayerIndex = 0;\n" + }, + { + "date": 1748396047266, + "content": "Index: \n===================================================================\n--- \n+++ \n@@ -27,37 +27,52 @@\n // Gebedstijden ophalen uit een globale variabele (wordt in de template gezet)\n let prayerTimes = window.prayerTimes || [];\n let prayerNames = window.prayerNames || [];\n let currentPrayerIndex = 0;\n+let isNextDayPrayer = false;\n \n function startCountdowns(times, names) {\n prayerTimes = times;\n prayerNames = names;\n- currentPrayerIndex = getNextPrayerIndex();\n- startCountdown(prayerTimes[currentPrayerIndex], prayerNames[currentPrayerIndex]);\n+ const nextPrayer = getNextPrayer();\n+ currentPrayerIndex = nextPrayer.index;\n+ isNextDayPrayer = nextPrayer.isNextDay;\n+ startCountdown(prayerTimes[currentPrayerIndex], prayerNames[currentPrayerIndex], isNextDayPrayer);\n }\n \n-function getNextPrayerIndex() {\n+function getNextPrayer() {\n const now = new Date();\n+ const currentTime = now.getHours() * 60 + now.getMinutes(); // Huidige tijd in minuten\n+ \n+ // Zoek naar volgende gebed vandaag\n for (let i = 0; i < prayerTimes.length; i++) {\n const [h, m] = prayerTimes[i].split(\":\");\n- const t = new Date();\n- t.setHours(parseInt(h));\n- t.setMinutes(parseInt(m));\n- t.setSeconds(0);\n- if (t > now) return i;\n+ const prayerTimeMinutes = parseInt(h) * 60 + parseInt(m);\n+ \n+ if (prayerTimeMinutes > currentTime) {\n+ return { index: i, isNextDay: false };\n+ }\n }\n- return 0; // fallback: eerste gebed\n+ \n+ // Alle gebeden van vandaag zijn voorbij, volgende is eerste gebed van morgen\n+ return { index: 0, isNextDay: true };\n }\n \n-function startCountdown(targetTimeStr, prayerName) {\n+function startCountdown(targetTimeStr, prayerName, isNextDay = false) {\n const parts = targetTimeStr.split(\":\");\n let target = new Date();\n target.setHours(parseInt(parts[0]));\n target.setMinutes(parseInt(parts[1]));\n target.setSeconds(0);\n+ \n+ // Als het volgende gebed morgen is, voeg een dag toe\n+ if (isNextDay) {\n+ target.setDate(target.getDate() + 1);\n+ }\n \n- document.querySelector('.huidig-gebed .naam').textContent = prayerName;\n+ // Update de naam met \"morgen\" indicator als nodig\n+ const displayName = isNextDay ? `${prayerName} (morgen)` : prayerName;\n+ document.querySelector('.huidig-gebed .naam').textContent = displayName;\n \n function update() {\n const now = new Date();\n let diff = Math.floor((target - now) / 1000);\n@@ -65,16 +80,40 @@\n if (diff <= 0) {\n // Speel adhaan af via browser\n const audio = document.getElementById('adhanAudio');\n if (audio) audio.play();\n+ \n // Ga naar volgende gebed\n- currentPrayerIndex = (currentPrayerIndex + 1) % prayerTimes.length;\n- const nextTime = prayerTimes[currentPrayerIndex];\n- const nextName = prayerNames[currentPrayerIndex];\n- startCountdown(nextTime, nextName);\n+ if (isNextDayPrayer) {\n+ // We waren aan het wachten op het eerste gebed van de nieuwe dag\n+ // Nu gaan we naar het tweede gebed van vandaag (nieuwe dag)\n+ currentPrayerIndex = 1;\n+ isNextDayPrayer = false;\n+ \n+ if (currentPrayerIndex < prayerTimes.length) {\n+ startCountdown(prayerTimes[currentPrayerIndex], prayerNames[currentPrayerIndex], false);\n+ } else {\n+ // Dit zou niet moeten gebeuren, maar veiligheidshalve\n+ currentPrayerIndex = 0;\n+ isNextDayPrayer = true;\n+ startCountdown(prayerTimes[currentPrayerIndex], prayerNames[currentPrayerIndex], true);\n+ }\n+ } else {\n+ // Normaal doorgang naar volgende gebed\n+ currentPrayerIndex++;\n+ \n+ if (currentPrayerIndex >= prayerTimes.length) {\n+ // Alle gebeden van vandaag zijn klaar, ga naar eerste gebed van morgen\n+ currentPrayerIndex = 0;\n+ isNextDayPrayer = true;\n+ }\n+ \n+ startCountdown(prayerTimes[currentPrayerIndex], prayerNames[currentPrayerIndex], isNextDayPrayer);\n+ }\n return;\n }\n \n+ // Toon countdown\n const h = String(Math.floor(diff / 3600)).padStart(2, '0');\n const m = String(Math.floor((diff % 3600) / 60)).padStart(2, '0');\n const s = String(diff % 60).padStart(2, '0');\n \n" } ], "date": 1748182675995, diff --git a/adhan-webapp/done b/adhan-webapp/done index 12436d6..4ff43cf 100644 --- a/adhan-webapp/done +++ b/adhan-webapp/done @@ -5,3 +5,8 @@ Mon May 26 18:17:57 CEST 2025: Tijdzone probleem opgelost - Container gebruikt n 2025-05-27 14:07:15 - Gebedstijd offsets toegevoegd - kan nu minuten toevoegen/afhalen van VUMG tijden 2025-05-27 14:16:04 - Offset bug gerepareerd - seconden weggehaald van VUMG API tijden zodat parsing correct werkt 2025-05-27 14:24:39 - Quran pagina gerepareerd - gebedstijden variabele toegevoegd aan template +2025-05-27 23:39:20 - Sonos speakers getest: Kantoor (192.168.0.94) en Slaapkamer (192.168.0.85) reageren correct op UPnP calls +2025-05-27 23:41:37 - Sonos API volledig werkend: 4 zones gevonden (Woonkamer, Slaapkamer, Kantoor, Keuken), alle speakers hebben adhaan tracks geladen +2025-05-28 03:34:23 - Countdown logica gerepareerd: na laatste gebed van de dag toont nu correct 'Fajr (morgen)' met juiste countdown tot volgende dag +2025-05-28 03:36:17 - Settings pagina layout verbeterd: volledige breedte gebruikt, drie-kolommen layout voor gebedstijd aanpassingen +2025-05-28 03:37:57 - Light theme kleuren gerepareerd: teksten nu zichtbaar in light mode, accent kleuren aangepast voor betere contrast diff --git a/adhan-webapp/static/countdown.js b/adhan-webapp/static/countdown.js index aed0579..24f99f0 100644 --- a/adhan-webapp/static/countdown.js +++ b/adhan-webapp/static/countdown.js @@ -28,35 +28,50 @@ function updateDateInfo() { let prayerTimes = window.prayerTimes || []; let prayerNames = window.prayerNames || []; let currentPrayerIndex = 0; +let isNextDayPrayer = false; function startCountdowns(times, names) { prayerTimes = times; prayerNames = names; - currentPrayerIndex = getNextPrayerIndex(); - startCountdown(prayerTimes[currentPrayerIndex], prayerNames[currentPrayerIndex]); + const nextPrayer = getNextPrayer(); + currentPrayerIndex = nextPrayer.index; + isNextDayPrayer = nextPrayer.isNextDay; + startCountdown(prayerTimes[currentPrayerIndex], prayerNames[currentPrayerIndex], isNextDayPrayer); } -function getNextPrayerIndex() { +function getNextPrayer() { const now = new Date(); + const currentTime = now.getHours() * 60 + now.getMinutes(); // Huidige tijd in minuten + + // Zoek naar volgende gebed vandaag for (let i = 0; i < prayerTimes.length; i++) { const [h, m] = prayerTimes[i].split(":"); - const t = new Date(); - t.setHours(parseInt(h)); - t.setMinutes(parseInt(m)); - t.setSeconds(0); - if (t > now) return i; + const prayerTimeMinutes = parseInt(h) * 60 + parseInt(m); + + if (prayerTimeMinutes > currentTime) { + return { index: i, isNextDay: false }; + } } - return 0; // fallback: eerste gebed + + // Alle gebeden van vandaag zijn voorbij, volgende is eerste gebed van morgen + return { index: 0, isNextDay: true }; } -function startCountdown(targetTimeStr, prayerName) { +function startCountdown(targetTimeStr, prayerName, isNextDay = false) { const parts = targetTimeStr.split(":"); let target = new Date(); target.setHours(parseInt(parts[0])); target.setMinutes(parseInt(parts[1])); target.setSeconds(0); + + // Als het volgende gebed morgen is, voeg een dag toe + if (isNextDay) { + target.setDate(target.getDate() + 1); + } - document.querySelector('.huidig-gebed .naam').textContent = prayerName; + // Update de naam met "morgen" indicator als nodig + const displayName = isNextDay ? `${prayerName} (morgen)` : prayerName; + document.querySelector('.huidig-gebed .naam').textContent = displayName; function update() { const now = new Date(); @@ -66,14 +81,38 @@ function startCountdown(targetTimeStr, prayerName) { // Speel adhaan af via browser const audio = document.getElementById('adhanAudio'); if (audio) audio.play(); + // Ga naar volgende gebed - currentPrayerIndex = (currentPrayerIndex + 1) % prayerTimes.length; - const nextTime = prayerTimes[currentPrayerIndex]; - const nextName = prayerNames[currentPrayerIndex]; - startCountdown(nextTime, nextName); + if (isNextDayPrayer) { + // We waren aan het wachten op het eerste gebed van de nieuwe dag + // Nu gaan we naar het tweede gebed van vandaag (nieuwe dag) + currentPrayerIndex = 1; + isNextDayPrayer = false; + + if (currentPrayerIndex < prayerTimes.length) { + startCountdown(prayerTimes[currentPrayerIndex], prayerNames[currentPrayerIndex], false); + } else { + // Dit zou niet moeten gebeuren, maar veiligheidshalve + currentPrayerIndex = 0; + isNextDayPrayer = true; + startCountdown(prayerTimes[currentPrayerIndex], prayerNames[currentPrayerIndex], true); + } + } else { + // Normaal doorgang naar volgende gebed + currentPrayerIndex++; + + if (currentPrayerIndex >= prayerTimes.length) { + // Alle gebeden van vandaag zijn klaar, ga naar eerste gebed van morgen + currentPrayerIndex = 0; + isNextDayPrayer = true; + } + + startCountdown(prayerTimes[currentPrayerIndex], prayerNames[currentPrayerIndex], isNextDayPrayer); + } return; } + // Toon countdown const h = String(Math.floor(diff / 3600)).padStart(2, '0'); const m = String(Math.floor((diff % 3600) / 60)).padStart(2, '0'); const s = String(diff % 60).padStart(2, '0'); diff --git a/adhan-webapp/static/style.css b/adhan-webapp/static/style.css index 23adf02..297d566 100644 --- a/adhan-webapp/static/style.css +++ b/adhan-webapp/static/style.css @@ -3,8 +3,9 @@ --bg-dark: #162447; --text-light: #222; --text-dark: #fff; - --accent: #fff; /* goud */ - --accent-blue: #222; /* zwart voor knoppen */ + --accent-light: #2563eb; + --accent-dark: #fff; + --accent-blue: #222; --panel-radius: 0rem; --panel-shadow: 0 8px 32px 0 rgba(0,0,0,0.25); --tijdkleur-light: #222; @@ -15,10 +16,11 @@ html.light { --bg: #f7fafc; + --text: #222; --weather-temp: #222; --panel-bg: #fff; --panel-text: #222; - --accent: #fff; + --accent: #2563eb; --accent-blue: #f0f0f0; --panel-border: #e0e6ed; --list-bg: #f7fafc; @@ -28,7 +30,7 @@ html.light { --icoon-kleur: var(--icoon-light); --card-bg: #ffffff; --border-color: #e0e6ed; - --primary-color: #fff; + --primary-color: #2563eb; --text-color: #222; --text-secondary: #666; } @@ -88,7 +90,7 @@ body.settings-page { .overlay { background: rgba(0, 0, 0, 0.3); - color: var(--text); + color: #fff; height: 100%; padding: 2rem; display: flex; @@ -108,7 +110,7 @@ body.settings-page { font-weight: bold; letter-spacing: 0.1em; margin-bottom: 0.5rem; - color: var(--accent); + color: #fff; text-shadow: 2px 2px 8px #000; } @@ -166,7 +168,8 @@ body.settings-page { font-size: 4rem; font-weight: 700; margin-bottom: 0.5rem; - color: var(--accent); + color: #fff; + text-shadow: 2px 2px 8px #000; } #countdown { @@ -208,7 +211,7 @@ blockquote { border: none; margin: 2rem 0 0.5rem 0; padding: 0; - color: var(--text); + color: var(--panel-text); text-align: center; font-family: 'Cairo', Arial, sans-serif; line-height: 1.3; @@ -216,7 +219,7 @@ blockquote { blockquote footer { font-size: 1.3rem; - color: var(--accent); + color: var(--primary-color); margin-top: 1rem; text-align: right; font-family: 'Lato', Arial, sans-serif; @@ -242,9 +245,9 @@ blockquote footer { .gebedstijden li.active { font-weight: bold; - color: var(--accent); + color: var(--primary-color); background: var(--active-bg); - border-left: 4px solid var(--accent); + border-left: 4px solid var(--primary-color); } .icoontjes { @@ -647,15 +650,15 @@ blockquote footer { /* Instellingen pagina styling */ .settings-container { - max-width: 800px; - margin: 0 auto; - padding: 1.5rem; + width: 100%; + margin: 0; + padding: 2rem; background: var(--panel-bg); - border-radius: var(--panel-radius); - border: 1px solid var(--panel-border); - box-shadow: var(--panel-shadow); - min-height: auto; - max-height: 100vh; + border-radius: 0; + border: none; + box-shadow: none; + min-height: 100vh; + max-height: none; overflow-y: auto; } @@ -710,11 +713,15 @@ blockquote footer { .form-row { display: grid; - grid-template-columns: 1fr 1fr; - gap: 1.5rem; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; margin-bottom: 1.5rem; } +.form-row.three-columns { + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); +} + .form-row .form-group { margin-bottom: 0; } @@ -905,10 +912,9 @@ blockquote footer { /* Responsive design voor instellingen */ @media (max-width: 768px) { .settings-container { - margin: 0.5rem; - padding: 1rem; - min-height: auto; - max-height: 100vh; + padding: 1.5rem; + min-height: 100vh; + max-height: none; overflow-y: auto; } diff --git a/adhan-webapp/templates/settings.html b/adhan-webapp/templates/settings.html index 846bfeb..d92cc61 100644 --- a/adhan-webapp/templates/settings.html +++ b/adhan-webapp/templates/settings.html @@ -131,7 +131,7 @@

-
+
-
-
+
+
-
-
- -
- -
diff --git a/docker-compose-pi.yml b/docker-compose-pi.yml index cded1d1..00b845e 100644 --- a/docker-compose-pi.yml +++ b/docker-compose-pi.yml @@ -35,4 +35,4 @@ networks: adhan-network: driver: bridge -version: '3.8' \ No newline at end of file +version: '3.8' \ No newline at end of file