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

Merge branch 'release/0.9.0'

Browse Source
This commit is contained in:
jwu-fisker
2023-05-04 16:30:00 -07:00
parent dce36632a4 5e91abc2ba
commit 196c69120b
36 changed files with 1378 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/App/App.test.js
View File

@@ -51,6 +51,7 @@ describe("App", () => {
beforeAll(() => {
global.URL.createObjectURL = jest.fn();
addSnapshotSerializer(expect);
jest.setTimeout(10000);
}, 60000);
afterEach(() => {

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

File diff suppressed because it is too large Load Diff

5
src/components/Cars/CANSignals/index.jsx
View File

@@ -17,6 +17,9 @@ const Main = ({ vin }) => {
useEffect(() => {
setVIN(vin);
return () => {
setVIN(null)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [vin]);
@@ -45,7 +48,7 @@ const Main = ({ vin }) => {
};
const CANSignals = (props) => (
<CANSignalProvider {...{token:props.token}}>
<CANSignalProvider {...{ token: props.token }}>
<Main {...props} />
</CANSignalProvider>
);

6
src/components/Cars/Status/DigitalTwinTab.jsx
View File

@@ -10,6 +10,7 @@ import {
VehicleProvider
} from "../../Contexts/VehicleContext";
import DigitalTwin from "../../DigitalTwin";
import VehiclePathsMap from "../../VehiclePathsMap";
import useStyles from "../../useStyles";
const REQUEST_INTERVAL = 10000;
@@ -57,7 +58,10 @@ const Main = (props) => {
<div>
<b>ICC Connected</b>: {carState?.online_hmi.toString()}
</div>
<DigitalTwin {...carState} />
<DigitalTwin {...carState} vin={vin} />
<div style={{ width: '100vh' }}>
<VehiclePathsMap vinsToShowOnMapColors={new Map([[vin, 'navy']])} lookbackHours={24} />
</div>
</>
)}
</div>

2
src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
View File

@@ -195,7 +195,7 @@ exports[`CarUpdatesTab Render 1`] = `
>
<td
class="MuiTableCell-root MuiTableCell-footer MuiTableCell-alignCenter"
colspan="7"
colspan="8"
>
No Car Updates
</td>

128
src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
View File

@@ -220,6 +220,134 @@ exports[`DigitalTwinTab Render 1`] = `
</p>
</div>
</div>
<div
style="width: 100vh;"
>
<div
data-testid="mocked-vehicleprovider"
>
<div
class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
style="width: 100%; height: 900px; position: relative;"
tabindex="0"
>
<div
class="leaflet-pane leaflet-map-pane"
style="left: 0px; top: 0px;"
>
<div
class="leaflet-pane leaflet-tile-pane"
>
<div
class="leaflet-layer "
style="z-index: 1;"
>
<div
class="leaflet-tile-container leaflet-zoom-animated"
style="z-index: 18; left: 0px; top: 0px;"
>
<img
alt=""
class="leaflet-tile"
role="presentation"
src="https://b.tile.openstreetmap.org/5/7/12.png"
style="width: 256px; height: 256px; left: -126px; top: -114px;"
/>
</div>
</div>
</div>
<div
class="leaflet-pane leaflet-overlay-pane"
/>
<div
class="leaflet-pane leaflet-shadow-pane"
/>
<div
class="leaflet-pane leaflet-marker-pane"
/>
<div
class="leaflet-pane leaflet-tooltip-pane"
/>
<div
class="leaflet-pane leaflet-popup-pane"
/>
</div>
<div
class="leaflet-control-container"
>
<div
class="leaflet-top leaflet-left"
>
<div
class="leaflet-control-zoom leaflet-bar leaflet-control"
>
<a
aria-disabled="false"
aria-label="Zoom in"
class="leaflet-control-zoom-in"
href="#"
role="button"
title="Zoom in"
>
<span
aria-hidden="true"
>
+
</span>
</a>
<a
aria-disabled="false"
aria-label="Zoom out"
class="leaflet-control-zoom-out"
href="#"
role="button"
title="Zoom out"
>
<span
aria-hidden="true"
>
−
</span>
</a>
</div>
</div>
<div
class="leaflet-top leaflet-right"
/>
<div
class="leaflet-bottom leaflet-left"
/>
<div
class="leaflet-bottom leaflet-right"
>
<div
class="leaflet-control-attribution leaflet-control"
>
<a
href="https://leafletjs.com"
title="A JavaScript library for interactive maps"
>
Leaflet
</a>
<span
aria-hidden="true"
>
|
</span>
©
<a
href="http://osm.org/copyright"
>
OpenStreetMap
</a>
contributors
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

170
src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap
View File

@@ -273,49 +273,94 @@ exports[`ECUsTab Render 1`] = `
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
ECUA
<span
class=""
title="ECUA"
>
ECUA
</span>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
SWVERSION
<span
class=""
title="SWVERSION"
>
SWVERSION
</span>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
HWVERSION
<span
class=""
title="HWVERSION"
>
HWVERSION
</span>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
VENDOR
<span
class=""
title="VENDOR"
>
VENDOR
</span>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
SUPPLIER_SW_VERSION
<span
class=""
title="SUPPLIER_SW_VERSION"
>
SUPPLIER_SW_VERSION
</span>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
SERIAL_NUMBER
<span
class=""
title="SERIAL_NUMBER"
>
SERIAL_NUMBER
</span>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
BOOT_LOADER
<span
class=""
title="BOOT_LOADER"
>
BOOT_LOADER
</span>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
CONFIG
<span
class=""
title="CONFIG"
>
CONFIG
</span>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
FINGERPRINT
<span
class=""
title="FINGERPRINT"
>
FINGERPRINT
</span>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -327,40 +372,85 @@ exports[`ECUsTab Render 1`] = `
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
ECUB
<span
class=""
title="ECUB"
>
ECUB
</span>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
SWVERSION
<span
class=""
title="SWVERSION"
>
SWVERSION
</span>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
HWVERSION
<span
class=""
title="HWVERSION"
>
HWVERSION
</span>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
CONFIG
<span
class=""
title="none"
/>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
<span
class=""
title="none"
/>
</td>
<td
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
<span
class=""
title="none"
/>
</td>
<td
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
<span
class=""
title="none"
/>
</td>
<td
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
<span
class=""
title="CONFIG"
>
CONFIG
</span>
</td>
<td
class="MuiTableCell-root MuiTableCell-body makeStyles-limitWidthTableCell-0 MuiTableCell-alignCenter"
>
<span
class=""
title="none"
/>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>

16
src/components/Contexts/ManifestsContext.jsx
View File

@@ -80,12 +80,28 @@ export const ManifestsProvider = ({ children }) => {
return result;
};
const migrateManifest = async (package_id, token) => {
let result;
try{
setBusy(true)
result = await api.migrateManifest(package_id, token)
if(result.error)
throw new Error(`failed to migrate manifest. ${result.message}`);
} finally {
setBusy(false)
}
return result
}
return (
<ManifestsContext.Provider
value={{
busy,
manifests,
totalManifests,
migrateManifest,
updateManifest,
getManifest,
getManifests,

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

@@ -88,7 +88,19 @@ export const VehicleProvider = ({ children }) => {
setBusy(true);
const result = await api.getLocations(token);
if (result.error)
throw new Error(`Get locations error. ${result.message}`);
throw new Error(`Get locations vehicle paths error. ${result.message}`);
return result;
} finally {
setBusy(false);
}
};
const getLocationsVehiclePaths = async (token, vinsParam) => {
try {
setBusy(true);
const result = await api.getLocationsVehiclePaths(token, vinsParam);
if (result.error)
throw new Error(`Get locations vehicle paths error. ${result.message}`);
return result;
} finally {
setBusy(false);
@@ -263,6 +275,7 @@ export const VehicleProvider = ({ children }) => {
getCANSignals,
getECUs,
getLocations,
getLocationsVehiclePaths,
getModels,
getState,
getYears,

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

@@ -98,15 +98,14 @@ export const useVehicleContext = () => ({
vehicles,
years,
addVehicle: jest.fn(),
getConnections: jest.fn((vins, _token) => {
const result = {};
vins.forEach((vin) => {
result[vin] = true;
});
return result;
}),
getConnections: jest
.fn().mockImplementation((vins, _token) => {
const result = {};
vins.forEach((vin) => {
result[vin] = true;
});
return Promise.resolve(result);
}),
getECUs: jest.fn(() => {
return {
data: [
@@ -134,6 +133,13 @@ export const useVehicleContext = () => ({
.mockResolvedValue([
{ altitude: 5, longitude: 10, latitude: 15, vin: "TESTVIN123" },
]),
getLocationsVehiclePaths: jest
.fn()
.mockResolvedValue({
// tests only pass without mocking the data here
// '3FAFP13P31R199430': [[16.891136999999986, 26.832352999999955], [56.891136999999986, 66.832352999999955], [26.891136999999986, 36.832352999999955]],
// '3FAFP13P71R199060': [[36.891136999999986, 46.832352999999955], [76.891136999999986, 16.832352999999955]],
}),
getModels: jest.fn(() => {
models = ["Ocean", "PEAR"];
}),

11
src/components/Controls/CarECUsTable/index.jsx
View File

@@ -4,7 +4,8 @@ import {
TableCell,
TableFooter,
TablePagination,
TableRow
TableRow,
Tooltip
} from "@material-ui/core";
import clsx from "clsx";
import React, { useEffect, useState } from "react";
@@ -136,7 +137,13 @@ const CarECUsTable = ({ vin, token, classes }) => {
{tableColumns.map((column, j) => {
const key = `${row.ecu + i}${column.id}`
if (column.id === "updated_at") return (<TableCell key={key} align="center">{LocalDateTimeString(row.updated)}</TableCell>);
return (<TableCell key={key} align="center">{row[column.id]}</TableCell>);
return (
<TableCell key={key} align="center" className={classes.limitWidthTableCell}>
<Tooltip title={`${row[column.id] || 'none'}`}>
<span>{row[column.id]}</span>
</Tooltip>
</TableCell>
);
})}
</TableRow>
))}

1
src/components/Controls/CarUpdateStatusProgress/Statuses.js
View File

@@ -1,5 +1,6 @@
const Statuses = {
Pending: "pending",
Sent: "sent",
ManifestReceived: "manifest_received",
ManifestAccepted: "manifest_accepted",
ManifestRejected: "manifest_rejected",

6
src/components/Controls/CarUpdateStatusProgress/index.jsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import { CheckCircle, RadioButtonUnchecked, Error } from "@material-ui/icons";
import Typography from "@material-ui/core/Typography";
import { CheckCircle, Error, RadioButtonUnchecked } from "@material-ui/icons";
import clsx from "clsx";
import React, { useEffect, useState } from "react";
import CircularProgress from "../CircularProgress";
import s from "./Statuses";
@@ -13,7 +13,7 @@ const CompleteStatus = 100;
const PHASES = [
{
label: "Pending",
events: [s.Pending],
events: [s.Pending, s.Sent],
progress: () => CompleteStatus,
},
{

4
src/components/Controls/CarUpdatesTable/index.jsx
View File

@@ -213,11 +213,11 @@ const MainForm = ({ vin, token }) => {
<TableFooter>
<TableRow>
{totalCarUpdates === 0 ? (
<TableCell colSpan={7} align="center">No Car Updates</TableCell>
<TableCell colSpan={8} align="center">No Car Updates</TableCell>
) : (
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
colSpan={7}
colSpan={8}
count={totalCarUpdates}
rowsPerPage={pageSize}
page={pageIndex}

6
src/components/DTCTimeline/DTCTimeline/index.jsx
View File

@@ -48,6 +48,11 @@ const MainForm = ({ vin }) => {
id: "status_byte",
label: "Status Code",
},
{
id: "ErrorText",
label: "Error Text",
no_sort : true,
},
{
id: "epoch_usec",
label: "Date",
@@ -196,6 +201,7 @@ const MainForm = ({ vin }) => {
<TableCell>{dtc.ecu_name}</TableCell>
<TableCell>{dtc.trouble_code}</TableCell>
<TableCell>{dtc.status_byte}</TableCell>
<TableCell>{dtc.trouble_code_information?.ErrorText?.Text}</TableCell>
<TableCell>{formatDate(dtc.epoch_usec)}</TableCell>
</TableRow>
))}

7
src/components/Layouts/SideMenu.jsx
View File

@@ -9,11 +9,11 @@ import HomeIcon from "@material-ui/icons/Home";
import SettingsInputCompositeIcon from "@material-ui/icons/SettingsInputComposite";
import { default as React, useEffect, useState } from "react";
import { getCustomDashboardSubmenu } from "../../services/customDashboards";
import { hasRole, Permissions } from "../../utils/roles";
import { useUserContext } from "../Contexts/UserContext";
import SupersetDashboardList from "../SupersetDashboardList/SupersetDashboardList";
import { ExpandableSideMenuItem, MenuItem } from "./MenuItem";
import { getCustomDashboardSubmenu } from "../../services/customDashboards"
const menuData = [
{
label: "Home",
@@ -47,10 +47,9 @@ const menuData = [
},
{
label: "Datascope",
to: null,
url: `${process.env.REACT_APP_SUPERSET_URL}/login`,
icon: <AssessmentIcon />,
rolesPerProvider: Permissions.FiskerMagnaRead,
component: SupersetDashboardList,
submenus: getCustomDashboardSubmenu(Permissions.FiskerMagnaRead),
},
{

120
src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
View File

@@ -190,11 +190,14 @@ exports[`SideMenu Authenticated 1`] = `
</li>
<span>
<li>
<div
<a
aria-disabled="false"
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-0 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
href="https://dev-superset.cloud.fiskerinc.com/login"
rel="noopener"
role="button"
tabindex="0"
target="_blank"
>
<div
class="MuiListItemIcon-root"
@@ -222,38 +225,35 @@ exports[`SideMenu Authenticated 1`] = `
<span
class="MuiTouchRipple-root"
/>
</div>
<ul
style="margin-left: 50px;"
>
<li>
<a
aria-disabled="false"
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
href="/datascope/00000000-0000-0000-0000-000000000000"
role="button"
tabindex="0"
>
<div
class="MuiListItemText-root"
>
<span
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
>
test title
</span>
</div>
<span
class="MuiTouchRipple-root"
/>
</a>
</li>
</ul>
</a>
</li>
</span>
<ul
style="margin-left: 50px;"
/>
>
<li>
<a
aria-disabled="false"
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
href="/dashboards/0"
role="button"
tabindex="0"
>
<div
class="MuiListItemText-root"
>
<span
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
>
Vehicle Map
</span>
</div>
<span
class="MuiTouchRipple-root"
/>
</a>
</li>
</ul>
<li>
<a
aria-disabled="false"
@@ -499,11 +499,14 @@ exports[`SideMenu Magna Authenticated 1`] = `
</li>
<span>
<li>
<div
<a
aria-disabled="false"
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-0 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
href="https://dev-superset.cloud.fiskerinc.com/login"
rel="noopener"
role="button"
tabindex="0"
target="_blank"
>
<div
class="MuiListItemIcon-root"
@@ -531,38 +534,35 @@ exports[`SideMenu Magna Authenticated 1`] = `
<span
class="MuiTouchRipple-root"
/>
</div>
<ul
style="margin-left: 50px;"
>
<li>
<a
aria-disabled="false"
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
href="/datascope/00000000-0000-0000-0000-000000000000"
role="button"
tabindex="0"
>
<div
class="MuiListItemText-root"
>
<span
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
>
test title
</span>
</div>
<span
class="MuiTouchRipple-root"
/>
</a>
</li>
</ul>
</a>
</li>
</span>
<ul
style="margin-left: 50px;"
/>
>
<li>
<a
aria-disabled="false"
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
href="/dashboards/0"
role="button"
tabindex="0"
>
<div
class="MuiListItemText-root"
>
<span
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
>
Vehicle Map
</span>
</div>
<span
class="MuiTouchRipple-root"
/>
</a>
</li>
</ul>
<span>
<li>
<a

37
src/components/Manifest/Update/index.jsx
View File

@@ -7,6 +7,8 @@ import { ManifestsProvider, useManifestsContext } from "../../Contexts/Manifests
import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
import { DropDownList } from "../../Controls/DropDownList";
import { RoleWrap } from "../../Controls/RoleWrap";
import { Permissions } from "../../../utils/roles";
import useStyles from "../../useStyles";
const manifestTypes = [
@@ -37,11 +39,13 @@ const MainForm = () => {
const [manifest, setManifest] = useState(null);
const [redirect, setRedirect] = useState(null);
const { getManifest, busy, updateManifest } = useManifestsContext();
const { getManifest, busy, migrateManifest, updateManifest } = useManifestsContext();
const {
token: {
idToken: { jwtToken: token },
},
groups,
providers,
} = useUserContext();
const { setMessage, setTitle, setSitePath } = useStatusContext();
@@ -86,6 +90,17 @@ const MainForm = () => {
}
}
const manifestMigrate = async (e) => {
e.preventDefault();
try{
const result = await migrateManifest(manifest_id, token)
if (!result || result.error) return;
setMessage(`Manifest Migrated ${manifest_id}`)
} catch(e) {
setMessage(`Failed to update manifest ${manifest_id}`)
}
}
useEffect(() => {
(async () => {
try {
@@ -179,6 +194,24 @@ const MainForm = () => {
>
{busy ? "Updating..." : "Update"}
</Button>
<RoleWrap
groups={groups}
providers={providers}
rolesPerProvider={Permissions.ManifestMigration}
>
<Button
type="button"
aria-label="migrate manifest"
disabled={busy || manifest == null}
fullWidth
variant="contained"
color="secondary"
className={classes.submit}
onClick={manifestMigrate}
>
{busy ? "Migrating..." : "Migrate"}
</Button>
</RoleWrap>
</FormControl>
</div>
@@ -191,4 +224,4 @@ const ManifestUpdate = () => (
</ManifestsProvider>
);
export default ManifestUpdate;
export default ManifestUpdate;

3
src/components/Table/HeaderSortable/index.jsx
View File

@@ -35,6 +35,9 @@ const HeaderSortable = (props) => {
value === "desc" ? "sorted descending" : "sorted ascending";
const ColumnLabel = (column) => {
if (column.no_sort) {
return column.label
}
if (column.id) {
return (
<TableSortLabel

4
src/components/VehicleMap/popup.jsx
View File

@@ -41,8 +41,8 @@ const VehiclePopUp = (props) => {
<DialogTitle align="center" onClose={onClose}>
{vin}
{" "}
<IconButton>
<VisibilityIcon fontSize="inherit" onClick={toggleView} />
<IconButton onClick={toggleView}>
<VisibilityIcon fontSize="inherit" />
</IconButton>
</DialogTitle>
<div align="center" className={classes.popUpContent}>

253
src/components/VehiclePathsMap/index.jsx Normal file
View File

@@ -0,0 +1,253 @@
import { Button } from "@material-ui/core";
import L from "leaflet";
import React, { useEffect, useState } from "react";
import { MapContainer, Marker, Polyline, Popup, TileLayer, useMap } from "react-leaflet";
import useStyles from "../useStyles";
import GrayMarkerIcon from "../../assets/gray-marker.png";
import GreenMarkerIcon from "../../assets/green-marker.png";
import { logger } from "../../services/monitoring";
import { ValidateLocationVehiclePathsData } from "../../utils/locations";
import { useUserContext } from "../Contexts/UserContext";
import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
import { VehiclePopUp } from "../VehicleMap/popup";
const ComponentVehiclePathsMap = (props) => {
const classes = useStyles();
const {
token: {
idToken: { jwtToken: token },
},
} = useUserContext();
const { getConnections, getLocationsVehiclePaths, getState } = useVehicleContext();
const REQUEST_INTERVAL = 10000;
const [center, setCenter] = useState([0, 0]);
const [zoom, setZoom] = useState(2);
const [markers, setMarkers] = useState([]);
const [connections, setConnections] = useState({});
useEffect(() => {
if (!token) return;
retrieveAndStoreLocations(token).then((points) => {
centerAroundMarkers(points);
});
const id = setInterval(function () {
retrieveAndStoreLocations(token);
}, REQUEST_INTERVAL);
return () => {
clearInterval(id);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token]);
const retrieveAndStoreLocations = (accessToken) => {
let vinsToShowOnMap = [...props.vinsToShowOnMapColors.keys()];
let vinsParam = ""
for (let vinToShowOnMap of vinsToShowOnMap) {
vinsParam += "vins="
vinsParam += vinToShowOnMap
vinsParam += "&"
}
vinsParam += "lookback_hours="
vinsParam += props.lookbackHours
return getLocationsVehiclePaths(accessToken, vinsParam)
.then((result) => {
let resultArray = Object.entries(result)
const points = []
// validate each location
for (let vinLocations of resultArray) {
let path = []
path[0] = vinLocations[0]
path[1] = []
for (let location of vinLocations[1]) {
if (ValidateLocationVehiclePathsData(location) !== false) {
path[1].push(location);
}
}
points.push(path)
}
setMarkers(points);
return points;
})
.catch((error) => logger.warn(error.stack));
};
const centerAroundMarkers = (points) => {
// default center
let center = [37.0902, -95.7129]
// center is the very first geographical point
if (points && points[0] && points[0][1] && points[0][1][0]) {
center = points[0][1][0]
}
setCenter(center);
setZoom(4.5);
};
useEffect(() => {
if (!token) return;
const vins = []
for (let vinLocations of markers) {
vins.push(vinLocations[0])
}
if (vins.length === 0) return;
getConnections(vins, token).then((conns) => {
setConnections(conns);
});
// eslint-disable-next-line
}, [markers, token]);
const [selectedVIN, setSelectedVIN] = useState(null);
const [carState, setCarState] = useState(null);
useEffect(() => {
if (selectedVIN != null) {
retrieveAndStoreCarState(selectedVIN);
const id = setInterval(function () {
retrieveAndStoreCarState(selectedVIN);
}, REQUEST_INTERVAL);
return () => {
clearInterval(id);
};
}
// eslint-disable-next-line
}, [selectedVIN]);
const selectCar = (e, vin) => {
e.preventDefault();
setSelectedVIN(vin);
};
const retrieveAndStoreCarState = (vin) => {
getState(token, vin).then((results) => {
setCarState({ ...results.data, vin: vin });
});
};
const handleClose = () => {
setSelectedVIN(null);
setCarState(null);
};
const isOnline = (vin) => {
return connections[vin];
};
const getZIndex = (vin) => {
if (isOnline(vin)) return 1000;
return 0;
};
function getCarIcon(vin) {
let icon = GrayMarkerIcon;
if (isOnline(vin)) {
icon = GreenMarkerIcon;
}
return new L.Icon({
iconUrl: icon,
iconAnchor: [24, 42],
});
}
return (
<MapContainer
center={center}
zoom={zoom}
style={{
width: "100%",
height: "900px",
}}
>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<CenterFocus center={center} zoom={zoom} />
{markers && markers.map((vinLocations) => (
<div key={vinLocations[0]}>
<Polyline
key={'line' + vinLocations[0]}
positions={vinLocations[1]}
pathOptions={{
color: props.vinsToShowOnMapColors && props.vinsToShowOnMapColors.get(vinLocations[0]),
}}
/>
{vinLocations[1][0] &&
<Marker
icon={getCarIcon(vinLocations[0])}
key={'marker' + vinLocations[0]}
position={vinLocations[1][0]}
title={vinLocations[0]}
opacity={0.9}
zIndexOffset={getZIndex(vinLocations[0])}
eventHandlers={{
click: () => {
setCenter(vinLocations[1][0]);
setZoom(16);
},
}}
>
<Popup>
<div align="center">
<p className={classes.markerTitle}>
<b>{vinLocations[0]}</b>
</p>
<Button
type="submit"
variant="contained"
color="primary"
onClick={(e) => selectCar(e, vinLocations[0])}
>
View Stats
</Button>
</div>
</Popup>
</Marker>
}
</div>
))}
{carState ? (
<VehiclePopUp
{...carState}
className={classes.popup}
onClose={handleClose}
/>
) : null}
</MapContainer>
);
};
const CenterFocus = ({ center, zoom }) => {
const map = useMap();
useEffect(() => {
if (center[0] === 0 && center[1] === 0) {
map.flyTo([0, 0], 2, { duration: 1.5 });
} else {
map.flyTo(center, zoom, { duration: 1.5 });
}
}, [center, zoom, map]);
return null;
};
const VehiclePathsMap = (props) => (
<VehicleProvider>
<ComponentVehiclePathsMap vinsToShowOnMapColors={props.vinsToShowOnMapColors} lookbackHours={props.lookbackHours} />
</VehicleProvider>
);
export default VehiclePathsMap;

7
src/components/useStyles.jsx
View File

@@ -288,7 +288,12 @@ const useStyles = makeStyles((theme) => ({
tableHeader: {
textDecorationStyle: "solid",
fontWeight:500,
}
},
limitWidthTableCell: {
maxWidth: "200px",
whiteSpace: "normal",
wordWrap: "break-word",
},
}));
export default useStyles;