cosmetic. fixes.

Todo - fix fields.
add - DSP, Facility
add - permission security (admin, view, DOT
fix: template PDF - both ERT + DOT

.dockerignore

@@ -2,3 +2,4 @@
 **/.git
 **/.svn
 node_modules
+uploads

.wappler/migrations/DB/20241125053059_security.js

@@ -0,0 +1,21 @@
+
+exports.up = function(knex) {
+  return knex.schema
+    .createTable('security', async function (table) {
+      table.increments('id');
+      table.string('user');
+      table.string('pass');
+    })
+    .createTable('permission', async function (table) {
+      table.increments('id');
+      table.string('permission');
+      table.string('user');
+    })
+
+};
+
+exports.down = function(knex) {
+  return knex.schema
+    .dropTable('permission')
+    .dropTable('security')
+};

.wappler/migrations/ERTDB/20241103201444_catchup.js

@@ -1,13 +0,0 @@
-
-exports.up = function (knex) {
-  return knex.schema
-    .renameTable('tblSection', 'tSection')
-    .renameTable('tSection', 'tSectionOld')
-
-};
-
-exports.down = function (knex) {
-  return knex.schema
-    .renameTable('tSectionOld', 'tSection')
-    .renameTable('tSection', 'tblSection')
-};

.wappler/project.json

@@ -39,7 +39,9 @@
       "webLoggingMaxFiles": "5",
       "webLoggingMaxFileSize": "10m",
       "dockerTimezone": "Etc/UTC",
-      "databaseConnectionType": "none"
+      "databaseConnectionType": "none",
+      "databaseLoggingMaxFiles": "5",
+      "databaseLoggingMaxFileSize": "10m"
     }
   ],
   "activeTarget": "Development",
@@ -48,5 +50,6 @@
     {
       "name": "pdf-lib"
     }
-  ]
+  ],
+  "userUploadsFolder": "/uploads"
 }

.wappler/targets/Development/databases/DB.json

@@ -152,6 +152,68 @@
             }
           }
         }
+      },
+      "security": {
+        "columns": {
+          "id": {
+            "db": {
+              "type": "increments",
+              "primary": true,
+              "unique": false,
+              "nullable": false
+            }
+          },
+          "user": {
+            "db": {
+              "type": "string",
+              "maxLength": 255,
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          },
+          "pass": {
+            "db": {
+              "type": "string",
+              "maxLength": 255,
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          }
+        },
+        "db": {}
+      },
+      "permission": {
+        "columns": {
+          "id": {
+            "db": {
+              "type": "increments",
+              "primary": true,
+              "unique": false,
+              "nullable": false
+            }
+          },
+          "permission": {
+            "db": {
+              "type": "string",
+              "maxLength": 255,
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          },
+          "user": {
+            "db": {
+              "type": "string",
+              "maxLength": 255,
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          }
+        },
+        "db": {}
       }
     },
     "views": {}

.wappler/targets/Development/docker-compose.yml

@@ -8,6 +8,7 @@ services:
       - '../../../extensions:/opt/node_app/extensions'
       - '../../../db:/opt/node_app/db'
       - '../../../certs:/opt/node_app/certs'
+      - '../../../uploads:/opt/node_app/uploads:rw'
     ports:
       - '8100:3000'
     restart: 'always'
@@ -20,3 +21,4 @@ services:
       options:
         max-file: '5'
         max-size: '10m'
+volumes: {}

app/api/insert.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "options": {
-      "linkedFile": "/views/index.ejs",
+      "linkedFile": "/views/index0.ejs",
       "linkedForm": "serverconnectform1"
     },
     "$_POST": [
@@ -34,11 +34,41 @@
         "type": "text",
         "fieldName": "db_stateIssue",
         "name": "db_stateIssue"
+      },
+      {
+        "type": "text",
+        "fieldName": "db_trainerID",
+        "name": "db_trainerID"
       }
     ]
   },
   "exec": {
-    "steps": {
+    "steps": [
+      {
+        "name": "validate",
+        "module": "validator",
+        "action": "validate",
+        "options": {
+          "data": [
+            {
+              "name": "validate_1",
+              "value": "{{$_POST.db_licenseNumber}}",
+              "rules": {
+                "db:notexists": {
+                  "param": {
+                    "connection": "DB",
+                    "table": "da",
+                    "column": "db_licenseNumber"
+                  },
+                  "message": "Already in database. Delete record then retry."
+                }
+              },
+              "fieldName": "db_licenseNumber"
+            }
+          ]
+        }
+      },
+      {
         "name": "insert",
         "module": "dbupdater",
         "action": "insert",
@@ -51,31 +81,36 @@
                 "table": "da",
                 "column": "db_fullName",
                 "type": "text",
-              "value": "{{$_POST.db_fullName}}"
+                "value": "{{$_POST.db_fullName}}",
+                "recid": 1
               },
               {
                 "table": "da",
                 "column": "db_licenseNumber",
                 "type": "text",
-              "value": "{{$_POST.db_licenseNumber}}"
+                "value": "{{$_POST.db_licenseNumber}}",
+                "recid": 2
               },
               {
                 "table": "da",
                 "column": "db_stateIssue",
                 "type": "text",
-              "value": "{{$_POST.db_stateIssue}}"
+                "value": "{{$_POST.db_stateIssue}}",
+                "recid": 3
               },
               {
                 "table": "da",
                 "column": "db_employeeID",
                 "type": "number",
-              "value": "{{$_POST.db_employeeID}}"
+                "value": "{{$_POST.db_employeeID}}",
+                "recid": 4
               },
               {
                 "table": "da",
                 "column": "owner",
                 "type": "text",
-              "value": "{{$_POST.owner}}"
+                "value": "{{$_POST.owner}}",
+                "recid": 5
               }
             ],
             "table": "da",
@@ -127,5 +162,6 @@
         ],
         "output": true
       }
+    ]
   }
 }

