DBC22-4814: route layers are now enabled in cam list on search

Author: ray-oxd

src/frontend/src/Components/map/Map.js

@@ -60,7 +60,6 @@ import { pointerClickHandler, resetClickedStates } from './handlers/click';
 import { updateOverlappingPositions } from "./layers/eventsLayer";
 import CurrentCameraIcon from '../cameras/CurrentCameraIcon';
 import DistanceLabels from "../routing/DistanceLabels";
-import Filters from '../shared/Filters.js';
 import FilterTabs from './filter/FilterTabs';
 import RouteSearch from '../routing/RouteSearch.js';
 import NetworkErrorPopup from './errors/NetworkError';

…rontend/src/Components/shared/Filters.js …end/src/Components/shared/ListFilters.jssrc/frontend/src/Components/shared/Filters.js renamed to src/frontend/src/Components/shared/ListFilters.js src/frontend/src/Components/shared/Filters.js renamed to src/frontend/src/Components/shared/ListFilters.js

@@ -24,12 +24,13 @@ import Spinner from 'react-bootstrap/Spinner';
 import Tooltip from 'react-bootstrap/Tooltip';
 
 // Internal imports
+import { MapContext } from '../../App.js';
 import trackEvent from './TrackEvent';
 
-// Components and functions
-import { MapContext } from '../../App.js';
+// Styling
+import './ListFilters.scss';
 
-export default function Filters(props) {
+export default function ListFilters(props) {
   // Misc
   const smallScreen = useMediaQuery('only screen and (max-width: 575px)');
   const largeScreen = useMediaQuery('only screen and (min-width: 768px)');
@@ -42,6 +43,7 @@ export default function Filters(props) {
 
   // Props
   const {
+    hidden,
     mapLayers,
     disableFeatures,
     enableRoadConditions,
@@ -103,24 +105,34 @@ export default function Filters(props) {
 
       if (!closures) {
         visibleLayers.closures = true;
+        visibleLayers.closuresLines = true;
         setClosures(true);
       }
+
       if (!majorEvents) {
         visibleLayers.majorEvents = true;
+        visibleLayers.majorEventsLines = true;
         setMajorEvents(true);
       }
+
       if (!minorEvents) {
         visibleLayers.minorEvents = true;
+        visibleLayers.minorEventsLines = true;
         setMinorEvents(true);
       }
+
       if (!futureEvents) {
         visibleLayers.futureEvents = true;
+        visibleLayers.futureEventsLines = true;
         setFutureEvents(true);
       }
+
       if (!roadConditions) {
         visibleLayers.roadConditions = true;
+        visibleLayers.roadConditionsLines = true;
         setRoadConditions(true);
       }
+
       if (!inlandFerries) {
         visibleLayers.inlandFerries = true;
         setInlandFerries(true);
@@ -335,7 +347,7 @@ export default function Filters(props) {
 
   // Main Component
   return (
-    <div className="filters-component filters">
+    <div className={`list-layers-filter filters-component filters ${hidden ? 'hidden' : ''}`}>
       {(!isDelaysPage || !smallScreen) &&
         <Button
           variant={isDelaysPage ? 'outline-primary' : 'primary'}

src/frontend/src/Components/shared/ListFilters.scss

@@ -0,0 +1,6 @@
+.list-layers-filter {
+  &.hidden {
+    visibility: hidden;
+    position: absolute;
+  }
+}

src/frontend/src/pages/CamerasListPage.js

@@ -43,6 +43,7 @@ import RouteSearch from '../Components/routing/RouteSearch';
 import trackEvent from '../Components/shared/TrackEvent.js';
 import AdvisoriesPanel from '../Components/map/panels/AdvisoriesPanel';
 import PollingComponent from '../Components/shared/PollingComponent';
+import ListFilters from "../Components/shared/ListFilters";
 
 // Styling
 import './CamerasListPage.scss';
@@ -589,6 +590,16 @@ export default function CamerasListPage() {
 
       <PollingComponent runnable={() => getCamerasData(selectedRouteRef.current)} interval={30000} />
 
+      <ListFilters
+        hidden={true}
+        disableFeatures={true}
+        enableRoadConditions={false}
+        enableChainUps={true}
+        textOverride={'List'}
+        iconOverride={true}
+        isDelaysPage={true}
+        fullOverlay={true}
+      />
     </React.Fragment>
   );
 }

src/frontend/src/pages/EventsListPage.js

@@ -41,7 +41,7 @@ import ServerErrorPopup from '../Components//map/errors/ServerError';
 import Advisories from '../Components/advisories/Advisories';
 import EventCard from '../Components/events/EventCard';
 import EventsTable from '../Components/events/EventsTable';
-import Filters from '../Components/shared/Filters';
+import ListFilters from '../Components/shared/ListFilters';
 import Footer from '../Footer.js';
 import PageHeader from '../PageHeader';
 import PollingComponent from '../Components/shared/PollingComponent';
@@ -675,14 +675,13 @@ export default function EventsListPage() {
 
                     {!smallScreen &&
                       <div className="type filter-option-btn">
-                        <Filters
+                        <ListFilters
                           disableFeatures={true}
                           enableRoadConditions={false}
                           enableChainUps={true}
                           textOverride={'List'}
                           iconOverride={true}
-                          isDelaysPage={true}
-                        />
+                          isDelaysPage={true} />
                       </div>
                     }
 
@@ -824,15 +823,15 @@ export default function EventsListPage() {
           </button>
 
           <p className="overlay__header bold">List</p>
-          <Filters
+
+          <ListFilters
             disableFeatures={true}
             enableRoadConditions={false}
             enableChainUps={true}
             textOverride={'List'}
             iconOverride={true}
             isDelaysPage={true}
-            fullOverlay={true}
-          />
+            fullOverlay={true} />
         </div>
       }