DBC22-1885: made rest stop icons to be consistent

bcgov · Apr 4, 2024 · 9b494db · 9b494db
1 parent e4f328d
commit 9b494db
Show file tree

Hide file tree

Showing 6 changed files with 265 additions and 27 deletions.
diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js
@@ -43,7 +43,7 @@ import {
 } from './map/mapPopup.js';
 import { getEvents } from './data/events.js';
 import { getWeather, getRegional } from './data/weather.js';
-import { getRestStops } from './data/restStops.js';
+import { getRestStops, isRestStopClosed } from './data/restStops.js';
 import { getRestStopsLayer } from './map/layers/restStopsLayer.js';
 import { loadEventsLayers } from './map/layers/eventsLayer.js';
 import { loadWeatherLayers } from './map/layers/weatherLayer.js';
@@ -87,6 +87,9 @@ import {
   roadWeatherStyles,
   regionalStyles,
   restStopStyles,
+  restStopClosedStyles,
+  restStopTruckStyles,
+  restStopTruckClosedStyles,
 } from './data/featureStyleDefinitions.js';
 import './Map.scss';
 
@@ -368,7 +371,24 @@ export default function MapWrapper({
       }
 
       if (clickedRestStopRef.current && targetFeature != clickedRestStopRef.current) {
-        clickedRestStopRef.current.setStyle(restStopStyles['static']);
+        const isClosed = isRestStopClosed(targetFeature.values_.properties);
+        const isLargeVehiclesAccommodated = targetFeature.values_.properties.ACCOM_COMMERCIAL_TRUCKS === "Yes"? true: false;
+        if(isClosed){
+          if(isLargeVehiclesAccommodated){
+            clickedRestStopRef.current.setStyle(restStopTruckClosedStyles['static']);
+          }
+          else{
+            clickedRestStopRef.current.setStyle(restStopClosedStyles['static']);
+          }
+        }
+        else{
+          if(isLargeVehiclesAccommodated){
+            clickedRestStopRef.current.setStyle(restStopTruckStyles['static']);
+          }
+          else{
+            clickedRestStopRef.current.setStyle(restStopStyles['static']);
+          }
+        }
         updateClickedRestStop(null);
       }
     };
@@ -454,8 +474,26 @@ export default function MapWrapper({
       // reset previous clicked feature
       resetClickedStates(feature);
 
-      // set new clicked rest stop feature
-      feature.setStyle(restStopStyles['active']);
+      // set new clicked rest stop feature  
+      const isClosed = isRestStopClosed(feature.values_.properties);
+      const isLargeVehiclesAccommodated = feature.values_.properties.ACCOM_COMMERCIAL_TRUCKS === 'Yes'? true: false;
+      if(isClosed){
+        if(isLargeVehiclesAccommodated){
+          feature.setStyle(restStopTruckClosedStyles['active']);
+        }
+        else{
+          feature.setStyle(restStopClosedStyles['active']);
+        }
+      }
+      else{
+        if(isLargeVehiclesAccommodated){
+          feature.setStyle(restStopTruckStyles['active']);
+        }
+        else{
+          feature.setStyle(restStopStyles['active']);
+        }
+      }
+
       feature.setProperties({ clicked: true }, true);
       updateClickedRestStop(feature);
 
@@ -529,11 +567,33 @@ export default function MapWrapper({
               hoveredFeature.current.setStyle(regionalStyles['static']);
               break;
             case 'rest':
-              hoveredFeature.current.setStyle(restStopStyles['static']);
+              {
+                const isClosed = isRestStopClosed(hoveredFeature.current.values_.properties);
+                const isLargeVehiclesAccommodated = hoveredFeature.current.values_.properties.ACCOM_COMMERCIAL_TRUCKS === 'Yes'? true: false;
+                if(isClosed){
+                  if(isLargeVehiclesAccommodated){
+                    hoveredFeature.current.setStyle(restStopTruckClosedStyles['static']);
+
+                  }
+                  else{
+                    hoveredFeature.current.setStyle(restStopClosedStyles['static']);
+
+                  }
+                }
+                else{
+                  if(isLargeVehiclesAccommodated){
+                    hoveredFeature.current.setStyle(restStopTruckStyles['static']);
+
+                  }
+                  else{
+                    hoveredFeature.current.setStyle(restStopStyles['static']);
+
+                  }
+                }
+              }
               break;
           }
         }
-
         hoveredFeature.current = null;
       }
     };
