redo index0 move signature box to popup modal

.wappler/migrations/DB/20241203212948_ADD - signature data field.js

@@ -0,0 +1,15 @@
+
+exports.up = function(knex) {
+  return knex.schema
+    .table('da', async function (table) {
+      table.string('db_SignatureData');
+    })
+
+};
+
+exports.down = function(knex) {
+  return knex.schema
+    .table('da', async function (table) {
+      table.dropColumn('db_SignatureData');
+    })
+};

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

@@ -59,6 +59,20 @@
               "unique": false,
               "nullable": true
             }
+          },
+          "db_SignatureData": {
+            "ui": {
+              "label": "Signature",
+              "help": "Base64 encoded image "
+            },
+            "meta": [],
+            "db": {
+              "type": "string",
+              "maxLength": 255,
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
           }
         }
       },

app/api/s3ListBuckets.json

@@ -1,40 +0,0 @@
-{
-  "name": "listBuckets",
-  "module": "s3",
-  "action": "listBuckets",
-  "options": {
-    "provider": "s3"
-  },
-  "outputType": "object",
-  "meta": [
-    {
-      "name": "Buckets",
-      "type": "array",
-      "sub": [
-        {
-          "name": "Name",
-          "type": "text"
-        },
-        {
-          "name": "CreationDate",
-          "type": "date"
-        }
-      ]
-    },
-    {
-      "name": "Owner",
-      "type": "object",
-      "sub": [
-        {
-          "name": "DisplayName",
-          "type": "text"
-        },
-        {
-          "name": "ID",
-          "type": "text"
-        }
-      ]
-    }
-  ],
-  "output": true
-}

app/api/s3ListFiles.json

@@ -1,3 +0,0 @@
-{
-  "exec": {}
-}

app/api/s3PutFile.json

@@ -1,3 +0,0 @@
-{
-  "exec": {}
-}

app/api/signatureUpload.json

@@ -1,52 +0,0 @@
-{
-  "meta": {
-    "$_POST": [
-      {
-        "type": "text",
-        "name": "imageData"
-      }
-    ]
-  },
-  "exec": {
-    "steps": {
-      "name": "fileUpload",
-      "module": "upload",
-      "action": "upload",
-      "options": {
-        "fields": "{{$_POST.imageData}}",
-        "path": "/uploads",
-        "replaceSpace": true,
-        "replaceDiacritics": true,
-        "asciiOnly": true
-      },
-      "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": "array",
-      "output": true
-    }
-  }
-}

app/api/uploadSignature.json

@@ -1,31 +1,22 @@
-{
+[
-  "meta": {
-    "$_POST": [
-      {
-        "type": "text",
-        "name": "imageData"
-      }
-    ]
-  },
-  "exec": {
-    "steps": [
   {
     "name": "decodedImage",
     "module": "core",
     "action": "setvalue",
     "options": {
-          "value": "{{$_POST.imageData.replace(/^data:image\\/\\w+;base64,/, \"\")}}"
+      "value": "image.replace(/^data:image\\/\\w+;base64,/, \"\")"
     },
     "meta": [],
-        "outputType": "text"
+    "outputType": "text",
+    "output": true
   },
   {
-        "name": "saveSignatureBinary",
+    "name": "upload",
     "module": "upload",
     "action": "upload",
     "options": {
       "fields": "{{decodedImage}}",
-          "path": "/",
+      "path": "/uploads/signatures",
       "template": "{guid}"
     },
     "meta": [
@@ -57,5 +48,3 @@
     "outputType": "text"
   }
 ]
-  }
-}

app/config/modules.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "sharp": "^0.29.3"
+  }
+}

package.json

@@ -43,7 +43,8 @@
     "socket.io": "^4.7.5",
     "sqlite3": "^5.1.6",
     "unzipper": "^0.12.1",