app/api/signatureUpload.json

@@ -0,0 +1,10 @@
+{
+  "name": "fileUpload",
+  "module": "upload",
+  "action": "upload",
+  "options": {
+    "fields": ""
+  },
+  "meta": [],
+  "outputType": "array"
+}

app/config/routes.json

@@ -1,8 +1,8 @@
 {
   "routes": [
     {
-      "path": "/",
+      "path": "/index0",
-      "page": "index",
+      "page": "index0",
       "routeType": "page",
       "layout": "main"
     },
@@ -32,8 +32,18 @@
       "layout": "main"
     },
     {
-      "path": "/start",
+      "path": "/Scrollable-sections",
-      "page": "start",
+      "page": "Scrollable-sections",
+      "layout": "main"
+    },
+    {
+      "path": "/",
+      "page": "index",
+      "layout": "main"
+    },
+    {
+      "path": "/da_index1",
+      "page": "da_index1",
       "layout": "main"
     }
   ]

public/PDF/dummyFunctions.js

@@ -20,3 +20,4 @@ async function toBase64(filePath) {
     dmx.global.set('imgResult', img)
     return img
 }
+

public/PDF/pdfLibSignature.js

@@ -1,9 +1,20 @@
-// JavaScript Document v1.2
+// JavaScript Document v1.3
 
-const canvas = document.getElementById('signatureCanvas');
+//let dynamicSignatureElementId = dmx.global.data.signatureElementName // Gets the DYNAMIC ID for the canvas ID
+const canvas = document.getElementById('signatureCanvas'); //  const canvas = document.getElementById('signatureCanvasIndex');
 const ctx = canvas.getContext('2d');
 let drawing = false;
 
+
+
+if (canvas) {
+    console.log('Canvas element found:');
+} else {
+    console.log('Canvas element not found');
+}
+
+
+
 function myTestFunction(variable1, variable2) {
     console.log(variable1, variable2);
     // Your logic here
@@ -50,7 +61,7 @@ function draw(e) {
     const { offsetX, offsetY } = getCanvasOffset();
     let x = e.clientX - offsetX //canvas.offsetLeft;
     let y = e.clientY - offsetY //canvas.offsetTop;
-    //console.log("X:",x," Y:",y)
+    //console.log("X:", x, " Y:", y)
 
     //let x = e.clientX - canvas.offsetLeft;
     //let y = e.clientY - canvas.offsetTop;

public/dmxAppConnect/config.js

@@ -36,5 +36,34 @@ dmx.config({
       ],
       "local": {}
     }
+  },
+  "index": {
+    "global": [
+      {
+        "type": "text",
+        "name": "file"
+      }
+    ],
+    "flowRunPageId": {
+      "meta": [
+        {
+          "name": "setRunPageId",
+          "type": "text"
+        }
+      ],
+      "local": {}
+    },
+    "flowrunPageId": {
+      "meta": [
+        {
+          "name": "setRunPageId",
+          "type": "text"
+        }
+      ],
+      "local": {}
+    },
+    "runPageId": {
+      "outputType": "text"
+    }
   }
 });

