#5 Wip input from camera

PWA/public/FetchEventHandlers/ChooseBenificiaryCodeInputMethodHandler.js → PWA/public/FetchEventHandlers/ChooseBenificiaryCodeInputMethodPageHandler.js

@@ -1,6 +1,6 @@
 import { RouteEvents } from "../RouteEvents.js";
 import { ResponseTools } from "../Services/ResponseTools.js";
-export class ChooseBenificiaryCodeInputMethodHandler {
+export class ChooseBenificiaryCodeInputMethodPageHandler {
     canHandleEvent(event) {
         return event.request.url.endsWith(RouteEvents.chooseBenificiaryCodeInputMethod);
     }

PWA/public/FetchEventHandlers/FetchEventHandlers.js

@@ -6,7 +6,8 @@ import { DeleteDistributionRequestHandler } from "./DeleteDistributionRequestHan
 import { UploadDataHandler } from "./UploadDataHandler.js";
 import { BeneficiaryDataUploadHandler } from "./BeneficiaryDataUploadHandler.js";
 import { DeleteDistributionPostHandler } from "./DeleteDistributionPostHandler.js";
-import { ChooseBenificiaryCodeInputMethodHandler } from "./ChooseBenificiaryCodeInputMethodHandler.js";
+import { ChooseBenificiaryCodeInputMethodPageHandler } from "./ChooseBenificiaryCodeInputMethodPageHandler.js";
+import { SelectBenificiaryCodeInputMethodHandler } from "./SelectBenificiaryCodeInputMethodHandler.js";
 export class FetchEventHandlers {
     constructor() {
         this.all = [
@@ -18,7 +19,8 @@ export class FetchEventHandlers {
             new DeleteDistributionPostHandler(),
             new UploadDataHandler(),
             new BeneficiaryDataUploadHandler(),
-            new ChooseBenificiaryCodeInputMethodHandler()
+            new ChooseBenificiaryCodeInputMethodPageHandler(),
+            new SelectBenificiaryCodeInputMethodHandler()
         ];
     }
     handlersForEvent(event) {

PWA/public/FetchEventHandlers/SelectBenificiaryCodeInputMethodHandler.js

@@ -0,0 +1,11 @@
+import { RouteEvents } from "../RouteEvents.js";
+import { ResponseTools } from "../Services/ResponseTools.js";
+export class SelectBenificiaryCodeInputMethodHandler {
+    canHandleEvent(event) {
+        return event.request.url.endsWith(RouteEvents.selectBenificiaryCodeInputMethod);
+    }
+    async handleEvent(event) {
+        //We actually still need to check which one to serve
+        return ResponseTools.wrapInHtmlTemplate(RouteEvents.codeInputUsingCamera);
+    }
+}

PWA/public/RouteEvents.js

@@ -9,10 +9,12 @@ RouteEvents.uploadData = "/upload_data.html";
 RouteEvents.uploadDataError = "/upload_error.html";
 RouteEvents.template = "/template.html";
 RouteEvents.chooseBenificiaryCodeInputMethodPage = "/choose_input_method.html";
+RouteEvents.codeInputUsingCamera = "/input_video.html";
 //Non page route events
 RouteEvents.postCreateDistribution = "/create_distrib";
 RouteEvents.postSelectDistribution = "/select_distrib";
 RouteEvents.postDeleteDistribution = "/delete_distrib_confirm";
 RouteEvents.listDistributionsFormAction = "/distrib?";
 RouteEvents.chooseBenificiaryCodeInputMethod = "/choose_input_method?";
+RouteEvents.selectBenificiaryCodeInputMethod = "/save_input_method";
 export { RouteEvents };

PWA/public/Services/CacheFilePathService.js

@@ -1,10 +1,11 @@
 import { BeneficiaryDataUploadHandler } from "../FetchEventHandlers/BeneficiaryDataUploadHandler.js";
-import { ChooseBenificiaryCodeInputMethodHandler } from "../FetchEventHandlers/ChooseBenificiaryCodeInputMethodHandler.js";
+import { ChooseBenificiaryCodeInputMethodPageHandler } from "../FetchEventHandlers/ChooseBenificiaryCodeInputMethodPageHandler.js";
 import { CreateDistributionRequestHandler } from "../FetchEventHandlers/CreateDistributionRequestHandler.js";
 import { DeleteDistributionPostHandler } from "../FetchEventHandlers/DeleteDistributionPostHandler.js";
 import { FetchEventHandlers } from "../FetchEventHandlers/FetchEventHandlers.js";
 import { ListDistributionRequestHandler } from "../FetchEventHandlers/ListDistributionRequestHandler.js";
 import { NameDistributionRequestHandler } from "../FetchEventHandlers/NameDistributionRequestHandler.js";
+import { SelectBenificiaryCodeInputMethodHandler } from "../FetchEventHandlers/SelectBenificiaryCodeInputMethodHandler.js";
 import { SelectDistributionRequestHandler } from "../FetchEventHandlers/SelectDistributionRequestHandler.js";
 import { UploadDataHandler } from "../FetchEventHandlers/UploadDataHandler.js";
 import { BenificiarySpreadSheetRow } from "../Models/BenificiarySpreadSheetRow.js";
@@ -41,7 +42,8 @@ export class CacheFilePathService {
             RouteEvents.deleteDistribution,
             RouteEvents.uploadData,
             RouteEvents.uploadDataError,
-            RouteEvents.chooseBenificiaryCodeInputMethodPage
+            RouteEvents.chooseBenificiaryCodeInputMethodPage,
+            RouteEvents.codeInputUsingCamera
         ];
     }
     toplevelScriptsPaths() {
@@ -86,7 +88,8 @@ export class CacheFilePathService {
             NameDistributionRequestHandler.name,
             SelectDistributionRequestHandler.name,
             UploadDataHandler.name,
-            ChooseBenificiaryCodeInputMethodHandler.name
+            ChooseBenificiaryCodeInputMethodPageHandler.name,
+            SelectBenificiaryCodeInputMethodHandler.name
         ]);
     }
     interfacesPaths() {

PWA/public/index.html

@@ -39,7 +39,7 @@
       <!--    <a class="navbar-item">-->
       <img src="images/ReliefBox-horizontal-nobackground.png" width="220" height="30">
       <!--    </a>-->
-
+      <div class="navbar-item">Alpha 0.1.1</div>
       <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>

PWA/public/input_video.html

@@ -0,0 +1,83 @@
+<div>
+  <video
+    id="video"
+    width="300"
+    height="200"
+    style="border: 1px solid gray"
+  ></video>
+</div>
+
+<div class="column is-4 is-offset-4">
+  <div class="box">
+    <div id="sourceSelectPanel" style="display: none">
+      <label for="sourceSelect" class="label is-small"
+        >Change video source:</label
+      >
+      <select id="sourceSelect" style="max-width: 400px"></select>
+    </div>
+    <br />
+    <label class="label is-small"
+      >Barcode and QR code formats supported: UPC-A and UPC-E, EAN-8 and EAN-13,
+      Code 39-93-128, ITF, Codabar, RSS-14 (all variants), RSS Expanded (most
+      variants), Data Matrix, Aztec ('beta' quality), PDF 417 ('alpha' quality),
+      MaxiCode.</label
+    >
+  </div>
+</div>
+<label hidden>Result:</label>
+<pre hidden><code id="result"></code></pre>
+
+<script
+  type="text/javascript"
+  src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"
+></script>
+<script type="text/javascript">
+  window.addEventListener("load", function () {
+    let selectedDeviceId;
+    const codeReader = new ZXing.BrowserMultiFormatReader();
+    console.log("ZXing code reader initialized");
+    codeReader
+      .listVideoInputDevices()
+      .then((videoInputDevices) => {
+        const sourceSelect = document.getElementById("sourceSelect");
+        selectedDeviceId = videoInputDevices[0].deviceId;
+        if (videoInputDevices.length >= 1) {
+          videoInputDevices.forEach((element) => {
+            const sourceOption = document.createElement("option");
+            sourceOption.text = element.label;
+            sourceOption.value = element.deviceId;
+            sourceSelect.appendChild(sourceOption);
+          });
+
+          sourceSelect.onchange = () => {
+            selectedDeviceId = sourceSelect.value;
+          };
+
+          const sourceSelectPanel =
+            document.getElementById("sourceSelectPanel");
+          sourceSelectPanel.style.display = "block";
+        }
+
+        codeReader.decodeFromVideoDevice(
+          selectedDeviceId,
+          "video",
+          (result, err) => {
+            if (result) {
+              console.log(result);
+              document.getElementById("result").textContent = result.text;
+              window.location =
+                "https://relief-system-webapp.azurewebsites.net/entry?code=" +
+                result.text;
+            }
+            if (err && !(err instanceof ZXing.NotFoundException)) {
+              console.error(err);
+              document.getElementById("result").textContent = err;
+            }
+          }
+        );
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  });
+</script>

PWA/public/sw.js

@@ -11,6 +11,7 @@ self.addEventListener("install", function (event) {
         cache.addAll([
             "/",
             "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css",
+            "https://unpkg.com/@zxing/library@latest/umd/index.min.js",
             "/favicon.ico",
             "/manifest.json",
             "/images/ReliefBox-horizontal-nobackground.png",

PWA/src/FetchEventHandlers/ChooseBenificiaryCodeInputMethodHandler.ts → PWA/src/FetchEventHandlers/ChooseBenificiaryCodeInputMethodPageHandler.ts

@@ -3,7 +3,7 @@ import { FetchEventHandler } from "../Interfaces/FetchEventHandler.js";
 import { RouteEvents } from "../RouteEvents.js";
 import { ResponseTools } from "../Services/ResponseTools.js";
 
-export class ChooseBenificiaryCodeInputMethodHandler implements FetchEventHandler {
+export class ChooseBenificiaryCodeInputMethodPageHandler implements FetchEventHandler {
     canHandleEvent(event: FetchEvent): boolean {
       return event.request.url.endsWith(RouteEvents.chooseBenificiaryCodeInputMethod);
     }

PWA/src/FetchEventHandlers/FetchEventHandlers.ts

@@ -8,7 +8,8 @@ import { DeleteDistributionRequestHandler } from "./DeleteDistributionRequestHan
 import { UploadDataHandler } from "./UploadDataHandler.js";
 import { BeneficiaryDataUploadHandler } from "./BeneficiaryDataUploadHandler.js"
 import { DeleteDistributionPostHandler } from "./DeleteDistributionPostHandler.js";
-import { ChooseBenificiaryCodeInputMethodHandler } from "./ChooseBenificiaryCodeInputMethodHandler.js";
+import { ChooseBenificiaryCodeInputMethodPageHandler } from "./ChooseBenificiaryCodeInputMethodPageHandler.js";
+import { SelectBenificiaryCodeInputMethodHandler } from "./SelectBenificiaryCodeInputMethodHandler.js";
 
 export class FetchEventHandlers implements FetchEventHandler {
   all: FetchEventHandler[] = [
@@ -20,7 +21,8 @@ export class FetchEventHandlers implements FetchEventHandler {
     new DeleteDistributionPostHandler(),
     new UploadDataHandler(),
     new BeneficiaryDataUploadHandler(),
-    new ChooseBenificiaryCodeInputMethodHandler()
+    new ChooseBenificiaryCodeInputMethodPageHandler(),
+    new SelectBenificiaryCodeInputMethodHandler()
   ];
 
   handlersForEvent(event: FetchEvent): FetchEventHandler[] {

PWA/src/FetchEventHandlers/SelectBenificiaryCodeInputMethodHandler.ts

@@ -0,0 +1,15 @@
+import { FetchEvent } from "../Interfaces/FetchEvent.js";
+import { FetchEventHandler } from "../Interfaces/FetchEventHandler.js";
+import { RouteEvents } from "../RouteEvents.js";
+import { ResponseTools } from "../Services/ResponseTools.js";
+
+export class SelectBenificiaryCodeInputMethodHandler implements FetchEventHandler {
+    canHandleEvent(event: FetchEvent): boolean {
+      return event.request.url.endsWith(RouteEvents.selectBenificiaryCodeInputMethod);
+    }
+
+    async handleEvent(event: FetchEvent): Promise<Response> {
+        //We actually still need to check which one to serve
+        return ResponseTools.wrapInHtmlTemplate(RouteEvents.codeInputUsingCamera)
+    }
+  }

PWA/src/RouteEvents.ts

@@ -8,11 +8,13 @@ export class RouteEvents {
     static uploadDataError = "/upload_error.html"
     static template = "/template.html"
     static chooseBenificiaryCodeInputMethodPage = "/choose_input_method.html"
+    static codeInputUsingCamera = "/input_video.html"
 
     //Non page route events
     static postCreateDistribution = "/create_distrib"
     static postSelectDistribution = "/select_distrib"
     static postDeleteDistribution = "/delete_distrib_confirm"
     static listDistributionsFormAction = "/distrib?"
     static chooseBenificiaryCodeInputMethod = "/choose_input_method?"
+    static selectBenificiaryCodeInputMethod = "/save_input_method"
   }

PWA/src/Services/CacheFilePathService.ts

@@ -1,10 +1,11 @@
 import { BeneficiaryDataUploadHandler } from "../FetchEventHandlers/BeneficiaryDataUploadHandler.js";
-import { ChooseBenificiaryCodeInputMethodHandler } from "../FetchEventHandlers/ChooseBenificiaryCodeInputMethodHandler.js";
+import { ChooseBenificiaryCodeInputMethodPageHandler } from "../FetchEventHandlers/ChooseBenificiaryCodeInputMethodPageHandler.js";
 import { CreateDistributionRequestHandler } from "../FetchEventHandlers/CreateDistributionRequestHandler.js";
 import { DeleteDistributionPostHandler } from "../FetchEventHandlers/DeleteDistributionPostHandler.js";
 import { FetchEventHandlers } from "../FetchEventHandlers/FetchEventHandlers.js";
 import { ListDistributionRequestHandler } from "../FetchEventHandlers/ListDistributionRequestHandler.js";
 import { NameDistributionRequestHandler } from "../FetchEventHandlers/NameDistributionRequestHandler.js";
+import { SelectBenificiaryCodeInputMethodHandler } from "../FetchEventHandlers/SelectBenificiaryCodeInputMethodHandler.js";
 import { SelectDistributionRequestHandler } from "../FetchEventHandlers/SelectDistributionRequestHandler.js";
 import { UploadDataHandler } from "../FetchEventHandlers/UploadDataHandler.js";
 import { BenificiarySpreadSheetRow } from "../Models/BenificiarySpreadSheetRow.js";
@@ -44,7 +45,8 @@ export class CacheFilePathService {
         RouteEvents.deleteDistribution, 
         RouteEvents.uploadData, 
         RouteEvents.uploadDataError,
-        RouteEvents.chooseBenificiaryCodeInputMethodPage
+        RouteEvents.chooseBenificiaryCodeInputMethodPage,
+        RouteEvents.codeInputUsingCamera
       ]
   } 
 
@@ -94,7 +96,8 @@ export class CacheFilePathService {
         NameDistributionRequestHandler.name,
         SelectDistributionRequestHandler.name,
         UploadDataHandler.name,
-        ChooseBenificiaryCodeInputMethodHandler.name
+        ChooseBenificiaryCodeInputMethodPageHandler.name,
+        SelectBenificiaryCodeInputMethodHandler.name
     ])
   }
 

PWA/src/sw.ts

@@ -14,6 +14,7 @@ self.addEventListener("install", function (event: any) {
       cache.addAll([
         "/",
         "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css",
+        "https://unpkg.com/@zxing/library@latest/umd/index.min.js",
         "/favicon.ico",
         "/manifest.json",
         "/images/ReliefBox-horizontal-nobackground.png",