@7365admin1/layer-common 3.2.3 → 3.2.5

package/components/Layout/NavigationDrawer.vue

@@ -1,9 +1,41 @@
 <!-- LayoutNavigationDrawer.vue -->
 <template>
-  <v-navigation-drawer v-model="drawer" permanent floating class="bg-primary">
+  <!--
+    `bg-brand-surface`, not `bg-primary`: `primary` is a foreground colour on a
+    dark page (it has to carry `class="text-primary"` sentences at 4.5:1), and a
+    fill that carries a label cannot also be that. `brand-surface` is a real
+    surface in each theme - see `utils/theme.ts` - so the drawer belongs to the
+    application it is in rather than being the one panel the theme switch never
+    reached. Its label reads 15.43:1 light, 13.21:1 dark.
+
+    NO HARDCODED LABEL COLOUR ANYWHERE IN HERE. Vuetify paints the drawer with
+    `on-brand-surface` and the list inside it inherits that through
+    `bg-transparent`, which the drawer supplies to every `v-list` it contains.
+    A `text-white` in here (or in an app's `#action` / `#services` slot) is
+    white on a light rail at 1.13:1.
+
+    `floating` dropped so the drawer draws its own edge, and the three
+    opacities below are raised on this element only:
+
+    - `border-opacity` 0.45. A surface is a low-contrast panel by design
+      (1.13:1 light, 1.19:1 dark against the page), so the edge is what carries
+      the boundary: 3.27:1 light, 4.33:1 dark. The theme-wide value stays where
+      it is; raising that would redraw every table and card edge in eleven
+      applications.
+    - `hover-opacity` 0.08. Material's 0.04 is 1.11:1 on this rail, which is
+      not feedback. 0.08 is 1.17:1 light, 1.24:1 dark.
+    - `activated-opacity` 0.18. The active item is `primary` text on a
+      primary-tinted fill (see `NavigationItem.vue`); 0.12 left the fill at
+      1.15:1, 0.18 is 1.44:1 light, 1.33:1 dark.
+  -->
+  <v-navigation-drawer
+    v-model="drawer"
+    permanent
+    class="bg-brand-surface brand-drawer"
+  >
     <v-list>
       <v-list-item>
-        <v-list-item-title class="text-h6 text-white">
+        <v-list-item-title class="text-h6">
           {{ props.title || APP_NAME }}
         </v-list-item-title>
       </v-list-item>
@@ -91,3 +123,12 @@ const handleClick = (item: any) => {
   emit("navigate", item);
 };
 </script>
+
+<style scoped>
+/* Scoped to the drawer: none of these reach the rest of the application. */
+.brand-drawer {
+  --v-border-opacity: 0.45;
+  --v-hover-opacity: 0.08;
+  --v-activated-opacity: 0.18;
+}
+</style>

package/components/NavigationItem.vue

@@ -1,9 +1,16 @@
+<!--
+  `color="primary"` is applied by Vuetify only while the item is active, so the
+  page you are on is named by colour and not just by a 1.15:1 tint you cannot
+  see. `primary` reads 14.56:1 on the light rail and 5.38:1 on the dark one,
+  and it is the one brand colour that is a foreground in both themes.
+-->
 <template>
   <v-list-group v-if="children && children.length">
     <template #activator="{ props: groupProps }">
       <v-list-item
         v-bind="groupProps"
         :prepend-icon="icon"
+        color="primary"
         class="text-subtitle-2"
         @click.stop="onParentClick"
       >
@@ -25,6 +32,7 @@
     v-else-if="routeTo"
     :prepend-icon="icon"
     :to="routeTo"
+    color="primary"
     class="text-subtitle-2"
   >
     {{ title }}
@@ -34,6 +42,7 @@
     v-else-if="props.link"
     :prepend-icon="icon"
     :href="props.link"
+    color="primary"
     class="text-subtitle-2"
   >
     {{ title }}

package/composables/useSiteSettings.ts

@@ -99,6 +99,54 @@ export default function () {
     });
   }
 
