74 lines
2 KiB
Vue
74 lines
2 KiB
Vue
|
<template>
|
||
|
|
<div class="w-full md:max-w-md">
|
||
|
|
<XMarkIcon class="ml-auto mb-2 w-5 h-5 cursor-pointer" @click="closeModal" />
|
||
|
|
<qrcode-stream
|
||
|
|
: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 { mapState, mapActions } from "pinia";
|
||
|
|
import { useModalStore } from "../stores/modal";
|
||
|
|
import {
|
||
|
|
barcodeFormats,
|
||
|
|
defaultConstraintOptions,
|
||
|
|
getAvailableCameras,
|
||
|
|
handleScannerError,
|
||
|
|
trackFunctionOptions,
|
||
|
|
} from "../helpers/codeScanner";
|
||
|
|
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) => {},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
selecteableCameras: defaultConstraintOptions,
|
||
|
|
selectedCamera: defaultConstraintOptions[0],
|
||
|
|
paused: false,
|
||
|
|
detected: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions(useModalStore, ["closeModal"]),
|
||
|
|
async onCameraReady() {
|
||
|
|
this.selecteableCameras = await getAvailableCameras();
|
||
|
|
},
|
||
|
|
onDetect(result: Array<DetectedBarcode>) {
|
||
|
|
this.paused = true;
|
||
|
|
this.detected = result.map((r) => r.rawValue)[0];
|
||
|
|
},
|
||
|
|
onError(err: Error) {
|
||
|
|
console.log(handleScannerError(err));
|
||
|
|
},
|
||
|
|
commit() {
|
||
|
|
this.callback(this.detected);
|
||
|
|
this.closeModal();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|