More UI / UX updates. Clear datastore.

TODO: PDF-Lib integration

app/api/qSubSection.json

@@ -18,102 +18,41 @@
   "exec": {
     "steps": {
       "name": "query",
-      "module": "dbconnector",
+      "module": "dbupdater",
-      "action": "select",
+      "action": "custom",
       "options": {
         "connection": "DB",
         "sql": {
-          "type": "SELECT",
+          "query": "\nselect *, CAST(numSection AS  INTEGER) as `wNumSection` \nfrom `tblSection` where  isSection = 0 AND wNumSection = ? \n",
-          "distinct": false,
-          "columns": [
-            {
-              "table": "tblSection",
-              "column": "*",
-              "field": "*"
-            }
-          ],
-          "table": {
-            "name": "tblSection"
-          },
-          "joins": [],
-          "orders": [],
           "params": [
             {
-              "operator": "begins_with",
-              "type": "expression",
               "name": ":P1",
               "value": "{{$_GET.subid}}",
-              "test": ""
+              "test": "11"
-            }
-          ],
-          "query": "select * from `tblSection` where `tblSection`.`numSection` like ? and `tblSection`.`isSection` = ?",
-          "wheres": {
-            "condition": "AND",
-            "rules": [
-              {
-                "id": "tblSection.numSection",
-                "field": "tblSection.numSection",
-                "type": "string",
-                "operator": "begins_with",
-                "value": "{{$_GET.subid}}",
-                "data": {
-                  "table": "tblSection",
-                  "column": "numSection",
-                  "type": "text",
-                  "columnObj": {
-                    "type": "text",
-                    "maxLength": 255,
-                    "primary": false,
-                    "unique": false,
-                    "nullable": true,
-                    "name": "numSection"
-                  }
-                },
-                "operation": "LIKE"
-              },
-              {
-                "id": "tblSection.isSection",
-                "field": "tblSection.isSection",
-                "type": "string",
-                "operator": "equal",
-                "value": "0",
-                "data": {
-                  "table": "tblSection",
-                  "column": "isSection",
-                  "type": "text",
-                  "columnObj": {
-                    "type": "text",
-                    "primary": false,
-                    "unique": false,
-                    "nullable": true,
-                    "name": "isSection"
-                  }
-                },
-                "operation": "="
-              }
-            ],
-            "conditional": null,
-            "valid": true
             }
+          ]
         }
       },
       "output": true,
       "meta": [
         {
-          "type": "text",
+          "name": "isSection",
-          "name": "isSection"
+          "type": "text"
         },
         {
-          "type": "text",
+          "name": "numSection",
-          "name": "numSection"
+          "type": "text"
         },
         {
-          "type": "text",
+          "name": "txtSection",
-          "name": "txtSection"
+          "type": "text"
+        },
+        {
+          "name": "wNumSection",
+          "type": "number"
         }
       ],
-      "type": "dbconnector_select",
+      "type": "dbcustom_query"
-      "outputType": "array"
     }
   }
 }

app/api/qSubSection_all.json

@@ -0,0 +1,58 @@
+{
+  "meta": {
+    "$_GET": [
+      {
+        "type": "text",
+        "name": "sort"
+      },
+      {
+        "type": "text",
+        "name": "dir"
+      },
+      {
+        "type": "text",
+        "name": "subid"
+      }
+    ]
+  },
+  "exec": {
+    "steps": {
+      "name": "query",
+      "module": "dbupdater",
+      "action": "custom",
+      "options": {
+        "connection": "DB",
+        "sql": {
+          "query": "\nselect *, CAST(numSection AS  INTEGER) as `wNumSection` \nfrom `tblSection` where  isSection = 0 AND wNumSection = ? \n",
+          "params": [
+            {
+              "name": ":P1",
+              "value": "{{$_GET.subid}}",
+              "test": "11"
+            }
+          ]
+        }
+      },
+      "output": true,
+      "meta": [
+        {
+          "name": "isSection",
+          "type": "text"
+        },
+        {
+          "name": "numSection",
+          "type": "text"
+        },
+        {
+          "name": "txtSection",
+          "type": "text"
+        },
+        {
+          "name": "wNumSection",
+          "type": "number"
+        }
+      ],
+      "type": "dbcustom_query"
+    }
+  }
+}

app/api/uploadSignature.json

