DBC22-2022: cam details page map context replacement

bcgov · Apr 30, 2024 · c393854 · c393854
1 parent d38c910
commit c393854
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 61 deletions.
diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js
@@ -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 {
@@ -315,7 +317,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 {
@@ -427,17 +429,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 => {
@@ -527,7 +535,6 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
             camClickHandler(clickedFeature);
             return;
           case 'event':
-            console.log(clickedFeature.getProperties());
             eventClickHandler(clickedFeature);
             return;
           case 'ferry':
@@ -558,7 +565,6 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
             regionalClickHandler(clickedFeature);
             return;
           case 'rest':
-            console.log(clickedFeature.getProperties())
             trackEvent(
               'click',
               'map',
@@ -805,9 +811,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']);
@@ -1258,7 +1262,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;
@@ -1275,7 +1279,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;
   }
@@ -1292,7 +1296,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' : ''}`}
@@ -1314,7 +1318,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)}
@@ -1348,7 +1352,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
           </Button>
         </div>
 
-        {!isPreview && (
+        {!isCamDetail && (
           <Button
             className="map-btn my-location"
             variant="primary"
@@ -1359,7 +1363,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
           </Button>
         )}
 
-        {!isPreview && (
+        {!isCamDetail && (
           <div className={`map-left-container ${(showServerError || showNetworkError) ? 'error-showing' : ''}`}>
             {smallScreen && (
               <ExitSurvey mobile={true} />
@@ -1370,14 +1374,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}
           />
         )}
@@ -1388,7 +1392,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"
@@ -1402,7 +1406,7 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
         </Button>
       )}
 
-      {isPreview && (
+      {isCamDetail && (
         <Button
           className="map-btn map-view"
           variant="primary"
@@ -1412,10 +1416,10 @@ export default function MapWrapper({ camera, isPreview, mapViewRoute }) {
         </Button>
       )}
 
-      {isPreview && (
+      {isCamDetail && (
         <Filters
           toggleHandler={toggleLayer}
-          disableFeatures={isPreview}
+          disableFeatures={isCamDetail}
           enableRoadConditions={true}
           textOverride={'Layer filters'}
         />

diff --git a/src/frontend/src/Components/map/camPopup.js b/src/frontend/src/Components/map/camPopup.js
@@ -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();
@@ -50,7 +50,7 @@ export default function CamPopup(props) {
 
   // Handlers
   const handlePopupClick = (e) => {
-    if (!isPreview) {
+    if (!isCamDetail) {
       navigate(`/cameras/${camera.id}`);
     }
   };

diff --git a/src/frontend/src/Components/map/layers/camerasLayer.js b/src/frontend/src/Components/map/layers/camerasLayer.js
@@ -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,
@@ -51,10 +45,7 @@ export function getCamerasLayer(
     }),
 
     style: function (feature, resolution) {
-      if (passedCamera && passedCamera.id === feature.getProperties().id) {
-        return cameraStyles['active'];
-      }
       return cameraStyles['static'];
-    },
+    }
   });
 }
diff --git a/src/frontend/src/pages/CameraDetailsPage.js b/src/frontend/src/pages/CameraDetailsPage.js
@@ -77,23 +77,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',
@@ -102,9 +92,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) => {
@@ -117,7 +123,7 @@ export default function CameraDetailsPage() {
 
   useEffect(() => {
     if (isInitialMount.current) {
-      initCamera();
+      initCamera(params.id);
       isInitialMount.current = false;
 
     } else if (camera) {
@@ -376,7 +382,7 @@ export default function CameraDetailsPage() {
                         <span>Direction</span>
                       </span>
                       <span className="camera-directions-group">
-                        {camera.camGroup.map((cam) =>
+                        {camera.camGroup  .map((cam) =>
                           <Button aria-label={getCameraOrientation(cam.orientation)} className={'camera-direction-btn' + ((camera.orientation == cam.orientation) ? ' current' : '') } key={cam.id} onClick={() => setCamera(cam)}>{cam.orientation}</Button>
                         )}
                       </span>
@@ -448,7 +454,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>

diff --git a/src/frontend/src/pages/CamerasListPage.js b/src/frontend/src/pages/CamerasListPage.js
@@ -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
   }))));
 

diff --git a/src/frontend/src/pages/FeedbackPage.js b/src/frontend/src/pages/FeedbackPage.js
@@ -66,7 +66,6 @@ export default function FeedbackPage() {
       setSuccess(true);
     })
     .catch((error) => {
-      console.log(error);
       setError(true);
 
       // Refresh captcha token on error
@@ -76,7 +75,7 @@ export default function FeedbackPage() {
 
   // Rendering
   return (
-      <div className='feedback-page'>
+    <div className='feedback-page'>
       {!success &&
         <React.Fragment>
           <PageHeader