DBC22-964: Updated advisories on map

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 && (
         <div>
           <RouteSearch />
-          <AdvisoriesAccordion />
+          <AdvisoriesOnMap />
         </div>
       )}
     </div>

src/frontend/src/Components/advisories/Advisories.js

@@ -53,7 +53,7 @@ export default function Advisories() {
       </div>
       <div className="content">
         <h3>Advisory</h3>
-        <AdvisoriesList advisories={advisories} showDescriptions={false} />
+        <AdvisoriesList advisories={advisories} showDescription={false} showTimestamp={true} />
       </div>
     </div>
   );

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) {
           <li className="advisory-li unread" key={advisory.id} onClick={() => handleClick(advisory)}>
             <div className="advisory-li-title-container">
               <h4 className='advisory-li-title'>{advisory.title}</h4>
+              {showTimestamp &&
               <div className="timestamp-container">
                 <span className="advisory-li-state">{advisory.first_published_at != advisory.last_published_at ? "Updated" : "Published" }</span>
                 <FriendlyTime date={advisory.latest_revision_created_at} />
               </div>
+              }
             </div>
 
-            {showDescriptions &&
+            {showDescription &&
               <div className='advisory-li-body-container'>
                 {advisory.teaser &&
                   <div className='advisory-li-body'>{advisory.teaser}</div>
@@ -48,10 +50,12 @@ export default function Advisories(props) {
               </div>
             }
 
+            {showTimestamp &&
             <div className="timestamp-container timestamp-container--mobile">
               <span className="advisory-li-state">{advisory.first_published_at != advisory.last_published_at ? "Updated" : "Published" }</span>
               <FriendlyTime date={advisory.latest_revision_created_at} />
             </div>
+            }
           </li>
         );
       })}

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;
       }
     }
   }

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) ? (
+      <div className="advisories-on-map">
+        <Button
+          className={'advisories-on-map__btn' + (open ? ' open' : '')}
+          aria-label="open advisories list"
+          onClick={() => {
+            open ? setOpen(false) : setOpen(true) }
+          }>
+          <FontAwesomeIcon icon={faFlag} />
+          <span>Advisories in area</span>
+          <span className="advisories-count">{advisories.length}</span>
+        </Button>
+
+        { open &&
+          <div className="advisories-on-map__content">
+            <h4>Advisories</h4>
+            <button
+              className="close-advisories"
+              aria-label="close advisories list"
+              onClick={() => setOpen(false)
+            }>
+              <FontAwesomeIcon icon={faXmark} />
+            </button>
+            <AdvisoriesList advisories={advisories} showDescription={true} showTimestamp={false} />
+          </div>
+        }
+      </div>
+    ) : null
+  );
+}

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;
+        }
+      }
+    }
+  }
+}

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.'>
       </PageHeader>
       <Container>
-        <AdvisoriesList advisories={advisories} showDescriptions={true} />
+        <AdvisoriesList advisories={advisories} showDescription={true} showTimestamp={true}/>
       </Container>
       <Footer />
     </div>

src/frontend/src/pages/AdvisoriesListPage.scss

@@ -2,8 +2,6 @@
 
 .advisories-page {
   ul.advisories-list {
-    list-style-type: none;
-    padding-left: 0;
 
     li.advisory-li {
       border-bottom: 1px solid $Divider;