From 9ef76a7c26bb6e36a4069a08bbe24b3eaeb1225a Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Tue, 15 Jul 2025 11:52:44 +0200
Subject: [PATCH 1/4] add socketio to app

---
 src/serverCom.ts           |  4 +-
 src/socketManager.ts       | 81 ++++++++++++++++++++++++++++++++++++++
 src/stores/notification.ts |  2 +-
 3 files changed, 84 insertions(+), 3 deletions(-)
 create mode 100644 src/socketManager.ts

diff --git a/src/serverCom.ts b/src/serverCom.ts
index ad4d39f..5b10d28 100644
--- a/src/serverCom.ts
+++ b/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 };
diff --git a/src/socketManager.ts b/src/socketManager.ts
new file mode 100644
index 0000000..85c0c44
--- /dev/null
+++ b/src/socketManager.ts
@@ -0,0 +1,81 @@
+import { Manager, Socket } from "socket.io-client";
+import { refreshToken, url } from "./serverCom";
+import { useNotificationStore } from "./stores/notification";
+
+export enum SocketConnectionTypes {
+  scanner = "/scanner",
+  pscanner = "/public_scanner",
+}
+
+export abstract class SocketManager {
+  private readonly manager = new Manager(url, {
+    reconnection: true,
+    reconnectionDelayMax: 10000,
+  });
+  private readonly connections = new Map<SocketConnectionTypes, Socket>();
+
+  public establishConnection(connection: SocketConnectionTypes) {
+    if (this.connections.has(connection)) return this.connections.get(connection);
+    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", () => {
+      this.establishConnection(connection);
+    });
+    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 getConnection(connection: SocketConnectionTypes) {
+    return this.connections.get(connection);
+  }
+
+  public closeConnection(connection: SocketConnectionTypes) {
+    let socket = this.connections.get(connection);
+    if (socket) {
+      socket.disconnect();
+      this.connections.delete(connection);
+    }
+  }
+
+  private 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");
+    }
+  }
+}
diff --git a/src/stores/notification.ts b/src/stores/notification.ts
index 872b108..0ec8fc0 100644
--- a/src/stores/notification.ts
+++ b/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: () => {
-- 
2.47.3


From ed947e5777d3a02f92da5a7cfe14bb5f88ced082 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Tue, 15 Jul 2025 13:19:59 +0200
Subject: [PATCH 2/4] remodel scan process and visualize external

---
 src/components/Notification.vue               |  7 ++
 src/components/Pagination.vue                 |  2 +-
 src/components/TextCopy.vue                   |  2 +-
 src/components/scanner/ManageScanModal.vue    | 64 +++++++++++++++
 src/components/scanner/Phone.vue              | 80 +++++++++++++++++++
 src/components/{ => scanner}/ScanInput.vue    |  4 +-
 src/components/scanner/ScanQRCodeModal.vue    | 51 ++++++++++++
 src/components/scanner/ScanResultsModal.vue   | 41 ++++++++++
 src/components/scanner/ScanSidebarInfo.vue    | 42 ++++++++++
 .../{CodeDetector.vue => scanner/Scanner.vue} | 20 ++---
 .../search/EquipmentSearchSelect.vue          |  2 +-
 src/components/search/VehicleSearchSelect.vue |  2 +-
 .../search/WearableSearchSelect.vue           |  2 +-
 src/helpers/{codeScanner.ts => scanner.ts}    |  0
 src/stores/admin/scanner.ts                   | 28 +++++++
 src/views/admin/View.vue                      |  6 ++
 .../admin/unit/equipment/CreateEquipment.vue  |  2 +-
 .../admin/unit/equipment/UpdateEquipment.vue  |  2 +-
 .../inspectionPlan/UpdateInspectionPlan.vue   |  2 +-
 .../admin/unit/vehicle/CreateVehicle.vue      |  2 +-
 .../admin/unit/vehicle/UpdateVehicle.vue      |  2 +-
 .../admin/unit/wearable/CreateWearable.vue    |  2 +-
 .../admin/unit/wearable/UpdateWearable.vue    |  2 +-
 23 files changed, 338 insertions(+), 29 deletions(-)
 create mode 100644 src/components/scanner/ManageScanModal.vue
 create mode 100644 src/components/scanner/Phone.vue
 rename src/components/{ => scanner}/ScanInput.vue (94%)
 create mode 100644 src/components/scanner/ScanQRCodeModal.vue
 create mode 100644 src/components/scanner/ScanResultsModal.vue
 create mode 100644 src/components/scanner/ScanSidebarInfo.vue
 rename src/components/{CodeDetector.vue => scanner/Scanner.vue} (76%)
 rename src/helpers/{codeScanner.ts => scanner.ts} (100%)
 create mode 100644 src/stores/admin/scanner.ts

diff --git a/src/components/Notification.vue b/src/components/Notification.vue
index e320e19..d302eef 100644
--- a/src/components/Notification.vue
+++ b/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 {
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
index 9dfd7ae..7e26251 100644
--- a/src/components/Pagination.vue
+++ b/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;
diff --git a/src/components/TextCopy.vue b/src/components/TextCopy.vue
index 7fd8ce7..82438ec 100644
--- a/src/components/TextCopy.vue
+++ b/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"
diff --git a/src/components/scanner/ManageScanModal.vue b/src/components/scanner/ManageScanModal.vue
new file mode 100644
index 0000000..c258b02
--- /dev/null
+++ b/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>
diff --git a/src/components/scanner/Phone.vue b/src/components/scanner/Phone.vue
new file mode 100644
index 0000000..d452adb
--- /dev/null
+++ b/src/components/scanner/Phone.vue
@@ -0,0 +1,80 @@
+<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 />
+    <p>Link zur Scanoberfläche:</p>
+    <div class="flex flex-row gap-4 items-center">
+      <TextCopy :copyText="linkToScan" />
+      <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";
+</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>
diff --git a/src/components/ScanInput.vue b/src/components/scanner/ScanInput.vue
similarity index 94%
rename from src/components/ScanInput.vue
rename to src/components/scanner/ScanInput.vue
index 9c98885..1e1b701 100644
--- a/src/components/ScanInput.vue
+++ b/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;
diff --git a/src/components/scanner/ScanQRCodeModal.vue b/src/components/scanner/ScanQRCodeModal.vue
new file mode 100644
index 0000000..059bec4
--- /dev/null
+++ b/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="linkToScan" />
+  </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>
diff --git a/src/components/scanner/ScanResultsModal.vue b/src/components/scanner/ScanResultsModal.vue
new file mode 100644
index 0000000..3e90b9b
--- /dev/null
+++ b/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>
diff --git a/src/components/scanner/ScanSidebarInfo.vue b/src/components/scanner/ScanSidebarInfo.vue
new file mode 100644
index 0000000..c7344e9
--- /dev/null
+++ b/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>
diff --git a/src/components/CodeDetector.vue b/src/components/scanner/Scanner.vue
similarity index 76%
rename from src/components/CodeDetector.vue
rename to src/components/scanner/Scanner.vue
index d8ca6b8..ee1a51f 100644
--- a/src/components/CodeDetector.vue
+++ b/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);
     },
   },
 });