@@ -0,0 +1,61 @@
+{
+  "meta": {
+    "$_POST": [
+      {
+        "type": "text",
+        "name": "image"
+      }
+    ]
+  },
+  "exec": {
+    "steps": [
+      {
+        "name": "decodedImage",
+        "module": "core",
+        "action": "setvalue",
+        "options": {
+          "key": "image",
+          "value": "image.replace(/^data:image\\/\\w+;base64,/, \"\")"
+        },
+        "meta": [],
+        "outputType": "text"
+      },
+      {
+        "name": "upload",
+        "module": "upload",
+        "action": "upload",
+        "options": {
+          "fields": "{{decodedImage}}",
+          "path": "/public/signatures/Sig_{{NOW.timestamp}}.png"
+        },
+        "meta": [
+          {
+            "name": "name",
+            "type": "text"
+          },
+          {
+            "name": "path",
+            "type": "text"
+          },
+          {
+            "name": "url",
+            "type": "text"
+          },
+          {
+            "name": "type",
+            "type": "text"
+          },
+          {
+            "name": "size",
+            "type": "text"
+          },
+          {
+            "name": "error",
+            "type": "number"
+          }
+        ],
+        "outputType": "text"
+      }
+    ]
+  }
+}

app/config/routes.json

@@ -20,6 +20,21 @@
       "path": "/ERTScoring",
       "page": "ERTScoring",
       "layout": "main"
+    },
+    {
+      "path": "/file:///Z:/temp/ERTFastFiller/public//Signature",
+      "page": "file:///Z:/temp/ERTFastFiller/public//Signature",
+      "layout": "main"
+    },
+    {
+      "path": "/signature",
+      "page": "signature",
+      "layout": "main"
+    },
+    {
+      "path": "/start",
+      "page": "start",
+      "layout": "main"
     }
   ]
 }

public/.wappler_folder.json

@@ -0,0 +1,6 @@
+{
+  "Signature.html": {
+    "layoutPage": "main",
+    "description": ""
+  }
+}

public/Signature.html

@@ -0,0 +1,112 @@
+<!doctype html>
+<html>
+
+<head>
+    <base href="/">
+    <script src="/dmxAppConnect/dmxAppConnect.js"></script>
+    <meta charset="UTF-8">
+    <title>Untitled Document</title>
+
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="/css/style.css" />
+    <script src="/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer></script>
+</head>
+
+<body is="dmx-app" id="Signature">
+    <div class="container">
+        <div class="row">
+            <h1 class="text-center">Heading</h1>
+        </div>
+    </div>
+    <div class="container">
+        <div class="row">
+            <h1>Heading</h1>
+        </div>
+    </div>
+    <div class="container text-center">
+        <canvas id="signatureCanvas2" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing" onmouseup="endDrawing" onmousemove="draw" class="text-center"></canvas>
+    </div>
+
+    <button id="btn1" class="btn" data-bs-toggle="modal" data-bs-target="#modal1">Button</button>
+    <div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1" onshown="getCanvasOffset()">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Modal title</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body text-center">
+                    <p>Modal body text goes here.</p>
+                    <canvas id="signatureCanvas" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing" onmousemove="draw(event)"></canvas>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
+    <script>
+        const canvas = document.getElementById('signatureCanvas');
+  const ctx = canvas.getContext('2d');
+  let drawing = false;
+
+  function getCanvasOffset() {
+    const rect = canvas.getBoundingClientRect();
+    console.log("offsetX:",rect.left, " OffsetY:",rect.top)
+    return {
+        offsetX: rect.left,
+        offsetY: rect.top
+    };
+}
+
+  function startDrawing(e) {
+    console.log("Start Drawing")
+    drawing = true;
+    draw(e);
+  }
+
+  function endDrawing() {
+    console.log("Stopped Drawing")
+    drawing = false;
+    ctx.beginPath();
+  }
+
+  function draw(e) {
+    //console.log(e)
+    if (!drawing) return;
+    ctx.lineWidth = 2;
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = '#000';
+    
+      const { offsetX, offsetY } = getCanvasOffset();
+
+    let x = e.clientX - offsetX //canvas.offsetLeft;
+    let y = e.clientY - offsetY //canvas.offsetTop;
+    //console.log("X:",x," Y:",y)
+    ctx.lineTo(x, y);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+  }
+
+  canvas.addEventListener('mousedown', startDrawing);
+  canvas.addEventListener('mouseup', endDrawing);
+  canvas.addEventListener('mousemove', draw);
+
+  canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]));
+  canvas.addEventListener('touchend', endDrawing);
+  canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));
+
+    </script>
+
+    <button popovertarget="mypopover">Toggle the popover</button>
+    <div id="mypopover" popover>Popover content</div>
+
+</body>
+
+</html>

