307 lines
14 KiB
Plaintext
307 lines
14 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="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>Offcanvas body text goes here.</p>
|
|
</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">Button</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="db_employeeID">
|
|
</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>Driver Trainer</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"></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="db_employeeID==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>
|
|
</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>
|
|
<table class="table">
|
|
<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>
|
|
<header>
|
|
<h3 id="scoreHeader" dmx-show="!datastore1.data.hasItems()">No Score shown yet.</h3>
|
|
</header>
|
|
<div class="container" id="DS">
|
|
<table class="table table-striped">
|
|
<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>
|
|
const canvas = document.getElementById('signatureCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let drawing = false;
|
|
|
|
// Get the canvas element
|
|
|
|
|
|
// Function to get the canvas offset
|
|
function getCanvasOffset() {
|
|
const rect = canvas.getBoundingClientRect();
|
|
//console.log("offsetX:",rect.left, " OffsetY:",rect.top)
|
|
return {
|
|
offsetX: rect.left,
|
|
offsetY: rect.top
|
|
};
|
|
}
|
|
|
|
|
|
function clearCanvas() {
|
|
console.log("Clear Signature area")
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
function startDrawing(e) {
|
|
console.log("Start Signature Capture")
|
|
//console.log(e)
|
|
drawing = true;
|
|
draw(e);
|
|
}
|
|
|
|
function endDrawing() {
|
|
console.log("Stopped Signature Capture")
|
|
drawing = false;
|
|
ctx.beginPath();
|
|
}
|
|
|
|
function draw(e) {
|
|
//console.log(e)
|
|
if (!drawing) return;
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.strokeStyle = '#000';
|
|
|
|
const { offsetX, offsetY } = getCanvasOffset();
|
|
let x = e.clientX - offsetX //canvas.offsetLeft;
|
|
let y = e.clientY - offsetY //canvas.offsetTop;
|
|
//console.log("X:",x," Y:",y)
|
|
|
|
//let x = e.clientX - canvas.offsetLeft;
|
|
//let y = e.clientY - canvas.offsetTop;
|
|
//console.log("X:", x, " Y:", y)
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
}
|
|
|
|
//canvas.addEventListener('mousedown', startDrawing);
|
|
//canvas.addEventListener('mouseup', endDrawing);
|
|
//canvas.addEventListener('mousemove', draw);
|
|
|
|
canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]));
|
|
canvas.addEventListener('touchend', endDrawing);
|
|
canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));
|
|
|
|
</script> |