jeff
/
DockerERTFF
mirror of https://github.com/jndaniels/DockerERTFF.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

redo index0 move signature box to popup modal

This commit is contained in:
jndaniels 2024-12-04 00:35:49 -06:00
parent 126eab4df0
commit 92caaa3f8e
31 changed files with 1009 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.wappler/migrations/DB/20241203212948_ADD - signature data field.js Normal file
View File

@ -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');
})
};

16
.wappler/targets/Development/databases/DB.json
View File

@ -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
}
}
}
},
@ -218,4 +232,4 @@
},
"views": {}
}
}
}

40
app/api/s3ListBuckets.json
View File

@ -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
}

3
app/api/s3ListFiles.json
View File

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

3
app/api/s3PutFile.json
View File

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

52
app/api/signatureUpload.json
View File

@ -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
}
}
}

99
app/api/uploadSignature.json
View File

@ -1,61 +1,50 @@
{
"meta": {
"$_POST": [
{
"type": "text",
"name": "imageData"
}
]
[
{
"name": "decodedImage",
"module": "core",
"action": "setvalue",
"options": {
"value": "image.replace(/^data:image\\/\\w+;base64,/, \"\")"
},
"meta": [],
"outputType": "text",
"output": true
},
"exec": {
"steps": [
{
"name": "upload",
"module": "upload",
"action": "upload",
"options": {
"fields": "{{decodedImage}}",
"path": "/uploads/signatures",
"template": "{guid}"
},
"meta": [
{
"name": "decodedImage",
"module": "core",
"action": "setvalue",
"options": {
"value": "{{$_POST.imageData.replace(/^data:image\\/\\w+;base64,/, \"\")}}"
},
"meta": [],
"outputType": "text"
"name": "name",
"type": "text"
},
{
"name": "saveSignatureBinary",
"module": "upload",
"action": "upload",
"options": {
"fields": "{{decodedImage}}",
"path": "/",
"template": "{guid}"
},
"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"
"name": "path",
"type": "text"
},
{
"name": "url",
"type": "text"
},
{
"name": "type",
"type": "text"
},
{
"name": "size",
"type": "text"
},
{
"name": "error",
"type": "number"
}
]
],
"outputType": "text"
}
}
]

5
app/config/modules.json Normal file
View File

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

5
package.json
View File

@ -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": [
@ -55,4 +56,4 @@
],
"ext": "ejs,js,json"
}
}
}

BIN
public/ERTSQlite.db
View File

Binary file not shown.

4
public/PDF/pdfLibSignature.js
View File

@ -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;

94
public/dmxAppConnect/dmxDatePicker/bgthemes/bootstrap.css vendored Normal file
View File

@ -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);
}

60
public/dmxAppConnect/dmxDatePicker/bgthemes/dark-calendar.css Normal file
View File

@ -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;
}

410
public/dmxAppConnect/dmxDatePicker/daterangepicker.min.css vendored Normal file
View File

@ -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;
}
}

8
public/dmxAppConnect/dmxDatePicker/daterangepicker.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

33
public/dmxAppConnect/dmxDatePicker/dmxDatePicker.css Normal file
View File

@ -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;
}

8
public/dmxAppConnect/dmxDatePicker/dmxDatePicker.js Normal file
View File

File diff suppressed because one or more lines are too long

1
public/dmxAppConnect/dmxDatePicker/dmxDatePicker.js.map Normal file
View File

File diff suppressed because one or more lines are too long

22
public/dmxAppConnect/dmxDatePicker/themes/blue.css Normal file
View File

@ -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;
}

22
public/dmxAppConnect/dmxDatePicker/themes/cyan.css Normal file
View File

@ -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;
}

22
public/dmxAppConnect/dmxDatePicker/themes/dark-gray.css Normal file
View File

@ -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;
}

22
public/dmxAppConnect/dmxDatePicker/themes/gray.css Normal file
View File

@ -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;
}

22
public/dmxAppConnect/dmxDatePicker/themes/green.css Normal file
View File

@ -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;
}

22
public/dmxAppConnect/dmxDatePicker/themes/orange.css Normal file
View File

@ -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;
}

22
public/dmxAppConnect/dmxDatePicker/themes/pink.css Normal file
View File

@ -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;
}

22
public/dmxAppConnect/dmxDatePicker/themes/purple.css Normal file
View File

@ -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;
}

22
public/dmxAppConnect/dmxDatePicker/themes/red.css Normal file
View File

@ -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;
}

22
public/dmxAppConnect/dmxDatePicker/themes/teal.css Normal file
View File

@ -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;
}

36
public/js/libProcessScript.js
View File

@ -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);
});
}

79
views/index0.ejs
View File

@ -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:{}}" -->
<dmx-serverconnect id="listBuckets" url="/api/s3ListBuckets"></dmx-serverconnect>
<!-- 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" -->
<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>
<canvas id="signatureCanvasModal" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)"></canvas>
<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>
<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">
<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 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" 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">
<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 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" 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,26 +268,16 @@
&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>
<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>
</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">
@ -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>

9
views/layouts/main.ejs
View File

@ -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">