Signature working on observation page.

WIP: Cosmetic
This commit is contained in:
jndaniels 2024-12-05 05:25:02 -06:00
parent 1a9c217f5f
commit 520fd2e9a2
13 changed files with 262 additions and 69 deletions

View File

@ -6,6 +6,10 @@
"client": "sqlite3",
"connection": {
"filename": "/public/ERTSQlite.db"
}
}
},
"meta": {}
},
"actionFilePath": "file:///Z:/temp/ERTFastFiller/app/modules/connections/DB.json",
"serverType": "node",
"fileName": "db.json"
}

View File

@ -18,11 +18,6 @@
{
"type": "number",
"fieldName": "db_employeeID",
"options": {
"rules": {
"core:number": {}
}
},
"name": "db_employeeID"
},
{
@ -39,6 +34,15 @@
"type": "text",
"fieldName": "db_trainerID",
"name": "db_trainerID"
},
{
"type": "text",
"fieldName": "db_signatureData",
"ui": {
"label": "Signature",
"help": "Base64 encoded image "
},
"name": "db_signatureData"
}
]
},
@ -81,41 +85,42 @@
"table": "da",
"column": "db_fullName",
"type": "text",
"value": "{{$_POST.db_fullName}}",
"recid": 1
"value": "{{$_POST.db_fullName}}"
},
{
"table": "da",
"column": "db_licenseNumber",
"type": "text",
"value": "{{$_POST.db_licenseNumber}}",
"recid": 2
"value": "{{$_POST.db_licenseNumber}}"
},
{
"table": "da",
"column": "db_stateIssue",
"type": "text",
"value": "{{$_POST.db_stateIssue}}",
"recid": 3
"value": "{{$_POST.db_stateIssue}}"
},
{
"table": "da",
"column": "db_employeeID",
"type": "number",
"value": "{{$_POST.db_employeeID}}",
"recid": 4
"value": "{{$_POST.db_employeeID}}"
},
{
"table": "da",
"column": "owner",
"type": "text",
"value": "{{$_POST.owner}}",
"recid": 5
"value": "{{$_POST.owner}}"
},
{
"table": "da",
"column": "db_SignatureData",
"type": "text",
"value": "{{$_POST.db_signatureData}}"
}
],
"table": "da",
"returning": "ID",
"query": "insert into `da` (`db_employeeID`, `db_fullName`, `db_licenseNumber`, `db_stateIssue`, `owner`) values (?, ?, ?, ?, ?) returning `ID`",
"query": "insert into `da` (`db_SignatureData`, `db_employeeID`, `db_fullName`, `db_licenseNumber`, `db_stateIssue`, `owner`) values (?, ?, ?, ?, ?, ?) returning `ID`",
"params": [
{
"name": ":P1",
@ -146,6 +151,12 @@
"type": "expression",
"value": "{{$_POST.owner}}",
"test": ""
},
{
"name": ":P6",
"type": "expression",
"value": "{{$_POST.db_signatureData}}",
"test": ""
}
]
}

View File

@ -27,7 +27,8 @@
},
"primary": "ID",
"joins": [],
"query": "select * from `da`"
"query": "select * from `da`",
"orders": []
}
},
"output": true,
@ -55,6 +56,11 @@
{
"type": "text",
"name": "owner"
},
{
"type": "text",
"sub": [],
"name": "db_SignatureData"
}
],
"outputType": "array"

View File

@ -0,0 +1,97 @@
{
"meta": {
"$_GET": [
{
"type": "text",
"name": "sort"
},
{
"type": "text",
"name": "dir"
},
{
"type": "text",
"name": "id"
}
]
},
"exec": {
"steps": {
"name": "query",
"module": "dbconnector",
"action": "single",
"options": {
"connection": "DB",
"sql": {
"type": "select",
"columns": [
{
"table": "da",
"column": "ID"
},
{
"table": "da",
"column": "db_SignatureData"
}
],
"params": [
{
"operator": "equal",
"type": "expression",
"name": ":P1",
"value": "{{$_GET.id}}",
"test": "95"
}
],
"table": {
"name": "da"
},
"primary": "ID",
"joins": [],
"query": "select `ID`, `db_SignatureData` from `da` where `da`.`ID` = ?",
"wheres": {
"condition": "AND",
"rules": [
{
"id": "da.ID",
"field": "da.ID",
"type": "double",
"operator": "equal",
"value": "{{$_GET.id}}",
"data": {
"table": "da",
"column": "ID",
"type": "number",
"columnObj": {
"type": "increments",
"primary": true,
"unique": false,
"nullable": false,
"name": "ID"
}
},
"operation": "="
}
],
"conditional": null,
"valid": true
}
}
},
"output": true,
"meta": [
{
"type": "number",
"name": "ID"
},
{
"type": "text",
"sub": [],
"name": "db_SignatureData"
}
],
"outputType": "object",
"type": "dbconnector_single"
}
}
}

