272 lines
14 KiB
HTML
272 lines
14 KiB
HTML
|
<th:block th:utext="#{title.fingerprint}"></th:block>
|
||
|
<form id="formFingerprint" name="formFingerprint"
|
||
|
th:action="@{'/resources/fingerprint-details'}"
|
||
|
th:object="${deviceForm}" autocomplete="off" th:method="post"
|
||
|
enctype="multipart/form-data ">
|
||
|
<input type="hidden" th:value="${profile?.wrkrRegId}" name="workerRegId" />
|
||
|
<input type="hidden" th:value="${profile?.workerProfile?.wrkrProfId}" name="wrkrProfId" />
|
||
|
<input type="hidden" th:value="${profile?.wrkrRegNo}" name="wrkrRegNo" />
|
||
|
<input type="hidden" th:value="${updateFlag}" name="updateFlag" />
|
||
|
<div class="row el-element-overlay">
|
||
|
<div class="col-4">
|
||
|
<div class="card ribbon-wrapper p-0" id="card-left">
|
||
|
<div class="ribbon ribbon-corner ribbon-bottom" th:classappend="${#lists.isEmpty(lstForm)} ? 'ribbon-default' : 'ribbon-success'">
|
||
|
<th:block th:if="${#lists.isEmpty(lstForm)}">
|
||
|
<i class="far fa-lg fa-question-circle"></i>
|
||
|
</th:block>
|
||
|
<th:block th:unless="${#lists.isEmpty(lstForm)}">
|
||
|
<i class="far fa-lg fa-check-circle"></i>
|
||
|
</th:block>
|
||
|
</div>
|
||
|
<div class="el-card-item ">
|
||
|
<div class="el-card-avatar el-overlay-1">
|
||
|
<th:block th:if="${#lists.isEmpty(lstForm)}">
|
||
|
<img id="fingerprintLeftImg" width="100%" height="100%" class="lazy" th:src="${baseUrl}+@{/images/example/left_slab.png}" alt="front" />
|
||
|
<input id="fingerprintLeft" width="100%" height="100%" type="image" class="card-img-top worker-img"
|
||
|
alt="Place your left slab in device" style="display: none;" />
|
||
|
</th:block>
|
||
|
<th:block th:unless="${#lists.isEmpty(lstForm)}">
|
||
|
<img id="fingerprintLeftImg" th:style="${lstForm[0].leftSlap == '' ? 'display: block' : 'display: none'}" width="100%" height="100%" class="lazy" th:src="${baseUrl}+@{/images/example/left_slab.png}" alt="front" />
|
||
|
<input id="fingerprintLeft" th:style="${lstForm[0].leftSlap != '' ? 'display: block' : 'display: none'}" width="100%" height="100%" type="image" class="card-img-top worker-img"
|
||
|
th:src="${'data:image/png;base64,'+ lstForm[0].leftSlap}" alt="Left Slab"/>
|
||
|
</th:block>
|
||
|
<label id="tblFingerprintLeft-error" class="error" style="display: none;" for="tblFingerprintLeft"></label>
|
||
|
<div class="el-overlay">
|
||
|
<ul class="el-info">
|
||
|
<li title="Reset">
|
||
|
<button type="button" th:onclick="resetFingerPrint('fingerprintLeft','tblLeftSlap')" class="btn btn-danger default btn-outline btn-check-device">
|
||
|
<i class="material-icons">autorenew</i> Reset
|
||
|
</button>
|
||
|
</li>
|
||
|
<li title="Scan">
|
||
|
<button id="btnFingerprintLeft" type="button" th:onclick="scanFingerPrint('fingerprintLeft', 'btnFingerprintLeft')" class="btn btn-success default btn-outline btn-check-device">
|
||
|
<i class="material-icons">document_scanner</i> Scan
|
||
|
</button>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="el-card-content">
|
||
|
<h3 class="box-title">Left Slab</h3>
|
||
|
<small>Place <strong>LEFT</strong> slab on the device</small>
|
||
|
<div class="table-responsive" id="tblFingerprintLeft">
|
||
|
<table id="tblLeftSlap" class="table bg-default">
|
||
|
<colgroup>
|
||
|
<col width="10%">
|
||
|
<col width="10%">
|
||
|
<col width="10%">
|
||
|
<col width="10%">
|
||
|
</colgroup>
|
||
|
<thead class="table-primary">
|
||
|
<tr>
|
||
|
<th>little</th>
|
||
|
<th>ring</th>
|
||
|
<th>middle</th>
|
||
|
<th>index</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<td><input type="text" readonly="readonly" class="remove-border" style="width: 100%" placeholder="0" th:field="*{leftLittle}" name="leftLittle" id="leftLittle" /></td>
|
||
|
<td><input type="text" readonly="readonly" class="remove-border" style="width: 100%" placeholder="0" th:field="*{leftRing}" name="leftRing" id="leftRing" /></td>
|
||
|
<td><input type="text" readonly="readonly" class="remove-border" style="width: 100%" placeholder="0" th:field="*{leftMiddle}" name="leftMiddle" id="leftMiddle" /></td>
|
||
|
<td><input type="text" readonly="readonly" class="remove-border" style="width: 100%" placeholder="0" th:field="*{leftIndex}" name="leftIndex" id="leftIndex" /></td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-4">
|
||
|
<div class="card ribbon-wrapper p-0" id="card-right">
|
||
|
<div class="ribbon ribbon-corner ribbon-bottom" th:classappend="${#lists.isEmpty(lstForm)} ? 'ribbon-default' : 'ribbon-success'">
|
||
|
<th:block th:if="${#lists.isEmpty(lstForm)}">
|
||
|
<i class="far fa-lg fa-question-circle"></i>
|
||
|
</th:block>
|
||
|
<th:block th:unless="${#lists.isEmpty(lstForm)}">
|
||
|
<i class="far fa-lg fa-check-circle"></i>
|
||
|
</th:block>
|
||
|
</div>
|
||
|
<div class="el-card-item ">
|
||
|
<div class="el-card-avatar el-overlay-1">
|
||
|
<th:block th:if="${#lists.isEmpty(lstForm)}">
|
||
|
<img id="fingerprintRightImg" width="100%" height="100%" th:src="${baseUrl}+@{/images/example/right_slab.png}" alt="front" />
|
||
|
<input id="fingerprintRight" width="100%" height="100%" type="image" class="card-img-top"
|
||
|
alt="Place your right slab in device" style="display: none;" />
|
||
|
</th:block>
|
||
|
<th:block th:unless="${#lists.isEmpty(lstForm)}">
|
||
|
<img id="fingerprintRightImg" th:style="${lstForm[0].rightSlap == '' ? 'display: block' : 'display: none'}" width="100%" height="100%" th:src="${baseUrl}+@{/images/example/right_slab.png}" alt="front" />
|
||
|
<input id="fingerprintRight" th:style="${lstForm[0].rightSlap != '' ? 'display: block' : 'display: none'}" width="100%" height="100%" type="image" class="card-img-top"
|
||
|
th:src="${'data:image/png;base64,'+ lstForm[0].rightSlap}" alt="" />
|
||
|
</th:block>
|
||
|
<label id="tblFingerprintRight-error" class="error" style="display: none;" for="tblFingerprintRight"></label>
|
||
|
<div class="el-overlay">
|
||
|
<ul class="el-info">
|
||
|
<li title="Reset">
|
||
|
<button type="button" th:onclick="resetFingerPrint('fingerprintRight','tblRightSlap')" class="btn btn-danger default btn-outline btn-check-device">
|
||
|
<i class="material-icons">autorenew</i> Reset
|
||
|
</button>
|
||
|
</li>
|
||
|
<li title="Scan">
|
||
|
<button id="btnFingerprintRight" type="button" th:onclick="scanFingerPrint('fingerprintRight', 'btnFingerprintRight')" class="btn btn-success default btn-outline btn-check-device">
|
||
|
<i class="material-icons">document_scanner</i> Scan
|
||
|
</button>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="el-card-content">
|
||
|
<h3 class="box-title">Right Slab</h3>
|
||
|
<small>Place <strong>RIGHT</strong> slab on the device</small>
|
||
|
<div class="table-responsive" id="tblFingerprintRight">
|
||
|
<table id="tblRightSlap" class="table bg-default">
|
||
|
<colgroup>
|
||
|
<col width="10%">
|
||
|
<col width="10%">
|
||
|
<col width="10%">
|
||
|
<col width="10%">
|
||
|
</colgroup>
|
||
|
<thead class="table-primary">
|
||
|
<tr>
|
||
|
<th>little</th>
|
||
|
<th>ring</th>
|
||
|
<th>middle</th>
|
||
|
<th>index</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<td><input type="text" readonly="readonly" class="remove-border" style="width: 100%" placeholder="0" th:field="*{rightLittle}" name="rightLittle" id="rightLittle" /></td>
|
||
|
<td><input type="text" readonly="readonly" class="remove-border" style="width: 100%" placeholder="0" th:field="*{rightRing}" name="rightRing" id="rightRing" /></td>
|
||
|
<td><input type="text" readonly="readonly" class="remove-border" style="width: 100%" placeholder="0" th:field="*{rightMiddle}" name="rightMiddle" id="rightMiddle" /></td>
|
||
|
<td><input type="text" readonly="readonly" class="remove-border" style="width: 100%" placeholder="0" th:field="*{rightIndex}" name="rightIndex" id="rightIndex" /></td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-4">
|
||
|
<div class="card ribbon-wrapper p-0" id="card-both">
|
||
|
<div class="ribbon ribbon-corner ribbon-bottom" th:classappend="${#lists.isEmpty(lstForm)} ? 'ribbon-default' : 'ribbon-success'">
|
||
|
<th:block th:if="${#lists.isEmpty(lstForm)}">
|
||
|
<i class="far fa-lg fa-question-circle"></i>
|
||
|
</th:block>
|
||
|
<th:block th:unless="${#lists.isEmpty(lstForm)}">
|
||
|
<i class="far fa-lg fa-check-circle"></i>
|
||
|
</th:block>
|
||
|
</div>
|
||
|
<div class="el-card-item">
|
||
|
<div class="el-card-avatar el-overlay-1">
|
||
|
<th:block th:if="${#lists.isEmpty(lstForm)}">
|
||
|
<img id="fingerprintBothImg" class="lazy" width="100%" height="270px" th:src="${baseUrl}+@{/images/example/two_thumbs.png}" alt="back" />
|
||
|
<input id="fingerprintBoth" width="100%" height="100%" type="image" class="card-img-top"
|
||
|
alt="Place both thumb in device" style="display: none;" />
|
||
|
</th:block>
|
||
|
<th:block th:unless="${#lists.isEmpty(lstForm)}">
|
||
|
<img id="fingerprintBothImg" th:style="${lstForm[0].bothSlap == '' ? 'display: block' : 'display: none'}" class="lazy" width="100%" height="270px" th:src="${baseUrl}+@{/images/example/two_thumbs.png}" alt="back" />
|
||
|
<input id="fingerprintBoth" th:style="${lstForm[0].bothSlap != '' ? 'display: block' : 'display: none'}" width="100%" height="100%" type="image" class="card-img-top"
|
||
|
th:src="${'data:image/png;base64,'+ lstForm[0].bothSlap}" alt="" />
|
||
|
</th:block>
|
||
|
<label id="tblFingerprintBoth-error" class="error" style="display: none;" for="tblFingerprintBoth"></label>
|
||
|
<div class="el-overlay">
|
||
|
<ul class="el-info">
|
||
|
<li>
|
||
|
<button type="button" th:onclick="resetFingerPrint('fingerprintBoth','tblBothSlap')" class="btn btn-danger default btn-outline btn-check-device">
|
||
|
<i class="material-icons">autorenew</i> Reset
|
||
|
</button>
|
||
|
</li>
|
||
|
<li>
|
||
|
<button id="btnFingerprintBoth" type="button" th:onclick="scanFingerPrint('fingerprintBoth', 'btnFingerprintBoth')" class="btn btn-success default btn-outline btn-check-device">
|
||
|
<i class="material-icons">document_scanner</i> Scan
|
||
|
</button>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="el-card-content">
|
||
|
<h3 class="box-title">Both Thumb</h3>
|
||
|
<small>Place <strong>BOTH THUMB</strong> on the device</small>
|
||
|
<div class="table-responsive" id="tblFingerprintBoth">
|
||
|
<table id="tblBothSlap" class="table bg-default">
|
||
|
<colgroup>
|
||
|
<col width="10%">
|
||
|
<col width="10%">
|
||
|
</colgroup>
|
||
|
<thead class="table-primary">
|
||
|
<tr>
|
||
|
<th>left thumb</th>
|
||
|
<th>ring thumb</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<td><input type="text" readonly="readonly" class="remove-border" style="width: 100%" placeholder="0" th:field="*{leftThumb}" name="leftThumb" id="leftThumb" /></td>
|
||
|
<td><input type="text" readonly="readonly" class="remove-border" style="width: 100%" placeholder="0" th:field="*{rightThumb}" name="rightThumb" id="rightThumb" /></td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<h5 class="box-title">Finger Quality Indicator (<small><th:block th:text="${range.get('RANGE')}"></th:block> Range</small>)</h5>
|
||
|
<div class="row">
|
||
|
<div class="col-3">
|
||
|
<div class="card">
|
||
|
<div class="card-body">
|
||
|
<div class="d-flex flex-row">
|
||
|
<div class="round align-self-center round-success"><span th:text="${range.get('ACPT')}"></span></div>
|
||
|
<div class="m-l-10 align-self-center"><h3 class="m-b-0">Acceptable</h3></div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-3">
|
||
|
<div class="card">
|
||
|
<div class="card-body">
|
||
|
<div class="d-flex flex-row">
|
||
|
<div class="round align-self-center round-info"><span th:text="${range.get('GOOD')}"></span></div>
|
||
|
<div class="m-l-10 align-self-center"><h3 class="m-b-0">Good</h3></div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-3">
|
||
|
<div class="card">
|
||
|
<div class="card-body">
|
||
|
<div class="d-flex flex-row">
|
||
|
<div class="round align-self-center round-primary"><span th:text="${range.get('AVRG')}"></span></div>
|
||
|
<div class="m-l-10 align-self-center"><h3 class="m-b-0">Average</h3></div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="col-3">
|
||
|
<div class="card">
|
||
|
<div class="card-body">
|
||
|
<div class="d-flex flex-row">
|
||
|
<div class="round align-self-center round-danger"><span th:text="${range.get('BAD')}"></span></div>
|
||
|
<div class="m-l-10 align-self-center"><h3 class=" m-b-0">Bad</h3></div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="row">
|
||
|
<div class="col-12">
|
||
|
<div class="pb-3 text-right">
|
||
|
<div class="ml-auto button-group">
|
||
|
<a class="btn waves-effect waves-light btn-secondary" th:href="@{${'/resources/previousTab?previousTab='+previousTab + '&wrkrRegId=' + profile?.wrkrRegId + '&updateFlag=' + updateFlag}}">Previous</a>
|
||
|
<button type="submit" id="btnFingerprintSave" disabled="disabled" value="Save and Continue" class="btn waves-effect waves-light btn-primary btn-check-device">Save and Continue</button>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</form>
|