send external scans to app

src/components/scanner/Phone.vue

@@ -19,9 +19,11 @@
       <p v-if="results.length == 0">Bisher keine Scan-Ergebnisse vorhanden.</p>
     </div>
     <br />
-    <p>Link zur Scanoberfläche:</p>
+    <RouterLink :to="{ name: 'public-scanner-select' }" target="_blank" class="text-primary"
+      >Link zur Scanoberfläche:</RouterLink
+    >
     <div class="flex flex-row gap-4 items-center">
-      <TextCopy :copyText="linkToScan" />
+      <TextCopy :copyText="roomId" />
       <QrCodeIcon class="h-7 w-7 cursor-pointer" @click="showQRCode = true" />
     </div>
 
@@ -39,6 +41,7 @@ import { useScannerStore } from "../../stores/admin/scanner";
 import { ArrowRightIcon, QrCodeIcon, TrashIcon } from "@heroicons/vue/24/outline";
 import TextCopy from "../TextCopy.vue";
 import QRCode from "qrcode";
+import { RouterLink } from "vue-router";
 </script>
 
 <script lang="ts">

src/components/scanner/ScanQRCodeModal.vue

@@ -7,7 +7,7 @@
 
     <br />
     <img ref="qr" />
-    <TextCopy :copyText="linkToScan" />
+    <TextCopy :copyText="roomId" />
   </div>
 </template>
 

src/router/index.ts

