@7365admin1/layer-common 4.1.3-staging.254 → 4.1.3-staging.256

package/components/CameraForm.vue

@@ -15,7 +15,67 @@
               placeholder="Enter CCTV camera name"
             />
           </v-col>
-          <v-col cols="12">
+          <v-col v-if="isCCTV" cols="12" class="mb-2">
+            <InputLabel
+              class="text-capitalize"
+              title="How do you have this camera's address?"
+            />
+            <v-radio-group
+              v-model="addressMode"
+              inline
+              hide-details
+              density="comfortable"
+            >
+              <v-radio label="From the recorder" value="recorder" />
+              <v-radio label="I already have a link" value="url" />
+            </v-radio-group>
+          </v-col>
+
+          <template v-if="showRecorderFields">
+            <v-col cols="12">
+              <InputLabel
+                class="text-capitalize"
+                title="Recorder address"
+                required
+              />
+              <v-text-field
+                v-model.trim="recorder.host"
+                density="comfortable"
+                :rules="[requiredRule]"
+                placeholder="Enter the recorder's address"
+                hint="The address of the recorder (NVR) this camera is plugged into, on the site network."
+                persistent-hint
+              />
+            </v-col>
+
+            <v-col cols="5" class="pr-2">
+              <InputLabel class="text-capitalize" title="Port" />
+              <v-text-field
+                v-model.trim="recorder.port"
+                density="comfortable"
+                :rules="[portRule]"
+                placeholder="Leave blank if unsure"
+              />
+            </v-col>
+
+            <v-col cols="7">
+              <InputLabel
+                class="text-capitalize"
+                title="Channel number"
+                required
+              />
+              <v-text-field
+                v-model.trim="recorder.channel"
+                density="comfortable"
+                :rules="[requiredRule, channelRule]"
+                placeholder="e.g. 6"
+                hint="The channel this camera sits on in the recorder's own list."
+                persistent-hint
+              />
+            </v-col>
+          </template>
+
+          <v-col v-if="showUrlField" cols="12">
             <InputLabel class="text-capitalize" title="URL" required />
             <v-text-field
               v-model.trim="camera.host"
@@ -26,6 +86,26 @@
             />
           </v-col>
 
+          <v-col v-if="isCCTV" cols="12" class="pt-2">
+            <v-btn
+              variant="outlined"
+              class="text-none"
+              :disabled="!canTest || disable"
+              :loading="testing"
+              @click="testCamera"
+              text="Test this camera"
+            />
+
+            <v-alert
+              v-if="testResult"
+              class="mt-3"
+              variant="tonal"
+              density="compact"
+              :type="testResult.ok ? 'success' : 'warning'"
+              :text="testResult.message"
+            />
+          </v-col>
+
           <!-- <v-col v-if="isANPR" cols="12">
             <InputLabel class="text-capitalize" title="Category" required />
             <v-select
@@ -232,6 +312,108 @@ const message = ref("");
 const isANPR = computed(() => prop.type === "anpr");
 const isCCTV = computed(() => prop.type === "ip");
 
