Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 13 Pull requests Projects Releases 30 Packages Wiki Activity Actions

fix: camera scaling on scan

Browse source
This commit is contained in:
Julian Krauser 2025-07-26 12:13:21 +02:00
parent 0af32e72ed
commit bd4b08a67d
4 changed files with 41 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/scanner/Phone.vue
View file

@ -1,12 +1,10 @@
<template>
<div v-if="!inUse" class="relative flex flex-col w-full h-[455px] overflow-hidden">
<div v-if="!inUse" class="relative flex flex-col w-full h-[500px] 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-else class="relative flex flex-col gap-2 w-full h-[500px] overflow-hidden">
<div class="grow flex flex-col gap-2 overflow-y-scroll pt-1 pr-2">
<div
v-for="i in results"
:key="i"
@ -18,14 +16,15 @@
</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>
<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>
<div v-show="showQRCode" class="absolute w-full h-full flex items-center justify-center bg-white/95 p-2">
<img ref="qr" />

12
src/components/scanner/Scanner.vue
View file

@ -1,7 +1,8 @@
<template>
<div class="flex flex-col gap-2 w-full min-h-[455px]">
<div class="flex flex-col gap-2 w-full h-[500px] overflow-hidden">
<div class="grow w-full overflow-hidden pt-1">
<qrcode-stream
class="grow"
class="h-full w-full"
:constraints="selectedCamera?.constraints"
:track="trackFunctionOptions[4].value"
:formats="barcodeFormats"
@ -10,14 +11,15 @@
@detect="onDetect"
@camera-on="onCameraReady"
/>
</div>
<select v-model="selectedCamera">
<option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option>
</select>
<div>
<div v-if="useInput">
<label for="manual">Code eingeben</label>
<input v-if="useInput" id="manual" type="text" v-model="detected" />
<input id="manual" type="text" v-model="detected" />
</div>
<div class="flex flex-row justify-end gap-4 py-2">
<div class="flex flex-row justify-end gap-4">
<button primary-outline @click="paused = false" :disabled="!paused">weiter scannen</button>
<button primary-outline @click="commit" :disabled="detected == ''">bestätigen</button>
</div>

2
src/views/public/scanner/RoomSelect.vue
View file

@ -1,6 +1,6 @@
<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">
<form class="flex flex-col gap-4 py-2 w-full max-w-xl px-3 mx-auto" @submit.prevent="checkRoom">
<div>
<label for="roomId">Scan-Id</label>
<input type="text" id="roomId" required />

7
src/views/public/scanner/Scanner.vue
View file

@ -3,10 +3,11 @@
<RouterLink :to="{ name: 'public-scanner-select' }" class="text-primary" @click="leave">
Zurück zur Sessionauswahl
</RouterLink>
<div class="relative flex flex-col gap-2 w-full grow overflow-hidden max-w-md mx-auto">
<div class="relative flex flex-col gap-2 w-full grow overflow-hidden mx-auto">
<Spinner v-if="selectedCamera == undefined" class="absolute top-3 left-1/2 -translate-y-1/2" />
<div class="grow w-full overflow-hidden">
<qrcode-stream
class="grow"
class="h-full w-full"
:constraints="selectedCamera?.constraints"
:track="trackFunctionOptions[4].value"
:formats="barcodeFormats"
@ -15,7 +16,7 @@
@detect="onDetect"
@camera-on="onCameraReady"
/>
<br />
</div>
<select v-model="selectedCamera">
<option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option>
</select>