From 91edc087b8c89df9b99709dee97b5a0af1364f49 Mon Sep 17 00:00:00 2001 From: bcgov-brwang Date: Thu, 4 Apr 2024 11:49:01 -0700 Subject: [PATCH] DBC22-1885: resolved conflicts and made icons consistent DBC22-1885: resolved conflicts and made icons consistent --- src/frontend/src/Components/Map.js | 110 ++++++++++++++++-- .../src/Components/RestStopTypeIcon.js | 42 +++++++ .../data/featureStyleDefinitions.js | 83 +++++++++++-- src/frontend/src/Components/data/restStops.js | 26 +++++ .../Components/map/layers/restStopsLayer.js | 24 +++- src/frontend/src/Components/map/mapPopup.js | 10 +- 6 files changed, 269 insertions(+), 26 deletions(-) create mode 100644 src/frontend/src/Components/RestStopTypeIcon.js diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js index e01742a3..b182c7ad 100644 --- 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 new file mode 100644 index 00000000..496c4e08 --- /dev/null +++ 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 + } else { + return + } + } else { + const isClosed = isRestStopClosed(reststop.properties); + + if(isClosed){ + if(isLargeVehiclesAccommodated){ + return + + } else { + return + } + + } + else{ + if(isLargeVehiclesAccommodated){ + return + + } else { + return + } + } + + } +} \ No newline at end of file diff --git a/src/frontend/src/Components/data/featureStyleDefinitions.js b/src/frontend/src/Components/data/featureStyleDefinitions.js index 067828bc..fe5535c4 100644 --- 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 index 2f1cd5e9..9522be5f 100644 --- 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 index 918ed5b0..6f9711c8 100644 --- 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'], }); } diff --git a/src/frontend/src/Components/map/mapPopup.js b/src/frontend/src/Components/map/mapPopup.js index 32d4cdf3..12c56da4 100644 --- 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'; @@ -41,6 +42,7 @@ import WeatherIcon from '../WeatherIcon'; import Tooltip from 'react-bootstrap/Tooltip'; import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; import OpenSeason from '../OpenSeason'; +import { isRestStopClosed } from '../data/restStops'; function convertCategory(event) { switch (event.display_category) { @@ -398,9 +400,7 @@ export function getRestStopPopup(restStopFeature) {
- - - +

Rest area

@@ -422,8 +422,8 @@ export function getRestStopPopup(restStopFeature) {
{ === "open" ? (

Open seasonally

- ) : ( -

Closed (open seasonally)

+ ) : ( isRestStopClosed(restStopData.properties)? (

Closed (open seasonally)

) + : (

Open seasonally

) )}