public/dmxAppConnect/config.js

@@ -1,76 +1,29 @@
 dmx.config({
-  "observationPage": {
+  "start": {
-    "repeat2": {
+    "repeat1": {
+      "meta": null,
+      "outputType": "text"
+    },
+    "tableRepeat1": {
       "meta": [
         {
-          "type": "number",
+          "name": "isSection",
-          "name": "ID"
+          "type": "text"
         },
         {
-          "type": "text",
+          "name": "numSection",
-          "name": "db_fullName"
+          "type": "text"
         },
         {
-          "type": "text",
+          "name": "txtSection",
-          "name": "db_licenseNumber"
+          "type": "text"
         },
         {
-          "type": "text",
+          "name": "wNumSection",
-          "name": "db_stateIssue"
+          "type": "number"
-        },
-        {
-          "type": "number",
-          "name": "db_employeeID"
-        },
-        {
-          "type": "text",
-          "name": "owner"
         }
       ],
-      "outputType": "array"
+      "outputType": "text"
-    },
-    "data_view1": {
-      "meta": [
-        {
-          "type": "number",
-          "name": "ID"
-        },
-        {
-          "type": "text",
-          "name": "db_fullName"
-        },
-        {
-          "type": "text",
-          "name": "db_licenseNumber"
-        },
-        {
-          "type": "text",
-          "name": "db_stateIssue"
-        },
-        {
-          "type": "number",
-          "name": "db_employeeID"
-        },
-        {
-          "type": "text",
-          "name": "owner"
     }
-      ],
-      "outputType": "array"
-    },
-    "datastore1": [
-      {
-        "type": "number",
-        "name": "numSection"
-      },
-      {
-        "type": "number",
-        "name": "Points"
-      },
-      {
-        "type": "text",
-        "name": "description"
-      }
-    ]
   }
 });

public/dmxAppConnect/dmxBootstrap5Tooltips/dmxBootstrap5Tooltips.js

@@ -0,0 +1,20 @@
+dmx.Attribute('bs-tooltip', 'mounted', function(node, attr) {
+  let tooltip = bootstrap.Tooltip.getInstance(node);
+
+  this.$watch(attr.value, function(value) {
+    node.setAttribute('data-bs-title', value || '');
+  });
+
+  if (!tooltip) {
+    tooltip = new bootstrap.Tooltip(node, {
+      placement: () => node.getAttribute('data-bs-placement') || 'auto',
+      title: () => node.getAttribute('data-bs-title') || '',
+    });
+  }
+
+  return () => {
+    if (tooltip) {
+      tooltip.dispose();
+    }
+  };
+});

public/signatureScript.js

@@ -0,0 +1,62 @@
+// JavaScript Document
+
+
+document.addEventListener("DOMContentLoaded", function () {
+
+    console.log("DOM Loaded. Signature script loaded")
+
+    const canvas = document.getElementById('signatureCanvas');
+    const ctx = canvas.getContext('2d');
+    let drawing = false;
+
+    // Function to get the canvas offset
+    function getCanvasOffset() {
+        const rect = canvas.getBoundingClientRect();
+        console.log("offsetX:", rect.left, " OffsetY:", rect.top)
+        return {
+            offsetX: rect.left,
+            offsetY: rect.top
+        };
+    }
+
+    function clearCanvas() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+
+    function startDrawing(e) {
+        console.log("Start Drawing")
+        drawing = true;
+        draw(e);
+    }
+
+    function endDrawing() {
+        console.log("Stopped Drawing")
+        drawing = false;
+        ctx.beginPath();
+    }
+
+    function draw(e) {
+        console.log(e)
+        if (!drawing) return;
+        ctx.lineWidth = 2;
+        ctx.lineCap = 'round';
+        ctx.strokeStyle = '#000';
+
+        let x = e.clientX - canvas.offsetLeft;
+        let y = e.clientY - canvas.offsetTop;
+        console.log("X:", x, " Y:", y)
+        ctx.lineTo(x, y);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+    }
+
+    canvas.addEventListener('mousedown', startDrawing);
+    canvas.addEventListener('mouseup', endDrawing);
+    canvas.addEventListener('mousemove', draw);
+
+    canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]));
+    canvas.addEventListener('touchend', endDrawing);
+    canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));
+
+})

views/.wappler_folder.json