View File

@ -6,6 +6,10 @@
"client": "sqlite3",
"connection": {
"filename": "/public/ERTSQlite.db"
}
}
},
"meta": {}
},
"actionFilePath": "file:///Z:/temp/ERTFastFiller/app/modules/connections/DB.json",
"serverType": "node",
"fileName": "db.json"
}

Binary file not shown.

View File

@ -98,7 +98,7 @@ function generateRandomIdentifier(size) {
// ** TOUCH EVENT LISTNERS FOR TABLETS
//canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]));
//canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]),{passive: true});
//canvas.addEventListener('touchend', endDrawing);
//canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));

View File

@ -62,7 +62,41 @@ dmx.config({
"type": "text",
"name": "section"
}
]
],
"data_view1": {
"meta": [
{
"type": "number",
"name": "ID"
},
{
"type": "text",
"name": "db_fullName"
},
{
"type": "text",
"name": "db_licenseNumber"
},
{
"type": "text",
"name": "db_stateIssue"
},
{
"type": "number",
"name": "db_employeeID"
},
{
"type": "text",
"name": "owner"
},
{
"type": "text",
"sub": [],
"name": "db_SignatureData"
}
],
"outputType": "array"
}
},
"index": {
"flowRunPageId": {
@ -118,6 +152,20 @@ dmx.config({
}
],
"local": {}
}
},
"cookies": [
{
"type": "text",
"name": "userIdentifier"
}
]
},
"success": {
"cookies": [
{
"type": "text",
"name": "userIdentifier"
}
]
}
});

View File

@ -200,7 +200,7 @@ function saveSignatureAsBase64() {
}
function getSignatureData() {
dmx.global.set('canvasDataEncoded', saveSignatureAsBase64())
dmx.global.set('signatureDataEncoded', saveSignatureAsBase64())
dd('SignatureData:', saveSignatureAsBase64())
}

View File

