307 lines
16 KiB
Plaintext
307 lines
16 KiB
Plaintext
<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="observationPage" appConnect="local" components="{dmxBootstrap5TableGenerator:{},dmxMasonry:{},dmxFormatter:{},dmxBootstrap5Popovers:{},dmxBootstrap5Toasts:{},dmxDataTraversal:{},dmxStateManagement:{},dmxDatastore:{},dmxValidator:{},dmxBootstrap5Offcanvas:{},dmxBootstrap5Modal:{},dmxBootstrap5Navigation:{},dmxBootstrap5Tooltips:{},dmxBootbox5:{}}" -->
|
|
<div class="modal" id="modalTestButton" 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">ModalTestButton</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-striped table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Id</th>
|
|
<th>Db full name</th>
|
|
<th>Db license number</th>
|
|
<th>Db state issue</th>
|
|
<th>Db employee</th>
|
|
<th>Owner</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="data_view1.data" id="tableRepeat5">
|
|
<tr>
|
|
<td dmx-text="ID"></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>
|
|
<p>Only here for a demo purpose - Maybe will stay or go. dunno. </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>
|
|
<dmx-value id="var1"></dmx-value>
|
|
<script is="dmx-flow" id="flowClearPoints" type="text/dmx-flow">{
|
|
runJS: {
|
|
name: "zzmyTestFunction",
|
|
output: true,
|
|
outputType: "text",
|
|
function: "toBase64",
|
|
args: ["/PDF/testpdf.pdf", "{{datastore1.data}}", "{{data_view1.data}}"]
|
|
}
|
|
}</script>
|
|
<div class="container wappler-block pt-3 pb-3">
|
|
<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>
|
|
<div class="modal" id="modal1" 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">Signature Capture</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="signatureCanvas" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)"></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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<dmx-serverconnect id="qDB" url="/api/query"></dmx-serverconnect>
|
|
<div class="offcanvas offcanvas-start" id="offcanvas1" is="dmx-bs5-offcanvas" tabindex="-1">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title">Offcanvas title</h5>
|
|
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body">
|
|
<div class="container">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="CKBinput1" name="canvasCBShowHideSectionDetail">
|
|
<label class="form-check-label" for="CKBinput1">Hide Section detail</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="CKBinput2" name="canvasCBShowHideSectionDetail">
|
|
<label class="form-check-label" for="CKBinput2">Hide Score detail</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="CKBinput3" name="canvasCBShowHideSectionDetail">
|
|
<label class="form-check-label" for="CKBinput3">Show Section detail</label>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
|
|
</p>
|
|
<div class="container"><button id="btn6" class="btn text-bg-danger" dmx-on:click="run({run:{name:'CLearPoints',outputType:'text',action:`datastore1.clear()`}})">Clear Point Table</button></div>
|
|
</div>
|
|
</div>
|
|
<dmx-toggle id="toggle1" checked="true"></dmx-toggle>
|
|
<dmx-datastore id="datastore1" dmx-on:updated="toasts1.show({message: 'Record Updated ', title: 'New Insert Added'})" dmx-on:inserted="toasts1.showSimple({message: 'New Record Inserted '})"></dmx-datastore>
|
|
<div is="dmx-bs5-toasts" id="toasts1"></div>
|
|
<dmx-serverconnect id="scQuerySubSections" url="/api/qSubSection" noload="true" dmx-param:subid="1"></dmx-serverconnect>
|
|
<dmx-serverconnect id="serverconnect1" url="/api/qSection"></dmx-serverconnect>
|
|
<meta name="ac:route" content="/observationPage">
|
|
<dmx-serverconnect id="scQuerySection" url="/api/qSection"></dmx-serverconnect>
|
|
|
|
<div class="container border-primary border-2 border">
|
|
<nav class="navbar navbar-expand-lg">
|
|
<span class="navbar-text">
|
|
<button id="btn3" class="btn" data-bs-toggle="modal" data-bs-target="#modal1" dmx-on:click="run({runJS:{name:'r_downloadPDF',outputType:'text',function:'downloadPDF',args:['PDFBytes']}})">Download PDF
|
|
</button>Navbar Text</span>
|
|
<div id="collapse1" class="collapse navbar-collapse">
|
|
<div class="nav w-100">
|
|
<a class="nav-item nav-link" href="#">Link</a>
|
|
<a class="nav-item nav-link" href="#">Link</a>
|
|
<a class="nav-item nav-link" href="#">Link</a>
|
|
</div>
|
|
</div><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>
|
|
|
|
</nav>
|
|
|
|
<div class="row">
|
|
<div class="col-3">
|
|
<p class="text-center"><b>Who you are grading</b></p>
|
|
<select id="select1" class="form-select" dmx-bind:options="qDB.data.query" optiontext="db_fullName" optionvalue="ID" dmx-bind:disabled="datastore1.data.hasItems()">
|
|
</select>
|
|
</div>
|
|
<div class="col">
|
|
<table class="table table-striped table-sm">
|
|
<thead>
|
|
<tr class="text-xl-center">
|
|
<th>Name</th>
|
|
<th>License No.</th>
|
|
<th>Issue State</th>
|
|
<th>Employee No.</th>
|
|
<th>DATE</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="data_view1.data" id="tableRepeat4">
|
|
<tr class="text-xl-center">
|
|
<td dmx-text="db_fullName" dmx-bs-tooltip="('Record # '+ID)" data-bs-trigger="hover" data-bs-placement="top"></td>
|
|
<td dmx-text="db_licenseNumber"></td>
|
|
<td dmx-text="db_stateIssue" dmx-class:bg-danger="db_stateIssue.isEmpty()"></td>
|
|
<td dmx-text="db_employeeID"></td>
|
|
<td dmx-text="owner"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<dmx-data-view id="data_view1" dmx-bind:data="qDB.data.query" filter="ID==select1.value"></dmx-data-view>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<button id="btn2" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal1">Print</button>
|
|
<button id="savePDF" class="btn btn-warning" data-bs-target="#modal1" dmx-on:click="flowClearPoints.run()">SAVE</button>
|
|
<button id="btn7" class="btn" data-bs-toggle="modal" data-bs-target="#modalTestButton">modalTest</button>
|
|
<p>A nice paragraph {{myResult}}</p>
|
|
</div>
|
|
<div class="col"></div>
|
|
<div class="col"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container border rounded border-warning-subtle border-3 mb-md-3 pt-md-4 pb-md-4" id="btnMenu">
|
|
<nav class="navbar navbar-expand-lg justify-content-lg-around">
|
|
<span class="navbar-text">Navbar Text</span>
|
|
<span class="navbar-text">?</span>
|
|
</nav>
|
|
<div class="row justify-content-xl-between" is="dmx-masonry" id="repeat1" dmx-bind:repeat="scQuerySection.data.query" columns="3" gutter="10">
|
|
<div class="col text-xl-center">
|
|
<form id="form1" action="/api/qSection" method="post">
|
|
<input id="text1" name="text1" type="hidden" class="form-control" dmx-bind:value="numSection">
|
|
<button id="btn1" class="btn btn-primary" dmx-text="txtSection.substring(0,25)" data-bs-toggle="button" dmx-bind:value="numSection" dmx-on:click="toasts1.show({message: value, title: 'Button Value', subtitle: tableRepeat1[0].txtSection});scQuerySubSections.load({subid: value});varSelectedSection.setValue(value)">Button</button>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container border-warning border border-5" dmx-hide="offcanvas1.CKBinput1.checked">
|
|
|
|
<table class="table table-striped table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Num section</th>
|
|
<th>Txt section</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="scQuerySection.data.query" id="tableRepeat1">
|
|
<tr>
|
|
<td dmx-text="numSection"></td>
|
|
<td dmx-text="txtSection"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="container" dmx-show="toggle1.checked">
|
|
<div class="row" dmx-hide="offcanvas1.CKBinput2.checked">
|
|
<div class="col">
|
|
<p class="fw-bold">The DT should fill out the evaluation form during the Enhanced Road Test based on the below points system and description. Every item in Section must have a score to be considered complete and valid; there should be no blank spaces. A DA candidate must have a score of total score 10 or lower to pass.</p>
|
|
|
|
</div>
|
|
<div class="col">
|
|
<table class="table table-striped">
|
|
<thead class="table-primary">
|
|
<tr>
|
|
<th scope="col">Tier</th>
|
|
<th scope="col">Points</th>
|
|
<th scope="col">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="table-info">
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>0</td>
|
|
<td>DA did perform the action</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>1</td>
|
|
<td>DA did perform the action after DT provides guidance</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>2</td>
|
|
<td>DA failed to perform action</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="row">Points</th>
|
|
<th>Is section</th>
|
|
<th>Section No.</th>
|
|
<th>Section Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody is="dmx-repeat" dmx-generator="bs5table" id="tableRepeat2" dmx-bind:repeat="scQuerySubSections.data.query">
|
|
<tr>
|
|
<td>
|
|
<input id="pointValue" name="section" type="hidden" class="form-control" dmx-bind:value="numSection">
|
|
<select id="selPoints" class="form-select" name="sPoints" dmx-on:changed="datastore1.upsert({numSection: pointValue.value, $id: numSection, description: txtSection},{numSection: pointValue.value, Points: value, description: txtSection})" dmx-bind:id="numSection">
|
|
<option value="0">0 points</option>
|
|
<option value="1">1 point</option>
|
|
<option value="2">2 points</option>
|
|
<option value="10">Did Not Demonstrate</option>
|
|
</select>
|
|
</td>
|
|
<td dmx-text="isSection"></td>
|
|
<td dmx-text="numSection"></td>
|
|
<td dmx-text="txtSection" dmx-class:bg-warning="txtSection.startsWith('*')"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="container" id="DS">
|
|
<div class="row">
|
|
<header class="text-center">
|
|
<h3 id="scoreHeader" dmx-show="!datastore1.data.hasItems()" class="text-bg-danger" dmx-bs-popover="'If you save this file without points the observation will have zero points.'" dmx-bind:popover-title="'Info'" data-bs-trigger="hover focus">No Points recorded </h3>
|
|
</header>
|
|
</div>
|
|
<table class="table table-striped" dmx-show="datastore1.data.hasItems()">
|
|
<thead>
|
|
<tr>
|
|
<th>$id</th>
|
|
<th>Num section</th>
|
|
<th>Points</th>
|
|
<th>Description
|
|
<button id="btn5" class="btn btn-outline-danger w-auto btn-sm lh-base" data-bs-toggle="button" dmx-bs-tooltip="'Clear ALL points'" data-bs-trigger="hover" dmx-on:click="run({'bootbox.confirm':{name:'clearPoints',message:'This will clear all points',title:'WATCH OUT',buttons:{confirm:{label:'Yes'},cancel:{label:'Cancel'}},then:{steps:{run:{name:'clearDataStore1',outputType:'text',action:`datastore1.clear()`}}}}})" dmx-hide="!datastore1.data.hasItems()">Clear</button>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="datastore1.data" id="tableRepeat3">
|
|
<tr>
|
|
<td dmx-text="$id"></td>
|
|
<td dmx-text="numSection"></td>
|
|
<td dmx-text="Points"></td>
|
|
<td dmx-text="description"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
|
|
<script src="/PDF/libPDFscripts.js"></script>
|
|
<!--
|
|
<script src="/PDF/pdfLibSignature.js"></script>
|
|
--> |