From a83ca22a7980fbbd440c0c401613a3ff81660613 Mon Sep 17 00:00:00 2001 From: filoor Date: Wed, 28 May 2025 03:38:58 +0200 Subject: [PATCH] feat(countdown): verbeter countdown logica voor gebedstijden De countdown script is bijgewerkt om de logica voor gebedstijden te verbeteren. De huidige en volgende gebeden worden nu correct geanalyseerd, inclusief ondersteuning voor het identificeren of het volgende gebed op de volgende dag valt. Gebedstitels bevatten nu "morgen" indien nodig. CSS en HTML aanpassingen zorgen voor een verbeterde layout van de instellingenpagina met een drie-kolommen structuur en betere zichtbaarheid in lichte modus. Deze wijzigingen zorgen voor een nauwkeurigere weergave van gebedstijden en een gebruiksvriendelijke interface. --- .lh/adhan-webapp/static/countdown.js.json | 6 +- adhan-webapp/done | 5 ++ adhan-webapp/static/countdown.js | 69 ++++++++++++++++++----- adhan-webapp/static/style.css | 56 ++++++++++-------- adhan-webapp/templates/settings.html | 12 +--- docker-compose-pi.yml | 2 +- 6 files changed, 99 insertions(+), 51 deletions(-) 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