views/.wappler_folder.json

@@ -15,8 +15,20 @@
     "layoutPage": "main",
     "description": ""
   },
-  "start.ejs": {
+  "Scrollable-sections.ejs": {
     "layoutPage": "main",
     "description": ""
+  },
+  "da_index1.ejs": {
+    "layoutPage": "main",
+    "description": ""
+  },
+  "index0.ejs": {
+    "layoutPage": "main",
+    "description": ""
+  },
+  "index.ejs": {
+    "layoutPage": "main",
+    "description": "Starting page"
   }
 }

views/da_index1.ejs

@@ -0,0 +1,2 @@
+<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="da_index1" appConnect="local" -->
+<meta name="ac:route" content="/da_index1">

views/index.ejs

@@ -1,208 +1,13 @@
-<!-- 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:{},dmxBootstrap5Tooltips:{}}" -->
+<!-- Wappler include fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="startPage" appconnect="local" components="{dmxBootstrap5Navigation:{}}" class="text-center" head-page="layouts/main" -->
-<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: {
-    name: "confirmYesNo",
-    message: "Delete ",
-    title: "Remove list item",
-    buttons: {
-      confirm: {label: "Delete", className: "btn-danger"},
-      cancel: {label: "Cancel", className: "btn-warning"}
-    },
-    then: {
-      steps: {
-        serverConnect: {
-          name: "pageFlowSC1",
-          outputType: "object",
-          url: "/api/delRecord",
-          site: "ERTFastFiller"
-        }
-      }
-    }
-  }
-}</script>
-<dmx-serverconnect id="DBInsert" url="/api/insert" noload="true"></dmx-serverconnect>
-<div is="dmx-bs5-toasts" id="toasts1"></div>
-<dmx-serverconnect id="DBSC1" url="/api/query"></dmx-serverconnect>
-<dmx-value id="dataID"></dmx-value>
-<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="SignatureModal1" 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>
-
-
-
-<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
-    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">Driver Information</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <div class="container">
-                    <form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="/api/insert" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-on:done="modal1.hide();DBSC1.load({})" dmx-on:submit="">
-                        <div class="form-group mb-3 row">
-                            <label for="inp_db_fullName" class="col-sm-2 col-form-label">full name</label>
-                            <div class="col-sm-10">
-                                <input type="text" class="form-control" id="inp_db_fullName" name="db_fullName" aria-describedby="inp_db_fullName_help" placeholder="Enter Db full name">
-                            </div>
-                        </div>
-                        <div class="form-group mb-3 row">
-                            <label for="inp_db_licenseNumber" class="col-sm-2 col-form-label">license number</label>
-                            <div class="col-sm-10">
-                                <input type="text" class="form-control" id="inp_db_licenseNumber" name="db_licenseNumber" aria-describedby="inp_db_licenseNumber_help" placeholder="Enter Db license number">
-                            </div>
-                        </div>
-                        <div class="form-group mb-3 row">
-                            <label for="db_stateIssue" class="col-sm-2 col-form-label">state issue</label>
-                            <div class="col-sm-4">
-                                <select id="db_stateIssue" class="form-select" dmx-bind:options="stateJSON.data.states" optiontext="name" optionvalue="abbreviation" name="db_stateIssue" dmx-bind:value="selectedValue">
-                                </select>
-                            </div>
-                            <div class="col-6">
-                                <small id="bs5-form-group-help1" class="form-text text-muted">Your great help text.</small>
-                            </div>
-                        </div>
-                        <div class="form-group mb-3 row">
-                            <label for="inp_db_employeeID" class="col-sm-2 col-form-label">Trainer</label>
-                            <div class="col-sm-3">
-                                <input type="number" class="form-control" id="inp_db_employeeID" name="db_employeeID" aria-describedby="inp_db_employeeID_help" placeholder="Enter Db employee" dmx-bind:value="select1.selectedValue" readonly="true">
-                            </div>
-                            <div class="col-6 offset-1">
-                                <select id="select1" class="form-select" dmx-bind:options="trainerJSON.data.Trainer" name="db_trainerID" optiontext="Name" optionvalue="ID" dmx-bind:value="selectedValue">
-                                </select>
-                            </div>
-                        </div>
-                        <div class="form-group mb-3 row">
-                            <label for="inp_owner" class="col-sm-2 col-form-label">Date</label>
-                            <div class="col-sm-10">
-                                <input type="text" class="form-control" id="inp_owner" name="owner" aria-describedby="inp_owner_help" placeholder="Enter Owner" dmx-bind:value="DateTimeNow.datetime.formatDate('MM-dd-yyyy')" readonly="true">
-                            </div>
-                        </div>
-                        <div class="form-group mb-3 row">
-                            <div class="col-sm-2">&nbsp;</div>
-                            <div class="col-sm-10">
-                                <button type="submit" class="btn btn-success" dmx-bind:disabled="state.executing">Save <span class="spinner-border spinner-border-sm" role="status" dmx-show="state.executing"></span></button>
-                                <button id="xbtn4" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-
-            </div>
-            <div class="modal-footer">{{DateTimeNow.datetime.formatDate('MM-dd-yyyy')}}</div>
-        </div>
-    </div>
-</div>
-
 <div class="container">
