1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
{% extends 'registration/base_simple.html' %}
{% block title %}Admin - Approva documento diretto{% endblock %}
{% block style %}
*{padding:0;margin:0}.wrapper{display:flex;justify-content:center;align-items:center;background-color:#fff}.checkmark__circle{stroke-dasharray: 166;stroke-dashoffset: 166;stroke-width: 2;stroke-miterlimit: 10;stroke: #7ac142;fill: none;animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards}.checkmark{width: 56px;height: 56px;border-radius: 50%;display: block;stroke-width: 2;stroke: #fff;stroke-miterlimit: 10;margin: 0;box-shadow: inset 0px 0px 0px #7ac142;animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both}.checkmark__check{transform-origin: 50% 50%;stroke-dasharray: 48;stroke-dashoffset: 48;animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards}@keyframes stroke{100%{stroke-dashoffset: 0}}@keyframes scale{0%, 100%{transform: none}50%{transform: scale3d(1.1, 1.1, 1)}}@keyframes fill{100%{box-shadow: inset 0px 0px 0px 30px #7ac142}}
{% endblock %}
{% block content %}
<form target="_blank" action="{% url 'docpreview' %}" method="post" id="preview_form">
{% csrf_token %}
<input type="hidden" name="preview" id="code_submit">
</form>
<div class="row">
<div class="col l4 offset-l4 m8 offset-m2 s12">
<div class="card">
{% if success %}
<div class="card-content">
<h5>{{doc.document_type.name}}</h5>
<h6>{{doc.usercode.first_name}} {{doc.usercode.last_name}} ({{doc.usercode.branca}})</h6>
<h6>{{doc.code}}</h6>
<br>
<div class="row">
<div class="col s12">
<h6 class="center">Documento approvato</h6>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="center wrapper">
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
</div>
</div>
</div>
<br>
<div class="row" style="margin-bottom: 0;">
<a class="col s12 waves-effect waves-light btn {{color}}" href="{% url 'approve_direct' %}">Scansiona un nuovo documento</a>
</div>
</div>
{% elif not error%}
<form id="form" action="{% url 'approve_direct'%}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="hidden" name="doc_code" value="{{doc.code}}">
<div class="card-content">
<div class="row">
<h5>{{doc.document_type.name}}</h5>
<h6>{{doc.usercode.first_name}} {{doc.usercode.last_name}} ({{doc.usercode.branca}})</h6>
<h6>{{doc.code}}</h6>
</div>
<div class="hide-on-large-only">
<div class="row">
<a id="send_button_small" class="col s12 waves-effect waves-light btn {{color}}" href="#" onclick="confirm()">Approva</a>
</div>
<div class="row" style="margin-bottom: 0;">
<a class="col s12 waves-effect waves-light btn {{color}}" onclick="send()">Anteprima</a>
</div>
</div>
</div>
<div class="card-action hide-on-med-and-down">
<a id="send_button" class="waves-effect waves-light btn {{color}}" href="#" onclick="confirm()">Approva</a>
<a class="right waves-effect waves-light btn {{color}}" onclick="send()">Anteprima</a>
</div>
</form>
{% else %}
<div class="card-content">
<div id="reader"></div>
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}
{% block script_import %}
<script type="text/javascript" src="https://unpkg.com/html5-qrcode"></script>
{% endblock %}
{% block script %}
document.addEventListener('DOMContentLoaded', function() {
{% if error and error != -1 %}
M.toast({html: '{{ error }}', classes: 'orange'})
{% endif %}
});
function confirm() {
var button = document.getElementById('send_button')
var button_small = document.getElementById('send_button_small')
button.innerHTML = "Sicuro?"
button.setAttribute('onclick', "document.getElementById('form').submit()")
button.setAttribute('class', "waves-effect waves-light btn green")
button_small.innerHTML = "Sicuro?"
button_small.setAttribute('onclick', "document.getElementById('form').submit()")
button_small.setAttribute('class', "col s12 waves-effect waves-light btn green")
}
function send() {
var form = document.getElementById('preview_form')
var action = document.getElementById('code_submit')
action.setAttribute('value', {{doc.code}});
form.submit()
}
{% if error %}
function loadCode(code) {
if (code.substring(0, 4) == 'http') {
code = code.substring(code.length - 6);
console.log(code);
}
var currentUrl = window.location.href;
var currentUrl = currentUrl.split('?')[0];
if (currentUrl[currentUrl.length - 1] == '/') {
currentUrl = currentUrl.substring(0, currentUrl.length - 1);
}
var newUrl = currentUrl + "?code=" + code;
window.location.replace(newUrl);
return;
}
let qrboxFunction = function(viewfinderWidth, viewfinderHeight) {
let minEdgePercentage = 0.7; // 70%
let minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
let qrboxSize = Math.floor(minEdgeSize * minEdgePercentage);
let size = viewfinderWidth * minEdgePercentage;
return {
width: size,
height: size*0.25,
};
}
const html5QrCode = new Html5Qrcode("reader");
html5QrCode.start(
{ facingMode: "environment" },
{
fps: 10,
qrbox: qrboxFunction,
},
(decodedText, decodedResult) => {
loadCode(decodedText);
html5QrCode.stop();
},
(errorMessage) => {}
)
.catch((err) => {
// start failed
console.log(`Error starting. Reason: ${err}`)
M.toast({html: 'Collegamento alla telecamera non riuscito. Riprovare.', classes: 'orange'})
});
{% endif %}
{% endblock %}
|
