@7365admin1/layer-common 3.2.1-staging.64 → 3.2.1-staging.66

package/components/CameraWall.vue

@@ -119,18 +119,48 @@
           }"
         >
           <CameraWallTile
-            v-for="(camera, i) in tiles"
-            :key="camera ? camera._id : `empty-${i}`"
+            v-for="camera in tiles"
+            :key="camera._id"
             :camera="camera"
             :dense="dense"
             :online="online"
-            :focused="!!camera && camera._id === focusedId"
+            :health="healthById[camera._id]"
+            :now="now"
+            :focused="camera._id === focusedId"
             @focus="focusedId = $event._id"
           />
         </div>
       </div>
     </div>
 
+    <!--
+      THE PAGER.
+
+      Fixed under the wall rather than scrolling with the page, because it must
+      not scroll away from the wall it pages. Drawn only when there is more than
+      one page — a site with four cameras on a 2x2 wall does not need to be told
+      it is on page 1 of 1.
+    -->
+    <div v-if="pages > 1" class="vms__pager">
+      <button
+        type="button"
+        class="vms__tool"
+        :disabled="page === 0"
+        @click="page = Math.max(0, page - 1)"
+      >
+        Previous
+      </button>
+      <span class="vms__pager-label">Page {{ page + 1 }} of {{ pages }}</span>
+      <button
+        type="button"
+        class="vms__tool"
+        :disabled="page >= pages - 1"
+        @click="page = Math.min(pages - 1, page + 1)"
+      >
+        Next
+      </button>
+    </div>
+
     <!-- ------------------------------------------------------- capabilities -->
     <!--
       THE CONTROLS THAT ARE NOT SWITCHED ON YET.
@@ -141,6 +171,43 @@
     -->
     <div v-if="focused" class="vms__caps">
       <p class="vms__caps-head">{{ focused.name || focused._id }}</p>
+
+      <!--
+        HEALTH — the recorder's own state, which is a different fact from the
+        tile badge above it (that one is about the video page loading). They can
+        disagree, and when they do a supervisor needs both, not a merged verdict.
+
+        Firmware and the device clock are blank on this estate and the server
+        says why, in its own words. An empty field with no explanation reads as
+        "checked, and fine", which would be the opposite of the truth.
+      -->
+      <!--
+        WHAT THE BADGE ON THE TILE ACTUALLY MEANS, said once here rather than
+        nine times across the wall. "Not verified" is a word a supervisor has
+        every right to challenge, and the answer — the picture belongs to
+        another origin's page and a browser cannot look inside it — is too long
+        for a tile and too important to leave out.
+      -->
+      <p v-if="embedsPlayer" class="vms__badge-note">{{ UNVERIFIED_DETAIL }}</p>
+
+      <div class="vms__health">
+        <span class="vms__health-state">
+          <span class="vms__health-dot" :class="`vms__health-dot--${focusedHealth.tone}`" />
+          {{ focusedHealth.label }}
+        </span>
+        <span class="vms__health-item">
+          Last picture this server received:
+          <b>{{ focusedHealth.lastFrame || "none yet" }}</b>
+        </span>
+        <span v-if="focusedHealth.detail" class="vms__health-item">
+          {{ focusedHealth.detail }}
+        </span>
+        <span v-if="focusedHealth.deviceDetail" class="vms__health-item">
+          {{ focusedHealth.deviceDetail }}
+        </span>
+        <span v-if="healthFailed" class="vms__health-item">{{ healthFailed }}</span>
+      </div>
+
       <div class="vms__caps-row">
         <div
           v-for="c in WALL_CAPABILITY_CONTROLS"
@@ -150,11 +217,26 @@
         >
           <p class="vms__cap-title">
             {{ c.title }}
-            <span v-if="capability(c.key).tag" class="vms__cap-tag">
+            <span
+              class="vms__cap-tag"
+              :class="{ 'vms__cap-tag--on': capability(c.key).available }"
+            >
               {{ capability(c.key).tag }}
             </span>
           </p>