-    "uuid": "^10.0.0"
+    "uuid": "^10.0.0",
+    "sharp": "^0.32.6"
   },
   "nodemonConfig": {
     "watch": [

public/PDF/pdfLibSignature.js

@@ -1,8 +1,12 @@
 // JavaScript Document v1.3
 console.log("LIBRARY: pdfLibSignature.js")
 //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');
+// pull the id fromthe active canvas by detecting the canvas.target 
+//and pulling the canvas.id from that -- FUTURE for more than 1 canvas on same page (i.e in a modal)
+//let activeCanvasId = null
 let drawing = false;
 
 

public/dmxAppConnect/dmxDatePicker/bgthemes/bootstrap.css

@@ -0,0 +1,94 @@
+/* Bootstrap 5.3 Theme */
+
+.daterangepicker {
+  background-color: var(--bs-body-bg);
+  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+  border-radius: var(--bs-border-radius-sm);
+}
+
+.daterangepicker:before {
+  border-bottom: 7px solid var(--bs-border-color);
+}
+
+.daterangepicker:after {
+  border-bottom: 6px solid var(--bs-body-bg);
+}
+
+.daterangepicker .calendar-table {
+  background-color: var(--bs-body-bg);
+  border: none;
+  color: var(--bs-body-color);
+}
+
+.daterangepicker .calendar-table .next span,
+.daterangepicker .calendar-table .prev span {
+  color: var(--bs-emphasis-color);
+  border: solid var(--bs-emphasis-color);
+  border-width: 0 2px 2px 0;
+}
+
+.daterangepicker td.available:not(.in-range):hover,
+.daterangepicker th.available:not(.in-range):hover {
+  background-color: var(--bs-secondary-bg) !important;
+  color: var(--bs-emphasis-color);
+}
+
+.daterangepicker td.off,
+.daterangepicker td.off.end-date,
+.daterangepicker td.off.in-range,
+.daterangepicker td.off.start-date {
+  background-color: var(--bs-body-bg);
+  color: rgba(var(--bs-body-color-rgb), 0.5);
+}
+
+.daterangepicker td.in-range {
+  background-color: var(--bs-primary-bg-subtle);
+  color: var(--bs-body-color);
+}
+
+.daterangepicker td.in-range:hover {
+  background-color: var(--bs-primary-bg-subtle);
+  color: var(--bs-emphasis-color);
+}
+
+.daterangepicker td.active,
+.daterangepicker td.active:hover {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+}
+
+.daterangepicker .drp-buttons {
+  border-top: var(--bs-border-width) var(--bs-border-style)
+    var(--bs-border-color);
+}
+
+.daterangepicker .drp-selected {
+  color: var(--bs-body-color);
+}
+
+.applyBtn {
+  color: var(--bs-white);
+  background-color: var(--bs-primary);
+}
+
+.applyBtn:hover {
+  background-color: var(--bs-primary);
+}
+
+.cancelBtn {
+  color: var(--bs-secondary-color);
+  background-color: var(--bs-secondary-bg);
+}
+
+.cancelBtn:hover {
+  background-color: var(--bs-secondary-bg);
+}
+
+.daterangepicker select.hourselect,
+.daterangepicker select.minuteselect,
+.daterangepicker select.secondsselect,
+.daterangepicker select.ampmselect {
+  background: var(--bs-secondary-bg);
+  border-color: var(--bs-secondary-bg);
+  color: var(--bs-secondary-color);
+}

public/dmxAppConnect/dmxDatePicker/bgthemes/dark-calendar.css

@@ -0,0 +1,60 @@
+.daterangepicker {
+		background-color: #343a40;
+		border: 1px solid #111;
+	}
+	.daterangepicker:before {
+	   border-bottom: 7px solid #111;
+	}
+	.daterangepicker:after {
+	   border-bottom: 6px solid #343a40;
+	}
+	.daterangepicker .calendar-table {
+	   background-color: #343a40;
+	   border: none;
+	   color: #f8f9fa;
+	}
+	.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
+	    color: #f8f9fa;
+		border: solid #f8f9fa;
+		border-width: 0 2px 2px 0;
+	}
+	.daterangepicker td.available:not(.in-range):hover, .daterangepicker th.available:not(.in-range):hover {
+		background-color: #495057 !important;
+	}
+	.daterangepicker td.off, .daterangepicker td.off.end-date, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date {
+		background-color: #394046;
+		color: #777;
+    }
+
+	.daterangepicker td.in-range {
+		background-color: #2b2e31;
+		color: #eee;
+	}
+	.daterangepicker td.in-range:hover {
+		background-color: #3c4044;
+
+	}
+	.daterangepicker td.active, .daterangepicker td.active:hover {
+		background-color: #22262a;
+		color: #f8f9fa;
+	}
+	.daterangepicker .drp-buttons {
+		border-top: 1px solid #3c4044;
+	}
+	.daterangepicker .drp-selected {
+	   color: #f8f9fa;
+	}
+	.applyBtn {
+		color: #f8f9fa;
+		background-color: #22262a;
+	}
+	.applyBtn:hover {
+		background-color: #0b0d0e;
+	}
+	.cancelBtn {
+		color: #f8f9fa;
+		background-color: #394046;
+	}
+	.cancelBtn:hover {
+		background-color: #272c2f;
+	}

public/dmxAppConnect/dmxDatePicker/daterangepicker.min.css

@@ -0,0 +1,410 @@
+.daterangepicker {
+  position: absolute;
+  color: inherit;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  width: 278px;
+  max-width: none;
+  padding: 0;
+  margin-top: 7px;
+  top: 100px;
+  left: 20px;
+  z-index: 3001;
+  display: none;
+  font-family: arial;
+  font-size: 15px;
+  line-height: 1em;
+}
+
+.daterangepicker:before, .daterangepicker:after {
+  position: absolute;
+  display: inline-block;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  content: '';
+}
+
+.daterangepicker:before {
+  top: -7px;
+  border-right: 7px solid transparent;
+  border-left: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+}
+
+.daterangepicker:after {
+  top: -6px;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+  border-left: 6px solid transparent;
+}
+
+.daterangepicker.opensleft:before {
+  right: 9px;
+}
+
+.daterangepicker.opensleft:after {
+  right: 10px;
+}
+
+.daterangepicker.openscenter:before {
+  left: 0;
+  right: 0;
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.daterangepicker.openscenter:after {
+  left: 0;
+  right: 0;
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.daterangepicker.opensright:before {
+  left: 9px;
+}
+
+.daterangepicker.opensright:after {
+  left: 10px;
+}
+
+.daterangepicker.drop-up {
+  margin-top: -7px;
+}
+
+.daterangepicker.drop-up:before {
+  top: initial;
+  bottom: -7px;
+  border-bottom: initial;
+  border-top: 7px solid #ccc;
+}
+
+.daterangepicker.drop-up:after {
+  top: initial;
+  bottom: -6px;
+  border-bottom: initial;
+  border-top: 6px solid #fff;
+}
+
+.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
+  float: none;
+}
+
+.daterangepicker.single .drp-selected {
+  display: none;
+}
+
+.daterangepicker.show-calendar .drp-calendar {
+  display: block;
+}
+
+.daterangepicker.show-calendar .drp-buttons {
+  display: block;
+}
+
+.daterangepicker.auto-apply .drp-buttons {
+  display: none;
+}
+
+.daterangepicker .drp-calendar {
+  display: none;
+  max-width: 270px;
+}
+
+.daterangepicker .drp-calendar.left {
+  padding: 8px 0 8px 8px;
+}
+
+.daterangepicker .drp-calendar.right {
+  padding: 8px;
+}
+
+.daterangepicker .drp-calendar.single .calendar-table {
+  border: none;
+}
+
+.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
+  color: #fff;
+  border: solid black;
+  border-width: 0 2px 2px 0;
+  border-radius: 0;
+  display: inline-block;
+  padding: 3px;
+}
+
+.daterangepicker .calendar-table .next span {
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+
+.daterangepicker .calendar-table .prev span {
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+}
+
+.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  min-width: 32px;
+  width: 32px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.daterangepicker .calendar-table {
+  border: 1px solid #fff;
+  border-radius: 4px;
+  background-color: #fff;
+}
+
+.daterangepicker .calendar-table table {
+  width: 100%;
+  margin: 0;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+  background-color: #eee;
+  border-color: transparent;
+  color: inherit;
+}
+
+.daterangepicker td.week, .daterangepicker th.week {
+  font-size: 80%;
+  color: #ccc;
+}
+
+.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
+  background-color: #fff;
+  border-color: transparent;
+  color: #999;
+}
+
+.daterangepicker td.in-range {
+  background-color: #ebf4f8;
+  border-color: transparent;
+  color: #000;
+  border-radius: 0;
+}
+
+.daterangepicker td.start-date {
+  border-radius: 4px 0 0 4px;
+}
+
+.daterangepicker td.end-date {
+  border-radius: 0 4px 4px 0;
+}
+
+.daterangepicker td.start-date.end-date {
+  border-radius: 4px;
+}
+
+.daterangepicker td.active, .daterangepicker td.active:hover {
+  background-color: #357ebd;
+  border-color: transparent;
+  color: #fff;
+}
+
+.daterangepicker th.month {
+  width: auto;
+}
+
+.daterangepicker td.disabled, .daterangepicker option.disabled {
+  color: #999;
+  cursor: not-allowed;
+  text-decoration: line-through;
+}
+
+.daterangepicker select.monthselect, .daterangepicker select.yearselect {
+  font-size: 12px;
+  padding: 1px;
+  height: auto;
+  margin: 0;
+  cursor: default;
+}
+
+.daterangepicker select.monthselect {
+  margin-right: 2%;
+  width: 56%;
+}
+
+.daterangepicker select.yearselect {
+  width: 40%;
+}
+
+.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
+  width: 50px;
+  margin: 0 auto;
+  background: #eee;
+  border: 1px solid #eee;
+  padding: 2px;
+  outline: 0;
+  font-size: 12px;
+}
+
+.daterangepicker .calendar-time {
+  text-align: center;
+  margin: 4px auto 0 auto;
+  line-height: 30px;
+  position: relative;
+}
+
+.daterangepicker .calendar-time select.disabled {
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+.daterangepicker .drp-buttons {
+  clear: both;
+  text-align: right;
+  padding: 8px;
+  border-top: 1px solid #ddd;
+  display: none;
+  line-height: 12px;
+  vertical-align: middle;
+}
+
+.daterangepicker .drp-selected {
+  display: inline-block;
+  font-size: 12px;
+  padding-right: 8px;
+}
+
+.daterangepicker .drp-buttons .btn {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 4px 8px;
+}
+
+.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
+  border-right: 1px solid #ddd;
+}
+
+.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
+  border-left: 1px solid #ddd;
+}
+
+.daterangepicker.show-ranges.rtl .drp-calendar.right {
+  border-right: 1px solid #ddd;
+}
+
+.daterangepicker.show-ranges.ltr .drp-calendar.left {
+  border-left: 1px solid #ddd;
+}
+
+.daterangepicker .ranges {
+  float: none;
+  text-align: left;
+  margin: 0;
+}
+
+.daterangepicker.show-calendar .ranges {
+  margin-top: 8px;
+}
+
+.daterangepicker .ranges ul {
+  list-style: none;
+  margin: 0 auto;
+  padding: 0;
+  width: 100%;
+}
+
+.daterangepicker .ranges li {
+  font-size: 12px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.daterangepicker .ranges li:hover {
+  background-color: #eee;
+}
+
+.daterangepicker .ranges li.active {
+  background-color: #08c;
+  color: #fff;
+}
+
+/*  Larger Screen Styling */
+@media (min-width: 564px) {
+  .daterangepicker {
+    width: auto;
+  }
+
+  .daterangepicker .ranges ul {
+    width: 140px;
+  }
+
+  .daterangepicker.single .ranges ul {
+    width: 100%;
+  }
+
+  .daterangepicker.single .drp-calendar.left {
+    clear: none;
+  }
+
+  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
+    float: left;
+  }
+
+  .daterangepicker {
+    direction: ltr;
+    text-align: left;
+  }
+
+  .daterangepicker .drp-calendar.left {
+    clear: left;
+    margin-right: 0;
+  }
+
+  .daterangepicker .drp-calendar.left .calendar-table {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .daterangepicker .drp-calendar.right {
+    margin-left: 0;
+  }
+
+  .daterangepicker .drp-calendar.right .calendar-table {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .daterangepicker .drp-calendar.left .calendar-table {
+    padding-right: 8px;
+  }
+
+  .daterangepicker .ranges, .daterangepicker .drp-calendar {
+    float: left;
+  }
+}
+
+@media (min-width: 730px) {
+  .daterangepicker .ranges {
+    width: auto;
+  }
+
+  .daterangepicker .ranges {
+    float: left;
+  }
+
+  .daterangepicker.rtl .ranges {
+    float: right;
+  }
+
+  .daterangepicker .drp-calendar.left {
+    clear: none !important;
+  }
+}

public/dmxAppConnect/dmxDatePicker/dmxDatePicker.css

@@ -0,0 +1,33 @@
+.drp-buttons button {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 4px;
+  margin: 0 5px;
+}
+
+.drp-buttons button:hover, .drp-buttons button:focus {
+  text-decoration: none;
+}
+.drp-buttons button:not(:disabled):not(.disabled) {
+    cursor: pointer;
+}
+.drp-buttons button:focus {
+  outline: none;
+}
+.cancelBtn {
+    color: #212529;
+    background-color: #f8f9fa;
+}
+.cancelBtn:hover {
+    background-color: #e4e4e4;
+}
+.applyBtn {
+    color: #fff;
+    background-color: #357ebd;
+}
+.applyBtn:hover {
+    background-color: #275d8b;
+}

public/dmxAppConnect/dmxDatePicker/themes/blue.css

@@ -0,0 +1,22 @@
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+    background-color: #eee;
+}
+.daterangepicker td.in-range {
+    background-color: #e5f2ff !important;
+    color: #000 !important;
+}
+.daterangepicker td.in-range:hover {
+    background-color: #b3d7ff !important;
+
+}
+.daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: #007bff !important;
+    color: #fff !important;
+}
+.applyBtn {
+    color: #fff !important;
+    background-color: #007bff !important;
+}
+.applyBtn:hover {
+	background-color: #006fe6 !important;
+}

