src/components/Notification.vue

@@ -20,6 +20,7 @@
           notification.type == 'error' ? 'border border-red-400' : '',
           notification.type == 'warning' ? 'border border-red-400' : '',
           notification.type == 'info' ? 'border border-gray-400' : '',
+          notification.type == 'success' ? 'border border-green-400' : '',
         ]"
       >
         <!-- @mouseover="hovering(notification.id, true)"
@@ -36,6 +37,10 @@
           v-if="notification.type == 'info'"
           class="flex items-center justify-center min-w-12 w-12 h-12 bg-gray-500 rounded-lg text-white p-1"
         />
+        <HandThumbUpIcon
+          v-if="notification.type == 'success'"
+          class="flex items-center justify-center min-w-12 w-12 h-12 bg-green-500 rounded-lg text-white p-1"
+        />
 
         <div class="flex flex-col">
           <span
@@ -44,6 +49,7 @@
               notification.type == 'error' ? 'text-red-500' : '',
               notification.type == 'warning' ? 'text-red-500' : '',
               notification.type == 'info' ? 'text-gray-700' : '',
+              notification.type == 'success' ? 'text-green-700' : '',
             ]"
             >{{ notification.title }}</span
           >
@@ -71,6 +77,7 @@ import {
   ExclamationCircleIcon,
   InformationCircleIcon,
   XMarkIcon,
+  HandThumbUpIcon,
 } from "@heroicons/vue/24/outline";
 
 export interface Props {

src/components/Pagination.vue

@@ -190,7 +190,7 @@ const filterData = (array: Array<any>, searchString: string, start: number, end:
 
 function scanCode() {
   useModalStore().openModal(
-    markRaw(defineAsyncComponent(() => import("@/components/CodeDetector.vue"))),
+    markRaw(defineAsyncComponent(() => import("@/components/scanner/ManageScanModal.vue"))),
     "pagination",
     (result: string) => {
       searchString.value = result;

src/components/TextCopy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex relative">
+  <div class="flex w-full relative">
     <input type="text" :value="copyText" />
     <ClipboardIcon
       class="w-5 h-5 p-2 box-content absolute right-1 top-1/2 -translate-y-1/2 bg-white cursor-pointer"

src/components/scanner/ManageScanModal.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <XMarkIcon class="ml-auto mb-2 w-5 h-5 cursor-pointer" @click="closeModal" />
+    <div class="w-full flex flex-row justify-center items-stretch" :class="{ 'max-md:hidden': activeTab == 'self' }">
+      <div v-for="tab in tabs" :key="tab.type" class="w-1/2 p-0.5 first:pl-0 last:pr-0" @click="activeTab = tab.type">
+        <p
+          :class="[
+            'flex w-full h-full items-center justify-center rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+            activeTab == tab.type
+              ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none'
+              : ' hover:bg-red-200',
+          ]"
+        >
+          {{ tab.title }}
+        </p>
+      </div>
+    </div>
+    <Scanner v-if="activeTab == 'self'" @code="(c) => commit(c)" />
+    <Phone v-else @code="(c) => commit(c)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+import Scanner from "./Scanner.vue";
+import Phone from "./Phone.vue";
+import { useScannerStore } from "../../stores/admin/scanner";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    callback: {
+      type: Function,
+      default: (result: string) => {},
+    },
+  },
+  data() {
+    return {
+      activeTab: "self" as "self" | "phone",
+      tabs: [
+        { type: "self", title: "Scanner" },
+        { type: "phone", title: "Smartphone" },
+      ] as Array<{ type: "self" | "phone"; title: string }>,
+    };
+  },
+  computed: {
+    ...mapState(useScannerStore, ["inUse"]),
+  },
+  mounted() {
+    if (this.inUse) this.activeTab = "phone";
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    commit(code: string) {
+      this.callback(code);
+      this.closeModal();
+    },
+  },
+});
+</script>

src/components/scanner/Phone.vue

@@ -0,0 +1,83 @@
+<template>
+  <div v-if="!inUse" class="relative flex flex-col w-full h-[455px] overflow-hidden">
+    <br />
+    <button primary @click="startSession">Smartphone als Scanner verwenden</button>
+  </div>
+  <div v-else class="relative flex flex-col w-full h-[455px] overflow-hidden">
+    <br />
+
+    <div class="grow flex flex-col gap-2 overflow-y-scroll pr-2">
+      <div
+        v-for="i in results"
+        :key="i"
+        class="h-10 w-full flex justify-center items-center gap-2 py-2 px-4 text-sm font-medium rounded-md text-white bg-primary"
+      >
+        <p class="grow">{{ i }}</p>
+        <TrashIcon class="w-5 h-5 cursor-pointer" @click="() => removeElementFromResults(i)" />
+        <ArrowRightIcon class="w-5 h-5 cursor-pointer" @click="commit(i)" />
+      </div>
+      <p v-if="results.length == 0">Bisher keine Scan-Ergebnisse vorhanden.</p>
+    </div>
+    <br />
+    <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="roomId" />
+      <QrCodeIcon class="h-7 w-7 cursor-pointer" @click="showQRCode = true" />
+    </div>
+
+    <div v-show="showQRCode" class="absolute w-full h-full flex items-center justify-center bg-white/95 p-2">
+      <img ref="qr" />
+      <QrCodeIcon class="absolute bottom-1 right-0 h-7 w-7 cursor-pointer" @click="showQRCode = false" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+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">
+export default defineComponent({
+  emits: ["code"],
+  data() {
+    return {
+      showQRCode: false as boolean,
+    };
+  },
+  computed: {
+    ...mapState(useScannerStore, ["inUse", "roomId", "results"]),
+    linkToScan() {
+      return `${window.location.origin}/public/scanner/${this.roomId}`;
+    },
+  },
+  mounted() {
+    QRCode.toDataURL(this.linkToScan, {
+      width: 300,
+      margin: 2,
+      color: {
+        dark: "#000000",
+        light: "#FFFFFF",
+      },
+      errorCorrectionLevel: "M",
+    })
+      .then((res) => {
+        (this.$refs.qr as HTMLImageElement).src = res;
+      })
+      .catch(() => {});
+  },
+  methods: {
+    ...mapActions(useScannerStore, ["startSession", "endSession", "removeElementFromResults"]),
+    commit(c: string) {
+      this.$emit("code", c);
+    },
+  },
+});
+</script>

src/components/scanner/ScanInput.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { defineComponent, markRaw, defineAsyncComponent } from "vue";
 import { QrCodeIcon } from "@heroicons/vue/24/outline";
-import { useModalStore } from "../stores/modal";
+import { useModalStore } from "../../stores/modal";
 import { mapActions } from "pinia";
 </script>
 
@@ -45,7 +45,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["openModal"]),
     scanCode() {
       this.openModal(
-        markRaw(defineAsyncComponent(() => import("@/components/CodeDetector.vue"))),
+        markRaw(defineAsyncComponent(() => import("@/components/scanner/ManageScanModal.vue"))),
         "codeScanInput",
         (result: string) => {
           (this.$refs.resultInput as HTMLInputElement).value = result;

src/components/scanner/ScanQRCodeModal.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-col items-center w-full md:max-w-md">
+    <div class="w-full flex flex-row items-center justify-between">
+      <p>Link zur Scanoberfläche</p>
+      <XMarkIcon class="w-5 h-5 cursor-pointer" @click="closeModal" />
+    </div>
+
+    <br />
+    <img ref="qr" />
+    <TextCopy :copyText="roomId" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useScannerStore } from "@/stores/admin/scanner";
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+import TextCopy from "../TextCopy.vue";
+import QRCode from "qrcode";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useScannerStore, ["roomId"]),
+    linkToScan() {
+      return `${window.location.origin}/public/scanner/${this.roomId}`;
+    },
+  },
+  mounted() {
+    QRCode.toDataURL(this.linkToScan, {
+      width: 300,
+      margin: 2,
+      color: {
+        dark: "#000000",
+        light: "#FFFFFF",
+      },
+      errorCorrectionLevel: "M",
+    })
+      .then((res) => {
+        (this.$refs.qr as HTMLImageElement).src = res;
+      })
+      .catch(() => {});
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+  },
+});
+</script>