diff --git a/src/components/search/EquipmentSearchSelect.vue b/src/components/search/EquipmentSearchSelect.vue
index a68cd52..877e338 100644
--- a/src/components/search/EquipmentSearchSelect.vue
+++ b/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);
diff --git a/src/components/search/VehicleSearchSelect.vue b/src/components/search/VehicleSearchSelect.vue
index 293e739..ce1ea2e 100644
--- a/src/components/search/VehicleSearchSelect.vue
+++ b/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);
diff --git a/src/components/search/WearableSearchSelect.vue b/src/components/search/WearableSearchSelect.vue
index e282e72..3c614d3 100644
--- a/src/components/search/WearableSearchSelect.vue
+++ b/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);
diff --git a/src/helpers/codeScanner.ts b/src/helpers/scanner.ts
similarity index 100%
rename from src/helpers/codeScanner.ts
rename to src/helpers/scanner.ts
diff --git a/src/stores/admin/scanner.ts b/src/stores/admin/scanner.ts
new file mode 100644
index 0000000..89d5008
--- /dev/null
+++ b/src/stores/admin/scanner.ts
@@ -0,0 +1,28 @@
+import { defineStore } from "pinia";
+import { v4 as uuid } from "uuid";
+
+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;
+      this.roomId = uuid();
+      this.inUse = true;
+    },
+    endSession() {
+      this.inUse = false;
+      this.roomId = undefined;
+      this.results = [];
+    },
+    removeElementFromResults(el: string) {
+      this.results = this.results.filter((result) => result !== el);
+    },
+  },
+});
diff --git a/src/views/admin/View.vue b/src/views/admin/View.vue
index 92f6466..51f21f2 100644
--- a/src/views/admin/View.vue
+++ b/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(() => {
diff --git a/src/views/admin/unit/equipment/CreateEquipment.vue b/src/views/admin/unit/equipment/CreateEquipment.vue
index 247b3db..2699608 100644
--- a/src/views/admin/unit/equipment/CreateEquipment.vue
+++ b/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>
 
diff --git a/src/views/admin/unit/equipment/UpdateEquipment.vue b/src/views/admin/unit/equipment/UpdateEquipment.vue
index 60c0531..17eff62 100644
--- a/src/views/admin/unit/equipment/UpdateEquipment.vue
+++ b/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>
diff --git a/src/views/admin/unit/inspectionPlan/UpdateInspectionPlan.vue b/src/views/admin/unit/inspectionPlan/UpdateInspectionPlan.vue
index d413aea..7756130 100644
--- a/src/views/admin/unit/inspectionPlan/UpdateInspectionPlan.vue
+++ b/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";
diff --git a/src/views/admin/unit/vehicle/CreateVehicle.vue b/src/views/admin/unit/vehicle/CreateVehicle.vue
index fa4ef2f..b3e9581 100644
--- a/src/views/admin/unit/vehicle/CreateVehicle.vue
+++ b/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">
diff --git a/src/views/admin/unit/vehicle/UpdateVehicle.vue b/src/views/admin/unit/vehicle/UpdateVehicle.vue
index 983c84c..bd0aeba 100644
--- a/src/views/admin/unit/vehicle/UpdateVehicle.vue
+++ b/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>
diff --git a/src/views/admin/unit/wearable/CreateWearable.vue b/src/views/admin/unit/wearable/CreateWearable.vue
index df85b25..c04c8d2 100644
--- a/src/views/admin/unit/wearable/CreateWearable.vue
+++ b/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>
diff --git a/src/views/admin/unit/wearable/UpdateWearable.vue b/src/views/admin/unit/wearable/UpdateWearable.vue
index 2bcccbf..541c69f 100644
--- a/src/views/admin/unit/wearable/UpdateWearable.vue
+++ b/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";
-- 
2.47.3


From 3e47d3ebf6f6e3a80c92cc0f8334e859e056dacd Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Tue, 15 Jul 2025 15:16:18 +0200
Subject: [PATCH 3/4] admin side scan connection

---
 src/enums/socketEnum.ts     |  4 ++++
 src/socketManager.ts        | 30 +++++++++++++++++-------------
 src/stores/admin/scanner.ts | 30 ++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 13 deletions(-)
 create mode 100644 src/enums/socketEnum.ts

diff --git a/src/enums/socketEnum.ts b/src/enums/socketEnum.ts
new file mode 100644
index 0000000..4aed946
--- /dev/null
+++ b/src/enums/socketEnum.ts
@@ -0,0 +1,4 @@
+export enum SocketConnectionTypes {
+  scanner = "/scanner",
+  pscanner = "/public_scanner",
+}
diff --git a/src/socketManager.ts b/src/socketManager.ts
index 85c0c44..772efc6 100644
--- a/src/socketManager.ts
+++ b/src/socketManager.ts
@@ -1,21 +1,24 @@
 import { Manager, Socket } from "socket.io-client";
 import { refreshToken, url } from "./serverCom";
 import { useNotificationStore } from "./stores/notification";
-
-export enum SocketConnectionTypes {
-  scanner = "/scanner",
-  pscanner = "/public_scanner",
-}
+import { SocketConnectionTypes } from "./enums/socketEnum";
 
 export abstract class SocketManager {
-  private readonly manager = new Manager(url, {
+  private static readonly manager = new Manager(url, {
     reconnection: true,
     reconnectionDelayMax: 10000,
   });
-  private readonly connections = new Map<SocketConnectionTypes, Socket>();
+  private static readonly connections = new Map<SocketConnectionTypes, Socket>();
+
+  public static establishConnection(
+    connection: SocketConnectionTypes,
+    restoreAfterDisconnect: boolean = false
+  ): Socket {
+    const existingSocket = this.connections.get(connection);
+    if (existingSocket !== undefined && existingSocket.connected) return existingSocket!;
+
+    existingSocket?.removeAllListeners();
 
-  public establishConnection(connection: SocketConnectionTypes) {
-    if (this.connections.has(connection)) return this.connections.get(connection);
     const notificationStore = useNotificationStore();
     let socket = this.manager.socket(connection, {
       auth: (cb) => {
@@ -29,7 +32,8 @@ export abstract class SocketManager {
       this.socketHandleError(connection, err, true);
     });
     socket.on("disconnect", () => {
-      this.establishConnection(connection);
+      if (restoreAfterDisconnect) this.establishConnection(connection);
+      else notificationStore.push("Socket", `Verbindung getrennt`, "info");
     });
     socket.on("warning", (msg: string) => {
       notificationStore.push("Socket-Warnung", msg, "warning");
@@ -45,11 +49,11 @@ export abstract class SocketManager {
     return socket;
   }
 
-  public getConnection(connection: SocketConnectionTypes) {
+  public static getConnection(connection: SocketConnectionTypes) {
     return this.connections.get(connection);
   }
 
-  public closeConnection(connection: SocketConnectionTypes) {
+  public static closeConnection(connection: SocketConnectionTypes) {
     let socket = this.connections.get(connection);
     if (socket) {
       socket.disconnect();
@@ -57,7 +61,7 @@ export abstract class SocketManager {
     }
   }
 
-  private socketHandleError(connection: SocketConnectionTypes, err: Error, onConnect = false) {
+  private static socketHandleError(connection: SocketConnectionTypes, err: Error, onConnect = false) {
     const notificationStore = useNotificationStore();
 
     if (err.message == "xhr poll error") {
diff --git a/src/stores/admin/scanner.ts b/src/stores/admin/scanner.ts
index 89d5008..1726a89 100644
--- a/src/stores/admin/scanner.ts
+++ b/src/stores/admin/scanner.ts
@@ -1,5 +1,8 @@
 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: () => {
@@ -13,13 +16,40 @@ export const useScannerStore = defineStore("scanner", {
   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);
-- 
2.47.3


From 304ae1147eb6189b20b780b10e61fe9883ef75d9 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Tue, 15 Jul 2025 16:58:49 +0200
Subject: [PATCH 4/4] send external scans to app

---
 src/components/scanner/Phone.vue            |   7 +-
 src/components/scanner/ScanQRCodeModal.vue  |   2 +-
 src/router/index.ts                         |  18 ++++
 src/socketManager.ts                        |   6 +-
 src/views/public/scanner/RoomSelect.vue     |  67 ++++++++++++
 src/views/public/scanner/Scanner.vue        | 113 ++++++++++++++++++++
 src/views/public/scanner/ScannerRouting.vue |  11 ++
 7 files changed, 219 insertions(+), 5 deletions(-)
 create mode 100644 src/views/public/scanner/RoomSelect.vue
 create mode 100644 src/views/public/scanner/Scanner.vue
 create mode 100644 src/views/public/scanner/ScannerRouting.vue

diff --git a/src/components/scanner/Phone.vue b/src/components/scanner/Phone.vue
index d452adb..e88fcd0 100644
--- a/src/components/scanner/Phone.vue
+++ b/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">
diff --git a/src/components/scanner/ScanQRCodeModal.vue b/src/components/scanner/ScanQRCodeModal.vue
index 059bec4..864136f 100644
--- a/src/components/scanner/ScanQRCodeModal.vue
+++ b/src/components/scanner/ScanQRCodeModal.vue
@@ -7,7 +7,7 @@
 
     <br />
     <img ref="qr" />
-    <TextCopy :copyText="linkToScan" />
+    <TextCopy :copyText="roomId" />
   </div>
 </template>
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 9ed65d6..28c7d8f 100644
--- a/src/router/index.ts
+++ b/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,
+            },
+          ],
+        },
       ],
     },
     {
diff --git a/src/socketManager.ts b/src/socketManager.ts
index 772efc6..f2fd0a3 100644
--- a/src/socketManager.ts
+++ b/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);
     }
diff --git a/src/views/public/scanner/RoomSelect.vue b/src/views/public/scanner/RoomSelect.vue
new file mode 100644
index 0000000..6913c9c
--- /dev/null
+++ b/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>
diff --git a/src/views/public/scanner/Scanner.vue b/src/views/public/scanner/Scanner.vue
new file mode 100644
index 0000000..ab3e71b
--- /dev/null
+++ b/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>
diff --git a/src/views/public/scanner/ScannerRouting.vue b/src/views/public/scanner/ScannerRouting.vue
new file mode 100644
index 0000000..bc8c738
--- /dev/null
+++ b/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>
-- 
2.47.3