From 1211857dabb114948905d141b64e6d18aa4ab6f7 Mon Sep 17 00:00:00 2001
From: Menno <129762469+rcmenno@users.noreply.github.com>
Date: Fri, 17 Nov 2023 18:01:42 +0100
Subject: [PATCH] #5 Wip input from camera

---
 ...eBenificiaryCodeInputMethodPageHandler.js} |  2 +-
 .../FetchEventHandlers/FetchEventHandlers.js  |  6 +-
 ...SelectBenificiaryCodeInputMethodHandler.js | 11 +++
 PWA/public/RouteEvents.js                     |  2 +
 PWA/public/Services/CacheFilePathService.js   |  9 +-
 PWA/public/index.html                         |  2 +-
 PWA/public/input_video.html                   | 83 +++++++++++++++++++
 PWA/public/sw.js                              |  1 +
 ...eBenificiaryCodeInputMethodPageHandler.ts} |  2 +-
 .../FetchEventHandlers/FetchEventHandlers.ts  |  6 +-
 ...SelectBenificiaryCodeInputMethodHandler.ts | 15 ++++
 PWA/src/RouteEvents.ts                        |  2 +
 PWA/src/Services/CacheFilePathService.ts      |  9 +-
 PWA/src/sw.ts                                 |  1 +
 14 files changed, 138 insertions(+), 13 deletions(-)
 rename PWA/public/FetchEventHandlers/{ChooseBenificiaryCodeInputMethodHandler.js => ChooseBenificiaryCodeInputMethodPageHandler.js} (86%)
 create mode 100644 PWA/public/FetchEventHandlers/SelectBenificiaryCodeInputMethodHandler.js
 create mode 100644 PWA/public/input_video.html
 rename PWA/src/FetchEventHandlers/{ChooseBenificiaryCodeInputMethodHandler.ts => ChooseBenificiaryCodeInputMethodPageHandler.ts} (86%)
 create mode 100644 PWA/src/FetchEventHandlers/SelectBenificiaryCodeInputMethodHandler.ts

diff --git a/PWA/public/FetchEventHandlers/ChooseBenificiaryCodeInputMethodHandler.js b/PWA/public/FetchEventHandlers/ChooseBenificiaryCodeInputMethodPageHandler.js
similarity index 86%
rename from PWA/public/FetchEventHandlers/ChooseBenificiaryCodeInputMethodHandler.js
rename to PWA/public/FetchEventHandlers/ChooseBenificiaryCodeInputMethodPageHandler.js
index 0c1fd02..9e3673b 100644
--- a/PWA/public/FetchEventHandlers/ChooseBenificiaryCodeInputMethodHandler.js
+++ b/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);
     }
diff --git a/PWA/public/FetchEventHandlers/FetchEventHandlers.js b/PWA/public/FetchEventHandlers/FetchEventHandlers.js
index 039da3f..af2cc0b 100644
--- a/PWA/public/FetchEventHandlers/FetchEventHandlers.js
+++ b/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) {
diff --git a/PWA/public/FetchEventHandlers/SelectBenificiaryCodeInputMethodHandler.js b/PWA/public/FetchEventHandlers/SelectBenificiaryCodeInputMethodHandler.js
new file mode 100644
index 0000000..22dd247
--- /dev/null
+++ b/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);
+    }
+}
diff --git a/PWA/public/RouteEvents.js b/PWA/public/RouteEvents.js
index 041ce9a..aedc0e5 100644
--- a/PWA/public/RouteEvents.js
+++ b/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 };
diff --git a/PWA/public/Services/CacheFilePathService.js b/PWA/public/Services/CacheFilePathService.js
index 2b1429e..69df049 100644
--- a/PWA/public/Services/CacheFilePathService.js
+++ b/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() {
diff --git a/PWA/public/index.html b/PWA/public/index.html
index 14d5d70..a9ddfef 100644
--- a/PWA/public/index.html
+++ b/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>
diff --git a/PWA/public/input_video.html b/PWA/public/input_video.html
new file mode 100644
index 0000000..e62afc7
--- /dev/null
+++ b/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>
diff --git a/PWA/public/sw.js b/PWA/public/sw.js
index c2bfebe..6fb2d4c 100644
--- a/PWA/public/sw.js
+++ b/PWA/public/sw.js
@@ -11,6 +11,7 @@ self.addEventListener("install", function (event) {
         cache.addAll([
             "/",
             "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css",
+            "https://unpkg.com/@zxing/library@latest/umd/index.min.js",
             "/favicon.ico",
             "/manifest.json",
             "/images/ReliefBox-horizontal-nobackground.png",
diff --git a/PWA/src/FetchEventHandlers/ChooseBenificiaryCodeInputMethodHandler.ts b/PWA/src/FetchEventHandlers/ChooseBenificiaryCodeInputMethodPageHandler.ts
similarity index 86%
rename from PWA/src/FetchEventHandlers/ChooseBenificiaryCodeInputMethodHandler.ts
rename to PWA/src/FetchEventHandlers/ChooseBenificiaryCodeInputMethodPageHandler.ts
index 3abea2e..1e9b6e2 100644
--- a/PWA/src/FetchEventHandlers/ChooseBenificiaryCodeInputMethodHandler.ts
+++ b/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);
     }
diff --git a/PWA/src/FetchEventHandlers/FetchEventHandlers.ts b/PWA/src/FetchEventHandlers/FetchEventHandlers.ts
index 2d33586..6cfaeb1 100644
--- a/PWA/src/FetchEventHandlers/FetchEventHandlers.ts
+++ b/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[] {
diff --git a/PWA/src/FetchEventHandlers/SelectBenificiaryCodeInputMethodHandler.ts b/PWA/src/FetchEventHandlers/SelectBenificiaryCodeInputMethodHandler.ts
new file mode 100644
index 0000000..9b5aa7e
--- /dev/null
+++ b/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)
+    }
+  }
\ No newline at end of file
diff --git a/PWA/src/RouteEvents.ts b/PWA/src/RouteEvents.ts
index b6d351e..3bb4265 100644
--- a/PWA/src/RouteEvents.ts
+++ b/PWA/src/RouteEvents.ts
@@ -8,6 +8,7 @@ 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"
@@ -15,4 +16,5 @@ export class RouteEvents {
     static postDeleteDistribution = "/delete_distrib_confirm"
     static listDistributionsFormAction = "/distrib?"
     static chooseBenificiaryCodeInputMethod = "/choose_input_method?"
+    static selectBenificiaryCodeInputMethod = "/save_input_method"
   }
\ No newline at end of file
diff --git a/PWA/src/Services/CacheFilePathService.ts b/PWA/src/Services/CacheFilePathService.ts
index 3610992..0e89796 100644
--- a/PWA/src/Services/CacheFilePathService.ts
+++ b/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
     ])
   }
 
diff --git a/PWA/src/sw.ts b/PWA/src/sw.ts
index 7cc151c..3890b98 100644
--- a/PWA/src/sw.ts
+++ b/PWA/src/sw.ts
@@ -14,6 +14,7 @@ self.addEventListener("install", function (event: any) {
       cache.addAll([
         "/",
         "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css",
+        "https://unpkg.com/@zxing/library@latest/umd/index.min.js",
         "/favicon.ico",
         "/manifest.json",
         "/images/ReliefBox-horizontal-nobackground.png",