CEC-5751 - Flashpack UI: Make a picklist for the ECU names
This commit is contained in:
padamsen_fisker
@@ -1,32 +1,52 @@
|
||||
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 changeHandler = (e) => {
|
||||
if (!props.changeHandler) return;
|
||||
props.changeHandler(e);
|
||||
};
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<FormControl
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
fullWidth={false}
|
||||
>
|
||||
<InputLabel
|
||||
className={classes.whiteBackground}
|
||||
required={props.required}
|
||||
disabled={props.disabled}
|
||||
>
|
||||
{props.label}
|
||||
</InputLabel>
|
||||
<Select
|
||||
id={props.id}
|
||||
name={props.name}
|
||||
variant={"outlined"}
|
||||
native
|
||||
variant="outlined"
|
||||
value={props.value}
|
||||
onChange={changeHandler}
|
||||
disabled={props.disabled}
|
||||
>
|
||||
{ECUs.map((item, index) => (
|
||||
<option key={index} value={item[0]}>
|
||||
{item[1]}
|
||||
{
|
||||
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;
|
||||
|
||||
const ECUs = [
|
||||
null,
|
||||
["AGS", "Active Grille Shutter"],
|
||||
["ADB", "Adaptive Driving Beam"],
|
||||
["ADAS", "Advanced Driver Assist System"],
|
||||
|
||||
@@ -214,13 +214,11 @@ exports[`FlashpackAdd Render 1`] = `
|
||||
class="input_container"
|
||||
>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal"
|
||||
class="MuiFormControl-root MuiFormControl-marginNormal"
|
||||
>
|
||||
<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"
|
||||
for="ecuName"
|
||||
id="ecuName-label"
|
||||
>
|
||||
ECU Name
|
||||
<span
|
||||
@@ -234,26 +232,495 @@ exports[`FlashpackAdd Render 1`] = `
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
<select
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="ecuName"
|
||||
maxlength="255"
|
||||
name="ecuName"
|
||||
required=""
|
||||
type="text"
|
||||
value=""
|
||||
>
|
||||
<option />
|
||||
<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
|
||||
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>
|
||||
ECU Name
|
||||
*
|
||||
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
|
||||
@@ -3,6 +3,7 @@ import {
|
||||
IconButton,
|
||||
TextField
|
||||
} from "@material-ui/core";
|
||||
import ECUDropDown from "../../Controls/ECUDropDown";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import AddCircleIcon from "@material-ui/icons/AddCircle";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
@@ -181,19 +182,13 @@ const MainForm = () => {
|
||||
<div className="container">
|
||||
{mappingInputs.map((item, index) => (
|
||||
<div className="input_container" key={index}>
|
||||
<TextField
|
||||
<ECUDropDown
|
||||
id="ecuName"
|
||||
name="ecuName"
|
||||
label="ECU Name"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
required
|
||||
value={item.ecuName}
|
||||
onChange={(event) => handleChange(event, index)}
|
||||
type="text"
|
||||
changeHandler={(event) => handleChange(event, index)}
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
id="ecuVersion"
|
||||
|
||||
Reference in New Issue
Block a user