Start shipping documentation bump 0.15.1

PWA/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ReliefBox",
-  "version": "0.12.0",
+  "version": "0.15.1",
   "description": "A tool for managing the distribution of relief items during humanitarian emergencies.",
   "main": "index.js",
   "scripts": {

PWA/public/RouteEvents.js

@@ -17,6 +17,7 @@ RouteEvents.codeInputUsingCamera = "/input_video.html";
 RouteEvents.codeinputUsingTextField = "/input.html";
 RouteEvents.codeInputNotFound = "/entry_not_found.html";
 RouteEvents.codeInputFound = "/entry.html";
+RouteEvents.documentation = "/documentation.html";
 //Non page route events
 RouteEvents.postCreateDistribution = "/create_distrib";
 RouteEvents.postSelectDistribution = "/select_distrib";

PWA/public/Services/CacheFilePathService.js

@@ -33,6 +33,7 @@ import { DownloadSpreadsheetTemplateHandler } from "./FetchEventHandlers/Downloa
 import { DeleteDistributionsConfirmHandler } from "./FetchEventHandlers/DeleteDistributionsConfirmHandler.js";
 import { DistributionResponseProvider } from "./DistributionResponseProvider.js";
 import { DistributionsHandler } from "./FetchEventHandlers/DistributionsHandler.js";
+import { DocumentationPageHandler } from "./FetchEventHandlers/DocumentationPagehandler.js";
 // Provides all the files that have to be cached for offline use
 export class CacheFilePathService {
     pathsOfFilesToCache() {
@@ -67,7 +68,8 @@ export class CacheFilePathService {
             RouteEvents.codeInputNotFound,
             RouteEvents.viewData,
             RouteEvents.noBeneficiariesFound,
-            RouteEvents.confirmDistributionDeletion
+            RouteEvents.confirmDistributionDeletion,
+            RouteEvents.documentation
         ];
     }
     toplevelScriptsPaths() {
@@ -139,7 +141,8 @@ export class CacheFilePathService {
             DownloadDataHandler.name,
             DownloadSpreadsheetTemplateHandler.name,
             DeleteDistributionsConfirmHandler.name,
-            DistributionsHandler.name
+            DistributionsHandler.name,
+            DocumentationPageHandler.name
         ]);
     }
     interfacesPaths() {

PWA/public/Services/FetchEventHandlers/DocumentationPagehandler.js

@@ -0,0 +1,10 @@
+import { RouteEvents } from "../../RouteEvents.js";
+import { ResponseTools } from "../ResponseTools.js";
+export class DocumentationPageHandler {
+    canHandleEvent(event) {
+        return event.request.url.endsWith(RouteEvents.documentation);
+    }
+    async handleEvent(event) {
+        return await ResponseTools.wrapInHtmlTemplate(RouteEvents.documentation);
+    }
+}

PWA/public/Services/FetchEventHandlers/FetchEventHandlers.js

@@ -19,6 +19,7 @@ import { DownloadDataHandler } from "./DownloadDataHandler.js";
 import { DownloadSpreadsheetTemplateHandler } from "./DownloadSpreadsheetTemplateHandler.js";
 import { DeleteDistributionsConfirmHandler } from "./DeleteDistributionsConfirmHandler.js";
 import { DistributionsHandler } from "./DistributionsHandler.js";
+import { DocumentationPageHandler } from "./DocumentationPagehandler.js";
 export class FetchEventHandlers extends ActiveSessionContainer {
     constructor() {
         super(...arguments);
@@ -42,7 +43,8 @@ export class FetchEventHandlers extends ActiveSessionContainer {
             new DownloadDataHandler(this.activeSession),
             new DownloadSpreadsheetTemplateHandler(),
             new DeleteDistributionsConfirmHandler(),
-            new DistributionsHandler()
+            new DistributionsHandler(),
+            new DocumentationPageHandler()
         ];
     }
     handlersForEvent(event) {

PWA/public/Services/FetchEventHandlers/HomepageHandler copy.js

@@ -0,0 +1,17 @@
+import { RouteEvents } from "../../RouteEvents.js";
+import { ResponseTools } from "../ResponseTools.js";
+import { ActiveSessionContainer } from "../ActiveSession.js";
+import { DistributionResponseProvider } from "../DistributionResponseProvider.js";
+export class HomepageHandler extends ActiveSessionContainer {
+    canHandleEvent(event) {
+        return event.request.url.includes(RouteEvents.home);
+    }
+    async handleEvent(event) {
+        if (this.activeSession.nameOfLastViewedDistribution) {
+            return await new DistributionResponseProvider(this.activeSession).responseForDistribution(this.activeSession.nameOfLastViewedDistribution);
+        }
+        else {
+            return await ResponseTools.fetchFromCacheWithRemoteAsFallBack(RouteEvents.home);
+        }
+    }
+}

PWA/public/documentation.html

@@ -0,0 +1,64 @@
+<div class="container has-text-left">
+  <h2 class="is-size-4">Installation for offline use</h2>
+  <h3 class="is-size-6">iOS</h2>
+  <ol>
+    <li>Press the share button (square with arrow pointing outward) at bottom of browser window.</li>
+    <li>Scroll down and press the "Add to Home Screen" button.</li>
+    <li>Tap the Add button on the top right.</li>
+    <li>Open the app once, to make sure it's offline contents are downloaded.</li>
+  </ol>
+  <br>
+  <h3 class="is-size-6">Android</h2>
+    <ol>
+      <li>TODO: write these steps</li>
+    </ol>
+    <br>
+
+  <h2 class="is-size-4">Before the distribution</h2>
+  <ol>
+    <li>
+      Prepare the beneficiary list in 
+      <a href="https://www.microsoft.com/en-us/microsoft-365/excel" target="_blank">Microsoft Excel</a> (.xlsx). 
+      Exports from <a href="https://www.kobotoolbox.org/" target="_blank">KoboToolbox</a>, a mobile data collection software, are natively supported.
+      <ul>
+        <li>The beneficiary list must contain a field/column named “code”, which contains unique values for each beneficiary. In other words, each beneficiary must have a unique code.</li>
+        <li>The beneficiary list can contain any number and type of fields/columns. However, for visualization purposes, it is recommended to keep only the fields/columns needed to identify beneficiaries.</li>
+      </ul>
+    </li>
+    <li>Click “Create a new distribution” and fill in the required details.</li>
+    <li>Click “Add beneficiary data” and upload your beneficiary list.</li>
+    <li>Click “View beneficiary data” and verify that everything looks as expected.</li>
+  </ol>
+
+  <br>
+  <h2 class="is-size-4">During the distribution</h2>
+  <ol>
+    <li>Click “Start distribution”.</li>
+    <li>Select how you will insert the beneficiary codes: with a camera, a barcode scanner or manually.</li>
+    <li>Insert beneficiary code.</li>
+    <li>
+      Verify beneficiary identity.
+      <ul>
+        <li>If identity is verified and the beneficiary receives aid, click “Mark as recipient”.</li>
+        <li>If identity does not correspond, click “Continue distribution”. The beneficiary will not be marked as recipient.</li>
+      </ul>
+    </li>
+    <li>Repeat steps 3-4 until all potential beneficiaries are served.</li>
+    <li>If there are relief items left at the end of the distribution, you can check who did not show up by clicking “Go back to main menu” → “Check who is missing”.</li>
+  </ol>
+
+  <br>
+  <h2 class="is-size-4">After the distribution</h2>
+  <ol>
+    <li>
+      If you need data on the distribution for monitoring and reporting purposes:
+      <ul>
+        <li>Click “Download beneficiary data” to get the beneficiary list in 
+          <a href="https://www.microsoft.com/en-us/microsoft-365/excel" target="_blank">Microsoft Excel</a> (.xlsx). The spreadsheet will contain two additional fields/columns that show, for each beneficiary, if they received aid and when.
+        </li>
+        <li>Store the information safely.</li>
+      </ul>
+    </li>
+    <li>If you need to start a new distribution, click “Change distribution” and repeat all steps above.</li>
+  </ol>
+</div>

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.12.0</div>
+      <div class="navbar-item">Alpha 0.15.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>
@@ -55,7 +55,7 @@
         <a href="/distributions"  class="navbar-item">
           Distributions
         </a>
-        <a href="https://reliefbox.readthedocs.io/" class="navbar-item" target="_blank" rel="noopener noreferrer">
+        <a href="/documentation.html" class="navbar-item">
           Documentation
         </a>
       </div>

PWA/public/template.html

@@ -55,7 +55,7 @@
         <a href="/distributions"  class="navbar-item">
           Distributions
         </a>
-        <a href="https://reliefbox.readthedocs.io/" class="navbar-item" target="_blank" rel="noopener noreferrer">
+        <a href="/documentation.html" class="navbar-item">
           Documentation
         </a>
       </div>

PWA/src/RouteEvents.ts

@@ -16,6 +16,7 @@ export class RouteEvents {
     static codeinputUsingTextField = "/input.html"
     static codeInputNotFound = "/entry_not_found.html"
     static codeInputFound = "/entry.html"
+    static documentation = "/documentation.html"
 
     //Non page route events
     static postCreateDistribution = "/create_distrib"

PWA/src/Services/CacheFilePathService.ts

@@ -33,6 +33,7 @@ import { DownloadSpreadsheetTemplateHandler } from "./FetchEventHandlers/Downloa
 import { DeleteDistributionsConfirmHandler } from "./FetchEventHandlers/DeleteDistributionsConfirmHandler.js";
 import { DistributionResponseProvider } from "./DistributionResponseProvider.js";
 import { DistributionsHandler } from "./FetchEventHandlers/DistributionsHandler.js";
+import { DocumentationPageHandler } from "./FetchEventHandlers/DocumentationPagehandler.js";
 
 // Provides all the files that have to be cached for offline use
 export class CacheFilePathService {
@@ -69,7 +70,8 @@ export class CacheFilePathService {
       RouteEvents.codeInputNotFound,
       RouteEvents.viewData,
       RouteEvents.noBeneficiariesFound,
-      RouteEvents.confirmDistributionDeletion
+      RouteEvents.confirmDistributionDeletion,
+      RouteEvents.documentation
     ];
   }
 
@@ -152,7 +154,8 @@ export class CacheFilePathService {
       DownloadDataHandler.name,
       DownloadSpreadsheetTemplateHandler.name,
       DeleteDistributionsConfirmHandler.name,
-      DistributionsHandler.name
+      DistributionsHandler.name,
+      DocumentationPageHandler.name
     ]);
   }
 

PWA/src/Services/FetchEventHandlers/DocumentationPagehandler.ts

@@ -0,0 +1,14 @@
+import { RouteEvents } from "../../RouteEvents.js";
+import { FetchEvent } from "../../Interfaces/FetchEvent.js";
+import { FetchEventHandler } from "../../Interfaces/FetchEventHandler.js";
+import { ResponseTools } from "../ResponseTools.js";
+
+export class DocumentationPageHandler implements FetchEventHandler {
+  canHandleEvent(event: FetchEvent): boolean {
+    return event.request.url.endsWith(RouteEvents.documentation);
+  }
+
+  async handleEvent(event: FetchEvent): Promise<Response> {
+    return await ResponseTools.wrapInHtmlTemplate(RouteEvents.documentation)
+  }
+}

PWA/src/Services/FetchEventHandlers/FetchEventHandlers.ts

@@ -21,6 +21,7 @@ import { DownloadDataHandler } from "./DownloadDataHandler.js";
 import { DownloadSpreadsheetTemplateHandler } from "./DownloadSpreadsheetTemplateHandler.js";
 import { DeleteDistributionsConfirmHandler } from "./DeleteDistributionsConfirmHandler.js";
 import { DistributionsHandler } from "./DistributionsHandler.js";
+import { DocumentationPageHandler } from "./DocumentationPagehandler.js";
 
 export class FetchEventHandlers extends ActiveSessionContainer implements FetchEventHandler {
   all: FetchEventHandler[] = [
@@ -43,7 +44,8 @@ export class FetchEventHandlers extends ActiveSessionContainer implements FetchE
     new DownloadDataHandler(this.activeSession),
     new DownloadSpreadsheetTemplateHandler(),
     new DeleteDistributionsConfirmHandler(),
-    new DistributionsHandler()
+    new DistributionsHandler(),
+    new DocumentationPageHandler()
   ];
 
   handlersForEvent(event: FetchEvent): FetchEventHandler[] {