public/dmxAppConnect/dmxDatePicker/themes/cyan.css

@@ -0,0 +1,22 @@
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+    background-color: #eee;
+}
+.daterangepicker td.in-range {
+    background-color: #e8f9fc !important;
+    color: #000 !important;
+}
+.daterangepicker td.in-range:hover {
+    background-color: #bbeef6 !important;
+
+}
+.daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: #17a2b8 !important;
+    color: #fff !important;
+}
+.applyBtn {
+    color: #fff !important;
+    background-color: #17a2b8 !important;
+}
+.applyBtn:hover {
+	background-color: #148c9f !important;
+}

public/dmxAppConnect/dmxDatePicker/themes/dark-gray.css

@@ -0,0 +1,22 @@
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+    background-color: #dadada;
+}
+.daterangepicker td.in-range {
+    background-color: #f1f2f4 !important;
+    color: #000 !important;
+}
+.daterangepicker td.in-range:hover {
+    background-color: #d5d9dd !important;
+
+}
+.daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: #343a40 !important;
+    color: #fff !important;
+}
+.applyBtn {
+    color: #fff !important;
+    background-color: #343a40 !important;
+}
+.applyBtn:hover {
+	background-color: #505962 !important;
+}

public/dmxAppConnect/dmxDatePicker/themes/gray.css

