More picklists
This commit is contained in:
padamsen_fisker
@@ -24,138 +24,175 @@ exports[`FlashpackAdd Render 1`] = `
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
||||
data-shrink="false"
|
||||
for="carModel"
|
||||
id="carModel-label"
|
||||
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
|
||||
data-shrink="true"
|
||||
>
|
||||
Model
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||
>
|
||||
|
||||
*
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
|
||||
required=""
|
||||
>
|
||||
<input
|
||||
<select
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="carModel"
|
||||
maxlength="255"
|
||||
name="carModel"
|
||||
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
|
||||
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
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
style="padding-left: 8px;"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
class="PrivateNotchedOutline-legend-0"
|
||||
style="width: 0.01px;"
|
||||
>
|
||||
<span>
|
||||
Model
|
||||
*
|
||||
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
||||
data-shrink="false"
|
||||
for="carTrim"
|
||||
id="carTrim-label"
|
||||
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
|
||||
data-shrink="true"
|
||||
>
|
||||
Trim
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||
>
|
||||
|
||||
*
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
|
||||
required=""
|
||||
>
|
||||
<input
|
||||
<select
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="carTrim"
|
||||
maxlength="255"
|
||||
name="carTrim"
|
||||
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
|
||||
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
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
style="padding-left: 8px;"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
class="PrivateNotchedOutline-legend-0"
|
||||
style="width: 0.01px;"
|
||||
>
|
||||
<span>
|
||||
Trim
|
||||
*
|
||||
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
||||
data-shrink="false"
|
||||
for="carYear"
|
||||
id="carYear-label"
|
||||
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
|
||||
data-shrink="true"
|
||||
>
|
||||
Year
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||
>
|
||||
|
||||
*
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
|
||||
required=""
|
||||
>
|
||||
<input
|
||||
<select
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="carYear"
|
||||
maxlength="255"
|
||||
name="carYear"
|
||||
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
|
||||
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
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
style="padding-left: 8px;"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
class="PrivateNotchedOutline-legend-0"
|
||||
style="width: 0.01px;"
|
||||
>
|
||||
<span>
|
||||
Year
|
||||
*
|
||||
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
|
||||
@@ -12,7 +12,10 @@ import { logger } from "../../../services/monitoring";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { useVehicleContext, VehicleProvider } from "../../Contexts/VehicleContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useLocalStorage } from "../../useLocalStorage";
|
||||
import useStyles from "../../useStyles";
|
||||
import { DropDownList } from "../../Controls/DropDownList";
|
||||
import modelsTrimsYears from '.././modelsTrimsYears.json';
|
||||
|
||||
const MainForm = () => {
|
||||
const {
|
||||
@@ -23,9 +26,11 @@ const MainForm = () => {
|
||||
const classes = useStyles();
|
||||
const [redirect, setRedirect] = useState(null);
|
||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||
const [carModel, setCarModel] = useState("");
|
||||
const [carTrim, setCarTrim] = useState("");
|
||||
const [carYear, setCarYear] = useState();
|
||||
const [carModel, setCarModel] = useLocalStorage("FLASHPACK_ADD_MODEL", "Ocean");
|
||||
const [carTrim, setCarTrim] = useLocalStorage("FLASHPACK_ADD_TRIM", "Base");
|
||||
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 [mappingInputs, setMappingInputs] = useState([{ ecuName: "", ecuVersion: "" }]);
|
||||
const {
|
||||
@@ -52,15 +57,30 @@ const MainForm = () => {
|
||||
}, []);
|
||||
|
||||
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) => {
|
||||
setCarTrim(event.target.value);
|
||||
let newTrim = event.target.value
|
||||
|
||||
setCarTrim(newTrim)
|
||||
}
|
||||
|
||||
const onCarYearChange = (event) => {
|
||||
setCarYear(event.target.value);
|
||||
let newYear = event.target.value
|
||||
|
||||
setCarYear(newYear)
|
||||
}
|
||||
|
||||
const onFlashpackChange = (event) => {
|
||||
@@ -119,51 +139,9 @@ const MainForm = () => {
|
||||
<div className={classes.paper}>
|
||||
<form className={classes.form} noValidate action="{onSubmit}">
|
||||
<div>
|
||||
<TextField
|
||||
id="carModel"
|
||||
name="carModel"
|
||||
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"
|
||||
/>
|
||||
<DropDownList fullWidth required label="Model" data={modelsTrimsYears.models} classes={classes} onChange={onCarModelChange} value={carModel} />
|
||||
<DropDownList fullWidth required label="Trim" data={trims} disabled={!carModel || !trims} classes={classes} onChange={onCarTrimChange} value={carTrim} />
|
||||
<DropDownList fullWidth required label="Year" data={years} disabled={!carModel || !years} classes={classes} onChange={onCarYearChange} value={carYear} />
|
||||
<TextField
|
||||
id="flashpack"
|
||||
name="flashpack"
|
||||
|
||||
Reference in New Issue
Block a user