Show live camera refresh status

frigate_camera_control_bridge/static/app.js

@@ -22,9 +22,94 @@ function updateTimers() {
   });
 }
 
+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) || form.dataset.requiresAck !== "true") {
+  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";
@@ -34,4 +119,5 @@ document.addEventListener("submit", (event) => {
 });
 
 updateTimers();
+restoreRefreshMessage();
 setInterval(updateTimers, 1000);