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:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user