-    <h1 class="text-center">Lets Begin.&nbsp;What is your Role?</h1>
+    <div class="row text-center">
-</div>
+        <div class="offset-3 col-7 offset-xxl-1 col-xxl-10">
-<div class="container">
+            <h1>Starting Point ...</h1>
-    <div class="row">
+            <h2>Click on the icon below to begin.</h2>
-        <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" data-bs-toggle="modal" data-bs-target="#SignatureModal1">Driver Trainers</button>
-        </div>
-    </div>
-    <div class="row" dmx-hide="datastore1.data.isEmpty()">
-    </div>
-    <div class="row" id="daForm">
 
-        <div class="col">
+            <a href="/index0" internal="true"><img alt="image" class="img-fluid mt-5" src="/assets/images/Small-Start-Icon.jpg"></a>
-            <form is="dmx-serverconnect-form" id="serverconnectform2" method="post" action="/api/insert" dmx-generator="bootstrap5" dmx-form-type="horizontal">
-                <div class="form-group mb-3 row">
-                    <div class="col-sm-7">
-                        <input type="text" class="form-control" id="inp_db_fullName" name="db_fullName" aria-describedby="inp_db_fullName_help" placeholder="Enter Db full name">
-                    </div>
-                </div>
-                <div class="form-group mb-3 row">
-                    <div class="col-sm-7">
-                        <input type="text" class="form-control" id="inp_db_licenseNumber" name="db_licenseNumber" aria-describedby="inp_db_licenseNumber_help" placeholder="Enter Db license number">
-                    </div>
-                </div>
-                <div class="form-group mb-3 row">
-                    <div class="col-sm-7">
-                        <input type="number" class="form-control" id="inp_db_employeeID" name="db_employeeID" aria-describedby="inp_db_employeeID_help" placeholder="Enter Db employee">
-                    </div>
-                </div>
-                <div class="form-group mb-3 row">
-                    <div class="col-sm-6">
-                        <input type="text" class="form-control" id="inp_owner" name="owner" aria-describedby="inp_owner_help" placeholder="Enter Owner">
-                    </div>
-                </div>
-                <div class="form-group mb-3 row">
-                    <div class="col-sm-7">
-                        <input type="text" class="form-control" id="inp_db_stateIssue" name="db_stateIssue" aria-describedby="inp_db_stateIssue_help" placeholder="Enter Db state issue">
-                    </div>
-                </div>
-            </form>
-        </div>
-        <div class="col">
-            <h1>Display Area.</h1>
-        </div>
-    </div>
-    <div class="row" id="eSignature">
-        <p>This area will display the signature.</p>
-    </div>
-    <table class="table">
-        <thead>
-            <tr>
-                <th>DELETE</th>
-                <th>DA Name</th>
-                <th>license number</th>
-                <th>state issue</th>
-                <th>Trainer #</th>
-                <th>Date</th>
-            </tr>
-        </thead>
-        <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="DBSC1.data.query" id="tableRepeat1">
-            <tr>
-                <td dmx-bs-tooltip="'Click will delete without confirmation'" data-bs-trigger="hover" data-bs-placement="left">
-                    <form action="/api/delRecord" method="post" dmx-on:success="DBSC1.load({})" is="dmx-serverconnect-form" id="serverconnectform3">
-                        <input id="deleteid" name="deleteid" type="hidden" class="form-control" dmx-bind:value="ID">
-                        <button id="btn3" class="btn btn-sm btn-outline-danger" dmx-text="ID" type="submit" dmx-on:mouseover="">Button</button>
-                    </form>
 
