130 lines
4.1 KiB
JavaScript
130 lines
4.1 KiB
JavaScript
import React from "react";
|
|
|
|
import { LocalDateTimeString } from "../../utils/dates";
|
|
import { ValidateLocationByParam } from "../../utils/locations";
|
|
import useStyles from "../useStyles";
|
|
|
|
const UNKNOWN = "unknown";
|
|
const LOCKED = "Locked";
|
|
const UNLOCKED = "Unlocked";
|
|
|
|
const keyValueTemplate = (key, value) => (
|
|
<p key={key}>
|
|
<b>{key}</b>: {value}
|
|
</p>
|
|
);
|
|
const openCloseState = (value) => (value ? "open" : "closed");
|
|
const mapOpenCloseState = (value) =>
|
|
keyValueTemplate(value[0], openCloseState(value[1]));
|
|
|
|
const windowState = (value) => {
|
|
if (value[1] === 0 || value[1] > 100) {
|
|
return keyValueTemplate(value[0], `closed (${value[1]})`);
|
|
} else {
|
|
return keyValueTemplate(value[0], `${value[1]}% open`);
|
|
}
|
|
}
|
|
|
|
const DigitalTwin = (props) => {
|
|
const classes = useStyles();
|
|
const { battery, doors, location, trex_version, ip, updated, windows, misc_windows, sunroof, dbc_version, door_locks, vcu0x260, charging_metrics, max_range } = props;
|
|
|
|
return (
|
|
<div>
|
|
{!battery && !doors && !location && !windows && !vcu0x260 && !charging_metrics && (
|
|
<p>No vehicle data to display.</p>
|
|
)}
|
|
{(battery || max_range) && (
|
|
<div className={classes.popupSection}>
|
|
<h3>Battery</h3>
|
|
{keyValueTemplate("Percentage", `${battery?.percent || 0}%`)}
|
|
{keyValueTemplate("Total Mileage", battery?.total_mileage_odometer || UNKNOWN)}
|
|
{keyValueTemplate("Max Range", max_range?.max_miles || UNKNOWN)}
|
|
</div>
|
|
)}
|
|
{(vcu0x260 || charging_metrics) && (
|
|
<div className={classes.popupSection}>
|
|
<h3>Charging</h3>
|
|
{keyValueTemplate("Charge Type", vcu0x260?.charge_type || UNKNOWN)}
|
|
{keyValueTemplate("Remaining Time", charging_metrics?.remaining_charging_time || UNKNOWN)}
|
|
</div>
|
|
)}
|
|
{doors && (
|
|
<div className={classes.popupSection}>
|
|
<h3>Doors</h3>
|
|
{Object.entries(doors).map(mapOpenCloseState)}
|
|
</div>
|
|
)}
|
|
{door_locks && (
|
|
<div className={classes.popupSection}>
|
|
<h3>Door Locks</h3>
|
|
{Object.entries(door_locks).map((value) => {
|
|
return keyValueTemplate(value[0], value[1] ? LOCKED : UNLOCKED);
|
|
})}
|
|
</div>
|
|
)}
|
|
{windows && (
|
|
<div className={classes.popupSection}>
|
|
<h3>Windows</h3>
|
|
{Object.entries(windows).map((value) => {
|
|
return windowState(value);
|
|
})}
|
|
</div>
|
|
)}
|
|
{misc_windows && (
|
|
<div className={classes.popupSection}>
|
|
<h3>Misc Windows</h3>
|
|
{Object.entries(misc_windows).map((value) => {
|
|
return windowState(value);
|
|
})}
|
|
</div>
|
|
)}
|
|
{sunroof && (
|
|
<div className={classes.popupSection}>
|
|
<h3>Sunroof</h3>
|
|
{Object.entries(sunroof).map((value) => {
|
|
return windowState(value);
|
|
})}
|
|
</div>
|
|
)}
|
|
{location && (
|
|
<div className={classes.popupSection}>
|
|
<h3>Location</h3>
|
|
{Object.entries(location).map((value) => {
|
|
if (ValidateLocationByParam(value[0], value[1]) === false) {
|
|
return keyValueTemplate(value[0], "Invalid")
|
|
}
|
|
if (value[0] === "altitude") {
|
|
return keyValueTemplate(value[0], value[1]);
|
|
} else {
|
|
return keyValueTemplate(value[0], `${value[1]}°`);
|
|
}
|
|
})}
|
|
</div>
|
|
)}
|
|
{trex_version && (
|
|
<div className={classes.popupSection}>
|
|
{keyValueTemplate("Trex Version", trex_version)}
|
|
</div>
|
|
)}
|
|
{ip && (
|
|
<div className={classes.popupSection}>
|
|
{keyValueTemplate("Trex IP", ip)}
|
|
</div>
|
|
)}
|
|
{updated != null && (
|
|
<div className={classes.popupSection}>
|
|
{keyValueTemplate("Updated At", LocalDateTimeString(updated))}
|
|
</div>
|
|
)}
|
|
{dbc_version != null && (
|
|
<div className={classes.popupSection}>
|
|
{keyValueTemplate("DBC Version", dbc_version)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DigitalTwin;
|