remodel scan process and visualize external
This commit is contained in:
parent
9ef76a7c26
commit
ed947e5777
23 changed files with 338 additions and 29 deletions
64
src/components/scanner/ManageScanModal.vue
Normal file
64
src/components/scanner/ManageScanModal.vue
Normal file
|
|
@ -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>
|
||||
80
src/components/scanner/Phone.vue
Normal file
80
src/components/scanner/Phone.vue
Normal file
|
|
@ -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>
|
||||
57
src/components/scanner/ScanInput.vue
Normal file
57
src/components/scanner/ScanInput.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
<label :for="name">{{ label }}{{ required ? "" : " (optional)" }}</label>
|
||||
<div class="relative flex flex-row items-center gap-2">
|
||||
<input ref="resultInput" class="pl-9!" :id="name" type="text" v-model="value" :required="required" />
|
||||
<QrCodeIcon class="absolute h-6 stroke-1 left-2 top-1/2 -translate-y-1/2 cursor-pointer z-10" @click="scanCode" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, markRaw, defineAsyncComponent } from "vue";
|
||||
import { QrCodeIcon } from "@heroicons/vue/24/outline";
|
||||
import { useModalStore } from "../../stores/modal";
|
||||
import { mapActions } from "pinia";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
label: String,
|
||||
name: String,
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: "",
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value"],
|
||||
computed: {
|
||||
value: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(val: String) {
|
||||
this.$emit("update:model-value", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
scanCode() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/scanner/ManageScanModal.vue"))),
|
||||
"codeScanInput",
|
||||
(result: string) => {
|
||||
(this.$refs.resultInput as HTMLInputElement).value = result;
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
51
src/components/scanner/ScanQRCodeModal.vue
Normal file
51
src/components/scanner/ScanQRCodeModal.vue
Normal file
|
|
@ -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>
|
||||
41
src/components/scanner/ScanResultsModal.vue
Normal file
41
src/components/scanner/ScanResultsModal.vue
Normal file
|
|
@ -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>
|
||||
42
src/components/scanner/ScanSidebarInfo.vue
Normal file
42
src/components/scanner/ScanSidebarInfo.vue
Normal file
|
|
@ -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>
|
||||
67
src/components/scanner/Scanner.vue
Normal file
67
src/components/scanner/Scanner.vue
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<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"
|
||||
: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>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
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({
|
||||
emits: ["code"],
|
||||
data() {
|
||||
return {
|
||||
selecteableCameras: defaultConstraintOptions,
|
||||
selectedCamera: undefined as undefined | Camera,
|
||||
paused: false,
|
||||
detected: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async onCameraReady() {
|
||||
this.selecteableCameras = await getAvailableCameras();
|
||||
if (!this.selectedCamera) {
|
||||
this.selectedCamera = this.selecteableCameras[0];
|
||||
}
|
||||
},
|
||||
onDetect(result: Array<DetectedBarcode>) {
|
||||
this.paused = true;
|
||||
this.detected = result.map((r) => r.rawValue)[0];
|
||||
},
|
||||
onError(err: Error) {
|
||||
console.log(handleScannerError(err));
|
||||
},
|
||||
commit() {
|
||||
this.$emit("code", this.detected);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue