admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'development' into main

Browse Source
This commit is contained in:
jwu-fisker
2021-05-18 12:58:05 -07:00
parent c8577ea398 64995ef7a6
commit 859c16d174
9 changed files with 811 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

675
src/components/App/__snapshots__/App.test.js.snap
View File

@@ -299,17 +299,17 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
data-testid="mocked-userprovider"
>
<div
class="makeStyles-root-551"
class="makeStyles-root-559"
>
<header
class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-552 makeStyles-appBarShift-553 mui-00000fixed MuiPaper-elevation4"
class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-560 makeStyles-appBarShift-561 mui-00000fixed MuiPaper-elevation4"
>
<div
class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
>
<button
aria-label="open drawer"
class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-554 MuiIconButton-colorInherit MuiIconButton-edgeStart"
class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-562 MuiIconButton-colorInherit MuiIconButton-edgeStart"
tabindex="0"
type="button"
>
@@ -337,7 +337,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
Fisker OTA Portal
</h6>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-561 MuiButton-colorInherit"
class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-569 MuiButton-colorInherit"
tabindex="0"
type="button"
>
@@ -353,13 +353,13 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
</div>
</header>
<div
class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-556"
class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-564"
>
<div
class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-557 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-565 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
>
<div
class="makeStyles-drawerHeader-558"
class="makeStyles-drawerHeader-566"
>
<button
class="MuiButtonBase-root MuiIconButton-root"
@@ -505,10 +505,10 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
</div>
</div>
<main
class="makeStyles-content-559 makeStyles-contentShift-560"
class="makeStyles-content-567 makeStyles-contentShift-568"
>
<div
class="makeStyles-drawerHeader-558"
class="makeStyles-drawerHeader-566"
/>
<main
class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -517,7 +517,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
data-testid="mocked-updatesprovider"
>
<div
class="makeStyles-paper-540"
class="makeStyles-paper-548"
>
<h1
class="MuiTypography-root MuiTypography-h5"
@@ -527,7 +527,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
</h1>
<form
action="{onSubmit}"
class="makeStyles-form-542"
class="makeStyles-form-550"
novalidate=""
>
<div
@@ -631,10 +631,10 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
data-testid="mocked-vehicleprovider"
>
<div
class="makeStyles-form-542"
class="makeStyles-form-550"
>
<div
class="MuiFormControl-root makeStyles-formControlInline-545"
class="MuiFormControl-root makeStyles-formControlInline-553"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
@@ -676,11 +676,11 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
</svg>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-563 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-571 MuiOutlinedInput-notchedOutline"
style="padding-left: 8px;"
>
<legend
class="PrivateNotchedOutline-legend-564"
class="PrivateNotchedOutline-legend-572"
style="width: 0.01px;"
>
<span>
@@ -691,7 +691,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
</div>
</div>
<div
class="MuiFormControl-root makeStyles-formControlInline-545"
class="MuiFormControl-root makeStyles-formControlInline-553"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
@@ -733,11 +733,11 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
</svg>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-563 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-571 MuiOutlinedInput-notchedOutline"
style="padding-left: 8px;"
>
<legend
class="PrivateNotchedOutline-legend-564"
class="PrivateNotchedOutline-legend-572"
style="width: 0.01px;"
>
<span>
@@ -748,14 +748,14 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
</div>
</div>
<div
class="makeStyles-labelInline-546"
class="makeStyles-labelInline-554"
>
No Cars Selected
</div>
</div>
</div>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-543 MuiButton-containedPrimary MuiButton-fullWidth"
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-551 MuiButton-containedPrimary MuiButton-fullWidth"
tabindex="0"
type="submit"
>
@@ -2132,17 +2132,17 @@ exports[`App Route /page-not-found authenticated 1`] = `
data-testid="mocked-userprovider"
>
<div
class="makeStyles-root-526"
class="makeStyles-root-534"
>
<header
class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-527 makeStyles-appBarShift-528 mui-00000fixed MuiPaper-elevation4"
class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-535 makeStyles-appBarShift-536 mui-00000fixed MuiPaper-elevation4"
>
<div
class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
>
<button
aria-label="open drawer"
class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-529 MuiIconButton-colorInherit MuiIconButton-edgeStart"
class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-537 MuiIconButton-colorInherit MuiIconButton-edgeStart"
tabindex="0"
type="button"
>
@@ -2170,7 +2170,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
Fisker OTA Portal
</h6>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-536 MuiButton-colorInherit"
class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-544 MuiButton-colorInherit"
tabindex="0"
type="button"
>
@@ -2186,13 +2186,13 @@ exports[`App Route /page-not-found authenticated 1`] = `
</div>
</header>
<div
class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-531"
class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-539"
>
<div
class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-532 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-540 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
>
<div
class="makeStyles-drawerHeader-533"
class="makeStyles-drawerHeader-541"
>
<button
class="MuiButtonBase-root MuiIconButton-root"
@@ -2338,16 +2338,16 @@ exports[`App Route /page-not-found authenticated 1`] = `
</div>
</div>
<main
class="makeStyles-content-534 makeStyles-contentShift-535"
class="makeStyles-content-542 makeStyles-contentShift-543"
>
<div
class="makeStyles-drawerHeader-533"
class="makeStyles-drawerHeader-541"
/>
<main
class="MuiContainer-root MuiContainer-maxWidthLg"
>
<div
class="makeStyles-paper-515"
class="makeStyles-paper-523"
>
<h1
class="MuiTypography-root MuiTypography-h2"
@@ -2368,10 +2368,10 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
data-testid="mocked-userprovider"
>
<div
class="makeStyles-root-501"
class="makeStyles-root-509"
>
<header
class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-502 mui-00000fixed MuiPaper-elevation4"
class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-510 mui-00000fixed MuiPaper-elevation4"
>
<div
class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2384,16 +2384,16 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
</div>
</header>
<main
class="makeStyles-content-509"
class="makeStyles-content-517"
>
<div
class="makeStyles-drawerHeader-508"
class="makeStyles-drawerHeader-516"
/>
<main
class="MuiContainer-root MuiContainer-maxWidthLg"
>
<div
class="makeStyles-paper-490"
class="makeStyles-paper-498"
>
<h1
class="MuiTypography-root MuiTypography-h2"
@@ -4104,185 +4104,486 @@ exports[`App Route /vehicle-status authenticated 1`] = `
class="MuiContainer-root MuiContainer-maxWidthLg"
>
<div
data-testid="mocked-updatesprovider"
data-testid="mocked-vehicleprovider"
>
<div
class="makeStyles-paper-465"
style="height: 700px; width: 100%;"
data-testid="mocked-updatesprovider"
>
<h1
class="MuiTypography-root MuiTypography-h5"
>
FISKER123
Updates
</h1>
<div
class="MuiTableContainer-root"
class="makeStyles-paper-465"
style="height: 700px; width: 100%;"
>
<table
class="MuiTable-root"
<h1
class="MuiTypography-root MuiTypography-h5"
>
<thead
class="MuiTableHead-root"
FISKER123
Updates
</h1>
<div
class="MuiTableContainer-root"
>
<table
class="MuiTable-root"
>
<tr
class="MuiTableRow-root MuiTableRow-head"
<thead
class="MuiTableHead-root"
>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
<tr
class="MuiTableRow-root MuiTableRow-head"
>
ID
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
Update
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
Status
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
Created
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
Updated
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root"
/>
<tfoot
class="MuiTableFooter-root"
>
<tr
class="MuiTableRow-root MuiTableRow-footer"
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
ID
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
Update
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
Status
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
Created
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
Updated
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root"
/>
<tfoot
class="MuiTableFooter-root"
>
<td
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
colspan="5"
<tr
class="MuiTableRow-root MuiTableRow-footer"
>
<div
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
<td
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
colspan="5"
>
<div
class="MuiTablePagination-spacer"
/>
<p
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
id="mui-00000"
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
>
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"
<div
class="MuiTablePagination-spacer"
/>
<p
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
id="mui-00000"
>
<option
class="MuiTablePagination-menuItem"
value="5"
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-00000"
>
5
</option>
<option
class="MuiTablePagination-menuItem"
value="10"
<option
class="MuiTablePagination-menuItem"
value="5"
>
5
</option>
<option
class="MuiTablePagination-menuItem"
value="10"
>
10
</option>
<option
class="MuiTablePagination-menuItem"
value="25"
>
25
</option>
</select>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
focusable="false"
viewBox="0 0 24 24"
>
10
</option>
<option
class="MuiTablePagination-menuItem"
value="25"
<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"
>
25
</option>
</select>
<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="MuiGrid-root makeStyles-root-476 MuiGrid-container MuiGrid-spacing-xs-2"
>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-12 MuiGrid-grid-lg-6"
>
<div
class="makeStyles-form-467"
>
<div
class="MuiFormControl-root makeStyles-formControlInline-470"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
data-shrink="true"
for="send-command"
style="background-color: White;"
>
Command
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
>
<select
aria-invalid="false"
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
id="send-command"
name="send-command"
>
<option
value="LFRD"
>
Lock front right door
</option>
<option
value="UFRD"
>
Unlock front right door
</option>
<option
value="LFLD"
>
Lock front left door
</option>
<option
value="UFLD"
>
Unlock front left door
</option>
<option
value="LRRD"
>
Lock rear right door
</option>
<option
value="URRD"
>
Unlock rear right door
</option>
<option
value="LRLD"
>
Lock rear left door
</option>
<option
value="URLD"
>
Unlock rear left door
</option>
<option
value="LTRK"
>
Lock trunk
</option>
<option
value="UTRK"
>
Unlock trunk
</option>
<option
value="OWIN"
>
Open Windows
</option>
<option
value="CWIN"
>
Close Windows
</option>
<option
value="FLASH"
>
Flash headlights
</option>
</select>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-488 MuiOutlinedInput-notchedOutline"
style="padding-left: 8px;"
>
<legend
class="PrivateNotchedOutline-legend-489"
style="width: 0.01px;"
>
<span>
​
</span>
</legend>
</fieldset>
</div>
</div>
<span
aria-disabled="false"
aria-label="send command"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary"
role="button"
tabindex="0"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</span>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-12 MuiGrid-grid-lg-6"
style="text-align: right;"
>
<div
class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-align-items-xs-center"
>
<div
class="MuiGrid-root MuiGrid-item"
>
<label
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementTop"
>
<span
class="MuiSwitch-root"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-492 MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-checked-493 Mui-checked"
>
<span
class="MuiIconButton-label"
>
<input
checked=""
class="PrivateSwitchBase-input-495 MuiSwitch-input"
name="logStart"
type="checkbox"
value=""
/>
<span
class="MuiSwitch-thumb"
/>
</span>
<span
class="MuiTouchRipple-root"
/>
</span>
<span
class="MuiSwitch-track"
/>
</span>
<span
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
>
Logging
</span>
</label>
</div>
<div
class="MuiGrid-root MuiGrid-item"
>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
data-shrink="false"
for="log-filter"
id="log-filter-label"
>
Filter
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="log-filter"
maxlength="17"
name="log-filter"
type="text"
value=""
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-488 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-490"
>
<span>
Filter
</span>
</legend>
</fieldset>
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item"
>
<div
class="MuiFormControl-root MuiTextField-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
data-shrink="true"
for="log-frequency"
id="log-frequency-label"
>
Frequency
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input"
id="log-frequency"
type="number"
value="0"
/>
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item"
>
<span
aria-disabled="false"
aria-label="send log command"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary"
role="button"
tabindex="0"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"
/>
</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>
</span>
<span
class="MuiTouchRipple-root"
/>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

123
src/components/Cars/LogFilter/index.jsx Normal file
View File

@@ -0,0 +1,123 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import {
FormControlLabel,
Grid,
IconButton,
TextField,
Switch,
} from "@material-ui/core";
import SendIcon from "@material-ui/icons/Send";
import { useVehicleContext } from "../../Contexts/VehicleContext";
import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
const LogFilter = ({ vin }) => {
const { sendLogFilter, busy } = useVehicleContext();
const {
token: {
idToken: { jwtToken: token },
},
} = useUserContext();
const { setMessage } = useStatusContext();
const [filter, setFilter] = useState("");
const [enableLog, setEnableLog] = useState(true);
const [freq, setFreq] = useState(0);
const changeFilterHandler = (e) => {
setFilter(e.target.value);
};
const changeStartHandler = (e) => {
setEnableLog(e.target.checked);
};
const changeFreqHandler = (e) => {
setFreq(e.target.value);
};
const clickHandler = async (e) => {
try {
const data = {
enable: enableLog,
frequency: freq,
filter,
};
await sendLogFilter(vin, data, token);
setMessage(`Sent log command to ${vin}`);
} catch (e) {
setMessage(e.message);
}
};
return (
<Grid
container
direction="row"
justify="flex-start"
alignItems="center"
spacing={2}
>
<Grid item>
<FormControlLabel
control={
<Switch
checked={enableLog}
onChange={changeStartHandler}
name="logStart"
color="primary"
/>
}
labelPlacement="top"
label="Logging"
/>
</Grid>
<Grid item>
<TextField
id="log-filter"
name="log-filter"
label="Filter"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "17",
}}
disabled={!enableLog}
value={filter}
onChange={changeFilterHandler}
/>
</Grid>
<Grid item>
<TextField
id="log-frequency"
label="Frequency"
type="number"
disabled={!enableLog}
InputLabelProps={{
shrink: true,
}}
value={freq}
onChange={changeFreqHandler}
/>
</Grid>
<Grid item>
<IconButton
color="primary"
aria-label="send log command"
component="span"
onClick={clickHandler}
disabled={busy}
>
<SendIcon fontSize="large" />
</IconButton>
</Grid>
</Grid>
);
};
LogFilter.propTypes = {
vin: PropTypes.string.isRequired,
};
export default LogFilter;

