Conservancy/symposion_app
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change checkin page layout

Browse source
This commit is contained in:
Tobias 2019-01-20 10:14:18 +13:00
parent dd8f33a472
commit ab3878ea9f
1 changed files with 76 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
vendor/regidesk/regidesk/templates/regidesk/ci_landing.html vendored
View file

@ -1,85 +1,95 @@
{% extends "regidesk/base.html" %} {% extends "regidesk/base.html" %}
{% load static %} {% load static %}
{% block header_title %} {% block header_title %}
<h1>Boarding pass lookup</h1> <h1>Boarding pass lookup</h1>
<p>Please scan or enter boarding pass code and click "Look Up"</p> <p>Please scan or enter boarding pass code and click "Look Up"</p>
{% endblock %} {% endblock %}
{% block extra_head %} {% block extra_head %}
<script type="text/javascript" src="{% static 'js/instascan.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/instascan.min.js' %}"></script>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="row">
<div class="my-5 col-12"> <div class="col-12">
<h2>Check-in</h2> <h2>Check-in</h2>
<p>Please scan QR Code or enter it below</p> <p>Please scan QR Code or enter it below</p>
<p><strong id="note"></strong></p>
<video id="preview"" autoplay style="width: 500px; height: 500px; border: 1px solid green;"></video>
</div> </div>
</div>
<div class="my-5 col-12"> <div class="row">
<div id="code_div" class="form-group has-feedback has-error">
<label class="control-label" for="bpcode">Boarding Pass Code</label> <div class="col-6">
<input id="bptext" type="text" class="form-control" id="bpcode" placeholder="Code"> <p><strong id="note"></strong></p>
<span id="input_icon" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> <video id="preview"" autoplay style=" height: 400px;"></video>
<span id="help_ok" class="help-block" style="display: none;">Format appears OK</span> </div>
<span id="help_ur" class="help-block" style="display: block;">Format doesn't match</span>
</div> <div class="col-6">
<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">
<span id="input_icon" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="help_ok" class="help-block" style="display: none;">Format appears OK</span>
<span id="help_ur" class="help-block" style="display: block;">Format doesn't match</span>
</div>
<div>
<button id="bpredir" class="btn btn-primary">Submit</button> <button id="bpredir" class="btn btn-primary">Submit</button>
<button id="clear" class="btn btn-danger">Clear</button> <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> </div>
<div class="py-5">
<a href="{% url 'regidesk:boarding_overview' %}">Overview (Search page)</a>
</div>
</div>
</div>
<script type="text/javascript">
<script type="text/javascript"> let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') }); scanner.addListener('scan', function (content) {
scanner.addListener('scan', function (content) { // This should ensure we start with the lca base domain. However, I don't have the time for this
// 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.
// 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
// 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
// enough reassurance for the time being. 2020 Can fix this :P var checkin_re = new RegExp('[A-Z0-9]{6}');
var checkin_re = new RegExp('[A-Z0-9]{6}'); if (checkin_re.test(content)) {
if (checkin_re.test(content)) { document.getElementById('note').textContent = "Code " + content + " found. Redirecting ...";
document.getElementById('note').textContent = "Code " + content + " found. Redirecting ..."; window.location.href = window.location.href + content;
window.location.href = window.location.href + content; } else {
} else {
document.getElementById('note').textContent = "INVALID code " + content + " found"; document.getElementById('note').textContent = "INVALID code " + content + " found";
} }
}); });
function startCamera(cameras) { scanner.start(cameras[0]); } function startCamera(cameras) { scanner.start(cameras[0]); }
function errorCamera(error) { console.error(e); } function errorCamera(error) { console.error(e); }
Instascan.Camera.getCameras().then(startCamera).catch(errorCamera); Instascan.Camera.getCameras().then(startCamera).catch(errorCamera);
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
var code_div = document.getElementById("code_div"); var code_div = document.getElementById("code_div");
var icon = document.getElementById("input_icon"); var icon = document.getElementById("input_icon");
var tb = document.getElementById("bptext"); var tb = document.getElementById("bptext");
var ok = document.getElementById("help_ok"); var ok = document.getElementById("help_ok");
var unk = document.getElementById("help_ur"); var unk = document.getElementById("help_ur");
var re = new RegExp('^[A-Z0-9]{6}$'); var re = new RegExp('^[A-Z0-9]{6}$');
document.getElementById("bpredir").onclick = function() { document.getElementById("bpredir").onclick = function () {
location.href = tb.value; location.href = tb.value;
}; };
document.getElementById("clear").onclick = function() { document.getElementById("clear").onclick = function () {
tb.value = ""; tb.value = "";
}; };
tb.oninput = function() { tb.oninput = function () {
is_good = re.test(tb.value); is_good = re.test(tb.value);
if (is_good) { if (is_good) {
code_div.className = "form-group has-feedback has-success"; code_div.className = "form-group has-feedback has-success";
icon.className = "glyphicon glyphicon-ok form-control-feedback"; icon.className = "glyphicon glyphicon-ok form-control-feedback";
ok.style.display = "block"; ok.style.display = "block";
unk.style.display = "none"; unk.style.display = "none";
} else { } else {
code_div.className = "form-group has-feedback has-error"; code_div.className = "form-group has-feedback has-error";
icon.className = "glyphicon glyphicon-remove form-control-feedback"; icon.className = "glyphicon glyphicon-remove form-control-feedback";
ok.style.display = "none"; ok.style.display = "none";
unk.style.display = "block"; unk.style.display = "block";
} }
console.log(is_good); console.log(is_good);
}; };
</script> </script>
{% endblock %} {% endblock %}