Add qr scan to checkin
This commit is contained in:
parent
adcfa45967
commit
c09b926b87
4 changed files with 108 additions and 15 deletions
24
pinaxcon/templates/test.html
Normal file
24
pinaxcon/templates/test.html
Normal 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
48
static/src/js/instascan.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
@ -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>
|
||||
|
|
|
@ -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");
|
||||
|
|
Loading…
Reference in a new issue