27 Jan 2024

1) Library updates - Bootstrap, JWT, WebAuthn, webpush.
2) A couple of general UI updates.
3) QRcode scanner for movement and check pages are now merged into PAGE-qrscan.js.

Author: code-boxx

CB-worker.js

@@ -15,6 +15,7 @@ self.addEventListener("install", evt => {
       "assets/PAGE-import.js",
       "assets/PAGE-items-check.js",
       "assets/PAGE-items.js",
+      "assets/PAGE-login.css",
       "assets/PAGE-login.js",
       "assets/PAGE-move.js",
       "assets/PAGE-nfc.js",
@@ -31,6 +32,7 @@ self.addEventListener("install", evt => {
       "assets/html5-qrcode.min.js",
       "assets/qrcode.min.js",
       "assets/PAGE-qrscan.css",
+      "assets/PAGE-qrscan.js",
       "assets/bootstrap.min.css",
       "assets/bootstrap.min.css.map",
       "assets/favicon.png",

README.md

@@ -7,7 +7,8 @@ Storage Boxx is an open-source PHP Inventory Management System. With a built-in
 2) Create item NFC tags, built-in NFC scanner.
 3) Passwordless login - NFC and Web Authentication (Biometric, PIN, Face Recognition)
 4) Stock level monitoring, push notifications on low stock.
-5) Installable progressive web app.
+5) Batch and expiration tracking.
+6) Installable progressive web app.
 <br><br>
 
 ## :camera: SCREENSHOTS
@@ -27,21 +28,27 @@ Storage Boxx is an open-source PHP Inventory Management System. With a built-in
 3) PHP MYSQL PDO Extension
 4) PHP OPENSSL Extension
 5) At least PHP 8.0
-6) Take note, Weccam, NFC and Passwordless (Web Authentication) support depends on the user's device and browser.
+6) Take note - Webcam, NFC and Passwordless (Web Authentication) support depends on the user's device and browser.
 <br><br>
 
 ## :floppy_disk: INSTALLATION