@@ -10,5 +10,13 @@
   "ERTScoring.ejs": {
     "layoutPage": "main",
     "description": ""
+  },
+  "signature.ejs": {
+    "layoutPage": "main",
+    "description": ""
+  },
+  "start.ejs": {
+    "layoutPage": "main",
+    "description": ""
   }
 }

views/ERTScoring.ejs

@@ -2,4 +2,3 @@
 <meta name="ac:route" content="/ERTScoring">
 <dmx-datastore id="datastore1"></dmx-datastore>
 <dmx-serverconnect id="scQuerySubSections" url="/api/qSubSection"></dmx-serverconnect>
-

views/index.ejs

@@ -1,4 +1,6 @@
-<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" components="{dmxBootstrap5Navigation:{},dmxAnimateCSS:{},dmxStateManagement:{},dmxDatastore:{},dmxBootstrap5Modal:{},dmxFormatter:{},dmxBootstrap5TableGenerator:{},dmxBootstrap5Toasts:{},dmxBootbox5:{}}" -->
+<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" components="{dmxBootstrap5Navigation:{},dmxAnimateCSS:{},dmxStateManagement:{},dmxDatastore:{},dmxBootstrap5Modal:{},dmxFormatter:{},dmxBootstrap5TableGenerator:{},dmxBootstrap5Toasts:{},dmxBootbox5:{},dmxBrowser:{}}" -->
+<div is="dmx-browser" id="browser1"></div>
+
 <dmx-datetime id="DateTimeNow" interval="minutes"></dmx-datetime>
 <script is="dmx-flow" id="delConfirm" type="text/dmx-flow">{
   bootbox.confirm: {
@@ -30,7 +32,7 @@
 <dmx-json-datasource id="stateJSON" is="dmx-serverconnect" url="/states.json"></dmx-json-datasource>
 <dmx-json-datasource id="trainerJSON" is="dmx-serverconnect" url="/trainer.json"></dmx-json-datasource>
 <div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Driver Information</h5>
@@ -96,6 +98,7 @@
     <div class="row">
         <div class="text-center col-4 offset-1" id="cLeft">
             <button id="btn1" class="btn text-center lh-lg btn-success" dmx-on:click="modal1.show()">Delivery Associate</button>
+            <button id="btn5" class="btn btn-warning" data-bs-target="undefined" dmx-on:click="browser1.goto('/signature',true,'Get Signature')">Signature</button>
         </div>
         <div class="text-center offset-2 col-3" id="cRight">
             <button id="btn2" class="btn lh-lg btn-warning">Driver Trainers</button>

views/layouts/main.ejs

@@ -5,7 +5,7 @@
   <base href="/">
   <script src="/dmxAppConnect/dmxAppConnect.js"></script>
   <meta charset="UTF-8">
-  <title>Untitled Document</title>
+  <title>ERT Fast Fill</title>
 
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -32,6 +32,12 @@
   <link rel="stylesheet" href="/dmxAppConnect/dmxValidator/dmxValidator.css" />
   <script src="/dmxAppConnect/dmxValidator/dmxValidator.js" defer></script>
   <script src="/dmxAppConnect/dmxBootstrap5Offcanvas/dmxBootstrap5Offcanvas.js" defer></script>
+  <script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>
+
+  <script src="/dmxAppConnect/dmxBootstrap5Tooltips/dmxBootstrap5Tooltips.js" defer></script>
+
+
+
 </head>
 
 <body is="dmx-app" id="main">
@@ -42,7 +48,7 @@
           <div class="dropdown-menu" aria-labelledby="dropdown1">
             <a class="dropdown-item" href="#">Action</a>
             <a class="dropdown-item" href="#">Another action</a>
-            <a class="dropdown-item" href="#" dmx-on:click="">Something else here</a>
+            <a class="dropdown-item" href="/signature" internal="true">Signature</a>
           </div>
         </div>
         <a class="nav-item nav-link" href="#">File</a>

views/observationPage.ejs

@@ -1,4 +1,39 @@
-<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="observationPage" appConnect="local" components="{dmxBootstrap5TableGenerator:{},dmxMasonry:{},dmxFormatter:{},dmxBootstrap5Popovers:{},dmxBootstrap5Toasts:{},dmxDataTraversal:{},dmxStateManagement:{},dmxDatastore:{},dmxValidator:{},dmxBootstrap5Offcanvas:{}}" -->
+<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="observationPage" appConnect="local" components="{dmxBootstrap5TableGenerator:{},dmxMasonry:{},dmxFormatter:{},dmxBootstrap5Popovers:{},dmxBootstrap5Toasts:{},dmxDataTraversal:{},dmxStateManagement:{},dmxDatastore:{},dmxValidator:{},dmxBootstrap5Offcanvas:{},dmxBootstrap5Modal:{},dmxBootstrap5Navigation:{},dmxBootstrap5Tooltips:{},dmxBootbox5:{}}" -->
+<div class="container wappler-block pt-3 pb-3">
+    <div class="modal" id="modal-success" is="dmx-bs5-modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-body">
+                    <p class="text-center text-success"><i class="fas fa-check-circle fa-6x"></i></p>
+                    <h4 class="text-center fw-light">Success!</h4>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Signature Capture</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body text-center">
+                <p>Driver must sign for Road Test</p>
+                <canvas id="signatureCanvas" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)"></canvas>
+
+            </div>
+            <div class="modal-footer">
+                <button id="btn4" class="btn btn-warning w-25" data-bs-toggle="button" onclick="clearCanvas()">Clear Signature</button>
+                <button type="button" class="btn btn-danger w-auto" data-bs-dismiss="modal" dmx-bs-tooltip="'Close Signature Panel'" data-bs-trigger="hover" data-bs-placement="top">Close</button>
+                <button type="button" class="btn btn-success w-auto">Save</button>
+            </div>
+        </div>
+    </div>
+</div>
 <dmx-serverconnect id="qDB" url="/api/query"></dmx-serverconnect>
 <div class="offcanvas offcanvas-start" id="offcanvas1" is="dmx-bs5-offcanvas" tabindex="-1">
     <div class="offcanvas-header">
@@ -9,7 +44,15 @@
         <div class="container">
             <div class="form-check">
                 <input class="form-check-input" type="checkbox" value="" id="CKBinput1" name="canvasCBShowHideSectionDetail">
-                <label class="form-check-label" for="CKBinput1">Show Section detail</label>
+                <label class="form-check-label" for="CKBinput1">Hide Section detail</label>
+            </div>
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" value="" id="CKBinput2" name="canvasCBShowHideSectionDetail">
+                <label class="form-check-label" for="CKBinput2">Hide Score detail</label>
+            </div>
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" value="" id="CKBinput3" name="canvasCBShowHideSectionDetail">
+                <label class="form-check-label" for="CKBinput3">Show Section detail</label>
             </div>
         </div>
         <p>Offcanvas body text goes here.</p>
@@ -24,7 +67,21 @@
 <dmx-serverconnect id="scQuerySection" url="/api/qSection"></dmx-serverconnect>
 
 <div class="container border-primary border-2 border">
-    <div class="row"></div>
+    <nav class="navbar navbar-expand-lg">
+        <span class="navbar-text">
+            <button id="btn3" class="btn" data-bs-toggle="modal" data-bs-target="#modal1">Button</button>Navbar Text</span>
+        <div id="collapse1" class="collapse navbar-collapse">
+            <div class="nav w-100">
+                <a class="nav-item nav-link" href="#">Link</a>
+                <a class="nav-item nav-link" href="#">Link</a>
+                <a class="nav-item nav-link" href="#">Link</a>
+            </div>
+        </div><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+    </nav>
+
     <div class="row">
         <div class="col-3">
             <p class="text-center"><b>Who you are grading</b></p>
@@ -34,19 +91,19 @@
         <div class="col">
             <table class="table table-striped table-sm">
                 <thead>
-                    <tr>
+                    <tr class="text-xl-center">
-                        <th>DA Name</th>
+                        <th>Name</th>
                         <th>License No.</th>
                         <th>Issue State</th>
-                        <th>DA Empl. ID</th>
+                        <th>Employee No.</th>
                         <th>Driver Trainer</th>
                     </tr>
                 </thead>
                 <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="data_view1.data" id="tableRepeat4">
-                    <tr>
+                    <tr class="text-xl-center">
                         <td dmx-text="db_fullName"></td>
                         <td dmx-text="db_licenseNumber"></td>
-                        <td dmx-text="db_stateIssue"></td>
+                        <td dmx-text="db_stateIssue" dmx-class:bg-danger="db_stateIssue.isEmpty()"></td>
                         <td dmx-text="db_employeeID"></td>
                         <td dmx-text="owner"></td>
                     </tr>
@@ -57,15 +114,20 @@
     </div>
     <div class="row">
         <div class="col">
-            <button id="btn2" class="btn btn-primary">Print</button>
+            <button id="btn2" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal1">Print</button>
         </div>
         <div class="col"></div>
         <div class="col"></div>
     </div>
 </div>
-<div class="container border border-5 rounded border-warning-subtle" id="btnMenu">
+
-    <div class="row" is="dmx-masonry" id="repeat1" dmx-bind:repeat="scQuerySection.data.query">
+<div class="container border rounded border-warning-subtle border-3 mb-md-3 pt-md-4 pb-md-4" id="btnMenu">
-        <div class="col">
+    <nav class="navbar navbar-expand-lg justify-content-lg-around">
+        <span class="navbar-text">Navbar Text</span>
+        <span class="navbar-text">?</span>
+    </nav>
+    <div class="row justify-content-xl-between" is="dmx-masonry" id="repeat1" dmx-bind:repeat="scQuerySection.data.query" columns="3" gutter="10">
+        <div class="col text-xl-center">
             <form id="form1" action="/api/qSection" method="post">
                 <input id="text1" name="text1" type="hidden" class="form-control" dmx-bind:value="numSection">
                 <button id="btn1" class="btn btn-primary" dmx-text="txtSection.substring(0,25)" data-bs-toggle="button" dmx-bind:value="numSection" dmx-on:click="toasts1.show({message: value, title: 'Button Value', subtitle: tableRepeat1[0].txtSection});scQuerySubSections.load({subid: value});varSelectedSection.setValue(value)">Button</button>
@@ -74,7 +136,7 @@
         </div>
     </div>
 </div>
-<div class="container border-warning border border-5" dmx-show="offcanvas1.CKBinput1.checked">
+<div class="container border-warning border border-5" dmx-hide="offcanvas1.CKBinput1.checked">
 
     <table class="table table-striped table-sm">
         <thead>
@@ -91,15 +153,46 @@
         </tbody>
     </table>
 </div>
-<div class="container">
+<div class="container" dmx-show="toggle1.checked">
+    <div class="row" dmx-hide="offcanvas1.CKBinput2.checked">
+        <div class="col">
+            <p class="fw-bold">The DT should fill out the evaluation form during the Enhanced Road Test based on the below points system and description. Every item in Section must have a score to be considered complete and valid; there should be no blank spaces. A DA candidate must have a score of total score 10 or lower to pass.</p>
+            <table class="table">
+                <thead class="table-primary">
+                    <tr>
+                        <th scope="col">Tier</th>
+                        <th scope="col">Points</th>
+                        <th scope="col">Description</th>
+                    </tr>
+                </thead>
+                <tbody class="table-info">
+                    <tr>
+                        <th scope="row">1</th>
+                        <td>0</td>
+                        <td>DA did perform the action</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">2</th>
+                        <td>1</td>
+                        <td>DA did perform the action after DT provides guidance</td>
+                    </tr>
+                    <tr>
+                        <th scope="row">3</th>
+                        <td>2</td>
+                        <td>DA failed to perform action</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
 
     <table class="table">
         <thead>
             <tr>
                 <th scope="row">Points</th>
                 <th>Is section</th>
-                <th>Num section</th>
+                <th>Section No.</th>
-                <th>Txt section</th>
+                <th>Section Description</th>
             </tr>
         </thead>
         <tbody is="dmx-repeat" dmx-generator="bs5table" id="tableRepeat2" dmx-bind:repeat="scQuerySubSections.data.query">
@@ -130,7 +223,9 @@
                 <th>$id</th>
                 <th>Num section</th>
                 <th>Points</th>
-                <th>Description</th>
+                <th>Description&nbsp;
+                    <button id="btn5" class="btn btn-outline-danger w-auto btn-sm lh-base" data-bs-toggle="button" dmx-bs-tooltip="'Clear ALL points'" data-bs-trigger="hover" dmx-on:click="run({'bootbox.confirm':{name:'clearPoints',message:'This will clear all points',title:'WATCH OUT',buttons:{confirm:{label:'Yes'},cancel:{label:'Cancel'}},then:{steps:{run:{name:'clearDataStore1',outputType:'text',action:`datastore1.clear()`}}}}})" dmx-hide="!datastore1.data.hasItems()">Clear</button>
+                </th>
             </tr>
         </thead>
         <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="datastore1.data" id="tableRepeat3">
@@ -143,3 +238,70 @@
         </tbody>
     </table>
 </div>
+<script>
+    const canvas = document.getElementById('signatureCanvas');
+    const ctx = canvas.getContext('2d');
+    let drawing = false;
+
+    // Get the canvas element
+
+
+// Function to get the canvas offset
+function getCanvasOffset() {
+    const rect = canvas.getBoundingClientRect();
+    //console.log("offsetX:",rect.left, " OffsetY:",rect.top)
+    return {
+        offsetX: rect.left,
+        offsetY: rect.top
+    };
+}
+
+    
+    function clearCanvas() {
+        console.log("Clear Signature area")
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+
+    function startDrawing(e) {
+        console.log("Start Signature Capture")
+        //console.log(e)
+        drawing = true;
+        draw(e);
+    }
+
+    function endDrawing() {
+        console.log("Stopped Signature Capture")
+        drawing = false;
+        ctx.beginPath();
+    }
+
+    function draw(e) {
+        //console.log(e)
+        if (!drawing) return;
+        ctx.lineWidth = 2;
+        ctx.lineCap = 'round';
+        ctx.strokeStyle = '#000';
+        
+        const { offsetX, offsetY } = getCanvasOffset();
+        let x = e.clientX - offsetX //canvas.offsetLeft;
+        let y = e.clientY - offsetY //canvas.offsetTop;
+        //console.log("X:",x," Y:",y)
+
+        //let x = e.clientX - canvas.offsetLeft;
+        //let y = e.clientY - canvas.offsetTop;
+        //console.log("X:", x, " Y:", y)
+        ctx.lineTo(x, y);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+    }
+
+    //canvas.addEventListener('mousedown', startDrawing);
+    //canvas.addEventListener('mouseup', endDrawing);
+    //canvas.addEventListener('mousemove', draw);
+
+    canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]));
+    canvas.addEventListener('touchend', endDrawing);
+    canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));
+
+</script>

