jeff
/
DockerERTFF
mirror of https://github.com/jndaniels/DockerERTFF.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
DockerERTFF/views/observationPage.ejs

442 lines
23 KiB
Plaintext
Raw Blame History

<!-- 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:{},dmxNotifications:{},dmxPouchDB:{},dmxBootstrap5Alert:{},dmxBootstrap5Collapse:{}}" jquery_slim_35="cdn" moment_2="cdn" -->
<div is="dmx-pouchdb-detail" id="pouchdbdetail2" dmx-bind:docid="select1.value" db="dbCouch" collection="db_training"></div>
<dmx-data-view id="data_view2" dmx-bind:data="datastore1.data" filter="!numSection.isEmpty()&amp;&amp;!pointValue.isEmpty()"></dmx-data-view>
<dmx-datastore id="datastore1"></dmx-datastore>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.9.1/jquery.timepicker.min.css" integrity="sha512-UimcIlYKETYXXjgBbgq45ZXCLXI+d1O43cZXVTdhtCYYGomJVM2Ahz+L19UEWBIH4f/A/qmlvCaOWiaNMcaw3w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.9.1/jquery.timepicker.min.js" integrity="sha512-+UV/u4sqwTpgK0d4vvTjan+ofWGwgTX9VkhLPKbRIQSolA4L8JmtJRk2zkh7Pv9ZtBQELMQury9Qf5RSA40N5g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<dmx-json-datasource id="dspListJson" is="dmx-serverconnect" url="/DSPlist.json"></dmx-json-datasource>
<dmx-value id="ertTemplatePath" dmx-bind:value="'/PDF/Template-EDV-ERT_v4.1.pdf'"></dmx-value>
<div class="modal" id="saveObservationResults" 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">Finalize and Save Observation Record</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="conditional1" is="dmx-if">
<div class="alert" id="alert1" is="dmx-bs5-alert" role="alert" show="true" type="danger">
<p>The data is outdated. Please click REFRESH</p><button id="btn3" class="btn btn-secondary" dmx-on:click="pouchdbdetail1.refresh()">REFRESH DATA</button>
</div>
</div>
<p>Modal body text goes here.</p>
<form id="form2">
<div class="form-group mb-3 row">
<label for="input1" class="col-sm-2 col-form-label">Verify Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="input1" name="input1" aria-describedby="input1_help" placeholder="Full Name" dmx-bind:value="pouchdbdetail1.data.db_fullName">
<small id="input1_help" class="form-text text-muted">Verify this is the associate</small>
</div>
</div>
<div class="form-group mb-3 row">
<label for="input2" class="col-sm-2 col-form-label">Verify company</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="input2" name="input2" aria-describedby="input1_help1" dmx-bind:value="select2.selectedText">
<small id="input1_help1" class="form-text text-muted">Verify this is the company name</small>
</div>
</div>
<div class="form-group mb-3 row">
<label for="input2" class="col-sm-2 col-form-label">!</label>
<div class="text-center col-sm-3">
<label for="getStartTime">Start Time:</label>
<input type="time" id="getStartTime" name="getStartTime">
<br>
<small id="input1_help_starttime" class="form-text text-muted">Time you started the test.</small>
</div>
<div class="text-center col-sm-3">
<label for="getEndTime">End Time:</label>
<input type="time" id="getEndTime" name="getEndTime">
<br>
<small id="input1_help_endtime" class="form-text text-muted">Time you ended&nbsp; the test.</small>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" dmx-on:click="processPDF.run()">Download PDF</button>
</div>
</div>
</div>
</div>
<div is="dmx-pouchdb-detail" id="pouchdbdetail1" dmx-bind:docid="select1.value" db="dbCouch" collection="db_training"></div>
<div is="dmx-pouchdb-view" id="pouchdbview1" db="dbCouch" collection="db_training"></div>
<div is="dmx-pouchdb-view" id="pouchdbview2" db="dbCouch" collection="db_training" filter="_id==select1.value"></div>
<dmx-pouchdb id="pouchdb1" db="dbCouch"></dmx-pouchdb>
<dmx-notifications id="notifies1" closable="true" timeout="3000"></dmx-notifications>
<dmx-serverconnect id="serverconnect_signature" url="/api/uploadSignature" noload="true"></dmx-serverconnect>
<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="tableRepeat6">
<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.&nbsp;</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>
<script is="dmx-flow" id="processPDF" type="text/dmx-flow">{
runJS: {
name: "PDFprocess",
output: true,
outputType: "text",
function: "processAndDownloadPdf",
args: ["/PDF/Template-EDV41-current.pdf", "{{datastore1.data}}"]
}
}</script>
<div class="container" id="navContainer">
<nav class="navbar navbar-expand-lg">
<span class="navbar-text bg-opacity-25">Controls</span>
<div id="collapse1" class="collapse navbar-collapse">
<div class="nav w-100">
<a class="nav-item nav-link" href="#" onclick="runMyFunction()">Link</a>
<a class="nav-item nav-link placeholder-glow" data-bs-toggle="offcanvas" data-bs-target="#offcanvas1" internal="true">Settings</a>
<a class="nav-item nav-link" href="#" data-bs-toggle="modal" data-bs-target="#modal1">Print</a>
<a class="nav-item nav-link" href="#" dmx-on:click="flowClearPoints.run()">Save</a>
<a class="nav-item nav-link bg-success text-warning fw-bolder" href="#" dmx-hide="datastore1.data.isEmpty()" data-bs-toggle="modal" data-bs-target="#saveObservationResults">Print PDF</a>
<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">Options</a>
<div class="dropdown-menu" aria-labelledby="dropdown1">
<a class="dropdown-item" href="/index0" internal="true">Home</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</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>
<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="CKBinput4" name="canvasCBShowHideSectionDetail">
<label class="form-check-label" for="CKBinput4">Hide Top Main panel</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 All Points</button></div>
</div>
</div>
<dmx-toggle id="toggle1" checked="true"></dmx-toggle>
<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" id="mainPanel" dmx-hide="offcanvas1.CKBinput4.checked">
<div class="row">
<div class="col-3 align-self-center">
<select id="select1" class="form-select" optiontext="db_fullName" optionvalue="_id" dmx-bind:disabled="datastore1.data.hasItems()" dmx-bind:options="pouchdbview1.data" dmx-on:changed="toasts1.showSimple({message: selectedValue, delay: 2000});pouchdbdetail2.select(selectedValue)">
</select>
<select id="select2" class="form-select" dmx-bind:options="dspListJson.data.DSPCompanies" optiontext="dspName.titlecase()" optionvalue="dspShortCode" dmx-bind:value="selectedValue" name="getDSPShortCode">
</select>
</div>
<div class="col">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>Name</th>
<th>License No.</th>
<th>Issue State</th>
<th>Employee No.</th>
</tr>
</thead>
<tbody is="dmx-repeat" dmx-generator="bs5table" id="tableRepeat4" dmx-bind:repeat="data_view1.data">
<tr>
<td dmx-bs-tooltip="('Record # '+_id)" data-bs-trigger="hover" data-bs-placement="top" dmx-text="db_fullName"></td>
<td dmx-text="db_licenseNumber"></td>
<td dmx-class:bg-danger="db_stateName.isEmpty()" dmx-text="db_stateName"></td>
<td dmx-text="db_employeeID"></td>
</tr>
</tbody>
</table>
<dmx-data-view id="data_view1" dmx-bind:data="pouchdbview1.data" filter="_id==select1.value"></dmx-data-view>
</div>
</div>
<div class="row">
<div class="col">
<div id="conditional2" is="dmx-if" dmx-bind:condition="pouchdbdetail1.stale">
<div class="alert" id="alert2" is="dmx-bs5-alert" role="alert">
<p>!!! Use this alert to show if its a stale db read and refresh</p>
</div>
</div>
<p>status messages: {{select1.value}}</p>
<div class="row">
<button id="btn2" class="btn bg-warning" data-bs-toggle="modal" data-bs-target="#saveObservationResults">Finalize &amp; Print PDF Results</button>
</div>
</div>
<div class="col">
<a><img width="450" height="125" dmx-bind:src="data_view1.data[0].db_signatureData"></a>
</div>
</div>
<div class="row">
</div>
</div>
<div class="container border rounded border-warning-subtle border-3 mb-md-3 pt-md-4 pb-md-4" id="btnMenu">
<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">
<div class="row">
<div class="col">
</div>
</div>
</div>
<div class="container" dmx-show="toggle1.checked">
<div class="row" dmx-hide="offcanvas1.CKBinput2.checked">
<div class="col-5">
<p>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 table-sm">
<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>
<!--select id="selPoints" class="form-select" name="sPoints" dmx-on:changed="datastore1.upsert({numSection: numSection, $id: numSection, description: txtSection},{numSection: numSection, Points: value, description: txtSection})" dmx-bind:id="numSection" dmx-bind:value="selectedValue"-->
<select id="selPoints" class="form-select" name="sPoints" dmx-bind:id="" dmx-bind:value="selectedValue" dmx-on:changed="datastore1.upsert({numSection: numSection},{numSection: numSection, pointValue: selectedValue, description: txtSection})">
<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&nbsp;</h3>
</header>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>$id</th>
<th>Num section</th>
<th>pointValue</th>
<th>Description&nbsp;
<button id="btn5" class="btn btn-outline-danger w-auto btn-sm lh-base" data-bs-toggle="button" dmx-on:click="run({'bootbox.confirm':{name:'clearPoints',message:'This will clear all points',title:'WATCH OUT',buttons:{confirm:{label:'Yes',className:'btn-danger'},cancel:{label:'Cancel'}},closeButton:false,backdrop:true,then:{steps:{run:{name:'clearDataStore1',outputType:'text',action:`datastore1.clear()`}}}}})">Clear all points</button>
</th>
</tr>
</thead>
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="datastore1.data" id="tableRepeat5">
<tr>
<td dmx-text="$id"></td>
<td dmx-text="numSection"></td>
<td dmx-text="pointValue"></td>
<td dmx-text="description"></td>
</tr>
</tbody>
</table>
</div>
<script src="/PDF/dummyFunctions.js"></script>
<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
<script src="/js/libProcessScript.js"></script>
<!--
<script>
var firstOpen = true;
var time;
$('#timePicker').datetimepicker({
datepicker:false,
useCurrent: false,
format: "hh:mm A"
}).on('dp.show', function() {
if(firstOpen) {
time = moment().startOf('day');
firstOpen = false;
} else {
time = "01:00 PM"
}
$(this).data('DateTimePicker').date(time);
});
</script>
<!--
<script src="/PDF/pdfLibSignature.js"></script>
-->
Reference in New Issue View Git Blame Copy Permalink