-          <p class="vms__cap-detail">{{ capability(c.key).detail }}</p>
+          <!-- Working: what it does HERE. Off: the server's sentence, verbatim. -->
+          <p class="vms__cap-detail">
+            {{ capability(c.key).available ? c.ready : capability(c.key).detail }}
+          </p>
+          <!--
+            RULE 5. The line the server cannot write, because it does not know
+            who the reader can go and ask. Somebody read "Not set up yet" on this
+            screen and asked how to set it up — which is a fair question that the
+            screen was not answering.
+          -->
+          <p v-if="capability(c.key).nextStep" class="vms__cap-next">
+            {{ capability(c.key).nextStep }}
+          </p>
         </div>
       </div>
     </div>
@@ -166,14 +248,21 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   capabilityView,
+  clampPage,
   DEFAULT_WALL_LAYOUT,
+  healthView,
   isDenseLayout,
   wallCameras,
   wallLayout,
+  wallPageCount,
+  wallRows,
   wallTiles,
+  tileView,
+  UNVERIFIED_DETAIL,
   WALL_CAPABILITY_CONTROLS,
   WALL_LAYOUTS,
   type TWallCamera,
+  type TWallCameraHealth,
   type TWallLayoutKey,
 } from "../utils/camera-wall";
 
@@ -215,11 +304,17 @@ const props = defineProps<{ site: string }>();
 
 /* ---------------------------------------------------------------- the data */
 
-const { getSiteWall } = useSiteSettings();
+const { getSiteWall, getSiteHealth } = useSiteSettings();
 
 const cameras = ref<TWallCamera[]>([]);
 const loading = ref(true);
 const failed = ref("");