81
src/components/Cars/SendCommand/index.jsx Normal file
View File

@@ -0,0 +1,81 @@
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { FormControl, IconButton, InputLabel, Select } from "@material-ui/core";
import SendIcon from "@material-ui/icons/Send";
import { useVehicleContext } from "../../Contexts/VehicleContext";
import commands from "../../../services/commands";
import useStyles from "../../useStyles";
import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
const SendCommand = ({ vin }) => {
const classes = useStyles();
const { sendCommand, busy } = useVehicleContext();
const {
token: {
idToken: { jwtToken: token },
},
} = useUserContext();
const { setMessage } = useStatusContext();
const [command, setCommand] = useState("");
const changeHandler = (e) => {
setCommand(e.target.value);
};
const clickHandler = async (e) => {
try {
await sendCommand(vin, command, token);
setMessage(`Sent command to ${vin}`);
} catch (e) {
setMessage(e.message);
}
};
useEffect(() => {
if (!commands || commands.length === 0) return;
setCommand(commands[0].value);
}, []);
return (
<div className={classes.form}>
<FormControl className={classes.formControlInline} variant="outlined">
<InputLabel htmlFor="send-command" style={{ backgroundColor: "White" }}>
Command
</InputLabel>
<Select
native
value={command}
variant="outlined"
inputProps={{
name: "send-command",
id: "send-command",
}}
onChange={changeHandler}
>
{commands.map((item) => (
<option key={item.value} value={item.value}>
{item.label}
</option>
))}
</Select>
</FormControl>
<IconButton
color="primary"
aria-label="send command"
component="span"
onClick={clickHandler}
disabled={busy}
>
<SendIcon fontSize="large" />
</IconButton>
</div>
);
};
SendCommand.propTypes = {
vin: PropTypes.string.isRequired,
};
export default SendCommand;

