Skip to content

DBC22-2022: cam details page map context replacement #413

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 1, 2024
Merged

DBC22-2022: cam details page map context replacement #413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 31 additions & 27 deletions src/frontend/src/Components/Map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,9 @@ import {
import './Map.scss';


export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
export default function MapWrapper(props) {
let { camera, isCamDetail, mapViewRoute, loadCamDetails } = props;

// Redux
const dispatch = useDispatch();
const {
Expand Down Expand Up @@ -316,7 +318,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
});

mapRef.current.once('loadstart', async () => {
if (camera && !isPreview) {
if (camera && !isCamDetail) {
if (camera.event_type) {
updateClickedEvent(camera);
} else {
Expand Down Expand Up @@ -431,17 +433,23 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
};

const camClickHandler = feature => {
resetClickedStates(feature);
if (!isCamDetail) {
resetClickedStates(feature);

// set new clicked camera feature
feature.setStyle(cameraStyles['active']);
feature.setProperties({ clicked: true }, true);
// set new clicked camera feature
feature.setStyle(cameraStyles['active']);
feature.setProperties({ clicked: true }, true);

updateClickedCamera(feature);

updateClickedCamera(feature);
cameraPopupRef.current = popup;

cameraPopupRef.current = popup;
setTimeout(resetCameraPopupRef, 500);

setTimeout(resetCameraPopupRef, 500);
} else {
setZoomPan(mapView, null, feature.getGeometry().getCoordinates());
loadCamDetails(feature.getProperties());
}
};

const eventClickHandler = feature => {
Expand Down Expand Up @@ -531,7 +539,6 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
camClickHandler(clickedFeature);
return;
case 'event':
console.log(clickedFeature.getProperties());
eventClickHandler(clickedFeature);
return;
case 'ferry':
Expand Down Expand Up @@ -562,7 +569,6 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
regionalClickHandler(clickedFeature);
return;
case 'rest':
console.log(clickedFeature.getProperties())
trackEvent(
'click',
'map',
Expand Down Expand Up @@ -809,9 +815,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
mapLayers.current['highwayCams'] = getCamerasLayer(
finalCameras,
mapRef.current.getView().getProjection().getCode(),
mapContext,
camera,
updateClickedCamera,
mapContext
);

mapRef.current.addLayer(mapLayers.current['highwayCams']);
Expand Down Expand Up @@ -1262,7 +1266,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
if (typeof camera === 'string') {
camera = JSON.parse(camera);
}
if (isPreview || camera) {
if (isCamDetail || camera) {
return 12;
} else {
return zoom;
Expand All @@ -1279,7 +1283,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
}

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

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

<div className="panel-content">
{clickedCamera && (
<CamPopup camFeature={clickedCamera} isPreview={isPreview} />
<CamPopup camFeature={clickedCamera} isCamDetail={isCamDetail} />
)}

{clickedEvent && getEventPopup(clickedEvent)}
Expand Down Expand Up @@ -1352,7 +1356,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
</Button>
</div>

{!isPreview && (
{!isCamDetail && (
<Button
className="map-btn my-location"
variant="primary"
Expand All @@ -1363,7 +1367,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
</Button>
)}

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

{(!isPreview && !smallScreen) && (
{(!isCamDetail && !smallScreen) && (
<ExitSurvey />
)}

{!isPreview && (
{!isCamDetail && (
<Filters
toggleHandler={toggleLayer}
disableFeatures={isPreview}
disableFeatures={isCamDetail}
enableRoadConditions={true}
/>
)}
Expand All @@ -1392,7 +1396,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
<div id="popup-content" className="ol-popup-content"></div>
</div>

{isPreview && (
{isCamDetail && (
<Button
className="map-btn cam-location"
variant="primary"
Expand All @@ -1406,7 +1410,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
</Button>
)}

{isPreview && (
{isCamDetail && (
<Button
className="map-btn map-view"
variant="primary"
Expand All @@ -1416,10 +1420,10 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
</Button>
)}

{isPreview && (
{isCamDetail && (
<Filters
toggleHandler={toggleLayer}
disableFeatures={isPreview}
disableFeatures={isCamDetail}
enableRoadConditions={true}
textOverride={'Layer filters'}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/frontend/src/Components/map/camPopup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import './mapPopup.scss';

export default function CamPopup(props) {
// Props
const { camFeature, isPreview } = props;
const { camFeature, isCamDetail } = props;

// Misc
const navigate = useNavigate();
Expand Down Expand Up @@ -50,7 +50,7 @@ export default function CamPopup(props) {

// Handlers
const handlePopupClick = (e) => {
if (!isPreview) {
if (!isCamDetail) {
navigate(`/cameras/${camera.id}`);
}
};
Expand Down
13 changes: 2 additions & 11 deletions src/frontend/src/Components/map/layers/camerasLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,7 @@ import VectorSource from 'ol/source/Vector';
// Styling
import { cameraStyles } from '../../data/featureStyleDefinitions.js';

export function getCamerasLayer(
cameras,
projectionCode,
mapContext,
passedCamera,
updateClickedCamera,
) {
export function getCamerasLayer(cameras, projectionCode, mapContext) {
return new VectorLayer({
classname: 'webcams',
visible: mapContext.visible_layers.highwayCams,
Expand Down Expand Up @@ -51,10 +45,7 @@ export function getCamerasLayer(
}),

style: function (feature, resolution) {
if (passedCamera && passedCamera.id === feature.getProperties().id) {
return cameraStyles['active'];
}
return cameraStyles['static'];
},
}
});
}
40 changes: 23 additions & 17 deletions src/frontend/src/pages/CameraDetailsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,23 +78,13 @@ export default function CameraDetailsPage() {
}

// Data functions
async function initCamera() {
const allCameras = await getCameras().catch((error) => displayError(error));
const cameraGroupMap = getCameraGroupMap(allCameras);

const camera = await getCameras(null, `${window.API_HOST}/api/webcams/${params.id}/`).catch((error) => displayError(error));

// Group cameras
const group = cameraGroupMap[camera.group];
camera.camGroup = group;
camera.camGroup.forEach((cam) => cam.camGroup = group);

const loadCamDetails = (camData) => {
// Camera data
setCamera(camera);
setCamera(camData);

// Next update time
const currentTime = new Date();
const nextUpdateTime = currentTime.setSeconds(currentTime.getSeconds() + camera.update_period_mean);
const nextUpdateTime = currentTime.setSeconds(currentTime.getSeconds() + camData.update_period_mean);
const nextUpdateTimeFormatted = new Intl.DateTimeFormat('en-US',
{hour: 'numeric',
minute: 'numeric',
Expand All @@ -103,9 +93,25 @@ export default function CameraDetailsPage() {
setNextUpdate(nextUpdateTimeFormatted);

// Last update time
setLastUpdate(camera.last_update_modified);
setLastUpdate(camData.last_update_modified);

// Replace window title and URL
document.title = `DriveBC - Cameras - ${camData.name}`;
window.history.replaceState(history.state, null, `/cameras/${camData.id}`)
}

async function initCamera(id) {
const allCameras = await getCameras().catch((error) => displayError(error));
const cameraGroupMap = getCameraGroupMap(allCameras);

const camData = await getCameras(null, `${window.API_HOST}/api/webcams/${id}/`).catch((error) => displayError(error));

// Group cameras
const group = cameraGroupMap[camData.group];
camData.camGroup = group;
camData.camGroup.forEach((cam) => cam.camGroup = group);

document.title = `DriveBC - Cameras - ${camera.name}`;
loadCamDetails(camData);
}

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

useEffect(() => {
if (isInitialMount.current) {
initCamera();
initCamera(params.id);
isInitialMount.current = false;

} else if (camera) {
Expand Down Expand Up @@ -449,7 +455,7 @@ export default function CameraDetailsPage() {
<div className="actions-bar actions-bar--nearby"></div>
<div className="map-wrap map-context-wrap">
<DndProvider options={HTML5toTouch}>
<Map camera={camera} isPreview={true} mapViewRoute={mapViewRoute}/>
<Map camera={camera} isCamDetail={true} mapViewRoute={mapViewRoute} loadCamDetails={loadCamDetails} />
</DndProvider>
</div>
</Tab>
Expand Down
1 change: 0 additions & 1 deletion src/frontend/src/pages/CamerasListPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ export default function CamerasListPage() {
cameras: state.feeds.cameras.list,
filteredCameras: state.feeds.cameras.filteredList,
camFilterPoints: state.feeds.cameras.filterPoints,
camTimeStamp: state.feeds.cameras.routeTimeStamp,
selectedRoute: state.routes.selectedRoute
}))));

Expand Down
3 changes: 1 addition & 2 deletions src/frontend/src/pages/FeedbackPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,6 @@ export default function FeedbackPage() {
setSuccess(true);
})
.catch((error) => {
console.log(error);
setError(true);

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

// Rendering
return (
<div className='feedback-page'>
<div className='feedback-page'>
{!success &&
<React.Fragment>
<PageHeader
Expand Down