-                </td>
+        </div>
-                <td dmx-text="db_fullName"></td>
-                <td dmx-text="db_licenseNumber"></td>
-                <td dmx-text="db_stateIssue"></td>
-                <td dmx-text="db_employeeID"></td>
-                <td dmx-text="owner"></td>
-            </tr>
-        </tbody>
-    </table>
-    <div class="row">
-        <h3>{{DBSC1.data.query.count()+" Training records"}}</h3>
     </div>
 </div>
-<!--
-<script src="/PDF/pdfLibSignature.js"></script>
--->
 <meta name="ac:route" content="/">

views/index0.ejs

@@ -0,0 +1,254 @@
+<!-- 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:{},dmxBootstrap5Tooltips:{},dmxValidator:{}}" -->
+<dmx-toggle id="dataStoreVisibality"></dmx-toggle>
+<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>
+                <h4 class="text-center fw-light">Next step. Submit your signature.</h4>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal" id="modal-error" 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-danger"><i class="fas fa-times-circle fa-6x"></i></p>
+                <h4 class="text-center fw-light">Error!</h4>
+                <h4 class="text-center fw-light">Something wrong happen. <br>Get help from a Trainer.!</h4>
+                <p>system returned: {{serverconnectform1.lastError.message}}</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="modal" id="SignatureModal1" 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">Hi {{tableRepeat1[0].db_fullName}}, Time for a 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="signatureCanvasModal" 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>
+<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Driver Information</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <%- await include('/partials/dataStoreRecordsTable', Object.assign({}, locals)) %>
+
+            </div>
+            <div class="modal-footer">{{DateTimeNow.datetime.formatDate('MM-dd-yyyy')}}</div>
+        </div>
+    </div>
+</div>
+<div class="container wappler-block pt-3 pb-3">
+
+    <nav class="navbar navbar-expand-lg justify-content-around">
+        <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>
+        <div id="collapse1" class="collapse navbar-collapse">
+            <a class="navbar-brand" href="#">ERT</a>
+            <div class="navbar-nav w-100 justify-content-start">
+                <div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">File</a>
+                    <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="#">Something else here</a>
+                    </div>
+                </div>
+                <div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown2" role="button" aria-haspopup="true" aria-expanded="false">Edit</a>
+                    <div class="dropdown-menu" aria-labelledby="dropdown2">
+                        <a class="dropdown-item" href="#">Action</a>
+                        <a class="dropdown-item" href="#">Another action</a>
+                        <a class="dropdown-item" href="#">Something else here</a>
+                    </div>
+                </div>
+                <div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown3" role="button" aria-haspopup="true" aria-expanded="false">view</a>
+                    <div class="dropdown-menu" aria-labelledby="dropdown3">
+                        <a class="dropdown-item" dmx-on:click="modal1.show()">Show Records</a>
+                        <a class="dropdown-item" href="#">Another action</a>
+                        <a class="dropdown-item" href="#">Something else here</a>
+                    </div>
+                </div>
+                <div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown4" role="button" aria-haspopup="true" aria-expanded="false">Help</a>
+                    <div class="dropdown-menu" aria-labelledby="dropdown4">
+                        <a class="dropdown-item">Action</a>
+                        <a class="dropdown-item" href="#">Another action</a>
+                        <a class="dropdown-item" href="#">Something else here</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+</div>
+
+<dmx-datetime id="DateTimeNow" interval="minutes"></dmx-datetime>
+<script is="dmx-flow" id="delConfirm" type="text/dmx-flow">{
+  bootbox.confirm: {
+    name: "confirmYesNo",
+    message: "Delete ",
+    title: "Remove list item",
+    buttons: {
+      confirm: {label: "Delete", className: "btn-danger"},
+      cancel: {label: "Cancel", className: "btn-warning"}
+    },
+    then: {
+      steps: {
+        serverConnect: {
+          name: "pageFlowSC1",
+          outputType: "object",
+          url: "/api/delRecord",
+          site: "ERTFastFiller"
+        }
+      }
+    }
+  }
+}</script>
+<dmx-serverconnect id="DBInsert" url="/api/insert" noload="true"></dmx-serverconnect>
+<div is="dmx-bs5-toasts" id="toasts1"></div>
+<dmx-serverconnect id="DBSC1" url="/api/query"></dmx-serverconnect>
+<dmx-value id="dataID"></dmx-value>
+<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="container">
+
+</div>
+<div class="container">
+    <div class="row" id="daForm">
+
+        <div class="col" id="userEntryForm">
+            <dmx-value id="insertID"></dmx-value>
+            <div class="container">
+
+                <div class="row">
+                    <div class="col" id="colTop">
+                        <h1 class="text-center">Lets Begin<br>Please enter required information&nbsp;</h1>
+                    </div>
+                </div>
+                <div class="row">
+                    <form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="/api/insert" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-on:done="modal1.hide();DBSC1.load({})" dmx-on:submit="" dmx-on:success="insertID.setValue(serverconnectform1.data.insert.identity);modalsuccess.show()">
+                        <div class="form-group mb-3 row">
+                            <label for="inp_db_fullName" class="col-sm-2 col-form-label">full name</label>
+                            <div class="col-sm-6">
+                                <input type="text" class="form-control" id="inp_db_fullName" name="db_fullName" aria-describedby="inp_db_fullName_help" placeholder="Enter Db full name" required="">
+                            </div>
+                            <div class="col-3">
+
+                            </div>
+                        </div>
+                        <div class="form-group mb-3 row">
+                            <label for="inp_db_licenseNumber" class="col-sm-2 col-form-label">license number</label>
+                            <div class="col-sm-7">
+                                <input type="text" class="form-control" id="inp_db_licenseNumber" name="db_licenseNumber" aria-describedby="inp_db_licenseNumber_help" placeholder="Enter Db license number">
+                            </div>
+                        </div>
+                        <div class="form-group mb-3 row">
+                            <label for="db_stateIssue" class="col-sm-2 col-form-label">state issue</label>
+                            <div class="col-sm-4">
+                                <select id="db_stateIssue" class="form-select" dmx-bind:options="stateJSON.data.states" optiontext="name" optionvalue="abbreviation" name="db_stateIssue" dmx-bind:value="selectedValue">
+                                </select>
+                            </div>
+                            <div class="col-6">
+                                <small id="bs5-form-group-help1" class="form-text text-muted">State your license was issued by</small>
+                            </div>
+                        </div>
+                        <div class="form-group mb-3 row">
+                            <label for="select1" class="col-sm-2 col-form-label">Trainer</label>
+                            <div class="col-4">
+                                <select id="select1" class="form-select" dmx-bind:options="trainerJSON.data.Trainer" name="db_employeeID" optiontext="Name" optionvalue="ID" dmx-bind:value="selectedValue">
+                                </select>
+                            </div>
+
+                        </div>
+                        <div class="form-group mb-3 row">
+                            <label for="inp_owner" class="col-sm-2 col-form-label">Date</label>
+                            <div class="col-sm-5">
+                                <input type="text" class="form-control" id="inp_owner" name="owner" aria-describedby="inp_owner_help" placeholder="Enter Owner" dmx-bind:value="DateTimeNow.datetime.formatDate('MM-dd-yyyy')" readonly="true">
+                            </div>
+                        </div>
+                        <div class="form-group mb-3 row">
+                            <div class="col-sm-2">
+                                <p>ID: {{insertID.value}}</p>
+                                &nbsp;
+                            </div>
+                            <div class="col-sm-10">
+                                <button type="submit" class="btn btn-success" dmx-bind:disabled="state.executing">Save <span class="spinner-border spinner-border-sm" role="status" dmx-show="state.executing"></span></button>
+                                <button id="xbtn4" class="btn btn-secondary" data-bs-dismiss="modal" type="reset">Clear</button>
+                            </div>
+                        </div>
+                    </form>
+                    <div class="col" id="colLeft">
+
+                    </div>
+                    <div class="col">
+                        <button id="btn7" class="btn btn-success" dmx-bind:value="insertID.value">ID {{insertID.value}}</button>
+                        <p>Informational panel</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+    <div class="col" id="colTrainerTable">
+        <h3>{{DBSC1.data.query.count()}} Training records</h3>
+
+    </div>
+    <div class="row" id="eSignatureRow">
+        <div class="col text-center" id="eSignatureColumn">
+            <dmx-value id="signatureElementName" dmx-bind:value="'signatureCanvas'"></dmx-value>
+
+
+
+            <p>You 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)" class="bg-warning-subtle" ontouchstart="startDrawing(event.touches[0])" ontouchend="endDrawing()" ontouchmove="draw(event.touches[0])"></canvas>
+            <div id="eSignatureRowButtons" class="row ms-0 me-0 ps-0 pe-0 justify-content-center">
+                <button id="btn4_ClearSignature" class="btn btn-warning w-25 " data-bs-toggle="button" onclick="clearCanvas()" dmx-style:margin-right="'16px'">Clear Signature</button>
+                <button type="button" class="btn btn-danger w-auto visually-hidden" data-bs-dismiss="modal" dmx-bs-tooltip="'Close Signature Panel'" data-bs-trigger="hover" data-bs-placement="top" dmx-style:margin-right="'16px'">Close</button>
+                <button type="button" class="btn btn-success w-auto" onclick="runMyFunction()">Save</button>
+            </div>
+
+
+
+
+        </div>
+    </div>
+
+</div>
+
+<script src="/PDF/pdfLibSignature.js"></script>
+<script src="/PDF/dummyFunctions.js"></script>
+
+<meta name="ac:route" content="/index0">