@@ -0,0 +1,22 @@
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+    background-color: #eee;
+}
+.daterangepicker td.in-range {
+    background-color: #d6d9dc !important;
+    color: #000 !important;
+}
+.daterangepicker td.in-range:hover {
+    background-color: #bbc0c4 !important;
+
+}
+.daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: #6c757d !important;
+    color: #fff !important;
+}
+.applyBtn {
+    color: #fff !important;
+    background-color: #6c757d !important;
+}
+.applyBtn:hover {
+	background-color: #6a737b !important;
+}

public/dmxAppConnect/dmxDatePicker/themes/green.css

@@ -0,0 +1,22 @@
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+    background-color: #eee;
+}
+.daterangepicker td.in-range {
+    background-color: #eafaee !important;
+    color: #24292e !important;
+}
+.daterangepicker td.in-range:hover {
+    background-color: #c1f0cc !important;
+
+}
+.daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: #28a745 !important;
+    color: #fff !important;
+}
+.applyBtn {
+    color: #fff !important;
+    background-color: #28a745 !important;
+}
+.applyBtn:hover {
+	background-color: #22903c !important;
+}

public/dmxAppConnect/dmxDatePicker/themes/orange.css

@@ -0,0 +1,22 @@
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+    background-color: #eee;
+}
+.daterangepicker td.in-range {
+    background-color: #fff1e6 !important;
+    color: #000 !important;
+}
+.daterangepicker td.in-range:hover {
+    background-color: #fed5b3 !important;
+
+}
+.daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: #fd7e14 !important;
+    color: #fff !important;
+}
+.applyBtn {
+    color: #fff !important;
+    background-color: #6c757d !important;
+}
+.applyBtn:hover {
+	background-color: #e46902 !important;
+}

