124 lines
3.6 KiB
JavaScript
124 lines
3.6 KiB
JavaScript
function formatRemaining(totalSeconds) {
|
|
const seconds = Math.max(0, Math.ceil(totalSeconds));
|
|
const minutes = Math.floor(seconds / 60);
|
|
const rest = seconds % 60;
|
|
return `${minutes}:${String(rest).padStart(2, "0")}`;
|
|
}
|
|
|
|
function updateTimers() {
|
|
const now = Date.now() / 1000;
|
|
document.querySelectorAll("[data-auto-off-at]").forEach((item) => {
|
|
const target = Number(item.dataset.autoOffAt || 0);
|
|
if (!target) {
|
|
return;
|
|
}
|
|
const remaining = target - now;
|
|
if (remaining <= 0) {
|
|
item.textContent = item.dataset.expiredLabel || "Automatic turn-off pending";
|
|
item.classList.add("timer-expired");
|
|
return;
|
|
}
|
|
item.textContent = `${item.dataset.prefix || "Automatic turn-off in"} ${formatRemaining(remaining)}`;
|
|
});
|
|
}
|
|
|
|
function refreshStatusElement() {
|
|
return document.querySelector("[data-refresh-status]");
|
|
}
|
|
|
|
function showRefreshMessage(message, type = "success") {
|
|
const status = refreshStatusElement();
|
|
if (!status) {
|
|
return;
|
|
}
|
|
status.textContent = message || "";
|
|
status.classList.toggle("is-visible", Boolean(message));
|
|
status.classList.toggle("is-success", type === "success");
|
|
status.classList.toggle("is-error", type === "error");
|
|
}
|
|
|
|
function rememberRefreshMessage(message) {
|
|
try {
|
|
window.sessionStorage.setItem("frigateRefreshMessage", message);
|
|
} catch (_error) {
|
|
// Some browsers may block sessionStorage; the refresh still succeeds.
|
|
}
|
|
}
|
|
|
|
function restoreRefreshMessage() {
|
|
try {
|
|
const message = window.sessionStorage.getItem("frigateRefreshMessage");
|
|
if (!message) {
|
|
return;
|
|
}
|
|
window.sessionStorage.removeItem("frigateRefreshMessage");
|
|
showRefreshMessage(message, "success");
|
|
} catch (_error) {
|
|
// Ignore storage errors and keep the GUI usable.
|
|
}
|
|
}
|
|
|
|
async function handleRefreshSubmit(form, event) {
|
|
event.preventDefault();
|
|
const button = form.querySelector(".refresh-button");
|
|
if (button && button.classList.contains("is-refreshing")) {
|
|
return;
|
|
}
|
|
const status = refreshStatusElement();
|
|
const workingLabel = status?.dataset.workingLabel || "Refreshing cameras...";
|
|
showRefreshMessage(workingLabel, "success");
|
|
if (button) {
|
|
button.disabled = true;
|
|
button.classList.add("is-refreshing");
|
|
button.setAttribute("aria-busy", "true");
|
|
}
|
|
try {
|
|
const response = await fetch(form.action, {
|
|
method: "POST",
|
|
headers: { Accept: "application/json" },
|
|
});
|
|
const payload = await response.json();
|
|
if (!response.ok || payload.ok === false) {
|
|
throw new Error(payload.message || "Refresh failed");
|
|
}
|
|
showRefreshMessage(payload.message, "success");
|
|
if (payload.changed && payload.redirect_url) {
|
|
rememberRefreshMessage(payload.message);
|
|
window.setTimeout(() => {
|
|
window.location.assign(payload.redirect_url);
|
|
}, 900);
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
showRefreshMessage(error.message || "Refresh failed", "error");
|
|
} finally {
|
|
if (button) {
|
|
button.disabled = false;
|
|
button.classList.remove("is-refreshing");
|
|
button.removeAttribute("aria-busy");
|
|
}
|
|
}
|
|
}
|
|
|
|
document.addEventListener("submit", (event) => {
|
|
const form = event.target;
|
|
if (!(form instanceof HTMLFormElement)) {
|
|
return;
|
|
}
|
|
if (form.classList.contains("refresh-form")) {
|
|
handleRefreshSubmit(form, event);
|
|
return;
|
|
}
|
|
if (form.dataset.requiresAck !== "true") {
|
|
return;
|
|
}
|
|
const message = form.dataset.ackMessage || "Confirm this action";
|
|
if (!window.confirm(message)) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
updateTimers();
|
|
restoreRefreshMessage();
|
|
setInterval(updateTimers, 1000);
|