@@ -576,7 +636,24 @@ export default function MapWrapper({
             return;
           case 'rest':
             if (!targetFeature.getProperties().clicked) {
-              targetFeature.setStyle(restStopStyles['hover']);
+              const isClosed = isRestStopClosed(targetFeature.values_.properties);
+              const isLargeVehiclesAccommodated = targetFeature.values_.properties.ACCOM_COMMERCIAL_TRUCKS === 'Yes'? true: false;
+              if(isClosed){
+                if(isLargeVehiclesAccommodated){
+                  targetFeature.setStyle(restStopTruckClosedStyles['hover']);
+                }
+                else{
+                  targetFeature.setStyle(restStopClosedStyles['hover']);
+                }
+              }
+              else{
+                if(isLargeVehiclesAccommodated){
+                  targetFeature.setStyle(restStopTruckStyles['hover']);
+                }
+                else{
+                  targetFeature.setStyle(restStopStyles['hover']);
+                }
+              }
             }
             return;
           case 'regional':
@@ -928,10 +1005,30 @@ export default function MapWrapper({
 
     // check for active rest stop icons
     if (clickedRestStopRef.current) {
-      clickedRestStopRef.current.setStyle(restStopStyles['static']);
-      clickedRestStopRef.current.set('clicked', false);
-      updateClickedRestStop(null);
-    }
+      const isClosed = isRestStopClosed(clickedRestStopRef.current.properties);
+        const isLargeVehiclesAccommodated = clickedRestStopRef.current.properties? clickedRestStopRef.current.properties.ACCOM_COMMERCIAL_TRUCKS === 'Yes': false;
+        if(isClosed){
+          if(isLargeVehiclesAccommodated){
+            clickedRestStopRef.current.setStyle(restStopTruckClosedStyles['static']);
+
+          }
+          else{
+            clickedRestStopRef.current.setStyle(restStopClosedStyles['static']);
+          }
+        }
+        else{
+          if(isLargeVehiclesAccommodated){
+            clickedRestStopRef.current.setStyle(restStopTruckStyles['static']);
+          }
+          else{
+            clickedRestStopRef.current.setStyle(restStopStyles['static']);
+          }
+        }
+        clickedRestStopRef.current.set('clicked', false);
+        updateClickedRestStop(null);
+
+      }
+
 
     // Reset cam popup handler lock timer
     cameraPopupRef.current = null;

diff --git a/src/frontend/src/Components/RestStopTypeIcon.js b/src/frontend/src/Components/RestStopTypeIcon.js
@@ -0,0 +1,28 @@
+// React
+import React from 'react';
+import restStopIconActive from '../images/mapIcons/restarea-open-active.png';
+import restStopIconActiveClosed from '../images/mapIcons/restarea-closed-active.png';
+import restStopIconActiveTruck from '../images/mapIcons/restarea-truck-open-active.png';
+import restStopIconActiveTruckClosed from '../images/mapIcons/restarea-truck-closed-active.png';
+
+export default function RestStopTypeIcon(props) {
+  const { reststop } = props;
+  const isRestStopOpenYearAround = reststop.properties.OPEN_YEAR_ROUND === "Yes"? true: false;
+  const isLargeVehiclesAccommodated = reststop.properties.ACCOM_COMMERCIAL_TRUCKS === "Yes"? true: false;
+
+  if (isRestStopOpenYearAround ){
+    if(isLargeVehiclesAccommodated){
+      return <img className={'rest_stop_-icon-img'} src={restStopIconActiveTruck } />
+    } else {
+      return <img className={'rest_stop_-icon-img'} src={restStopIconActive } />
+    }   
+  } else {
+    if(isLargeVehiclesAccommodated){
+      return <img className={'rest_stop_-icon-img'} src={restStopIconActiveTruckClosed } />
+
+    } else {
+      return <img className={'rest_stop_-icon-img'} src={restStopIconActiveClosed } />
+    }
+  }        
+}
+
diff --git a/src/frontend/src/Components/data/featureStyleDefinitions.js b/src/frontend/src/Components/data/featureStyleDefinitions.js
@@ -26,19 +26,17 @@ import restStopIconActive from '../../images/mapIcons/restarea-open-active.png';
 import restStopIconHover from '../../images/mapIcons/restarea-open-hover.png';
 import restStopIconStatic from '../../images/mapIcons/restarea-open-static.png';
 
-// import restStopIconActiveClosed from '../../images/mapIcons/restarea-closed-active.png';
-// import restStopIconHoverClosed from '../../images/mapIcons/restarea-closed-hover.png';
-// import restStopIconStaticClosed from '../../images/mapIcons/restarea-closed-static.png';
-
-// import restStopIconActiveTruck from '../../images/mapIcons/restarea-truck-open-active.png';
-// import restStopIconHoverTruck from '../../images/mapIcons/restarea-truck-open-hover.png';
-// import restStopIconStaticTruck from '../../images/mapIcons/restarea-truck-open-static.png';
-
-// import restStopIconActiveTruckClosed from '../../images/mapIcons/restarea-truck-closed-active.png';
-// import restStopIconHoverTruckClosed from '../../images/mapIcons/restarea-truck-closed-hover.png';
-// import restStopIconStaticTruckClosed from '../../images/mapIcons/restarea-truck-closed-static.png';
+import restStopIconActiveClosed from '../../images/mapIcons/restarea-closed-active.png';
+import restStopIconHoverClosed from '../../images/mapIcons/restarea-closed-hover.png';
+import restStopIconStaticClosed from '../../images/mapIcons/restarea-closed-static.png';
 
+import restStopIconActiveTruck from '../../images/mapIcons/restarea-truck-open-active.png';
+import restStopIconHoverTruck from '../../images/mapIcons/restarea-truck-open-hover.png';
+import restStopIconStaticTruck from '../../images/mapIcons/restarea-truck-open-static.png';
 
+import restStopIconActiveTruckClosed from '../../images/mapIcons/restarea-truck-closed-active.png';
+import restStopIconHoverTruckClosed from '../../images/mapIcons/restarea-truck-closed-hover.png';
+import restStopIconStaticTruckClosed from '../../images/mapIcons/restarea-truck-closed-static.png';
 
 // Events
 // Closures
@@ -185,6 +183,69 @@ export const restStopStyles = {
   }),
 };
 
+export const restStopTruckStyles = {
+  static: new Style({
+    image: new Icon({
+      scale: 0.25,
+      src: restStopIconStaticTruck,
+    }),
+  }),
+  hover: new Style({
+    image: new Icon({
+      scale: 0.25,
+      src: restStopIconHoverTruck,
+    }),
+  }),
+  active: new Style({
+    image: new Icon({
+      scale: 0.25,
+      src: restStopIconActiveTruck,
+    }),
+  }),
+};
+
+export const restStopClosedStyles = {
+  static: new Style({
+    image: new Icon({
+      scale: 0.25,
+      src: restStopIconStaticClosed,
+    }),
+  }),
+  hover: new Style({
+    image: new Icon({
+      scale: 0.25,
+      src: restStopIconHoverClosed,
+    }),
+  }),
+  active: new Style({
+    image: new Icon({
+      scale: 0.25,
+      src: restStopIconActiveClosed,
+    }),
+  }),
+};
+
+export const restStopTruckClosedStyles = {
+  static: new Style({
+    image: new Icon({
+      scale: 0.25,
+      src: restStopIconStaticTruckClosed,
+    }),
+  }),
+  hover: new Style({
+    image: new Icon({
+      scale: 0.25,
+      src: restStopIconHoverTruckClosed,
+    }),
+  }),
+  active: new Style({
+    image: new Icon({
+      scale: 0.25,
+      src: restStopIconActiveTruckClosed,
+    }),
+  }),
+};
+
 // Event icon styles
 export const eventStyles = {
   // Line Segments

diff --git a/src/frontend/src/Components/data/restStops.js b/src/frontend/src/Components/data/restStops.js
@@ -10,3 +10,32 @@ export function getRestStops(routePoints) {
     console.log(error);
   });
 }