public/dmxAppConnect/dmxDatePicker/themes/pink.css

@@ -0,0 +1,22 @@
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+    background-color: #eee;
+}
+.daterangepicker td.in-range {
+    background-color: #fce8f1 !important;
+    color: #000 !important;
+}
+.daterangepicker td.in-range:hover {
+    background-color: #f7bbd6 !important;
+
+}
+.daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: #e83e8c !important;
+    color: #fff !important;
+}
+.applyBtn {
+    color: #fff !important;
+    background-color: #e83e8c !important;
+}
+.applyBtn:hover {
+	background-color: #cd186b !important;
+}

public/dmxAppConnect/dmxDatePicker/themes/purple.css

@@ -0,0 +1,22 @@
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+    background-color: #eee;
+}
+.daterangepicker td.in-range {
+    background-color: #f0ecf9 !important;
+    color: #000 !important;
+}
+.daterangepicker td.in-range:hover {
+    background-color: #d3c5ec !important;
+
+}
+.daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: #6f42c1 !important;
+    color: #fff !important;
+}
+.applyBtn {
+    color: #fff !important;
+    background-color: #6f42c1 !important;
+}
+.applyBtn:hover {
+	background-color: #6239ad !important;
+}

public/dmxAppConnect/dmxDatePicker/themes/red.css