-1) Just copy/unzip into your `http` folder.
+1) Copy & unzip into your `http` folder.
 2) Access `http://your-site.com/` in your browser and walk through the installer.
 3) If you want, add the [optional AI Assistant](https://github.com/code-boxx/Storage-Boxx-AI) after the installation.
 <br><br>
 
+## :star: SUPPORT
+1) Just give this project a star. That will indirectly drive more traffic a little bit. :wink:
+2) [Sponsor this project](https://github.com/sponsors/code-boxx). Even a small one time amount helps.
+<br><br>
+
 ## :bulb: DOCUMENTATION
 1) [How To Use](https://code-boxx.com/storage-boxx-php-inventory-system/#sec-use)
 2) [FAQ](https://code-boxx.com/core-boxx-php-framework/#sec-faq)
 3) [For The Developers](https://code-boxx.com/storage-boxx-php-inventory-system/#sec-dev)
+<br><br>
 
-## :electric_plug: FRAMEWORKS
+## :electric_plug: CREDITS AND FRAMEWORKS USED
 1) PHP Packages
    - [Core Boxx](https://code-boxx.com/core-boxx-php-framework/)
    - [PHP Web Push](https://github.com/web-push-libs/web-push-php)
@@ -55,10 +62,6 @@ Storage Boxx is an open-source PHP Inventory Management System. With a built-in
    - [csv.js](https://github.com/okfn/csv.js/)
 <br><br>
 
-## :star: SUPPORT
-Like this project? Just give it a star. That will indirectly help grow my blog a little bit. :wink:
-<br><br>
-
 ## :newspaper: LICENSE
 Copyright by Code Boxx
 

assets/PAGE-check.js

@@ -4,7 +4,6 @@ var check = {
   hSKU : null, hBatch : null, // html sku & batch fields
   hnBtn : null, hnStat : null, // html nfc button & status
   sku : null, batch: null, // current item & batch
-  qrscan : null, // qr scanner
   pg : 1, // current page
 
   // (B) INIT
@@ -65,47 +64,13 @@ var check = {
 
   // (C) "SWITCH ON" QR SCANNER
   qron : () => {
-    // (C1) INITIALIZE SCANNER
-    if (check.qrscan==null) {
-      check.qrscan = new Html5QrcodeScanner("qr-cam", { fps: 10, qrbox: 250 });
-      check.qrscan.render((txt, res) => {
-        check.qroff();
-        try {
-          let item = JSON.parse(txt);
-          check.hSKU.value = item.S;
-          check.hBatch.value = item.B;
-          check.pre();
-        } catch (e) {
-          console.error(e);
-          cb.modal("Invalid QR Code", "Failed to parse scanned QR code.");
-        }
-      });
+    if (qrscan.scanner==null) {
+      qrscan.init(check.hSKU, check.hBatch, check.pre);
     }
-
-    // (C2) SHOW SCANNER
-    cb.transit(() => {
-      document.getElementById("qr-wrapA").classList.remove("d-none");
-      window.scrollTo(0, 0);
-    });
-  },
-
-  // (D) "SWITCH OFF" QR SCANNER
-  qroff : () => {
-    // (D1) SEEMINGLY NO SMART WAY TO "STOP SCANNING"
-    let stop = document.getElementById("html5-qrcode-button-camera-stop"),
-        wrap = document.getElementById("qr-wrapA");
-    if (stop != null) {
-      if (stop.style.display!="none") { stop.click(); }
-    }
-
-    // (D2) HIDE SCANNER
-    cb.transit(() => {
-      wrap.classList.add("d-none");
-      window.scrollTo(0, 0);
-    });
+    qrscan.show();
   },
 
-  // (E) CHECK VALID SKU BEFORE LOADING HISTORY LIST
+  // (D) CHECK VALID SKU BEFORE LOADING HISTORY LIST
   pre : () => {
     cb.api({
       mod : "items", act : "check",
@@ -124,7 +89,7 @@ var check = {
     return false;
   },
 
-  // (F) LOAD MOVEMENT HISTORY "MAIN PAGE"
+  // (E) LOAD MOVEMENT HISTORY "MAIN PAGE"
   go : () => cb.load({
     page : "check-main", target : "cb-page-2",
     data : {
@@ -137,7 +102,7 @@ var check = {
     }
   }),
 
-  // (G) SHOW ITEM MOVEMENT HISTORY
+  // (F) SHOW ITEM MOVEMENT HISTORY
   list : () => cb.load({
     page : "check/list", target : "check-list",
     data : {
@@ -147,7 +112,7 @@ var check = {
     }
   }),
 
-  // (H) GO TO PAGE
+  // (G) GO TO PAGE
   //  pg : int, page number
   goToPage : pg => { if (pg!=check.pg) {
     check.pg = pg;

assets/PAGE-login.css

@@ -0,0 +1,10 @@
+:root {
+  --bs-light-rgb: 150,150,150;
+}
+#cb-body {
+  align-items: center;
+}
+#login-r {
+  background-size: contain !important;
+  min-height: 380px;
+}

assets/PAGE-move.js

@@ -5,7 +5,6 @@ var move = {
   hSKU : null, hBatch : null, // sku, batch
   hnBtn : null, hnStat : null, // nfc
   hlQty : null, hlDir : null,  hlSKU : null, hlNote : null, // last entry
-  qrscan : null, // qr scanner
 
   // (B) INIT
   init : () => {
@@ -73,48 +72,16 @@ var move = {
 
   // (C) "SWITCH ON" QR SCANNER
   qron : () => {
-    // (C1) INITIALIZE SCANNER
-    if (move.qrscan==null) {
-      move.qrscan = new Html5QrcodeScanner("qr-cam", { fps: 10, qrbox: 250 });
-      move.qrscan.render((txt, res) => {
-        move.qroff();
-        try {
-          let item = JSON.parse(txt);
-          move.hSKU.value = item.S;
-          move.hBatch.value = item.B;
-          if (move.hForm.checkValidity()) { move.save(); }
-          else { move.hForm.reportValidity(); }
-        } catch (e) {
-          console.error(e);
-          cb.modal("Invalid QR Code", "Failed to parse scanned QR code.");
-        }
+    if (qrscan.scanner==null) {
+      qrscan.init(move.hSKU, move.hBatch, () => {
+        if (move.hForm.checkValidity()) { move.save(); }
+        else { move.hForm.reportValidity(); }
       });
     }
-
-    // (C2) SHOW SCANNER
-    cb.transit(() => {
-      document.getElementById("qr-wrapA").classList.remove("d-none");
-      window.scrollTo(0, 0);
-    });
-  },
-
-  // (D) "SWITCH OFF" QR SCANNER
-  qroff : () => {
-    // (D1) SEEMINGLY NO SMART WAY TO "STOP SCANNING"
-    let stop = document.getElementById("html5-qrcode-button-camera-stop"),
-        wrap = document.getElementById("qr-wrapA");
-    if (stop != null) {
-      if (stop.style.display!="none") { stop.click(); }
-    }
-
-    // (D2) HIDE SCANNER
-    cb.transit(() => {
-      wrap.classList.add("d-none");
-      window.scrollTo(0, 0);
-    });
+    qrscan.show();
   },
 
-  // (E) SAVE MOVEMENT
+  // (D) SAVE MOVEMENT
   save : () => {
     cb.api({
       mod : "move", act : "saveM",

assets/PAGE-qrscan.js

@@ -0,0 +1,57 @@
+var qrscan = {
+  // (A) PROPERTIES
+  scanner : null, // scanner object
+  
+  // (B) INITIALIZE
+  init : (hSKU, hBatch, after) => {
+    // (B1) ATTACH HTML
+    let hScan = document.createElement("div");
+    hScan.id = "qr-wrapA";
+    hScan.className = "d-none tran-zoom bg-dark";
+    hScan.innerHTML = `<div id="qr-wrapB">
+      <h3 class="mb-3 text-white">SCAN QR CODE</h3>
+      <div id="qr-cam" class="bg-light"></div>
+      <button type="button" class="mt-4 btn btn-danger d-flex-inline" onclick="qrscan.hide()">
+        <i class="ico-sm icon-cross"></i> Cancel
+      </button>
+    </div>`;
+    document.body.appendChild(hScan);
+
+    // (B2) CREATE QR SCANNER OBJECT
+    qrscan.scanner = new Html5QrcodeScanner("qr-cam", { fps: 10, qrbox: 250 });
+    qrscan.scanner.render((txt, res) => {
+      qrscan.hide();
+      try {
+        let item = JSON.parse(txt);
+        hSKU.value = item.S;
+        hBatch.value = item.B;
+        after();
+      } catch (e) {
+        console.error(e);
+        cb.modal("Invalid QR Code", "Failed to parse scanned QR code.");
+      }
+    });
+  },
+
+  // (C) SHOW SCANNER
+  show : () => cb.transit(() => {
+    document.getElementById("qr-wrapA").classList.remove("d-none");
+    document.body.classList.add("overflow-hidden");
+  }),
+
+  // (D) HIDE QR SCANNER
+  hide : () => {
+    // (D1) SEEMINGLY NO SMART WAY TO "STOP SCANNING"
+    let stop = document.getElementById("html5-qrcode-button-camera-stop"),
+        wrap = document.getElementById("qr-wrapA");
+    if (stop != null) {
+      if (stop.style.display!="none") { stop.click(); }
+    }
+
+    // (D2) HIDE SCANNER
+    cb.transit(() => {
+      wrap.classList.add("d-none");
+      document.body.classList.remove("overflow-hidden");
+    });
+  }
+};