CEC-3320 - Add other car fields to edit form (#248)
* CEC-3320 - Add other car fields to edit form * info_source readonly
This commit is contained in:
Paul Adamsen
@@ -70,6 +70,43 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined"
|
||||
data-shrink="true"
|
||||
for="iccid"
|
||||
id="iccid-label"
|
||||
>
|
||||
ICCID
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="iccid"
|
||||
maxlength="50"
|
||||
name="iccid"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
ICCID
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
@@ -210,6 +247,193 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined"
|
||||
data-shrink="true"
|
||||
for="country"
|
||||
id="country-label"
|
||||
>
|
||||
Country
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="country"
|
||||
maxlength="256"
|
||||
name="country"
|
||||
shrink="1"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Country
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined"
|
||||
data-shrink="true"
|
||||
for="powertrain"
|
||||
id="powertrain-label"
|
||||
>
|
||||
Powertrain Type
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="powertrain"
|
||||
maxlength="256"
|
||||
name="powertrain"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Powertrain Type
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined"
|
||||
data-shrink="true"
|
||||
for="restraint"
|
||||
id="restraint-label"
|
||||
>
|
||||
Restraint Type
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="restraint"
|
||||
maxlength="256"
|
||||
name="restraint"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Restraint Type
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined"
|
||||
data-shrink="true"
|
||||
for="body_type"
|
||||
id="body_type-label"
|
||||
>
|
||||
Body Type
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="body_type"
|
||||
maxlength="256"
|
||||
name="body_type"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Body Type
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined Mui-disabled Mui-disabled"
|
||||
data-shrink="true"
|
||||
for="info_source"
|
||||
id="info_source-label"
|
||||
>
|
||||
Info Source
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
|
||||
disabled=""
|
||||
id="info_source"
|
||||
name="info_source"
|
||||
readonly=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Info Source
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<label
|
||||
class="MuiFormLabel-root"
|
||||
id="demo-row-radio-buttons-group-label"
|
||||
|
||||
@@ -32,9 +32,15 @@ const MainForm = () => {
|
||||
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);
|
||||
@@ -71,9 +77,15 @@ const MainForm = () => {
|
||||
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);
|
||||
@@ -110,9 +122,14 @@ const MainForm = () => {
|
||||
|
||||
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,
|
||||
@@ -155,6 +172,22 @@ const MainForm = () => {
|
||||
required
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="iccid"
|
||||
name="iccid"
|
||||
label="ICCID"
|
||||
InputLabelProps={{
|
||||
shrink: true
|
||||
}}
|
||||
defaultValue=""
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "50",
|
||||
}}
|
||||
fullWidth
|
||||
inputRef={iccidEl}
|
||||
/>
|
||||
<TextField
|
||||
id="model"
|
||||
name="model"
|
||||
@@ -200,6 +233,88 @@ const MainForm = () => {
|
||||
fullWidth
|
||||
inputRef={trimEl}
|
||||
/>
|
||||
<TextField
|
||||
id="country"
|
||||
name="country"
|
||||
label="Country"
|
||||
InputLabelProps={{
|
||||
shrink: true
|
||||
}}
|
||||
defaultValue=""
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
shrink: +true,
|
||||
maxLength: "256",
|
||||
}}
|
||||
fullWidth
|
||||
inputRef={countryEl}
|
||||
/>
|
||||
<TextField
|
||||
id="powertrain"
|
||||
name="powertrain"
|
||||
label="Powertrain Type"
|
||||
InputLabelProps={{
|
||||
shrink: true
|
||||
}}
|
||||
defaultValue=""
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "256",
|
||||
}}
|
||||
fullWidth
|
||||
inputRef={powertrainEl}
|
||||
/>
|
||||
<TextField
|
||||
id="restraint"
|
||||
name="restraint"
|
||||
label="Restraint Type"
|
||||
InputLabelProps={{
|
||||
shrink: true
|
||||
}}
|
||||
defaultValue=""
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "256",
|
||||
}}
|
||||
fullWidth
|
||||
inputRef={restraintEl}
|
||||
/>
|
||||
<TextField
|
||||
id="body_type"
|
||||
name="body_type"
|
||||
label="Body Type"
|
||||
InputLabelProps={{
|
||||
shrink: true
|
||||
}}
|
||||
defaultValue=""
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "256",
|
||||
}}
|
||||
fullWidth
|
||||
inputRef={bodyTypeEl}
|
||||
/>
|
||||
<TextField
|
||||
id="info_source"
|
||||
name="info_source"
|
||||
label="Info Source"
|
||||
InputLabelProps={{
|
||||
shrink: true
|
||||
}}
|
||||
inputProps={{
|
||||
readOnly: true
|
||||
}}
|
||||
disabled
|
||||
defaultValue=""
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
fullWidth
|
||||
inputRef={infoSourceEl}
|
||||
/>
|
||||
<FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
|
||||
<RadioGroup
|
||||
row
|
||||
|
||||
Reference in New Issue
Block a user