import React, { useEffect, useRef, useState } from "react";
import { Redirect } from "react-router";
import { useLocation } from "react-router-dom";
import {
Button,
Checkbox,
FormControlLabel,
FormGroup,
FormLabel,
Radio,
RadioGroup,
TextField
} from "@material-ui/core";
import useStyles from "../../useStyles";
import {
useVehicleContext,
VehicleProvider
} from "../../Contexts/VehicleContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
import { logger } from "../../../services/monitoring";
const MainForm = () => {
const queries = new URLSearchParams(useLocation().search);
const vin = queries.get("vin") ?? "";
const { vehicle, getVehicle, updateVehicle, busy } = useVehicleContext();
const { token: { idToken: { jwtToken: token } } } = useUserContext();
const { setMessage, setTitle, setSitePath } = useStatusContext();
const [redirect, setRedirect] = useState(null);
const classes = useStyles();
const iccidEl = useRef(null);
const modelEl = useRef(null);
const yearEl = useRef(null);
const trimEl = useRef(null);
const countryEl = useRef(null);
const powertrainEl = useRef(null);
const restraintEl = useRef(null);
const bodyTypeEl = useRef(null);
const infoSourceEl = useRef(null);
const [selectedLogLevel, setSelectedLogLevel] = useState("info");
const [canbusEnabled, setCANBusEnabled] = useState(true);
const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
const [maxMemBufferSize, setMaxMemBufferSize] = useState(0);
const [maxDiskBufferSize, setMaxDiskBufferSize] = useState(0);
useEffect(() => {
setTitle("Update Vehicle");
setSitePath([
{
label: `Vehicle ${vin}`,
link: "/vehicles",
},
{
label: "Update Vehicle",
},
]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
(async () => {
try {
if (!vin || !token) return;
await getVehicle(vin, token);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token]);
useEffect(() => {
setSelectedLogLevel(vehicle.log_level ?? selectedLogLevel);
iccidEl.current.value = vehicle.iccid ?? ""
modelEl.current.value = vehicle.model ?? "Ocean"
yearEl.current.value = vehicle.year ?? "2022"
trimEl.current.value = vehicle.trim ?? "Base"
countryEl.current.value = vehicle.country ?? ""
powertrainEl.current.value = vehicle.powertrain ?? ""
restraintEl.current.value = vehicle.restraint ?? ""
bodyTypeEl.current.value = vehicle.body_type ?? ""
infoSourceEl.current.value = vehicle.info_source ?? ""
if (vehicle.canbus) {
setCANBusEnabled(vehicle.canbus.enabled ?? canbusEnabled);
setDataLoggerEnabled(vehicle.canbus.data_logger_enabled ?? dataLoggerEnabled);
setMaxMemBufferSize(vehicle.canbus.max_mem_buffer_size ?? maxMemBufferSize);
setMaxDiskBufferSize(vehicle.canbus.max_disk_buffer_size ?? maxDiskBufferSize);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [vehicle]);
const onLogLevelChange = (event) => {
setSelectedLogLevel(event.target.value);
}
const onCANBusChange = (event) => {
setCANBusEnabled(event.target.checked);
}
const onDataLoggerChange = (event) => {
setDataLoggerEnabled(event.target.checked);
}
const onMaxMemBufferSizeChange = (event) => {
setMaxMemBufferSize(event.target.value);
}
const onMaxDiskBufferSizeChange = (event) => {
setMaxDiskBufferSize(event.target.value);
}
const onSubmit = async (event) => {
try {
event.preventDefault();
const formData = {
vin: vin,
iccid: iccidEl.current.value,
model: modelEl.current.value,
year: parseInt(yearEl.current.value),
trim: trimEl.current.value,
country: countryEl.current.value,
powertrain: powertrainEl.current.value,
restraint: restraintEl.current.value,
body_type: bodyTypeEl.current.value,
log_level: selectedLogLevel,
canbus: {
enabled: canbusEnabled,
data_logger_enabled: canbusEnabled ? dataLoggerEnabled : false,
max_mem_buffer_size: canbusEnabled ? parseInt(maxMemBufferSize) : 0,
max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0
}
};
const result = await updateVehicle(vin, formData, token);
if (!result || result.error) return;
setMessage(`Updated ${result.vin}`);
setRedirect(`/vehicle-status/${result.vin}`);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
};
if (redirect && redirect.length > 0) {
return ;
}
return (
);
};
const VehicleUpdateForm = (props) => (
);
export default VehicleUpdateForm;