From 3eb5a25b2edd06e4000a395c032269866624d546 Mon Sep 17 00:00:00 2001 From: minORC Date: Wed, 24 Jan 2024 21:37:17 -0800 Subject: [PATCH] DBC22-964: Updated advisories on map --- src/frontend/src/Components/Map.js | 4 +- .../src/Components/advisories/Advisories.js | 2 +- .../advisories/AdvisoriesAccordion.js | 59 ---------- .../advisories/AdvisoriesAccordion.scss | 36 ------- .../Components/advisories/AdvisoriesList.js | 8 +- .../Components/advisories/AdvisoriesList.scss | 4 +- .../Components/advisories/AdvisoriesOnMap.js | 85 +++++++++++++++ .../advisories/AdvisoriesOnMap.scss | 101 ++++++++++++++++++ src/frontend/src/pages/AdvisoriesListPage.js | 2 +- .../src/pages/AdvisoriesListPage.scss | 2 - 10 files changed, 199 insertions(+), 104 deletions(-) delete mode 100644 src/frontend/src/Components/advisories/AdvisoriesAccordion.js delete mode 100644 src/frontend/src/Components/advisories/AdvisoriesAccordion.scss create mode 100644 src/frontend/src/Components/advisories/AdvisoriesOnMap.js create mode 100644 src/frontend/src/Components/advisories/AdvisoriesOnMap.scss diff --git a/src/frontend/src/Components/Map.js b/src/frontend/src/Components/Map.js index dbacc06dd..ec83efc89 100644 --- a/src/frontend/src/Components/Map.js +++ b/src/frontend/src/Components/Map.js @@ -39,7 +39,7 @@ import { getFerriesLayer } from './map/layers/ferriesLayer.js'; import { getCameras, addCameraGroups } from './data/webcams.js'; import { getRouteLayer } from './map/routeLayer.js'; import { MapContext } from '../App.js'; -import AdvisoriesAccordion from './advisories/AdvisoriesAccordion'; +import AdvisoriesOnMap from './advisories/AdvisoriesOnMap'; import CurrentCameraIcon from './CurrentCameraIcon'; import Filters from './Filters.js'; import RouteSearch from './map/RouteSearch.js'; @@ -738,7 +738,7 @@ export default function MapWrapper({ {!isPreview && (
- +
)} diff --git a/src/frontend/src/Components/advisories/Advisories.js b/src/frontend/src/Components/advisories/Advisories.js index d80cdca2b..19d30346e 100644 --- a/src/frontend/src/Components/advisories/Advisories.js +++ b/src/frontend/src/Components/advisories/Advisories.js @@ -53,7 +53,7 @@ export default function Advisories() {

Advisory

- +
); diff --git a/src/frontend/src/Components/advisories/AdvisoriesAccordion.js b/src/frontend/src/Components/advisories/AdvisoriesAccordion.js deleted file mode 100644 index 1af3a87c9..000000000 --- a/src/frontend/src/Components/advisories/AdvisoriesAccordion.js +++ /dev/null @@ -1,59 +0,0 @@ -// React -import React, { useCallback, useEffect, useRef } from 'react'; - -// Redux -import { useSelector, useDispatch } from 'react-redux' -import { memoize } from 'proxy-memoize' -import { updateAdvisories } from '../../slices/cmsSlice'; - -// External Components -import Accordion from 'react-bootstrap/Accordion'; - -// Components and functions -import { getAdvisories } from '../data/advisories.js'; -import AdvisoriesList from './AdvisoriesList'; - -// Styling -import './AdvisoriesAccordion.scss'; - -export default function AdvisoriesAccordion() { - // Redux - const dispatch = useDispatch(); - const { advisories } = useSelector(useCallback(memoize(state => ({ - advisories: state.cms.advisories.list, - })))); - - // Refs - const isInitialMount = useRef(true); - - // Data loading - const loadAdvisories = async () => { - if (!advisories) { - dispatch(updateAdvisories({ - list: await getAdvisories(), - timeStamp: new Date().getTime() - })); - } - } - - useEffect(() => { - if (isInitialMount.current) { // Only run on initial load - loadAdvisories(); - isInitialMount.current = false; - } - }); - - // Rendering - return ( - (advisories && advisories.length > 0) ? ( - - - Advisory in area ({advisories.length}) - - - - - - ) : null - ); -} diff --git a/src/frontend/src/Components/advisories/AdvisoriesAccordion.scss b/src/frontend/src/Components/advisories/AdvisoriesAccordion.scss deleted file mode 100644 index 13ab76f3e..000000000 --- a/src/frontend/src/Components/advisories/AdvisoriesAccordion.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import "../../styles/variables.scss"; - -.advisories-accordion { - position: absolute; - top: 1rem; - left: 2rem; - width: calc(100% - 32px - 6rem); - - @media (max-width: 768px) { - width: calc(100% - 32px - 2rem); - position: relative; - } - - @media (min-width: 992px) { - left: calc(4rem + 360px ); - width: calc(100% - 360px - 224px - 8rem); - min-width: 400px; - } - - .accordion-header { - font-size: 0.75rem; - - .accordion-button { - font-size: 1rem; - padding: 6px 12px; - } - } - - .accordion-body { - font-size: 0.75rem; - - ul { - margin-bottom: 4px; - } - } -} diff --git a/src/frontend/src/Components/advisories/AdvisoriesList.js b/src/frontend/src/Components/advisories/AdvisoriesList.js index 7ce45e495..a739c1553 100644 --- a/src/frontend/src/Components/advisories/AdvisoriesList.js +++ b/src/frontend/src/Components/advisories/AdvisoriesList.js @@ -13,7 +13,7 @@ import './AdvisoriesList.scss'; export default function Advisories(props) { // State, props and context - const { advisories, showDescriptions } = props; + const { advisories, showDescription, showTimestamp } = props; // Navigation const navigate = useNavigate(); @@ -30,13 +30,15 @@ export default function Advisories(props) {
  • handleClick(advisory)}>

    {advisory.title}

    + {showTimestamp &&
    {advisory.first_published_at != advisory.last_published_at ? "Updated" : "Published" }
    + }
    - {showDescriptions && + {showDescription &&
    {advisory.teaser &&
    {advisory.teaser}
    @@ -48,10 +50,12 @@ export default function Advisories(props) {
    } + {showTimestamp &&
    {advisory.first_published_at != advisory.last_published_at ? "Updated" : "Published" }
    + }
    • ); })} diff --git a/src/frontend/src/Components/advisories/AdvisoriesList.scss b/src/frontend/src/Components/advisories/AdvisoriesList.scss index 8e4bc7031..6c7a20f4c 100644 --- a/src/frontend/src/Components/advisories/AdvisoriesList.scss +++ b/src/frontend/src/Components/advisories/AdvisoriesList.scss @@ -1,6 +1,9 @@ @import "../../styles/variables.scss"; .advisories-list { + list-style-type: none; + padding-left: 0; + li { cursor: pointer; width: fit-content; @@ -15,7 +18,6 @@ @media (min-width: 992px) { font-size: 1.25rem; font-weight: 700; - line-height: 36px; } } } diff --git a/src/frontend/src/Components/advisories/AdvisoriesOnMap.js b/src/frontend/src/Components/advisories/AdvisoriesOnMap.js new file mode 100644 index 000000000..1b850f932 --- /dev/null +++ b/src/frontend/src/Components/advisories/AdvisoriesOnMap.js @@ -0,0 +1,85 @@ +// React +import React, { useCallback, useEffect, useRef, useState } from 'react'; + +// Redux +import { useSelector, useDispatch } from 'react-redux' +import { memoize } from 'proxy-memoize' +import { updateAdvisories } from '../../slices/cmsSlice'; + +// Components and functions +import { getAdvisories } from '../data/advisories.js'; +import AdvisoriesList from './AdvisoriesList'; + +// Third party packages +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; +import { + faFlag, + faXmark +} from '@fortawesome/free-solid-svg-icons'; +import Button from 'react-bootstrap/Button'; + +// Styling +import './AdvisoriesOnMap.scss'; + +export default function AdvisoriesOnMap() { + // Redux + const dispatch = useDispatch(); + const { advisories } = useSelector(useCallback(memoize(state => ({ + advisories: state.cms.advisories.list, + })))); + + // Refs + const isInitialMount = useRef(true); + + // Data loading + const loadAdvisories = async () => { + if (!advisories) { + dispatch(updateAdvisories({ + list: await getAdvisories(), + timeStamp: new Date().getTime() + })); + } + } + + useEffect(() => { + if (isInitialMount.current) { // Only run on initial load + loadAdvisories(); + isInitialMount.current = false; + } + }); + + // States + const [open, setOpen] = useState(false); + + // Rendering + return ( + (advisories && advisories.length > 0) ? ( +
    + + + { open && +
    +

    Advisories

    + + +
    + } +
    + ) : null + ); +} diff --git a/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss b/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss new file mode 100644 index 000000000..6ee3baa65 --- /dev/null +++ b/src/frontend/src/Components/advisories/AdvisoriesOnMap.scss @@ -0,0 +1,101 @@ +@import "../../styles/variables.scss"; + +.advisories-on-map { + position: relative; + top: 1rem; + left: 1rem; + + .btn.advisories-on-map__btn { + background: #FAF9F8; + width: fit-content; + font-size: 0.875rem; + font-weight: 700; + color: #584215; + padding: 4px 8px; + border-radius: 5px; + border: 1px solid #584215; + + &:active, &.active, &.open { + color: white; + background: #584215; + + .advisories-count { + color: #584215; + background: white; + } + } + + &:focus, &.focus { + outline: $BC-Yellow; + } + + svg { + margin-right: 8px; + } + + .advisories-count { + margin: auto auto; + margin-left: 12px; + font-size: 0.625rem; + color: #FAF9F8; + background: #584215; + padding: 2px 6px; + border-radius: 4px; + vertical-align: middle; + } + } + + &__content { + margin-top: 6px; + background: #FAF9F8; + width: 100%; + border-radius: 4px; + box-shadow: 0px 1.937px 4.358px 0px rgba(0, 0, 0, 0.13), 0px 0.363px 1.089px 0px rgba(0, 0, 0, 0.10); + padding: 1rem; + position: fixed; + bottom: 0; + left: 0; + z-index: 20; + + @media (min-width: 575px) { + width: 360px; + position: relative; + } + + h4 { + color: #584215; + } + + .close-advisories { + position: absolute; + top: 1rem; + right: 1rem; + padding: 0; + min-width: 0; + line-height: 1.25rem; + height: auto; + background: none; + border: none; + font-size: 1.4rem; + } + .advisories-list { + margin-top: 12px; + + .advisory-li { + padding: 20px 0 16px; + font-size: 0.875rem; + margin-bottom: 0; + width: 100%; + + & + .advisory-li { + border-top: 1px solid $Divider; + } + + .advisory-li-title { + color: #584215; + font-size: 0.875rem; + } + } + } + } +} diff --git a/src/frontend/src/pages/AdvisoriesListPage.js b/src/frontend/src/pages/AdvisoriesListPage.js index 53bcd9c5b..69beac744 100644 --- a/src/frontend/src/pages/AdvisoriesListPage.js +++ b/src/frontend/src/pages/AdvisoriesListPage.js @@ -52,7 +52,7 @@ export default function AdvisoriesListPage() { description='Get the latest critical travel status information during major events affecting travel on a highway or region.'> - +