diff --git a/src/frontend/src/Components/Filters.js b/src/frontend/src/Components/Filters.js index 89770765..5904467e 100644 --- a/src/frontend/src/Components/Filters.js +++ b/src/frontend/src/Components/Filters.js @@ -12,9 +12,7 @@ import { faSnowflake, faFerry, faTemperatureHalf, - // faRestroom, - // faCloudSun - faToilet, + faRestroom, } from '@fortawesome/free-solid-svg-icons'; import Button from 'react-bootstrap/Button'; import Tooltip from 'react-bootstrap/Tooltip'; @@ -349,7 +347,7 @@ export default function Filters(props) { /> diff --git a/src/frontend/src/Components/map/mapPopup.js b/src/frontend/src/Components/map/mapPopup.js index af419291..db0fdcb1 100644 --- a/src/frontend/src/Components/map/mapPopup.js +++ b/src/frontend/src/Components/map/mapPopup.js @@ -15,8 +15,21 @@ import { faWind, faEye, faTriangleExclamation, - faToilet + faToilet, + faBath, + faRestroom, + faClock, + faDoorOpen, + faTruck, + faTable, + faWifi, + faRoad, + faChargingStation, } from '@fortawesome/free-solid-svg-icons'; +import { + faTablePicnic, + faTruckContainer, +} from '@fortawesome/pro-solid-svg-icons'; import { faSunCloud } from '@fortawesome/pro-solid-svg-icons'; @@ -302,23 +315,180 @@ export function getRestStopPopup(restStopFeature) { const restStopData = restStopFeature.getProperties(); return ( -
+
- +

- {`${restStopData.properties.REST_AREA_NAME}`} + Rest area

-

Open Date: {`${restStopData.properties.OPEN_DATE}`}

-

Close Date: {`${restStopData.properties.CLOSE_DATE}`}

-

Power Type: {`${restStopData.properties.POWER_TYPE}`}

-

Toilet Type: {`${restStopData.properties.TOILET_TYPE}`}

-

Admin Unit Name: {`${restStopData.properties.ADMIN_UNIT_NAME}`}

-

Distance from Municipality: {`${restStopData.properties.DISTANCE_FROM_MUNICIPALITY}`}

+

{`${restStopData.properties.REST_AREA_NAME}`}

+

{`${restStopData.properties.DISTANCE_FROM_MUNICIPALITY}`}

+
+
+
+
Access
+
+
+
+
+ {restStopData.properties.OPEN_YEAR_ROUND !== "No" ? ( + "Open year around" + ) : ( + `Open: ${restStopData.properties.OPEN_DATE} - ${restStopData.properties.CLOSE_DATE}` + )} +
+
+
+
+
+
+
+ {`${restStopData.properties.DIRECTION_OF_TRAFFIC} entrance, ${restStopData.properties.ACCESS_RESTRICTION}`} +
+
+
+
+
+
+
+ {restStopData.properties.ACCOM_COMMERCIAL_TRUCKS === "Yes" ? ( + "Large vehicles accommodated" + ) : ( + `Large vehicles not accommodated` + )} +
+
+
+
+
+ +
+
+
+
Features
+
+
+
+
+ {restStopData.properties.WHEELCHAIR_ACCESS_TOILET === "Yes" ? ( + `${restStopData.properties.NUMBER_OF_TOILETS} wheelchair accessible toilets` + ) : ( + `${restStopData.properties.NUMBER_OF_TOILETS} toilets (not wheelchair accessible)` + )} +
+
+
+
+
+
+
+ {restStopData.properties.NUMBER_OF_TABLES !== 0 && restStopData.properties.NUMBER_OF_TABLES !== null ? ( + `${restStopData.properties.NUMBER_OF_TABLES} tables` + ) : ( + `No tables` + )} +
+
+
+
+
+
+
+ {restStopData.properties.WI_FI === "No" ? ( + `Wi-Fi unavailable` + ) : ( + `Wi-Fi available` + )} +
+
+
+
+
+
+
+ {restStopData.properties.ACCELERATION_LANE === "No" ? ( + `No acceleration lane, ` + ) : ( + `Acceleration lane, ` + )} + {restStopData.properties.DECELERATION_LANE === "No" ? ( + `no deceleration lane` + ) : ( + `deceleration lane` + )} +
+
+
+
+
+ +
+
+
+
Electiric Vehicles
+
+
+
+
+ {restStopData.properties.EV_STATION_25_KW_DCFC === 0 + && restStopData.properties.EV_STATION_50_KW_DCFC === 0 + && restStopData.properties.EV_STATION_LEVEL_2_J1772 === 0? ( + `No charging stations ` + ) : ( + `` + )} +
+
+
+
+
+ {restStopData.properties.EV_STATION_25_KW_DCFC !== 0 && ( + + )} +
+
+
+ {restStopData.properties.EV_STATION_25_KW_DCFC !== 0 && ( + `J1772 6.48KW: ${restStopData.properties.EV_STATION_25_KW_DCFC} ` + )} +
+
+
+
+
+ {restStopData.properties.EV_STATION_25_KW_DCFC !== 0 && ( + + )} +
+
+
+ {restStopData.properties.EV_STATION_25_KW_DCFC !== 0 && ( + `CHAdeMO 25KW: ${restStopData.properties.EV_STATION_25_KW_DCFC} ` + )} +
+
+
+
+
+ {restStopData.properties.EV_STATION_50_KW_DCFC !== 0 && ( + + )} +
+
+
+ {restStopData.properties.EV_STATION_50_KW_DCFC !== 0 && ( + `CHAdeMO 50KW: ${restStopData.properties.EV_STATION_50_KW_DCFC} ` + )} +
+
+
+
+
diff --git a/src/frontend/src/Components/map/mapPopup.scss b/src/frontend/src/Components/map/mapPopup.scss index 692debcc..81ce56ee 100644 --- a/src/frontend/src/Components/map/mapPopup.scss +++ b/src/frontend/src/Components/map/mapPopup.scss @@ -478,6 +478,71 @@ } } + //Rest Stops layers + &--reststop { + .popup__title { + &__icon { + width: 50px; + height: 50px; + background: #273F94; + } + } + + .popup__content { + &__title { + border-bottom: 1px solid $Divider; + .name { + margin-bottom: 0; + } + .direction { + font-size: 0.875rem; + color: $Grey70; + margin-bottom: 0; + } + } + &__description { + > p:first-child { + font-weight: bold; + font-size: 0.875rem; + height: 1.3125rem; + margin-bottom: 0; + } + + > p:nth-child(2) { + font-size: 0.875rem; + margin-top: 0; + margin-bottom: 0; + } + + &__block { + display: flex; + justify-content: space-between; + + > div { + flex: 1; + } + } + + &__container{ + display: flex; + align-items: center; + justify-content: flex-start; + + &__text { + margin-left: 10px; /* Adjust the margin as needed */ + } + } + + &__categary{ + font-weight: bold; + font-size: 0.875rem; + height: 1.3125rem; + margin-bottom: 20px; + } + } + } + } + //common styles for Road weather and Regional weather .data-card { margin: 0.75rem 0;