DockerERTFF/views/index0.ejs

524 lines
24 KiB
Plaintext

<!-- 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:{},dmxPouchDB:{},dmxLazyLoad:{}}" jquery_slim_35="cdn" moment_2="cdn" -->
<script is="dmx-flow" id="pouchSignatureDataByID" type="text/dmx-flow">{
pouchdb.single: {
name: "pouchSignatureData",
output: true,
outputType: "object",
connection: "dbCouch",
sql: {
type: "select",
columns: [
{table: "da", column: "db_signatureData"}
],
table: {name: "db_training", alias: "da"},
primary: "_id",
joins: [],
wheres: {
condition: "AND",
rules: [
{
id: "da._id",
field: "da._id",
type: "string",
operator: "equal",
value: "{{tableRepeat3[0].btn5.value}}",
data: {
table: "da",
column: "_id",
type: "text",
columnObj: {name: "_id", type: "objectId", primary: true}
},
operation: "=",
table: "da"
}
],
conditional: null,
valid: true
},
orders: [],
query: ""
}
}
}</script>
<dmx-value id="signatureEncoded" dmx-bind:value="signatureDataEncoded"></dmx-value>
<dmx-session-manager id="sessionStorage"></dmx-session-manager>
<div is="dmx-pouchdb-detail" id="pouchdbdetail1" dmx-bind:docid="" db="dbCouch" collection="db_training"></div>
<div is="dmx-pouchdb-view" id="pouchdbview1" db="dbCouch" collection="db_training"></div>
<script is="dmx-flow" id="pouchInsert" type="text/dmx-flow" dmx-on:error="toasts1.showSimple({message: 'ERROR ON INSERT', type: 'danger'})">[
{
pouchdb.insert: {
name: "pouchResult",
output: true,
connection: "dbCouch",
sql: {
type: "insert",
values: [
{
table: "da",
column: "db_fullName",
type: "text",
value: "{{pouchconnectform1.inp_db_fullName.value}}"
},
{
table: "da",
column: "db_licenseNumber",
type: "text",
value: "{{pouchconnectform1.inp_db_licenseNumber.value}}"
},
{
table: "da",
column: "db_employeeID",
type: "text",
value: "{{pouchconnectform1.inp_owner.value}}"
},
{
table: "da",
column: "db_trainerSelected",
type: "text",
value: "{{pouchconnectform1.select1.selectedText}}"
},
{
table: "da",
column: "db_stateName",
type: "text",
value: "{{pouchconnectform1.db_stateIssue.selectedText}}"
},
{
table: "da",
column: "db_signatureData",
type: "text",
value: "{{pouchconnectform1.db_signatureData.value}}"
},
{table: "da", column: "dummy1", type: "text", value: "Dymmy Field"}
],
table: "db_training",
returning: "_id",
query: "",
params: [
{
name: ":P1",
type: "expression",
value: "{{pouchconnectform1.inp_db_fullName.value}}",
test: ""
},
{
name: ":P2",
type: "expression",
value: "{{pouchconnectform1.inp_db_licenseNumber.value}}",
test: ""
},
{
name: ":P3",
type: "expression",
value: "{{pouchconnectform1.inp_owner.value}}",
test: ""
},
{
name: ":P4",
type: "expression",
value: "{{pouchconnectform1.select1.selectedText}}",
test: ""
},
{
name: ":P5",
type: "expression",
value: "{{pouchconnectform1.db_stateIssue.selectedText}}",
test: ""
},
{
name: ":P6",
type: "expression",
value: "{{pouchconnectform1.db_signatureData.value}}",
test: ""
}
]
}
}
},
{
toast.showSimple: {message: "Saved Entry", type: "success"}
}
]</script>
<dmx-pouchdb id="pouchdb1" db="dbCouch"></dmx-pouchdb>
<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: "Encoding Signature", delay: 2500, type: "info"}
},
{
runJS: {
name: "signatureEncoded",
output: true,
outputType: "text",
function: "getSignatureData"
}
}
]</script>
<script is="dmx-flow" id="flow1" type="text/dmx-flow">[
{
runJS: {
name: "saveSignatureFlow",
output: true,
outputType: "text",
function: "saveSignature"
}
},
{
alert: {message: "{{saveSignatureFlow}}"}
}
]</script>
<dmx-serverconnect id="serverconnect_sign" url="/api/uploadSignature" noload="true"></dmx-serverconnect>
<div class="modal" id="modalVerifySignature" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" contenteditable="false">Submitted Signature for {{pouchconnectform1.inp_db_fullName.value}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" is="dmx-button" value=""></button>
</div>
<div class="modal-body">
<p>Signature will show here. Is it acceptable? You can change it before saving everything.</p>
<p>
<div class="container" id="signatureContainer">
<div class="row">
<div class="col text-center">
<img id="uploadedSignature" alt="Signature will appear here" dmx-style:uploadedsignaturestyle="'max-width: 690; border: 1px solid #ccc;'" width="700" height="225" dmx-bind:src="signatureEncoded.value">
</div>
</div>
</div>
</p>
</div>
<div is="dmx-pouchdb-detail" id="pouchdbdetail2" dmx-bind:docid="tableRepeat3[0].btn5.value" db="dbCouch" collection="da"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="modal-success" is="dmx-bs5-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<p class="text-center text-success"><i class="fas fa-check-circle fa-6x"></i></p>
<h4 class="text-center fw-light">Success!</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="modal-error" is="dmx-bs5-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<p class="text-center text-danger"><i class="fas fa-times-circle fa-6x"></i></p>
<h4 class="text-center fw-light">Error!</h4>
<h4 class="text-center fw-light">Something wrong happen. <br>Get help from a Trainer.!</h4>
<p>system returned: {{pouchconnectform1.lastError.message}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="SignatureModal1" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Hi {{pouchconnectform1.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">
<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">{{pouchconnectform1.inp_db_fullName.value}}</th>
<td>{{pouchconnectform1.inp_db_licenseNumber.value}}</td>
<td>{{pouchconnectform1.db_stateIssue.value}}</td>
<td>{{pouchconnectform1.inp_owner.value}}</td>
</tr>
</tbody>
</table>
<p>&nbsp;Please submit your signature and click the save button.</p>
<canvas id="signatureCanvas" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)" class="bg-warning-subtle" ontouchstart="startDrawing(event.touches[0])" ontouchend="endDrawing()" ontouchmove="draw(event.touches[0])"></canvas>
</div>
<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" onclick="getSignatureData()">CLOSE</button>
<button type="button" class="btn btn-success w-auto" data-bs-dismiss="modal" dmx-on:click="signatureEncodeFlow.run()">Accept</button>
</div>
</div>
</div>
</div>
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<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">
<div class="col-7">
<a></a>
</div>
</div>
</div>
<div class="modal-footer">{{DateTimeNow.datetime.formatDate('MM-dd-yyyy')}}</div>
</div>
</div>
</div>
<dmx-toggle id="toggleRecordsTable" checked="true"></dmx-toggle>
<div class="container wappler-block pt-3 pb-3">
<nav class="navbar navbar-expand-lg justify-content-around">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="collapse1" class="collapse navbar-collapse">
<a class="navbar-brand" href="#">ERT</a>
<div class="navbar-nav w-100 justify-content-start">
<div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">File</a>
<div class="dropdown-menu" aria-labelledby="dropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown2" role="button" aria-haspopup="true" aria-expanded="false">Edit</a>
<div class="dropdown-menu" aria-labelledby="dropdown2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown3" role="button" aria-haspopup="true" aria-expanded="false">view</a>
<div class="dropdown-menu" aria-labelledby="dropdown3">
<a class="dropdown-item" dmx-on:click="toggleRecordsTable.toggle()">Show Records</a>
<a class="dropdown-item" href="#" dmx-on:click="SignatureModal1.show()">SignatureModal1</a>
<a class="dropdown-item" href="#" dmx-on:click="toggleSignatureDataEncoded.toggle()">SignatureEncoding</a>
<a class="dropdown-item" href="#" dmx-on:click="modalVerifySignature.show()">modalVerifySignature</a>
<a class="dropdown-item" href="/observationPage" dmx-on:click="toggleSignatureDataEncoded.toggle()" internal="true">Observation</a>
<a class="dropdown-item" dmx-on:click="toggleSignatureDataEncoded.toggle()">ToggleViews</a>
</div>
</div>
<div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown4" role="button" aria-haspopup="true" aria-expanded="false">Help</a>
<div class="dropdown-menu" aria-labelledby="dropdown4">
<a class="dropdown-item">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<dmx-datetime id="DateTimeNow" interval="minutes"></dmx-datetime>
<script is="dmx-flow" id="delConfirm" type="text/dmx-flow">{
bootbox.confirm: {
name: "confirmYesNo",
message: "Delete ",
title: "Remove list item",
buttons: {
confirm: {label: "Delete", className: "btn-danger"},
cancel: {label: "Cancel", className: "btn-warning"}
},
then: {
steps: {
serverConnect: {
name: "pageFlowSC1",
outputType: "object",
url: "/api/delRecord",
site: "ERTFastFiller"
}
}
}
}
}</script>
<dmx-serverconnect id="DBInsert" url="/api/insert" noload="true"></dmx-serverconnect>
<div is="dmx-bs5-toasts" id="toasts1"></div>
<dmx-serverconnect id="DBSC1" url="/api/query"></dmx-serverconnect>
<dmx-value id="dataID"></dmx-value>
<dmx-json-datasource id="stateJSON" is="dmx-serverconnect" url="/states.json"></dmx-json-datasource>
<dmx-json-datasource id="trainerJSON" is="dmx-serverconnect" url="/trainer.json"></dmx-json-datasource>
<div class="container">
<div class="row" id="daForm">
<div class="col-6" id="userEntryForm">
<dmx-value id="insertID"></dmx-value>
<div class="container text-center">
<div class="row">
<div class="col" id="colTop">
<h1 class="text-center">Please enter required information&nbsp;</h1>
</div>
</div>
<div class="row">
<p>*All fields are required</p>
<!--
<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()">
</form>
-->
</div>
<form id="pouchconnectform1">
<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-9">
<input type="text" class="form-control" id="inp_db_fullName" name="db_fullName" aria-describedby="inp_db_fullName_help" placeholder="Enter full name" required="">
</div>
</div>
<div class="form-group mb-3 row">
<label for="inp_db_licenseNumber" class="col-sm-2 col-form-label">License #</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 license number" required="">
</div>
</div>
<div class="form-group mb-3 row">
<label for="db_stateIssue" class="col-sm-2 col-form-label">State</label>
<div class="col-sm-6">
<select id="db_stateIssue" class="form-select" dmx-bind:options="stateJSON.data.states" optiontext="name" name="db_stateIssue" dmx-bind:value="selectedText" optionvalue="abbreviation">
</select>
</div>
</div>
<div class="form-group mb-3 row">
<label for="select1" class="col-sm-2 col-form-label">Trainer</label>
<div class="col-6">
<select id="select1" class="form-select" dmx-bind:options="trainerJSON.data.Trainer" name="db_employeeID" optiontext="Name" optionvalue="ID" dmx-bind:value="selectedValue">
</select>
</div>
</div>
<div class="form-group mb-3 row">
<label for="inp_owner" class="col-sm-2 col-form-label">Date</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inp_owner" name="owner" aria-describedby="inp_owner_help" placeholder="Date" dmx-bind:value="DateTimeNow.datetime.formatDate('MM-dd-yyyy')" readonly="true">
</div>
</div>
<div class="form-group mb-3 row" dmx-show="toggleSignatureDataEncoded.checked">
<div class="col align-self-center">
<div class="row">
<div class="col-6 offset-1">
<button id="btn2" class="btn text-start">Encoded signature Data</button>
</div>
</div>
</div>
<div class="col-sm-9">
<textarea id="db_signatureData" class="form-control" name="db_signatureData" dmx-bind:value="signatureEncoded.value"></textarea>
</div>
</div>
<div class="row justify-content-center border border-2">
<h4 dmx-hide="!pouchconnectform1.db_signatureData.value.isEmpty()" class="text-center">Waiting for signature</h4>
<div class="row justify-content-center">
<img width="125" height="100" class="align-self-start bg-opacity-25 bg-light-subtle w-75" dmx-bind:data-srcset="" dmx-bind:data-src="pouchconnectform1.db_signatureData.value" dmx-bind:src="signatureEncoded.value" dmx-show="!pouchconnectform1.db_signatureData.value.isEmpty()" alt="SignatureCapture">
</div>
</div>
<p></p>
<button id="btn1" class="btn btn-lg text-bg-primary text-warning fw-bold text-capitalize" data-bs-toggle="modal" data-bs-target="#SignatureModal1"><span style="font-weight: normal;">Sign</span></button><button id="btn5" class="btn btn-lg text-warning fw-bold text-capitalize text-bg-success ms-4" data-bs-target="#SignatureModal1" dmx-on:click="pouchInsert.run();modalsuccess.show()" dmx-bind:disabled="inp_db_fullName.value.isEmpty()||inp_db_licenseNumber.value.isEmpty()">Save&nbsp;</button>
<button id="btn6" class="btn" type="reset">reset</button>
</form>
</div>
</div>
<div class="col-5 offset-1">
</div>
</div>
</div>
<div class="container" dmx-show="toggleSignatureDataEncoded.checked">
<table class="table table-striped table-sm">
<thead>
<tr>
<th></th>
<th>full name</th>
<th>license number</th>
<th>Date</th>
<th>signature data</th>
<th>trainer&nbsp;</th>
<th>state&nbsp;</th>
<th>Dummy1</th>
</tr>
</thead>
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="pouchdbview1.data" id="tableRepeat3">
<tr>
<td dmx-text="_id"></td>
<td dmx-text="db_fullName"></td>
<td dmx-text="db_licenseNumber"></td>
<td dmx-text="db_employeeID"></td>
<td dmx-text="db_signatureData.substring(0, 15)">
</td>
<td dmx-text="db_trainerSelected"></td>
<td dmx-text="db_stateName"></td>
<td dmx-text="dummy1"></td>
</tr>
</tbody>
</table>
</div>
<script src="/PDF/pdfLibSignature.js"></script>
<script src="/PDF/dummyFunctions.js"></script>
<script src="/js/libProcessScript.js"></script>
<meta name="ac:route" content="/index0">