Skip to content
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

DBC22-1885: resolved conflicts and made icons consistent #359

Merged
merged 1 commit into from
Apr 4, 2024
Merged

DBC22-1885: resolved conflicts and made icons consistent #359

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
110 changes: 102 additions & 8 deletions src/frontend/src/Components/Map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -92,6 +92,9 @@ import {
roadWeatherStyles,
regionalStyles,
restStopStyles,
restStopClosedStyles,
restStopTruckStyles,
restStopTruckClosedStyles,
} from './data/featureStyleDefinitions.js';
import './Map.scss';

Expand Down Expand Up @@ -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);
}
};
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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':
Expand Down Expand Up @@ -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
Expand Down
42 changes: 42 additions & 0 deletions src/frontend/src/Components/RestStopTypeIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 } />
}
}

}
}
83 changes: 72 additions & 11 deletions src/frontend/src/Components/data/featureStyleDefinitions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
26 changes: 26 additions & 0 deletions src/frontend/src/Components/data/restStops.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
24 changes: 22 additions & 2 deletions src/frontend/src/Components/map/layers/restStopsLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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'],
});
}
Loading
Loading