remodel scan process and visualize external

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,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>

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="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>

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/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);
+    },
+  },
+});

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";