@7365admin1/layer-common 3.2.0 → 3.2.1-staging.60

package/components/CameraWallTile.vue

@@ -0,0 +1,333 @@
+<template>
+  <div
+    ref="root"
+    class="vms-tile"
+    :class="{ 'vms-tile--dense': dense, 'vms-tile--focused': focused, 'vms-tile--empty': !camera }"
+    :tabindex="camera ? 0 : -1"
+    :aria-label="camera ? `${camera.name || camera._id}, ${view.label}` : 'Empty position'"
+    @click="camera && $emit('focus', camera)"
+    @dblclick="camera && toggleFullscreen()"
+    @keydown.enter="camera && toggleFullscreen()"
+  >
+    <!--
+      The picture, when there is one to show. This is an embed of the video
+      service's own player page: the stored address IS the live view, and there
+      is no other transport for live web video today.
+    -->
+    <iframe
+      v-if="camera && view.showPlayer"
+      :key="camera.host"
+      :src="camera.host"
+      class="vms-tile__frame"
+      :title="`Live view of ${camera.name || 'camera'}`"
+      allowfullscreen
+      referrerpolicy="no-referrer"
+      @load="onPlayerLoad"
+    />
+
+    <!--
+      A tile with nothing to show says so across the whole tile, not in a
+      corner. At nine tiles a supervisor is scanning, and a one-line reason
+      tucked under a black rectangle is exactly the thing that gets missed.
+    -->
+    <div v-if="view.detail" class="vms-tile__overlay">
+      <p class="vms-tile__reason">{{ view.detail }}</p>
+    </div>
+
+    <!-- Chrome sits OVER the picture, never around it. -->
+    <div v-if="camera" class="vms-tile__status">
+      <span class="vms-tile__dot" :class="`vms-tile__dot--${view.state}`" />
+      <!--
+        At nine tiles the badge is the DOT ALONE: a status word beside a 6 px
+        dot on a small tile is unreadable at the distance a wall is scanned
+        from, and the dot is what is being read anyway. The word returns at
+        four tiles and one.
+      -->
+      <span v-if="!dense" class="vms-tile__state">{{ view.label }}</span>
+    </div>
+
+    <div v-if="camera" class="vms-tile__chrome">
+      <!-- The NAME wins the fight for room: it is the tile's entire job. -->
+      <span class="vms-tile__name">{{ camera.name || camera._id }}</span>
+    </div>
+
+    <button
+      v-if="camera"
+      type="button"
+      class="vms-tile__expand"
+      title="Fill the screen with this camera"
+      aria-label="Fill the screen with this camera"
+      @click.stop="toggleFullscreen()"
+    >
+      <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
+        <path
+          d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="square"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+
+import {
+  LIVE_CONNECT_TIMEOUT_MS,
+  tileView,
+  type TPlayerState,
+  type TWallCamera,
+} from "../utils/camera-wall";
+
+/**
+ * ONE TILE OF THE CAMERA WALL.
+ *
+ * Everything this component decides comes from `utils/camera-wall.ts`; what is
+ * left here is the picture, the chrome over it, and the one thing only a
+ * browser can know — whether the player page ever loaded.
+ *
+ * ## The ceiling worth knowing before "improving" the live badge
+ *
+ * We can tell when the player PAGE loads. We cannot tell when a FRAME decodes:
+ * the page belongs to the video service, not to us, and learning more would
+ * mean reaching into another origin's document — which is both blocked by the
+ * browser and would break silently the day that page changes. So **"Live" means
+ * the player page is up**. If the service is up and the camera behind it is
+ * dead, the operator sees that service's own empty player, exactly as they do
+ * in the app they use today. Closing that honestly is a change on the video
+ * service's side, not here.
+ */
+
+const props = withDefaults(
+  defineProps<{
+    camera: TWallCamera | null;
+    /** Nine tiles: drop the status word, keep the dot. */
+    dense?: boolean;
+    /** Browser connectivity. One dead tile and a dead browser look identical otherwise. */
+    online?: boolean;
+    focused?: boolean;
+  }>(),
+  { dense: false, online: true, focused: false }
+);
+
+defineEmits<{ (e: "focus", camera: TWallCamera): void }>();
+
+const root = ref<HTMLElement | null>(null);
+const player = ref<TPlayerState>("loading");
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+const view = computed(() =>
+  tileView(props.camera, { online: props.online, player: player.value })
+);
+
+function onPlayerLoad() {
+  player.value = "ready";
+  clearTimer();
+}
+
+function clearTimer() {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+}
+
+/**
+ * Restart the clock whenever the address changes — a tile reused for a
+ * different camera must not inherit the previous one's verdict, in either
+ * direction.
+ */
+watch(
+  () => props.camera?.host,
+  (host) => {
+    clearTimer();
+    player.value = "loading";
+    if (!host) return;
+    timer = setTimeout(() => {
+      if (player.value === "loading") player.value = "timeout";
+    }, LIVE_CONNECT_TIMEOUT_MS);
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(clearTimer);
+
+/** The browser's own fullscreen. Nothing to build, and it survives the F11 key. */
+async function toggleFullscreen() {
+  const el = root.value;
+  if (!el) return;
+  try {
+    if (document.fullscreenElement) await document.exitFullscreen();
+    else await el.requestFullscreen();
+  } catch {
+    // A browser that refuses fullscreen (permissions policy, an iframe, an old
+    // Safari) is not an error worth interrupting a supervisor over — the tile
+    // keeps working exactly as it did.
+  }
+}
+</script>
+
+<style scoped>
+.vms-tile {
+  position: relative;
+  overflow: hidden;
+  background: var(--vms-tile, #101418);
+  border-radius: var(--vms-radius, 3px);
+  outline: none;
+  min-height: 0;
+}
+
+.vms-tile--focused {
+  box-shadow: inset 0 0 0 2px var(--vms-accent, #5b9be0);
+}
+
+.vms-tile:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--vms-accent, #5b9be0);
+}
+
+.vms-tile--empty {
+  background: transparent;
+  border: 1px dashed var(--vms-line, #232b36);
+}
+
+.vms-tile__frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+  background: #000;
+}
+
+.vms-tile__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  background: var(--vms-scrim-solid, rgba(7, 9, 12, 0.82));
+  pointer-events: none;
+}
+
+.vms-tile__reason {
+  margin: 0;
+  text-align: center;
+  color: var(--vms-text-dim, #94a0b0);
+  font-size: 12px;
+  line-height: 16px;
+  max-width: 32ch;
+}
+
+.vms-tile--dense .vms-tile__reason {
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.vms-tile__status {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 6px;
+  border-radius: var(--vms-radius, 3px);
+  background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
+  pointer-events: none;
+}
+
+.vms-tile__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--vms-text-faint, #5c6675);
+  flex: none;
+}
+
+/* State colours only. The chrome itself stays achromatic on purpose. */
+.vms-tile__dot--live {
+  background: #4caf50;
+}
+.vms-tile__dot--connecting {
+  background: #fb8c00;
+}
+.vms-tile__dot--no-signal,
+.vms-tile__dot--offline {
+  background: #e0241c;
+}
+.vms-tile__dot--unavailable {
+  background: var(--vms-text-faint, #5c6675);
+}
+
+.vms-tile__state {
+  color: var(--vms-text, #e8ecf1);
+  font-size: 11px;
+  line-height: 14px;
+  white-space: nowrap;
+}
+
+.vms-tile__chrome {
+  position: absolute;
+  left: 6px;
+  right: 6px;
+  bottom: 5px;
+  display: flex;
+  pointer-events: none;
+}
+
+.vms-tile__name {
+  color: var(--vms-text, #e8ecf1);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: var(--vms-radius, 3px);
+  background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vms-tile--dense .vms-tile__name {
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.vms-tile__expand {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--vms-radius, 3px);
+  background: var(--vms-scrim, rgba(7, 9, 12, 0.62));
+  color: var(--vms-text, #e8ecf1);
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+/* The control is always THERE; it only stops competing with the picture. */
+.vms-tile:hover .vms-tile__expand,
+.vms-tile:focus-within .vms-tile__expand {
+  opacity: 1;
+}
+
+.vms-tile__expand:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--vms-accent, #5b9be0);
+}
+
+/* Fullscreen: the picture takes the whole screen, the chrome stays legible. */
+.vms-tile:fullscreen {
+  border-radius: 0;
+  background: #000;
+}
+</style>

package/components/EntryPassInformation.vue

@@ -168,13 +168,13 @@
       <template v-if="passType === 'HID_QR'">
         <v-alert
           v-if="!hidQrPrinterConfigured"
-          type="warning"
+          type="info"
           variant="tonal"
           density="compact"
           class="mt-3"
-          icon="mdi-printer-alert"
+          icon="mdi-qrcode"
         >
-          No printer is configured on HID settings. QR Pass may not print.
+          HID QR Code will be generated and shown on screen. You can download it after continuing.
         </v-alert>
         <v-alert
           v-else
@@ -184,7 +184,7 @@
           class="mt-3"
           icon="mdi-qrcode-scan"
         >
-          HID QR Code will be generated and printed when you continue.
+          HID QR Code will be generated and shown on screen. Printing is also available.
         </v-alert>
       </template>
     </template>

package/components/HidAccessLogDashboard.vue

@@ -418,8 +418,17 @@ const selectedHistoryRows = computed<AccessRow[]>(() => {
   if (!selectedHistoryRow.value) return [];
 
   const selectedKey = selectedHistoryRow.value.identityKey;
-  const matchedLogs = logs.value.filter((log) => getLogIdentityKey(log) === selectedKey);
-  const matchedLiveLogs = liveAccessLogs.value.filter((log) => getAccessLogIdentityKey(log) === selectedKey);
+  const selectedIdentity = findIdentityByKey(selectedKey);
+  const matchedLogs = logs.value.filter((log) =>
+    selectedIdentity
+      ? accessLogMatchesIdentity(log, selectedIdentity)
+      : getLogIdentityKey(log) === selectedKey,
+  );
+  const matchedLiveLogs = liveAccessLogs.value.filter((log) =>
+    selectedIdentity
+      ? accessLogMatchesIdentity(log, selectedIdentity)
+      : getAccessLogIdentityKey(log) === selectedKey,
+  );
 
   if (!matchedLogs.length && !matchedLiveLogs.length) {
     return rows.value.filter((row) => row.identityKey === selectedKey);
@@ -835,7 +844,7 @@ function getIdentityKey(identity: Record<string, any>) {
   return [
     identity.hidUserId,
     identity.registration,
-    identity.cardNo,
+    identity.cardNo || identity.metadata?.qrCodeValue,
   ].filter(Boolean).join("|");
 }
 
@@ -851,7 +860,7 @@ function getLogIdentityKey(log: Record<string, any>) {
   return [
     identity.hidUserId || lookup.hidUserId || rawLog.user_id || rawLog.userId || rawLog.hidUserId,
     identity.registration || lookup.registration,
-    identity.cardNo || lookup.cardNo || rawLog.card_value || rawLog.cardNo,
+    identity.cardNo || lookup.cardNo || rawLog.card_value || rawLog.cardNo || rawLog.qrcode_value,
   ].filter(Boolean).join("|");
 }
 
@@ -1173,25 +1182,26 @@ function findIdentityForAccessLog(rawLog: Record<string, any>, event: Record<str
   const hidUserId = rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId ?? event.payload?.identity?.hidUserId ?? event.payload?.identityLookup?.hidUserId;
   const registration = rawLog.registration ?? event.payload?.identity?.registration ?? event.payload?.identityLookup?.registration;
   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 (
       (hidUserId !== undefined && hidUserId !== null && String(identity.hidUserId) === String(hidUserId)) ||
       (registration && identity.registration === registration) ||
-      (cardNo && String(identity.cardNo) === String(cardNo))
+      (cardNo && String(identity.cardNo) === String(cardNo)) ||
+      (qrCodeValue && String(identity.metadata?.qrCodeValue || "") === String(qrCodeValue))
     );
   });
 }
 
 function getLatestAccessLogForIdentity(identity: Record<string, any>) {
-  const identityKey = getIdentityKey(identity);
   const accessLogs = [
     ...liveAccessLogs.value,
     ...logs.value.flatMap((event) => getRawAccessLogs(event)),
   ];
 
   return accessLogs
-    .filter((log) => getAccessLogIdentityKey(log) === identityKey)
+    .filter((log) => accessLogMatchesIdentity(log, identity))
     .sort((a, b) => {
       const aTime = parseDate(getAccessLogTime(a, {}))?.getTime() || 0;
       const bTime = parseDate(getAccessLogTime(b, {}))?.getTime() || 0;
@@ -1199,11 +1209,46 @@ function getLatestAccessLogForIdentity(identity: Record<string, any>) {
     })[0];
 }
 
+function toUnknownRecord(value: unknown): Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : {};
+}
+
+function accessLogMatchesIdentity(log: unknown, identity: unknown) {
+  const logRecord = toUnknownRecord(log);
+  const identityRecord = toUnknownRecord(identity);
+  const payload = toUnknownRecord(logRecord.payload);
+  const rawLog = Object.keys(toUnknownRecord(payload.rawAccessLog)).length
+    ? toUnknownRecord(payload.rawAccessLog)
+    : logRecord;
+  const eventIdentity = Object.keys(toUnknownRecord(payload.identity)).length
+    ? toUnknownRecord(payload.identity)
+    : toUnknownRecord(payload.identityLookup);
+  const metadata = toUnknownRecord(identityRecord.metadata);
+  const hidUserId = rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId ?? eventIdentity.hidUserId;
+  const registration = rawLog.registration || eventIdentity.registration;
+  const credential =
+    rawLog.card_value ||
+    rawLog.cardNo ||
+    rawLog.qrcode_value ||
+    rawLog.qrCode ||
+    rawLog.qrcode ||
+    eventIdentity.cardNo;
+  const identityCredential = identityRecord.cardNo || metadata.qrCodeValue;
+
+  return Boolean(
+    (hidUserId !== undefined && hidUserId !== null && String(identityRecord.hidUserId) === String(hidUserId)) ||
+    (registration && identityRecord.registration === registration) ||
+    (credential && identityCredential && String(identityCredential) === String(credential)),
+  );
+}
+
 function getAccessLogIdentityKey(rawLog: Record<string, any>) {
   return [
     rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId,
     rawLog.registration,
-    rawLog.card_value || rawLog.cardNo,
+    rawLog.card_value || rawLog.cardNo || rawLog.qrcode_value,
   ].filter(Boolean).join("|");
 }