DBC22-1885: resolved conflicts and made icons consistent

bcgov · Apr 4, 2024 · 91edc08 · 91edc08
1 parent 47adae1
commit 91edc08
Show file tree

Hide file tree

Showing 6 changed files with 269 additions and 26 deletions.
diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js
@@ -44,7 +44,7 @@ import {
 import { getAdvisories } from './data/advisories.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 { getAdvisoriesLayer } from './map/layers/advisoriesLayer.js';
 import { getCamerasLayer } from './map/layers/camerasLayer.js';
 import { getRestStopsLayer } from './map/layers/restStopsLayer.js';
@@ -92,6 +92,9 @@ import {
   roadWeatherStyles,
   regionalStyles,
   restStopStyles,
+  restStopClosedStyles,
+  restStopTruckStyles,
+  restStopTruckClosedStyles,
 } from './data/featureStyleDefinitions.js';
 import './Map.scss';
 
@@ -380,7 +383,27 @@ export default function MapWrapper({
       }
 
       if (clickedRestStopRef.current && targetFeature != clickedRestStopRef.current) {
-        clickedRestStopRef.current.setStyle(restStopStyles['static']);
+        if(clickedRestStopRef.current !== undefined){
+          const isClosed = isRestStopClosed(clickedRestStopRef.current.values_.properties);
+          const isLargeVehiclesAccommodated = clickedRestStopRef.current.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);
       }
     };
@@ -467,7 +490,24 @@ export default function MapWrapper({
       resetClickedStates(feature);
 
       // set new clicked rest stop feature
-      feature.setStyle(restStopStyles['active']);
+      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);
 
@@ -541,7 +581,26 @@ 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;
           }
         }
@@ -588,7 +647,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':
@@ -1010,9 +1086,27 @@ 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

diff --git a/src/frontend/src/Components/RestStopTypeIcon.js b/src/frontend/src/Components/RestStopTypeIcon.js
@@ -0,0 +1,42 @@
+// 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';
+import { isRestStopClosed } from './data/restStops';
+
+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 {
+    const isClosed = isRestStopClosed(reststop.properties);
+
+    if(isClosed){
+      if(isLargeVehiclesAccommodated){
+        return <img className={'rest_stop_-icon-img'} src={restStopIconActiveTruckClosed } />
+
+      } else {
+        return <img className={'rest_stop_-icon-img'} src={restStopIconActiveClosed } />
+      }
+
+    }
+    else{
+      if(isLargeVehiclesAccommodated){
+        return <img className={'rest_stop_-icon-img'} src={restStopIconActiveTruck } />
+
+      } else {
+        return <img className={'rest_stop_-icon-img'} src={restStopIconActive } />
+      }
+    }
+
+  }        
+}
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
@@ -198,6 +196,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,29 @@ 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
@@ -9,7 +9,8 @@ import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 
 // 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({
@@ -36,11 +37,30 @@ export function getRestStopsLayer(restStopsData, projectionCode, mapContext) {
             'EPSG:4326',
             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'],
   });
 }