74 lines
1.9 KiB
JavaScript
74 lines
1.9 KiB
JavaScript
import { Typography } from "@material-ui/core";
|
|
import clsx from "clsx";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
import { logger } from "../../../services/monitoring";
|
|
import { useStatusContext } from "../../Contexts/StatusContext";
|
|
import { useUserContext } from "../../Contexts/UserContext";
|
|
import {
|
|
useVehicleContext,
|
|
VehicleProvider
|
|
} from "../../Contexts/VehicleContext";
|
|
import DigitalTwin from "../../DigitalTwin";
|
|
import useStyles from "../../useStyles";
|
|
|
|
const REQUEST_INTERVAL = 10000;
|
|
|
|
const Main = (props) => {
|
|
const { getState } = useVehicleContext();
|
|
const {
|
|
token: {
|
|
idToken: { jwtToken: token },
|
|
},
|
|
} = useUserContext();
|
|
const { setMessage } = useStatusContext();
|
|
const classes = useStyles();
|
|
const [carState, setCarState] = useState(null);
|
|
const { vin } = props;
|
|
|
|
useEffect(() => {
|
|
if (!vin) return;
|
|
getCarState();
|
|
const interval = setInterval(getCarState, REQUEST_INTERVAL);
|
|
return () => { clearInterval(interval); }
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [vin]);
|
|
|
|
const getCarState = async () => {
|
|
try {
|
|
const result = await getState(token, vin);
|
|
setCarState(result.data);
|
|
} catch (e) {
|
|
setMessage(e.message);
|
|
logger.warn(e.stack);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={clsx(classes.paper, classes.tableSize)}>
|
|
<Typography variant="h6" style={{ paddingBottom: "10px" }}>
|
|
Digital Twin
|
|
</Typography>
|
|
{carState && (
|
|
<>
|
|
<div>
|
|
<b>Connected</b>: {carState.online.toString()}
|
|
</div>
|
|
<div>
|
|
<b>ICC Connected</b>: {carState?.online_hmi.toString()}
|
|
</div>
|
|
<DigitalTwin {...carState} />
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const DigitalTwinTab = (props) => (
|
|
<VehicleProvider>
|
|
<Main {...props} />
|
|
</VehicleProvider>
|
|
);
|
|
|
|
export default DigitalTwinTab;
|