views/partials/.wappler_folder.json

@@ -0,0 +1,11 @@
+{
+  "getSignature.html": {
+    "description": "Get Sig"
+  },
+  "getSignature.ejs": {
+    "description": ""
+  },
+  "pointInstructions.html": {
+    "description": "How to use point sytem"
+  }
+}

views/partials/getSignature.html

@@ -0,0 +1 @@
+<!-- Wappler include fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="getSignature" appConnect="local" -->

views/partials/pointInstructions.html

@@ -0,0 +1,27 @@
+<!-- Wappler include fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="pointInstructions" appConnect="local" -->
+<div class="container wappler-block pt-4 pb-4">
+    <div class="row">
+        <div class="col-12 col-md-4 col-lg-3">
+            <h4>Fancy display heading</h4>
+            <p>A nice paragraph</p>
+        </div>
+        <div class="col-12 col-md-8 col-lg-9">
+            <div class="row">
+                <div class="col-12 col-sm-4 mb-4"></div>
+                <div class="col-12 col-sm-4 mb-4"></div>
+                <div class="col-12 col-sm-4 mb-4"></div>
+                <div class="col-12 col-sm-4 mb-4"></div>
+                <div class="col-12 col-sm-4 mb-4"></div>
+                <div class="col-12 col-sm-4 mb-4"></div>
+                <div class="col-12 col-sm-4 mb-4"></div>
+                <div class="col-12 col-sm-4 mb-4"></div>
+                <div class="col-12 col-sm-4 mb-4"></div>
+                <div class="col-12 col-sm-4 mb-4"></div>
+                <div class="col-12 col-sm-4 mb-4"></div>
+                <div class="col-12 col-sm-4 mb-4"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<table style="border-collapse:collapse;margin-left:10.25pt" cellspacing="0" class="text-black-50"></table>

