352 lines
18 KiB
Plaintext
352 lines
18 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:{}}" 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: "Saving Data", delay: 2500, type: "info"}
|
|
},
|
|
{
|
|
runJS: {
|
|
name: "signatureEncoded",
|
|
output: true,
|
|
outputType: "text",
|
|
function: "getSignatureData"
|
|
}
|
|
},
|
|
{
|
|
wait: {delay: 1000}
|
|
},
|
|
{
|
|
run: {
|
|
name: "submitServerConnect",
|
|
output: true,
|
|
outputType: "text",
|
|
action: "{{serverconnectform1.submit()}}"
|
|
}
|
|
},
|
|
{
|
|
toast.showSimple: {message: "Still processing", delay: 2000, type: "dark"}
|
|
}
|
|
]</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">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">
|
|
<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">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</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>
|
|
<h4 class="text-center fw-light">Next step. Submit your signature.</h4>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal" id="modal-error" is="dmx-bs5-modal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<p class="text-center text-danger"><i class="fas fa-times-circle fa-6x"></i></p>
|
|
<h4 class="text-center fw-light">Error!</h4>
|
|
<h4 class="text-center fw-light">Something wrong happen. <br>Get help from a Trainer.!</h4>
|
|
<p>system returned: {{serverconnectform1.lastError.message}}</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="modal" id="SignatureModal1" is="dmx-bs5-modal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Hi {{serverconnectform1.inp_db_fullName.value}}, double check info and sign the box below. 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">{{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> 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" dmx-on:click="signatureEncodeFlow.run()">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Record Count: {{DBSC1.data.query.count()}} </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">
|
|
<img width="350" height="100" id="imgSignaturePreview" alt="Signature preview">
|
|
</div>
|
|
|
|
</div>
|
|
<div class="modal-footer">{{DateTimeNow.datetime.formatDate('MM-dd-yyyy')}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<dmx-toggle id="dataStoreVisibality"></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="modal1.show()">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>
|
|
</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" 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">Lets Begin<br>Please enter required information </h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="/api/insert" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-on:done="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 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 license number">
|
|
</div>
|
|
</div>
|
|
<div class="form-group mb-3 row">
|
|
<label for="db_stateIssue" class="col-sm-2 col-form-label">state issue</label>
|
|
<div class="col-sm-4">
|
|
<select id="db_stateIssue" class="form-select" dmx-bind:options="stateJSON.data.states" optiontext="name" optionvalue="abbreviation" name="db_stateIssue" dmx-bind:value="selectedValue">
|
|
</select>
|
|
</div>
|
|
<div class="col-6 text-start">
|
|
<small id="bs5-form-group-help1" class="form-text text-muted">State your license was issued by</small>
|
|
</div>
|
|
</div>
|
|
<div class="form-group mb-3 row">
|
|
<label for="select1" class="col-sm-2 col-form-label">Trainer</label>
|
|
<div class="col-4">
|
|
<select id="select1" class="form-select" dmx-bind:options="trainerJSON.data.Trainer" name="db_employeeID" optiontext="Name" optionvalue="ID" dmx-bind:value="selectedValue">
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="form-group mb-3 row">
|
|
<label for="inp_owner" class="col-sm-2 col-form-label">Date</label>
|
|
<div class="col-sm-4">
|
|
<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>
|
|
<div class="form-group mb-3 row">
|
|
<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-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" dmx-bind:disabled="serverconnectform1.inp_db_fullName.value.isEmpty()||serverconnectform1.inp_db_licenseNumber.value.isEmpty()">Click for the next step </button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="container">
|
|
|
|
</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"> |