Added barcode scanning to populate contract form BOD-88

This commit is contained in:
Patrick Fic
2020-07-13 15:01:50 -07:00
parent 924aa5d99a
commit 934dc1f647
13 changed files with 536 additions and 269 deletions

View File

@@ -2844,6 +2844,53 @@
<folder_node>
<name>contracts</name>
<children>
<folder_node>
<name>actions</name>
<children>
<concept_node>
<name>decodelicense</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>senddltoform</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>
<name>errors</name>
<children>
@@ -3400,6 +3447,53 @@
</concept_node>
</children>
</folder_node>
<folder_node>
<name>labels</name>
<children>
<concept_node>
<name>correctdataonform</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>waitingforscan</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>
<name>status</name>
<children>

View File

@@ -7,12 +7,12 @@ export default function ContractsCarsComponent({
loading,
data,
selectedCar,
handleSelect
handleSelect,
}) {
const [state, setState] = useState({
sortedInfo: {},
filteredInfo: { text: "" },
search: ""
search: "",
});
const { t } = useTranslation();
@@ -24,7 +24,7 @@ export default function ContractsCarsComponent({
key: "fleetnumber",
sorter: (a, b) => alphaSort(a.fleetnumber, b.fleetnumber),
sortOrder:
state.sortedInfo.columnKey === "fleetnumber" && state.sortedInfo.order
state.sortedInfo.columnKey === "fleetnumber" && state.sortedInfo.order,
},
{
title: t("courtesycars.fields.status"),
@@ -32,21 +32,24 @@ export default function ContractsCarsComponent({
key: "status",
sorter: (a, b) => alphaSort(a.status, b.status),
sortOrder:
state.sortedInfo.columnKey === "status" && state.sortedInfo.order
state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
render: (text, record) => <div>{t(record.status)}</div>,
},
{
title: t("courtesycars.fields.year"),
dataIndex: "year",
key: "year",
sorter: (a, b) => alphaSort(a.year, b.year),
sortOrder: state.sortedInfo.columnKey === "year" && state.sortedInfo.order
sortOrder:
state.sortedInfo.columnKey === "year" && state.sortedInfo.order,
},
{
title: t("courtesycars.fields.make"),
dataIndex: "make",
key: "make",
sorter: (a, b) => alphaSort(a.make, b.make),
sortOrder: state.sortedInfo.columnKey === "make" && state.sortedInfo.order
sortOrder:
state.sortedInfo.columnKey === "make" && state.sortedInfo.order,
},
{
title: t("courtesycars.fields.model"),
@@ -54,7 +57,7 @@ export default function ContractsCarsComponent({
key: "model",
sorter: (a, b) => alphaSort(a.model, b.model),
sortOrder:
state.sortedInfo.columnKey === "model" && state.sortedInfo.order
state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
},
{
title: t("courtesycars.fields.plate"),
@@ -62,8 +65,8 @@ export default function ContractsCarsComponent({
key: "plate",
sorter: (a, b) => alphaSort(a.plate, b.plate),
sortOrder:
state.sortedInfo.columnKey === "plate" && state.sortedInfo.order
}
state.sortedInfo.columnKey === "plate" && state.sortedInfo.order,
},
];
const handleTableChange = (pagination, filters, sorter) => {
@@ -74,7 +77,7 @@ export default function ContractsCarsComponent({
state.search === ""
? data
: data.filter(
cc =>
(cc) =>
(cc.fleetnumber || "")
.toLowerCase()
.includes(state.search.toLowerCase()) ||
@@ -100,19 +103,19 @@ export default function ContractsCarsComponent({
<Input.Search
placeholder={t("general.labels.search")}
value={state.search}
onChange={e => setState({ ...state, search: e.target.value })}
onChange={(e) => setState({ ...state, search: e.target.value })}
/>
)}
size="small"
pagination={{ position: "top" }}
columns={columns.map(item => ({ ...item }))}
columns={columns.map((item) => ({ ...item }))}
rowKey="id"
dataSource={filteredData}
onChange={handleTableChange}
rowSelection={{
onSelect: handleSelect,
type: "radio",
selectedRowKeys: [selectedCar]
selectedRowKeys: [selectedCar],
}}
/>
);

View File

@@ -1,241 +1,255 @@
import React, { useState } from "react";
import { DatePicker, Form, Input, InputNumber } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { Form, Input, DatePicker, InputNumber, Button } from "antd";
import aamva from "../../utils/aamva";
import InputPhone from "../form-items-formatted/phone-form-item.component";
import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
import InputPhone from "../form-items-formatted/phone-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
export default function ContractFormComponent() {
const [state, setState] = useState("");
export default function ContractFormComponent({ form }) {
const { t } = useTranslation();
return (
<div>
<div style={{ background: "#f00" }}>
TEST AREA
<Input.TextArea
//value={state}
rows={3}
onPressEnter={(e) => {
console.log("e", e);
setState(e.target.value);
}}
/>
<Button
onClick={() => {
var res = aamva.parse(state);
console.log("Entire object", res);
}}>
Decode
</Button>
</div>
<LayoutFormRow>
<Form.Item
label={t("contracts.fields.status")}
name="status"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<ContractStatusSelector />
</Form.Item>
<Form.Item
label={t("contracts.fields.start")}
name="start"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.scheduledreturn")}
name="scheduledreturn"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.actualreturn")}
name="actualreturn"
>
<DatePicker />
</Form.Item>
</LayoutFormRow>
<Form.Item
label={t("contracts.fields.status")}
name='status'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<ContractStatusSelector />
</Form.Item>
<Form.Item
label={t("contracts.fields.start")}
name='start'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<DatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.scheduledreturn")}
name='scheduledreturn'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<DatePicker />
</Form.Item>
<Form.Item label={t("contracts.fields.actualreturn")} name='actualreturn'>
<DatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.kmstart")}
name='kmstart'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<InputNumber />
</Form.Item>
<Form.Item label={t("contracts.fields.kmend")} name='kmend'>
<InputNumber />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_dlnumber")}
name='driver_dlnumber'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_dlexpiry")}
name='driver_dlexpiry'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<DatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_dlst")}
name='driver_dlst'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_fn")}
name='driver_fn'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_ln")}
name='driver_ln'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_addr1")}
name='driver_addr1'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item label={t("contracts.fields.driver_addr2")} name='driver_addr2'>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_city")}
name='driver_city'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_state")}
name='driver_state'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_zip")}
name='driver_zip'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_ph1")}
name='driver_ph1'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<InputPhone />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_dob")}
name='driver_dob'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<DatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.cc_num")}
name='cc_num'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.cc_expiry")}
name='cc_expiry'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.cc_cardholder")}
name='cc_cardholder'
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
<Input />
</Form.Item>
<LayoutFormRow>
<Form.Item
label={t("contracts.fields.kmstart")}
name="kmstart"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputNumber />
</Form.Item>
<Form.Item label={t("contracts.fields.kmend")} name="kmend">
<InputNumber />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow>
<Form.Item
label={t("contracts.fields.driver_dlnumber")}
name="driver_dlnumber"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_dlexpiry")}
name="driver_dlexpiry"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_dlst")}
name="driver_dlst"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_fn")}
name="driver_fn"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_ln")}
name="driver_ln"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_addr1")}
name="driver_addr1"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_addr2")}
name="driver_addr2"
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_city")}
name="driver_city"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_state")}
name="driver_state"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_zip")}
name="driver_zip"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_ph1")}
name="driver_ph1"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InputPhone />
</Form.Item>
<Form.Item
label={t("contracts.fields.driver_dob")}
name="driver_dob"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<DatePicker />
</Form.Item>
</LayoutFormRow>
<LayoutFormRow>
<Form.Item
label={t("contracts.fields.cc_num")}
name="cc_num"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.cc_expiry")}
name="cc_expiry"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("contracts.fields.cc_cardholder")}
name="cc_cardholder"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
</LayoutFormRow>
</div>
);
}

View File

@@ -0,0 +1,120 @@
import { Button, Input, Modal, Typography } from "antd";
import moment from "moment";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import aamva from "../../utils/aamva";
import aamva_npm from "aamva";
import DataLabel from "../data-label/data-label.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
export default function ContractLicenseDecodeButton({ form }) {
const { t } = useTranslation();
const [modalVisible, setModalVisible] = useState(false);
const [loading, setLoading] = useState(false);
const [decodedBarcode, setDecodedBarcode] = useState(null);
console.log("form", form);
const handleDecode = (e) => {
setLoading(true);
const aamvaParse = aamva.parse(e.currentTarget.value);
console.log("AAMVA", aamvaParse);
setDecodedBarcode(aamvaParse);
setLoading(false);
};
const handleInsertForm = () => {
const values = {
driver_dlnumber: decodedBarcode.dl,
driver_dlexpiry: moment(
`20${decodedBarcode.expiration_date}${moment(
decodedBarcode.birthday
).format("DD")}`
),
driver_dlst: decodedBarcode.state,
driver_fn: decodedBarcode.name.first,
driver_ln: decodedBarcode.name.last,
driver_addr1: decodedBarcode.address,
driver_city: decodedBarcode.city,
driver_state: decodedBarcode.state,
driver_zip: decodedBarcode.postal_code,
driver_dob: moment(decodedBarcode.birthday),
};
form.setFieldsValue(values);
setModalVisible(false);
setDecodedBarcode(null);
};
const handleClick = () => {
setModalVisible(true);
};
const handleCancel = () => {
setModalVisible(false);
};
return (
<div>
<Modal
visible={modalVisible}
okText={t("contracts.actions.senddltoform")}
onOk={handleInsertForm}
okButtonProps={{ disabled: !!!decodedBarcode }}
onCancel={handleCancel}
>
<div>
<div>
<Input
autoFocus
allowClear
onChange={(e) => {
if (!loading) setLoading(true);
}}
onPressEnter={handleDecode}
/>
</div>
<LoadingSkeleton loading={loading}>
{decodedBarcode ? (
<div>
<DataLabel label={t("contracts.fields.driver_dlst")}>
{decodedBarcode.state}
</DataLabel>
<DataLabel label={t("contracts.fields.driver_dlnumber")}>
{decodedBarcode.dl}
</DataLabel>
<DataLabel label={t("contracts.fields.driver_fn")}>
{decodedBarcode.name.first}
</DataLabel>
<DataLabel label={t("contracts.fields.driver_ln")}>
{decodedBarcode.name.last}
</DataLabel>
<DataLabel label={t("contracts.fields.driver_addr1")}>
{decodedBarcode.address}
</DataLabel>
<DataLabel label={t("contracts.fields.driver_addr2")}>
{decodedBarcode.address}
</DataLabel>
<DataLabel label={t("contracts.fields.driver_dlexpiry")}>
{moment(
`20${decodedBarcode.expiration_date}${moment(
decodedBarcode.birthday
).format("DD")}`
).format("MM/DD/YYYY")}
</DataLabel>
<DataLabel label={t("contracts.fields.driver_dob")}>
{moment(decodedBarcode.birthday).format("MM/DD/YYYY")}
</DataLabel>
<div>
<Typography.Title level={4}>
{t("contracts.labels.correctdataonform")}
</Typography.Title>
</div>
</div>
) : (
<div>{t("contracts.labels.waitingforscan")}</div>
)}
</LoadingSkeleton>
</div>
</Modal>
<Button onClick={handleClick}>
{t("contracts.actions.decodelicense")}
</Button>
</div>
);
}

View File

@@ -1,13 +1,14 @@
import React from "react";
import ContractFormComponent from "../../components/contract-form/contract-form.component";
import { Button } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import ContractJobsContainer from "../../components/contract-jobs/contract-jobs.container";
import ContractCarsContainer from "../../components/contract-cars/contract-cars.container";
import ContractFormComponent from "../../components/contract-form/contract-form.component";
import ContractJobsContainer from "../../components/contract-jobs/contract-jobs.container";
import ContractLicenseDecodeButton from "../../components/contract-license-decode-button/contract-license-decode-button.component";
export default function ContractCreatePageComponent({
form,
selectedJobState,
selectedCarState
selectedCarState,
}) {
const { t } = useTranslation();
return (
@@ -15,7 +16,8 @@ export default function ContractCreatePageComponent({
<Button htmlType="submit">{t("general.actions.create")}</Button>
<ContractJobsContainer selectedJobState={selectedJobState} />
<ContractCarsContainer selectedCarState={selectedCarState} />
<ContractFormComponent />
<ContractLicenseDecodeButton form={form} />
<ContractFormComponent form={form} />
</div>
);
}

View File

@@ -29,8 +29,6 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) {
);
const [insertContract] = useMutation(INSERT_NEW_CONTRACT);
console.log("test");
const handleFinish = (values) => {
if (!!selectedCarState[0] && !!selectedJobState[0]) {
insertContract({
@@ -81,8 +79,14 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) {
}, [t, setBreadcrumbs]);
return (
<Form form={form} autoComplete="no" onFinish={handleFinish}>
<Form
form={form}
layout="vertical"
autoComplete="no"
onFinish={handleFinish}
>
<ContractCreatePageComponent
form={form}
selectedJobState={selectedJobState}
selectedCarState={selectedCarState}
/>

View File

@@ -7,9 +7,9 @@ import ContractFormComponent from "../../components/contract-form/contract-form.
import ContractJobBlock from "../../components/contract-job-block/contract-job-block.component";
import { setModalContext } from "../../redux/modals/modals.actions";
const mapDispatchToProps = dispatch => ({
setCourtesyCarReturnModalContext: context =>
dispatch(setModalContext({ context: context, modal: "courtesyCarReturn" }))
const mapDispatchToProps = (dispatch) => ({
setCourtesyCarReturnModalContext: (context) =>
dispatch(setModalContext({ context: context, modal: "courtesyCarReturn" })),
});
export function ContractDetailPage({
@@ -17,27 +17,30 @@ export function ContractDetailPage({
job,
courtesyCar,
setCourtesyCarReturnModalContext,
refetch
refetch,
}) {
const { t } = useTranslation();
return (
<div>
<Row align="middle">
<Typography.Title>{`Agreement ${(contract &&
contract.agreementnumber) ||
""} - ${t((contract && contract.status) || "")}`}</Typography.Title>
<Typography.Title>{`Agreement ${
(contract && contract.agreementnumber) || ""
} - ${t((contract && contract.status) || "")}`}</Typography.Title>
<Button type="primary" htmlType="submit">
{t("general.actions.save")}
</Button>
<Button
disabled={contract && contract.status !== "contracts.status.out"}
disabled={
!!!contract ||
(contract && contract.status !== "contracts.status.out")
}
onClick={() => {
setCourtesyCarReturnModalContext({
actions: { refetch },
context: {
contractId: contract.id,
courtesyCarId: courtesyCar.id
}
courtesyCarId: courtesyCar.id,
},
});
}}
>

View File

@@ -65,7 +65,7 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) {
`/manage/courtesycars/contracts/${contractId}`
)
);
}, [t, data, error, loading, setBreadcrumbs, addRecentItem]);
}, [t, data, error, loading, setBreadcrumbs, addRecentItem, contractId]);
const handleFinish = (values) => {
updateContract({
@@ -92,6 +92,7 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem }) {
<Form
form={form}
autoComplete="no"
layout='vertical'
onFinish={handleFinish}
initialValues={
data

View File

@@ -60,7 +60,7 @@ export function CourtesyCarDetailPageContainer({
`/manage/courtesycars/${ccId}`
)
);
}, [t, data, error, loading, setBreadcrumbs, addRecentItem]);
}, [t, data, error, loading, setBreadcrumbs, ccId, addRecentItem]);
const handleFinish = (values) => {
insertCourtesyCar({

View File

@@ -183,6 +183,10 @@
}
},
"contracts": {
"actions": {
"decodelicense": "Decode License",
"senddltoform": "Insert Driver's License Information"
},
"errors": {
"returning": "Error returning courtesy car. {{error}}",
"saving": "Error saving contract. {{error}}",
@@ -213,6 +217,10 @@
"start": "Contract Start",
"status": "Status"
},
"labels": {
"correctdataonform": "Please review the information above. If any of it is not correct, you can fix it later.",
"waitingforscan": "Please scan driver's license barcode..."
},
"status": {
"new": "New Contract",
"out": "Out",

View File

@@ -183,6 +183,10 @@
}
},
"contracts": {
"actions": {
"decodelicense": "",
"senddltoform": ""
},
"errors": {
"returning": "",
"saving": "",
@@ -213,6 +217,10 @@
"start": " ",
"status": ""
},
"labels": {
"correctdataonform": "",
"waitingforscan": ""
},
"status": {
"new": "",
"out": "",

View File

@@ -183,6 +183,10 @@
}
},
"contracts": {
"actions": {
"decodelicense": "",
"senddltoform": ""
},
"errors": {
"returning": "",
"saving": "",
@@ -213,6 +217,10 @@
"start": "",
"status": ""
},
"labels": {
"correctdataonform": "",
"waitingforscan": ""
},
"status": {
"new": "",
"out": "",

View File

@@ -85,15 +85,17 @@
restrictions: res3[6],
endorsments: res3[7],
sex: (function () {
switch (Number(res3[8])) {
case 1:
switch (res3[8]) {
case "1":
case "M":
return "MALE";
case 2:
case "2":
case "F":
return "FEMALE";
default:
return "MISSING/INVALID";
return res3[8] + ": MISSING/INVALID";
}
})(),
height: res3[9],