views/layouts/main.ejs

@@ -27,37 +27,23 @@
   <script src="/dmxAppConnect/dmxBootstrap5Popovers/dmxBootstrap5Popovers.js" defer></script>
   <script src="/dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer></script>
   <script src="/dmxAppConnect/dmxSwiper/dmxSwiper.js" defer></script>
-  <link rel="stylesheet" href="/dmxAppConnect/dmxSwiper/swiper.min.css" />
+
   <script src="/dmxAppConnect/dmxSwiper/swiper.min.js" defer></script>
   <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>
 
 
 
+  <link rel="stylesheet" href="/dmxAppConnect/dmxSwiper/swiper.min.css" />
+  <script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>
 </head>
 
 <body is="dmx-app" id="main">
   <div class="container">
-    <nav class="navbar navbar-expand-lg">
-      <div class="navbar-nav w-100">
-        <div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">Command</a>
-          <div class="dropdown-menu" aria-labelledby="dropdown1">
-            <a class="dropdown-item" href="/" internal="true">Home</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <a class="dropdown-item" href="/signature" internal="true">Signature</a>
-          </div>
-        </div>
-        <a class="nav-item nav-link" href="#">File</a>
-        <a class="nav-item nav-link" href="#">Edit</a>
-        <a class="nav-item nav-link" href="#">About</a>
-        <a class="nav-item nav-link" href="/observationPage">Observation</a>
-        <a class="nav-item nav-link" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvas1">Settings</a>
-      </div>
-    </nav>
   </div>
   <header>
 
