templates/mobile_webpages/scan_qrbill/scan_view.html

   1 [% USE LxERP %]
   2 [% USE L %]
   3 [% USE HTML %]
   4 [% USE P %]
   5 [% USE T8 %]
   6
   7 <div id="main-content">
   8   <div class="container">
   9     <div class="row">
  10
  11       <h4>[% 'Scan swiss QR bill' | $T8 %]</h4>
  12
  13       <div id="QRreader" width="600px"></div>
  14
  15       [% IF developer %]
  16         <p>[% P.M.button_tag("kivi.ScanQRBill.sendTestCode(0);", "sendTestCode 0" ) %]</p>
  17         <p>[% P.M.button_tag("kivi.ScanQRBill.sendTestCode(1);", "sendTestCode 1" ) %]</p>
  18         <p>[% P.M.button_tag("kivi.ScanQRBill.sendTestCode(2);", "sendTestCode 2" ) %]</p>
  19         <p>[% P.M.button_tag("kivi.ScanQRBill.sendTestCode(3);", "sendTestCode 3 XSS" ) %]</p>
  20         <p>[% P.M.button_tag("kivi.ScanQRBill.sendTestCode(4);", "sendTestCode 4 XSS (invalid)" ) %]</p>
  21       [% END %]
  22     </div>
  23   </div>
  24   <hr>
  25 </div>
  26
  27 <div id="qr_code_invalid_modal" class="modal">
  28   <div class="modal-content">
  29     <h4>[% 'QR-Code invalid' | $T8 %]</h4>
  30
  31     <p>[% 'The scanned code is not a valid QR bill.' | $T8 %]</p>
  32     <p>[% 'Error' | $T8 %]: <span id="qr_code_invalid_error"></span></p>
  33
  34   </div>
  35   <div class="modal-footer">
  36     [% P.M.button_tag("startCamera();", LxERP.t8("Try again"), class="modal-close") %]
  37   </div>
  38 </div>
  39
  40 <div id="vendor_not_found_error" class="modal">
  41   <div class="modal-content">
  42     <h4>[% 'Vendor not found' | $T8 %]</h4>
  43
  44     <p>[% 'The vendor could not be found. Please register the vendor with the exact name from the QR bill as shown below.' | $T8 %]</p>
  45     <p>[% 'Vendor Name' | $T8 %]: '<span id="vendor_name"></span>'</p>
  46
  47   </div>
  48   <div class="modal-footer">
  49     [% P.M.button_tag("startCamera();", LxERP.t8("Try again"), class="modal-close") %]
  50   </div>
  51 </div>
  52
  53 <div id="transaction_successful_modal" class="modal">
  54   <div class="modal-content">
  55     <h4>[% 'AP transaction posted successfully' | $T8 %]</h4>
  56
  57     <p>[% 'Invoice number' | $T8 %]: [% invoice_number | html %]</p>
  58   </div>
  59   <div class="modal-footer">
  60     [% P.M.button_tag("", LxERP.t8("Ok"), class="modal-close") %]
  61   </div>
  62 </div>
  63
  64 [% L.hidden_tag("transaction_success", transaction_success) %]
  65
  66 <script>
  67   const html5Qrcode = new Html5Qrcode("QRreader",
  68     { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] });
  69
  70   const startCamera = () => {
  71     html5Qrcode.start({ facingMode: "environment" },
  72       { fps: 10, qrbox: { width: 250, height: 250 } },
  73       kivi.ScanQRBill.onScanSuccess, kivi.ScanQRBill.onScanFailure
  74     );
  75   };
  76
  77   window.onload = () => {
  78     // using $(document).ready didn't work here
  79     //$(document).ready(() => {
  80     if ($('#transaction_success').val() === '1') {
  81       $('#transaction_successful_modal').modal('open');
  82     }
  83
  84     startCamera();
  85   };
  86 </script>