@aurora-blue/signalk-connector 0.2.0-dev.20

package/public/status.js

@@ -0,0 +1,237 @@
+const endpoint = "/plugins/aurora-blue-signalk-connector/status";
+const supportedLocales = ["en", "de", "fr", "es"];
+const browserLocale =
+  (globalThis.navigator?.languages ?? [globalThis.navigator?.language ?? "en"])
+    .map((value) => value.toLowerCase().split("-")[0])
+    .find((value) => supportedLocales.includes(value)) ?? "en";
+let messages = {
+  "appearance.system": "System appearance: {appearance}",
+  "appearance.dark": "dark",
+  "appearance.light": "light",
+  "error.load_failed": "Connector status could not be loaded.",
+};
+
+const t = (key, parameters = {}) => {
+  let message = messages[key] ?? key;
+  Object.entries(parameters).forEach(([name, value]) => {
+    message = message.replaceAll(`{${name}}`, String(value));
+  });
+  return message;
+};
+
+const element = (id) => document.getElementById(id);
+const number = new Intl.NumberFormat(browserLocale);
+const decimalNumber = new Intl.NumberFormat(browserLocale, {
+  minimumFractionDigits: 1,
+  maximumFractionDigits: 1,
+});
+
+const setText = (id, value) => {
+  element(id).textContent = value;
+};
+
+const translatedValue = (group, value) => {
+  const key = `value.${group}.${String(value).replaceAll("-", "_")}`;
+  return messages[key] ?? String(value);
+};
+
+// Follow the browser's system preference, not the Signal K host's operating system.
+const systemAppearance = window.matchMedia("(prefers-color-scheme: dark)");
+const renderAppearance = () => {
+  setText(
+    "appearance",
+    t("appearance.system", {
+      appearance: t(
+        systemAppearance.matches ? "appearance.dark" : "appearance.light",
+      ),
+    }),
+  );
+};
+renderAppearance();
+systemAppearance.addEventListener("change", renderAppearance);
+
+const setBadge = (id, value, tone) => {
+  const badge = element(id);
+  badge.textContent = value;
+  badge.className = `badge ${tone}`;
+};
+
+const formatBytes = (bytes) => {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${decimalNumber.format(bytes / 1024)} KiB`;
+  return `${decimalNumber.format(bytes / (1024 * 1024))} MiB`;
+};
+
+const formatTimestamp = (value) =>
+  value === null
+    ? t("status.never")
+    : new Date(value).toLocaleString(browserLocale);
+
+const toneForLifecycle = (value) => {
+  if (value === "running") return "good";
+  if (value === "error") return "bad";
+  if (value === "starting") return "warn";
+  return "neutral";
+};
+
+const toneForMode = (value) => {
+  if (value === "active") return "good";
+  if (value === "standby") return "warn";
+  if (value === "disabled") return "neutral";
+  return "bad";
+};
+
+const render = (payload) => {
+  setBadge(
+    "lifecycle",
+    translatedValue("lifecycle", payload.lifecycle),
+    toneForLifecycle(payload.lifecycle),
+  );
+  setText("version", payload.connector_version);
+  setText("brand-version", payload.connector_version);
+
+  const notice = element("notice");
+  if (payload.last_error === null) {
+    notice.classList.add("hidden");
+  } else {
+    const errorKey =
+      {
+        "Connector startup failed.": "error.startup_failed",
+        "Connector configuration is invalid.": "error.configuration_invalid",
+      }[payload.last_error.message] ?? "error.connector_reported";
+    notice.textContent = `${t(errorKey)} (${formatTimestamp(payload.last_error.occurred_at)})`;
+    notice.classList.remove("hidden");
+  }
+
+  const status = payload.status;
+  if (status === null) {
+    setBadge("mode", t("status.mode_unavailable"), "neutral");
+    setText("pairing", t("status.unavailable"));
+    setText(
+      "updated",
+      t("status.updated", { time: formatTimestamp(payload.generated_at) }),
+    );
+    return;
+  }
+
+  setBadge(
+    "mode",
+    translatedValue("mode", status.operatingMode),
+    toneForMode(status.operatingMode),
+  );
+  setText("pairing", t(status.paired ? "status.paired" : "status.unpaired"));
+  setText(
+    "configuration-state",
+    t("status.runtime_configuration", {
+      state: translatedValue("configuration", status.runtimeConfigurationState),
+    }),
+  );
+  setText("transfer", translatedValue("transfer", status.transferState));
+  const delayed = status.transferMessage?.match(
+    /^Transfer delayed \((HTTP (\d+)|target unavailable)\) - retry in (\d+)s$/,
+  );
+  const transferDetail =
+    status.transferMessage === null
+      ? t("status.last_success", {
+          time: formatTimestamp(status.lastSuccessAt),
+        })
+      : delayed === null || delayed === undefined
+        ? t("status.transfer_delayed_generic")
+        : t("status.transfer_delayed", {
+            reason:
+              delayed[2] === undefined
+                ? t("status.target_unavailable")
+                : t("status.http_error", { status: delayed[2] }),
+            seconds: delayed[3],
+          });
+  setText("last-transfer", transferDetail);
+  setText(
+    "buffer",
+    t("status.events", {
+      current: number.format(status.bufferedEvents),
+      limit: number.format(status.bufferEventLimit),
+    }),
+  );
+  setText(
+    "buffer-bytes",
+    `${formatBytes(status.bufferedBytes)} / ${formatBytes(status.bufferByteLimit)}`,
+  );
+  setText(
+    "pressure",
+    `${translatedValue("pressure", status.bufferPressure)} (${decimalNumber.format(status.bufferUtilization * 100)}%)`,
+  );
+  setText(
+    "remaining",
+    status.estimatedRemainingBufferHours === null
+      ? t("status.estimating_retention")
+      : t("status.hours_remaining", {
+          hours: decimalNumber.format(status.estimatedRemainingBufferHours),
+        }),
+  );
+  setText("accepted", number.format(status.acceptedThrough));
+  setText("suppressed", number.format(status.suppressedEvents));
+  setText("dropped", number.format(status.droppedEvents));
+  setText(
+    "storage",
+    `${translatedValue("storage", status.storageProfile)} (${translatedValue("storage", status.resolvedStorageProfile)})`,
+  );
+  setText("anchor", translatedValue("anchor", status.anchorAlarmState));
+  setText(
+    "updated",
+    t("status.updated", { time: formatTimestamp(payload.generated_at) }),
+  );
+};
+
+const renderFailure = (message) => {
+  setBadge("lifecycle", t("status.unavailable"), "bad");
+  const notice = element("notice");
+  notice.textContent = message;
+  notice.classList.remove("hidden");
+};
+
+const refresh = async () => {
+  try {
+    const response = await fetch(endpoint, {
+      headers: { Accept: "application/json" },
+      cache: "no-store",
+    });
+
+    if (!response.ok) {
+      renderFailure(
+        response.status === 401 || response.status === 403
+          ? t("error.admin_required")
+          : t("error.load_failed"),
+      );
+      return;
+    }
+
+    render(await response.json());
+  } catch {
+    renderFailure(t("error.load_failed"));
+  }
+};
+
+const initialize = async () => {
+  const english = await fetch("locales/en.json")
+    .then((response) => response.json())
+    .catch(() => messages);
+  const selected =
+    browserLocale === "en"
+      ? {}
+      : await fetch(`locales/${browserLocale}.json`)
+          .then((response) => response.json())
+          .catch(() => ({}));
+  messages = { ...english, ...selected };
+  document.documentElement.lang = browserLocale;
+  document.querySelectorAll("[data-i18n]").forEach((node) => {
+    node.textContent = t(node.dataset.i18n);
+  });
+  document.querySelectorAll("[data-i18n-aria-label]").forEach((node) => {
+    node.setAttribute("aria-label", t(node.dataset.i18nAriaLabel));
+  });
+  renderAppearance();
+  await refresh();
+  setInterval(() => void refresh(), 5000);
+};
+
+void initialize();