Merge branch 'develop' into release/0.9.0
This commit is contained in:
jwu-fisker
@@ -4380,7 +4380,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
|
||||
data-testid="mocked-vehicleprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||
class="makeStyles-paper-0"
|
||||
>
|
||||
<table
|
||||
class="MuiTable-root"
|
||||
@@ -10389,6 +10389,43 @@ exports[`App Route /vehicle-add authenticated 1`] = `
|
||||
Data Logger Enabled
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="MuiFormControlLabel-root"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-0"
|
||||
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"
|
||||
>
|
||||
DTC Enabled
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
@@ -12267,7 +12304,7 @@ exports[`App Route /vehicles authenticated 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||
class="makeStyles-paper-0"
|
||||
>
|
||||
<table
|
||||
class="MuiTable-root"
|
||||
|
||||
@@ -518,6 +518,43 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
Data Logger Enabled
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="MuiFormControlLabel-root"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-0"
|
||||
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"
|
||||
>
|
||||
DTC Enabled
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
|
||||
@@ -38,6 +38,7 @@ const MainForm = () => {
|
||||
const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
|
||||
const [maxMemBufferSize, setMaxMemBufferSize] = useState(0);
|
||||
const [maxDiskBufferSize, setMaxDiskBufferSize] = useState(0);
|
||||
const [dtcEnabled, setDTCEnabled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTitle("Add Vehicle");
|
||||
@@ -65,6 +66,10 @@ const MainForm = () => {
|
||||
setDataLoggerEnabled(event.target.checked);
|
||||
}
|
||||
|
||||
const onDtcEnabledChange = (event) => {
|
||||
setDTCEnabled(event.target.checked);
|
||||
}
|
||||
|
||||
const onMaxMemBufferSizeChange = (event) => {
|
||||
setMaxMemBufferSize(event.target.value);
|
||||
}
|
||||
@@ -84,7 +89,8 @@ const MainForm = () => {
|
||||
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
|
||||
max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0,
|
||||
dtc_enabled: dtcEnabled
|
||||
}
|
||||
};
|
||||
|
||||
@@ -166,6 +172,12 @@ const MainForm = () => {
|
||||
disabled={!canbusEnabled}
|
||||
/>
|
||||
} label="Data Logger Enabled" />
|
||||
<FormControlLabel control={
|
||||
<Checkbox
|
||||
checked={dtcEnabled}
|
||||
onChange={onDtcEnabledChange}
|
||||
/>
|
||||
} label="DTC Enabled" />
|
||||
</FormGroup>
|
||||
<TextField
|
||||
id="max_disk_buffer_size"
|
||||
|
||||
@@ -127,7 +127,7 @@ exports[`VehicleTable Render 1`] = `
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||
class="makeStyles-paper-0"
|
||||
>
|
||||
<table
|
||||
class="MuiTable-root"
|
||||
|
||||
@@ -919,7 +919,7 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
<span
|
||||
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
|
||||
>
|
||||
Data Logger Enabled
|
||||
DTC Enabled
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -150,7 +150,7 @@ const MainForm = () => {
|
||||
data_logger_enabled: canbusEnabled ? dataLoggerEnabled : false,
|
||||
max_mem_buffer_size: canbusEnabled ? parseInt(maxMemBufferSize) : 0,
|
||||
max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0,
|
||||
dtc_enabled: canbusEnabled ? dtcEnabled : false
|
||||
dtc_enabled: dtcEnabled
|
||||
},
|
||||
debug_mask: debugMaskEl.current?.value
|
||||
};
|
||||
@@ -382,9 +382,8 @@ const MainForm = () => {
|
||||
<Checkbox
|
||||
checked={dtcEnabled}
|
||||
onChange={onDtcEnabledChange}
|
||||
disabled={!canbusEnabled}
|
||||
/>
|
||||
} label="Data Logger Enabled" />
|
||||
} label="DTC Enabled" />
|
||||
</FormGroup>
|
||||
<TextField
|
||||
id="max_disk_buffer_size"
|
||||
|
||||
@@ -122,14 +122,17 @@ export const FleetProvider = ({ children }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const addFleetVehicle = async (name, vehicle, token) => {
|
||||
const addFleetVehicles = async (name, vehicles, token) => {
|
||||
try {
|
||||
setBusy(true);
|
||||
|
||||
validateFleetName(name);
|
||||
validateVIN(vehicle.vin);
|
||||
|
||||
const result = await api.addFleetVehicle(name, vehicle, token);
|
||||
for (const vin of vehicles.vins) {
|
||||
validateVIN(vin);
|
||||
}
|
||||
|
||||
const result = await api.addFleetVehicles(name, vehicles, token);
|
||||
if (result.error) {
|
||||
throw new Error(`Add fleet vehicle error. ${result.message}`);
|
||||
}
|
||||
@@ -250,7 +253,7 @@ export const FleetProvider = ({ children }) => {
|
||||
fleetVehicles,
|
||||
totalFleetVehicles,
|
||||
getFleetVehicles,
|
||||
addFleetVehicle,
|
||||
addFleetVehicles,
|
||||
deleteFleetVehicle,
|
||||
|
||||
fleetCANFilters,
|
||||
|
||||
@@ -391,14 +391,14 @@ describe("FleetContext", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("addFleetVehicle", () => {
|
||||
describe("addFleetVehicles", () => {
|
||||
beforeEach(async () => {
|
||||
const TestComp = () => {
|
||||
const { busy, addFleetVehicle } = useFleetContext();
|
||||
const { busy, addFleetVehicles } = useFleetContext();
|
||||
const { message, setMessage } = useStatusContext();
|
||||
const add = async (name, vehicle) => {
|
||||
try {
|
||||
await addFleetVehicle(name, vehicle);
|
||||
await addFleetVehicles(name, vehicle);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
@@ -417,8 +417,8 @@ describe("FleetContext", () => {
|
||||
onClick={() => add({})}
|
||||
/>
|
||||
<button
|
||||
data-testid="addFleetVehicle"
|
||||
onClick={() => add("US-TEST", { vin: "TESTVIN1234567890" })}
|
||||
data-testid="addFleetVehicles"
|
||||
onClick={() => add("US-TEST", { vins: ["TESTVIN1234567890"] })}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
@@ -456,8 +456,8 @@ describe("FleetContext", () => {
|
||||
checkBaseResults("Invalid name", "false");
|
||||
});
|
||||
|
||||
it("addFleetVehicle", async () => {
|
||||
fireEvent.click(screen.getByTestId("addFleetVehicle"));
|
||||
it("addFleetVehicles", async () => {
|
||||
fireEvent.click(screen.getByTestId("addFleetVehicles"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
|
||||
);
|
||||
|
||||
@@ -63,7 +63,7 @@ export const useFleetContext = () => ({
|
||||
fleetVehicles,
|
||||
totalFleetVehicles,
|
||||
getFleetVehicles: jest.fn(),
|
||||
addFleetVehicle: jest.fn(),
|
||||
addFleetVehicles: jest.fn(),
|
||||
deleteFleetVehicle: jest.fn(),
|
||||
|
||||
fleetCANFilters,
|
||||
|
||||
@@ -132,7 +132,7 @@ const CarSelectionTable = (props) => {
|
||||
}, [search]);
|
||||
|
||||
return (
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<div className={clsx(classes.paper)}>
|
||||
<Table>
|
||||
<TableHeaderSortable
|
||||
classes={classes}
|
||||
|
||||
@@ -23,51 +23,419 @@ exports[`FleetVehicleAdd Render 1`] = `
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
|
||||
>
|
||||
<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"
|
||||
data-shrink="false"
|
||||
for="vin"
|
||||
id="vin-label"
|
||||
for="search"
|
||||
>
|
||||
VIN
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||
>
|
||||
|
||||
*
|
||||
</span>
|
||||
Search
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="vin"
|
||||
maxlength="17"
|
||||
name="vin"
|
||||
required=""
|
||||
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
|
||||
id="search"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
<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="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
VIN
|
||||
*
|
||||
<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>
|
||||
</legend>
|
||||
</fieldset>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="makeStyles-paper-0"
|
||||
>
|
||||
<table
|
||||
class="MuiTable-root"
|
||||
>
|
||||
<thead
|
||||
class="MuiTableHead-root"
|
||||
>
|
||||
<tr
|
||||
class="MuiTableRow-root MuiTableRow-head"
|
||||
>
|
||||
<th
|
||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-paddingCheckbox"
|
||||
scope="col"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
aria-label="select all desserts"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
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>
|
||||
</th>
|
||||
<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-0"
|
||||
>
|
||||
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"
|
||||
id="mui-0"
|
||||
>
|
||||
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"
|
||||
id="mui-0"
|
||||
>
|
||||
<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
|
||||
class="MuiBox-root MuiBox-root-0 makeStyles-fleetVehicleAddSubmit-0"
|
||||
>
|
||||
<div
|
||||
class="MuiPaper-root MuiAccordion-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
class="MuiButtonBase-root MuiAccordionSummary-root"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiAccordionSummary-content"
|
||||
>
|
||||
<p
|
||||
class="MuiTypography-root MuiTypography-body1"
|
||||
>
|
||||
Additional Options
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiCollapse-root MuiCollapse-hidden"
|
||||
style="min-height: 0px;"
|
||||
>
|
||||
<div
|
||||
class="MuiCollapse-wrapper"
|
||||
>
|
||||
<div
|
||||
class="MuiCollapse-wrapperInner"
|
||||
>
|
||||
<div
|
||||
role="region"
|
||||
>
|
||||
<div
|
||||
class="MuiAccordionDetails-root"
|
||||
>
|
||||
<div
|
||||
class="MuiBox-root MuiBox-root-0"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root"
|
||||
id="demo-row-radio-buttons-group-label"
|
||||
@@ -566,6 +934,13 @@ exports[`FleetVehicleAdd Render 1`] = `
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
|
||||
tabindex="0"
|
||||
@@ -580,6 +955,7 @@ exports[`FleetVehicleAdd Render 1`] = `
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Redirect, useParams } from "react-router";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
@@ -8,7 +9,11 @@ import {
|
||||
FormLabel,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
TextField
|
||||
TextField,
|
||||
Accordion,
|
||||
AccordionSummary,
|
||||
AccordionDetails,
|
||||
Typography,
|
||||
} from "@material-ui/core";
|
||||
|
||||
import useStyles from "../../../../useStyles";
|
||||
@@ -19,11 +24,14 @@ import {
|
||||
import { useStatusContext } from "../../../../Contexts/StatusContext";
|
||||
import { useUserContext } from "../../../../Contexts/UserContext";
|
||||
import { logger } from "../../../../../services/monitoring";
|
||||
import { VehicleProvider } from "../../../../Contexts/VehicleContext";
|
||||
import CarSelectionTable from "../../../../Controls/CarSelectionTable";
|
||||
import SearchField from "../../../../Controls/SearchField";
|
||||
|
||||
const MainForm = () => {
|
||||
const { name } = useParams();
|
||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||
const { addFleetVehicle, busy } = useFleetContext();
|
||||
const { addFleetVehicles, busy } = useFleetContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
@@ -32,7 +40,8 @@ const MainForm = () => {
|
||||
const classes = useStyles();
|
||||
const [redirect, setRedirect] = useState(null);
|
||||
|
||||
const vinEl = useRef(null);
|
||||
const [vins, setVins] = useState([]);
|
||||
const [search, setSearch] = useState("");
|
||||
const [selectedLogLevel, setSelectedLogLevel] = useState("info");
|
||||
const [canbusEnabled, setCANBusEnabled] = useState(true);
|
||||
const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
|
||||
@@ -58,6 +67,30 @@ const MainForm = () => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const handleSearch = (query) => {
|
||||
setVins([]);
|
||||
setSearch(query);
|
||||
};
|
||||
|
||||
const handleSelectAll = (cars) => {
|
||||
setVins(cars);
|
||||
};
|
||||
|
||||
const handleSelect = (event, key) => {
|
||||
try {
|
||||
let newVins;
|
||||
if (event.target.checked) {
|
||||
newVins = [...vins];
|
||||
newVins.push(key);
|
||||
} else {
|
||||
newVins = vins.filter((vin) => vin !== key);
|
||||
}
|
||||
setVins(newVins);
|
||||
} catch (e) {
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const onLogLevelChange = (event) => {
|
||||
setSelectedLogLevel(event.target.value);
|
||||
}
|
||||
@@ -79,11 +112,11 @@ const MainForm = () => {
|
||||
}
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
|
||||
try {
|
||||
const formData = {
|
||||
vin: vinEl.current.value,
|
||||
vins,
|
||||
log_level: selectedLogLevel,
|
||||
canbus: {
|
||||
enabled: canbusEnabled,
|
||||
@@ -93,9 +126,9 @@ const MainForm = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const result = await addFleetVehicle(name, formData, token);
|
||||
const result = await addFleetVehicles(name, formData, token);
|
||||
|
||||
setMessage(`Added ${result.vin}`);
|
||||
setMessage(`Added ${result.vins.join(", ")}`);
|
||||
setRedirect(`/fleet/${name}#vehicles`);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
@@ -110,19 +143,26 @@ const MainForm = () => {
|
||||
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",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
inputRef={vinEl}
|
||||
<SearchField classes={classes} onSearch={handleSearch}/>
|
||||
<VehicleProvider sx={{ height: "auto" }}>
|
||||
<CarSelectionTable
|
||||
classes={classes}
|
||||
token={token}
|
||||
multiSelect={true}
|
||||
search={{search}}
|
||||
selected={vins}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
/>
|
||||
</VehicleProvider>
|
||||
|
||||
<Box className={classes.fleetVehicleAddSubmit}>
|
||||
<Accordion>
|
||||
<AccordionSummary>
|
||||
<Typography>Additional Options</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
|
||||
<RadioGroup
|
||||
row
|
||||
@@ -187,6 +227,10 @@ const MainForm = () => {
|
||||
required
|
||||
fullWidth
|
||||
/>
|
||||
</Box>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
@@ -198,6 +242,7 @@ const MainForm = () => {
|
||||
>
|
||||
{busy ? "Submitting..." : "Submit"}
|
||||
</Button>
|
||||
</Box>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -295,6 +295,14 @@ const useStyles = makeStyles((theme) => ({
|
||||
whiteSpace: "normal",
|
||||
wordWrap: "break-word",
|
||||
},
|
||||
fleetVehicleAddSubmit: {
|
||||
position: "sticky",
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
width: "100%",
|
||||
padding: "16px 0",
|
||||
backgroundColor: "#fafafa",
|
||||
}
|
||||
}));
|
||||
|
||||
export default useStyles;
|
||||
|
||||
@@ -62,8 +62,8 @@ const fleetsAPI = {
|
||||
getFleetVehicles: async () => {
|
||||
return { data: vehicles };
|
||||
},
|
||||
addFleetVehicle: async (_name, vehicle) => {
|
||||
vehicles.push(vehicle.vin);
|
||||
addFleetVehicles: async (_name, vehicle) => {
|
||||
vehicles.push(...vehicle.vins);
|
||||
return vehicle;
|
||||
},
|
||||
deleteFleetVehicle: async (_name, vehicle) => {
|
||||
|
||||
@@ -73,14 +73,14 @@ const fleetsAPI = {
|
||||
.then(fetchRespHandler)
|
||||
.catch(errorHandler),
|
||||
|
||||
addFleetVehicle: async (name, vehicle, token) =>
|
||||
addFleetVehicles: async (name, vehicles, token) =>
|
||||
fetch(`${API_ENDPOINT}/fleet/${name}/vehicle`, {
|
||||
method: "POST",
|
||||
headers: Object.assign(
|
||||
{ "Content-Type": "application/json" },
|
||||
getAuthHeaderOptions(token)
|
||||
),
|
||||
body: JSON.stringify(vehicle),
|
||||
body: JSON.stringify(vehicles),
|
||||
})
|
||||
.then(fetchRespHandler)
|
||||
.catch(errorHandler),
|
||||
|
||||
Reference in New Issue
Block a user