@ -1,7 +1,10 @@
<!-- 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" -->
<!-- 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:{},dmxBootstrap5Popovers:{}}" jquery_slim_35="cdn" moment_2="cdn" -->
<dmx-cookie-manager id="cookies1"></dmx-cookie-manager>
<dmx-toggle id="toggleSignatureDataEncoded" checked="true"></dmx-toggle>
<div is="dmx-browser" id="browser1"></div>
<script is="dmx-flow" id="signatureEncodeFlow" type="text/dmx-flow">[
{
toast.showSimple: {message: "Start-Flow", delay: 2500}
toast.showSimple: {message: "Saving Data", delay: 2500, type: "info"}
},
{
runJS: {
@ -11,6 +14,9 @@
function: "getSignatureData"
}
},
{
wait: {delay: 1000}
},
{
run: {
name: "submitServerConnect",
@ -20,7 +26,7 @@
}
},
{
toast.showSimple: {message: "End-Flow", delay: 2000}
toast.showSimple: {message: "Still processing", delay: 2000, type: "dark"}
}
]</script>
<script is="dmx-flow" id="flow1" type="text/dmx-flow">[
@ -133,7 +139,7 @@
</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">Cancel</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" onclick="getSignatureData()">CLOSE</button>
<button type="button" class="btn btn-success w-auto" dmx-on:click="signatureEncodeFlow.run()">Save</button>
</div>
</div>
@ -147,7 +153,39 @@
<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 class="row">
<table class="table" dmx-show="DBSC1.data.query.hasItems()">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>License number</th>
<th>state issue</th>
<th>Trainer ID</th>
<th>Date</th>
</tr>
</thead>
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="DBSC1.data.query" id="tableRepeat1">
<tr>
<td>
<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 text-danger" type="submit"><i class="far fa-trash-alt fa-lg"></i></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>
<div class="row">
<img width="350" height="100" id="imgSignaturePreview" alt="Signature preview">
</div>
</div>
<div class="modal-footer">{{DateTimeNow.datetime.formatDate('MM-dd-yyyy')}}</div>
@ -182,7 +220,7 @@
<div class="dropdown-menu" aria-labelledby="dropdown3">
<a class="dropdown-item" dmx-on:click="modal1.show()">Show Records</a>
<a class="dropdown-item" href="#" dmx-on:click="SignatureModal1.show()">SignatureModal1</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#" dmx-on:click="toggleSignatureDataEncoded.toggle()">SignatureEncoding</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>
@ -245,17 +283,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="DBSC1.load({})" dmx-on:success="insertID.setValue(serverconnectform1.data.insert.identity);modalsuccess.show()" dmx-on:submit="SignatureModal1.hide()">
<form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="/api/insert" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-on:done="DBSC1.load({})" dmx-on:success="insertID.setValue(serverconnectform1.data.insert.identity);toasts1.showSimple({message: 'Save successful', delay: 2500, type: 'success'});cookies1.set('userIdentifier',serverconnectform1.data.insert.identity,{})" 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-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="">
<input type="text" class="form-control" id="inp_db_fullName" name="db_fullName" aria-describedby="inp_db_fullName_help" placeholder="Enter 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-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="">
<input type="text" class="form-control" id="inp_db_licenseNumber" name="db_licenseNumber" aria-describedby="inp_db_licenseNumber_help" placeholder="Enter license number">
</div>
</div>
<div class="form-group mb-3 row">
@ -279,52 +317,32 @@
<div class="form-group mb-3 row">
<label for="inp_owner" class="col-sm-2 col-form-label">Date</label>
<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">
<input type="text" class="form-control" id="inp_owner" name="owner" aria-describedby="inp_owner_help" placeholder="Date" 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" onclick="getSignatureData()">Save <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">
<p>ID: {{insertID.value}}</p>
&nbsp;
<div class="col align-self-center">
<div class="row">
<div class="col">
<button id="btn2" class="btn">View</button>
</div>
</div>
</div>
<div class="col-sm-10">
<div class="col-sm-9">
<textarea id="db_signatureData" class="form-control" name="db_signatureData" dmx-bind:value="signatureDataEncoded" dmx-show="toggleSignatureDataEncoded.checked"></textarea>
</div>
</div>
</form>
</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>
<button id="btn2" class="btn btn-lg fw-bold text-capitalize text-warning text-bg-success" data-bs-toggle="modal" data-bs-target="#SignatureModal1">Click for the next step&nbsp;</button>
<button id="btn1" class="btn btn-lg text-bg-primary text-warning fw-bold text-capitalize" data-bs-toggle="modal" data-bs-target="#SignatureModal1" dmx-bind:disabled="serverconnectform1.inp_db_fullName.value.isEmpty()||serverconnectform1.inp_db_licenseNumber.value.isEmpty()">Click for the next step&nbsp;</button>
</div>
</div>
</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="signatureCanvasMain" 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" data-bs-toggle="modal" data-bs-target="#modalVerifySignature" dmx-on:click="">Save</button>
</div>
</div>
</div>
</div>
<div class="container">
<textarea id="textAreaTEST" class="form-control" name="dummyTextArea" dmx-bind:value="canvasDataEncoded"></textarea>
<p>A nice paragraph {{canvasDataEncoded}}</p>
</div>

View File

@ -67,7 +67,6 @@
<%- await include(content, locals); %>
</main>
<footer>
<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>

View File

@ -20,7 +20,7 @@
<th>Owner</th>
</tr>
</thead>
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="data_view1.data" id="tableRepeat5">
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="data_view1.data" id="tableRepeat6">
<tr>
<td dmx-text="ID"></td>
<td dmx-text="db_fullName"></td>
@ -189,7 +189,9 @@
<div class="col">
<p>status messages: {{myResult}}</p>
</div>
<div class="col"></div>
<div class="col">
<a><img width="450" height="125" dmx-bind:src="data_view1.data[0].db_SignatureData"></a>
</div>
</div>
</div>

View File

@ -1,6 +1,10 @@
<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="success" appConnect="local" -->
<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="success" appConnect="local" components="{dmxStateManagement:{}}" -->
<dmx-cookie-manager id="cookies1"></dmx-cookie-manager>
<meta name="ac:route" content="/success">
<div class="container wappler-block p-5">
<div class="row">
<h1 class="text-center">User Identifier No.<br>{{cookies1.data.userIdentifier}}</h1>
</div>
<div class="row text-center p-5">
<div class="col">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="#51c42b" class="bi bi-check-circle-fill" viewBox="0 0 16 16">