CEC-1256/CEC-1330 data logger for vehicles/fleets and details tabs for vehicles/fleets (#136)
* forms for fleet can filters * unit tests for fleet filters * removing warnings * updating regex * added fleet details page * fleet pages * smoothed out bugs * fleets done * working update, delete vehicles * finished mocks, still need snapshots and context tests * contexts done * snapshot tests * updating code smells * smells
This commit is contained in:
Drew Taylor
File diff suppressed because it is too large
Load Diff
730
src/components/Cars/Add/__snapshots__/index.test.jsx.snap
Normal file
730
src/components/Cars/Add/__snapshots__/index.test.jsx.snap
Normal file
@@ -0,0 +1,730 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`VehicleAddForm Render 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-vehicleprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-statusprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-userprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-vehicleprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="makeStyles-paper-3"
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
action="{onSubmit}"
|
||||||
|
class="makeStyles-form-5"
|
||||||
|
novalidate=""
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiFormControl-root MuiTextField-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="vin"
|
||||||
|
id="vin-label"
|
||||||
|
>
|
||||||
|
VIN
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
|
>
|
||||||
|
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
id="vin"
|
||||||
|
maxlength="17"
|
||||||
|
name="vin"
|
||||||
|
required=""
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
VIN
|
||||||
|
*
|
||||||
|
</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 MuiFormLabel-filled Mui-required Mui-required"
|
||||||
|
data-shrink="true"
|
||||||
|
for="model"
|
||||||
|
id="model-label"
|
||||||
|
>
|
||||||
|
Model
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
|
>
|
||||||
|
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
id="model"
|
||||||
|
maxlength="255"
|
||||||
|
name="model"
|
||||||
|
required=""
|
||||||
|
type="text"
|
||||||
|
value="Ocean"
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Model
|
||||||
|
*
|
||||||
|
</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 MuiFormLabel-filled Mui-required Mui-required"
|
||||||
|
data-shrink="true"
|
||||||
|
for="year"
|
||||||
|
id="year-label"
|
||||||
|
>
|
||||||
|
Year
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
|
>
|
||||||
|
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
id="year"
|
||||||
|
maxlength="4"
|
||||||
|
minlength="4"
|
||||||
|
name="year"
|
||||||
|
required=""
|
||||||
|
type="number"
|
||||||
|
value="2022"
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Year
|
||||||
|
*
|
||||||
|
</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 MuiFormLabel-filled Mui-required Mui-required"
|
||||||
|
data-shrink="true"
|
||||||
|
for="trim"
|
||||||
|
id="trim-label"
|
||||||
|
>
|
||||||
|
Trim
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
|
>
|
||||||
|
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
id="trim"
|
||||||
|
maxlength="4"
|
||||||
|
minlength="4"
|
||||||
|
name="trim"
|
||||||
|
required=""
|
||||||
|
type="text"
|
||||||
|
value="Base"
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Trim
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root"
|
||||||
|
id="demo-row-radio-buttons-group-label"
|
||||||
|
>
|
||||||
|
Log Level
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
aria-labelledby="demo-row-radio-buttons-group-label"
|
||||||
|
class="MuiFormGroup-root MuiFormGroup-row"
|
||||||
|
margin="normal"
|
||||||
|
role="radiogroup"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="trace"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Trace
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="debug"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Debug
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="info"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Info
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="warn"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Warn
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="error"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Error
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="critical"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Critical
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root"
|
||||||
|
id="demo-row-radio-buttons-group-label"
|
||||||
|
>
|
||||||
|
CAN Bus
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiFormGroup-root"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
data-indeterminate="false"
|
||||||
|
type="checkbox"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
CAN Bus Enabled
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
|
||||||
|
data-shrink="true"
|
||||||
|
for="max_mem_buffer_size"
|
||||||
|
id="max_mem_buffer_size-label"
|
||||||
|
>
|
||||||
|
Max Memory Buffer Size (0 uses default size)
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
|
>
|
||||||
|
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
id="max_mem_buffer_size"
|
||||||
|
maxlength="12"
|
||||||
|
name="max_mem_buffer_size"
|
||||||
|
required=""
|
||||||
|
type="number"
|
||||||
|
value="0"
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Max Memory Buffer Size (0 uses default size)
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
data-indeterminate="false"
|
||||||
|
type="checkbox"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Data Logger Enabled
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</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 MuiFormLabel-filled Mui-required Mui-required"
|
||||||
|
data-shrink="true"
|
||||||
|
for="max_disk_buffer_size"
|
||||||
|
id="max_disk_buffer_size-label"
|
||||||
|
>
|
||||||
|
Max Disk Buffer Size (0 uses default size)
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
|
>
|
||||||
|
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</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="max_disk_buffer_size"
|
||||||
|
maxlength="12"
|
||||||
|
name="max_disk_buffer_size"
|
||||||
|
required=""
|
||||||
|
type="number"
|
||||||
|
value="0"
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Max Disk Buffer Size (0 uses default size)
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
|
||||||
|
tabindex="0"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiButton-label"
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@@ -1,6 +1,15 @@
|
|||||||
import React, { useEffect, useRef, useState } from "react";
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
import { Redirect } from "react-router";
|
import { Redirect } from "react-router";
|
||||||
import { Button, TextField } from "@material-ui/core";
|
import {
|
||||||
|
Button,
|
||||||
|
Checkbox,
|
||||||
|
FormControlLabel,
|
||||||
|
FormGroup,
|
||||||
|
FormLabel,
|
||||||
|
Radio,
|
||||||
|
RadioGroup,
|
||||||
|
TextField
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
import useStyles from "../../useStyles";
|
import useStyles from "../../useStyles";
|
||||||
import {
|
import {
|
||||||
@@ -20,11 +29,17 @@ const MainForm = () => {
|
|||||||
},
|
},
|
||||||
} = useUserContext();
|
} = useUserContext();
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
|
const [redirect, setRedirect] = useState(null);
|
||||||
|
|
||||||
const vinEl = useRef(null);
|
const vinEl = useRef(null);
|
||||||
const modelEl = useRef(null);
|
const modelEl = useRef(null);
|
||||||
const yearEl = useRef(null);
|
const yearEl = useRef(null);
|
||||||
const trimEl = useRef(null);
|
const trimEl = useRef(null);
|
||||||
const [redirect, setRedirect] = useState(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(() => {
|
useEffect(() => {
|
||||||
setTitle("Add Vehicle");
|
setTitle("Add Vehicle");
|
||||||
@@ -40,6 +55,26 @@ const MainForm = () => {
|
|||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
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) => {
|
const onSubmit = async (event) => {
|
||||||
try {
|
try {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@@ -49,6 +84,13 @@ const MainForm = () => {
|
|||||||
model: modelEl.current.value,
|
model: modelEl.current.value,
|
||||||
year: parseInt(yearEl.current.value),
|
year: parseInt(yearEl.current.value),
|
||||||
trim: trimEl.current.value,
|
trim: trimEl.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 addVehicle(formData, token);
|
const result = await addVehicle(formData, token);
|
||||||
@@ -126,6 +168,70 @@ const MainForm = () => {
|
|||||||
fullWidth
|
fullWidth
|
||||||
inputRef={trimEl}
|
inputRef={trimEl}
|
||||||
/>
|
/>
|
||||||
|
<FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
|
||||||
|
<RadioGroup
|
||||||
|
row
|
||||||
|
aria-labelledby="demo-row-radio-buttons-group-label"
|
||||||
|
name="log-level-group"
|
||||||
|
value={selectedLogLevel}
|
||||||
|
onChange={onLogLevelChange}
|
||||||
|
margin="normal"
|
||||||
|
>
|
||||||
|
<FormControlLabel value="trace" control={<Radio />} label="Trace" />
|
||||||
|
<FormControlLabel value="debug" control={<Radio />} label="Debug" />
|
||||||
|
<FormControlLabel value="info" control={<Radio />} label="Info" />
|
||||||
|
<FormControlLabel value="warn" control={<Radio />} label="Warn" />
|
||||||
|
<FormControlLabel value="error" control={<Radio />} label="Error" />
|
||||||
|
<FormControlLabel value="critical" control={<Radio />} label="Critical" />
|
||||||
|
</RadioGroup>
|
||||||
|
<FormLabel id="demo-row-radio-buttons-group-label">CAN Bus</FormLabel>
|
||||||
|
<FormGroup>
|
||||||
|
<FormControlLabel control={
|
||||||
|
<Checkbox
|
||||||
|
checked={canbusEnabled}
|
||||||
|
onChange={onCANBusChange}
|
||||||
|
/>
|
||||||
|
} label="CAN Bus Enabled" />
|
||||||
|
<TextField
|
||||||
|
id="max_mem_buffer_size"
|
||||||
|
name="max_mem_buffer_size"
|
||||||
|
label='Max Memory Buffer Size (0 uses default size)'
|
||||||
|
value={maxMemBufferSize}
|
||||||
|
onChange={onMaxMemBufferSizeChange}
|
||||||
|
variant="outlined"
|
||||||
|
margin="normal"
|
||||||
|
inputProps={{
|
||||||
|
maxLength: "12",
|
||||||
|
}}
|
||||||
|
type="number"
|
||||||
|
disabled={!canbusEnabled}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
<FormControlLabel control={
|
||||||
|
<Checkbox
|
||||||
|
checked={dataLoggerEnabled}
|
||||||
|
onChange={onDataLoggerChange}
|
||||||
|
disabled={!canbusEnabled}
|
||||||
|
/>
|
||||||
|
} label="Data Logger Enabled" />
|
||||||
|
</FormGroup>
|
||||||
|
<TextField
|
||||||
|
id="max_disk_buffer_size"
|
||||||
|
name="max_disk_buffer_size"
|
||||||
|
label='Max Disk Buffer Size (0 uses default size)'
|
||||||
|
value={maxDiskBufferSize}
|
||||||
|
onChange={onMaxDiskBufferSizeChange}
|
||||||
|
variant="outlined"
|
||||||
|
margin="normal"
|
||||||
|
inputProps={{
|
||||||
|
maxLength: "12",
|
||||||
|
}}
|
||||||
|
type="number"
|
||||||
|
disabled={!dataLoggerEnabled}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={busy}
|
disabled={busy}
|
||||||
|
|||||||
36
src/components/Cars/Add/index.test.jsx
Normal file
36
src/components/Cars/Add/index.test.jsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
jest.mock("../../Contexts/VehicleContext");
|
||||||
|
jest.mock("../../Contexts/StatusContext");
|
||||||
|
jest.mock("../../Contexts/UserContext");
|
||||||
|
|
||||||
|
import { render, waitFor } from "@testing-library/react";
|
||||||
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
|
||||||
|
import { VehicleProvider } from "../../Contexts/VehicleContext";
|
||||||
|
import { StatusProvider } from "../../Contexts/StatusContext";
|
||||||
|
import { UserProvider, setToken } from "../../Contexts/UserContext";
|
||||||
|
import { TEST_AUTH_OBJECT } from "../../../utils/testing";
|
||||||
|
import MainForm from "./index"
|
||||||
|
|
||||||
|
const renderVehicleAdd = async () => {
|
||||||
|
const { container } = render(
|
||||||
|
<VehicleProvider>
|
||||||
|
<StatusProvider>
|
||||||
|
<UserProvider>
|
||||||
|
<BrowserRouter>
|
||||||
|
<MainForm />
|
||||||
|
</BrowserRouter>
|
||||||
|
</UserProvider>
|
||||||
|
</StatusProvider>
|
||||||
|
</VehicleProvider>
|
||||||
|
);
|
||||||
|
await waitFor(() => { /* render */ });
|
||||||
|
return container;
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("VehicleAddForm", () => {
|
||||||
|
it("Render", async () => {
|
||||||
|
setToken(TEST_AUTH_OBJECT);
|
||||||
|
const container = await renderVehicleAdd();
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
391
src/components/Cars/List/__snapshots__/index.test.jsx.snap
Normal file
391
src/components/Cars/List/__snapshots__/index.test.jsx.snap
Normal file
@@ -0,0 +1,391 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`VehicleTable Render 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-vehicleprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-statusprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-userprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-vehicleprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textJustifyAlign-49 MuiGrid-item MuiGrid-grid-md-4"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="/vehicle-add"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-52"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
|
||||||
|
data-shrink="false"
|
||||||
|
for="search"
|
||||||
|
>
|
||||||
|
Search
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
|
||||||
|
id="search"
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-label="search"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root"
|
||||||
|
tabindex="0"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textRightAlign-51 MuiGrid-item MuiGrid-grid-md-4"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
class="MuiTable-root"
|
||||||
|
>
|
||||||
|
<thead
|
||||||
|
class="MuiTableHead-root"
|
||||||
|
>
|
||||||
|
<tr
|
||||||
|
class="MuiTableRow-root MuiTableRow-head"
|
||||||
|
>
|
||||||
|
<th
|
||||||
|
aria-sort="ascending"
|
||||||
|
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||||
|
scope="col"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
VIN
|
||||||
|
<span
|
||||||
|
class="makeStyles-hiddenSortSpan-27"
|
||||||
|
>
|
||||||
|
sorted ascending
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||||
|
scope="col"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiTableSortLabel-root"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Model
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||||
|
scope="col"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiTableSortLabel-root"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Year
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||||
|
scope="col"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiTableSortLabel-root"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Trim
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||||
|
scope="col"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiTableSortLabel-root"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Created
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||||
|
scope="col"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiTableSortLabel-root"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Updated
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody
|
||||||
|
class="MuiTableBody-root"
|
||||||
|
/>
|
||||||
|
<tfoot
|
||||||
|
class="MuiTableFooter-root"
|
||||||
|
>
|
||||||
|
<tr
|
||||||
|
class="MuiTableRow-root MuiTableRow-footer"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
|
||||||
|
colspan="7"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiTablePagination-spacer"
|
||||||
|
/>
|
||||||
|
<p
|
||||||
|
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
|
||||||
|
>
|
||||||
|
Rows per page:
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
aria-label="rows per page"
|
||||||
|
class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
class="MuiTablePagination-menuItem"
|
||||||
|
value="5"
|
||||||
|
>
|
||||||
|
5
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
class="MuiTablePagination-menuItem"
|
||||||
|
value="10"
|
||||||
|
>
|
||||||
|
10
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
class="MuiTablePagination-menuItem"
|
||||||
|
value="25"
|
||||||
|
>
|
||||||
|
25
|
||||||
|
</option>
|
||||||
|
<option
|
||||||
|
class="MuiTablePagination-menuItem"
|
||||||
|
value="100"
|
||||||
|
>
|
||||||
|
100
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 10l5 5 5-5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
|
||||||
|
>
|
||||||
|
0-0 of 0
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="MuiTablePagination-actions"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
aria-label="Previous page"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
|
||||||
|
disabled=""
|
||||||
|
tabindex="-1"
|
||||||
|
title="Previous page"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
aria-label="Next page"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
|
||||||
|
disabled=""
|
||||||
|
tabindex="-1"
|
||||||
|
title="Next page"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@@ -8,14 +8,11 @@ import { VehicleProvider } from "../../Contexts/VehicleContext";
|
|||||||
import { useUserContext } from "../../Contexts/UserContext";
|
import { useUserContext } from "../../Contexts/UserContext";
|
||||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||||
import useStyles from "../../useStyles";
|
import useStyles from "../../useStyles";
|
||||||
import SendCommand from "../../Controls/SendCommand";
|
|
||||||
import SearchField from "../../Controls/SearchField";
|
import SearchField from "../../Controls/SearchField";
|
||||||
import CarSelectionTable from "../../Controls/CarSelectionTable";
|
import CarSelectionTable from "../../Controls/CarSelectionTable";
|
||||||
import { logger } from "../../../services/monitoring";
|
|
||||||
|
|
||||||
const MainForm = () => {
|
const MainForm = () => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const [selected, setSelected] = useState([]);
|
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
const { setTitle, setSitePath } = useStatusContext();
|
const { setTitle, setSitePath } = useStatusContext();
|
||||||
const {
|
const {
|
||||||
@@ -25,29 +22,9 @@ const MainForm = () => {
|
|||||||
} = useUserContext();
|
} = useUserContext();
|
||||||
|
|
||||||
const handleSearch = (query) => {
|
const handleSearch = (query) => {
|
||||||
setSelected([]);
|
|
||||||
setSearch(query);
|
setSearch(query);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSelectAll = (cars) => {
|
|
||||||
setSelected(cars);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelect = (event, key) => {
|
|
||||||
try {
|
|
||||||
let newSelected;
|
|
||||||
if (event.target.checked) {
|
|
||||||
newSelected = [...selected];
|
|
||||||
newSelected.push(key);
|
|
||||||
} else {
|
|
||||||
newSelected = selected.filter((vin) => vin !== key);
|
|
||||||
}
|
|
||||||
setSelected(newSelected);
|
|
||||||
} catch (e) {
|
|
||||||
logger.warn(e.stack);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTitle("Vehicles");
|
setTitle("Vehicles");
|
||||||
setSitePath([]);
|
setSitePath([]);
|
||||||
@@ -61,24 +38,17 @@ const MainForm = () => {
|
|||||||
<Link to="/vehicle-add">
|
<Link to="/vehicle-add">
|
||||||
<AddCircleIcon fontSize="large" />
|
<AddCircleIcon fontSize="large" />
|
||||||
</Link>
|
</Link>
|
||||||
<div
|
|
||||||
className={classes.labelInline}
|
|
||||||
>{`${selected.length} Selected`}</div>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item md={4} className={classes.textCenterAlign}>
|
<Grid item md={4} className={classes.textCenterAlign}>
|
||||||
<SearchField classes={classes} onSearch={handleSearch} />
|
<SearchField classes={classes} onSearch={handleSearch} />
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item md={4} className={classes.textRightAlign}>
|
<Grid item md={4} className={classes.textRightAlign} />
|
||||||
<SendCommand vins={selected} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
<CarSelectionTable
|
<CarSelectionTable
|
||||||
classes={classes}
|
classes={classes}
|
||||||
token={token}
|
token={token}
|
||||||
|
multiSelect={false}
|
||||||
search={{ search }}
|
search={{ search }}
|
||||||
selected={selected}
|
|
||||||
onSelect={handleSelect}
|
|
||||||
onSelectAll={handleSelectAll}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
39
src/components/Cars/List/index.test.jsx
Normal file
39
src/components/Cars/List/index.test.jsx
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
jest.mock("../../Contexts/VehicleContext");
|
||||||
|
jest.mock("../../Contexts/StatusContext");
|
||||||
|
jest.mock("../../Contexts/UserContext");
|
||||||
|
jest.mock('@material-ui/core/utils/unstable_useId', () =>
|
||||||
|
jest.fn().mockReturnValue('mui-test-id'),
|
||||||
|
);
|
||||||
|
|
||||||
|
import { render, waitFor } from "@testing-library/react";
|
||||||
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
|
||||||
|
import { VehicleProvider } from "../../Contexts/VehicleContext";
|
||||||
|
import { StatusProvider } from "../../Contexts/StatusContext";
|
||||||
|
import { UserProvider, setToken } from "../../Contexts/UserContext";
|
||||||
|
import { TEST_AUTH_OBJECT } from "../../../utils/testing";
|
||||||
|
import MainForm from "./index"
|
||||||
|
|
||||||
|
const renderVehicleTable = async () => {
|
||||||
|
const { container } = render(
|
||||||
|
<VehicleProvider>
|
||||||
|
<StatusProvider>
|
||||||
|
<UserProvider>
|
||||||
|
<BrowserRouter>
|
||||||
|
<MainForm />
|
||||||
|
</BrowserRouter>
|
||||||
|
</UserProvider>
|
||||||
|
</StatusProvider>
|
||||||
|
</VehicleProvider>
|
||||||
|
);
|
||||||
|
await waitFor(() => { /* render */ });
|
||||||
|
return container;
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("VehicleTable", () => {
|
||||||
|
it("Render", async () => {
|
||||||
|
setToken(TEST_AUTH_OBJECT);
|
||||||
|
const container = await renderVehicleTable();
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -18,7 +18,7 @@ const renderCANFiltersTab = async () => {
|
|||||||
<CANFiltersTab vin="TESTVIN1234567890" />
|
<CANFiltersTab vin="TESTVIN1234567890" />
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
);
|
);
|
||||||
await waitFor(() => { });
|
await waitFor(() => { /* render */ });
|
||||||
return container;
|
return container;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ const renderCarUpdatesTab = async () => {
|
|||||||
</StatusProvider>
|
</StatusProvider>
|
||||||
</CANFiltersProvider>
|
</CANFiltersProvider>
|
||||||
);
|
);
|
||||||
await waitFor(() => { });
|
await waitFor(() => { /* render */ });
|
||||||
return container;
|
return container;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,128 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`VehicleDetailsTab Render 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-vehicleprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-statusprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-userprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-vehicleprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
VIN
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Log Level
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
info
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<b>
|
||||||
|
CANBus
|
||||||
|
</b>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Enabled
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
true
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Max Memory Buffer Size
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
1
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Enabled
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
true
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Max Disk Buffer Size
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
2
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Filters
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
0
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class=""
|
||||||
|
href="/vehicle-update?vin=undefined"
|
||||||
|
style="margin: 5px;"
|
||||||
|
title="Update \\"undefined\\""
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
aria-label="Update \\"undefined\\""
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class=""
|
||||||
|
href="/"
|
||||||
|
title="Delete \\"undefined\\""
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
aria-label="Delete \\"undefined\\""
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
95
src/components/Cars/Status/Details/index.jsx
Normal file
95
src/components/Cars/Status/Details/index.jsx
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { Redirect } from "react-router";
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
Grid,
|
||||||
|
Tooltip,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
import EditIcon from "@material-ui/icons/Edit"
|
||||||
|
import DeleteIcon from "@material-ui/icons/Delete";
|
||||||
|
import clsx from "clsx";
|
||||||
|
|
||||||
|
import { useUserContext } from "../../../Contexts/UserContext"
|
||||||
|
import { useStatusContext } from "../../../Contexts/StatusContext";
|
||||||
|
import useStyles from "../../../useStyles";
|
||||||
|
import { logger } from "../../../../services/monitoring";
|
||||||
|
import { useVehicleContext, VehicleProvider } from "../../../Contexts/VehicleContext";
|
||||||
|
|
||||||
|
const MainForm = ({ vin }) => {
|
||||||
|
const classes = useStyles();
|
||||||
|
const { setMessage } = useStatusContext();
|
||||||
|
const { vehicle, getVehicle, deleteVehicle } = useVehicleContext();
|
||||||
|
const [redirect, setRedirect] = useState(null);
|
||||||
|
const { token: { idToken: { jwtToken: token } } } = useUserContext();
|
||||||
|
|
||||||
|
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]);
|
||||||
|
|
||||||
|
const onDelete = async () => {
|
||||||
|
try {
|
||||||
|
await deleteVehicle(vin, token);
|
||||||
|
setMessage(`Deleted ${vin}`)
|
||||||
|
setRedirect(`/vehicles`);
|
||||||
|
} catch (e) {
|
||||||
|
setMessage(e.message);
|
||||||
|
logger.warn(e.stack);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (redirect && redirect.length > 0) {
|
||||||
|
return <Redirect to={redirect} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||||
|
<Grid container className={classes.root} spacing={2}>
|
||||||
|
<Grid item md={12} className={classes.textCenterAlign}>
|
||||||
|
<p><b>VIN</b>: {vin}</p>
|
||||||
|
{vehicle.log_level != null && (
|
||||||
|
<p><b>Log Level</b>: {vehicle.log_level}</p>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
{vehicle.canbus && (
|
||||||
|
<Grid item md={12} className={classes.textCenterAlign}>
|
||||||
|
<b>CANBus</b>
|
||||||
|
<p><b>Enabled</b>: {vehicle.canbus.enabled.toString()}</p>
|
||||||
|
<p><b>Max Memory Buffer Size</b>: {vehicle.canbus.max_mem_buffer_size ?? "Default"}</p>
|
||||||
|
<p><b>Enabled</b>: {vehicle.canbus.data_logger_enabled.toString()}</p>
|
||||||
|
<p><b>Max Disk Buffer Size</b>: {vehicle.canbus.max_disk_buffer_size ?? "Default"}</p>
|
||||||
|
<p><b>Filters</b>: {vehicle.canbus.filters ? vehicle.canbus.filters.length() : 0}</p>
|
||||||
|
</Grid>
|
||||||
|
)}
|
||||||
|
<Grid item md={12} className={classes.textCenterAlign}>
|
||||||
|
<Tooltip key={`update-${vin}`} title={`Update "${vin}"`}>
|
||||||
|
<Link to={`/vehicle-update?vin=${vin}`} style={{ margin: 5 }}>
|
||||||
|
<EditIcon aria-label={`Update "${vin}"`} />
|
||||||
|
</Link>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip key={`delete-${vin}`} title={`Delete "${vin}"`}>
|
||||||
|
<Link to="#" onClick={onDelete}>
|
||||||
|
<DeleteIcon aria-label={`Delete "${vin}"`} />
|
||||||
|
</Link>
|
||||||
|
</Tooltip>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</div >
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const CarDetails = (props) => (
|
||||||
|
<VehicleProvider>
|
||||||
|
<MainForm {...props} />
|
||||||
|
</VehicleProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default CarDetails;
|
||||||
36
src/components/Cars/Status/Details/index.test.jsx
Normal file
36
src/components/Cars/Status/Details/index.test.jsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
jest.mock("../../../Contexts/VehicleContext");
|
||||||
|
jest.mock("../../../Contexts/StatusContext");
|
||||||
|
jest.mock("../../../Contexts/UserContext");
|
||||||
|
|
||||||
|
import { render, waitFor } from "@testing-library/react";
|
||||||
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
|
||||||
|
import { VehicleProvider } from "../../../Contexts/VehicleContext";
|
||||||
|
import { StatusProvider } from "../../../Contexts/StatusContext";
|
||||||
|
import { UserProvider, setToken } from "../../../Contexts/UserContext";
|
||||||
|
import { TEST_AUTH_OBJECT } from "../../../../utils/testing";
|
||||||
|
import MainForm from "./index"
|
||||||
|
|
||||||
|
const renderVehicleDetailsTab = async () => {
|
||||||
|
const { container } = render(
|
||||||
|
<VehicleProvider>
|
||||||
|
<StatusProvider>
|
||||||
|
<UserProvider>
|
||||||
|
<BrowserRouter>
|
||||||
|
<MainForm />
|
||||||
|
</BrowserRouter>
|
||||||
|
</UserProvider>
|
||||||
|
</StatusProvider>
|
||||||
|
</VehicleProvider>
|
||||||
|
);
|
||||||
|
await waitFor(() => { /* render */ });
|
||||||
|
return container;
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("VehicleDetailsTab", () => {
|
||||||
|
it("Render", async () => {
|
||||||
|
setToken(TEST_AUTH_OBJECT);
|
||||||
|
const container = await renderVehicleDetailsTab();
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
21
src/components/Cars/Status/DetailsTab.jsx
Normal file
21
src/components/Cars/Status/DetailsTab.jsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useParams } from "react-router";
|
||||||
|
import clsx from "clsx";
|
||||||
|
import { Typography } from "@material-ui/core";
|
||||||
|
|
||||||
|
import CarDetails from "./Details";
|
||||||
|
import useStyles from "../../useStyles";
|
||||||
|
|
||||||
|
const CarDetailsTab = () => {
|
||||||
|
const { vin } = useParams();
|
||||||
|
const classes = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||||
|
<Typography variant="h6">Vehicle Details</Typography>
|
||||||
|
<CarDetails vin={vin} classes={classes} />
|
||||||
|
</div >
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CarDetailsTab;
|
||||||
41
src/components/Cars/Status/DetailsTab.test.jsx
Normal file
41
src/components/Cars/Status/DetailsTab.test.jsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
jest.mock("../../Contexts/VehicleContext");
|
||||||
|
jest.mock("../../Contexts/StatusContext");
|
||||||
|
jest.mock("../../Contexts/UserContext");
|
||||||
|
jest.mock('@material-ui/core/utils/unstable_useId', () =>
|
||||||
|
jest.fn().mockReturnValue('mui-test-id'),
|
||||||
|
);
|
||||||
|
|
||||||
|
import { render, waitFor } from "@testing-library/react";
|
||||||
|
import { MemoryRouter, Route } from "react-router-dom";
|
||||||
|
|
||||||
|
import { VehicleProvider } from "../../Contexts/VehicleContext";
|
||||||
|
import { StatusProvider } from "../../Contexts/StatusContext";
|
||||||
|
import { UserProvider, setToken } from "../../Contexts/UserContext";
|
||||||
|
import { TEST_AUTH_OBJECT } from "../../../utils/testing";
|
||||||
|
import MainForm from "./DetailsTab"
|
||||||
|
|
||||||
|
const renderDetailsTab = async () => {
|
||||||
|
const { container } = render(
|
||||||
|
<VehicleProvider>
|
||||||
|
<StatusProvider>
|
||||||
|
<UserProvider>
|
||||||
|
<MemoryRouter initialEntries={['/testroute/TESTVIN1234567890']}>
|
||||||
|
<Route path="/testroute/:vin">
|
||||||
|
<MainForm vin="TESTVIN1234567890" />
|
||||||
|
</Route>
|
||||||
|
</MemoryRouter>
|
||||||
|
</UserProvider>
|
||||||
|
</StatusProvider>
|
||||||
|
</VehicleProvider >
|
||||||
|
);
|
||||||
|
await waitFor(() => { /* render */ });
|
||||||
|
return container;
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("DetailsTab", () => {
|
||||||
|
it("Render", async () => {
|
||||||
|
setToken(TEST_AUTH_OBJECT);
|
||||||
|
const container = await renderDetailsTab();
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,138 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`DetailsTab Render 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-vehicleprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-statusprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-userprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||||
|
>
|
||||||
|
<h6
|
||||||
|
class="MuiTypography-root MuiTypography-h6"
|
||||||
|
>
|
||||||
|
Vehicle Details
|
||||||
|
</h6>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-vehicleprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
VIN
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
TESTVIN1234567890
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Log Level
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
info
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<b>
|
||||||
|
CANBus
|
||||||
|
</b>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Enabled
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
true
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Max Memory Buffer Size
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
1
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Enabled
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
true
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Max Disk Buffer Size
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
2
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Filters
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
0
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class=""
|
||||||
|
href="/vehicle-update?vin=TESTVIN1234567890"
|
||||||
|
style="margin: 5px;"
|
||||||
|
title="Update \\"TESTVIN1234567890\\""
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
aria-label="Update \\"TESTVIN1234567890\\""
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class=""
|
||||||
|
href="/testroute/TESTVIN1234567890"
|
||||||
|
title="Delete \\"TESTVIN1234567890\\""
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
aria-label="Delete \\"TESTVIN1234567890\\""
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@@ -41,7 +41,7 @@ exports[`CarStatus Render 1`] = `
|
|||||||
<span
|
<span
|
||||||
class="MuiTab-wrapper"
|
class="MuiTab-wrapper"
|
||||||
>
|
>
|
||||||
Car Updates
|
Details
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="MuiTouchRipple-root"
|
class="MuiTouchRipple-root"
|
||||||
@@ -55,6 +55,24 @@ exports[`CarStatus Render 1`] = `
|
|||||||
role="tab"
|
role="tab"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
type="button"
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiTab-wrapper"
|
||||||
|
>
|
||||||
|
Car Updates
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
aria-controls="tabpanel-2"
|
||||||
|
aria-selected="false"
|
||||||
|
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
|
||||||
|
id="tab-2"
|
||||||
|
role="tab"
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="MuiTab-wrapper"
|
class="MuiTab-wrapper"
|
||||||
@@ -87,586 +105,64 @@ exports[`CarStatus Render 1`] = `
|
|||||||
<h6
|
<h6
|
||||||
class="MuiTypography-root MuiTypography-h6"
|
class="MuiTypography-root MuiTypography-h6"
|
||||||
>
|
>
|
||||||
Car Updates
|
Vehicle Details
|
||||||
</h6>
|
</h6>
|
||||||
<table
|
|
||||||
class="MuiTable-root"
|
|
||||||
>
|
|
||||||
<thead
|
|
||||||
class="MuiTableHead-root"
|
|
||||||
>
|
|
||||||
<tr
|
|
||||||
class="MuiTableRow-root MuiTableRow-head"
|
|
||||||
>
|
|
||||||
<th
|
|
||||||
aria-sort="descending"
|
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
|
||||||
scope="col"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
ID
|
|
||||||
<span
|
|
||||||
class="makeStyles-hiddenSortSpan-27"
|
|
||||||
>
|
|
||||||
sorted descending
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
|
||||||
scope="col"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
Name
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
|
||||||
scope="col"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
Status
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
|
||||||
scope="col"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
Created
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
|
||||||
scope="col"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
Updated
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody
|
|
||||||
class="MuiTableBody-root"
|
|
||||||
/>
|
|
||||||
<tfoot
|
|
||||||
class="MuiTableFooter-root"
|
|
||||||
>
|
|
||||||
<tr
|
|
||||||
class="MuiTableRow-root MuiTableRow-footer"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
|
|
||||||
colspan="5"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="MuiTablePagination-spacer"
|
|
||||||
/>
|
|
||||||
<p
|
|
||||||
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
|
|
||||||
>
|
|
||||||
Rows per page:
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
|
|
||||||
>
|
|
||||||
<select
|
|
||||||
aria-label="rows per page"
|
|
||||||
class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
class="MuiTablePagination-menuItem"
|
|
||||||
value="5"
|
|
||||||
>
|
|
||||||
5
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
class="MuiTablePagination-menuItem"
|
|
||||||
value="10"
|
|
||||||
>
|
|
||||||
10
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
class="MuiTablePagination-menuItem"
|
|
||||||
value="25"
|
|
||||||
>
|
|
||||||
25
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
class="MuiTablePagination-menuItem"
|
|
||||||
value="100"
|
|
||||||
>
|
|
||||||
100
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M7 10l5 5 5-5z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p
|
|
||||||
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
|
|
||||||
>
|
|
||||||
0-0 of 0
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="MuiTablePagination-actions"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
aria-label="Previous page"
|
|
||||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
|
|
||||||
disabled=""
|
|
||||||
tabindex="-1"
|
|
||||||
title="Previous page"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="MuiIconButton-label"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
aria-label="Next page"
|
|
||||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
|
|
||||||
disabled=""
|
|
||||||
tabindex="-1"
|
|
||||||
title="Next page"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="MuiIconButton-label"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
<div
|
|
||||||
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="MuiGrid-root makeStyles-textJustifyAlign-49 MuiGrid-item MuiGrid-grid-md-4"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-4"
|
|
||||||
>
|
|
||||||
<h6
|
|
||||||
class="MuiTypography-root makeStyles-labelInline-9 MuiTypography-h6"
|
|
||||||
>
|
|
||||||
Car ECUs
|
|
||||||
</h6>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="MuiGrid-root makeStyles-textRightAlign-51 MuiGrid-item MuiGrid-grid-md-4"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-formControl-7 makeStyles-textField-29 MuiButton-containedPrimary"
|
|
||||||
tabindex="0"
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="MuiButton-label"
|
|
||||||
>
|
|
||||||
Refresh
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="MuiTouchRipple-root"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||||
>
|
>
|
||||||
<table
|
<div
|
||||||
class="MuiTable-root"
|
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||||
>
|
>
|
||||||
<thead
|
<div
|
||||||
class="MuiTableHead-root"
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
>
|
>
|
||||||
<tr
|
<p>
|
||||||
class="MuiTableRow-root MuiTableRow-head"
|
<b>
|
||||||
>
|
VIN
|
||||||
<th
|
</b>
|
||||||
aria-sort="descending"
|
:
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
</p>
|
||||||
scope="col"
|
</div>
|
||||||
>
|
<div
|
||||||
<span
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
aria-disabled="false"
|
|
||||||
class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
ECU
|
|
||||||
<span
|
|
||||||
class="makeStyles-hiddenSortSpan-27"
|
|
||||||
>
|
|
||||||
sorted descending
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
|
||||||
scope="col"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
SW Version
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
|
||||||
scope="col"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
HW Version
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
|
||||||
scope="col"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
Config
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
|
||||||
scope="col"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
Created
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
|
||||||
scope="col"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
Updated
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody
|
|
||||||
class="MuiTableBody-root"
|
|
||||||
/>
|
|
||||||
<tfoot
|
|
||||||
class="MuiTableFooter-root"
|
|
||||||
>
|
>
|
||||||
<tr
|
<a
|
||||||
class="MuiTableRow-root MuiTableRow-footer"
|
class=""
|
||||||
|
href="/vehicle-update?vin=undefined"
|
||||||
|
style="margin: 5px;"
|
||||||
|
title="Update \\"undefined\\""
|
||||||
>
|
>
|
||||||
<td
|
<svg
|
||||||
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
|
aria-hidden="true"
|
||||||
colspan="10"
|
aria-label="Update \\"undefined\\""
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
>
|
>
|
||||||
<div
|
<path
|
||||||
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
|
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||||
>
|
/>
|
||||||
<div
|
</svg>
|
||||||
class="MuiTablePagination-spacer"
|
</a>
|
||||||
/>
|
<a
|
||||||
<p
|
class=""
|
||||||
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
|
href="/"
|
||||||
>
|
title="Delete \\"undefined\\""
|
||||||
Rows per page:
|
>
|
||||||
</p>
|
<svg
|
||||||
<div
|
aria-hidden="true"
|
||||||
class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
|
aria-label="Delete \\"undefined\\""
|
||||||
>
|
class="MuiSvgIcon-root"
|
||||||
<select
|
focusable="false"
|
||||||
aria-label="rows per page"
|
viewBox="0 0 24 24"
|
||||||
class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
|
>
|
||||||
>
|
<path
|
||||||
<option
|
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
|
||||||
class="MuiTablePagination-menuItem"
|
/>
|
||||||
value="5"
|
</svg>
|
||||||
>
|
</a>
|
||||||
5
|
</div>
|
||||||
</option>
|
</div>
|
||||||
<option
|
|
||||||
class="MuiTablePagination-menuItem"
|
|
||||||
value="10"
|
|
||||||
>
|
|
||||||
10
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
class="MuiTablePagination-menuItem"
|
|
||||||
value="25"
|
|
||||||
>
|
|
||||||
25
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
class="MuiTablePagination-menuItem"
|
|
||||||
value="100"
|
|
||||||
>
|
|
||||||
100
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M7 10l5 5 5-5z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p
|
|
||||||
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
|
|
||||||
>
|
|
||||||
0-0 of 0
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="MuiTablePagination-actions"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
aria-label="Previous page"
|
|
||||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
|
|
||||||
disabled=""
|
|
||||||
tabindex="-1"
|
|
||||||
title="Previous page"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="MuiIconButton-label"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
aria-label="Next page"
|
|
||||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
|
|
||||||
disabled=""
|
|
||||||
tabindex="-1"
|
|
||||||
title="Next page"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="MuiIconButton-label"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -677,6 +173,12 @@ exports[`CarStatus Render 1`] = `
|
|||||||
id="tabpanel-1"
|
id="tabpanel-1"
|
||||||
role="tabpanel"
|
role="tabpanel"
|
||||||
/>
|
/>
|
||||||
|
<div
|
||||||
|
aria-labelledby="tab-2"
|
||||||
|
hidden=""
|
||||||
|
id="tabpanel-2"
|
||||||
|
role="tabpanel"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { useLocation } from "react-router-dom";
|
|||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import { Box, Tab, Tabs } from "@material-ui/core";
|
import { Box, Tab, Tabs } from "@material-ui/core";
|
||||||
|
|
||||||
|
import CarDetailsTab from "./DetailsTab";
|
||||||
import CarUpdatesTab from "./CarUpdatesTab";
|
import CarUpdatesTab from "./CarUpdatesTab";
|
||||||
import CANFiltersTab from "./CANFiltersTab";
|
import CANFiltersTab from "./CANFiltersTab";
|
||||||
import TabPanel from "../../Controls/TabPanel";
|
import TabPanel from "../../Controls/TabPanel";
|
||||||
@@ -11,6 +12,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
|
|||||||
import useStyles from "../../useStyles";
|
import useStyles from "../../useStyles";
|
||||||
|
|
||||||
const tabHashes = [
|
const tabHashes = [
|
||||||
|
"details",
|
||||||
"updates",
|
"updates",
|
||||||
"filters"
|
"filters"
|
||||||
]
|
]
|
||||||
@@ -43,7 +45,7 @@ const CarStatus = () => {
|
|||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [vin]);
|
}, [vin]);
|
||||||
|
|
||||||
const handleTabChange = (event, newIndex) => {
|
const handleTabChange = (_event, newIndex) => {
|
||||||
setTabIndex(newIndex);
|
setTabIndex(newIndex);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -51,16 +53,21 @@ const CarStatus = () => {
|
|||||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||||
<Box className={classes.tableToolbar} sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
<Box className={classes.tableToolbar} sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||||
<Tabs value={tabIndex} onChange={handleTabChange} aria-label="car tabs" indicatorColor="secondary">
|
<Tabs value={tabIndex} onChange={handleTabChange} aria-label="car tabs" indicatorColor="secondary">
|
||||||
<Tab label="Car Updates" {...tabProps(0)} />
|
<Tab label="Details" {...tabProps(0)} />
|
||||||
<Tab label="CAN Filters" {...tabProps(1)} />
|
<Tab label="Car Updates" {...tabProps(1)} />
|
||||||
|
<Tab label="CAN Filters" {...tabProps(2)} />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<TabPanel value={tabIndex} index={0}>
|
<TabPanel value={tabIndex} index={0}>
|
||||||
<CarUpdatesTab />
|
<CarDetailsTab />
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
<TabPanel value={tabIndex} index={1}>
|
<TabPanel value={tabIndex} index={1}>
|
||||||
|
<CarUpdatesTab />
|
||||||
|
</TabPanel>
|
||||||
|
|
||||||
|
<TabPanel value={tabIndex} index={2}>
|
||||||
<CANFiltersTab />
|
<CANFiltersTab />
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</div >
|
</div >
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ const renderCarStatus = async () => {
|
|||||||
</StatusProvider>
|
</StatusProvider>
|
||||||
</CANFiltersProvider>
|
</CANFiltersProvider>
|
||||||
);
|
);
|
||||||
await waitFor(() => { });
|
await waitFor(() => { /* render */ });
|
||||||
return container;
|
return container;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
731
src/components/Cars/Update/__snapshots__/index.test.jsx.snap
Normal file
731
src/components/Cars/Update/__snapshots__/index.test.jsx.snap
Normal file
@@ -0,0 +1,731 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`VehicleUpdate Render 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-vehicleprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-statusprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-userprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-vehicleprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="makeStyles-paper-3"
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
action="{onSubmit}"
|
||||||
|
class="makeStyles-form-5"
|
||||||
|
novalidate=""
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-disabled Mui-disabled Mui-required Mui-required"
|
||||||
|
data-shrink="false"
|
||||||
|
for="vin"
|
||||||
|
id="vin-label"
|
||||||
|
>
|
||||||
|
VIN
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
|
>
|
||||||
|
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</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="vin"
|
||||||
|
maxlength="17"
|
||||||
|
name="vin"
|
||||||
|
readonly=""
|
||||||
|
required=""
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
VIN
|
||||||
|
*
|
||||||
|
</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 MuiFormLabel-filled Mui-required Mui-required"
|
||||||
|
data-shrink="true"
|
||||||
|
for="model"
|
||||||
|
id="model-label"
|
||||||
|
>
|
||||||
|
Model
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
|
>
|
||||||
|
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
id="model"
|
||||||
|
maxlength="255"
|
||||||
|
name="model"
|
||||||
|
required=""
|
||||||
|
type="text"
|
||||||
|
value="Ocean"
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Model
|
||||||
|
*
|
||||||
|
</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 MuiFormLabel-filled Mui-required Mui-required"
|
||||||
|
data-shrink="true"
|
||||||
|
for="year"
|
||||||
|
id="year-label"
|
||||||
|
>
|
||||||
|
Year
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
|
>
|
||||||
|
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
id="year"
|
||||||
|
maxlength="4"
|
||||||
|
minlength="4"
|
||||||
|
name="year"
|
||||||
|
required=""
|
||||||
|
type="number"
|
||||||
|
value="2022"
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Year
|
||||||
|
*
|
||||||
|
</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 MuiFormLabel-filled Mui-required Mui-required"
|
||||||
|
data-shrink="true"
|
||||||
|
for="trim"
|
||||||
|
id="trim-label"
|
||||||
|
>
|
||||||
|
Trim
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
|
>
|
||||||
|
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
id="trim"
|
||||||
|
maxlength="4"
|
||||||
|
minlength="4"
|
||||||
|
name="trim"
|
||||||
|
required=""
|
||||||
|
type="text"
|
||||||
|
value="Base"
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Trim
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root"
|
||||||
|
id="demo-row-radio-buttons-group-label"
|
||||||
|
>
|
||||||
|
Log Level
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
aria-labelledby="demo-row-radio-buttons-group-label"
|
||||||
|
class="MuiFormGroup-root MuiFormGroup-row"
|
||||||
|
margin="normal"
|
||||||
|
role="radiogroup"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="trace"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Trace
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="debug"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Debug
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="info"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Info
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="warn"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Warn
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="error"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Error
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="critical"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Critical
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root"
|
||||||
|
id="demo-row-radio-buttons-group-label"
|
||||||
|
>
|
||||||
|
CAN Bus
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiFormGroup-root"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
data-indeterminate="false"
|
||||||
|
type="checkbox"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
CAN Bus Enabled
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
|
||||||
|
data-shrink="true"
|
||||||
|
for="max_mem_buffer_size"
|
||||||
|
id="max_mem_buffer_size-label"
|
||||||
|
>
|
||||||
|
Max Memory Buffer Size (0 uses default size)
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
|
>
|
||||||
|
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
id="max_mem_buffer_size"
|
||||||
|
maxlength="12"
|
||||||
|
name="max_mem_buffer_size"
|
||||||
|
required=""
|
||||||
|
type="number"
|
||||||
|
value="1"
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Max Memory Buffer Size (0 uses default size)
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
data-indeterminate="false"
|
||||||
|
type="checkbox"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Data Logger Enabled
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</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 MuiFormLabel-filled Mui-required Mui-required"
|
||||||
|
data-shrink="true"
|
||||||
|
for="max_disk_buffer_size"
|
||||||
|
id="max_disk_buffer_size-label"
|
||||||
|
>
|
||||||
|
Max Disk Buffer Size (0 uses default size)
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
|
>
|
||||||
|
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
id="max_disk_buffer_size"
|
||||||
|
maxlength="12"
|
||||||
|
name="max_disk_buffer_size"
|
||||||
|
required=""
|
||||||
|
type="number"
|
||||||
|
value="2"
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Max Disk Buffer Size (0 uses default size)
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
|
||||||
|
tabindex="0"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiButton-label"
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
285
src/components/Cars/Update/index.jsx
Normal file
285
src/components/Cars/Update/index.jsx
Normal file
@@ -0,0 +1,285 @@
|
|||||||
|
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 modelEl = useRef(null);
|
||||||
|
const yearEl = useRef(null);
|
||||||
|
const trimEl = 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);
|
||||||
|
|
||||||
|
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,
|
||||||
|
model: modelEl.current.value,
|
||||||
|
year: parseInt(yearEl.current.value),
|
||||||
|
trim: trimEl.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 <Redirect to={redirect} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classes.paper}>
|
||||||
|
<form className={classes.form} noValidate action="{onSubmit}">
|
||||||
|
<TextField
|
||||||
|
id="vin"
|
||||||
|
name="vin"
|
||||||
|
label="VIN"
|
||||||
|
variant="outlined"
|
||||||
|
margin="normal"
|
||||||
|
inputProps={{
|
||||||
|
maxLength: "17",
|
||||||
|
readOnly: true,
|
||||||
|
}}
|
||||||
|
disabled
|
||||||
|
value={vin}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
id="model"
|
||||||
|
name="model"
|
||||||
|
label="Model"
|
||||||
|
defaultValue="Ocean"
|
||||||
|
variant="outlined"
|
||||||
|
margin="normal"
|
||||||
|
inputProps={{
|
||||||
|
maxLength: "255",
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
inputRef={modelEl}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
id="year"
|
||||||
|
name="year"
|
||||||
|
label="Year"
|
||||||
|
type="number"
|
||||||
|
defaultValue="2022"
|
||||||
|
variant="outlined"
|
||||||
|
margin="normal"
|
||||||
|
inputProps={{
|
||||||
|
maxLength: "4",
|
||||||
|
minLength: "4",
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
inputRef={yearEl}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
id="trim"
|
||||||
|
name="trim"
|
||||||
|
label="Trim"
|
||||||
|
defaultValue="Base"
|
||||||
|
variant="outlined"
|
||||||
|
margin="normal"
|
||||||
|
inputProps={{
|
||||||
|
maxLength: "4",
|
||||||
|
minLength: "4",
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
inputRef={trimEl}
|
||||||
|
/>
|
||||||
|
<FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
|
||||||
|
<RadioGroup
|
||||||
|
row
|
||||||
|
aria-labelledby="demo-row-radio-buttons-group-label"
|
||||||
|
name="log-level-group"
|
||||||
|
value={selectedLogLevel}
|
||||||
|
onChange={onLogLevelChange}
|
||||||
|
margin="normal"
|
||||||
|
>
|
||||||
|
<FormControlLabel value="trace" control={<Radio />} label="Trace" />
|
||||||
|
<FormControlLabel value="debug" control={<Radio />} label="Debug" />
|
||||||
|
<FormControlLabel value="info" control={<Radio />} label="Info" />
|
||||||
|
<FormControlLabel value="warn" control={<Radio />} label="Warn" />
|
||||||
|
<FormControlLabel value="error" control={<Radio />} label="Error" />
|
||||||
|
<FormControlLabel value="critical" control={<Radio />} label="Critical" />
|
||||||
|
</RadioGroup>
|
||||||
|
<FormLabel id="demo-row-radio-buttons-group-label">CAN Bus</FormLabel>
|
||||||
|
<FormGroup>
|
||||||
|
<FormControlLabel control={
|
||||||
|
<Checkbox
|
||||||
|
checked={canbusEnabled}
|
||||||
|
onChange={onCANBusChange}
|
||||||
|
/>
|
||||||
|
} label="CAN Bus Enabled" />
|
||||||
|
<TextField
|
||||||
|
id="max_mem_buffer_size"
|
||||||
|
name="max_mem_buffer_size"
|
||||||
|
label='Max Memory Buffer Size (0 uses default size)'
|
||||||
|
value={maxMemBufferSize}
|
||||||
|
onChange={onMaxMemBufferSizeChange}
|
||||||
|
variant="outlined"
|
||||||
|
margin="normal"
|
||||||
|
inputProps={{
|
||||||
|
maxLength: "12",
|
||||||
|
}}
|
||||||
|
type="number"
|
||||||
|
disabled={!canbusEnabled}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
<FormControlLabel control={
|
||||||
|
<Checkbox
|
||||||
|
checked={dataLoggerEnabled}
|
||||||
|
onChange={onDataLoggerChange}
|
||||||
|
disabled={!canbusEnabled}
|
||||||
|
/>
|
||||||
|
} label="Data Logger Enabled" />
|
||||||
|
</FormGroup>
|
||||||
|
<TextField
|
||||||
|
id="max_disk_buffer_size"
|
||||||
|
name="max_disk_buffer_size"
|
||||||
|
label='Max Disk Buffer Size (0 uses default size)'
|
||||||
|
value={maxDiskBufferSize}
|
||||||
|
onChange={onMaxDiskBufferSizeChange}
|
||||||
|
variant="outlined"
|
||||||
|
margin="normal"
|
||||||
|
inputProps={{
|
||||||
|
maxLength: "12",
|
||||||
|
}}
|
||||||
|
type="number"
|
||||||
|
disabled={!dataLoggerEnabled}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={busy}
|
||||||
|
fullWidth
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
className={classes.submit}
|
||||||
|
onClick={onSubmit}
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const VehicleUpdateForm = (props) => (
|
||||||
|
<VehicleProvider>
|
||||||
|
<MainForm {...props} />
|
||||||
|
</VehicleProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default VehicleUpdateForm;
|
||||||
36
src/components/Cars/Update/index.test.jsx
Normal file
36
src/components/Cars/Update/index.test.jsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
jest.mock("../../Contexts/VehicleContext");
|
||||||
|
jest.mock("../../Contexts/StatusContext");
|
||||||
|
jest.mock("../../Contexts/UserContext");
|
||||||
|
|
||||||
|
import { render, waitFor } from "@testing-library/react";
|
||||||
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
|
||||||
|
import { VehicleProvider } from "../../Contexts/VehicleContext";
|
||||||
|
import { StatusProvider } from "../../Contexts/StatusContext";
|
||||||
|
import { UserProvider, setToken } from "../../Contexts/UserContext";
|
||||||
|
import { TEST_AUTH_OBJECT } from "../../../utils/testing";
|
||||||
|
import MainForm from "./index"
|
||||||
|
|
||||||
|
const renderVehicleUpdate = async () => {
|
||||||
|
const { container } = render(
|
||||||
|
<VehicleProvider>
|
||||||
|
<StatusProvider>
|
||||||
|
<UserProvider>
|
||||||
|
<BrowserRouter>
|
||||||
|
<MainForm />
|
||||||
|
</BrowserRouter>
|
||||||
|
</UserProvider>
|
||||||
|
</StatusProvider>
|
||||||
|
</VehicleProvider>
|
||||||
|
);
|
||||||
|
await waitFor(() => { /* render */ });
|
||||||
|
return container;
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("VehicleUpdate", () => {
|
||||||
|
it("Render", async () => {
|
||||||
|
setToken(TEST_AUTH_OBJECT);
|
||||||
|
const container = await renderVehicleUpdate();
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -6,6 +6,8 @@ const FleetContext = React.createContext();
|
|||||||
export const FleetProvider = ({ children }) => {
|
export const FleetProvider = ({ children }) => {
|
||||||
const [busy, setBusy] = useState(false);
|
const [busy, setBusy] = useState(false);
|
||||||
|
|
||||||
|
const [fleet, setFleet] = useState({});
|
||||||
|
|
||||||
const [fleets, setFleets] = useState([]);
|
const [fleets, setFleets] = useState([]);
|
||||||
const [totalFleets, setTotalFleets] = useState(0);
|
const [totalFleets, setTotalFleets] = useState(0);
|
||||||
|
|
||||||
@@ -15,13 +17,12 @@ export const FleetProvider = ({ children }) => {
|
|||||||
const [fleetCANFilters, setFleetCANFilters] = useState([]);
|
const [fleetCANFilters, setFleetCANFilters] = useState([]);
|
||||||
const [totalFleetCANFilters, setTotalFleetCANFilters] = useState(0);
|
const [totalFleetCANFilters, setTotalFleetCANFilters] = useState(0);
|
||||||
|
|
||||||
const addFleet = async (fleet, token) => {
|
const addFleet = async (f, token) => {
|
||||||
try {
|
try {
|
||||||
setBusy(true);
|
setBusy(true);
|
||||||
|
validateFleet(f);
|
||||||
|
|
||||||
validateFleet(fleet);
|
const result = await api.addFleet(f, token);
|
||||||
|
|
||||||
const result = await api.addFleet(fleet, token);
|
|
||||||
if (result.error) throw new Error(`Add fleet error. ${result.message}`);
|
if (result.error) throw new Error(`Add fleet error. ${result.message}`);
|
||||||
return result;
|
return result;
|
||||||
} finally {
|
} finally {
|
||||||
@@ -29,6 +30,24 @@ export const FleetProvider = ({ children }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getFleet = async (name, token) => {
|
||||||
|
try {
|
||||||
|
setBusy(true);
|
||||||
|
validateFleetName(name);
|
||||||
|
|
||||||
|
const result = await api.getFleet(name, token);
|
||||||
|
if (result.error) {
|
||||||
|
setFleet({});
|
||||||
|
throw new Error(`Get fleet error. ${result.message}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
setFleet(result);
|
||||||
|
return result;
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const getFleets = async (search, token) => {
|
const getFleets = async (search, token) => {
|
||||||
try {
|
try {
|
||||||
setBusy(true);
|
setBusy(true);
|
||||||
@@ -48,14 +67,14 @@ export const FleetProvider = ({ children }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const updateFleet = async (name, fleet, token) => {
|
const updateFleet = async (name, f, token) => {
|
||||||
try {
|
try {
|
||||||
setBusy(true);
|
setBusy(true);
|
||||||
|
|
||||||
validateFleetName(name);
|
validateFleetName(name);
|
||||||
validateFleet(fleet);
|
validateFleet(f);
|
||||||
|
|
||||||
const result = await api.updateFleet(name, fleet, token);
|
const result = await api.updateFleet(name, f, token);
|
||||||
if (result.error) {
|
if (result.error) {
|
||||||
throw new Error(`Update fleet error. ${result.message}`);
|
throw new Error(`Update fleet error. ${result.message}`);
|
||||||
}
|
}
|
||||||
@@ -76,8 +95,6 @@ export const FleetProvider = ({ children }) => {
|
|||||||
throw new Error(`Delete filter error. ${result.message}`);
|
throw new Error(`Delete filter error. ${result.message}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
const index = fleets.findIndex(element => element.name === name);
|
|
||||||
if (index >= 0) fleets.splice(index, 1);
|
|
||||||
return result;
|
return result;
|
||||||
} finally {
|
} finally {
|
||||||
setBusy(false);
|
setBusy(false);
|
||||||
@@ -221,9 +238,11 @@ export const FleetProvider = ({ children }) => {
|
|||||||
value={{
|
value={{
|
||||||
busy,
|
busy,
|
||||||
|
|
||||||
|
fleet,
|
||||||
fleets,
|
fleets,
|
||||||
totalFleets,
|
totalFleets,
|
||||||
addFleet,
|
addFleet,
|
||||||
|
getFleet,
|
||||||
getFleets,
|
getFleets,
|
||||||
updateFleet,
|
updateFleet,
|
||||||
deleteFleet,
|
deleteFleet,
|
||||||
@@ -247,12 +266,12 @@ export const FleetProvider = ({ children }) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const validateFleet = (fleet) => {
|
const validateFleet = (f) => {
|
||||||
if (fleet == null) {
|
if (f == null) {
|
||||||
throw new Error("No fleet data");
|
throw new Error("No fleet data");
|
||||||
}
|
}
|
||||||
|
|
||||||
validateFleetName(fleet.name);
|
validateFleetName(f.name);
|
||||||
}
|
}
|
||||||
|
|
||||||
const validateFleetName = (name) => {
|
const validateFleetName = (name) => {
|
||||||
|
|||||||
@@ -10,7 +10,12 @@ import {
|
|||||||
import { FleetProvider, useFleetContext } from "./FleetContext";
|
import { FleetProvider, useFleetContext } from "./FleetContext";
|
||||||
import { StatusProvider, useStatusContext } from "./StatusContext";
|
import { StatusProvider, useStatusContext } from "./StatusContext";
|
||||||
|
|
||||||
const checkFleetResults = (error, busy, fleets) => {
|
const checkFleetResults = (error, busy, fleet) => {
|
||||||
|
checkBaseResults(error, busy);
|
||||||
|
expect(screen.getByTestId("fleet").innerHTML).toEqual(fleet);
|
||||||
|
};
|
||||||
|
|
||||||
|
const checkFleetsResults = (error, busy, fleets) => {
|
||||||
checkBaseResults(error, busy);
|
checkBaseResults(error, busy);
|
||||||
expect(screen.getByTestId("fleets").innerHTML).toEqual(fleets);
|
expect(screen.getByTestId("fleets").innerHTML).toEqual(fleets);
|
||||||
};
|
};
|
||||||
@@ -60,7 +65,7 @@ describe("FleetContext", () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it("initial state", () => {
|
it("initial state", () => {
|
||||||
checkFleetResults("", "false", "[]");
|
checkFleetsResults("", "false", "[]");
|
||||||
});
|
});
|
||||||
|
|
||||||
it("getFleets", async () => {
|
it("getFleets", async () => {
|
||||||
@@ -68,7 +73,48 @@ describe("FleetContext", () => {
|
|||||||
await waitFor(() =>
|
await waitFor(() =>
|
||||||
expect(screen.getByTestId("fleets").innerHTML).not.toBe("[]")
|
expect(screen.getByTestId("fleets").innerHTML).not.toBe("[]")
|
||||||
);
|
);
|
||||||
checkFleetResults("", "false", JSON.stringify(expectedFleetsData));
|
checkFleetsResults("", "false", JSON.stringify(expectedFleetsData));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("getFleet", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
const TestComp = () => {
|
||||||
|
const { busy, error, fleet, getFleet } = useFleetContext();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div data-testid="error">{error}</div>
|
||||||
|
<div data-testid="busy">{busy.toString()}</div>
|
||||||
|
<div data-testid="fleet">{JSON.stringify(fleet)}</div>
|
||||||
|
<button
|
||||||
|
data-testid="getFleet"
|
||||||
|
onClick={() => getFleet("US-WEST")}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
render(
|
||||||
|
<FleetProvider>
|
||||||
|
<TestComp />
|
||||||
|
</FleetProvider>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
cleanup();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("initial state", () => {
|
||||||
|
checkFleetResults("", "false", "{}");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("getFleet", async () => {
|
||||||
|
fireEvent.click(screen.getByTestId("getFleet"));
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByTestId("fleet").innerHTML).not.toBe("{}")
|
||||||
|
);
|
||||||
|
checkFleetResults("", "false", JSON.stringify(expectedFleetData));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -645,17 +691,24 @@ describe("FleetContext", () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const expectedFleetData = {
|
||||||
|
name: "US-WEST",
|
||||||
|
log_level: "info",
|
||||||
|
canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2 },
|
||||||
|
vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
|
||||||
|
}
|
||||||
|
|
||||||
const expectedFleetsData = [
|
const expectedFleetsData = [
|
||||||
{
|
{
|
||||||
name: "US-WEST",
|
name: "US-WEST",
|
||||||
log_level: "info",
|
log_level: "info",
|
||||||
canbus: { enabled: true },
|
canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2 },
|
||||||
vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
|
vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "US-CENTRAL",
|
name: "US-CENTRAL",
|
||||||
log_level: "warn",
|
log_level: "warn",
|
||||||
canbus: { enabled: false },
|
canbus: { enabled: false, data_logger_enabled: false, max_mem_buffer_size: 0, max_disk_buffer_size: 0 },
|
||||||
vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
|
vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -28,6 +28,7 @@ const validateAdd = (vehicle) => {
|
|||||||
|
|
||||||
export const VehicleProvider = ({ children }) => {
|
export const VehicleProvider = ({ children }) => {
|
||||||
const [busy, setBusy] = useState(false);
|
const [busy, setBusy] = useState(false);
|
||||||
|
const [vehicle, setVehicle] = useState({});
|
||||||
const [vehicles, setVehicles] = useState([]);
|
const [vehicles, setVehicles] = useState([]);
|
||||||
const [totalVehicles, setTotalVehicles] = useState(0);
|
const [totalVehicles, setTotalVehicles] = useState(0);
|
||||||
const [models, setModels] = useState([]);
|
const [models, setModels] = useState([]);
|
||||||
@@ -49,11 +50,11 @@ export const VehicleProvider = ({ children }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const addVehicle = async (vehicle, token) => {
|
const addVehicle = async (v, token) => {
|
||||||
try {
|
try {
|
||||||
setBusy(true);
|
setBusy(true);
|
||||||
validateAdd(vehicle);
|
validateAdd(v);
|
||||||
const result = await api.addVehicle(vehicle, token);
|
const result = await api.addVehicle(v, token);
|
||||||
if (result.error) throw new Error(`Add vehicle error. ${result.message}`);
|
if (result.error) throw new Error(`Add vehicle error. ${result.message}`);
|
||||||
return result;
|
return result;
|
||||||
} finally {
|
} finally {
|
||||||
@@ -118,6 +119,21 @@ export const VehicleProvider = ({ children }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getVehicle = async (vin, token) => {
|
||||||
|
try {
|
||||||
|
setBusy(true);
|
||||||
|
validateVIN(vin);
|
||||||
|
|
||||||
|
const result = await api.getVehicle(vin, token);
|
||||||
|
if (result.error) throw new Error(`Get vehicle error. ${result.message}`);
|
||||||
|
|
||||||
|
setVehicle(result);
|
||||||
|
return result;
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const getVehicles = async (search, token) => {
|
const getVehicles = async (search, token) => {
|
||||||
try {
|
try {
|
||||||
setBusy(true);
|
setBusy(true);
|
||||||
@@ -159,23 +175,56 @@ export const VehicleProvider = ({ children }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const updateVehicle = async (vin, v, token) => {
|
||||||
|
try {
|
||||||
|
setBusy(true);
|
||||||
|
validateVIN(vin);
|
||||||
|
validateVehicle(v);
|
||||||
|
|
||||||
|
const result = await api.updateVehicle(vin, v, token);
|
||||||
|
if (result.error)
|
||||||
|
throw new Error(`Update vehicle error. ${result.message}`);
|
||||||
|
return result;
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteVehicle = async (vin, token) => {
|
||||||
|
try {
|
||||||
|
setBusy(true);
|
||||||
|
validateVIN(vin);
|
||||||
|
|
||||||
|
const result = await api.deleteVehicle(vin, token);
|
||||||
|
if (result.error)
|
||||||
|
throw new Error(`Delete vehicle error. ${result.message}`);
|
||||||
|
return result;
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<VehicleContext.Provider
|
<VehicleContext.Provider
|
||||||
value={{
|
value={{
|
||||||
busy,
|
busy,
|
||||||
models,
|
models,
|
||||||
totalVehicles,
|
totalVehicles,
|
||||||
|
vehicle,
|
||||||
vehicles,
|
vehicles,
|
||||||
years,
|
years,
|
||||||
addVehicle,
|
addVehicle,
|
||||||
|
deleteVehicle,
|
||||||
getConnections,
|
getConnections,
|
||||||
getECUs,
|
getECUs,
|
||||||
getLocations,
|
getLocations,
|
||||||
getModels,
|
getModels,
|
||||||
getState,
|
getState,
|
||||||
getYears,
|
getYears,
|
||||||
|
getVehicle,
|
||||||
getVehicles,
|
getVehicles,
|
||||||
sendCommand
|
sendCommand,
|
||||||
|
updateVehicle
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
@@ -183,4 +232,19 @@ export const VehicleProvider = ({ children }) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const validateVehicle = (v) => {
|
||||||
|
if (v == null) {
|
||||||
|
throw new Error("No vehicle data");
|
||||||
|
}
|
||||||
|
|
||||||
|
validateVIN(v.vin);
|
||||||
|
};
|
||||||
|
|
||||||
|
const validateVIN = (vin) => {
|
||||||
|
if (vin == null || vin.length !== 17) {
|
||||||
|
throw new Error("Invalid VIN");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
export const useVehicleContext = () => useContext(VehicleContext);
|
export const useVehicleContext = () => useContext(VehicleContext);
|
||||||
|
|||||||
@@ -10,7 +10,12 @@ import {
|
|||||||
import { VehicleProvider, useVehicleContext } from "./VehicleContext";
|
import { VehicleProvider, useVehicleContext } from "./VehicleContext";
|
||||||
import { StatusProvider, useStatusContext } from "./StatusContext";
|
import { StatusProvider, useStatusContext } from "./StatusContext";
|
||||||
|
|
||||||
const checkVehicleResults = (error, busy, vehicles) => {
|
const checkVehicleResult = (error, busy, vehicle) => {
|
||||||
|
checkBaseResults(error, busy);
|
||||||
|
expect(screen.getByTestId("vehicle").innerHTML).toEqual(vehicle);
|
||||||
|
}
|
||||||
|
|
||||||
|
const checkVehiclesResult = (error, busy, vehicles) => {
|
||||||
checkBaseResults(error, busy);
|
checkBaseResults(error, busy);
|
||||||
expect(screen.getByTestId("vehicles").innerHTML).toEqual(vehicles);
|
expect(screen.getByTestId("vehicles").innerHTML).toEqual(vehicles);
|
||||||
};
|
};
|
||||||
@@ -50,7 +55,7 @@ describe("VehicleContext", () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it("Initial state", () => {
|
it("Initial state", () => {
|
||||||
checkVehicleResults("", "false", "[]");
|
checkVehiclesResult("", "false", "[]");
|
||||||
});
|
});
|
||||||
|
|
||||||
it("getVehicles", async () => {
|
it("getVehicles", async () => {
|
||||||
@@ -58,7 +63,48 @@ describe("VehicleContext", () => {
|
|||||||
await waitFor(() =>
|
await waitFor(() =>
|
||||||
expect(screen.getByTestId("vehicles").innerHTML).not.toBe("[]")
|
expect(screen.getByTestId("vehicles").innerHTML).not.toBe("[]")
|
||||||
);
|
);
|
||||||
checkVehicleResults("", "false", JSON.stringify(expectedVehicleData));
|
checkVehiclesResult("", "false", JSON.stringify(expectedVehiclesData));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("getVehicle", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
const TestComp = () => {
|
||||||
|
const { busy, error, vehicle, getVehicle } = useVehicleContext();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div data-testid="error">{error}</div>
|
||||||
|
<div data-testid="busy">{busy.toString()}</div>
|
||||||
|
<div data-testid="vehicle">{JSON.stringify(vehicle)}</div>
|
||||||
|
<button
|
||||||
|
data-testid="getVehicle"
|
||||||
|
onClick={() => getVehicle("3C4PDCBG0ET127145")}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
render(
|
||||||
|
<VehicleProvider>
|
||||||
|
<TestComp />
|
||||||
|
</VehicleProvider>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
cleanup();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("Initial state", () => {
|
||||||
|
checkVehicleResult("", "false", "{}");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("getVehicle", async () => {
|
||||||
|
fireEvent.click(screen.getByTestId("getVehicle"));
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByTestId("vehicle").innerHTML).not.toBe("{}")
|
||||||
|
);
|
||||||
|
checkVehicleResult("", "false", JSON.stringify(expectedVehicleData));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -131,15 +177,168 @@ describe("VehicleContext", () => {
|
|||||||
checkBaseResults("", "false");
|
checkBaseResults("", "false");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("updateVehicle", () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
const TestComp = () => {
|
||||||
|
const { busy, updateVehicle } = useVehicleContext();
|
||||||
|
const { message, setMessage } = useStatusContext();
|
||||||
|
const update = async (data) => {
|
||||||
|
try {
|
||||||
|
await updateVehicle("3C4PDCBG0ET127145", data);
|
||||||
|
} catch (e) {
|
||||||
|
setMessage(e.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div data-testid="error">{message}</div>
|
||||||
|
<div data-testid="busy">{busy.toString()}</div>
|
||||||
|
<button data-testid="updateVehicleNull" onClick={() => update(null)} />
|
||||||
|
<button data-testid="updateVehicleNoVIN" onClick={() => update({})} />
|
||||||
|
<button
|
||||||
|
data-testid="updateVehicle"
|
||||||
|
onClick={() =>
|
||||||
|
update({ vin: "3C4PDCBG0ET127145", log_level: "warn", canbus: { enabled: false } })
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
render(
|
||||||
|
<StatusProvider>
|
||||||
|
<VehicleProvider>
|
||||||
|
<TestComp />
|
||||||
|
</VehicleProvider>
|
||||||
|
</StatusProvider>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
cleanup();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("initial state", () => {
|
||||||
|
checkBaseResults("", "false");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("updateVehicleNull", async () => {
|
||||||
|
fireEvent.click(screen.getByTestId("updateVehicleNull"));
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
|
||||||
|
);
|
||||||
|
checkBaseResults("No vehicle data", "false");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("updateVehicleNoVIN", async () => {
|
||||||
|
fireEvent.click(screen.getByTestId("updateVehicleNoVIN"));
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
|
||||||
|
);
|
||||||
|
checkBaseResults("Invalid VIN", "false");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("updateVehicle", async () => {
|
||||||
|
fireEvent.click(screen.getByTestId("updateVehicle"));
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
|
||||||
|
);
|
||||||
|
checkBaseResults("", "false");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("deleteVehicle", () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
const TestComp = () => {
|
||||||
|
const { busy, deleteVehicle } = useVehicleContext();
|
||||||
|
const { message, setMessage } = useStatusContext();
|
||||||
|
const deleteV = async (name) => {
|
||||||
|
try {
|
||||||
|
await deleteVehicle(name);
|
||||||
|
} catch (e) {
|
||||||
|
setMessage(e.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div data-testid="error">{message}</div>
|
||||||
|
<div data-testid="busy">{busy.toString()}</div>
|
||||||
|
<button data-testid="deleteVehicleNull" onClick={() => deleteV(null)} />
|
||||||
|
<button data-testid="deleteVehicleNonexistent" onClick={() => deleteV("11111111111111111")} />
|
||||||
|
<button
|
||||||
|
data-testid="deleteVehicle"
|
||||||
|
onClick={() =>
|
||||||
|
deleteV("3C4PDCBG0ET127145")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
render(
|
||||||
|
<StatusProvider>
|
||||||
|
<VehicleProvider>
|
||||||
|
<TestComp />
|
||||||
|
</VehicleProvider>
|
||||||
|
</StatusProvider>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
cleanup();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("initial state", () => {
|
||||||
|
checkBaseResults("", "false");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("deleteVehicleNull", async () => {
|
||||||
|
fireEvent.click(screen.getByTestId("deleteVehicleNull"));
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
|
||||||
|
);
|
||||||
|
checkBaseResults("Invalid VIN", "false");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("deleteVehicleNonexistent", async () => {
|
||||||
|
fireEvent.click(screen.getByTestId("deleteVehicleNonexistent"));
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
|
||||||
|
);
|
||||||
|
checkBaseResults("", "false");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("deleteVehicle", async () => {
|
||||||
|
fireEvent.click(screen.getByTestId("deleteVehicle"));
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
|
||||||
|
);
|
||||||
|
checkBaseResults("", "false");
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const expectedVehicleData = [
|
const expectedVehicleData = {
|
||||||
|
vin: "3C4PDCBG0ET127145",
|
||||||
|
year: 2021,
|
||||||
|
model: "Ocean",
|
||||||
|
trim: "Basic",
|
||||||
|
ecu_list: "ECUA 2.0.0, ECUB 2.1.1",
|
||||||
|
log_level: "info",
|
||||||
|
canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2 },
|
||||||
|
connected: true,
|
||||||
|
}
|
||||||
|
|
||||||
|
const expectedVehiclesData = [
|
||||||
{
|
{
|
||||||
vin: "3C4PDCBG0ET127145",
|
vin: "3C4PDCBG0ET127145",
|
||||||
year: 2021,
|
year: 2021,
|
||||||
model: "Ocean",
|
model: "Ocean",
|
||||||
trim: "Basic",
|
trim: "Basic",
|
||||||
ecu_list: "ECUA 2.0.0, ECUB 2.1.1",
|
ecu_list: "ECUA 2.0.0, ECUB 2.1.1",
|
||||||
|
log_level: "info",
|
||||||
|
canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2 },
|
||||||
connected: true,
|
connected: true,
|
||||||
},
|
},
|
||||||
{ vin: "1G1FP87S3GN100062", connected: true },
|
{ vin: "1G1FP87S3GN100062", connected: true },
|
||||||
|
|||||||
@@ -1,15 +1,21 @@
|
|||||||
let busy = false;
|
let busy = false;
|
||||||
|
let fleet = {
|
||||||
|
name: "US-WEST",
|
||||||
|
log_level: "info",
|
||||||
|
canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2 },
|
||||||
|
vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"],
|
||||||
|
}
|
||||||
let fleets = [
|
let fleets = [
|
||||||
{
|
{
|
||||||
name: "US-WEST",
|
name: "US-WEST",
|
||||||
log_level: "info",
|
log_level: "info",
|
||||||
canbus: { enabled: true },
|
canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2 },
|
||||||
vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
|
vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "US-CENTRAL",
|
name: "US-CENTRAL",
|
||||||
log_level: "warn",
|
log_level: "warn",
|
||||||
canbus: { enabled: false },
|
canbus: { enabled: false, data_logger_enabled: false, max_mem_buffer_size: 0, max_disk_buffer_size: 0 },
|
||||||
vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
|
vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -45,9 +51,11 @@ export const FleetProvider = ({ children }) => {
|
|||||||
export const useFleetContext = () => ({
|
export const useFleetContext = () => ({
|
||||||
busy,
|
busy,
|
||||||
|
|
||||||
|
fleet,
|
||||||
fleets,
|
fleets,
|
||||||
totalFleets,
|
totalFleets,
|
||||||
addFleet: jest.fn(),
|
addFleet: jest.fn(),
|
||||||
|
getFleet: jest.fn(),
|
||||||
getFleets: jest.fn(),
|
getFleets: jest.fn(),
|
||||||
updateFleet: jest.fn(),
|
updateFleet: jest.fn(),
|
||||||
deleteFleet: jest.fn(),
|
deleteFleet: jest.fn(),
|
||||||
|
|||||||
@@ -1,6 +1,15 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
let busy = false;
|
let busy = false;
|
||||||
|
let vehicle = {
|
||||||
|
vin: "3C4PDCBG0ET127145",
|
||||||
|
year: 2021,
|
||||||
|
model: "Ocean",
|
||||||
|
trim: "Basic",
|
||||||
|
ecu_list: "ECUA 2.0.0, ECUB 2.1.1",
|
||||||
|
log_level: "info",
|
||||||
|
canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2 },
|
||||||
|
};
|
||||||
let vehicles = [];
|
let vehicles = [];
|
||||||
let models = ["Ocean", "PEAR"];
|
let models = ["Ocean", "PEAR"];
|
||||||
let years = [2023, 2024];
|
let years = [2023, 2024];
|
||||||
@@ -15,10 +24,11 @@ export const useVehicleContext = () => ({
|
|||||||
busy,
|
busy,
|
||||||
models,
|
models,
|
||||||
totalVehicles,
|
totalVehicles,
|
||||||
|
vehicle,
|
||||||
vehicles,
|
vehicles,
|
||||||
years,
|
years,
|
||||||
addVehicle: jest.fn(),
|
addVehicle: jest.fn(),
|
||||||
getConnections: jest.fn((vins, token) => {
|
getConnections: jest.fn((vins, _token) => {
|
||||||
const result = {};
|
const result = {};
|
||||||
|
|
||||||
vins.forEach((vin) => {
|
vins.forEach((vin) => {
|
||||||
@@ -61,8 +71,9 @@ export const useVehicleContext = () => ({
|
|||||||
getYears: jest.fn(() => {
|
getYears: jest.fn(() => {
|
||||||
years = [2023, 2024];
|
years = [2023, 2024];
|
||||||
}),
|
}),
|
||||||
|
getVehicle: jest.fn(),
|
||||||
getVehicles: jest.fn(() => vehicles),
|
getVehicles: jest.fn(() => vehicles),
|
||||||
sendCommand: jest.fn((vins, command, parameters, token) => ({
|
sendCommand: jest.fn((vins, command, parameters, _token) => ({
|
||||||
vins,
|
vins,
|
||||||
command,
|
command,
|
||||||
parameters,
|
parameters,
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ const tableColumns = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
const CarSelectionTable = (props) => {
|
const CarSelectionTable = (props) => {
|
||||||
const { token, classes, search, selected, onSelect, onSelectAll } = props;
|
const { token, classes, search, multiSelect, selected, onSelect, onSelectAll } = props;
|
||||||
const [pageSize, setPageSize] = useState(10);
|
const [pageSize, setPageSize] = useState(10);
|
||||||
const [pageIndex, setPageIndex] = useState(0);
|
const [pageIndex, setPageIndex] = useState(0);
|
||||||
const [orderBy, setOrderBy] = useState("vin");
|
const [orderBy, setOrderBy] = useState("vin");
|
||||||
@@ -56,7 +56,7 @@ const CarSelectionTable = (props) => {
|
|||||||
const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
|
const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
|
||||||
const { setMessage } = useStatusContext();
|
const { setMessage } = useStatusContext();
|
||||||
const { search: searchTerm } = search;
|
const { search: searchTerm } = search;
|
||||||
const sortHandler = (event, property) => {
|
const sortHandler = (_event, property) => {
|
||||||
if (property === orderBy) {
|
if (property === orderBy) {
|
||||||
if (order === "asc") {
|
if (order === "asc") {
|
||||||
setOrder("desc");
|
setOrder("desc");
|
||||||
@@ -69,7 +69,7 @@ const CarSelectionTable = (props) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleChangePageIndex = (event, newIndex) => {
|
const handleChangePageIndex = (_event, newIndex) => {
|
||||||
setPageIndex(newIndex);
|
setPageIndex(newIndex);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -123,22 +123,22 @@ const CarSelectionTable = (props) => {
|
|||||||
order={order}
|
order={order}
|
||||||
columnData={tableColumns}
|
columnData={tableColumns}
|
||||||
onSortRequest={sortHandler}
|
onSortRequest={sortHandler}
|
||||||
multiSelect={true}
|
multiSelect={multiSelect}
|
||||||
onSelectAll={handleSelectAll}
|
onSelectAll={handleSelectAll}
|
||||||
selectCount={selected.length}
|
selectCount={selected ? selected.length : 0}
|
||||||
rowCount={vehicles.length}
|
rowCount={vehicles.length}
|
||||||
/>
|
/>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{vehicles.map((row) => {
|
{vehicles.map((row) => {
|
||||||
const isSelected = selected.indexOf(row.vin) !== -1;
|
const isSelected = selected ? selected.indexOf(row.vin) !== -1 : false;
|
||||||
return (
|
return (
|
||||||
<TableRow key={row.vin}>
|
<TableRow key={row.vin}>
|
||||||
<TableCell padding="checkbox">
|
{multiSelect && (<TableCell padding="checkbox">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={isSelected}
|
checked={isSelected}
|
||||||
onChange={(event) => handleSelect(event, row.vin)}
|
onChange={(event) => handleSelect(event, row.vin)}
|
||||||
/>
|
/>
|
||||||
</TableCell>
|
</TableCell>)}
|
||||||
<TableCell align="center">
|
<TableCell align="center">
|
||||||
<ConnectedIcon
|
<ConnectedIcon
|
||||||
connected={row.connected}
|
connected={row.connected}
|
||||||
@@ -195,9 +195,10 @@ CarSelectionTable.propTypes = {
|
|||||||
token: PropTypes.string.isRequired,
|
token: PropTypes.string.isRequired,
|
||||||
classes: PropTypes.object.isRequired,
|
classes: PropTypes.object.isRequired,
|
||||||
search: PropTypes.object.isRequired,
|
search: PropTypes.object.isRequired,
|
||||||
selected: PropTypes.array.isRequired,
|
multiSelect: PropTypes.bool.isRequired,
|
||||||
onSelect: PropTypes.func.isRequired,
|
selected: PropTypes.array,
|
||||||
onSelectAll: PropTypes.func.isRequired,
|
onSelect: PropTypes.func,
|
||||||
|
onSelectAll: PropTypes.func,
|
||||||
connectionStatus: PropTypes.bool,
|
connectionStatus: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -68,62 +68,467 @@ exports[`FleetAddForm Render 1`] = `
|
|||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root"
|
||||||
|
id="demo-row-radio-buttons-group-label"
|
||||||
|
>
|
||||||
|
Log Level
|
||||||
|
</label>
|
||||||
<div
|
<div
|
||||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
aria-labelledby="demo-row-radio-buttons-group-label"
|
||||||
|
class="MuiFormGroup-root MuiFormGroup-row"
|
||||||
|
margin="normal"
|
||||||
|
role="radiogroup"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
|
class="MuiFormControlLabel-root"
|
||||||
data-shrink="true"
|
|
||||||
for="canbus"
|
|
||||||
id="canbus-label"
|
|
||||||
>
|
>
|
||||||
CANBus Enabled
|
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-disabled="false"
|
||||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
>
|
>
|
||||||
|
<span
|
||||||
*
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="trace"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Trace
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="debug"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Debug
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="info"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Info
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="warn"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Warn
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="error"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Error
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="critical"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Critical
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root"
|
||||||
|
id="demo-row-radio-buttons-group-label"
|
||||||
|
>
|
||||||
|
CAN Bus
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiFormGroup-root"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
data-indeterminate="false"
|
||||||
|
type="checkbox"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
CAN Bus Enabled
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||||
>
|
>
|
||||||
<input
|
<label
|
||||||
aria-invalid="false"
|
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
|
||||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
data-shrink="true"
|
||||||
id="canbus"
|
for="max_mem_buffer_size"
|
||||||
maxlength="255"
|
id="max_mem_buffer_size-label"
|
||||||
name="canbus"
|
|
||||||
required=""
|
|
||||||
type="text"
|
|
||||||
value="true"
|
|
||||||
/>
|
|
||||||
<fieldset
|
|
||||||
aria-hidden="true"
|
|
||||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
|
||||||
>
|
>
|
||||||
<legend
|
Max Memory Buffer Size (0 uses default size)
|
||||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
>
|
>
|
||||||
<span>
|
|
||||||
CANBus Enabled
|
*
|
||||||
*
|
</span>
|
||||||
</span>
|
</label>
|
||||||
</legend>
|
<div
|
||||||
</fieldset>
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
id="max_mem_buffer_size"
|
||||||
|
maxlength="12"
|
||||||
|
name="max_mem_buffer_size"
|
||||||
|
required=""
|
||||||
|
type="number"
|
||||||
|
value="0"
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Max Memory Buffer Size (0 uses default size)
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
data-indeterminate="false"
|
||||||
|
type="checkbox"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Data Logger Enabled
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
|
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined Mui-disabled Mui-disabled MuiFormLabel-filled Mui-required Mui-required"
|
||||||
data-shrink="true"
|
data-shrink="true"
|
||||||
for="log-level"
|
for="max_disk_buffer_size"
|
||||||
id="log-level-label"
|
id="max_disk_buffer_size-label"
|
||||||
>
|
>
|
||||||
Log Level (e.g. "trace", "debug", "info", "warn", "error", "critical")
|
Max Disk Buffer Size (0 uses default size)
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
@@ -133,17 +538,18 @@ exports[`FleetAddForm Render 1`] = `
|
|||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
aria-invalid="false"
|
aria-invalid="false"
|
||||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
|
||||||
id="log-level"
|
disabled=""
|
||||||
maxlength="255"
|
id="max_disk_buffer_size"
|
||||||
name="log-level"
|
maxlength="12"
|
||||||
|
name="max_disk_buffer_size"
|
||||||
required=""
|
required=""
|
||||||
type="text"
|
type="number"
|
||||||
value="error"
|
value="0"
|
||||||
/>
|
/>
|
||||||
<fieldset
|
<fieldset
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
@@ -153,7 +559,7 @@ exports[`FleetAddForm Render 1`] = `
|
|||||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
Log Level (e.g. "trace", "debug", "info", "warn", "error", "critical")
|
Max Disk Buffer Size (0 uses default size)
|
||||||
*
|
*
|
||||||
</span>
|
</span>
|
||||||
</legend>
|
</legend>
|
||||||
|
|||||||
@@ -1,6 +1,15 @@
|
|||||||
import React, { useEffect, useRef, useState } from "react";
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
import { Redirect } from "react-router";
|
import { Redirect } from "react-router";
|
||||||
import { Button, TextField } from "@material-ui/core";
|
import {
|
||||||
|
Button,
|
||||||
|
Checkbox,
|
||||||
|
FormControlLabel,
|
||||||
|
FormGroup,
|
||||||
|
FormLabel,
|
||||||
|
Radio,
|
||||||
|
RadioGroup,
|
||||||
|
TextField
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
import useStyles from "../../useStyles";
|
import useStyles from "../../useStyles";
|
||||||
import {
|
import {
|
||||||
@@ -20,11 +29,15 @@ const MainForm = () => {
|
|||||||
},
|
},
|
||||||
} = useUserContext();
|
} = useUserContext();
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const nameEl = useRef(null);
|
|
||||||
const canbusEnabledEl = useRef(null);
|
|
||||||
const logLevelEl = useRef(null);
|
|
||||||
const [redirect, setRedirect] = useState(null);
|
const [redirect, setRedirect] = useState(null);
|
||||||
|
|
||||||
|
const nameEl = 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(() => {
|
useEffect(() => {
|
||||||
setTitle("Add Fleet");
|
setTitle("Add Fleet");
|
||||||
setSitePath([
|
setSitePath([
|
||||||
@@ -39,16 +52,42 @@ const MainForm = () => {
|
|||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
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) => {
|
const onSubmit = async (event) => {
|
||||||
try {
|
try {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
const formData = {
|
const formData = {
|
||||||
name: nameEl.current.value,
|
name: nameEl.current.value,
|
||||||
canbus: { enabled: canbusEnabledEl.current.value === "true" },
|
log_level: selectedLogLevel,
|
||||||
log_level: logLevelEl.current.value,
|
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 addFleet(formData, token);
|
const result = await addFleet(formData, token);
|
||||||
|
if (!result || result.error) return;
|
||||||
|
|
||||||
setMessage(`Added ${result.name}`);
|
setMessage(`Added ${result.name}`);
|
||||||
setRedirect(`/fleets`);
|
setRedirect(`/fleets`);
|
||||||
@@ -78,33 +117,69 @@ const MainForm = () => {
|
|||||||
fullWidth
|
fullWidth
|
||||||
inputRef={nameEl}
|
inputRef={nameEl}
|
||||||
/>
|
/>
|
||||||
|
<FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
|
||||||
|
<RadioGroup
|
||||||
|
row
|
||||||
|
aria-labelledby="demo-row-radio-buttons-group-label"
|
||||||
|
name="log-level-group"
|
||||||
|
value={selectedLogLevel}
|
||||||
|
onChange={onLogLevelChange}
|
||||||
|
margin="normal"
|
||||||
|
>
|
||||||
|
<FormControlLabel value="trace" control={<Radio />} label="Trace" />
|
||||||
|
<FormControlLabel value="debug" control={<Radio />} label="Debug" />
|
||||||
|
<FormControlLabel value="info" control={<Radio />} label="Info" />
|
||||||
|
<FormControlLabel value="warn" control={<Radio />} label="Warn" />
|
||||||
|
<FormControlLabel value="error" control={<Radio />} label="Error" />
|
||||||
|
<FormControlLabel value="critical" control={<Radio />} label="Critical" />
|
||||||
|
</RadioGroup>
|
||||||
|
<FormLabel id="demo-row-radio-buttons-group-label">CAN Bus</FormLabel>
|
||||||
|
<FormGroup>
|
||||||
|
<FormControlLabel control={
|
||||||
|
<Checkbox
|
||||||
|
checked={canbusEnabled}
|
||||||
|
onChange={onCANBusChange}
|
||||||
|
/>
|
||||||
|
} label="CAN Bus Enabled" />
|
||||||
|
<TextField
|
||||||
|
id="max_mem_buffer_size"
|
||||||
|
name="max_mem_buffer_size"
|
||||||
|
label='Max Memory Buffer Size (0 uses default size)'
|
||||||
|
value={maxMemBufferSize}
|
||||||
|
onChange={onMaxMemBufferSizeChange}
|
||||||
|
variant="outlined"
|
||||||
|
margin="normal"
|
||||||
|
inputProps={{
|
||||||
|
maxLength: "12",
|
||||||
|
}}
|
||||||
|
type="number"
|
||||||
|
disabled={!canbusEnabled}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
<FormControlLabel control={
|
||||||
|
<Checkbox
|
||||||
|
checked={dataLoggerEnabled}
|
||||||
|
onChange={onDataLoggerChange}
|
||||||
|
disabled={!canbusEnabled}
|
||||||
|
/>
|
||||||
|
} label="Data Logger Enabled" />
|
||||||
|
</FormGroup>
|
||||||
<TextField
|
<TextField
|
||||||
id="canbus"
|
id="max_disk_buffer_size"
|
||||||
name="canbus"
|
name="max_disk_buffer_size"
|
||||||
label='CANBus Enabled'
|
label='Max Disk Buffer Size (0 uses default size)'
|
||||||
defaultValue="true"
|
value={maxDiskBufferSize}
|
||||||
|
onChange={onMaxDiskBufferSizeChange}
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
margin="normal"
|
margin="normal"
|
||||||
inputProps={{
|
inputProps={{
|
||||||
maxLength: "255",
|
maxLength: "12",
|
||||||
}}
|
}}
|
||||||
|
type="number"
|
||||||
|
disabled={!dataLoggerEnabled}
|
||||||
required
|
required
|
||||||
fullWidth
|
fullWidth
|
||||||
inputRef={canbusEnabledEl}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
id="log-level"
|
|
||||||
name="log-level"
|
|
||||||
label='Log Level (e.g. "trace", "debug", "info", "warn", "error", "critical")'
|
|
||||||
defaultValue="error"
|
|
||||||
variant="outlined"
|
|
||||||
margin="normal"
|
|
||||||
inputProps={{
|
|
||||||
maxLength: "255",
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
fullWidth
|
|
||||||
inputRef={logLevelEl}
|
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ const renderFleetAdd = async () => {
|
|||||||
</StatusProvider>
|
</StatusProvider>
|
||||||
</FleetProvider>
|
</FleetProvider>
|
||||||
);
|
);
|
||||||
await waitFor(() => { });
|
await waitFor(() => { /* render */ });
|
||||||
return container;
|
return container;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ const renderCANFitlersTab = async () => {
|
|||||||
<CANFiltersTab name="US-TEST" />
|
<CANFiltersTab name="US-TEST" />
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
);
|
);
|
||||||
await waitFor(() => { });
|
await waitFor(() => { /* render */ });
|
||||||
return container;
|
return container;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,135 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`FleetDetailsTab Render 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-fleetprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-statusprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-userprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-fleetprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Name
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Vehicles
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
3
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Log Level
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
info
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<b>
|
||||||
|
CANBus
|
||||||
|
</b>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Enabled
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
true
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Max Memory Buffer Size
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
1
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Enabled
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
true
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Max Disk Buffer Size
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
2
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Filters
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
0
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class=""
|
||||||
|
href="/fleet-update?name=undefined"
|
||||||
|
style="margin: 5px;"
|
||||||
|
title="Update \\"undefined\\""
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
aria-label="Update \\"undefined\\""
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class=""
|
||||||
|
href="/"
|
||||||
|
title="Delete \\"undefined\\""
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
aria-label="Delete \\"undefined\\""
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
96
src/components/Fleets/Status/Details/index.jsx
Normal file
96
src/components/Fleets/Status/Details/index.jsx
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { Redirect } from "react-router";
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
Grid,
|
||||||
|
Tooltip,
|
||||||
|
} from "@material-ui/core";
|
||||||
|
import EditIcon from "@material-ui/icons/Edit"
|
||||||
|
import DeleteIcon from "@material-ui/icons/Delete";
|
||||||
|
import clsx from "clsx";
|
||||||
|
|
||||||
|
import { useUserContext } from "../../../Contexts/UserContext"
|
||||||
|
import { useStatusContext } from "../../../Contexts/StatusContext";
|
||||||
|
import { FleetProvider, useFleetContext } from "../../../Contexts/FleetContext"
|
||||||
|
import useStyles from "../../../useStyles";
|
||||||
|
import { logger } from "../../../../services/monitoring";
|
||||||
|
|
||||||
|
const MainForm = ({ name }) => {
|
||||||
|
const classes = useStyles();
|
||||||
|
const { setMessage } = useStatusContext();
|
||||||
|
const { fleet, getFleet, deleteFleet } = useFleetContext();
|
||||||
|
const [redirect, setRedirect] = useState(null);
|
||||||
|
const { token: { idToken: { jwtToken: token } } } = useUserContext();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
try {
|
||||||
|
if (!name || !token) return;
|
||||||
|
await getFleet(name, token);
|
||||||
|
} catch (e) {
|
||||||
|
setMessage(e.message);
|
||||||
|
logger.warn(e.stack);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [token]);
|
||||||
|
|
||||||
|
const onDelete = async () => {
|
||||||
|
try {
|
||||||
|
await deleteFleet(name, token);
|
||||||
|
setMessage(`Deleted ${name}`)
|
||||||
|
setRedirect(`/fleets`);
|
||||||
|
} catch (e) {
|
||||||
|
setMessage(e.message);
|
||||||
|
logger.warn(e.stack);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (redirect && redirect.length > 0) {
|
||||||
|
return <Redirect to={redirect} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||||
|
<Grid container className={classes.root} spacing={2}>
|
||||||
|
<Grid item md={12} className={classes.textCenterAlign}>
|
||||||
|
<p><b>Name</b>: {name}</p>
|
||||||
|
<p><b>Vehicles</b>: {fleet.vehicles ? fleet.vehicles.length : 0}</p>
|
||||||
|
{fleet.log_level != null && (
|
||||||
|
<p><b>Log Level</b>: {fleet.log_level}</p>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
{fleet.canbus && (
|
||||||
|
<Grid item md={12} className={classes.textCenterAlign}>
|
||||||
|
<b>CANBus</b>
|
||||||
|
<p><b>Enabled</b>: {fleet.canbus.enabled.toString()}</p>
|
||||||
|
<p><b>Max Memory Buffer Size</b>: {fleet.canbus.max_mem_buffer_size ?? "Default"}</p>
|
||||||
|
<p><b>Enabled</b>: {fleet.canbus.data_logger_enabled.toString()}</p>
|
||||||
|
<p><b>Max Disk Buffer Size</b>: {fleet.canbus.max_disk_buffer_size ?? "Default"}</p>
|
||||||
|
<p><b>Filters</b>: {fleet.canbus.filters ? fleet.canbus.filters.length() : 0}</p>
|
||||||
|
</Grid>
|
||||||
|
)}
|
||||||
|
<Grid item md={12} className={classes.textCenterAlign}>
|
||||||
|
<Tooltip key={`update-${name}`} title={`Update "${name}"`}>
|
||||||
|
<Link to={`/fleet-update?name=${name}`} style={{ margin: 5 }}>
|
||||||
|
<EditIcon aria-label={`Update "${name}"`} />
|
||||||
|
</Link>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip key={`delete-${name}`} title={`Delete "${name}"`}>
|
||||||
|
<Link to="#" onClick={onDelete}>
|
||||||
|
<DeleteIcon aria-label={`Delete "${name}"`} />
|
||||||
|
</Link>
|
||||||
|
</Tooltip>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</div >
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const FleetDetails = (props) => (
|
||||||
|
<FleetProvider>
|
||||||
|
<MainForm {...props} />
|
||||||
|
</FleetProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default FleetDetails;
|
||||||
36
src/components/Fleets/Status/Details/index.test.jsx
Normal file
36
src/components/Fleets/Status/Details/index.test.jsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
jest.mock("../../../Contexts/FleetContext");
|
||||||
|
jest.mock("../../../Contexts/StatusContext");
|
||||||
|
jest.mock("../../../Contexts/UserContext");
|
||||||
|
|
||||||
|
import { render, waitFor } from "@testing-library/react";
|
||||||
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
|
||||||
|
import { FleetProvider } from "../../../Contexts/FleetContext";
|
||||||
|
import { StatusProvider } from "../../../Contexts/StatusContext";
|
||||||
|
import { UserProvider, setToken } from "../../../Contexts/UserContext";
|
||||||
|
import { TEST_AUTH_OBJECT } from "../../../../utils/testing";
|
||||||
|
import MainForm from "./index"
|
||||||
|
|
||||||
|
const renderFleetDetailsTab = async () => {
|
||||||
|
const { container } = render(
|
||||||
|
<FleetProvider>
|
||||||
|
<StatusProvider>
|
||||||
|
<UserProvider>
|
||||||
|
<BrowserRouter>
|
||||||
|
<MainForm />
|
||||||
|
</BrowserRouter>
|
||||||
|
</UserProvider>
|
||||||
|
</StatusProvider>
|
||||||
|
</FleetProvider>
|
||||||
|
);
|
||||||
|
await waitFor(() => { /* render */ });
|
||||||
|
return container;
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("FleetDetailsTab", () => {
|
||||||
|
it("Render", async () => {
|
||||||
|
setToken(TEST_AUTH_OBJECT);
|
||||||
|
const container = await renderFleetDetailsTab();
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
21
src/components/Fleets/Status/DetailsTab.jsx
Normal file
21
src/components/Fleets/Status/DetailsTab.jsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useParams } from "react-router";
|
||||||
|
import clsx from "clsx";
|
||||||
|
import { Typography } from "@material-ui/core";
|
||||||
|
|
||||||
|
import FleetDetails from "./Details";
|
||||||
|
import useStyles from "../../useStyles";
|
||||||
|
|
||||||
|
const FleetDetailsTab = () => {
|
||||||
|
const { name } = useParams();
|
||||||
|
const classes = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||||
|
<Typography variant="h6">Fleet Details</Typography>
|
||||||
|
<FleetDetails name={name} classes={classes} />
|
||||||
|
</div >
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FleetDetailsTab;
|
||||||
41
src/components/Fleets/Status/DetailsTab.test.jsx
Normal file
41
src/components/Fleets/Status/DetailsTab.test.jsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
jest.mock("../../Contexts/FleetContext");
|
||||||
|
jest.mock("../../Contexts/StatusContext");
|
||||||
|
jest.mock("../../Contexts/UserContext");
|
||||||
|
jest.mock('@material-ui/core/utils/unstable_useId', () =>
|
||||||
|
jest.fn().mockReturnValue('mui-test-id'),
|
||||||
|
);
|
||||||
|
|
||||||
|
import { render, waitFor } from "@testing-library/react";
|
||||||
|
import { MemoryRouter, Route } from "react-router-dom";
|
||||||
|
|
||||||
|
import { FleetProvider } from "../../Contexts/FleetContext";
|
||||||
|
import { StatusProvider } from "../../Contexts/StatusContext";
|
||||||
|
import { UserProvider, setToken } from "../../Contexts/UserContext";
|
||||||
|
import { TEST_AUTH_OBJECT } from "../../../utils/testing";
|
||||||
|
import MainForm from "./DetailsTab"
|
||||||
|
|
||||||
|
const renderDetailsTab = async () => {
|
||||||
|
const { container } = render(
|
||||||
|
<FleetProvider>
|
||||||
|
<StatusProvider>
|
||||||
|
<UserProvider>
|
||||||
|
<MemoryRouter initialEntries={['/testroute/US-TEST']}>
|
||||||
|
<Route path="/testroute/:name">
|
||||||
|
<MainForm name="US-TEST" />
|
||||||
|
</Route>
|
||||||
|
</MemoryRouter >
|
||||||
|
</UserProvider>
|
||||||
|
</StatusProvider>
|
||||||
|
</FleetProvider>
|
||||||
|
);
|
||||||
|
await waitFor(() => { /* render */ });
|
||||||
|
return container;
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("DetailsTab", () => {
|
||||||
|
it("Render", async () => {
|
||||||
|
setToken(TEST_AUTH_OBJECT);
|
||||||
|
const container = await renderDetailsTab();
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -23,7 +23,7 @@ const renderFleetVehicleAdd = async () => {
|
|||||||
</StatusProvider>
|
</StatusProvider>
|
||||||
</FleetProvider>
|
</FleetProvider>
|
||||||
);
|
);
|
||||||
await waitFor(() => { });
|
await waitFor(() => { /* render */ });
|
||||||
return container;
|
return container;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ const renderFleetVehiclesTable = async () => {
|
|||||||
</StatusProvider>
|
</StatusProvider>
|
||||||
</FleetProvider>
|
</FleetProvider>
|
||||||
);
|
);
|
||||||
await waitFor(() => { });
|
await waitFor(() => { /* render */ });
|
||||||
return container;
|
return container;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ const renderVehiclesTab = async () => {
|
|||||||
<VehiclesTab name="US-TEST" />
|
<VehiclesTab name="US-TEST" />
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
);
|
);
|
||||||
await waitFor(() => { });
|
await waitFor(() => { /* render */ });
|
||||||
return container;
|
return container;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,145 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`DetailsTab Render 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-fleetprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-statusprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-userprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||||
|
>
|
||||||
|
<h6
|
||||||
|
class="MuiTypography-root MuiTypography-h6"
|
||||||
|
>
|
||||||
|
Fleet Details
|
||||||
|
</h6>
|
||||||
|
<div
|
||||||
|
data-testid="mocked-fleetprovider"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Name
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
US-TEST
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Vehicles
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
3
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Log Level
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
info
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<b>
|
||||||
|
CANBus
|
||||||
|
</b>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Enabled
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
true
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Max Memory Buffer Size
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
1
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Enabled
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
true
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Max Disk Buffer Size
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
2
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Filters
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
0
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class=""
|
||||||
|
href="/fleet-update?name=US-TEST"
|
||||||
|
style="margin: 5px;"
|
||||||
|
title="Update \\"US-TEST\\""
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
aria-label="Update \\"US-TEST\\""
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class=""
|
||||||
|
href="/testroute/US-TEST"
|
||||||
|
title="Delete \\"US-TEST\\""
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
aria-label="Delete \\"US-TEST\\""
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@@ -41,7 +41,7 @@ exports[`FleetStatus Render 1`] = `
|
|||||||
<span
|
<span
|
||||||
class="MuiTab-wrapper"
|
class="MuiTab-wrapper"
|
||||||
>
|
>
|
||||||
Vehicles
|
Details
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="MuiTouchRipple-root"
|
class="MuiTouchRipple-root"
|
||||||
@@ -55,6 +55,24 @@ exports[`FleetStatus Render 1`] = `
|
|||||||
role="tab"
|
role="tab"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
type="button"
|
type="button"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiTab-wrapper"
|
||||||
|
>
|
||||||
|
Vehicles
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
aria-controls="tabpanel-2"
|
||||||
|
aria-selected="false"
|
||||||
|
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
|
||||||
|
id="tab-2"
|
||||||
|
role="tab"
|
||||||
|
tabindex="-1"
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="MuiTab-wrapper"
|
class="MuiTab-wrapper"
|
||||||
@@ -87,7 +105,7 @@ exports[`FleetStatus Render 1`] = `
|
|||||||
<h6
|
<h6
|
||||||
class="MuiTypography-root MuiTypography-h6"
|
class="MuiTypography-root MuiTypography-h6"
|
||||||
>
|
>
|
||||||
Vehicles
|
Fleet Details
|
||||||
</h6>
|
</h6>
|
||||||
<div
|
<div
|
||||||
data-testid="mocked-fleetprovider"
|
data-testid="mocked-fleetprovider"
|
||||||
@@ -99,302 +117,111 @@ exports[`FleetStatus Render 1`] = `
|
|||||||
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="MuiGrid-root makeStyles-textJustifyAlign-49 MuiGrid-item MuiGrid-grid-md-4"
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Name
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Vehicles
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
3
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Log Level
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
info
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
|
>
|
||||||
|
<b>
|
||||||
|
CANBus
|
||||||
|
</b>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Enabled
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
true
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Max Memory Buffer Size
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
1
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Enabled
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
true
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Max Disk Buffer Size
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
2
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>
|
||||||
|
Filters
|
||||||
|
</b>
|
||||||
|
:
|
||||||
|
0
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
class="makeStyles-labelInline-9"
|
class=""
|
||||||
href="/fleet/undefined/vehicle-add"
|
href="/fleet-update?name=undefined"
|
||||||
|
style="margin: 5px;"
|
||||||
|
title="Update \\"undefined\\""
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
|
aria-label="Update \\"undefined\\""
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
focusable="false"
|
focusable="false"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
|
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class=""
|
||||||
|
href="/"
|
||||||
|
title="Delete \\"undefined\\""
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
aria-label="Delete \\"undefined\\""
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
align="right"
|
|
||||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-8"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-52"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
|
|
||||||
data-shrink="false"
|
|
||||||
for="search"
|
|
||||||
>
|
|
||||||
Search
|
|
||||||
</label>
|
|
||||||
<div
|
|
||||||
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
aria-invalid="false"
|
|
||||||
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
|
|
||||||
id="search"
|
|
||||||
type="text"
|
|
||||||
value=""
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
aria-label="search"
|
|
||||||
class="MuiButtonBase-root MuiIconButton-root"
|
|
||||||
tabindex="0"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="MuiIconButton-label"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="MuiTouchRipple-root"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<table
|
|
||||||
class="MuiTable-root"
|
|
||||||
>
|
|
||||||
<thead
|
|
||||||
class="MuiTableHead-root"
|
|
||||||
>
|
|
||||||
<tr
|
|
||||||
class="MuiTableRow-root MuiTableRow-head"
|
|
||||||
>
|
|
||||||
<th
|
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
|
||||||
scope="col"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
VIN
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
|
||||||
scope="col"
|
|
||||||
>
|
|
||||||
Actions
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody
|
|
||||||
class="MuiTableBody-root"
|
|
||||||
>
|
|
||||||
<tr
|
|
||||||
class="MuiTableRow-root"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="/vehicle-status/USWESTVIN12345678"
|
|
||||||
>
|
|
||||||
USWESTVIN12345678
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
|
||||||
>
|
|
||||||
No actions
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr
|
|
||||||
class="MuiTableRow-root"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="/vehicle-status/USWESTVIN12345679"
|
|
||||||
>
|
|
||||||
USWESTVIN12345679
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
|
||||||
>
|
|
||||||
No actions
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr
|
|
||||||
class="MuiTableRow-root"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="/vehicle-status/USWESTVIN12345670"
|
|
||||||
>
|
|
||||||
USWESTVIN12345670
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
|
||||||
>
|
|
||||||
No actions
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
<tfoot
|
|
||||||
class="MuiTableFooter-root"
|
|
||||||
>
|
|
||||||
<tr
|
|
||||||
class="MuiTableRow-root MuiTableRow-footer"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
|
|
||||||
colspan="8"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="MuiTablePagination-spacer"
|
|
||||||
/>
|
|
||||||
<p
|
|
||||||
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
|
|
||||||
>
|
|
||||||
Rows per page:
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
|
|
||||||
>
|
|
||||||
<select
|
|
||||||
aria-label="rows per page"
|
|
||||||
class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
class="MuiTablePagination-menuItem"
|
|
||||||
value="5"
|
|
||||||
>
|
|
||||||
5
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
class="MuiTablePagination-menuItem"
|
|
||||||
value="10"
|
|
||||||
>
|
|
||||||
10
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
class="MuiTablePagination-menuItem"
|
|
||||||
value="25"
|
|
||||||
>
|
|
||||||
25
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
class="MuiTablePagination-menuItem"
|
|
||||||
value="100"
|
|
||||||
>
|
|
||||||
100
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M7 10l5 5 5-5z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p
|
|
||||||
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
|
|
||||||
>
|
|
||||||
1-3 of 3
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="MuiTablePagination-actions"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
aria-label="Previous page"
|
|
||||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
|
|
||||||
disabled=""
|
|
||||||
tabindex="-1"
|
|
||||||
title="Previous page"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="MuiIconButton-label"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
aria-label="Next page"
|
|
||||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
|
|
||||||
disabled=""
|
|
||||||
tabindex="-1"
|
|
||||||
title="Next page"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="MuiIconButton-label"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -406,6 +233,12 @@ exports[`FleetStatus Render 1`] = `
|
|||||||
id="tabpanel-1"
|
id="tabpanel-1"
|
||||||
role="tabpanel"
|
role="tabpanel"
|
||||||
/>
|
/>
|
||||||
|
<div
|
||||||
|
aria-labelledby="tab-2"
|
||||||
|
hidden=""
|
||||||
|
id="tabpanel-2"
|
||||||
|
role="tabpanel"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { useLocation } from "react-router-dom";
|
|||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import { Box, Tab, Tabs } from "@material-ui/core";
|
import { Box, Tab, Tabs } from "@material-ui/core";
|
||||||
|
|
||||||
|
import FleetDetailsTab from "./DetailsTab";
|
||||||
import FleetVehiclesTab from "./VehiclesTab";
|
import FleetVehiclesTab from "./VehiclesTab";
|
||||||
import FleetCANFiltersTab from "./CANFiltersTab";
|
import FleetCANFiltersTab from "./CANFiltersTab";
|
||||||
import TabPanel from "../../Controls/TabPanel";
|
import TabPanel from "../../Controls/TabPanel";
|
||||||
@@ -11,6 +12,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
|
|||||||
import useStyles from "../../useStyles";
|
import useStyles from "../../useStyles";
|
||||||
|
|
||||||
const tabHashes = [
|
const tabHashes = [
|
||||||
|
"details",
|
||||||
"vehicles",
|
"vehicles",
|
||||||
"filters"
|
"filters"
|
||||||
]
|
]
|
||||||
@@ -43,7 +45,7 @@ const FleetStatus = () => {
|
|||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [name]);
|
}, [name]);
|
||||||
|
|
||||||
const handleTabChange = (event, newIndex) => {
|
const handleTabChange = (_event, newIndex) => {
|
||||||
setTabIndex(newIndex);
|
setTabIndex(newIndex);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -51,16 +53,21 @@ const FleetStatus = () => {
|
|||||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||||
<Box className={classes.tableToolbar} sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
<Box className={classes.tableToolbar} sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||||
<Tabs value={tabIndex} onChange={handleTabChange} aria-label="car tabs" indicatorColor="secondary">
|
<Tabs value={tabIndex} onChange={handleTabChange} aria-label="car tabs" indicatorColor="secondary">
|
||||||
<Tab label="Vehicles" {...tabProps(0)} />
|
<Tab label="Details" {...tabProps(0)} />
|
||||||
<Tab label="CAN Filters" {...tabProps(1)} />
|
<Tab label="Vehicles" {...tabProps(1)} />
|
||||||
|
<Tab label="CAN Filters" {...tabProps(2)} />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<TabPanel value={tabIndex} index={0}>
|
<TabPanel value={tabIndex} index={0}>
|
||||||
<FleetVehiclesTab />
|
<FleetDetailsTab />
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
<TabPanel value={tabIndex} index={1}>
|
<TabPanel value={tabIndex} index={1}>
|
||||||
|
<FleetVehiclesTab />
|
||||||
|
</TabPanel >
|
||||||
|
|
||||||
|
<TabPanel value={tabIndex} index={2}>
|
||||||
<FleetCANFiltersTab />
|
<FleetCANFiltersTab />
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</div >
|
</div >
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ const renderCarStatus = async () => {
|
|||||||
</StatusProvider>
|
</StatusProvider>
|
||||||
</FleetProvider>
|
</FleetProvider>
|
||||||
);
|
);
|
||||||
await waitFor(() => { });
|
await waitFor(() => { /* render */ });
|
||||||
return container;
|
return container;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -140,7 +140,7 @@ exports[`FleetTable Render 1`] = `
|
|||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
>
|
>
|
||||||
CANBus Enabled
|
Log Level
|
||||||
<svg
|
<svg
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
||||||
@@ -163,7 +163,30 @@ exports[`FleetTable Render 1`] = `
|
|||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
>
|
>
|
||||||
Log Level
|
CAN Bus Enabled
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||||
|
scope="col"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiTableSortLabel-root"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Data Logger Enabled
|
||||||
<svg
|
<svg
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
||||||
@@ -222,12 +245,6 @@ exports[`FleetTable Render 1`] = `
|
|||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<th
|
|
||||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
|
||||||
scope="col"
|
|
||||||
>
|
|
||||||
Actions
|
|
||||||
</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody
|
<tbody
|
||||||
@@ -245,6 +262,11 @@ exports[`FleetTable Render 1`] = `
|
|||||||
US-WEST
|
US-WEST
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
|
>
|
||||||
|
info
|
||||||
|
</td>
|
||||||
<td
|
<td
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
>
|
>
|
||||||
@@ -253,7 +275,7 @@ exports[`FleetTable Render 1`] = `
|
|||||||
<td
|
<td
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
>
|
>
|
||||||
info
|
true
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
@@ -265,28 +287,6 @@ exports[`FleetTable Render 1`] = `
|
|||||||
>
|
>
|
||||||
0
|
0
|
||||||
</td>
|
</td>
|
||||||
<td
|
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
class=""
|
|
||||||
href="/fleet-update?name=US-WEST&canbus_enabled=true&log_level=info"
|
|
||||||
style="margin: 5px;"
|
|
||||||
title="Update \\"US-WEST\\""
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
aria-label="Update US-WEST"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
class="MuiTableRow-root"
|
class="MuiTableRow-root"
|
||||||
@@ -300,6 +300,11 @@ exports[`FleetTable Render 1`] = `
|
|||||||
US-CENTRAL
|
US-CENTRAL
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
|
>
|
||||||
|
warn
|
||||||
|
</td>
|
||||||
<td
|
<td
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
>
|
>
|
||||||
@@ -308,7 +313,7 @@ exports[`FleetTable Render 1`] = `
|
|||||||
<td
|
<td
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
>
|
>
|
||||||
warn
|
false
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
@@ -320,28 +325,6 @@ exports[`FleetTable Render 1`] = `
|
|||||||
>
|
>
|
||||||
0
|
0
|
||||||
</td>
|
</td>
|
||||||
<td
|
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
class=""
|
|
||||||
href="/fleet-update?name=US-CENTRAL&canbus_enabled=false&log_level=warn"
|
|
||||||
style="margin: 5px;"
|
|
||||||
title="Update \\"US-CENTRAL\\""
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
aria-label="Update US-CENTRAL"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
class="MuiTableRow-root"
|
class="MuiTableRow-root"
|
||||||
@@ -355,6 +338,11 @@ exports[`FleetTable Render 1`] = `
|
|||||||
US-EAST
|
US-EAST
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
<td
|
||||||
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
|
>
|
||||||
|
error
|
||||||
|
</td>
|
||||||
<td
|
<td
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
>
|
>
|
||||||
@@ -363,7 +351,7 @@ exports[`FleetTable Render 1`] = `
|
|||||||
<td
|
<td
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
>
|
>
|
||||||
error
|
false
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||||
@@ -375,28 +363,6 @@ exports[`FleetTable Render 1`] = `
|
|||||||
>
|
>
|
||||||
0
|
0
|
||||||
</td>
|
</td>
|
||||||
<td
|
|
||||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
class=""
|
|
||||||
href="/fleet-update?name=US-EAST&canbus_enabled=true&log_level=error"
|
|
||||||
style="margin: 5px;"
|
|
||||||
title="Update \\"US-EAST\\""
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
aria-label="Update US-EAST"
|
|
||||||
class="MuiSvgIcon-root"
|
|
||||||
focusable="false"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tfoot
|
<tfoot
|
||||||
|
|||||||
@@ -7,12 +7,9 @@ import {
|
|||||||
TableCell,
|
TableCell,
|
||||||
TableFooter,
|
TableFooter,
|
||||||
TablePagination,
|
TablePagination,
|
||||||
TableRow,
|
TableRow
|
||||||
Tooltip,
|
|
||||||
} from "@material-ui/core";
|
} from "@material-ui/core";
|
||||||
import AddCircleIcon from "@material-ui/icons/AddCircle";
|
import AddCircleIcon from "@material-ui/icons/AddCircle";
|
||||||
import EditIcon from '@material-ui/icons/Edit';
|
|
||||||
import DeleteIcon from "@material-ui/icons/Delete";
|
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
|
|
||||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||||
@@ -24,21 +21,24 @@ import { FleetProvider, useFleetContext } from "../../Contexts/FleetContext"
|
|||||||
import useStyles from "../../useStyles";
|
import useStyles from "../../useStyles";
|
||||||
import SearchField from "../../Controls/SearchField";
|
import SearchField from "../../Controls/SearchField";
|
||||||
import { logger } from "../../../services/monitoring";
|
import { logger } from "../../../services/monitoring";
|
||||||
import { Roles, hasRole } from "../../../utils/roles";
|
|
||||||
|
|
||||||
const tableColumns = [
|
const tableColumns = [
|
||||||
{
|
{
|
||||||
id: "name",
|
id: "name",
|
||||||
label: "Name"
|
label: "Name"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: "canbus_enabled",
|
|
||||||
label: "CANBus Enabled"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "log_level",
|
id: "log_level",
|
||||||
label: "Log Level"
|
label: "Log Level"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: "canbus_enabled",
|
||||||
|
label: "CAN Bus Enabled"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "data_logger_enabled",
|
||||||
|
label: "Data Logger Enabled"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "num_vehicles",
|
id: "num_vehicles",
|
||||||
label: "Vehicles"
|
label: "Vehicles"
|
||||||
@@ -46,22 +46,18 @@ const tableColumns = [
|
|||||||
{
|
{
|
||||||
id: "num_filters",
|
id: "num_filters",
|
||||||
label: "Filters"
|
label: "Filters"
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "",
|
|
||||||
label: "Actions"
|
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const MainForm = ({ vin }) => {
|
const MainForm = () => {
|
||||||
const [pageSize, setPageSize] = useState(10);
|
const [pageSize, setPageSize] = useState(10);
|
||||||
const [pageIndex, setPageIndex] = useState(0);
|
const [pageIndex, setPageIndex] = useState(0);
|
||||||
const [orderBy, setOrderBy] = useState("id");
|
const [orderBy, setOrderBy] = useState("id");
|
||||||
const [order, setOrder] = useState("desc");
|
const [order, setOrder] = useState("desc");
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const { setMessage, setSitePath, setTitle } = useStatusContext();
|
const { setMessage, setSitePath, setTitle } = useStatusContext();
|
||||||
const { fleets, totalFleets, getFleets, deleteFleet } = useFleetContext();
|
const { fleets, totalFleets, getFleets } = useFleetContext();
|
||||||
const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
|
const { token: { idToken: { jwtToken: token } } } = useUserContext();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTitle("Fleets");
|
setTitle("Fleets");
|
||||||
@@ -89,7 +85,7 @@ const MainForm = ({ vin }) => {
|
|||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [token, pageIndex, pageSize, orderBy, order]);
|
}, [token, pageIndex, pageSize, orderBy, order]);
|
||||||
|
|
||||||
const handleChangePageIndex = (event, newIndex) => {
|
const handleChangePageIndex = (_event, newIndex) => {
|
||||||
setPageIndex(newIndex);
|
setPageIndex(newIndex);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -98,7 +94,7 @@ const MainForm = ({ vin }) => {
|
|||||||
setPageIndex(0);
|
setPageIndex(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSort = (event, property) => {
|
const handleSort = (_event, property) => {
|
||||||
try {
|
try {
|
||||||
if (property === orderBy) {
|
if (property === orderBy) {
|
||||||
if (order === "asc") {
|
if (order === "asc") {
|
||||||
@@ -115,55 +111,6 @@ const MainForm = ({ vin }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onDelete = async (name) => {
|
|
||||||
try {
|
|
||||||
await deleteFleet(name, token);
|
|
||||||
setMessage(`Deleted ${name}`)
|
|
||||||
} catch (e) {
|
|
||||||
setMessage(e.message);
|
|
||||||
logger.warn(e.stack);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const Actions = (row) => {
|
|
||||||
let actions = [];
|
|
||||||
if (hasRole([Roles.CREATE], groups)) {
|
|
||||||
actions.push({
|
|
||||||
tip: `Update "${row.name}"`,
|
|
||||||
link: `/fleet-update?name=${row.name}&canbus_enabled=${row.canbus.enabled.toString()}&log_level=${row.log_level}`,
|
|
||||||
icon: <EditIcon aria-label={`Update ${row.name}`} />
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (hasRole([Roles.DELETE], groups)) {
|
|
||||||
actions.push({
|
|
||||||
tip: `Delete "${row.name}"`,
|
|
||||||
id: row.name,
|
|
||||||
icon: <DeleteIcon aria-label={`Delete ${row.name}`} />
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if (actions.length === 0) return ["No actions"];
|
|
||||||
|
|
||||||
return actions.map((action) => {
|
|
||||||
if (action.link != null) {
|
|
||||||
return (
|
|
||||||
<Tooltip key={action.link} title={action.tip}>
|
|
||||||
<Link to={action.link} style={{ margin: 5 }}>
|
|
||||||
{action.icon}
|
|
||||||
</Link>
|
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<Tooltip key={`delete-${action.id}`} title={action.tip}>
|
|
||||||
<Link to="#" onClick={() => onDelete(action.id)}>
|
|
||||||
{action.icon}
|
|
||||||
</Link>
|
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||||
<Grid container className={classes.root} spacing={2}>
|
<Grid container className={classes.root} spacing={2}>
|
||||||
@@ -191,11 +138,11 @@ const MainForm = ({ vin }) => {
|
|||||||
<TableCell align="center">
|
<TableCell align="center">
|
||||||
<Link to={`/fleet/${row.name}`}>{row.name}</Link>
|
<Link to={`/fleet/${row.name}`}>{row.name}</Link>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
|
|
||||||
<TableCell align="center">{row.log_level}</TableCell>
|
<TableCell align="center">{row.log_level}</TableCell>
|
||||||
|
<TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
|
||||||
|
<TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
|
||||||
<TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
|
<TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
|
||||||
<TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
|
<TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
|
||||||
<TableCell align="center">{Actions(row)}</TableCell>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ const renderFleetTable = async () => {
|
|||||||
</StatusProvider>
|
</StatusProvider>
|
||||||
</FleetProvider>
|
</FleetProvider>
|
||||||
);
|
);
|
||||||
await waitFor(() => { });
|
await waitFor(() => { /* render */ });
|
||||||
return container;
|
return container;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ exports[`FleetUpdate Render 1`] = `
|
|||||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
class="MuiFormControl-root MuiTextField-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 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-disabled Mui-disabled Mui-required Mui-required"
|
||||||
data-shrink="false"
|
data-shrink="false"
|
||||||
for="name"
|
for="name"
|
||||||
id="name-label"
|
id="name-label"
|
||||||
@@ -41,11 +41,12 @@ exports[`FleetUpdate Render 1`] = `
|
|||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
aria-invalid="false"
|
aria-invalid="false"
|
||||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
|
||||||
|
disabled=""
|
||||||
id="name"
|
id="name"
|
||||||
maxlength="255"
|
maxlength="255"
|
||||||
name="name"
|
name="name"
|
||||||
@@ -69,62 +70,467 @@ exports[`FleetUpdate Render 1`] = `
|
|||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root"
|
||||||
|
id="demo-row-radio-buttons-group-label"
|
||||||
|
>
|
||||||
|
Log Level
|
||||||
|
</label>
|
||||||
<div
|
<div
|
||||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
aria-labelledby="demo-row-radio-buttons-group-label"
|
||||||
|
class="MuiFormGroup-root MuiFormGroup-row"
|
||||||
|
margin="normal"
|
||||||
|
role="radiogroup"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
class="MuiFormControlLabel-root"
|
||||||
data-shrink="false"
|
|
||||||
for="canbus"
|
|
||||||
id="canbus-label"
|
|
||||||
>
|
>
|
||||||
CANBus Enabled
|
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-disabled="false"
|
||||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
>
|
>
|
||||||
|
<span
|
||||||
*
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="trace"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Trace
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="debug"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Debug
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="info"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Info
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="warn"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Warn
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="error"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Error
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
name="log-level-group"
|
||||||
|
type="radio"
|
||||||
|
value="critical"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="PrivateRadioButtonIcon-root-72"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Critical
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root"
|
||||||
|
id="demo-row-radio-buttons-group-label"
|
||||||
|
>
|
||||||
|
CAN Bus
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiFormGroup-root"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
checked=""
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
data-indeterminate="false"
|
||||||
|
type="checkbox"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
CAN Bus Enabled
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||||
>
|
>
|
||||||
<input
|
<label
|
||||||
aria-invalid="false"
|
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
|
||||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
data-shrink="true"
|
||||||
id="canbus"
|
for="max_mem_buffer_size"
|
||||||
maxlength="255"
|
id="max_mem_buffer_size-label"
|
||||||
name="canbus"
|
|
||||||
required=""
|
|
||||||
type="text"
|
|
||||||
value=""
|
|
||||||
/>
|
|
||||||
<fieldset
|
|
||||||
aria-hidden="true"
|
|
||||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
|
||||||
>
|
>
|
||||||
<legend
|
Max Memory Buffer Size (0 uses default size)
|
||||||
class="PrivateNotchedOutline-legendLabelled-66"
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
>
|
>
|
||||||
<span>
|
|
||||||
CANBus Enabled
|
*
|
||||||
*
|
</span>
|
||||||
</span>
|
</label>
|
||||||
</legend>
|
<div
|
||||||
</fieldset>
|
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||||
|
id="max_mem_buffer_size"
|
||||||
|
maxlength="12"
|
||||||
|
name="max_mem_buffer_size"
|
||||||
|
required=""
|
||||||
|
type="number"
|
||||||
|
value="1"
|
||||||
|
/>
|
||||||
|
<fieldset
|
||||||
|
aria-hidden="true"
|
||||||
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
|
>
|
||||||
|
<legend
|
||||||
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Max Memory Buffer Size (0 uses default size)
|
||||||
|
*
|
||||||
|
</span>
|
||||||
|
</legend>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<label
|
||||||
|
class="MuiFormControlLabel-root"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-disabled="false"
|
||||||
|
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="MuiIconButton-label"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="PrivateSwitchBase-input-71"
|
||||||
|
data-indeterminate="false"
|
||||||
|
type="checkbox"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="MuiSvgIcon-root"
|
||||||
|
focusable="false"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTouchRipple-root"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||||
|
>
|
||||||
|
Data Logger Enabled
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
class="MuiFormControl-root MuiTextField-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 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
|
||||||
data-shrink="false"
|
data-shrink="true"
|
||||||
for="log-level"
|
for="max_disk_buffer_size"
|
||||||
id="log-level-label"
|
id="max_disk_buffer_size-label"
|
||||||
>
|
>
|
||||||
Log Level (e.g. "debug", "info", "warn", "error", etc.)
|
Max Disk Buffer Size (0 uses default size)
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||||
@@ -139,22 +545,22 @@ exports[`FleetUpdate Render 1`] = `
|
|||||||
<input
|
<input
|
||||||
aria-invalid="false"
|
aria-invalid="false"
|
||||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||||
id="log-level"
|
id="max_disk_buffer_size"
|
||||||
maxlength="255"
|
maxlength="12"
|
||||||
name="log-level"
|
name="max_disk_buffer_size"
|
||||||
required=""
|
required=""
|
||||||
type="text"
|
type="number"
|
||||||
value=""
|
value="2"
|
||||||
/>
|
/>
|
||||||
<fieldset
|
<fieldset
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||||
>
|
>
|
||||||
<legend
|
<legend
|
||||||
class="PrivateNotchedOutline-legendLabelled-66"
|
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
Log Level (e.g. "debug", "info", "warn", "error", etc.)
|
Max Disk Buffer Size (0 uses default size)
|
||||||
*
|
*
|
||||||
</span>
|
</span>
|
||||||
</legend>
|
</legend>
|
||||||
|
|||||||
@@ -1,7 +1,16 @@
|
|||||||
import React, { useEffect, useRef, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { Redirect } from "react-router";
|
import { Redirect } from "react-router";
|
||||||
import { useLocation } from "react-router-dom";
|
import { useLocation } from "react-router-dom";
|
||||||
import { Button, TextField } from "@material-ui/core";
|
import {
|
||||||
|
Button,
|
||||||
|
Checkbox,
|
||||||
|
FormControlLabel,
|
||||||
|
FormGroup,
|
||||||
|
FormLabel,
|
||||||
|
Radio,
|
||||||
|
RadioGroup,
|
||||||
|
TextField
|
||||||
|
} from "@material-ui/core";
|
||||||
|
|
||||||
import useStyles from "../../useStyles";
|
import useStyles from "../../useStyles";
|
||||||
import {
|
import {
|
||||||
@@ -15,18 +24,19 @@ import { logger } from "../../../services/monitoring";
|
|||||||
|
|
||||||
const MainForm = () => {
|
const MainForm = () => {
|
||||||
const queries = new URLSearchParams(useLocation().search);
|
const queries = new URLSearchParams(useLocation().search);
|
||||||
const name = queries.get("name") ?? ""
|
const name = queries.get("name") ?? "";
|
||||||
const canbusEnabled = queries.get("canbus_enabled") ?? ""
|
|
||||||
const logLevel = queries.get("log_level") ?? ""
|
|
||||||
|
|
||||||
const { updateFleet, busy } = useFleetContext();
|
const { fleet, getFleet, updateFleet, busy } = useFleetContext();
|
||||||
const { token: { idToken: { jwtToken: token } } } = useUserContext();
|
const { token: { idToken: { jwtToken: token } } } = useUserContext();
|
||||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||||
const [redirect, setRedirect] = useState(null);
|
const [redirect, setRedirect] = useState(null);
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
|
|
||||||
const canbusEnabledEl = useRef(null);
|
const [selectedLogLevel, setSelectedLogLevel] = useState("info");
|
||||||
const logLevelEl = useRef(null);
|
const [canbusEnabled, setCANBusEnabled] = useState(true);
|
||||||
|
const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
|
||||||
|
const [maxMemBufferSize, setMaxMemBufferSize] = useState(0);
|
||||||
|
const [maxDiskBufferSize, setMaxDiskBufferSize] = useState(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTitle("Update Fleet");
|
setTitle("Update Fleet");
|
||||||
@@ -42,20 +52,69 @@ const MainForm = () => {
|
|||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
try {
|
||||||
|
if (!name || !token) return;
|
||||||
|
await getFleet(name, token);
|
||||||
|
} catch (e) {
|
||||||
|
setMessage(e.message);
|
||||||
|
logger.warn(e.stack);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [token]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setSelectedLogLevel(fleet.log_level ?? selectedLogLevel);
|
||||||
|
|
||||||
|
if (fleet.canbus) {
|
||||||
|
setCANBusEnabled(fleet.canbus.enabled ?? canbusEnabled);
|
||||||
|
setDataLoggerEnabled(fleet.canbus.data_logger_enabled ?? dataLoggerEnabled);
|
||||||
|
setMaxMemBufferSize(fleet.canbus.max_mem_buffer_size ?? maxMemBufferSize);
|
||||||
|
setMaxDiskBufferSize(fleet.canbus.max_disk_buffer_size ?? maxDiskBufferSize);
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [fleet]);
|
||||||
|
|
||||||
|
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) => {
|
const onSubmit = async (event) => {
|
||||||
try {
|
try {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const formData = {
|
const formData = {
|
||||||
name: name,
|
name: name,
|
||||||
canbus: { enabled: canbusEnabledEl.current.value === "true" },
|
log_level: selectedLogLevel,
|
||||||
log_level: logLevelEl.current.value
|
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
|
||||||
|
}
|
||||||
};
|
};
|
||||||
console.log(formData);
|
|
||||||
const result = await updateFleet(name, formData, token);
|
const result = await updateFleet(name, formData, token);
|
||||||
if (!result || result.error) return;
|
if (!result || result.error) return;
|
||||||
|
|
||||||
setMessage(`Updated ${result.name}`);
|
setMessage(`Updated ${result.name}`);
|
||||||
setRedirect("/fleets");
|
setRedirect(`/fleet/${result.name}`);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setMessage(e.message);
|
setMessage(e.message);
|
||||||
logger.warn(e.stack);
|
logger.warn(e.stack);
|
||||||
@@ -79,37 +138,74 @@ const MainForm = () => {
|
|||||||
maxLength: "255",
|
maxLength: "255",
|
||||||
readOnly: true,
|
readOnly: true,
|
||||||
}}
|
}}
|
||||||
|
disabled
|
||||||
value={name}
|
value={name}
|
||||||
required
|
required
|
||||||
fullWidth
|
fullWidth
|
||||||
/>
|
/>
|
||||||
|
<FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
|
||||||
|
<RadioGroup
|
||||||
|
row
|
||||||
|
aria-labelledby="demo-row-radio-buttons-group-label"
|
||||||
|
name="log-level-group"
|
||||||
|
value={selectedLogLevel}
|
||||||
|
onChange={onLogLevelChange}
|
||||||
|
margin="normal"
|
||||||
|
>
|
||||||
|
<FormControlLabel value="trace" control={<Radio />} label="Trace" />
|
||||||
|
<FormControlLabel value="debug" control={<Radio />} label="Debug" />
|
||||||
|
<FormControlLabel value="info" control={<Radio />} label="Info" />
|
||||||
|
<FormControlLabel value="warn" control={<Radio />} label="Warn" />
|
||||||
|
<FormControlLabel value="error" control={<Radio />} label="Error" />
|
||||||
|
<FormControlLabel value="critical" control={<Radio />} label="Critical" />
|
||||||
|
</RadioGroup>
|
||||||
|
<FormLabel id="demo-row-radio-buttons-group-label">CAN Bus</FormLabel>
|
||||||
|
<FormGroup>
|
||||||
|
<FormControlLabel control={
|
||||||
|
<Checkbox
|
||||||
|
checked={canbusEnabled}
|
||||||
|
onChange={onCANBusChange}
|
||||||
|
/>
|
||||||
|
} label="CAN Bus Enabled" />
|
||||||
|
<TextField
|
||||||
|
id="max_mem_buffer_size"
|
||||||
|
name="max_mem_buffer_size"
|
||||||
|
label='Max Memory Buffer Size (0 uses default size)'
|
||||||
|
value={maxMemBufferSize}
|
||||||
|
onChange={onMaxMemBufferSizeChange}
|
||||||
|
variant="outlined"
|
||||||
|
margin="normal"
|
||||||
|
inputProps={{
|
||||||
|
maxLength: "12",
|
||||||
|
}}
|
||||||
|
type="number"
|
||||||
|
disabled={!canbusEnabled}
|
||||||
|
required
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
<FormControlLabel control={
|
||||||
|
<Checkbox
|
||||||
|
checked={dataLoggerEnabled}
|
||||||
|
onChange={onDataLoggerChange}
|
||||||
|
disabled={!canbusEnabled}
|
||||||
|
/>
|
||||||
|
} label="Data Logger Enabled" />
|
||||||
|
</FormGroup>
|
||||||
<TextField
|
<TextField
|
||||||
id="canbus"
|
id="max_disk_buffer_size"
|
||||||
name="canbus"
|
name="max_disk_buffer_size"
|
||||||
label="CANBus Enabled"
|
label='Max Disk Buffer Size (0 uses default size)'
|
||||||
defaultValue={canbusEnabled}
|
value={maxDiskBufferSize}
|
||||||
|
onChange={onMaxDiskBufferSizeChange}
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
margin="normal"
|
margin="normal"
|
||||||
inputProps={{
|
inputProps={{
|
||||||
maxLength: "255",
|
maxLength: "12",
|
||||||
}}
|
}}
|
||||||
|
type="number"
|
||||||
|
disabled={!dataLoggerEnabled}
|
||||||
required
|
required
|
||||||
fullWidth
|
fullWidth
|
||||||
inputRef={canbusEnabledEl}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
id="log-level"
|
|
||||||
name="log-level"
|
|
||||||
label='Log Level (e.g. "debug", "info", "warn", "error", etc.)'
|
|
||||||
defaultValue={logLevel}
|
|
||||||
variant="outlined"
|
|
||||||
margin="normal"
|
|
||||||
inputProps={{
|
|
||||||
maxLength: "255",
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
fullWidth
|
|
||||||
inputRef={logLevelEl}
|
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ const renderFleetUpdate = async () => {
|
|||||||
</StatusProvider>
|
</StatusProvider>
|
||||||
</FleetProvider>
|
</FleetProvider>
|
||||||
);
|
);
|
||||||
await waitFor(() => { });
|
await waitFor(() => { /* render */ });
|
||||||
return container;
|
return container;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -151,6 +151,7 @@ const MainForm = () => {
|
|||||||
<CarSelectionTable
|
<CarSelectionTable
|
||||||
classes={classes}
|
classes={classes}
|
||||||
token={token}
|
token={token}
|
||||||
|
multiSelect={true}
|
||||||
search={{ search }}
|
search={{ search }}
|
||||||
selected={selected}
|
selected={selected}
|
||||||
onSelect={handleSelect}
|
onSelect={handleSelect}
|
||||||
|
|||||||
@@ -28,6 +28,7 @@ const ManifestCreate = React.lazy(() => import("../Manifest/Create"));
|
|||||||
const PageNotFound = React.lazy(() => import("../404"));
|
const PageNotFound = React.lazy(() => import("../404"));
|
||||||
const SSOForm = React.lazy(() => import("../SSOForm"));
|
const SSOForm = React.lazy(() => import("../SSOForm"));
|
||||||
const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
|
const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
|
||||||
|
const VehicleUpdateForm = React.lazy(() => import("../Cars/Update"))
|
||||||
|
|
||||||
const SiteRoutes = () => {
|
const SiteRoutes = () => {
|
||||||
const { token, groups } = useUserContext();
|
const { token, groups } = useUserContext();
|
||||||
@@ -120,7 +121,7 @@ const SiteRoutes = () => {
|
|||||||
type={TYPES.PROTECTED}
|
type={TYPES.PROTECTED}
|
||||||
token={token}
|
token={token}
|
||||||
groups={groups}
|
groups={groups}
|
||||||
roles={[Roles.READ, Roles.CREATE]}
|
roles={[Roles.CREATE]}
|
||||||
/>
|
/>
|
||||||
<AuthRoute
|
<AuthRoute
|
||||||
path="/fleet-update"
|
path="/fleet-update"
|
||||||
@@ -128,7 +129,7 @@ const SiteRoutes = () => {
|
|||||||
type={TYPES.PROTECTED}
|
type={TYPES.PROTECTED}
|
||||||
token={token}
|
token={token}
|
||||||
groups={groups}
|
groups={groups}
|
||||||
roles={[Roles.READ, Roles.CREATE]}
|
roles={[Roles.CREATE]}
|
||||||
/>
|
/>
|
||||||
<AuthRoute
|
<AuthRoute
|
||||||
path="/home"
|
path="/home"
|
||||||
@@ -200,6 +201,14 @@ const SiteRoutes = () => {
|
|||||||
groups={groups}
|
groups={groups}
|
||||||
roles={[Roles.READ, Roles.CREATE]}
|
roles={[Roles.READ, Roles.CREATE]}
|
||||||
/>
|
/>
|
||||||
|
<AuthRoute
|
||||||
|
path="/vehicle-update"
|
||||||
|
render={() => <VehicleUpdateForm />}
|
||||||
|
type={TYPES.PROTECTED}
|
||||||
|
token={token}
|
||||||
|
groups={groups}
|
||||||
|
roles={[Roles.CREATE]}
|
||||||
|
/>
|
||||||
<PageNotFound />
|
<PageNotFound />
|
||||||
</Switch>
|
</Switch>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
|||||||
@@ -2,13 +2,13 @@ const fleets = [
|
|||||||
{
|
{
|
||||||
name: "US-WEST",
|
name: "US-WEST",
|
||||||
log_level: "info",
|
log_level: "info",
|
||||||
canbus: { enabled: true },
|
canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2 },
|
||||||
vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
|
vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "US-CENTRAL",
|
name: "US-CENTRAL",
|
||||||
log_level: "warn",
|
log_level: "warn",
|
||||||
canbus: { enabled: false },
|
canbus: { enabled: false, data_logger_enabled: false, max_mem_buffer_size: 0, max_disk_buffer_size: 0 },
|
||||||
vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
|
vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -37,50 +37,54 @@ const filters = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
const fleetsAPI = {
|
const fleetsAPI = {
|
||||||
addFleet: async (fleet, token) => {
|
addFleet: async (fleet) => {
|
||||||
fleets.push(fleet);
|
fleets.push(fleet);
|
||||||
return fleet;
|
return fleet;
|
||||||
},
|
},
|
||||||
getFleets: async (search, token) => {
|
getFleet: async (name) => {
|
||||||
|
const index = fleets.findIndex(element => element.name === name);
|
||||||
|
return fleets[index];
|
||||||
|
},
|
||||||
|
getFleets: async () => {
|
||||||
return { data: fleets };
|
return { data: fleets };
|
||||||
},
|
},
|
||||||
updateFleet: async (name, fleet, token) => {
|
updateFleet: async (name, fleet) => {
|
||||||
const index = fleets.findIndex(element => element.name === name);
|
const index = fleets.findIndex(element => element.name === name);
|
||||||
if (index >= 0) fleets[index] = fleet;
|
if (index >= 0) fleets[index] = fleet;
|
||||||
return fleet;
|
return fleet;
|
||||||
},
|
},
|
||||||
deleteFleet: async (name, token) => {
|
deleteFleet: async (name) => {
|
||||||
const index = fleets.findIndex(element => element.name === name);
|
const index = fleets.findIndex(element => element.name === name);
|
||||||
if (index >= 0) fleets.splice(index, 1);
|
if (index >= 0) fleets.splice(index, 1);
|
||||||
return name;
|
return name;
|
||||||
},
|
},
|
||||||
|
|
||||||
getFleetVehicles: async (name, search, token) => {
|
getFleetVehicles: async () => {
|
||||||
return { data: vehicles };
|
return { data: vehicles };
|
||||||
},
|
},
|
||||||
addFleetVehicle: async (name, vehicle, token) => {
|
addFleetVehicle: async (_name, vehicle) => {
|
||||||
vehicles.push(vehicle.vin);
|
vehicles.push(vehicle.vin);
|
||||||
return vehicle;
|
return vehicle;
|
||||||
},
|
},
|
||||||
deleteFleetVehicle: async (name, vehicle, token) => {
|
deleteFleetVehicle: async (_name, vehicle) => {
|
||||||
const index = vehicles.findIndex(element => element === vehicle.vin);
|
const index = vehicles.findIndex(element => element === vehicle.vin);
|
||||||
if (index >= 0) vehicles.splice(index, 1);
|
if (index >= 0) vehicles.splice(index, 1);
|
||||||
return vehicle.vin;
|
return vehicle.vin;
|
||||||
},
|
},
|
||||||
|
|
||||||
getFleetCANFilters: async (name, search, token) => {
|
getFleetCANFilters: async () => {
|
||||||
return { data: filters };
|
return { data: filters };
|
||||||
},
|
},
|
||||||
addFleetCANFilter: async (name, filter, token) => {
|
addFleetCANFilter: async (_name, filter) => {
|
||||||
filters.push(filter);
|
filters.push(filter);
|
||||||
return filter;
|
return filter;
|
||||||
},
|
},
|
||||||
updateFleetCANFilter: async (name, can_id, filter, token) => {
|
updateFleetCANFilter: async (_name, can_id, filter) => {
|
||||||
const index = filters.findIndex(element => element.can_id === can_id);
|
const index = filters.findIndex(element => element.can_id === can_id);
|
||||||
if (index >= 0) filters[index] = filter;
|
if (index >= 0) filters[index] = filter;
|
||||||
return filter;
|
return filter;
|
||||||
},
|
},
|
||||||
deleteFleetCANFilter: async (name, can_id, token) => {
|
deleteFleetCANFilter: async (_name, can_id) => {
|
||||||
const index = filters.findIndex(element => element.can_id === can_id);
|
const index = filters.findIndex(element => element.can_id === can_id);
|
||||||
if (index >= 0) vehicles.splice(index, 1);
|
if (index >= 0) vehicles.splice(index, 1);
|
||||||
return can_id;
|
return can_id;
|
||||||
|
|||||||
@@ -5,6 +5,8 @@ const data = [
|
|||||||
model: "Ocean",
|
model: "Ocean",
|
||||||
trim: "Basic",
|
trim: "Basic",
|
||||||
ecu_list: "ECUA 2.0.0, ECUB 2.1.1",
|
ecu_list: "ECUA 2.0.0, ECUB 2.1.1",
|
||||||
|
log_level: "info",
|
||||||
|
canbus: { enabled: true, data_logger_enabled: true, max_mem_buffer_size: 1, max_disk_buffer_size: 2 },
|
||||||
},
|
},
|
||||||
{ vin: "1G1FP87S3GN100062" },
|
{ vin: "1G1FP87S3GN100062" },
|
||||||
{ vin: "1HGCG325XYA062256", year: 2021 },
|
{ vin: "1HGCG325XYA062256", year: 2021 },
|
||||||
@@ -34,11 +36,16 @@ const ecusData = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
const vehiclesAPI = {
|
const vehiclesAPI = {
|
||||||
addVehicle: async (vehicle, token) => {
|
addVehicle: async (vehicle) => {
|
||||||
data.push(vehicle);
|
data.push(vehicle);
|
||||||
return vehicle;
|
return vehicle;
|
||||||
},
|
},
|
||||||
getConnections: async (vins, token) => {
|
deleteVehicle: async (vin) => {
|
||||||
|
const index = data.findIndex(element => element.vin === vin);
|
||||||
|
if (index >= 0) data.splice(index, 1);
|
||||||
|
return vin;
|
||||||
|
},
|
||||||
|
getConnections: async (vins) => {
|
||||||
const result = {};
|
const result = {};
|
||||||
|
|
||||||
vins.forEach((vin) => {
|
vins.forEach((vin) => {
|
||||||
@@ -47,10 +54,10 @@ const vehiclesAPI = {
|
|||||||
|
|
||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
getECUs: async (vin, token) => {
|
getECUs: async () => {
|
||||||
return { data: ecusData, total: ecusData.length };
|
return { data: ecusData, total: ecusData.length };
|
||||||
},
|
},
|
||||||
getModels: async (token) => {
|
getModels: async () => {
|
||||||
return {
|
return {
|
||||||
data: ["Ocean", "Pear"],
|
data: ["Ocean", "Pear"],
|
||||||
};
|
};
|
||||||
@@ -60,21 +67,30 @@ const vehiclesAPI = {
|
|||||||
.mockResolvedValue([
|
.mockResolvedValue([
|
||||||
{ altitude: 5, longitude: 10, latitude: 15, vin: "TESTVIN123" },
|
{ altitude: 5, longitude: 10, latitude: 15, vin: "TESTVIN123" },
|
||||||
]),
|
]),
|
||||||
getVehicles: async (search, token) => {
|
getVehicle: async (vin) => {
|
||||||
|
const index = data.findIndex(element => element.vin === vin);
|
||||||
|
return data[index];
|
||||||
|
},
|
||||||
|
getVehicles: async () => {
|
||||||
return { data };
|
return { data };
|
||||||
},
|
},
|
||||||
getYears: async (token) => {
|
getYears: async () => {
|
||||||
return {
|
return {
|
||||||
data: [2021, 2022],
|
data: [2021, 2022],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
sendCommand: async (vin, command, parameters, token) => {
|
sendCommand: async (vin, command, parameters) => {
|
||||||
return {
|
return {
|
||||||
vin,
|
vin,
|
||||||
command,
|
command,
|
||||||
parameters,
|
parameters,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
updateVehicle: async (vin, vehicle) => {
|
||||||
|
const index = data.findIndex(element => element.vin === vin);
|
||||||
|
if (index >= 0) data[index] = vehicle;
|
||||||
|
return vehicle;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default vehiclesAPI;
|
export default vehiclesAPI;
|
||||||
|
|||||||
@@ -17,6 +17,15 @@ const fleetsAPI = {
|
|||||||
body: JSON.stringify(fleet)
|
body: JSON.stringify(fleet)
|
||||||
}).then(fetchRespHandler),
|
}).then(fetchRespHandler),
|
||||||
|
|
||||||
|
getFleet: async (name, token) =>
|
||||||
|
fetch(`${API_ENDPOINT}/fleet/${name}`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: Object.assign(
|
||||||
|
{ "Content-Type": "application/json" },
|
||||||
|
getAuthHeaderOptions(token)
|
||||||
|
)
|
||||||
|
}).then(fetchRespHandler),
|
||||||
|
|
||||||
getFleets: async (search, token) =>
|
getFleets: async (search, token) =>
|
||||||
fetch(addQueryParams(`${API_ENDPOINT}/fleets`, search), {
|
fetch(addQueryParams(`${API_ENDPOINT}/fleets`, search), {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
|
|||||||
@@ -17,6 +17,15 @@ const vehiclesAPI = {
|
|||||||
body: JSON.stringify(vehicle),
|
body: JSON.stringify(vehicle),
|
||||||
}).then(fetchRespHandler),
|
}).then(fetchRespHandler),
|
||||||
|
|
||||||
|
deleteVehicle: async (vin, token) =>
|
||||||
|
fetch(`${API_ENDPOINT}/vehicle/${vin}`, {
|
||||||
|
method: "DELETE",
|
||||||
|
headers: Object.assign(
|
||||||
|
{ "Content-Type": "application/json" },
|
||||||
|
getAuthHeaderOptions(token)
|
||||||
|
),
|
||||||
|
}).then(fetchRespHandler),
|
||||||
|
|
||||||
getConnections: async (vins, token) => {
|
getConnections: async (vins, token) => {
|
||||||
const u = `${API_ENDPOINT}/carsconnected?vins=${vins.join(",")}`;
|
const u = `${API_ENDPOINT}/carsconnected?vins=${vins.join(",")}`;
|
||||||
return fetch(u, {
|
return fetch(u, {
|
||||||
@@ -66,6 +75,15 @@ const vehiclesAPI = {
|
|||||||
),
|
),
|
||||||
}).then(fetchRespHandler),
|
}).then(fetchRespHandler),
|
||||||
|
|
||||||
|
getVehicle: async (vin, token) =>
|
||||||
|
fetch(`${API_ENDPOINT}/vehicle/${vin}`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: Object.assign(
|
||||||
|
{ "Content-Type": "application/json" },
|
||||||
|
getAuthHeaderOptions(token)
|
||||||
|
),
|
||||||
|
}).then(fetchRespHandler),
|
||||||
|
|
||||||
getVehicles: async (search, token) => {
|
getVehicles: async (search, token) => {
|
||||||
const u = addQueryParams(`${API_ENDPOINT}/vehicles`, search);
|
const u = addQueryParams(`${API_ENDPOINT}/vehicles`, search);
|
||||||
return fetch(u, {
|
return fetch(u, {
|
||||||
@@ -99,6 +117,16 @@ const vehiclesAPI = {
|
|||||||
parameters,
|
parameters,
|
||||||
}),
|
}),
|
||||||
}).then(fetchRespHandler),
|
}).then(fetchRespHandler),
|
||||||
|
|
||||||
|
updateVehicle: async (vin, vehicle, token) =>
|
||||||
|
fetch(`${API_ENDPOINT}/vehicle/${vin}`, {
|
||||||
|
method: "PUT",
|
||||||
|
headers: Object.assign(
|
||||||
|
{ "Content-Type": "application/json" },
|
||||||
|
getAuthHeaderOptions(token)
|
||||||
|
),
|
||||||
|
body: JSON.stringify(vehicle)
|
||||||
|
}).then(fetchRespHandler),
|
||||||
};
|
};
|
||||||
|
|
||||||
export default vehiclesAPI;
|
export default vehiclesAPI;
|
||||||
|
|||||||
Reference in New Issue
Block a user