@@ -71,7 +57,7 @@
     <p class="text-center d-lg-none d-xl-block">ERT Fast Fill - Developed by Jeff Daniels (DNIJE) / Data only locally saved / Powered by Docker and Node.js</p>
   </footer>
   <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
-  <script src="/PDF/pdfLibSignature.js"></script>
+
 
 </body>
 

views/observationPage.ejs

@@ -138,7 +138,7 @@
     <div class="row">
         <div class="col-3">
             <p class="text-center"><b>Who you are grading</b></p>
-            <select id="select1" class="form-select" dmx-bind:options="qDB.data.query" optiontext="db_fullName" optionvalue="ID">
+            <select id="select1" class="form-select" dmx-bind:options="qDB.data.query" optiontext="db_fullName" optionvalue="ID" dmx-bind:disabled="datastore1.data.hasItems()">
             </select>
         </div>
         <div class="col">

views/partials/da_data_form.ejs

@@ -0,0 +1,51 @@
+<!-- Wappler include head-page="index0" appConnect="local" is="dmx-app" bootstrap5="local" fontawesome_5="cdn" -->
+<dmx-value id="insertID"></dmx-value>
+<div class="container">
+    <form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="/api/insert" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-on:done="modal1.hide();DBSC1.load({})" dmx-on:submit="" dmx-on:success="insertID.setValue(serverconnectform1.data.insert.identity)">
+        <div class="form-group mb-3 row">
+            <label for="inp_db_fullName" class="col-sm-2 col-form-label">full name</label>
+            <div class="col-sm-10">
+                <input type="text" class="form-control" id="inp_db_fullName" name="db_fullName" aria-describedby="inp_db_fullName_help" placeholder="Enter Db full name">
+            </div>
+        </div>
+        <div class="form-group mb-3 row">
+            <label for="inp_db_licenseNumber" class="col-sm-2 col-form-label">license number</label>
+            <div class="col-sm-10">
+                <input type="text" class="form-control" id="inp_db_licenseNumber" name="db_licenseNumber" aria-describedby="inp_db_licenseNumber_help" placeholder="Enter Db license number">
+            </div>
+        </div>
+        <div class="form-group mb-3 row">
+            <label for="db_stateIssue" class="col-sm-2 col-form-label">state issue</label>
+            <div class="col-sm-4">
+                <select id="db_stateIssue" class="form-select" dmx-bind:options="stateJSON.data.states" optiontext="name" optionvalue="abbreviation" name="db_stateIssue" dmx-bind:value="selectedValue">
+                </select>
+            </div>
+            <div class="col-6">
+                <small id="bs5-form-group-help1" class="form-text text-muted">Your great help text.</small>
+            </div>
+        </div>
+        <div class="form-group mb-3 row">
+            <label for="inp_db_employeeID" class="col-sm-2 col-form-label">Trainer</label>
+            <div class="col-sm-3">
+                <input type="number" class="form-control" id="inp_db_employeeID" name="db_employeeID" aria-describedby="inp_db_employeeID_help" placeholder="Enter Db employee" dmx-bind:value="select1.selectedValue" readonly="true">
+            </div>
+            <div class="col-6 offset-1">
+                <select id="select1" class="form-select" dmx-bind:options="trainerJSON.data.Trainer" name="db_trainerID" optiontext="Name" optionvalue="ID" dmx-bind:value="selectedValue">
+                </select>
+            </div>
+        </div>
+        <div class="form-group mb-3 row">
+            <label for="inp_owner" class="col-sm-2 col-form-label">Date</label>
+            <div class="col-sm-10">
+                <input type="text" class="form-control" id="inp_owner" name="owner" aria-describedby="inp_owner_help" placeholder="Enter Owner" dmx-bind:value="DateTimeNow.datetime.formatDate('MM-dd-yyyy')" readonly="true">
+            </div>
+        </div>
+        <div class="form-group mb-3 row">
+            <div class="col-sm-2">&nbsp;</div>
+            <div class="col-sm-10">
+                <button type="submit" class="btn btn-success" dmx-bind:disabled="state.executing">Save <span class="spinner-border spinner-border-sm" role="status" dmx-show="state.executing"></span></button>
+                <button id="xbtn4" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+            </div>
+        </div>
+    </form>
+</div>

