Skip to content

Commit 43f5608

Browse files
ray-oxdray-oxd
committed
DBC22-2022: cam details page map context replacement
1 parent fb62777 commit 43f5608

File tree

6 files changed

+59
-60
lines changed

6 files changed

+59
-60
lines changed

‎src/frontend/src/Components/Map.js

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,9 @@ import {
107107
import './Map.scss';
108108

109109

110-
export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
110+
export default function MapWrapper(props) {
111+
let { camera, isCamDetail, mapViewRoute, loadCamDetails } = props;
112+
111113
// Redux
112114
const dispatch = useDispatch();
113115
const {
@@ -316,7 +318,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
316318
});
317319

318320
mapRef.current.once('loadstart', async () => {
319-
if (camera && !isPreview) {
321+
if (camera && !isCamDetail) {
320322
if (camera.event_type) {
321323
updateClickedEvent(camera);
322324
} else {
@@ -431,17 +433,23 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
431433
};
432434

433435
const camClickHandler = feature => {
434-
resetClickedStates(feature);
436+
if (!isCamDetail) {
437+
resetClickedStates(feature);
435438

436-
// set new clicked camera feature
437-
feature.setStyle(cameraStyles['active']);
438-
feature.setProperties({ clicked: true }, true);
439+
// set new clicked camera feature
440+
feature.setStyle(cameraStyles['active']);
441+
feature.setProperties({ clicked: true }, true);
442+
443+
updateClickedCamera(feature);
439444

440-
updateClickedCamera(feature);
445+
cameraPopupRef.current = popup;
441446

442-
cameraPopupRef.current = popup;
447+
setTimeout(resetCameraPopupRef, 500);
443448

444-
setTimeout(resetCameraPopupRef, 500);
449+
} else {
450+
setZoomPan(mapView, null, feature.getGeometry().getCoordinates());
451+
loadCamDetails(feature.getProperties());
452+
}
445453
};
446454

447455
const eventClickHandler = feature => {
@@ -531,7 +539,6 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
531539
camClickHandler(clickedFeature);
532540
return;
533541
case 'event':
534-
console.log(clickedFeature.getProperties());
535542
eventClickHandler(clickedFeature);
536543
return;
537544
case 'ferry':
@@ -562,7 +569,6 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
562569
regionalClickHandler(clickedFeature);
563570
return;
564571
case 'rest':
565-
console.log(clickedFeature.getProperties())
566572
trackEvent(
567573
'click',
568574
'map',
@@ -809,9 +815,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
809815
mapLayers.current['highwayCams'] = getCamerasLayer(
810816
finalCameras,
811817
mapRef.current.getView().getProjection().getCode(),
812-
mapContext,
813-
camera,
814-
updateClickedCamera,
818+
mapContext
815819
);
816820

817821
mapRef.current.addLayer(mapLayers.current['highwayCams']);
@@ -1262,7 +1266,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
12621266
if (typeof camera === 'string') {
12631267
camera = JSON.parse(camera);
12641268
}
1265-
if (isPreview || camera) {
1269+
if (isCamDetail || camera) {
12661270
return 12;
12671271
} else {
12681272
return zoom;
@@ -1279,7 +1283,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
12791283
}
12801284

12811285
// Force camera and inland ferries filters to be checked on preview mode
1282-
if (isPreview) {
1286+
if (isCamDetail) {
12831287
mapContext.visible_layers['highwayCams'] = true;
12841288
mapContext.visible_layers['inlandFerries'] = true;
12851289
}
@@ -1296,7 +1300,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
12961300
const smallScreen = useMediaQuery('only screen and (max-width: 767px)');
12971301

12981302
return (
1299-
<div className={`map-container ${isPreview ? 'preview' : ''}`}>
1303+
<div className={`map-container ${isCamDetail ? 'preview' : ''}`}>
13001304
<div
13011305
ref={panel}
13021306
className={`side-panel ${openPanel ? 'open' : ''}`}
@@ -1318,7 +1322,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
13181322

13191323
<div className="panel-content">
13201324
{clickedCamera && (
1321-
<CamPopup camFeature={clickedCamera} isPreview={isPreview} />
1325+
<CamPopup camFeature={clickedCamera} isCamDetail={isCamDetail} />
13221326
)}
13231327

13241328
{clickedEvent && getEventPopup(clickedEvent)}
@@ -1352,7 +1356,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
13521356
</Button>
13531357
</div>
13541358

1355-
{!isPreview && (
1359+
{!isCamDetail && (
13561360
<Button
13571361
className="map-btn my-location"
13581362
variant="primary"
@@ -1363,7 +1367,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
13631367
</Button>
13641368
)}
13651369

1366-
{!isPreview && (
1370+
{!isCamDetail && (
13671371
<div className={`map-left-container ${(showServerError || showNetworkError) ? 'error-showing' : ''}`}>
13681372
{smallScreen && (
13691373
<ExitSurvey mobile={true} />
@@ -1374,14 +1378,14 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
13741378
</div>
13751379
)}
13761380

1377-
{(!isPreview && !smallScreen) && (
1381+
{(!isCamDetail && !smallScreen) && (
13781382
<ExitSurvey />
13791383
)}
13801384

1381-
{!isPreview && (
1385+
{!isCamDetail && (
13821386
<Filters
13831387
toggleHandler={toggleLayer}
1384-
disableFeatures={isPreview}
1388+
disableFeatures={isCamDetail}
13851389
enableRoadConditions={true}
13861390
/>
13871391
)}
@@ -1392,7 +1396,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
13921396
<div id="popup-content" className="ol-popup-content"></div>
13931397
</div>
13941398

1395-
{isPreview && (
1399+
{isCamDetail && (
13961400
<Button
13971401
className="map-btn cam-location"
13981402
variant="primary"
@@ -1406,7 +1410,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
14061410
</Button>
14071411
)}
14081412

1409-
{isPreview && (
1413+
{isCamDetail && (
14101414
<Button
14111415
className="map-btn map-view"
14121416
variant="primary"
@@ -1416,10 +1420,10 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
14161420
</Button>
14171421
)}
14181422

1419-
{isPreview && (
1423+
{isCamDetail && (
14201424
<Filters
14211425
toggleHandler={toggleLayer}
1422-
disableFeatures={isPreview}
1426+
disableFeatures={isCamDetail}
14231427
enableRoadConditions={true}
14241428
textOverride={'Layer filters'}
14251429
/>

‎src/frontend/src/Components/map/camPopup.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import './mapPopup.scss';
1818

1919
export default function CamPopup(props) {
2020
// Props
21-
const { camFeature, isPreview } = props;
21+
const { camFeature, isCamDetail } = props;
2222

2323
// Misc
2424
const navigate = useNavigate();
@@ -50,7 +50,7 @@ export default function CamPopup(props) {
5050

5151
// Handlers
5252
const handlePopupClick = (e) => {
53-
if (!isPreview) {
53+
if (!isCamDetail) {
5454
navigate(`/cameras/${camera.id}`);
5555
}
5656
};

‎src/frontend/src/Components/map/layers/camerasLayer.js

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,7 @@ import VectorSource from 'ol/source/Vector';
1111
// Styling
1212
import { cameraStyles } from '../../data/featureStyleDefinitions.js';
1313

14-
export function getCamerasLayer(
15-
cameras,
16-
projectionCode,
17-
mapContext,
18-
passedCamera,
19-
updateClickedCamera,
20-
) {
14+
export function getCamerasLayer(cameras, projectionCode, mapContext) {
2115
return new VectorLayer({
2216
classname: 'webcams',
2317
visible: mapContext.visible_layers.highwayCams,
@@ -51,10 +45,7 @@ export function getCamerasLayer(
5145
}),
5246

5347
style: function (feature, resolution) {
54-
if (passedCamera && passedCamera.id === feature.getProperties().id) {
55-
return cameraStyles['active'];
56-
}
5748
return cameraStyles['static'];
58-
},
49+
}
5950
});
6051
}

‎src/frontend/src/pages/CameraDetailsPage.js

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -78,23 +78,13 @@ export default function CameraDetailsPage() {
7878
}
7979

8080
// Data functions
81-
async function initCamera() {
82-
const allCameras = await getCameras().catch((error) => displayError(error));
83-
const cameraGroupMap = getCameraGroupMap(allCameras);
84-
85-
const camera = await getCameras(null, `${window.API_HOST}/api/webcams/${params.id}/`).catch((error) => displayError(error));
86-
87-
// Group cameras
88-
const group = cameraGroupMap[camera.group];
89-
camera.camGroup = group;
90-
camera.camGroup.forEach((cam) => cam.camGroup = group);
91-
81+
const loadCamDetails = (camData) => {
9282
// Camera data
93-
setCamera(camera);
83+
setCamera(camData);
9484

9585
// Next update time
9686
const currentTime = new Date();
97-
const nextUpdateTime = currentTime.setSeconds(currentTime.getSeconds() + camera.update_period_mean);
87+
const nextUpdateTime = currentTime.setSeconds(currentTime.getSeconds() + camData.update_period_mean);
9888
const nextUpdateTimeFormatted = new Intl.DateTimeFormat('en-US',
9989
{hour: 'numeric',
10090
minute: 'numeric',
@@ -103,9 +93,25 @@ export default function CameraDetailsPage() {
10393
setNextUpdate(nextUpdateTimeFormatted);
10494

10595
// Last update time
106-
setLastUpdate(camera.last_update_modified);
96+
setLastUpdate(camData.last_update_modified);
97+
98+
// Replace window title and URL
99+
document.title = `DriveBC - Cameras - ${camData.name}`;
100+
window.history.replaceState(history.state, null, `/cameras/${camData.id}`)
101+
}
102+
103+
async function initCamera(id) {
104+
const allCameras = await getCameras().catch((error) => displayError(error));
105+
const cameraGroupMap = getCameraGroupMap(allCameras);
106+
107+
const camData = await getCameras(null, `${window.API_HOST}/api/webcams/${id}/`).catch((error) => displayError(error));
108+
109+
// Group cameras
110+
const group = cameraGroupMap[camData.group];
111+
camData.camGroup = group;
112+
camData.camGroup.forEach((cam) => cam.camGroup = group);
107113

108-
document.title = `DriveBC - Cameras - ${camera.name}`;
114+
loadCamDetails(camData);
109115
}
110116

111117
const loadReplay = async (cam) => {
@@ -118,7 +124,7 @@ export default function CameraDetailsPage() {
118124

119125
useEffect(() => {
120126
if (isInitialMount.current) {
121-
initCamera();
127+
initCamera(params.id);
122128
isInitialMount.current = false;
123129

124130
} else if (camera) {
@@ -449,7 +455,7 @@ export default function CameraDetailsPage() {
449455
<div className="actions-bar actions-bar--nearby"></div>
450456
<div className="map-wrap map-context-wrap">
451457
<DndProvider options={HTML5toTouch}>
452-
<Map camera={camera} isPreview={true} mapViewRoute={mapViewRoute}/>
458+
<Map camera={camera} isCamDetail={true} mapViewRoute={mapViewRoute} loadCamDetails={loadCamDetails} />
453459
</DndProvider>
454460
</div>
455461
</Tab>

‎src/frontend/src/pages/CamerasListPage.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ export default function CamerasListPage() {
4242
cameras: state.feeds.cameras.list,
4343
filteredCameras: state.feeds.cameras.filteredList,
4444
camFilterPoints: state.feeds.cameras.filterPoints,
45-
camTimeStamp: state.feeds.cameras.routeTimeStamp,
4645
selectedRoute: state.routes.selectedRoute
4746
}))));
4847

‎src/frontend/src/pages/FeedbackPage.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@ export default function FeedbackPage() {
6666
setSuccess(true);
6767
})
6868
.catch((error) => {
69-
console.log(error);
7069
setError(true);
7170

7271
// Refresh captcha token on error
@@ -76,7 +75,7 @@ export default function FeedbackPage() {
7675

7776
// Rendering
7877
return (
79-
<div className='feedback-page'>
78+
<div className='feedback-page'>
8079
{!success &&
8180
<React.Fragment>
8281
<PageHeader

0 commit comments

Comments
 (0)