+const { addCamera, updateSiteCamera, testSiteCamera } = useSiteSettings();
+
+/**
+ * Two ways to say where a camera is, and the guided one is the default.
+ *
+ * A CCTV camera's stored address is a relay player page. Nothing printed on a
+ * camera, and nothing in a recorder's own screens, will ever tell somebody what
+ * it is — until now it had to be requested from whoever runs the video service
+ * and pasted in. `recorder` collects what a person can genuinely find out and
+ * the server derives the address; `url` is the old field, kept because cameras
+ * configured that way must keep editing exactly as they do today and because
+ * some people do legitimately have a ready-made link.
+ *
+ * Editing an existing camera opens on `url`, so nothing about an already-working
+ * record changes shape under the person looking at it.
+ */
+const addressMode = ref<"recorder" | "url">(
+  prop.type === "ip" && prop.mode !== "edit" ? "recorder" : "url"
+);
+
+const recorder = ref({ host: "", port: "", channel: "" });
+
+const showRecorderFields = computed(
+  () => isCCTV.value && addressMode.value === "recorder"
+);
+const showUrlField = computed(
+  () => !isCCTV.value || addressMode.value === "url"
+);
+
+const portRule = (v: string | any) => {
+  if (!v) return true;
+  const port = Number(v);
+  return (Number.isInteger(port) && port >= 1 && port <= 65535) || "Enter a port number between 1 and 65535, or leave it blank.";
+};
+
+const channelRule = (v: string | any) => {
+  if (!v) return true;
+  const channel = Number(v);
+  return (
+    (Number.isInteger(channel) && channel >= 1 && channel <= 256) ||
+    "Enter the channel number, from 1 to 256."
+  );
+};
+
+/* ---------------------------- test before saving --------------------------- */
+
+const testing = ref(false);
+const testResult = ref<{ ok: boolean; message: string } | null>(null);
+
+/**
+ * What the address fields currently say, in the shape the API takes.
+ *
+ * The same object is used for the test and for the save, so a green test is a
+ * test of the thing that gets saved and not of something near it.
+ */
+function addressPayload() {
+  if (showRecorderFields.value) {
+    return {
+      host: "",
+      recorderHost: recorder.value.host,
+      recorderPort: recorder.value.port ? Number(recorder.value.port) : undefined,
+      channel: recorder.value.channel ? Number(recorder.value.channel) : undefined,
+    };
+  }
+
+  return { host: camera.value.host };
+}
+
+const canTest = computed(() => {
+  if (testing.value) return false;
+  if (showRecorderFields.value) {
+    return Boolean(recorder.value.host && recorder.value.channel);
+  }
+  return Boolean(camera.value.host);
+});
+
+// A verdict belongs to the address that produced it. Change the address and the
+// old verdict is no longer about anything.
+watch(
+  () => JSON.stringify(addressPayload()),
+  () => {
+    testResult.value = null;
+  }
+);
+
+async function testCamera() {
+  testing.value = true;
+  testResult.value = null;
+
+  try {
+    const result = await testSiteCamera(prop.site, addressPayload());
+    testResult.value = { ok: result.ok, message: result.message };
+  } catch (error: any) {
+    testResult.value = {
+      ok: false,
+      message: cameraErrorConverter(error, prop.type),
+    };
+  } finally {
+    testing.value = false;
+  }
+}
+
 const anprCategoryOptions = computed(() => [
   { title: "Resident", value: "resident" },
   { title: "Visitor", value: "visitor" },
@@ -265,7 +447,10 @@ const hasChanges = computed(() => {
       camera.value.category !== prop.camera.category ||
       camera.value.guardPost !== prop.camera.guardPost ||
       camera.value.direction !== prop.camera.direction ||
-      camera.value.name !== prop.camera.name
+      camera.value.name !== prop.camera.name ||
+      // Switching an existing camera over to the recorder fields is a change
+      // even though its stored URL has not been retyped.
+      showRecorderFields.value
     );
   }
 
@@ -273,20 +458,18 @@ const hasChanges = computed(() => {
   return true;
 });
 
-const { addCamera, updateSiteCamera } = useSiteSettings();
-
 async function submit() {
   disable.value = true;
   camera.value.guardPost = camera.value.guardPost ?? 0;
 
   try {
     if (prop.mode === "add") {
-      await addCamera(camera.value);
+      await addCamera({ ...camera.value, ...addressPayload() });
     }
 
     if (prop.mode === "edit") {
       await updateSiteCamera(camera.value._id ?? "", {
-        host: camera.value.host,
+        ...addressPayload(),
         username: camera.value.username,
         password: camera.value.password,
         category: camera.value.category,

package/components/CameraWall.vue

@@ -72,7 +72,32 @@
         <p v-if="!cameras.length && !loading" class="vms__picker-empty">
           No cameras yet.
         </p>
-        <label v-for="c in cameras" :key="c._id" class="vms__pick">
+
+        <!--
+          SEARCH, then a pager. A site with 150 cameras used to render 150
+          checkboxes in one 220 px column, so finding "Basement Ramp 2" meant
+          scrolling past everything else. Typing filters; the pager keeps the
+          column a fixed height whatever the site's size.
+
+          A plain input rather than a Vuetify field: this component is the wall
+          chrome, styled from its own CSS variables, and a `v-text-field` here
+          brings the app theme into a black surround that deliberately is not
+          themed.
+        -->
+        <input
+          v-if="cameras.length > PICKER_PAGE_SIZE"
+          v-model.trim="pickerSearch"
+          class="vms__picker-search"
+          type="search"
+          placeholder="Search cameras"
+          aria-label="Search cameras on this site"
+        >
+
+        <p v-if="cameras.length && !picker.matched" class="vms__picker-empty">
+          No camera matches that search.
+        </p>
+
+        <label v-for="c in picker.items" :key="c._id" class="vms__pick">
           <input
             type="checkbox"
             :checked="isPicked(c._id)"
@@ -85,6 +110,32 @@
             :class="c.status === 'active' ? 'vms__pick-dot--on' : 'vms__pick-dot--off'"
           />
         </label>
+
+        <!--
+          Shown whenever the matching list is longer than one page, so the reader
+          is never left believing the column is the whole list. The count is of
+          MATCHES, not of the site, because that is the list being paged.
+        -->
+        <div v-if="picker.pages > 1" class="vms__picker-pager">
+          <button
+            type="button"
+            class="vms__link"
+            :disabled="pickerPage === 0"
+            @click="pickerPage -= 1"
+          >
+            Prev
+          </button>
+          <span class="vms__picker-range">{{ picker.range }}</span>
+          <button
+            type="button"
+            class="vms__link"
+            :disabled="pickerPage >= picker.pages - 1"
+            @click="pickerPage += 1"
+          >
+            Next
+          </button>
+        </div>
+
         <p v-if="selectedIds.length >= layout.tiles" class="vms__picker-note">
           This layout holds {{ layout.tiles }}. Choose a bigger layout for more.
         </p>
@@ -293,6 +344,8 @@ import {
   focusedCamera,
   healthView,
   isDenseLayout,
+  PICKER_PAGE_SIZE,
+  pickerView,
   sharedCapabilityNote,
   wallCameras,
   wallLayout,
@@ -392,6 +445,8 @@ onMounted(load);
 watch(() => props.site, () => {
   selectedIds.value = [];
   page.value = 0;
+  pickerSearch.value = "";
+  pickerPage.value = 0;
   healthById.value = {};
   load();
 });
@@ -437,6 +492,46 @@ watch([layoutKey, pages], () => {
   page.value = clampPage(page.value, pages.value);
 });
 
+/* ------------------------------------------------- browsing a large estate */
+
+/**
+ * The picker is searched and paged, because at 150 cameras it was neither.
+ *
+ * It rendered one checkbox per camera in a 220 px column with no filter, so the
+ * only way to reach the last camera at a large site was to scroll past the other
+ * 149 - and nothing on screen said how many there were. This is the same
+ * treatment `CameraMain.vue` already gives the settings list.
+ *
+ * Searched and paged in the BROWSER on purpose: the wall endpoint answers with
+ * the whole site in one read (`getSiteWall` applies no limit, and the response is
+ * an id/name/status projection, not pictures), it has no search parameter, and a
+ * site's camera list is small enough to hold. If a site ever grows past what one
+ * request should carry, this wants a server-side search - and so does the
+ * endpoint.
+ *
+ * ponytail: a plain filter + slice, no virtual scroller. 150 rows of which 25
+ * are mounted is not a performance problem.
+ */
+const pickerSearch = ref("");
+const pickerPage = ref(0);
+
+/**
+ * The whole picker column in one computed: the matching cameras, the page being
+ * shown, how many pages there are and the "26-50 of 150" label. The rule lives
+ * in `pickerView` so it can be tested; this only holds the two inputs.
+ */
+const picker = computed(() =>
+  pickerView(cameras.value, pickerSearch.value, pickerPage.value, PICKER_PAGE_SIZE)
+);
+
+/**
+ * `pickerView` clamps the page for display, but the ref has to follow or the
+ * Prev/Next buttons act on a number the column is not on.
+ */
+watch(picker, (view) => {
+  if (pickerPage.value !== view.page) pickerPage.value = view.page;
+});
+
 function isPicked(id: string) {
   return selectedIds.value.includes(id);
 }
@@ -728,6 +823,39 @@ async function toggleFullscreen() {
   border-right: 1px solid var(--vms-line);
 }
 
+.vms__picker-search {
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0 0 6px;
+  /* 32 px so a thumb on a control-room touchscreen hits it. */
+  height: 32px;
+  padding: 0 8px;
+  font-size: 12px;
+  color: var(--vms-text);
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--vms-line);
+  border-radius: 4px;
+}
+.vms__picker-search::placeholder {
+  color: var(--vms-text-dim);
+}
+.vms__picker-pager {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  margin: 6px 0 0;
+  font-size: 11px;
+}
+.vms__picker-range {
+  color: var(--vms-text-dim);
+}
+.vms__picker-pager .vms__link[disabled] {
+  /* Dimmed, not hidden: a pager that loses its Prev button on page 1 moves Next
+     under the cursor and gets clicked by accident. */
+  opacity: 0.45;
+  cursor: default;
+}
 .vms__picker-head {
   display: flex;
   align-items: center;

package/composables/useSiteSettings.ts

@@ -48,13 +48,56 @@ export default function () {
       }
     );
   }
-  async function addCamera(camera: TSiteCamera) {
+  async function addCamera(camera: TSiteCamera & TCameraByRecorder) {
     return await useNuxtApp().$api<Record<string, any>>(`/api/site-cameras`, {
       method: "POST",
       body: camera,
     });
   }
 
+  /**
+   * Describe a camera by the recorder it is on instead of by a finished URL.
+   *
+   * The stored address is a relay player page, which nobody outside the video
+   * service can work out. These three fields are what a person can actually
+   * read off a recorder, and the server turns them into that address. Optional
+   * everywhere: sending `host` still works exactly as it always has.
+   */
+  type TCameraByRecorder = {
+    recorderHost?: string;
+    recorderPort?: number;
+    channel?: number;
+  };
+
+  /** What a "Test this camera" press comes back with. Never an address. */
+  type TCameraTestResult = {
+    ok: boolean;
+    status:
+      | "working"
+      | "no-video"
+      | "credential-refused"
+      | "unreachable"
+      | "cannot-test";
+    message: string;
+  };
+
+  /**
+   * Try an address before saving it. Read-only, and it runs on the server —
+   * the browser never touches a recorder and never sees a credential.
+   */
+  async function testSiteCamera(
+    siteId: string,
+    payload: { host?: string } & TCameraByRecorder
+  ) {
+    return await useNuxtApp().$api<TCameraTestResult>(
+      `/api/site-cameras/site/${siteId}/test`,
+      {
+        method: "POST",
+        body: payload,
+      }
+    );
+  }
+
   async function updateSiteCamera(
     id: string,
     value: Partial<
@@ -68,7 +111,8 @@ export default function () {
         | "direction"
         | "status"
       >
-    >
+    > &
+      TCameraByRecorder
   ) {
     return await useNuxtApp().$api<Record<string, any>>(
       `/api/site-cameras/id/${id}`,
@@ -258,6 +302,7 @@ export default function () {
     getSiteUnits,
     updateSite,
     addCamera,
+    testSiteCamera,
     getAllSiteCameras,
     bulkImportSiteCameras,
     getSiteWall,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.1.3-staging.254",
+  "version": "4.1.3-staging.256",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/camera-wall.ts

@@ -169,6 +169,78 @@ export function clampPage(page: number, pages: number): number {
   return Math.min(Math.max(0, Math.floor(page)), Math.max(0, pages - 1));
 }
 
+/** How many cameras the picker's side column shows at a time. */
+export const PICKER_PAGE_SIZE = 25;
+
+/**
+ * The camera browser beside the wall, searched and paged.
+ *
+ * **This exists because the picker was neither.** It rendered one checkbox per
+ * camera in a 220 px column with no filter and no count, so at a 150-camera site
+ * the only way to reach the last camera was to scroll past the other 149, and
+ * nothing on screen said how many there were. A supervisor who could not find a
+ * camera had no way to tell whether it was missing or merely further down.
+ *
+ * Searched and paged in the browser on purpose: the wall endpoint answers with
+ * the whole site in one read (`getSiteWall` applies no limit, and the response is
+ * an id/name/status projection rather than pictures) and has no search parameter.
+ *
+ * Extracted from the component so the paging is a tested rule rather than a
+ * template nobody would think to check - the playground build does not compile
+ * the wall's screens at all.
+ *
+ * `range` counts MATCHES, not the site, because that is the list being paged -
+ * but a search that hides cameras says so through `total` vs `matched`.
+ */
+export function pickerView(
+  cameras: TWallCamera[],
+  query: string | undefined,
+  page: number,
+  pageSize: number = PICKER_PAGE_SIZE
+): {
+  matches: TWallCamera[];
+  items: TWallCamera[];
+  pages: number;
+  page: number;
+  range: string;
+  total: number;
+  matched: number;
+} {
+  const all = Array.isArray(cameras) ? cameras : [];
+  const size = Number.isFinite(pageSize) && pageSize > 0 ? Math.floor(pageSize) : PICKER_PAGE_SIZE;
+  const needle = String(query ?? "").trim().toLowerCase();
+
+  // Name first, id as the fallback label - the same thing the row displays, so
+  // searching for what you can read always finds it.
+  const matches = needle
+    ? all.filter((c: any) =>
+        String(c?.name || c?._id || "").toLowerCase().includes(needle)
+      )
+    : all;
+
+  const pages = Math.max(1, Math.ceil(matches.length / size));
+  // Clamped rather than trusted: typing can shrink the list under a page number
+  // that was valid a keystroke ago, and an out-of-range page renders as "no
+  // cameras", which reads as a broken picker rather than a stale page.
+  const current = clampPage(page, pages);
+  const start = current * size;
+  const items = matches.slice(start, start + size);
+
+  const range = matches.length
+    ? `${start + 1}-${Math.min(matches.length, start + size)} of ${matches.length}`
+    : "0 of 0";
+
+  return {
+    matches,
+    items,
+    pages,
+    page: current,
+    range,
+    total: all.length,
+    matched: matches.length,
+  };
+}
+
 /**
  * The cameras on one page, in order. **Never padded.**
  *