Skip to content

Commit dc6efed

Browse files
felixindrawanfelixindrawan
committed
feat: add validation status to result fields
1 parent 7f57e3e commit dc6efed

File tree

3 files changed

+91
-14
lines changed

3 files changed

+91
-14
lines changed

‎css/index.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,14 +313,37 @@ img {
313313

314314
.result-container .parsed-result-area .parsed-filed .field-name {
315315
color: #aaaaaa;
316+
display: flex;
317+
align-items: center;
318+
gap: 0.5rem;
316319
}
317320
.result-container .parsed-result-area .parsed-filed .field-value {
318321
word-wrap: break-word;
319322
}
323+
320324
.result-container .parsed-result-area .code .field-value {
321325
font-family: monospace;
322326
}
323327

328+
.result-container .parsed-result-area .parsed-filed .status-icon {
329+
display: inline-flex;
330+
align-items: center;
331+
cursor: help; /* Indicates there's a tooltip */
332+
}
333+
334+
.result-container .parsed-result-area .parsed-filed .status-icon svg {
335+
width: 16px;
336+
height: 16px;
337+
}
338+
339+
.result-container .parsed-result-area .parsed-filed .status-success {
340+
color: #22c55e; /* Green */
341+
}
342+
343+
.result-container .parsed-result-area .parsed-filed .status-failed {
344+
color: #ef4444; /* Red */
345+
}
346+
324347
.result-container .scan-again {
325348
width: 100%;
326349
height: 10%;

‎index.html‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ <h3 style="font-weight: normal">Quick Start Options</h3>
4646
</div>
4747
<div class="scanner-container">
4848
<div class="header">
49-
<div class="camera-selector">
49+
<div class="camera-selector" title="Select Camera">
5050
<svg data-v-10660718="" viewBox="0 0 29.308 17" class="camera-svg">
5151
<g data-v-10660718="" transform="translate(-346.925 -627.702)">
5252
<g data-v-10660718="" transform="translate(347.425 628.202)">
@@ -80,14 +80,18 @@ <h3 style="font-weight: normal">Quick Start Options</h3>
8080
</div>
8181
<div class="camera-list"></div>
8282
<input type="file" class="upload-image-input" style="display: none" />
83-
<div class="upload-image-btn" onclick="document.querySelector('.upload-image-input').click()">
83+
<div
84+
class="upload-image-btn"
85+
onclick="document.querySelector('.upload-image-input').click()"
86+
title="Upload Image"
87+
>
8488
<img class="upload-image-icon" src="./assets/upload-image.svg" alt="upload-image" />
8589
</div>
8690
<div class="music-container">
87-
<img class="music" src="./assets/music-selected.svg" alt="music" />
88-
<img class="no-music" src="./assets/music-unselected.svg" alt="no-music" />
91+
<img class="music" src="./assets/music-selected.svg" alt="music" title="Turn sound off" />
92+
<img class="no-music" src="./assets/music-unselected.svg" alt="no-music" title="Turn sound on" />
8993
</div>
90-
<div class="information-btn">
94+
<div class="information-btn" title="More Information">
9195
<svg
9296
xmlns="http://www.w3.org/2000/svg"
9397
class="icon icon-tabler icon-tabler-info-circle"

‎js/util.js‎

Lines changed: 59 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export function extractDocumentFields(result) {
2323
const parseResultInfo = {};
2424
if (!result.exception) {
2525
const type = result.getFieldValue("documentCode");
26+
const documentNumber = type === "P" ? "passportNumber" : "documentNumber";
2627
const documentType = JSON.parse(result.jsonString).CodeType;
2728
const birthYear = result.getFieldValue("birthYear");
2829
const birthYearBase = parseInt(birthYear) > new Date().getFullYear() % 100 ? "19" : "20";
@@ -33,13 +34,30 @@ export function extractDocumentFields(result) {
3334
const fullExpiryYear = `${expiryYearBase}${expiryYear}`;
3435

3536
parseResultInfo["Document Type"] = documentType;
36-
parseResultInfo["Surname"] = result.getFieldValue("primaryIdentifier");
37-
parseResultInfo["Given Name"] = result.getFieldValue("secondaryIdentifier");
38-
parseResultInfo["Nationality"] = result.getFieldValue("nationality");
39-
parseResultInfo["Document Number"] =
40-
type === "P" ? result.getFieldValue("passportNumber") : result.getFieldValue("documentNumber");
41-
parseResultInfo["Issuing State"] = result.getFieldValue("issuingState");
42-
parseResultInfo["Sex"] = result.getFieldValue("sex");
37+
parseResultInfo["Surname"] = {
38+
text: result.getFieldValue("primaryIdentifier"),
39+
status: result.getFieldValidationStatus("primaryIdentifier"),
40+
};
41+
parseResultInfo["Given Name"] = {
42+
text: result.getFieldValue("secondaryIdentifier"),
43+
status: result.getFieldValidationStatus("secondaryIdentifier"),
44+
};
45+
parseResultInfo["Nationality"] = {
46+
text: result.getFieldValue("nationality"),
47+
status: result.getFieldValidationStatus("nationality"),
48+
};
49+
parseResultInfo["Document Number"] = {
50+
text: result.getFieldValue(documentNumber),
51+
status: result.getFieldValidationStatus(documentNumber),
52+
};
53+
parseResultInfo["Issuing State"] = {
54+
text: result.getFieldValue("issuingState"),
55+
status: result.getFieldValidationStatus("issuingState"),
56+
};
57+
parseResultInfo["Sex"] = {
58+
text: result.getFieldValue("sex"),
59+
status: result.getFieldValidationStatus("sex"),
60+
};
4361
parseResultInfo["Date of Birth (YYYY-MM-DD)"] =
4462
fullBirthYear + "-" + result.getFieldValue("birthMonth") + "-" + result.getFieldValue("birthDay");
4563
parseResultInfo["Date of Expiry (YYYY-MM-DD)"] =
@@ -125,9 +143,41 @@ export function resultToHTMLElement(field, value) {
125143
spanFieldName.className = "field-name";
126144
const spanValue = document.createElement("span");
127145
spanValue.className = "field-value";
146+
const statusIcon = document.createElement("span");
147+
statusIcon.className = "status-icon";
148+
149+
// Define success and failed icons
150+
const icons = {
151+
success: `<svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
152+
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
153+
</svg>`,
154+
failed: `<svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
155+
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
156+
</svg>`,
157+
};
158+
159+
// Handle validation status based on EnumValidationStatus
160+
switch (value?.status) {
161+
case Dynamsoft.DCP.EnumValidationStatus.VS_SUCCEEDED:
162+
statusIcon.innerHTML = icons.success;
163+
statusIcon.className += " status-success";
164+
statusIcon.title = "Validation passed";
165+
break;
166+
case Dynamsoft.DCP.EnumValidationStatus.VS_FAILED:
167+
statusIcon.innerHTML = icons.failed;
168+
statusIcon.className += " status-failed";
169+
statusIcon.title = "Validation failed";
170+
break;
171+
case Dynamsoft.DCP.EnumValidationStatus.VS_NONE:
172+
default:
173+
// Don't add any icon for VS_NONE
174+
statusIcon.style.display = "none";
175+
break;
176+
}
128177

129-
spanFieldName.innerText = `${field} : `;
130-
spanValue.innerText = `${value || "Not detected"}`;
178+
spanFieldName.innerText = `${field}`;
179+
spanFieldName.append(statusIcon);
180+
spanValue.innerText = `${value?.text || value || "Not detected"}`;
131181

132182
p.appendChild(spanFieldName);
133183
p.appendChild(spanValue);

0 commit comments

Comments
 (0)