bar code scanner inside direct approve page

6 files changed, 73 insertions, 4 deletions

diff --git a/client/templates/client/approve_doc_pdf.html b/client/templates/client/approve_doc_pdf.html
index 0cf4944..d2ba29b 100644
--- a/client/templates/client/approve_doc_pdf.html
+++ b/client/templates/client/approve_doc_pdf.html
@@ -63,7 +63,7 @@
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/barcodes/JsBarcode.code128.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
 <script type="text/javascript">
-  JsBarcode("#barcode", {{doc.code}}, {width: 3, height: 40, displayValue: false});
+  JsBarcode("#barcode", {{doc.code}}, {width: 4, height: 40, displayValue: false});
   var qrcode = new QRCode(document.getElementById("qrcode"), {
     text: "{{ uri }}",
     width: 128,
diff --git a/server/templates/server/approve_doc_direct.html b/server/templates/server/approve_doc_direct.html
index 2a6710b..a435b5f 100644
--- a/server/templates/server/approve_doc_direct.html
+++ b/server/templates/server/approve_doc_direct.html
@@ -36,6 +36,10 @@
               </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">
@@ -51,7 +55,7 @@
             <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">
+            <div class="row" style="margin-bottom: 0;">
               <a class="col s12 waves-effect waves-light btn {{color}}" onclick="send()">Anteprima</a>
             </div>
           </div>
@@ -63,7 +67,7 @@
       </form>
       {% else %}
       <div class="card-content">
-        {{error}}
+        <div id="reader"></div>
       </div>
       {% endif %}
     </div>
@@ -72,7 +76,17 @@
 
 {% 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')
@@ -90,4 +104,53 @@ function send() {
   action.setAttribute('value', {{doc.code}});
   form.submit()
 }
+
+{% if error %}
+function loadCode(code) {
+  if (code.substring(0, 4) == 'http') {
+    window.location.replace(code);
+    return;
+  }
+
+  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 %}
\ No newline at end of file
diff --git a/server/views.py b/server/views.py
index 2b45caa..56a05ec 100644
--- a/server/views.py
+++ b/server/views.py
@@ -337,6 +337,8 @@ def approve_direct(request):
             doc_code = int(doc_code)

         else:

             doc_code = -1

+    else:

+        return render(request, 'server/approve_doc_direct.html', {"error": -1})

 

     document = Document.objects.filter(code=doc_code)

 

diff --git a/templates/registration/base_admin.html b/templates/registration/base_admin.html
index 0fdaffb..e4ecdf3 100644
--- a/templates/registration/base_admin.html
+++ b/templates/registration/base_admin.html
@@ -142,6 +142,8 @@
   <script type="text/javascript" src="{% static 'jquery-3.5.1.min.js' %}"></script>
   <script type="text/javascript" src="{% static 'materialize.min.js' %}"></script>
   <script type="text/javascript" src="{% static 'lazyload.js' %}"></script>
+  {% block script_import %}
+  {% endblock %}
   <script>
   $(document).ready(function(){
     $('.tooltipped').tooltip();
diff --git a/templates/registration/base_simple.html b/templates/registration/base_simple.html
index 11b71ac..9dc4e35 100644
--- a/templates/registration/base_simple.html
+++ b/templates/registration/base_simple.html
@@ -86,6 +86,8 @@
   {% block footer %}
   {% endblock %}
   <script type="text/javascript" src="{% static 'materialize.min.js' %}"></script>
+  {% block script_import %}
+  {% endblock %}
   <script type="text/javascript">
   {% block script %}
   {% endblock %}
diff --git a/version.txt b/version.txt
index 8d0a3e2..f4190dd 100644
--- a/version.txt
+++ b/version.txt
@@ -1,2 +1,2 @@
 version=0.5
-rev=39
+rev=40