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.
183 lines
6.1 KiB
JavaScript
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}`);
|
|
});
|
|
}
|