Berechtigungsschlüssel per QR Code

[JensKriegerJuhnke]

Es wäre wünschenswert, wenn wir Berechtigungsschlüssel für z.B. das Liederbuch per QR aktivieren könnten. Mir schwebt vor, dass man standartmäßig einen Code scannt, aber es eine Option gibt, per Hand einen einzugeben. Vielleicht könnte man https://github.com/silent-dev-team/silentparty-event/blob/main/app/components/Scanner.vue ein wenig umbauen und verwenden?

[Piitschy]

An welcher Stelle soll die Komponente im Projekt und in der UX eingebaut werden?

[JensKriegerJuhnke]

Also mir schwebt vor, dass die Datei pages/misc/settings/keys/add.vue angepasst wird. Ich hab mal ein Mockup gemacht: Die Komponente kann einfach in components/KeyScanner.vue oder so.

[Piitschy]

Hab den PR #3 angenahngen

Hier nochmal die Quick-Infos:

Aktuelle Funktionalität:

• Gescannter QR-Code wird in das Textfeld geschrieben
• Gleicher Code kann nicht direkt neu gescannt werden, damit ein Scan-Loop entsteht
• Validierung erfolgt erst bei "Weiter"
• Settings des Scenners ermöglichen Wahl der Kamera und einen CSS-Flips - für weirde Geräte
• Möglichkeit zum Scan-Icon bis jetzt ungenutzt

TODOS:

• $event.target in setCamera($event.target) innerhalb der KeyScanner.vue möglicherweise nicht vollständig funktionsfähig, da Umbau von <v-select/> auf <select/>
• Positionierung des Settings-BTN bei Modil-Optimalisierung

[Piitschy]

Huch, der PR ist verschwunden. Hier noch ein paar Gedanken dazu:

Einen Loading-State finde ich sehr nice. :)

useLocalStorage ist im Kontext von client side processes relativ riskant, weil das im Betrieb ohne Node Hydretisierungsprobleme machen könnte. Evtl. ist das plain-JS etwas sicherer. Auf welchem Deployment-Server läuft das nachher bei vercel? Wie oft wird dieser Scanner pro Gerät im Laufe des LaJus aufgerufen?

switchToManual ist gerade undefined. Evtl. wäre das als Boolean besser, oder? Dann kann man mit nem Watcher oder einer computed property das $event in contitions benutzen.

Eigentlich brauchen wir auch results nicht mehr, oder? In der Silentparty-App brauchten wir eine History - die wird hier ja nicht mehr benötigt. Das Problem mit Scan-Loops-prevention hast du mit switchToManual nach außen verlegt, was hier - glaube ich auch - viel besser ist. Daher wird die History und Loop-prevention durch results gar nicht mehr benötigt. Für den Fall das die Komponente nochmal wiederverwendet werden könnte, sollten wir die ggf. nicht persistieren 🤔

Es gibt jetzt ein paar unbenutzte Elemente. showSettings wird nicht mehr benutzt und flip kann nicht mehr benutzt werden.

Den neuen Dialog und die UX rund um den Scanner finde ich richtig nice!

EDIT: mir ist gerade aufgefallen, dass Tailwind-Modal keine Testschnittstelle anbietet. Evtl. wäre es daher sinnvoll mit dem Vue-ref Attrebut im HTML <dialog>-Tag statt der CSS-Klasse modal zuarbeiten, um den Kontrollfluss Programmablauf zu halten, anstatt in CSS die gerenderte Sichtbarkeit zu manipulieren.