21
src/components/Cars/Status/index.jsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import { useParams } from "react-router";
import {
Grid,
Table,
TableBody,
TableCell,
@@ -16,10 +17,14 @@ import {
UpdatesProvider,
useUpdatesContext,
} from "../../Contexts/UpdatesContext";
import { VehicleProvider } from "../../Contexts/VehicleContext";
import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import { LocalDateTimeString } from "../../../utils/dates";
import SendCommand from "../SendCommand";
import LogFilter from "../LogFilter";
const MainForm = () => {
const { vin } = useParams();
@@ -109,14 +114,24 @@ const MainForm = () => {
</TableFooter>
</Table>
</TableContainer>
<Grid container className={classes.root} spacing={2}>
<Grid item lg={6} md={12}>
<SendCommand vin={vin} />
</Grid>
<Grid item lg={6} md={12} style={{ textAlign: "right" }}>
<LogFilter vin={vin} />
</Grid>
</Grid>
</div>
);
};
const CarUpdates = () => (
<UpdatesProvider>
<MainForm />
</UpdatesProvider>
<VehicleProvider>
<UpdatesProvider>
<MainForm />
</UpdatesProvider>
</VehicleProvider>
);
export default CarUpdates;

26
src/components/Contexts/VehicleContext.jsx
View File

@@ -84,6 +84,30 @@ export const VehicleProvider = ({ children }) => {
}
};
const sendCommand = async (vin, command, token) => {
try {
setBusy(true);
const result = await api.sendCommand(vin, command, token);
if (result.error)
throw new Error(`Send command error. ${result.message}`);
return result;
} finally {
setBusy(false);
}
};
const sendLogFilter = async (vin, filter, token) => {
try {
setBusy(true);
const result = await api.sendLog(vin, filter, token);
if (result.error)
throw new Error(`Send log filter error. ${result.message}`);
return result;
} finally {
setBusy(false);
}
};
return (
<VehicleContext.Provider
value={{
@@ -96,6 +120,8 @@ export const VehicleProvider = ({ children }) => {
addVehicle,
getModels,
getYears,
sendCommand,
sendLogFilter,
}}
>
{children}

8
src/components/Contexts/__mocks__/VehicleContext.jsx
View File

@@ -25,6 +25,14 @@ export const useVehicleContext = () => ({
getYears: jest.fn(() => {
years = [2023, 2024];
}),
sendCommand: jest.fn((vin, command, token) => ({
vin,
command,
})),
sendLogFilter: jest.fn((vin, filter, token) => ({
vin,
filter,
})),
});
export const setBusy = (val) => {

8
src/services/__mocks__/vehicles.js
View File

@@ -25,6 +25,14 @@ const vehiclesAPI = {
data: [2021, 2022],
};
},
sendCommand: async (vin, command, token) => {
return {
vin, command,
}
},
sendLog: async (vin, filter, token) => {
return Object.assign(filter, {vin});
},
};
export default vehiclesAPI;

42
src/services/commands.js Normal file
View File

@@ -0,0 +1,42 @@
const Commands = [{
value: "LFRD",
label: "Lock front right door",
},{
value: "UFRD",
label: "Unlock front right door",
},{
value: "LFLD",
label: "Lock front left door",
},{
value: "UFLD",
label: "Unlock front left door",
},{
value: "LRRD",
label: "Lock rear right door",
},{
value: "URRD",
label: "Unlock rear right door",
},{
value: "LRLD",
label: "Lock rear left door",
},{
value: "URLD",
label: "Unlock rear left door",
},{
value: "LTRK",
label: "Lock trunk",
},{
value: "UTRK",
label: "Unlock trunk",
},{
value: "OWIN",
label: "Open Windows",
},{
value: "CWIN",
label: "Close Windows",
},{
value: "FLASH",
label: "Flash headlights",
}];
export default Commands;

17
src/services/vehicles.js
View File

@@ -30,6 +30,23 @@ const vehiclesAPI = {
headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
})
.then(fetchRespHandler),
sendCommand: async (vin, command, token) => fetch(`${API_ENDPOINT}/vehiclecommand`, {
method: "POST",
headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
body: JSON.stringify({
vin, command,
}),
})
.then(fetchRespHandler),
sendLog: async (vin, filter, token) => fetch(`${API_ENDPOINT}/vehiclelog`, {
method: "POST",
headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
body: JSON.stringify(Object.assign(filter, {vin})),
})
.then(fetchRespHandler),
};
export default vehiclesAPI;