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

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

@ -1,12 +1,10 @@
<template> <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 /> <br />
<button primary @click="startSession">Smartphone als Scanner verwenden</button> <button primary @click="startSession">Smartphone als Scanner verwenden</button>
</div> </div>
<div v-else class="relative flex flex-col w-full h-[455px] overflow-hidden"> <div v-else class="relative flex flex-col gap-2 w-full h-[500px] overflow-hidden">
<br /> <div class="grow flex flex-col gap-2 overflow-y-scroll pt-1 pr-2">
<div class="grow flex flex-col gap-2 overflow-y-scroll pr-2">
<div <div
v-for="i in results" v-for="i in results"
:key="i" :key="i"
@ -18,13 +16,14 @@
</div> </div>
<p v-if="results.length == 0">Bisher keine Scan-Ergebnisse vorhanden.</p> <p v-if="results.length == 0">Bisher keine Scan-Ergebnisse vorhanden.</p>
</div> </div>
<br /> <div>
<RouterLink :to="{ name: 'public-scanner-select' }" target="_blank" class="text-primary" <RouterLink :to="{ name: 'public-scanner-select' }" target="_blank" class="text-primary">
>Link zur Scanoberfläche:</RouterLink Link zur Scanoberfläche:
> </RouterLink>
<div class="flex flex-row gap-4 items-center"> <div class="flex flex-row gap-4 items-center">
<TextCopy :copyText="roomId" /> <TextCopy :copyText="roomId" />
<QrCodeIcon class="h-7 w-7 cursor-pointer" @click="showQRCode = true" /> <QrCodeIcon class="h-7 w-7 cursor-pointer" @click="showQRCode = true" />
</div>
</div> </div>
<div v-show="showQRCode" class="absolute w-full h-full flex items-center justify-center bg-white/95 p-2"> <div v-show="showQRCode" class="absolute w-full h-full flex items-center justify-center bg-white/95 p-2">

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

@ -1,23 +1,25 @@
<template> <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">
<qrcode-stream <div class="grow w-full overflow-hidden pt-1">
class="grow" <qrcode-stream
:constraints="selectedCamera?.constraints" class="h-full w-full"
:track="trackFunctionOptions[4].value" :constraints="selectedCamera?.constraints"
:formats="barcodeFormats" :track="trackFunctionOptions[4].value"
:paused="paused" :formats="barcodeFormats"
@error="onError" :paused="paused"
@detect="onDetect" @error="onError"
@camera-on="onCameraReady" @detect="onDetect"
/> @camera-on="onCameraReady"
/>
</div>
<select v-model="selectedCamera"> <select v-model="selectedCamera">
<option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option> <option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option>
</select> </select>
<div> <div v-if="useInput">
<label for="manual">Code eingeben</label> <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>
<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="paused = false" :disabled="!paused">weiter scannen</button>
<button primary-outline @click="commit" :disabled="detected == ''">bestätigen</button> <button primary-outline @click="commit" :disabled="detected == ''">bestätigen</button>
</div> </div>

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

@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto"> <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> <div>
<label for="roomId">Scan-Id</label> <label for="roomId">Scan-Id</label>
<input type="text" id="roomId" required /> <input type="text" id="roomId" required />

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

@ -3,19 +3,20 @@
<RouterLink :to="{ name: 'public-scanner-select' }" class="text-primary" @click="leave"> <RouterLink :to="{ name: 'public-scanner-select' }" class="text-primary" @click="leave">
Zurück zur Sessionauswahl Zurück zur Sessionauswahl
</RouterLink> </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" /> <Spinner v-if="selectedCamera == undefined" class="absolute top-3 left-1/2 -translate-y-1/2" />
<qrcode-stream <div class="grow w-full overflow-hidden">
class="grow" <qrcode-stream
:constraints="selectedCamera?.constraints" class="h-full w-full"
:track="trackFunctionOptions[4].value" :constraints="selectedCamera?.constraints"
:formats="barcodeFormats" :track="trackFunctionOptions[4].value"
:paused="paused" :formats="barcodeFormats"
@error="onError" :paused="paused"
@detect="onDetect" @error="onError"
@camera-on="onCameraReady" @detect="onDetect"
/> @camera-on="onCameraReady"
<br /> />
</div>
<select v-model="selectedCamera"> <select v-model="selectedCamera">
<option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option> <option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option>
</select> </select>