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

package/components/HidAccessLogDashboard.vue

@@ -327,6 +327,8 @@ type AccessTab = "resident" | "visitor" | "administrator";
 type AccessRow = {
   key: string;
   identityKey: string;
+  identityType?: string;
+  visitorId?: string;
   name: string;
   facialData: string;
   faceImage?: string;
@@ -351,6 +353,7 @@ const { getVisitors } = useVisitor();
 
 const readers = ref<Record<string, any>[]>([]);
 const identities = ref<Record<string, any>[]>([]);
+const allIdentities = ref<Record<string, any>[]>([]);
 const visitorRecords = ref<Record<string, any>>({});
 const logs = ref<Record<string, any>[]>([]);
 const liveAccessLogs = ref<Record<string, any>[]>([]);
@@ -558,28 +561,41 @@ async function loadDashboard() {
     const isAdministratorTab = activeTab.value === "administrator";
     const isVisitorTab = activeTab.value === "visitor";
     const [identityResponse, logResponse, hidAccessLogs, configurationResponse, roleResponse, visitorResponse, readerUserResponse] = await Promise.all([
-      getIdentities(selectedReaderId.value, {
-        page: 1,
-        limit: 500,
-        ...(!isAdministratorTab ? { type: getIdentityType(activeTab.value) } : {}),
-      }),
-      getLogs(selectedReaderId.value, {
-        page: 1,
-        limit: 500,
-      }),
-      loadLiveAccessLogs(selectedReaderId.value),
-      loadReaderConfiguration(selectedReaderId.value),
-      isAdministratorTab ? loadAdministratorRoles(selectedReaderId.value) : Promise.resolve(null),
+      loadDashboardSource(
+        getIdentities(selectedReaderId.value, {
+          page: 1,
+          limit: 500,
+        }),
+        null,
+        "identities",
+      ),
+      loadDashboardSource(
+        getLogs(selectedReaderId.value, {
+          page: 1,
+          limit: 500,
+        }),
+        null,
+        "persisted access logs",
+      ),
+      loadDashboardSource(loadLiveAccessLogs(selectedReaderId.value), [], "live access logs"),
+      loadDashboardSource(loadReaderConfiguration(selectedReaderId.value), {}, "reader configuration"),
+      isAdministratorTab
+        ? loadDashboardSource(loadAdministratorRoles(selectedReaderId.value), null, "administrator roles")
+        : Promise.resolve(null),
       isVisitorTab && props.org
-        ? getVisitors({
-            org: props.org,
-            site: props.site,
-            page: 1,
-            limit: 500,
-            order: "desc",
-          })
+        ? loadDashboardSource(
+            getVisitors({
+              org: props.org,
+              site: props.site,
+              page: 1,
+              limit: 500,
+              order: "desc",
+            }),
+            null,
+            "visitor records",
+          )
         : Promise.resolve(null),
-      loadReaderUsers(selectedReaderId.value),
+      loadDashboardSource(loadReaderUsers(selectedReaderId.value), [], "reader users"),
     ]);
 
     if (sequence !== loadSequence.value) return;
@@ -587,18 +603,19 @@ async function loadDashboard() {
     const loadedIdentities = identityResponse?.items ?? identityResponse?.data?.items ?? identityResponse?.data?.identities ?? [];
     const mergedIdentities = mergeReaderUsersWithIdentities(readerUserResponse, loadedIdentities);
     const loadedVisitors = visitorResponse?.items ?? visitorResponse?.data?.items ?? visitorResponse?.data?.visitors ?? [];
-    visitorRecords.value = isVisitorTab
-      ? Object.fromEntries(loadedVisitors.map((visitor: Record<string, any>) => [String(visitor._id), visitor]))
-      : {};
+    visitorRecords.value = Object.fromEntries(
+      loadedVisitors.map((visitor: Record<string, any>) => [String(visitor._id), visitor]),
+    );
     administratorUserIds.value = getAdministratorRoleUserIds(roleResponse);
+    allIdentities.value = mergedIdentities;
     identities.value = isAdministratorTab
       ? mergedIdentities.filter((identity: Record<string, any>) => {
           const hidUserId = toHidNumericId(identity.hidUserId);
           return Boolean(hidUserId && administratorUserIds.value.has(hidUserId));
         })
-      : isVisitorTab
-        ? mergedIdentities.filter((identity: Record<string, any>) => Boolean(getVisitorRecord(identity)))
-      : mergedIdentities;
+      : activeTab.value === "visitor"
+        ? mergedIdentities.filter(isVisitorIdentity)
+        : mergedIdentities.filter((identity: Record<string, any>) => !isVisitorIdentity(identity));
     logs.value = logResponse?.items ?? logResponse?.data?.items ?? logResponse?.data?.logs ?? [];
     liveAccessLogs.value = hidAccessLogs;
     readerConfiguration.value = normalizeReaderConfiguration(configurationResponse);
@@ -610,6 +627,15 @@ async function loadDashboard() {
   }
 }
 
+async function loadDashboardSource<T>(request: Promise<T>, fallback: T, label: string): Promise<T> {
+  try {
+    return await request;
+  } catch (error) {
+    console.warn(`Unable to load HID ${label}`, error);
+    return fallback;
+  }
+}
+
 async function loadUserImages(items: Record<string, any>[]) {
   if (!selectedReaderId.value) return;
 
@@ -775,6 +801,7 @@ function mergeReaderUsersWithIdentities(readerUsers: Record<string, any>[], iden
 function resetDashboardData() {
   selectedHistoryRow.value = undefined;
   identities.value = [];
+  allIdentities.value = [];
   visitorRecords.value = {};
   logs.value = [];
   liveAccessLogs.value = [];
@@ -782,15 +809,11 @@ function resetDashboardData() {
   administratorUserIds.value = new Set();
 }
 
-function getIdentityType(tab: AccessTab) {
-  if (tab === "administrator") return "admin";
-  return tab;
-}
-
 function isVisibleForActiveTab(row: AccessRow) {
   const identity = findIdentityByKey(row.identityKey);
+  const isVisitor = row.identityType === "visitor" || Boolean(row.visitorId) || isVisitorIdentity(identity);
   if (activeTab.value === "visitor") {
-    return Boolean(identity && getVisitorRecord(identity));
+    return isVisitor;
   }
 
   if (activeTab.value === "administrator") {
@@ -798,7 +821,11 @@ function isVisibleForActiveTab(row: AccessRow) {
     return Boolean(hidUserId && administratorUserIds.value.has(hidUserId));
   }
 
-  return !identity || !getVisitorRecord(identity);
+  return !isVisitor;
+}
+
+function isVisitorIdentity(identity: Record<string, unknown> | undefined) {
+  return Boolean(identity && (identity.type === "visitor" || identity.visitor));
 }
 
 function loadAdministratorRoles(readerId: string) {
@@ -850,7 +877,7 @@ function getIdentityKey(identity: Record<string, any>) {
 
 function findIdentityByKey(identityKey: string) {
   if (!identityKey) return undefined;
-  return identities.value.find((identity) => getIdentityKey(identity) === identityKey);
+  return allIdentities.value.find((identity) => getIdentityKey(identity) === identityKey);
 }
 
 function getLogIdentityKey(log: Record<string, any>) {
@@ -1154,12 +1181,15 @@ function getRawAccessLogs(event: Record<string, any>) {
 
 function mapAccessLogToRow(rawLog: Record<string, any>, event: Record<string, any>, index: string): AccessRow {
   const identity = findIdentityForAccessLog(rawLog, event);
+  const eventIdentity = event.payload?.identity || event.payload?.identityLookup || {};
   const rawAccessTime = getAccessLogTime(rawLog, event);
   const identityKey = identity ? getIdentityKey(identity) : getLogIdentityKey({ ...event, payload: { ...event.payload, rawAccessLog: rawLog } });
 
   return {
     key: `${event._id || event.id || "log"}-${rawLog.id || rawLog.time || index}`,
     identityKey,
+    identityType: String(identity?.type || eventIdentity.type || "").toLowerCase() || undefined,
+    visitorId: String(identity?.visitor || eventIdentity.visitor || "") || undefined,
     name: identity ? getName(identity) : getRawLogName(rawLog, event),
     facialData: identity ? getFacialData(identity) : "N/A",
     faceImage: identity ? getUserImageSrc(identity) : "",
@@ -1175,7 +1205,7 @@ function mapAccessLogToRow(rawLog: Record<string, any>, event: Record<string, an
 function findIdentityForAccessLog(rawLog: Record<string, any>, event: Record<string, any>) {
   const eventIdentityId = event.payload?.identity?._id;
   if (eventIdentityId) {
-    const byId = identities.value.find((identity) => String(identity._id) === String(eventIdentityId));
+    const byId = allIdentities.value.find((identity) => String(identity._id) === String(eventIdentityId));
     if (byId) return byId;
   }
 
@@ -1184,7 +1214,7 @@ function findIdentityForAccessLog(rawLog: Record<string, any>, event: Record<str
   const cardNo = rawLog.card_value || rawLog.cardNo || event.payload?.identity?.cardNo || event.payload?.identityLookup?.cardNo;
   const qrCodeValue = rawLog.qrcode_value || rawLog.qrCode || rawLog.qrcode;
 
-  return identities.value.find((identity) => {
+  return allIdentities.value.find((identity) => {
     return (
       (hidUserId !== undefined && hidUserId !== null && String(identity.hidUserId) === String(hidUserId)) ||
       (registration && identity.registration === registration) ||

package/components/HidCameraCaptureDialog.vue

@@ -0,0 +1,199 @@
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    max-width="520"
+    persistent
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <v-card class="camera-dialog" rounded="lg">
+      <v-card-title class="d-flex align-center justify-space-between pa-4">
+        <span class="text-subtitle-1 font-weight-bold">Take Facial Photo</span>
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          size="small"
+          aria-label="Close camera"
+          @click="close"
+        />
+      </v-card-title>
+
+      <v-divider />
+
+      <v-card-text class="pa-4">
+        <div class="camera-viewport">
+          <video
+            ref="videoElement"
+            class="camera-preview"
+            autoplay
+            muted
+            playsinline
+          />
+
+          <div v-if="starting" class="camera-state">
+            <v-progress-circular indeterminate color="primary" />
+            <span class="mt-3">Starting camera...</span>
+          </div>
+
+          <div v-else-if="cameraError" class="camera-state px-6 text-center">
+            <v-icon icon="mdi-camera-off-outline" size="42" color="error" />
+            <span class="mt-3 text-error">{{ cameraError }}</span>
+          </div>
+        </div>
+
+        <canvas ref="canvasElement" class="d-none" />
+
+        <div class="text-caption text-medium-emphasis mt-3 text-center">
+          Keep your face centered and make sure the area is well lit.
+        </div>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="pa-4">
+        <v-btn variant="text" @click="close">Cancel</v-btn>
+        <v-spacer />
+        <v-btn
+          color="primary"
+          variant="flat"
+          prepend-icon="mdi-camera"
+          :disabled="starting || !!cameraError || !stream"
+          @click="capture"
+        >
+          Take Photo
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ modelValue: boolean }>();
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  capture: [dataUrl: string];
+}>();
+
+const videoElement = ref<HTMLVideoElement | null>(null);
+const canvasElement = ref<HTMLCanvasElement | null>(null);
+const stream = shallowRef<MediaStream | null>(null);
+const starting = ref(false);
+const cameraError = ref("");
+
+function stopCamera() {
+  stream.value?.getTracks().forEach((track) => track.stop());
+  stream.value = null;
+  if (videoElement.value) videoElement.value.srcObject = null;
+}
+
+function getCameraErrorMessage(caught: unknown) {
+  if (caught instanceof DOMException) {
+    if (caught.name === "NotAllowedError") {
+      return "Camera permission was denied. Allow camera access and try again.";
+    }
+    if (caught.name === "NotFoundError") {
+      return "No camera was found on this device.";
+    }
+    if (caught.name === "NotReadableError") {
+      return "The camera is currently being used by another application.";
+    }
+  }
+  return "Unable to open the camera. Use HTTPS or check the browser camera permission.";
+}
+
+async function startCamera() {
+  stopCamera();
+  cameraError.value = "";
+  starting.value = true;
+
+  try {
+    if (!navigator.mediaDevices?.getUserMedia) {
+      throw new Error("Camera API is unavailable");
+    }
+
+    stream.value = await navigator.mediaDevices.getUserMedia({
+      audio: false,
+      video: {
+        facingMode: "user",
+        width: { ideal: 1280 },
+        height: { ideal: 960 },
+      },
+    });
+
+    await nextTick();
+    if (!videoElement.value) throw new Error("Camera preview is unavailable");
+    videoElement.value.srcObject = stream.value;
+    await videoElement.value.play();
+  } catch (caught: unknown) {
+    stopCamera();
+    cameraError.value = getCameraErrorMessage(caught);
+  } finally {
+    starting.value = false;
+  }
+}
+
+function capture() {
+  const video = videoElement.value;
+  const canvas = canvasElement.value;
+  if (!video || !canvas || !video.videoWidth || !video.videoHeight) return;
+
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  const context = canvas.getContext("2d");
+  if (!context) return;
+
+  context.translate(canvas.width, 0);
+  context.scale(-1, 1);
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+  emit("capture", canvas.toDataURL("image/jpeg", 0.9));
+  close();
+}
+
+function close() {
+  stopCamera();
+  emit("update:modelValue", false);
+}
+
+watch(
+  () => props.modelValue,
+  (isOpen) => {
+    if (isOpen) void startCamera();
+    else stopCamera();
+  }
+);
+
+onBeforeUnmount(stopCamera);
+</script>
+
+<style scoped>
+.camera-dialog {
+  overflow: hidden;
+}
+
+.camera-viewport {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  aspect-ratio: 3 / 4;
+  border-radius: 8px;
+  background: #111722;
+}
+
+.camera-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scaleX(-1);
+}
+
+.camera-state {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #111722;
+  color: #ffffff;
+}
+</style>

package/components/HidIntercomManagement.vue

@@ -237,7 +237,7 @@
           <div class="sip-switch-row sip-section-switch">
             <div>
               <span>Enable video</span>
-              <small>Allow this reader to send and receive video during SIP calls.</small>
+              <small>Allow this reader to send its camera feed during SIP intercom calls.</small>
             </div>
             <v-switch v-model="sipForm.videoEnabled" :disabled="!sipForm.enabled" color="success" density="compact" hide-details />
           </div>
@@ -417,7 +417,10 @@
               <span class="sip-account-address">{{ sipAccount.sipAddress }}</span>
             </div>
             <div class="call-toggle-row web-video-toggle">
-              <span>Enable video</span>
+              <div>
+                <span>Receive HID video</span>
+                <small>Show the HID camera feed without sharing this device's camera.</small>
+              </div>
               <v-switch
                 v-model="webPhoneForm.video"
                 color="success"
@@ -457,12 +460,10 @@
               class="web-phone-media"
               :class="{
                 'has-video': webPhoneForm.video && webPhone.callState.value === 'active',
-                'has-local-video': webPhone.localVideoAvailable.value,
                 'has-remote-video': webPhone.remoteVideoAvailable.value,
               }"
             >
               <video ref="remoteVideoEl" autoplay playsinline class="remote-video" />
-              <video ref="localVideoEl" autoplay muted playsinline class="local-video" />
               <audio ref="remoteAudioEl" autoplay />
               <div
                 v-if="!webPhoneForm.video || webPhone.callState.value !== 'active' || !webPhone.remoteVideoAvailable.value"
@@ -472,7 +473,7 @@
                 <strong>{{ webPhoneCallLabel }}</strong>
                 <span v-if="webPhone.currentTarget.value">{{ webPhone.currentTarget.value }}</span>
                 <span v-if="webPhoneForm.video && webPhone.callState.value === 'active' && !webPhone.remoteVideoAvailable.value">
-                  Waiting for video from the other device
+                  Waiting for video from the HID device
                 </span>
               </div>
             </div>
@@ -529,14 +530,6 @@
                   :title="webPhone.muted.value ? 'Unmute' : 'Mute'"
                   @click="toggleWebMute"
                 />
-                <v-btn
-                  v-if="webPhoneForm.video"
-                  :icon="webPhone.cameraEnabled.value ? 'mdi-video' : 'mdi-video-off'"
-                  variant="outlined"
-                  :disabled="webPhone.callState.value !== 'active' || !webPhone.localVideoAvailable.value"
-                  :title="webPhone.cameraEnabled.value ? 'Turn camera off' : 'Turn camera on'"
-                  @click="toggleWebCamera"
-                />
                 <v-btn
                   icon="mdi-phone-hangup"
                   class="hangup-web-call"
@@ -723,7 +716,6 @@ const webPhoneActionLoading = ref(false);
 const sipAccount = ref<SipAccount | null>(null);
 const sipAccountLoading = ref(false);
 const sipAccountError = ref("");
-const localVideoEl = ref<HTMLVideoElement | null>(null);
 const remoteVideoEl = ref<HTMLVideoElement | null>(null);
 const remoteAudioEl = ref<HTMLAudioElement | null>(null);
 const webPhone = useSipWebPhone();
@@ -1249,7 +1241,6 @@ async function connectWebPhone() {
       displayName: "iService365 Web",
       video: webPhoneForm.video,
     }, {
-      localVideo: localVideoEl.value,
       remoteVideo: remoteVideoEl.value,
       remoteAudio: remoteAudioEl.value,
     });
@@ -1315,14 +1306,6 @@ async function hangupWebCall() {
   }
 }
 
-function toggleWebCamera() {
-  try {
-    webPhone.toggleCamera();
-  } catch (error: unknown) {
-    showMessage(getErrorMessage(error), "error");
-  }
-}
-
 function toggleWebMute() {
   try {
     webPhone.toggleMute();
@@ -2462,23 +2445,6 @@ export default {
   display: block;
 }
 
-.local-video {
-  position: absolute;
-  right: 12px;
-  bottom: 12px;
-  display: none;
-  width: 108px;
-  aspect-ratio: 3 / 4;
-  border: 2px solid #fff;
-  border-radius: 4px;
-  background: #263b49;
-  object-fit: cover;
-}
-
-.web-phone-media.has-local-video .local-video {
-  display: block;
-}
-
 .web-phone-media.has-remote-video .audio-call-state {
   display: none;
 }