+
+export function isRestStopClosed(restStopProperties) {
+  if(restStopProperties === undefined){
+    return false;
+  }
+  const isOpenYearRound = restStopProperties.OPEN_YEAR_ROUND === "Yes"? true: false;
+  if(isOpenYearRound){
+    return false;
+  }
+  else{
+    const today = new Date();
+    const year = today.getFullYear();
+    const openDate = restStopProperties.OPEN_DATE;
+    const closeDate = restStopProperties.CLOSE_DATE;
+    if(openDate && closeDate){
+      const openDateY = new Date(openDate.toString() + "-" + year.toString());
+      const closeDateY =  new Date(closeDate.toString() + "-" + year.toString());
+      const isInSeason = (today.getTime() > openDateY.getTime()) && (today.getTime() < closeDateY.getTime());
+      const isClosed = isInSeason? false: true;
+      return isClosed;
+
+    }
+    else{
+      return true;
+    }
+
+  }
+
+}
diff --git a/src/frontend/src/Components/map/layers/restStopsLayer.js b/src/frontend/src/Components/map/layers/restStopsLayer.js
@@ -7,9 +7,11 @@ import * as ol from 'ol';
 import GeoJSON from 'ol/format/GeoJSON.js';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
+import OpenSeason from '../../OpenSeason.js';
 
 // Styling