+/**
+ * The server's own tuning. `healthCacheSeconds` is how long IT caches a
+ * recorder probe, so it is exactly how often there is any point asking — and
+ * asking faster would spend round trips to be handed the same cached answer.
+ */
+const config = ref<Record<string, any> | null>(null);
 
 async function load() {
   loading.value = true;
@@ -230,6 +325,7 @@ async function load() {
     // an ANPR unit must never reach a monitoring wall even if that ever changes.
     const res = await getSiteWall(props.site);
     cameras.value = wallCameras(res?.cameras);
+    config.value = res?.config ?? null;
   } catch (error: any) {
     // The raw message is often a stack trace and rarely something an operator
     // can act on — but "you may not see this site" and "your connection
@@ -246,12 +342,15 @@ async function load() {
         : "The list of cameras did not load. Check your connection and try again.";
   } finally {
     loading.value = false;
+    restartHealth();
   }
 }
 
 onMounted(load);
 watch(() => props.site, () => {
   selectedIds.value = [];
+  page.value = 0;
+  healthById.value = {};
   load();
 });
 
@@ -259,13 +358,42 @@ watch(() => props.site, () => {
 
 const layoutKey = ref<TWallLayoutKey>(DEFAULT_WALL_LAYOUT);
 const layout = computed(() => wallLayout(layoutKey.value));
-const rows = computed(() => Math.ceil(layout.value.tiles / layout.value.columns));
 const dense = computed(() => isDenseLayout(layoutKey.value));
 
 const selectedIds = ref<string[]>([]);
 const showPicker = ref(false);
 
-const tiles = computed(() => wallTiles(cameras.value, selectedIds.value, layoutKey.value));
+const page = ref(0);
+const pages = computed(() =>
+  wallPageCount(cameras.value, selectedIds.value, layoutKey.value)
+);
+
+const tiles = computed(() =>
+  wallTiles(cameras.value, selectedIds.value, layoutKey.value, page.value)
+);
+
+/**
+ * THE GRID PACKS TO WHAT IS ON IT.
+ *
+ * Five cameras on a nine-tile wall used to draw five pictures and four dashed
+ * boxes reading "No camera in this position", with the pictures squeezed into
+ * two thirds of the height to leave room for the holes. The layout picker means
+ * "at most this many, at this size" — it does not mean the screen owes anybody
+ * four empty rectangles. Nothing can be done with an empty cell from here
+ * anyway: cameras are added in Site Settings.
+ */
+const rows = computed(() => wallRows(tiles.value.length, layoutKey.value));
+
+/**
+ * A layout change resizes the page, so the old page NUMBER no longer means
+ * anything — going to 3x3 from page 2 of a 2x2 wall would land somewhere
+ * arbitrary, or past the end. Clamped rather than reset to 0: dropping from
+ * 3x3 to 2x2 keeps you roughly where you were instead of throwing you back to
+ * the front of a wall you were part-way through.
+ */
+watch([layoutKey, pages], () => {
+  page.value = clampPage(page.value, pages.value);
+});
 
 function isPicked(id: string) {
   return selectedIds.value.includes(id);
@@ -281,13 +409,90 @@ function togglePick(id: string) {
 
 const focusedId = ref("");
 const focused = computed(
-  () => tiles.value.find((c) => c && c._id === focusedId.value) || tiles.value.find(Boolean) || null
+  () => tiles.value.find((c) => c._id === focusedId.value) || tiles.value[0] || null
 );
 
 function capability(key: string) {
   return capabilityView(focused.value, key);
 }
 
+/**
+ * Whether this camera embeds a player at all — i.e. whether the "Not verified"
+ * badge is something its tile can ever show. A camera the server has already
+ * refused has a reason of its own on the tile and does not need this one too.
+ */
+const embedsPlayer = computed(
+  () => tileView(focused.value, { online: online.value }).showPlayer
+);
+
+/* ------------------------------------------------------------------ health */
+
+/**
+ * THE RECORDER'S OWN STATE, asked for separately and slowly.
+ *
+ * This is the only thing on this screen that can cause the server to touch a
+ * device, so three things bound it and all three matter:
+ *
+ * - **only the tiles on screen** are asked about, so paging to another page
+ *   does not keep probing the page you left;
+ * - **the interval is the server's own cache lifetime**, because asking faster
+ *   than the cache is round trips in exchange for the identical answer;
+ * - **a failure is never retried and never breaks the wall.** Health is
+ *   supporting information; a wall that goes blank because a probe timed out
+ *   would be a worse screen than one with no health on it at all.
+ */
+const healthById = ref<Record<string, TWallCameraHealth>>({});
+const healthFailed = ref("");
+/** Ticked with the sweep so "4 min ago" ages instead of freezing. */
+const now = ref(Date.now());
+
+const focusedHealth = computed(() =>
+  healthView(focused.value ? healthById.value[focused.value._id] : null, now.value)
+);
+
+const visibleIds = computed(() => tiles.value.map((c) => c._id));
+
+let healthTimer: ReturnType<typeof setInterval> | null = null;
+
+async function sweepHealth() {
+  const ids = visibleIds.value;
+  now.value = Date.now();
+  if (!ids.length || !online.value) return;
+
+  try {
+    const res = await getSiteHealth(props.site, ids);
+    const next: Record<string, TWallCameraHealth> = {};
+    for (const item of (res?.cameras ?? []) as any[]) {
+      if (item?._id) next[String(item._id)] = item as TWallCameraHealth;
+    }
+    healthById.value = next;
+    healthFailed.value = "";
+  } catch {
+    // Kept, not cleared: the last known health is still the most useful thing
+    // we have, and "the recorder was fine a moment ago" is a real answer.
+    healthFailed.value = "The camera health check did not answer this time.";
+  }
+}
+
+function restartHealth() {
+  if (healthTimer) clearInterval(healthTimer);
+  const seconds = Number(config.value?.healthCacheSeconds);
+  const intervalMs = (Number.isFinite(seconds) && seconds > 0 ? seconds : 20) * 1000;
+  healthTimer = setInterval(sweepHealth, intervalMs);
+  sweepHealth();
+}
+
+// Re-swept when the visible set changes, so a supervisor who pages or changes
+// layout is not reading the previous page's health under the new page's names.
+watch(visibleIds, (ids, previous) => {
+  if (ids.join(",") !== (previous ?? []).join(",")) sweepHealth();
+});
+
+onBeforeUnmount(() => {
+  if (healthTimer) clearInterval(healthTimer);
+  healthTimer = null;
+});
+
 /* ------------------------------------------------------- browser condition */
 
 const online = ref(true);
@@ -339,7 +544,13 @@ async function toggleFullscreen() {
   --vms-scrim-solid: rgba(7, 9, 12, 0.82);
   --vms-text: #e8ecf1;
   --vms-text-dim: #94a0b0;
-  --vms-text-faint: #5c6675;
+  /*
+    #5c6675 measured 2.98:1 against the chrome — under the 3:1 a status
+    indicator needs, and this token IS a status indicator (the "not checked"
+    dot and the inactive dot in the camera list). #7a8697 measures 4.68:1 there
+    and 5.01:1 on a tile. Invented value; the rest of the ramp is unchanged.
+  */
+  --vms-text-faint: #7a8697;
   --vms-accent: #5b9be0;
   --vms-radius: 3px;
 
@@ -538,6 +749,80 @@ async function toggleFullscreen() {
   color: var(--vms-text-dim);
 }
 
+/* ------------------------------------------------------------------ pager */
+
+.vms__pager {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 6px;
+  background: var(--vms-chrome);
+  border-top: 1px solid var(--vms-line);
+}
+
+.vms__pager-label {
+  font-size: 12px;
+  color: var(--vms-text-dim);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ----------------------------------------------------------- badge meaning */
+
+.vms__badge-note {
+  margin: 0 0 8px;
+  max-width: 92ch;
+  font-size: 12px;
+  line-height: 17px;
+  color: var(--vms-text-dim);
+}
+
+/* ----------------------------------------------------------------- health */
+
+.vms__health {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 16px;
+  margin: 0 0 10px;
+  font-size: 12px;
+  line-height: 17px;
+  color: var(--vms-text-dim);
+}
+
+.vms__health-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--vms-text);
+  font-weight: 600;
+}
+
+.vms__health-item b {
+  color: var(--vms-text);
+  font-weight: 600;
+}
+
+.vms__health-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex: none;
+}
+
+.vms__health-dot--ok {
+  background: #4caf50;
+}
+.vms__health-dot--warn {
+  background: #fb8c00;
+}
+.vms__health-dot--down {
+  background: #e0241c;
+}
+.vms__health-dot--unknown {
+  background: var(--vms-text-faint);
+}
+
 /* ------------------------------------------------------------ capabilities */
 
 .vms__caps {
@@ -598,15 +883,40 @@ async function toggleFullscreen() {
 }
 
 /*
-  0.55, not the Material 0.38. Every switched-off control here carries a
-  SENTENCE, and 0.38 measures about 3.3:1 against this surface — under the 4.5:1
-  a sentence needs. 0.55 measures about 5.2:1. A reason nobody can read is the
-  same as no reason at all.
+  "Ready" is the one tag that is good news, and it is the accent rather than
+  green: green on this screen means "this camera is up", and a control being
+  available is not the same claim.
 */
-.vms__cap--off .vms__cap-detail {
-  opacity: 0.55;
+.vms__cap-tag--on {
+  color: var(--vms-accent);
+}
+
+/*
+  RULE 5's second line: quieter than the server's sentence above it, because it
+  is advice rather than fact — but NOT dimmed with the rest of a switched-off
+  panel. It is the one line on an unavailable control that is actionable, and
+  fading the only actionable line is the whole mistake this fixes.
+*/
+.vms__cap-next {
+  margin: 6px 0 0;
+  padding-top: 6px;
+  border-top: 1px solid var(--vms-line);
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--vms-text-dim);
 }
 
+/*
+  THE FADE ON A SWITCHED-OFF REASON IS GONE, AND THE OLD COMMENT WAS WRONG.
+
+  It claimed 0.55 opacity measured "about 5.2:1". Measured properly — the dim
+  ramp #94a0b0 composited at 0.55 over the chrome #161b22 — it is 2.88:1,
+  well under the 4.5:1 a sentence needs, and the reason a supervisor is meant
+  to read was the least legible text on the panel. Removing the fade entirely
+  leaves #94a0b0 on #161b22 at 6.52:1. The panel is already outlined rather
+  than filled, which is what says "not switched on"; the fade was saying it a
+  second time at the cost of the words.
+*/
 .vms__cap-detail {
   margin: 0;
   font-size: 12px;