@@ -1426,6 +1426,24 @@ const router = createRouter({
           name: "public-calendar-explain",
           component: () => import("@/views/public/calendar/CalendarExplain.vue"),
         },
+        {
+          path: "scanner",
+          name: "public-scanner-routing",
+          component: () => import("@/views/public/scanner/ScannerRouting.vue"),
+          children: [
+            {
+              path: "",
+              name: "public-scanner-select",
+              component: () => import("@/views/public/scanner/RoomSelect.vue"),
+            },
+            {
+              path: ":room",
+              name: "public-scanner-room",
+              component: () => import("@/views/public/scanner/Scanner.vue"),
+              props: true,
+            },
+          ],
+        },
       ],
     },
     {

src/socketManager.ts

@@ -14,9 +14,10 @@ export abstract class SocketManager {
     connection: SocketConnectionTypes,
     restoreAfterDisconnect: boolean = false
   ): Socket {
+    console.log("establish");
     const existingSocket = this.connections.get(connection);
     if (existingSocket !== undefined && existingSocket.connected) return existingSocket!;
-
+    console.log("create");
     existingSocket?.removeAllListeners();
 
     const notificationStore = useNotificationStore();
@@ -32,7 +33,7 @@ export abstract class SocketManager {
       this.socketHandleError(connection, err, true);
     });
     socket.on("disconnect", () => {
-      if (restoreAfterDisconnect) this.establishConnection(connection);
+      if (restoreAfterDisconnect) this.establishConnection(connection, restoreAfterDisconnect);
       else notificationStore.push("Socket", `Verbindung getrennt`, "info");
     });
     socket.on("warning", (msg: string) => {
@@ -56,6 +57,7 @@ export abstract class SocketManager {
   public static closeConnection(connection: SocketConnectionTypes) {
     let socket = this.connections.get(connection);
     if (socket) {
+      socket.removeAllListeners();
       socket.disconnect();
       this.connections.delete(connection);
     }

src/views/public/scanner/RoomSelect.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="checkRoom">
+      <div>
+        <label for="roomId">Scan-Id</label>
+        <input type="text" id="roomId" required />
+      </div>
+      <div class="flex flex-row justify-end gap-2">
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">Zugang prüfen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { SocketConnectionTypes } from "@/enums/socketEnum";
+import { SocketManager } from "@/socketManager";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: null as any,
+    };
+  },
+  mounted() {
+    SocketManager.closeConnection(SocketConnectionTypes.pscanner);
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    checkRoom(e: any) {
+      let formData = e.target.elements;
+      this.$http
+        .post("/public/checkscannerroom", {
+          roomId: formData.roomId.value,
+        })
+        .then((result) => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.$router.push({
+              name: "public-scanner-room",
+              params: {
+                room: formData.roomId.value,
+              },
+            });
+          }, 1500);
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/views/public/scanner/Scanner.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
+    <RouterLink :to="{ name: 'public-scanner-select' }" class="text-primary" @click="leave">
+      Zurück zur Sessionauswahl
+    </RouterLink>
+    <div class="flex flex-col gap-2 w-full grow overflow-hidden max-w-md mx-auto">
+      <qrcode-stream
+        class="grow"
+        :constraints="selectedCamera?.constraints"
+        :track="trackFunctionOptions[4].value"
+        :formats="barcodeFormats"
+        :paused="paused"
+        @error="onError"
+        @detect="onDetect"
+        @camera-on="onCameraReady"
+      />
+      <br />
+      <select v-model="selectedCamera">
+        <option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option>
+      </select>
+      <div class="flex flex-row justify-end gap-4 py-2">
+        <button primary-outline @click="paused = false" :disabled="!paused">weiter scannen</button>
+        <button primary-outline @click="commit">bestätigen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SocketConnectionTypes } from "@/enums/socketEnum";
+import { SocketManager } from "@/socketManager";
+import { useNotificationStore } from "@/stores/notification";
+import { mapActions } from "pinia";
+import { defineComponent } from "vue";
+import {
+  barcodeFormats,
+  defaultConstraintOptions,
+  getAvailableCameras,
+  handleScannerError,
+  trackFunctionOptions,
+  type Camera,
+} from "@/helpers/scanner";
+import { QrcodeStream, type DetectedBarcode } from "vue-qrcode-reader";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    room: String,
+  },
+  data() {
+    return {
+      selecteableCameras: defaultConstraintOptions,
+      selectedCamera: undefined as undefined | Camera,
+      paused: false,
+      detected: "",
+    };
+  },
+  mounted() {
+    let connection = SocketManager.establishConnection(SocketConnectionTypes.pscanner);
+    connection.on("connect", () => {
+      SocketManager.getConnection(SocketConnectionTypes.pscanner)?.emit("session:join", this.room);
+    });
+    connection.on("disconnect", () => {
+      this.$router.push({ name: "public-scanner-select" });
+    });
+    connection.on("status-session:join", (res) => {
+      if (res.status == "success") {
+        this.push("Socket", `Scan-Session beigetreten`, "success");
+      } else {
+        this.push("Socket", `Scan-Session nicht gefunden`, "error");
+        this.$router.push({ name: "public-scanner-select" });
+      }
+    });
+    connection.on("status-session:leave", () => {
+      this.push("Socket", `Scan-Session verlassen`, "info");
+      SocketManager.getConnection(SocketConnectionTypes.pscanner)?.disconnect();
+    });
+    connection.on("status-scan:send", (socketId: string) => {
+      this.push("Scan-Verbindung", `Scan erfolgreich versendet`, "info");
+    });
+    connection.on("package-host_leave", (socketId: string) => {
+      this.push("Scan-Verbindung", `Session durch Host beendet`, "info");
+      SocketManager.getConnection(SocketConnectionTypes.pscanner)?.disconnect();
+    });
+  },
+  methods: {
+    ...mapActions(useNotificationStore, ["push"]),
+    async onCameraReady() {
+      this.selecteableCameras = await getAvailableCameras();
+      if (!this.selectedCamera) {
+        this.selectedCamera = this.selecteableCameras[0];
+      }
+    },
+    leave() {
+      console.log("hi");
+      SocketManager.getConnection(SocketConnectionTypes.pscanner)?.emit("session:leave");
+      SocketManager.closeConnection(SocketConnectionTypes.pscanner);
+    },
+    onDetect(result: Array<DetectedBarcode>) {
+      this.paused = true;
+      this.detected = result.map((r) => r.rawValue)[0];
+    },
+    onError(err: Error) {
+      console.log(handleScannerError(err));
+    },
+    commit() {
+      SocketManager.getConnection(SocketConnectionTypes.pscanner)?.emit("scan:send", this.detected);
+      this.detected = "";
+    },
+  },
+});
+</script>

src/views/public/scanner/ScannerRouting.vue

@@ -0,0 +1,11 @@
+<template>
+  <MainTemplate title="Scanner" :showBack="false">
+    <template #diffMain>
+      <RouterView />
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import MainTemplate from "@/templates/Main.vue";
+</script>