Generalise QR scanner code

aleksis/apps/paweljong/forms.py

@@ -505,7 +505,7 @@ class PersonGroupFormPerson(forms.Form):
 
 class EventCheckpointForm(forms.Form):
     class Media:
-        js = ("https://unpkg.com/html5-qrcode", "js/paweljong/checkpoint.js")
+        js = ("https://unpkg.com/html5-qrcode", "js/paweljong/qrscanner.js", "js/paweljong/checkpoint.js")
 
     layout = Layout(
         "comment", "use_latlon",

aleksis/apps/paweljong/static/js/paweljong/checkpoint.js

-const scanner = new Html5Qrcode("reader");
-
 function getCheckpointCoords() {
     navigator.geolocation.getCurrentPosition(setCheckpointCoords);
 }
@@ -13,23 +11,8 @@ function setCheckpointCoords(position) {
     }, 3000);
 }
 
-function onScanSuccess(decodedText, decodedResult) {
-    scanner.stop();
-    $("[name='username']").val(decodedText);
-    $("[name='username']").closest("form").submit();
-}
-
-function onScanError(error) {
-    console.warn(`Code scan error: ${error}`);
-}
-
 $(document).ready(function($) {
     if (navigator.geolocation) {
         getCheckpointCoords();
     }
-
-    let cameraConfig = { facingMode: "environment" };
-    let scannerConfig = { fps: 10, qrbox: {width: 250, height: 250} };
-
-    scanner.start(cameraConfig, scannerConfig, onScanSuccess);
 });

aleksis/apps/paweljong/static/js/paweljong/qrscanner.js

+const scannerDivId = "qr-reader";
+const scannerDiv = $("div#" + scannerDivId);
+const scanner = new Html5Qrcode(scannerDivId);
+
+function onScanSuccess(decodedText, decodedResult) {
+    let targetId = scannerDiv.data("target-input");
+    let target = $("[name='" + targetId + "']");
+
+    scanner.stop();
+
+    target.val(decodedText);
+    target.closest("form").submit();
+}
+
+$(document).ready(function($) {
+    let cameraConfig = { facingMode: "environment" };
+    let scannerConfig = { fps: 10, qrbox: {width: 250, height: 250} };
+
+    scanner.start(cameraConfig, scannerConfig, onScanSuccess);
+});

aleksis/apps/paweljong/templates/paweljong/event/checkpoint.html

@@ -16,7 +16,7 @@
     {% include "core/partials/save_button.html" %}
   </form>
 
-  <div id="reader"></div>
+  <div id="qr-reader" data-target-input="username"></div>
 
   {{ form.media.js }}