-import { restStopStyles } from '../../data/featureStyleDefinitions.js';
+import { restStopStyles, restStopClosedStyles, restStopTruckStyles, restStopTruckClosedStyles } from '../../data/featureStyleDefinitions.js';
+import { isRestStopClosed } from '../../data/restStops.js';
 
 export function getRestStopsLayer(restStopsData, projectionCode, mapContext) {
   return new VectorLayer({
@@ -37,10 +39,32 @@ export function getRestStopsLayer(restStopsData, projectionCode, mapContext) {
             projectionCode,
           );
 
+          let style = undefined;
+          const isClosed = isRestStopClosed(restStop.properties);
+          const isLargeVehiclesAccommodated = restStop.properties.ACCOM_COMMERCIAL_TRUCKS === 'Yes'? true: false;
+          if(isClosed){
+            if(isLargeVehiclesAccommodated){
+              style = restStopTruckClosedStyles['static'];
+
+            }
+            else{
+              style = restStopClosedStyles['static'];
+            }
+          }
+          else{
+            if(isLargeVehiclesAccommodated){
+              style = restStopTruckStyles['static'];
+            }
+            else{
+              style = restStopStyles['static'];
+            }
+          } 
+
+          olFeatureForMap.setStyle(style);
+
           vectorSource.addFeature(olFeatureForMap);
         });
       },
     }),
-    style: restStopStyles['static'],
   });
 }
diff --git a/src/frontend/src/Components/map/mapPopup.js b/src/frontend/src/Components/map/mapPopup.js
@@ -3,6 +3,7 @@ import React from 'react';
 
 // Third party packages
 import EventTypeIcon from '../EventTypeIcon';
+import RestStopTypeIcon from '../RestStopTypeIcon';
 import FriendlyTime from '../FriendlyTime';
 import parse from 'html-react-parser';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -398,9 +399,7 @@ export function getRestStopPopup(restStopFeature) {
     <div className="popup popup--reststop">
       <div className="popup__title">
         <div className="popup__title__icon">
-          <svg width="30" height="24" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path className="filter-item__icon__path" d="M19 3C19 3.1875 18.9688 3.34375 18.9375 3.5C19.5625 3.9375 20 4.6875 20 5.5C20 6.90625 18.875 8 17.5 8H17L17 15C17 15.5625 16.5312 16 16 16C15.4375 16 15 15.5625 15 15V8H14.5C13.0937 8 12 6.90625 12 5.5C12 4.6875 12.4062 3.9375 13.0312 3.5C13 3.34375 13 3.1875 13 3C13 1.34375 14.3438 0 16 0C17.6562 0 19 1.34375 19 3ZM1 7C1 6.46875 1.4375 6 2 6L10 6C10.5312 6 11 6.46875 11 7V9C11 9.5625 10.5312 10 10 10L2 10C1.4375 10 1 9.5625 1 9L1 7ZM1 11L11 11C11.5312 11 12 11.4688 12 12C12 12.5625 11.5312 13 11 13V15C11 15.5625 10.5312 16 10 16C9.4375 16 9 15.5625 9 15V13L3 13L3 15C3 15.5625 2.53125 16 2 16C1.4375 16 1 15.5625 1 15L1 13C0.4375 13 0 12.5625 0 12C0 11.4688 0.4375 11 1 11Z" fill="white"/>
-          </svg>
+          <RestStopTypeIcon reststop={restStopData} state="active" />
         </div>
         <p className="name">Rest area</p>
       </div>