views/partials/dataStoreRecordsTable.ejs

@@ -0,0 +1,31 @@
+<!-- Wappler include head-page="index0" appConnect="local" is="dmx-app" bootstrap5="local" fontawesome_5="cdn" -->
+<div class="row">
+    <table class="table" dmx-show="DBSC1.data.query.hasItems()">
+        <thead>
+            <tr>
+                <th>DELETE</th>
+                <th>DA Name</th>
+                <th>license number</th>
+                <th>state issue</th>
+                <th>Trainer #</th>
+                <th>Date</th>
+            </tr>
+        </thead>
+        <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="DBSC1.data.query" id="tableRepeat1">
+            <tr>
+                <td dmx-bs-tooltip="'Click will delete without confirmation'" data-bs-trigger="hover" data-bs-placement="left">
+                    <form action="/api/delRecord" method="post" dmx-on:success="DBSC1.load({})" is="dmx-serverconnect-form" id="serverconnectform3">
+                        <input id="deleteid" name="deleteid" type="hidden" class="form-control" dmx-bind:value="ID">
+                        <button id="btn3" class="btn btn-sm btn-outline-danger" dmx-text="ID" type="submit">Button</button>
+                    </form>
+
+                </td>
+                <td dmx-text="db_fullName"></td>
+                <td dmx-text="db_licenseNumber"></td>
+                <td dmx-text="db_stateIssue"></td>
+                <td dmx-text="db_employeeID"></td>
+                <td dmx-text="owner"></td>
+            </tr>
+        </tbody>
+    </table>
+</div>