views/signature.ejs

@@ -0,0 +1,101 @@
+<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="signature" appConnect="local" components="{dmxBootstrap5Modal:{},dmxBootbox5:{}}" -->
+<meta name="ac:route" content="/signature">
+
+<div class="container">
+    <div class="row">
+        <h1 class="text-center">Request Signature</h1>
+    </div>
+</div>
+<div class="container">
+    <div class="row">
+
+        <div class="col text-center align-self-center">
+            <h1>Signature</h1>
+        </div>
+        <div class="col text-center align-self-center">
+            <button id="btn2" class="btn text-center btn-primary" dmx-on:click="run({'bootbox.confirm':{name:'signatureClear',message:'Are you sure',title:'Clear signature',buttons:{confirm:{label:'Yes',className:'btn-success'},cancel:{label:'Abort',className:'btn-danger'}},then:{steps:{runJS:{name:'CLRSigPanel',outputType:'text',function:'clearCanvas'}}}}})">Clear Signature Pad</button>
+        </div>
+        <div class="col"></div>
+    </div>
+</div>
+<div class="container text-center">
+
+    <canvas id="signatureCanvas" width="700" height="200" style="border:1px solid #000;" class="text-center" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)"></canvas>
+</div>
+<div class="container">
+    <div class="row">
+        <div class="col align-self-center text-center"><button id="btn1" class="btn text-bg-primary" data-bs-target="undefined">Button</button></div>
+        <div class="col"></div>
+    </div>
+</div>
+<button id="btn3" class="btn">Button</button>
+<script>
+    const canvas = document.getElementById('signatureCanvas');
+    const ctx = canvas.getContext('2d');
+    let drawing = false;
+
+    // Get the canvas element
+
+
+// Function to get the canvas offset
+function getCanvasOffset() {
+    const rect = canvas.getBoundingClientRect();
+    console.log("offsetX:",rect.left, " OffsetY:",rect.top)
+    return {
+        offsetX: rect.left,
+        offsetY: rect.top
+    };
+}
+
+    
+    function clearCanvas() {
+        console.log("Clear Signature area")
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+
+    function startDrawing(e) {
+        console.log("Start Signature Capture")
+        //console.log(e)
+        drawing = true;
+        draw(e);
+    }
+
+    function endDrawing() {
+        console.log("Stopped Signature Capture")
+        drawing = false;
+        ctx.beginPath();
+    }
+
+    function draw(e) {
+        //console.log(e)
+        if (!drawing) return;
+        ctx.lineWidth = 2;
+        ctx.lineCap = 'round';
+        ctx.strokeStyle = '#000';
+        
+        const { offsetX, offsetY } = getCanvasOffset();
+        let x = e.clientX - offsetX //canvas.offsetLeft;
+        let y = e.clientY - offsetY //canvas.offsetTop;
+        console.log("X:",x," Y:",y)
+
+        //let x = e.clientX - canvas.offsetLeft;
+        //let y = e.clientY - canvas.offsetTop;
+        console.log("X:", x, " Y:", y)
+        ctx.lineTo(x, y);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+    }
+
+    //canvas.addEventListener('mousedown', startDrawing);
+    //canvas.addEventListener('mouseup', endDrawing);
+    //canvas.addEventListener('mousemove', draw);
+
+    canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]));
+    canvas.addEventListener('touchend', endDrawing);
+    canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));
+
+</script>
+
+
+<script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>