src/components/scanner/ScanResultsModal.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex flex-col items-center w-full md:max-w-md h-[455px] overflow-hidden">
+    <div class="w-full flex flex-row items-center justify-between">
+      <p>Scan-Ergebnisse</p>
+      <XMarkIcon class="w-5 h-5 cursor-pointer" @click="closeModal" />
+    </div>
+
+    <br />
+    <div class="w-full grow flex flex-col gap-2 overflow-y-scroll pr-2">
+      <div
+        v-for="i in results"
+        :key="i"
+        class="h-10 w-full flex justify-center items-center gap-2 py-2 px-4 text-sm font-medium rounded-md text-white bg-primary"
+      >
+        <p class="grow select-text">{{ i }}</p>
+        <TrashIcon class="w-5 h-5 cursor-pointer" @click="() => removeElementFromResults(i)" />
+      </div>
+      <p v-if="results.length == 0">Bisher keine Scan-Ergebnisse vorhanden.</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useScannerStore } from "@/stores/admin/scanner";
+import { TrashIcon, XMarkIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useScannerStore, ["results"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useScannerStore, ["removeElementFromResults"]),
+  },
+});
+</script>

src/components/scanner/ScanSidebarInfo.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="w-full h-fit min-h-fit flex flex-row gap-2 bg-white rounded-lg items-center overflow-hidden p-4">
+    <LinkSlashIcon v-if="connectedDevices == 0" class="w-5 h-5" />
+    <LinkIcon v-else class="w-5 h-5" />
+    <p class="grow">Externer Scanner aktiviert</p>
+    <div title="Link zur Scan-Ansicht" @click="showQRCode">
+      <QrCodeIcon class="w-6 h-6 cursor-pointer" />
+    </div>
+    <div title="Scan-Ergebnisse anzeigen" @click="showResults">
+      <RectangleStackIcon class="w-6 h-6 cursor-pointer" />
+    </div>
+    <div title="Scan-Verbindung beenden" @click="endSession">
+      <NoSymbolIcon class="w-6 h-6 cursor-pointer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useScannerStore } from "../../stores/admin/scanner";
+import { LinkIcon, LinkSlashIcon, NoSymbolIcon, QrCodeIcon, RectangleStackIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "../../stores/modal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useScannerStore, ["inUse", "results", "roomId", "connectedDevices"]),
+  },
+  methods: {
+    ...mapActions(useScannerStore, ["endSession"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    showQRCode() {
+      this.openModal(markRaw(defineAsyncComponent(() => import("@/components/scanner/ScanQRCodeModal.vue"))));
+    },
+    showResults() {
+      this.openModal(markRaw(defineAsyncComponent(() => import("@/components/scanner/ScanResultsModal.vue"))));
+    },
+  },
+});
+</script>

