@7365admin1/layer-common 4.1.3-staging.253 → 4.1.3-staging.255

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/CreateSubsciptionPlan.vue

@@ -54,6 +54,8 @@
           variant="outlined"
           density="compact"
           class="filter-field mb-4"
+          hint="Enter 0 for unlimited seats."
+          persistent-hint
           required
         >
           <template #label>

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.253",
+  "version": "4.1.3-staging.255",
   "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.",