Add qr scan to checkin

This commit is contained in:
Tobias 2019-01-16 18:42:40 +13:00
parent adcfa45967
commit c09b926b87
4 changed files with 108 additions and 15 deletions

View file

@ -0,0 +1,24 @@
{% load static %}
<!DOCTYPE html5>
<meta charset="utf-8"/>
<head>
<script type="text/javascript" src="{% static 'js/instascan.min.js' %}"></script>
</head>
<body>
<video id="preview" autoplay style="width: 500px; height: 500px; border: 1px solid green;"></video>
<script type="text/javascript">
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
scanner.addListener('scan', function (content) {
// This should ensure we start with the lca base domain!
window.location.href = content;
});
function startCamera(cameras) { scanner.start(cameras[0]); }
function errorCamera(error) { console.error(e); }
Instascan.Camera.getCameras().then(startCamera).catch(errorCamera);
</script>
</body>

48
static/src/js/instascan.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -3,21 +3,14 @@
{% load i18n %}
{% block body_class %}reviews{% endblock %}
{% block head_title %}Checkin{% endblock head_title %}
{% block extra_head %}<script type="text/javascript" src="{% static 'js/instascan.min.js' %}"></script>{% endblock %}
{% block body_class %}text-primary{% endblock body_class %}
{% block main_class %}container{% endblock main_class %}
{% block body_outer %}
<div class="l-content-page">
<div class="l-content-page--richtext">
<div class="rich-text">
<div class="row">
<div class="col-md-10">
{% block body %}
{% endblock %}
</div>
</div>
</div></div></div>
{% block content %}
{% endblock %}
{% block extra_script %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/r-2.2.0/rg-1.0.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>

View file

@ -6,8 +6,15 @@
{% endblock %}
{% block body %}
<div>
{% block content %}
<div class="my-5 col-12">
<h2>Check-in</h2>
<p>Please scan QR Code or enter it below</p>
<video id="preview"" autoplay style="width: 500px; height: 500px; border: 1px solid green;"></video>
</div>
<div class="my-5 col-12">
<div id="code_div" class="form-group has-feedback has-error">
<label class="control-label" for="bpcode">Boarding Pass Code</label>
<input id="bptext" type="text" class="form-control" id="bpcode" placeholder="Code">
@ -19,6 +26,27 @@
<button id="clear" class="btn btn-danger">Clear</button>
<a type=button" class="btn btn-info pull-right" href="{% url 'regidesk:boarding_overview' %}">Overview</a>
</div>
<script type="text/javascript">
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
scanner.addListener('scan', function (content) {
// This should ensure we start with the lca base domain. However, I don't have the time for this
// considering we have quite a few domains right now.
// We simply validate that the domain ends in an OK format, which isn't ideal but should give us
// enough reassurance for the time being. 2020 Can fix this :P
var checkin_re = new RegExp('\/checkin\/[A-Z0-9]{6}\.png$');
if (checkin_re.test(content)) {
window.location.href = content;
}
});
function startCamera(cameras) { scanner.start(cameras[0]); }
function errorCamera(error) { console.error(e); }
Instascan.Camera.getCameras().then(startCamera).catch(errorCamera);
</script>
<script type="text/javascript">
var code_div = document.getElementById("code_div");
var icon = document.getElementById("input_icon");