src/components/scanner/Scanner.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="w-full md:max-w-md">
-    <XMarkIcon class="ml-auto mb-2 w-5 h-5 cursor-pointer" @click="closeModal" />
+  <div class="flex flex-col gap-2 w-full min-h-[455px]">
     <qrcode-stream
+      class="grow"
       :constraints="selectedCamera?.constraints"
       :track="trackFunctionOptions[4].value"
       :formats="barcodeFormats"
@@ -23,8 +23,6 @@
 
 <script setup lang="ts">
 import { defineComponent } from "vue";
-import { mapState, mapActions } from "pinia";
-import { useModalStore } from "@/stores/modal";
 import {
   barcodeFormats,
   defaultConstraintOptions,
@@ -32,19 +30,13 @@ import {
   handleScannerError,
   trackFunctionOptions,
   type Camera,
-} from "@/helpers/codeScanner";
+} from "@/helpers/scanner";
 import { QrcodeStream, type DetectedBarcode } from "vue-qrcode-reader";
-import { XMarkIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
 export default defineComponent({
-  props: {
-    callback: {
-      type: Function,
-      default: (result: string) => {},
-    },
-  },
+  emits: ["code"],
   data() {
     return {
       selecteableCameras: defaultConstraintOptions,
@@ -54,7 +46,6 @@ export default defineComponent({
     };
   },
   methods: {
-    ...mapActions(useModalStore, ["closeModal"]),
     async onCameraReady() {
       this.selecteableCameras = await getAvailableCameras();
       if (!this.selectedCamera) {
@@ -69,8 +60,7 @@ export default defineComponent({
       console.log(handleScannerError(err));
     },
     commit() {
-      this.callback(this.detected);
-      this.closeModal();
+      this.$emit("code", this.detected);
     },
   },
 });

src/components/search/EquipmentSearchSelect.vue

@@ -200,7 +200,7 @@ export default defineComponent({
     },
     scanCode() {
       this.openModal(
-        markRaw(defineAsyncComponent(() => import("@/components/CodeDetector.vue"))),
+        markRaw(defineAsyncComponent(() => import("@/components/scanner/ManageScanModal.vue"))),
         "codeScanInput",
         (result: string) => {
           this.getEquipmentFromSearch(result);

src/components/search/VehicleSearchSelect.vue

@@ -200,7 +200,7 @@ export default defineComponent({
     },
     scanCode() {
       this.openModal(
-        markRaw(defineAsyncComponent(() => import("@/components/CodeDetector.vue"))),
+        markRaw(defineAsyncComponent(() => import("@/components/scanner/ManageScanModal.vue"))),
         "codeScanInput",
         (result: string) => {
           this.getVehicleFromSearch(result);

src/components/search/WearableSearchSelect.vue

@@ -200,7 +200,7 @@ export default defineComponent({
     },
     scanCode() {
       this.openModal(
-        markRaw(defineAsyncComponent(() => import("@/components/CodeDetector.vue"))),
+        markRaw(defineAsyncComponent(() => import("@/components/scanner/ManageScanModal.vue"))),
         "codeScanInput",
         (result: string) => {
           this.getWearableFromSearch(result);

src/enums/socketEnum.ts

@@ -0,0 +1,4 @@
+export enum SocketConnectionTypes {
+  scanner = "/scanner",
+  pscanner = "/public_scanner",
+}

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/serverCom.ts

@@ -78,7 +78,7 @@ http.interceptors.response.use(
   }
 );
 
-export async function refreshToken(): Promise<void> {
+async function refreshToken(): Promise<void> {
   return new Promise<void>(async (resolve, reject) => {
     await http
       .post(`/auth/refresh`, {
@@ -135,4 +135,4 @@ async function* streamingFetch(path: string, abort?: AbortController) {
   }
 }
 
-export { http, newEventSource, streamingFetch, host, url };
+export { http, newEventSource, streamingFetch, host, url, refreshToken };

src/socketManager.ts

@@ -0,0 +1,87 @@
+import { Manager, Socket } from "socket.io-client";
+import { refreshToken, url } from "./serverCom";
+import { useNotificationStore } from "./stores/notification";
+import { SocketConnectionTypes } from "./enums/socketEnum";
+
+export abstract class SocketManager {
+  private static readonly manager = new Manager(url, {
+    reconnection: true,
+    reconnectionDelayMax: 10000,
+  });
+  private static readonly connections = new Map<SocketConnectionTypes, Socket>();
+
+  public static establishConnection(
+    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();
+    let socket = this.manager.socket(connection, {
+      auth: (cb) => {
+        cb({ token: localStorage.getItem("accessToken") });
+      },
+    });
+    socket.on("connect", () => {
+      notificationStore.push("Socket-Erfolg", `Verbindung aufgebaut`, "success");
+    });
+    socket.on("connect_error", (err) => {
+      this.socketHandleError(connection, err, true);
+    });
+    socket.on("disconnect", () => {
+      if (restoreAfterDisconnect) this.establishConnection(connection, restoreAfterDisconnect);
+      else notificationStore.push("Socket", `Verbindung getrennt`, "info");
+    });
+    socket.on("warning", (msg: string) => {
+      notificationStore.push("Socket-Warnung", msg, "warning");
+    });
+    socket.on("error", (msg: string) => {
+      this.socketHandleError(connection, {
+        name: "Error",
+        message: msg,
+      });
+    });
+
+    this.connections.set(connection, socket);
+    return socket;
+  }
+
+  public static getConnection(connection: SocketConnectionTypes) {
+    return this.connections.get(connection);
+  }
+
+  public static closeConnection(connection: SocketConnectionTypes) {
+    let socket = this.connections.get(connection);
+    if (socket) {
+      socket.removeAllListeners();
+      socket.disconnect();
+      this.connections.delete(connection);
+    }
+  }
+
+  private static socketHandleError(connection: SocketConnectionTypes, err: Error, onConnect = false) {
+    const notificationStore = useNotificationStore();
+
+    if (err.message == "xhr poll error") {
+      notificationStore.push("Socket-Netzwerk-Fehler", "Reconnect Versuch in 10s", "error");
+    } else if (err.message == "Token expired") {
+      notificationStore.push("Session", "Session wird verlängert", "info");
+      refreshToken()
+        .then(() => {
+          notificationStore.push("Session", "Session erfolgreich verlängert", "success");
+          this.closeConnection(connection);
+        })
+        .catch(() => {
+          notificationStore.push("Session-Fehler", "Anmeldung wurde nicht verlängert", "error");
+        });
+    } else if (onConnect) {
+      notificationStore.push("Socket-Fehler", `Verbindung fehlgeschlagen`, "error");
+    } else {
+      notificationStore.push("Socket-Fehler", err.message, "error");
+    }
+  }
+}

src/stores/admin/scanner.ts

@@ -0,0 +1,58 @@
+import { defineStore } from "pinia";
+import { v4 as uuid } from "uuid";
+import { SocketManager } from "../../socketManager";
+import { SocketConnectionTypes } from "../../enums/socketEnum";
+import { useNotificationStore } from "../notification";
+
+export const useScannerStore = defineStore("scanner", {
+  state: () => {
+    return {
+      inUse: false as boolean,
+      roomId: undefined as undefined | string,
+      results: [] as Array<string>,
+      connectedDevices: 0 as number,
+    };
+  },
+  actions: {
+    startSession() {
+      if (this.inUse) return;
+
+      const notificationStore = useNotificationStore();
+
+      this.roomId = uuid();
+      this.inUse = true;
+      let connection = SocketManager.establishConnection(SocketConnectionTypes.scanner);
+      connection.on("connect", () => {
+        SocketManager.getConnection(SocketConnectionTypes.scanner)?.emit("session:create", this.roomId);
+      });
+      connection.on("status-session:create", () => {
+        notificationStore.push("Socket-Erfolg", `Scan-Session gestartet`, "success");
+      });
+      connection.on("status-session:close", () => {
+        notificationStore.push("Socket", `Scan-Session beendet`, "info");
+        SocketManager.getConnection(SocketConnectionTypes.scanner)?.disconnect();
+      });
+      connection.on("package-scanner_join", (socketId: string) => {
+        this.connectedDevices++;
+        notificationStore.push("Scan-Verbindung", `Neuer Scanner verbunden`, "info");
+      });
+      connection.on("package-scanner_leave", (socketId: string) => {
+        this.connectedDevices--;
+        notificationStore.push("Scan-Verbindung", `Scanner getrennt`, "info");
+      });
+      connection.on("package-scan_receive", (result: string) => {
+        this.results.push(result);
+        notificationStore.push("Scan", `Neuen Scan erhalten`, "info");
+      });
+    },
+    endSession() {
+      this.inUse = false;
+      this.roomId = undefined;
+      this.results = [];
+      SocketManager.getConnection(SocketConnectionTypes.scanner)?.emit("session:close");
+    },
+    removeElementFromResults(el: string) {
+      this.results = this.results.filter((result) => result !== el);
+    },
+  },
+});

src/stores/notification.ts

@@ -8,7 +8,7 @@ export interface Notification {
   indicator: boolean;
 }
 
-export type NotificationType = "info" | "warning" | "error";
+export type NotificationType = "info" | "warning" | "error" | "success";
 
 export const useNotificationStore = defineStore("notification", {
   state: () => {

src/views/admin/View.vue

@@ -26,6 +26,9 @@
             <p v-else class="pt-4 border-b border-gray-300">{{ item.title }}</p>
           </div>
         </template>
+        <template #bottomButtons>
+          <ScanSidebarInfo v-if="inUse" />
+        </template>
       </SidebarTemplate>
     </template>
     <template #main>
@@ -43,6 +46,8 @@ import SidebarTemplate from "@/templates/Sidebar.vue";
 import RoutingLink from "@/components/admin/RoutingLink.vue";
 import { useAbilityStore } from "@/stores/ability";
 import { RouterView } from "vue-router";
+import { useScannerStore } from "../../stores/admin/scanner";
+import ScanSidebarInfo from "../../components/scanner/ScanSidebarInfo.vue";
 </script>
 
 <script lang="ts">
@@ -54,6 +59,7 @@ export default defineComponent({
       "activeLink",
       "activeNavigation",
     ]),
+    ...mapState(useScannerStore, ["inUse"]),
   },
   created() {
     useAbilityStore().$subscribe(() => {

src/views/admin/unit/equipment/CreateEquipment.vue

@@ -48,7 +48,7 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
-import ScanInput from "@/components/ScanInput.vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
 import EquipmentTypeSearchSelect from "@/components/search/EquipmentTypeSearchSelect.vue";
 </script>
 

src/views/admin/unit/equipment/UpdateEquipment.vue

@@ -50,7 +50,7 @@ import type {
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
-import ScanInput from "@/components/ScanInput.vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
 import isEqual from "lodash.isequal";
 import cloneDeep from "lodash.clonedeep";
 </script>

src/views/admin/unit/inspectionPlan/UpdateInspectionPlan.vue

@@ -66,7 +66,7 @@ import type {
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
-import ScanInput from "@/components/ScanInput.vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
 import isEqual from "lodash.isequal";
 import cloneDeep from "lodash.clonedeep";
 import InspectionTimeFormatExplainIcon from "@/components/admin/unit/InspectionTimeFormatExplainIcon.vue";

src/views/admin/unit/vehicle/CreateVehicle.vue

@@ -49,7 +49,7 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
 import VehicleTypeSearchSelect from "@/components/search/VehicleTypeSearchSelect.vue";
-import ScanInput from "@/components/ScanInput.vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
 </script>
 
 <script lang="ts">

src/views/admin/unit/vehicle/UpdateVehicle.vue

@@ -52,7 +52,7 @@ import type { UpdateVehicleViewModel, VehicleViewModel } from "@/viewmodels/admi
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
-import ScanInput from "@/components/ScanInput.vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
 import isEqual from "lodash.isequal";
 import cloneDeep from "lodash.clonedeep";
 </script>

src/views/admin/unit/wearable/CreateWearable.vue

@@ -49,7 +49,7 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
-import ScanInput from "@/components/ScanInput.vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
 import MemberSearchSelectSingle from "@/components/search/MemberSearchSelectSingle.vue";
 import WearableTypeSearchSelect from "@/components/search/WearableTypeSearchSelect.vue";
 </script>

src/views/admin/unit/wearable/UpdateWearable.vue

@@ -53,7 +53,7 @@ import type {
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
-import ScanInput from "@/components/ScanInput.vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
 import isEqual from "lodash.isequal";
 import cloneDeep from "lodash.clonedeep";
 import MemberSearchSelectSingle from "@/components/search/MemberSearchSelectSingle.vue";

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>