@@ -0,0 +1,22 @@
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+    background-color: #eee;
+}
+.daterangepicker td.in-range {
+    background-color: #fbe9eb !important;
+    color: #24292e !important;
+}
+.daterangepicker td.in-range:hover {
+    background-color: #f4bec3 !important;
+
+}
+.daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: #dc3545 !important;
+    color: #fff !important;
+}
+.applyBtn {
+    color: #fff !important;
+    background-color: #dc3545 !important;
+}
+.applyBtn:hover {
+	background-color: #c42231 !important;
+}

public/dmxAppConnect/dmxDatePicker/themes/teal.css

@@ -0,0 +1,22 @@
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+    background-color: #eee;
+}
+.daterangepicker td.in-range {
+    background-color: #e9fbf6 !important;
+    color: #000 !important;
+}
+.daterangepicker td.in-range:hover {
+    background-color: #bdf4e4 !important;
+
+}
+.daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: #20c997 !important;
+    color: #fff !important;
+}
+.applyBtn {
+    color: #fff !important;
+    background-color: #20c997 !important;
+}
+.applyBtn:hover {
+	background-color: #199a74 !important;
+}

public/js/libProcessScript.js

@@ -138,7 +138,8 @@ function createDebugLogger(debug, prefix = "DD") {
     };
 }
 