+  /**
+   * The monitoring wall for one site.
+   *
+   * A different endpoint from `getAllSiteCameras`, and the difference is the
+   * point. That one is the Settings panel's paginated CRUD list; this one is
+   * purpose-built for a wall and is what the React Native app already uses:
+   *
+   * - it is **site-scoped and authorised server-side** — the caller must be a
+   *   member of the site, of its owning organisation, or work for an
+   *   organisation engaged to serve it;
+   * - it returns `type: "ip"` cameras only, so an ANPR unit can never land on a
+   *   monitoring wall;
+   * - it returns each camera's **capability descriptor** and the server's own
+   *   `unavailableReason`, so a tile explains itself instead of showing a black
+   *   rectangle;
+   * - it never returns a credential, and it contacts no device.
+   *
+   * Unpaginated by design: a wall shows a site's cameras, and paging them was
+   * an artefact of borrowing the CRUD list.
+   */
+  async function getSiteWall(siteId: string) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/site-cameras/site/${siteId}/wall`,
+      { method: "GET" }
+    );
+  }
+
+  /**
+   * Health for the cameras currently on screen.
+   *
+   * Same site scoping as the wall, and the ids are narrowed to the visible
+   * tiles on purpose: this is the one camera call that can reach a device, and
+   * asking about cameras nobody is looking at spends a real budget for nothing.
+   *
+   * **Reachability is answered per RECORDER and cached there**, so a wall of
+   * twelve channels on one device is one connect rather than twelve, and
+   * several supervisors watching the same wall is still one. That is what makes
+   * it safe to ask on a timer at all — but only a slow one: the server caches
+   * for `healthCacheSeconds`, and asking faster than the cache buys nothing and
+   * costs round trips.
+   */
+  async function getSiteHealth(siteId: string, cameraIds: string[]) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/site-cameras/site/${siteId}/health`,
+      { method: "GET", query: { ids: cameraIds.join(",") } }
+    );
+  }
+
   async function updateSiteInformation(
     siteId: string,
     payload: { bgImage: string; description: string; docs: { id: string; name: string }[] }
@@ -175,6 +223,8 @@ export default function () {
     updateSite,
     addCamera,
     getAllSiteCameras,
+    getSiteWall,
+    getSiteHealth,
     setSiteGuardPosts,
     updateSiteCamera,
     deleteSiteCameraById,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.3",
+  "version": "3.2.5",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {
@@ -15,6 +15,8 @@
     "generate": "nuxt generate .playground",
     "preview": "nuxt preview .playground",
     "test": "esbuild composables/useVisitorSocket.ts --format=esm --outfile=test/.build/useVisitorSocket.mjs --log-level=error && node --test \"test/*.test.mjs\"",
+    "test:theme": "node --test \"utils/theme.test.ts\"",
+    "test:camera-wall": "node --test \"utils/camera-wall.test.ts\"",
     "release": "yarn run build && changeset publish"
   },
   "devDependencies": {

package/plugins/vuetify.ts

@@ -42,6 +42,8 @@ import {
 } from "vuetify-pro-tiptap";
 import "vuetify-pro-tiptap/style.css";
 
+import { LIGHT_THEME, DARK_THEME } from "../utils/theme";
+
 export default defineNuxtPlugin((app) => {
   const vuetify = createVuetify({
     defaults: {
@@ -69,17 +71,43 @@ export default defineNuxtPlugin((app) => {
       //   hint: "This field is required",
       // },
     },
+    /**
+     * THE PRODUCT HAS TWO THEMES, AND UNTIL NOW ONLY ONE OF THEM WAS OURS.
+     *
+     * Every app shows a light/dark toggle in the app bar (Layout/Header.vue),
+     * and it sets Vuetify's built-in "light" and "dark" themes. Those were left
+     * at Vuetify's factory values, so one click on any screen in any of the
+     * eleven apps threw the brand away: `primary` stopped being the Seven365
+     * navy and became Material blue #2196F3 - and `primary` is the navigation
+     * drawer's fill - while `primary-button` and `text-primary`, used in around
+     * eighty places across the layer and the apps, do not exist in a stock
+     * theme at all, so those components lost their colour to an undefined CSS
+     * variable. There was also no way back to the brand: the toggle only ever
+     * flipped between the two stock themes.
+     *
+     * The fix is to make the stock names OURS rather than to add new names.
+     * Several components already branch on `theme.global.name === "dark"` (this
+     * layer's FormDialog, property-management's facility icons), so a
+     * differently-named dark theme would have left every one of them silently
+     * on their light branch inside a dark app. Overriding `light` and `dark`
+     * means the toggle, `v-theme-provider theme="light"`, the `plain-dark`
+     * layout and all of those comparisons keep working, and start being right.
+     *
+     * The colours themselves, and every ratio they were chosen for, are in
+     * `utils/theme.ts`, which `utils/theme.test.ts` measures on every run.
+     */
     theme: {
-      defaultTheme: "iservice365",
+      defaultTheme: "light",
       themes: {
-        iservice365: {
-          dark: false,
-          colors: {
-            primary: "#042134",
-            "primary-button": "#1867C0",
-            "text-primary": "#052439",
-          },
-        },
+        light: LIGHT_THEME,
+        dark: DARK_THEME,
+        /**
+         * The name this product booted on before the two above carried the
+         * brand. Kept, and identical to `light`, so anything that asks for it
+         * by name - in an app that is not in this repository - still gets a
+         * theme rather than a blank one.
+         */
+        iservice365: LIGHT_THEME,
       },
     },
     icons: {