CEC-3933 - use VehiclePaths for location drawing (#306)

* CEC-3933 - Parse VehiclePaths location data

* changes

* fixes

* stuff

* sort of works

* fix

* progress

* refactor

* fix vehicle paths query

* digital twin shows map

* new dashboard

* wider digital twin map

* snapshot

* latest; using polylines

* lag lng changes

* stuff

* path showing up

* stuff

* things

* revert home page

* whitespace

* validation

* more stuff

* fix button issue

* tests pass without mocking data

* fix code smells

* remove map from digital twin, add to tab

* fix bug

* marker click event working

* individual colors

* possible fix

* fix warning

* merge and remove unused code

* small fixes

* re add dashboard

* snaps
This commit is contained in:
Paul Adamsen
2023-04-28 16:56:41 -04:00
committed by GitHub
parent 8dfc516986
commit 55ae0f20b9
14 changed files with 1684 additions and 624 deletions

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>
);

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>

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>