-function saveSignature() {
+
+function saveSignature_OFF() { //Testing a new function under dummyfunctions section
     const canvas = document.getElementById('signatureCanvas');
     const imageData = canvas.toDataURL('image/png');
     dd(imageData.length)
@@ -173,3 +174,36 @@ function runMyFunction() {
 function generateRandomIdentifier(v) {
     return generateRandomFilename(v)
 }
+
+
+function saveSignature() {
+    const canvas = document.getElementById('signatureCanvas');
+    const imageData = canvas.toDataURL('image/png'); // Convert the canvas to a Base64 image string
+    dd("Got Signature:", imageData)
+
+    dmx.parse('serverconnect_sign.load({image: "' + imageData + '"})').then((response) => {
+        const uploadedSignature = document.getElementById('uploadedSignature');
+        dd(uploadedSignature)
+        dd("Response:", response.fileUrl)
+        uploadedSignature.src = response.fileUrl; // Set the uploaded file URL to the image element
+
+    }).catch((error) => {
+        console.error("Error uploading signature:", error);
+    });
+}
+
+
+function saveSignatureNew() {
+    const canvas = document.getElementById('signatureCanvas');
+    const imageData = canvas.toDataURL('image/png'); // Convert the canvas to a Base64 image string
+    dd("Got Signature:", imageData)
+    dmx.app.data.content.serverconnect_sign.__load({ imageData: imageData }).then((response) => {
+        dd("Success:", response);
+        const uploadedSignature = document.getElementById('uploadedSignature');
+        dd(uploadedSignature, "Response:", response.fileUrl)
+        uploadedSignature.src = response.fileUrl; // Set the uploaded file URL to the image element
+    }).catch((error) => {
+        console.error("Error:", error);
+    });
+}
+

views/index0.ejs

@@ -1,5 +1,4 @@
-<!-- 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:{},dmxS3Upload:{}}" -->
+<!-- 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:{},dmxS3Upload:{},dmxDatePicker:{},dmxMasonry:{}}" jquery_slim_35="cdn" moment_2="cdn" -->
-<dmx-serverconnect id="listBuckets" url="/api/s3ListBuckets"></dmx-serverconnect>
 <script is="dmx-flow" id="flow1" type="text/dmx-flow">[
   {
     runJS: {
@@ -18,11 +17,14 @@
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">Verify Signature</h5>
+                <h5 class="modal-title">Verify information.</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <p>Signature will show here. Is it acceptable? Save or discard.</p>
+                <div class="container">
+                    <p>A nice paragraph {{serverconnectform1.inp_db_fullName.value}}</p>
+                </div>
                 <p>
                 <div class="container" id="signatureContainer">
                     <div class="row">
@@ -76,18 +78,39 @@
     <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>
+                <h5 class="modal-title">Hi {{serverconnectform1.inp_db_fullName.value}}, double check info and sign the box below.&nbsp; Thanks.</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>
+                <h5 class="text-start text-lowercase">Please review your information for errors. Close this window to correct any mistakes, then return to complete your task. Thank you!</h5>
-                <canvas id="signatureCanvasModal" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)"></canvas>
+
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th scope="col">Name</th>
+                            <th scope="col">DL No.</th>
+                            <th scope="col">State</th>
+                            <th scope="col">Date</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <th scope="row">{{serverconnectform1.inp_db_fullName.value}}</th>
+                            <td>{{serverconnectform1.inp_db_licenseNumber.value}}</td>
+                            <td>{{serverconnectform1.db_stateIssue.value}}</td>
+                            <td>{{serverconnectform1.inp_owner.value}}</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <p>&nbsp;Please submit your signature and click the save button.</p>
+
+                <canvas id="signatureCanvasModal" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)" class="bg-warning-subtle"></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>
+                <button type="button" class="btn btn-success w-auto" dmx-on:click="serverconnectform1.submit()">Save</button>
             </div>
         </div>
     </div>
@@ -96,7 +119,7 @@
     <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>
+                <h5 class="modal-title">Record Count: {{DBSC1.data.query.count()}}&nbsp;</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
@@ -134,7 +157,7 @@
                 <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="#" dmx-on:click="SignatureModal1.show()">SignatureModal1</a>
                         <a class="dropdown-item" href="#">Something else here</a>
                     </div>
                 </div>
@@ -193,7 +216,7 @@
 
         <div class="col" id="userEntryForm">
             <dmx-value id="insertID"></dmx-value>
-            <div class="container">
+            <div class="container text-center">
 
                 <div class="row">
                     <div class="col" id="colTop">
@@ -201,20 +224,17 @@
                     </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()">
+                    <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:success="insertID.setValue(serverconnectform1.data.insert.identity);modalsuccess.show()" dmx-on:submit="SignatureModal1.hide()">
                         <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">
+                            <div class="col-sm-4">
                                 <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">
+                            <div class="col-sm-4">
-                                <input type="text" class="form-control" id="inp_db_licenseNumber" name="db_licenseNumber" aria-describedby="inp_db_licenseNumber_help" placeholder="Enter Db license number">
+                                <input type="text" class="form-control" id="inp_db_licenseNumber" name="db_licenseNumber" aria-describedby="inp_db_licenseNumber_help" placeholder="Enter Db license number" required="">
                             </div>
                         </div>
                         <div class="form-group mb-3 row">
@@ -223,7 +243,7 @@
                                 <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">
+                            <div class="col-6 text-start">
                                 <small id="bs5-form-group-help1" class="form-text text-muted">State your license was issued by</small>
                             </div>
                         </div>
@@ -237,9 +257,10 @@
                         </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">
+                            <div class="col-sm-4">
-                                <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">
+                                <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" is="dmx-date-picker" mindate="2024-12-01" maxdate="2025-12-31">
                             </div>
+                            <div class="col-6"><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"><button id="xbtn4" class="btn btn-secondary" data-bs-dismiss="modal" type="reset">Clear</button></span></button></div>
                         </div>
                         <div class="form-group mb-3 row">
                             <div class="col-sm-2">
@@ -247,25 +268,15 @@
                                 &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="btn1" class="btn btn-lg text-bg-primary text-warning fw-bold text-capitalize" data-bs-toggle="modal" data-bs-target="#SignatureModal1">Click for the next step&nbsp;</button>
-                        <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">
@@ -279,7 +290,7 @@
             <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="saveSignatureTEST2()">Save</button>
+                <button type="button" class="btn btn-success w-auto" data-bs-toggle="modal" data-bs-target="#modalVerifySignature" dmx-on:click="">Save</button>
             </div>
 
 

views/layouts/main.ejs

@@ -12,6 +12,8 @@
   <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="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>
   <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
   <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
   <link rel="stylesheet" href="/dmxAppConnect/dmxAnimateCSS/animate.min.css" />
@@ -44,6 +46,13 @@
   <script src="/dmxAppConnect/dmxS3Upload/dmxS3Upload.js" defer></script>
   <link rel="stylesheet" href="/dmxAppConnect/dmxNotifications/dmxNotifications.css" />
   <script src="/dmxAppConnect/dmxNotifications/dmxNotifications.js" defer></script>
+  <link rel="stylesheet" href="/dmxAppConnect/dmxDatePicker/daterangepicker.min.css" />
+  <script src="/dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer></script>
+  <link rel="stylesheet" href="/dmxAppConnect/dmxDatePicker/dmxDatePicker.css" />
+  <script src="/dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer></script>
+
+
+  <link rel="stylesheet" href="/dmxAppConnect/dmxDatePicker/bgthemes/bootstrap.css" />
 </head>
 
 <body is="dmx-app" id="main">