From 413b7f6983287cbcb3abe5f682b63844cef557d1 Mon Sep 17 00:00:00 2001
From: Dominik George <dominik.george@teckids.org>
Date: Fri, 24 Jun 2022 23:19:32 +0200
Subject: [PATCH] Generalise QR scanner code
---
aleksis/apps/paweljong/forms.py | 2 +-
.../static/js/paweljong/checkpoint.js | 17 ----------------
.../static/js/paweljong/qrscanner.js | 20 +++++++++++++++++++
.../templates/paweljong/event/checkpoint.html | 2 +-
4 files changed, 22 insertions(+), 19 deletions(-)
create mode 100644 aleksis/apps/paweljong/static/js/paweljong/qrscanner.js
diff --git a/aleksis/apps/paweljong/forms.py b/aleksis/apps/paweljong/forms.py
index 1189c48..c42d5b8 100644
--- a/aleksis/apps/paweljong/forms.py
+++ b/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",
diff --git a/aleksis/apps/paweljong/static/js/paweljong/checkpoint.js b/aleksis/apps/paweljong/static/js/paweljong/checkpoint.js
index db9a7e5..6ca40ad 100644
--- a/aleksis/apps/paweljong/static/js/paweljong/checkpoint.js
+++ b/aleksis/apps/paweljong/static/js/paweljong/checkpoint.js
@@ -1,5 +1,3 @@
-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);
});
diff --git a/aleksis/apps/paweljong/static/js/paweljong/qrscanner.js b/aleksis/apps/paweljong/static/js/paweljong/qrscanner.js
new file mode 100644
index 0000000..85b5e45
--- /dev/null
+++ b/aleksis/apps/paweljong/static/js/paweljong/qrscanner.js
@@ -0,0 +1,20 @@
+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);
+});
diff --git a/aleksis/apps/paweljong/templates/paweljong/event/checkpoint.html b/aleksis/apps/paweljong/templates/paweljong/event/checkpoint.html
index c683717..deef5cc 100644
--- a/aleksis/apps/paweljong/templates/paweljong/event/checkpoint.html
+++ b/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 }}
--
GitLab