Deze commit implementeert een nieuw Adzkaar-scherm dat automatisch verschijnt na de gebedstijden. Belangrijke wijzigingen omvatten: - Toevoeging van instellingen voor het inschakelen en aanpassen van de duur van het Adzkaar-scherm in `settings.json` en de bijbehorende HTML. - Implementatie van nieuwe routes `/adzkaar` en `/api/trigger-adzkaar` om respectievelijk het scherm weer te geven en te debuggen. - Update van de countdown-logica om het Adzkaar-scherm drie seconden na het adhan af te spelen. - Nieuwe frontend-elementen voor een interactieve, kaart-voor-kaart weergave van de Adzkaar met ondersteuning voor navigatie en toetsenbordbediening. - Aanpassing van bestaande templates om integratie van de nieuwe functionaliteiten te faciliteren. Deze toevoegingen verbeteren de gebruikerservaring door meer spirituele betrokkenheid mogelijk te maken na de gebedstijden.
183 lines
6.0 KiB
JavaScript
183 lines
6.0 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 .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}`);
|
|
});
|
|
}
|