function get_interval(element) { let months = element.querySelector('input[name="interval_months"]').value; let days = element.querySelector('input[name="interval_days"]').value; let hours = element.querySelector('input[name="interval_hours"]').value; let minutes = element.querySelector('input[name="interval_minutes"]').value; let seconds = element.querySelector('input[name="interval_seconds"]').value; return { months: parseInt(months) || null, days: parseInt(days) || null, seconds: (parseInt(hours) || 0) * 3600 + (parseInt(minutes) || 0) * 60 + (parseInt(seconds) || 0) || null, }; } function update_interval(element) { let months = element.querySelector('input[name="interval_months"]'); let days = element.querySelector('input[name="interval_days"]'); let hours = element.querySelector('input[name="interval_hours"]'); let minutes = element.querySelector('input[name="interval_minutes"]'); let seconds = element.querySelector('input[name="interval_seconds"]'); let interval = get_interval(element); if (interval.months === null && interval.days === null && interval.seconds === null) { months.value = ""; days.value = ""; hours.value = ""; minutes.value = ""; seconds.value = ""; } else { months.value = months.value.padStart(1, "0"); days.value = days.value.padStart(1, "0"); hours.value = hours.value.padStart(2, "0"); minutes.value = minutes.value.padStart(2, "0"); seconds.value = seconds.value.padStart(2, "0"); if (seconds.value >= 60) { let quotient = Math.floor(seconds.value / 60); let remainder = seconds.value % 60; seconds.value = String(remainder).padStart(2, "0"); minutes.value = String(Number(minutes.value) + Number(quotient)).padStart( 2, "0" ); } if (minutes.value >= 60) { let quotient = Math.floor(minutes.value / 60); let remainder = minutes.value % 60; minutes.value = String(remainder).padStart(2, "0"); hours.value = String(Number(hours.value) + Number(quotient)).padStart(2, "0"); } } } const $intervalGroup = document.querySelector(".interval-group"); document.querySelector(".interval-group").addEventListener( "blur", (ev) => { if (ev.target.nodeName !== "BUTTON") update_interval($intervalGroup); }, true ); $intervalGroup.querySelector("button.clear").addEventListener("click", () => { $intervalGroup.querySelectorAll("input").forEach((el) => { el.value = ""; }); }); document.addEventListener("remindersLoaded", (event) => { for (reminder of event.detail) { let $intervalGroup = reminder.node.querySelector(".interval-group"); $intervalGroup.addEventListener( "blur", (ev) => { if (ev.target.nodeName !== "BUTTON") update_interval($intervalGroup); }, true ); $intervalGroup.querySelector("button.clear").addEventListener("click", () => { $intervalGroup.querySelectorAll("input").forEach((el) => { el.value = ""; }); }); } });