views/start.ejs

@@ -0,0 +1,47 @@
+<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="start" appConnect="local" components="{dmxSwiper:{},dmxBootstrap5Navigation:{},dmxFormatter:{},dmxBootstrap5Toasts:{},dmxBootstrap5TableGenerator:{}}" -->
+<dmx-serverconnect id="serverconnect2" url="/api/qSubSection" dmx-param:subid="(swiper1.index + 1)"></dmx-serverconnect>
+<div is="dmx-bs5-toasts" id="toasts1"></div>
+<dmx-serverconnect id="serverconnect1" url="/api/qSection"></dmx-serverconnect>
+<meta name="ac:route" content="/start">
+<div class="container">
+    <nav class="navbar navbar-expand-lg">
+        <span class="navbar-text">Page {{(swiper1.index + 1)}}</span>
+        <span class="navbar-text">Navbar Text</span><span class="navbar-text">Navbar Text</span>
+
+    </nav>
+    <div class="row">
+        <div class="col">
+            <div is="dmx-swiper" id="swiper1" pagination="fraction" navigation="true" dmx-bind:slides="serverconnect1.data.query" loop="true" scrollbar="true">
+                <div class="swiper-slide">
+                    <div class="row">
+                        <h2> {{txtSection}}</h2>
+                    </div>
+                    <div class="row">
+                        <div class="table-responsive">
+                            <table class="table table-striped table-bordered table-sm">
+                                <thead>
+                                    <tr>
+                                        <th>Index</th>
+                                        <th>Is section</th>
+                                        <th>Num section</th>
+                                        <th>Txt section</th>
+                                    </tr>
+                                </thead>
+                                <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="serverconnect2.data.query" id="tableRepeat1">
+                                    <tr>
+                                        <td dmx-text="index"></td>
+                                        <td dmx-text="isSection"></td>
+                                        <td dmx-text="numSection"></td>
+                                        <td dmx-text="txtSection"></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>