Adhaan/adhan-webapp/static/countdown.js
filoor 350e0d817a refactor(ui): vervang huidig-gebed met huidig-gebed-bottom en verbeter layout
De huidige gebedssectie is verplaatst naar de onderkant van het scherm met absolute positionering. De oude `huidig-gebed` CSS is verwijderd en vervangen door de nieuwe `huidig-gebed-bottom` klasse. Dit zorgt voor een consistentere en responsieve gebruikersinterface. Daarnaast zijn flexbox layouts geïntroduceerd om de tijds- en weersinformatie naast elkaar weer te geven, waardoor de interface op verschillende schermformaten beter functioneert. JavaScript is bijgewerkt om de juiste klasse te selecteren voor de naamweergave in de countdown.
2025-05-28 08:03:34 +02:00

183 lines
6.1 KiB
JavaScript

function updateCurrentTime() {
const now = new Date();
const timeStr = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
document.getElementById("current-time").textContent = timeStr;
// Update datum informatie elke minuut
updateDateInfo();
}
function updateDateInfo() {
fetch('/api/date-info')
.then(response => response.json())
.then(data => {
const gregorianElement = document.querySelector('.gregorian-datum');
const hijriArabicElement = document.querySelector('.hijri-datum-arabic');
const hijriDutchElement = document.querySelector('.hijri-datum-dutch');
if (gregorianElement) gregorianElement.textContent = data.gregorian_full;
if (hijriArabicElement) hijriArabicElement.textContent = data.hijri_arabic;
if (hijriDutchElement) hijriDutchElement.textContent = data.hijri_dutch;
})
.catch(error => {
console.log('Fout bij bijwerken datum:', error);
});
}
// Gebedstijden ophalen uit een globale variabele (wordt in de template gezet)
let prayerTimes = window.prayerTimes || [];
let prayerNames = window.prayerNames || [];
let currentPrayerIndex = 0;
let isNextDayPrayer = false;
function startCountdowns(times, names) {
prayerTimes = times;
prayerNames = names;
const nextPrayer = getNextPrayer();
currentPrayerIndex = nextPrayer.index;
isNextDayPrayer = nextPrayer.isNextDay;
startCountdown(prayerTimes[currentPrayerIndex], prayerNames[currentPrayerIndex], isNextDayPrayer);
}
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 prayerTimeMinutes = parseInt(h) * 60 + parseInt(m);
if (prayerTimeMinutes > currentTime) {
return { index: i, isNextDay: false };
}
}
// Alle gebeden van vandaag zijn voorbij, volgende is eerste gebed van morgen
return { index: 0, isNextDay: true };
}
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);
}
// Update de naam met "morgen" indicator als nodig
const displayName = isNextDay ? `${prayerName} (morgen)` : prayerName;
document.querySelector('.huidig-gebed-bottom .naam').textContent = displayName;
function update() {
const now = new Date();
let diff = Math.floor((target - now) / 1000);
if (diff <= 0) {
// Speel adhaan af via browser
const audio = document.getElementById('adhanAudio');
if (audio) audio.play();
// Trigger Adzkaar scherm na 3 seconden (geef adhaan tijd om te starten)
setTimeout(() => {
triggerAdzkaarScreen(displayName);
}, 3000);
// Ga naar volgende gebed
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');
document.getElementById("countdown").textContent = `${h}:${m}:${s}`;
}
update();
window._countdownInterval && clearInterval(window._countdownInterval);
window._countdownInterval = setInterval(update, 1000);
}
function setupThemeToggle() {
const toggleBtn = document.getElementById("themeToggle");
const html = document.documentElement;
function applyTheme(theme) {
html.className = theme;
localStorage.setItem('theme', theme);
}
const saved = localStorage.getItem('theme') || 'light';
applyTheme(saved);
toggleBtn.addEventListener("click", () => {
const current = html.className === 'light' ? 'dark' : 'light';
applyTheme(current);
});
}
function triggerAdzkaarScreen(prayerName) {
// Check eerst of Adzkaar is ingeschakeld via API
fetch('/api/trigger-adzkaar', {
method: 'POST',
headers: { 'Content-Type': 'application/json' }
})
.then(response => response.json())
.then(data => {
if (data.success) {
console.log(`📿 Adzkaar scherm wordt getoond na ${prayerName}`);
// Open Adzkaar scherm in fullscreen
// In kiosk mode proberen we een nieuw venster te openen
const adzkaarWindow = window.open(
data.url,
'adzkaar',
'fullscreen=yes,scrollbars=no,resizable=no,toolbar=no,menubar=no,status=no'
);
// Als window.open niet werkt (bijv. popup blocker), navigeer naar de pagina
if (!adzkaarWindow) {
console.log('📿 Popup geblokkeerd, navigeren naar Adzkaar pagina...');
window.location.href = data.url;
}
} else {
console.log(`📿 Adzkaar niet getoond: ${data.error}`);
}
})
.catch(error => {
console.log(`❌ Fout bij Adzkaar trigger: ${error.message}`);
});
}