Merge pull request #507 from Fisker-Inc/CEC-5751
CEC-5751 - Flashpack UI: Make a picklist for the ECU names
This commit is contained in:
Paul Adamsen
@@ -291,11 +291,11 @@ export const VehicleProvider = ({ children }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getAllFlashpacks = async (options, token) => {
|
const getAllFlashpacks = async (model, trim, year, options, token) => {
|
||||||
try {
|
try {
|
||||||
setBusy(true);
|
setBusy(true);
|
||||||
|
|
||||||
const result = await api.getAllFlashpacks(options, token);
|
const result = await api.getAllFlashpacks(model, trim, year, options, token);
|
||||||
if (result.error) {
|
if (result.error) {
|
||||||
throw new Error(`Get all flashpacks error. ${result.message}`);
|
throw new Error(`Get all flashpacks error. ${result.message}`);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,32 +1,52 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Select } from "@material-ui/core";
|
import { FormControl, InputLabel, Select } from "@material-ui/core";
|
||||||
|
import useStyles from "../../useStyles";
|
||||||
|
|
||||||
const ECUDropDown = (props) => {
|
const ECUDropDown = (props) => {
|
||||||
const changeHandler = (e) => {
|
const changeHandler = (e) => {
|
||||||
if (!props.changeHandler) return;
|
if (!props.changeHandler) return;
|
||||||
props.changeHandler(e);
|
props.changeHandler(e);
|
||||||
};
|
};
|
||||||
|
const classes = useStyles();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Select
|
<FormControl
|
||||||
id={props.id}
|
|
||||||
native
|
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
value={props.value}
|
margin="normal"
|
||||||
onChange={changeHandler}
|
fullWidth={false}
|
||||||
>
|
>
|
||||||
{ECUs.map((item, index) => (
|
<InputLabel
|
||||||
<option key={index} value={item[0]}>
|
className={classes.whiteBackground}
|
||||||
{item[1]}
|
required={props.required}
|
||||||
</option>
|
disabled={props.disabled}
|
||||||
))}
|
>
|
||||||
</Select>
|
{props.label}
|
||||||
|
</InputLabel>
|
||||||
|
<Select
|
||||||
|
id={props.id}
|
||||||
|
name={props.name}
|
||||||
|
variant={"outlined"}
|
||||||
|
native
|
||||||
|
value={props.value}
|
||||||
|
onChange={changeHandler}
|
||||||
|
disabled={props.disabled}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
ECUs.map((item, index) => (
|
||||||
|
<option key={index} value={item && item[0] ? item[0] : null}>
|
||||||
|
{item && item[0] ? item[0] : null}
|
||||||
|
</option>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</Select >
|
||||||
|
</FormControl>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ECUDropDown;
|
export default ECUDropDown;
|
||||||
|
|
||||||
const ECUs = [
|
const ECUs = [
|
||||||
|
null,
|
||||||
["AGS", "Active Grille Shutter"],
|
["AGS", "Active Grille Shutter"],
|
||||||
["ADB", "Adaptive Driving Beam"],
|
["ADB", "Adaptive Driving Beam"],
|
||||||
["ADAS", "Advanced Driver Assist System"],
|
["ADAS", "Advanced Driver Assist System"],
|
||||||
|
|||||||
@@ -24,138 +24,175 @@ exports[`FlashpackAdd Render 1`] = `
|
|||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
|
||||||
data-shrink="false"
|
data-shrink="true"
|
||||||
for="carModel"
|
|
||||||
id="carModel-label"
|
|
||||||
>
|
>
|
||||||
Model
|
Model
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
|
||||||
>
|
|
||||||
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
|
||||||
|
required=""
|
||||||
>
|
>
|
||||||
<input
|
<select
|
||||||
aria-invalid="false"
|
aria-invalid="false"
|
||||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
|
||||||
id="carModel"
|
|
||||||
maxlength="255"
|
|
||||||
name="carModel"
|
|
||||||
required=""
|
required=""
|
||||||
type="text"
|
>
|
||||||
value=""
|
<option
|
||||||
/>
|
value="Ocean"
|
||||||
|
>
|
||||||
|
Ocean
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 10l5 5 5-5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
<fieldset
|
<fieldset
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||||
|
style="padding-left: 8px;"
|
||||||
>
|
>
|
||||||
<legend
|
<legend
|
||||||
class="PrivateNotchedOutline-legendLabelled-0"
|
class="PrivateNotchedOutline-legend-0"
|
||||||
|
style="width: 0.01px;"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
Model
|
|
||||||
*
|
|
||||||
</span>
|
</span>
|
||||||
</legend>
|
</legend>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
|
||||||
data-shrink="false"
|
data-shrink="true"
|
||||||
for="carTrim"
|
|
||||||
id="carTrim-label"
|
|
||||||
>
|
>
|
||||||
Trim
|
Trim
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
|
||||||
>
|
|
||||||
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
|
||||||
|
required=""
|
||||||
>
|
>
|
||||||
<input
|
<select
|
||||||
aria-invalid="false"
|
aria-invalid="false"
|
||||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
|
||||||
id="carTrim"
|
|
||||||
maxlength="255"
|
|
||||||
name="carTrim"
|
|
||||||
required=""
|
required=""
|
||||||
type="text"
|
>
|
||||||
value=""
|
<option
|
||||||
/>
|
value="Base"
|
||||||
|
>
|
||||||
|
Base
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="Sport"
|
||||||
|
>
|
||||||
|
Sport
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="Ocean One"
|
||||||
|
>
|
||||||
|
Ocean One
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="Ultra"
|
||||||
|
>
|
||||||
|
Ultra
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="Extreme"
|
||||||
|
>
|
||||||
|
Extreme
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 10l5 5 5-5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
<fieldset
|
<fieldset
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||||
|
style="padding-left: 8px;"
|
||||||
>
|
>
|
||||||
<legend
|
<legend
|
||||||
class="PrivateNotchedOutline-legendLabelled-0"
|
class="PrivateNotchedOutline-legend-0"
|
||||||
|
style="width: 0.01px;"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
Trim
|
|
||||||
*
|
|
||||||
</span>
|
</span>
|
||||||
</legend>
|
</legend>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
|
||||||
data-shrink="false"
|
data-shrink="true"
|
||||||
for="carYear"
|
|
||||||
id="carYear-label"
|
|
||||||
>
|
>
|
||||||
Year
|
Year
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
|
||||||
>
|
|
||||||
|
|
||||||
*
|
|
||||||
</span>
|
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
|
||||||
|
required=""
|
||||||
>
|
>
|
||||||
<input
|
<select
|
||||||
aria-invalid="false"
|
aria-invalid="false"
|
||||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
|
||||||
id="carYear"
|
|
||||||
maxlength="255"
|
|
||||||
name="carYear"
|
|
||||||
required=""
|
required=""
|
||||||
type="number"
|
>
|
||||||
value=""
|
<option
|
||||||
/>
|
value="2023"
|
||||||
|
>
|
||||||
|
2023
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="2024"
|
||||||
|
>
|
||||||
|
2024
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 10l5 5 5-5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
<fieldset
|
<fieldset
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||||
|
style="padding-left: 8px;"
|
||||||
>
|
>
|
||||||
<legend
|
<legend
|
||||||
class="PrivateNotchedOutline-legendLabelled-0"
|
class="PrivateNotchedOutline-legend-0"
|
||||||
|
style="width: 0.01px;"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
Year
|
|
||||||
*
|
|
||||||
</span>
|
</span>
|
||||||
</legend>
|
</legend>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
@@ -214,13 +251,11 @@ exports[`FlashpackAdd Render 1`] = `
|
|||||||
class="input_container"
|
class="input_container"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal"
|
class="MuiFormControl-root MuiFormControl-marginNormal"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
||||||
data-shrink="false"
|
data-shrink="false"
|
||||||
for="ecuName"
|
|
||||||
id="ecuName-label"
|
|
||||||
>
|
>
|
||||||
ECU Name
|
ECU Name
|
||||||
<span
|
<span
|
||||||
@@ -234,26 +269,495 @@ exports[`FlashpackAdd Render 1`] = `
|
|||||||
<div
|
<div
|
||||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
|
||||||
>
|
>
|
||||||
<input
|
<select
|
||||||
aria-invalid="false"
|
aria-invalid="false"
|
||||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
|
||||||
id="ecuName"
|
id="ecuName"
|
||||||
maxlength="255"
|
|
||||||
name="ecuName"
|
name="ecuName"
|
||||||
required=""
|
>
|
||||||
type="text"
|
<option />
|
||||||
value=""
|
<option
|
||||||
/>
|
value="AGS"
|
||||||
|
>
|
||||||
|
AGS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="ADB"
|
||||||
|
>
|
||||||
|
ADB
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="ADAS"
|
||||||
|
>
|
||||||
|
ADAS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="ACU"
|
||||||
|
>
|
||||||
|
ACU
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="ACP"
|
||||||
|
>
|
||||||
|
ACP
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="AMP"
|
||||||
|
>
|
||||||
|
AMP
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="AP_FL"
|
||||||
|
>
|
||||||
|
AP_FL
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="AP_FR"
|
||||||
|
>
|
||||||
|
AP_FR
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="AP_RL"
|
||||||
|
>
|
||||||
|
AP_RL
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="AP_RR"
|
||||||
|
>
|
||||||
|
AP_RR
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="AL"
|
||||||
|
>
|
||||||
|
AL
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="BCS"
|
||||||
|
>
|
||||||
|
BCS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="BMS"
|
||||||
|
>
|
||||||
|
BMS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="BMU"
|
||||||
|
>
|
||||||
|
BMU
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="BCM"
|
||||||
|
>
|
||||||
|
BCM
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="CDS"
|
||||||
|
>
|
||||||
|
CDS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="CCU"
|
||||||
|
>
|
||||||
|
CCU
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="CIM"
|
||||||
|
>
|
||||||
|
CIM
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="CVM"
|
||||||
|
>
|
||||||
|
CVM
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="CFM"
|
||||||
|
>
|
||||||
|
CFM
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="CMRR_FL"
|
||||||
|
>
|
||||||
|
CMRR_FL
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="CMRR_FR"
|
||||||
|
>
|
||||||
|
CMRR_FR
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="CMRR_RL"
|
||||||
|
>
|
||||||
|
CMRR_RL
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="CMRR_RR"
|
||||||
|
>
|
||||||
|
CMRR_RR
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="DVRC"
|
||||||
|
>
|
||||||
|
DVRC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="DC-CHM"
|
||||||
|
>
|
||||||
|
DC-CHM
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="DMC"
|
||||||
|
>
|
||||||
|
DMC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="DSMC"
|
||||||
|
>
|
||||||
|
DSMC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="DWSG"
|
||||||
|
>
|
||||||
|
DWSG
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="EKS"
|
||||||
|
>
|
||||||
|
EKS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="EPS"
|
||||||
|
>
|
||||||
|
EPS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="EAS"
|
||||||
|
>
|
||||||
|
EAS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="ECC"
|
||||||
|
>
|
||||||
|
ECC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="EWP_B"
|
||||||
|
>
|
||||||
|
EWP_B
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="EWP_FD"
|
||||||
|
>
|
||||||
|
EWP_FD
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="EWP_H"
|
||||||
|
>
|
||||||
|
EWP_H
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="EWP_RD"
|
||||||
|
>
|
||||||
|
EWP_RD
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="EWM"
|
||||||
|
>
|
||||||
|
EWM
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="EXV_B"
|
||||||
|
>
|
||||||
|
EXV_B
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="EXV_HP"
|
||||||
|
>
|
||||||
|
EXV_HP
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="ESP"
|
||||||
|
>
|
||||||
|
ESP
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="FDHA_FL"
|
||||||
|
>
|
||||||
|
FDHA_FL
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="FDHA_FR"
|
||||||
|
>
|
||||||
|
FDHA_FR
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="FDHA_RL"
|
||||||
|
>
|
||||||
|
FDHA_RL
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="FDHA_RR"
|
||||||
|
>
|
||||||
|
FDHA_RR
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="Lumber"
|
||||||
|
>
|
||||||
|
Lumber
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="FBM_L"
|
||||||
|
>
|
||||||
|
FBM_L
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="FBM_R"
|
||||||
|
>
|
||||||
|
FBM_R
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="FVC"
|
||||||
|
>
|
||||||
|
FVC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="GW"
|
||||||
|
>
|
||||||
|
GW
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="HUD"
|
||||||
|
>
|
||||||
|
HUD
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="IDS"
|
||||||
|
>
|
||||||
|
IDS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="ICC"
|
||||||
|
>
|
||||||
|
ICC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="IBS"
|
||||||
|
>
|
||||||
|
IBS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="iBooster"
|
||||||
|
>
|
||||||
|
iBooster
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="KS"
|
||||||
|
>
|
||||||
|
KS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="LSC"
|
||||||
|
>
|
||||||
|
LSC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="MRR"
|
||||||
|
>
|
||||||
|
MRR
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="MCU_F"
|
||||||
|
>
|
||||||
|
MCU_F
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="MCU_R"
|
||||||
|
>
|
||||||
|
MCU_R
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="MDV"
|
||||||
|
>
|
||||||
|
MDV
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="MFS"
|
||||||
|
>
|
||||||
|
MFS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="MIS"
|
||||||
|
>
|
||||||
|
MIS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="MPC"
|
||||||
|
>
|
||||||
|
MPC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="OMC"
|
||||||
|
>
|
||||||
|
OMC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="OHC"
|
||||||
|
>
|
||||||
|
OHC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="PAS"
|
||||||
|
>
|
||||||
|
PAS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="PCU"
|
||||||
|
>
|
||||||
|
PCU
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="PMS"
|
||||||
|
>
|
||||||
|
PMS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="PSM"
|
||||||
|
>
|
||||||
|
PSM
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="PEPS"
|
||||||
|
>
|
||||||
|
PEPS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="PKC"
|
||||||
|
>
|
||||||
|
PKC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="PKC_ANT_L"
|
||||||
|
>
|
||||||
|
PKC_ANT_L
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="PKC_ANT_R"
|
||||||
|
>
|
||||||
|
PKC_ANT_R
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="PWC"
|
||||||
|
>
|
||||||
|
PWC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="PASC"
|
||||||
|
>
|
||||||
|
PASC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="PDU"
|
||||||
|
>
|
||||||
|
PDU
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="PLGM"
|
||||||
|
>
|
||||||
|
PLGM
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="RLS"
|
||||||
|
>
|
||||||
|
RLS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="RAC"
|
||||||
|
>
|
||||||
|
RAC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="RVC"
|
||||||
|
>
|
||||||
|
RVC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="RSC"
|
||||||
|
>
|
||||||
|
RSC
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="RCM"
|
||||||
|
>
|
||||||
|
RCM
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="RSM"
|
||||||
|
>
|
||||||
|
RSM
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="TBOX"
|
||||||
|
>
|
||||||
|
TBOX
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="TPMS"
|
||||||
|
>
|
||||||
|
TPMS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="TDS"
|
||||||
|
>
|
||||||
|
TDS
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="USB Box"
|
||||||
|
>
|
||||||
|
USB Box
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="VCU"
|
||||||
|
>
|
||||||
|
VCU
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="VSP"
|
||||||
|
>
|
||||||
|
VSP
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="WTC_B"
|
||||||
|
>
|
||||||
|
WTC_B
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="WTC_H"
|
||||||
|
>
|
||||||
|
WTC_H
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 10l5 5 5-5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
<fieldset
|
<fieldset
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||||
|
style="padding-left: 8px;"
|
||||||
>
|
>
|
||||||
<legend
|
<legend
|
||||||
class="PrivateNotchedOutline-legendLabelled-0"
|
class="PrivateNotchedOutline-legend-0"
|
||||||
|
style="width: 0.01px;"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
ECU Name
|
|
||||||
*
|
|
||||||
</span>
|
</span>
|
||||||
</legend>
|
</legend>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import {
|
|||||||
IconButton,
|
IconButton,
|
||||||
TextField
|
TextField
|
||||||
} from "@material-ui/core";
|
} from "@material-ui/core";
|
||||||
|
import ECUDropDown from "../../Controls/ECUDropDown";
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import AddCircleIcon from "@material-ui/icons/AddCircle";
|
import AddCircleIcon from "@material-ui/icons/AddCircle";
|
||||||
import DeleteIcon from "@material-ui/icons/Delete";
|
import DeleteIcon from "@material-ui/icons/Delete";
|
||||||
@@ -11,7 +12,10 @@ import { logger } from "../../../services/monitoring";
|
|||||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||||
import { useVehicleContext, VehicleProvider } from "../../Contexts/VehicleContext";
|
import { useVehicleContext, VehicleProvider } from "../../Contexts/VehicleContext";
|
||||||
import { useUserContext } from "../../Contexts/UserContext";
|
import { useUserContext } from "../../Contexts/UserContext";
|
||||||
|
import { useLocalStorage } from "../../useLocalStorage";
|
||||||
import useStyles from "../../useStyles";
|
import useStyles from "../../useStyles";
|
||||||
|
import { DropDownList } from "../../Controls/DropDownList";
|
||||||
|
import modelsTrimsYears from '.././modelsTrimsYears.json';
|
||||||
|
|
||||||
const MainForm = () => {
|
const MainForm = () => {
|
||||||
const {
|
const {
|
||||||
@@ -22,9 +26,11 @@ const MainForm = () => {
|
|||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const [redirect, setRedirect] = useState(null);
|
const [redirect, setRedirect] = useState(null);
|
||||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||||
const [carModel, setCarModel] = useState("");
|
const [carModel, setCarModel] = useLocalStorage("FLASHPACK_ADD_MODEL", "Ocean");
|
||||||
const [carTrim, setCarTrim] = useState("");
|
const [carTrim, setCarTrim] = useLocalStorage("FLASHPACK_ADD_TRIM", "Base");
|
||||||
const [carYear, setCarYear] = useState();
|
const [carYear, setCarYear] = useLocalStorage("FLASHPACK_ADD_YEAR", 2024);
|
||||||
|
const [trims, setTrims] = useLocalStorage("FLASHPACK_ADD_TRIMS", modelsTrimsYears.oceanTrims);
|
||||||
|
const [years, setYears] = useLocalStorage("FLASHPACK_ADD_YEARS", modelsTrimsYears.oceanYears);
|
||||||
const [flashpack, setFlashpack] = useState();
|
const [flashpack, setFlashpack] = useState();
|
||||||
const [mappingInputs, setMappingInputs] = useState([{ ecuName: "", ecuVersion: "" }]);
|
const [mappingInputs, setMappingInputs] = useState([{ ecuName: "", ecuVersion: "" }]);
|
||||||
const {
|
const {
|
||||||
@@ -51,15 +57,30 @@ const MainForm = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const onCarModelChange = (event) => {
|
const onCarModelChange = (event) => {
|
||||||
setCarModel(event.target.value);
|
let newModel = event.target.value
|
||||||
|
|
||||||
|
setCarModel(newModel)
|
||||||
|
|
||||||
|
switch (newModel) {
|
||||||
|
case "Ocean":
|
||||||
|
setTrims(modelsTrimsYears.oceanTrims);
|
||||||
|
setYears(modelsTrimsYears.oceanYears);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onCarTrimChange = (event) => {
|
const onCarTrimChange = (event) => {
|
||||||
setCarTrim(event.target.value);
|
let newTrim = event.target.value
|
||||||
|
|
||||||
|
setCarTrim(newTrim)
|
||||||
}
|
}
|
||||||
|
|
||||||
const onCarYearChange = (event) => {
|
const onCarYearChange = (event) => {
|
||||||
setCarYear(event.target.value);
|
let newYear = event.target.value
|
||||||
|
|
||||||
|
setCarYear(newYear)
|
||||||
}
|
}
|
||||||
|
|
||||||
const onFlashpackChange = (event) => {
|
const onFlashpackChange = (event) => {
|
||||||
@@ -118,51 +139,9 @@ const MainForm = () => {
|
|||||||
<div className={classes.paper}>
|
<div className={classes.paper}>
|
||||||
<form className={classes.form} noValidate action="{onSubmit}">
|
<form className={classes.form} noValidate action="{onSubmit}">
|
||||||
<div>
|
<div>
|
||||||
<TextField
|
<DropDownList fullWidth required label="Model" data={modelsTrimsYears.models} classes={classes} onChange={onCarModelChange} value={carModel} />
|
||||||
id="carModel"
|
<DropDownList fullWidth required label="Trim" data={trims} disabled={!carModel || !trims} classes={classes} onChange={onCarTrimChange} value={carTrim} />
|
||||||
name="carModel"
|
<DropDownList fullWidth required label="Year" data={years} disabled={!carModel || !years} classes={classes} onChange={onCarYearChange} value={carYear} />
|
||||||
label="Model"
|
|
||||||
variant="outlined"
|
|
||||||
margin="normal"
|
|
||||||
inputProps={{
|
|
||||||
maxLength: "255",
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
fullWidth
|
|
||||||
value={carModel}
|
|
||||||
onChange={onCarModelChange}
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
id="carTrim"
|
|
||||||
name="carTrim"
|
|
||||||
label="Trim"
|
|
||||||
variant="outlined"
|
|
||||||
margin="normal"
|
|
||||||
inputProps={{
|
|
||||||
maxLength: "255",
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
fullWidth
|
|
||||||
value={carTrim}
|
|
||||||
onChange={onCarTrimChange}
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
id="carYear"
|
|
||||||
name="carYear"
|
|
||||||
label="Year"
|
|
||||||
variant="outlined"
|
|
||||||
margin="normal"
|
|
||||||
inputProps={{
|
|
||||||
maxLength: "255",
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
fullWidth
|
|
||||||
value={carYear}
|
|
||||||
onChange={onCarYearChange}
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
<TextField
|
<TextField
|
||||||
id="flashpack"
|
id="flashpack"
|
||||||
name="flashpack"
|
name="flashpack"
|
||||||
@@ -181,19 +160,13 @@ const MainForm = () => {
|
|||||||
<div className="container">
|
<div className="container">
|
||||||
{mappingInputs.map((item, index) => (
|
{mappingInputs.map((item, index) => (
|
||||||
<div className="input_container" key={index}>
|
<div className="input_container" key={index}>
|
||||||
<TextField
|
<ECUDropDown
|
||||||
id="ecuName"
|
id="ecuName"
|
||||||
name="ecuName"
|
name="ecuName"
|
||||||
label="ECU Name"
|
label="ECU Name"
|
||||||
variant="outlined"
|
|
||||||
margin="normal"
|
|
||||||
inputProps={{
|
|
||||||
maxLength: "255",
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
value={item.ecuName}
|
value={item.ecuName}
|
||||||
onChange={(event) => handleChange(event, index)}
|
changeHandler={(event) => handleChange(event, index)}
|
||||||
type="text"
|
required
|
||||||
/>
|
/>
|
||||||
<TextField
|
<TextField
|
||||||
id="ecuVersion"
|
id="ecuVersion"
|
||||||
|
|||||||
@@ -15,6 +15,175 @@ exports[`Flashpack Render 1`] = `
|
|||||||
data-testid="mocked-vehicleprovider"
|
data-testid="mocked-vehicleprovider"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
|
<div
|
||||||
|
class="MuiFormControl-root MuiFormControl-marginNormal"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
|
||||||
|
data-shrink="true"
|
||||||
|
>
|
||||||
|
Model
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
value="Ocean"
|
||||||
|
>
|
||||||
|
Ocean
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 10l5 5 5-5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||||
|
style="padding-left: 8px;"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legend-0"
|
||||||
|
style="width: 0.01px;"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiFormControl-root MuiFormControl-marginNormal"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
|
||||||
|
data-shrink="true"
|
||||||
|
>
|
||||||
|
Trim
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
value="Base"
|
||||||
|
>
|
||||||
|
Base
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="Sport"
|
||||||
|
>
|
||||||
|
Sport
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="Ocean One"
|
||||||
|
>
|
||||||
|
Ocean One
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="Ultra"
|
||||||
|
>
|
||||||
|
Ultra
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="Extreme"
|
||||||
|
>
|
||||||
|
Extreme
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 10l5 5 5-5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||||
|
style="padding-left: 8px;"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legend-0"
|
||||||
|
style="width: 0.01px;"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiFormControl-root MuiFormControl-marginNormal"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
|
||||||
|
data-shrink="true"
|
||||||
|
>
|
||||||
|
Year
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
value="2023"
|
||||||
|
>
|
||||||
|
2023
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
value="2024"
|
||||||
|
>
|
||||||
|
2024
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 10l5 5 5-5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||||
|
style="padding-left: 8px;"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legend-0"
|
||||||
|
style="width: 0.01px;"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
|
class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -21,7 +21,9 @@ import TableHeaderSortable from "../Table/HeaderSortable";
|
|||||||
import { useLocalStorage } from "../useLocalStorage";
|
import { useLocalStorage } from "../useLocalStorage";
|
||||||
import DeleteConfirmation from "../DeleteConfirmation";
|
import DeleteConfirmation from "../DeleteConfirmation";
|
||||||
import { RoleWrap } from "../Controls/RoleWrap";
|
import { RoleWrap } from "../Controls/RoleWrap";
|
||||||
|
import { DropDownList } from "../Controls/DropDownList";
|
||||||
import useStyles from "../useStyles";
|
import useStyles from "../useStyles";
|
||||||
|
import modelsTrimsYears from './modelsTrimsYears.json';
|
||||||
|
|
||||||
const tableColumns = [
|
const tableColumns = [
|
||||||
{
|
{
|
||||||
@@ -55,6 +57,11 @@ const MainForm = () => {
|
|||||||
const [pageIndex, setPageIndex] = useState(0);
|
const [pageIndex, setPageIndex] = useState(0);
|
||||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||||
const [rowToDelete, setRowToDelete] = useState({});
|
const [rowToDelete, setRowToDelete] = useState({});
|
||||||
|
const [model, setModel] = useLocalStorage("FLASHPACKS_MODEL", "Ocean");
|
||||||
|
const [trim, setTrim] = useLocalStorage("FLASHPACKS_TRIM", "Base");
|
||||||
|
const [year, setYear] = useLocalStorage("FLASHPACKS_YEAR", 2024);
|
||||||
|
const [trims, setTrims] = useLocalStorage("FLASHPACKS_TRIMS", modelsTrimsYears.oceanTrims);
|
||||||
|
const [years, setYears] = useLocalStorage("FLASHPACKS_YEARS", modelsTrimsYears.oceanYears);
|
||||||
const {
|
const {
|
||||||
getAllFlashpacks,
|
getAllFlashpacks,
|
||||||
flashpacks,
|
flashpacks,
|
||||||
@@ -84,14 +91,17 @@ const MainForm = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadFlashpacks();
|
loadFlashpacks(model, trim, year);
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [token, pageIndex, pageSize]);
|
}, [token, pageIndex, pageSize]);
|
||||||
|
|
||||||
const loadFlashpacks = async () => {
|
const loadFlashpacks = async (model, trim, year) => {
|
||||||
try {
|
try {
|
||||||
if (!token) return;
|
if (!token) return;
|
||||||
await getAllFlashpacks(
|
await getAllFlashpacks(
|
||||||
|
model,
|
||||||
|
trim,
|
||||||
|
year,
|
||||||
{
|
{
|
||||||
limit: pageSize,
|
limit: pageSize,
|
||||||
offset: pageSize * pageIndex,
|
offset: pageSize * pageIndex,
|
||||||
@@ -104,6 +114,45 @@ const MainForm = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onModelChange = (event) => {
|
||||||
|
let newModel = event.target.value
|
||||||
|
|
||||||
|
setModel(newModel)
|
||||||
|
|
||||||
|
switch (newModel) {
|
||||||
|
case "Ocean":
|
||||||
|
setTrims(modelsTrimsYears.oceanTrims);
|
||||||
|
setYears(modelsTrimsYears.oceanYears);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (trim && year) {
|
||||||
|
loadFlashpacks(newModel, trim, year)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onTrimChange = (event) => {
|
||||||
|
let newTrim = event.target.value
|
||||||
|
|
||||||
|
setTrim(newTrim)
|
||||||
|
|
||||||
|
if (model && year) {
|
||||||
|
loadFlashpacks(model, newTrim, year)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onYearChange = (event) => {
|
||||||
|
let newYear = event.target.value
|
||||||
|
|
||||||
|
setYear(newYear)
|
||||||
|
|
||||||
|
if (model && trim) {
|
||||||
|
loadFlashpacks(model, trim, newYear)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const handleChangePageIndex = (event, newIndex) => {
|
const handleChangePageIndex = (event, newIndex) => {
|
||||||
setPageIndex(newIndex);
|
setPageIndex(newIndex);
|
||||||
};
|
};
|
||||||
@@ -125,7 +174,7 @@ const MainForm = () => {
|
|||||||
if (!result || result.error) return;
|
if (!result || result.error) return;
|
||||||
|
|
||||||
setMessage(`Deleted ${rowToDelete.car_year} ${rowToDelete.car_model} ${rowToDelete.car_trim} ${rowToDelete.flashpack}`);
|
setMessage(`Deleted ${rowToDelete.car_year} ${rowToDelete.car_model} ${rowToDelete.car_trim} ${rowToDelete.flashpack}`);
|
||||||
loadFlashpacks();
|
loadFlashpacks(model, trim, year);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setMessage(e.message);
|
setMessage(e.message);
|
||||||
logger.warn(e.stack);
|
logger.warn(e.stack);
|
||||||
@@ -135,6 +184,9 @@ const MainForm = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<DropDownList label="Model" data={modelsTrimsYears.models} classes={classes} onChange={onModelChange} value={model} />
|
||||||
|
<DropDownList label="Trim" data={trims} disabled={!model || !trims} classes={classes} onChange={onTrimChange} value={trim} />
|
||||||
|
<DropDownList label="Year" data={years} disabled={!model || !years} classes={classes} onChange={onYearChange} value={year} />
|
||||||
<Grid container className={classes.root} spacing={2}>
|
<Grid container className={classes.root} spacing={2}>
|
||||||
<Grid item md={4} className={clsx(classes.textJustifyAlign, classes.actionsBar)}>
|
<Grid item md={4} className={clsx(classes.textJustifyAlign, classes.actionsBar)}>
|
||||||
<Link to={`/tools/flashpack/add`} className={classes.labelInline}>
|
<Link to={`/tools/flashpack/add`} className={classes.labelInline}>
|
||||||
|
|||||||
40
src/components/Flashpack/modelsTrimsYears.json
Normal file
40
src/components/Flashpack/modelsTrimsYears.json
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
{
|
||||||
|
"models": [
|
||||||
|
{
|
||||||
|
"value": "Ocean",
|
||||||
|
"label": "Ocean"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"oceanTrims": [
|
||||||
|
{
|
||||||
|
"value": "Base",
|
||||||
|
"label": "Base"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "Sport",
|
||||||
|
"label": "Sport"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "Ocean One",
|
||||||
|
"label": "Ocean One"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "Ultra",
|
||||||
|
"label": "Ultra"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "Extreme",
|
||||||
|
"label": "Extreme"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"oceanYears": [
|
||||||
|
{
|
||||||
|
"value": 2023,
|
||||||
|
"label": "2023"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": 2024,
|
||||||
|
"label": "2024"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -261,8 +261,8 @@ const vehiclesAPI = {
|
|||||||
.catch(errorHandler)
|
.catch(errorHandler)
|
||||||
},
|
},
|
||||||
|
|
||||||
getAllFlashpacks: async (options, token) => {
|
getAllFlashpacks: async (model, trim, year, options, token) => {
|
||||||
return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_versions`, options), {
|
return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_versions/${model}/${trim}/${year}`, options), {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: Object.assign(
|
headers: Object.assign(
|
||||||
{ "Content-Type": "application/json" },
|
{ "Content-Type": "application/json" },
|
||||||
|
|||||||
Reference in New Issue
Block a user