[WIP] Implement barcode scanner for username in checkpoint

aleksis/apps/paweljong/forms.py

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

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

@@ -11,8 +11,22 @@ function setCheckpointCoords(position) {
     }, 3000);
 }
 
+function onScanSuccess(decodedText, decodedResult) {
+    $("[name='username']").val(decodedText);
+    if ($("[name='username']").is(":focus") && $("[name='comment']").val()) {
+        $("[name='username']").closest("form").submit();
+    }
+}
+
+function onScanFailure(error) {
+    alert(`Code scan error: ${error}`);
+}
+
 $(document).ready(function($) {
     if (navigator.geolocation) {
         getCheckpointCoords();
     }
+
+    var scanner = new Html5QrcodeScanner("reader", { fps: 10, qrbox: {width: 250, height: 250} }, false);
+    scanner.render(onScanSuccess, onScanError);
 });

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

@@ -15,6 +15,9 @@
     {% form form=form %}{% form %}
     {% include "core/partials/save_button.html" %}
   </form>
+
+  <div id="reader"></div>
+
   {{ form.media.js }}
 
 {% endblock %}