DBC22-1909/1910: empty display for cam and delay lists

src/frontend/src/pages/CamerasListPage.js

@@ -154,6 +154,18 @@ export default function CamerasListPage() {
 
       <CameraList cameras={ displayedCameras ? displayedCameras : [] }></CameraList>
 
+      {!(displayedCameras && displayedCameras.length) &&
+        <Container className="empty-cam-display">
+          <h2>No cameras to display</h2>
+
+          <h6><b>Do you have a starting location and a destination entered?</b></h6>
+          <p>Adding a route will narrow down the information for the whole site, including the camera list. There might not be any cameras between those two locations.</p>
+
+          <h6><b>Have you entered search terms to narrow down the list?</b></h6>
+          <p>Try checking your spelling, changing, or removing your search terms.</p>
+        </Container>
+      }
+
       <Footer />
     </div>
   );

src/frontend/src/pages/CamerasListPage.scss

@@ -44,3 +44,13 @@
     }
   }
 }
+
+.empty-cam-display {
+  h2, h6 {
+    color: #053662;
+  }
+
+  h6 {
+    margin-top: 2rem;
+  }
+}

src/frontend/src/pages/EventsListPage.js

@@ -269,7 +269,7 @@ export default function EventsListPage() {
         </div>
 
         <div>
-          { largeScreen &&
+          { largeScreen && !!processedEvents.length &&
             <EventsTable data={processedEvents} routeHandler={handleRoute} showLoader={showLoader} sortingKey={sortingKey} />
           }
 
@@ -306,6 +306,18 @@ export default function EventsListPage() {
               )}
             </div>
           }
+
+          {!processedEvents.length &&
+            <Container className="empty-event-display">
+              <h2>No delays to display</h2>
+
+              <h6><b>Do you have a starting location and a destination entered?</b></h6>
+              <p>Adding a route will narrow down the information for the whole site, including the delays list. There might not be any delays between those two locations.</p>
+
+              <h6><b>Have you hidden any of the layers using the filters?</b></h6>
+              <p>Try toggling the filters on and off so that more information can be displayed.</p>
+            </Container>
+          }
         </div>
       </Container>
 

src/frontend/src/pages/EventsListPage.scss

@@ -90,7 +90,7 @@
 
       .filters-component {
         position: relative;
-        
+
         button {
           margin: 0;
         }
@@ -166,7 +166,12 @@
   }
 }
 
-// Searchbox size
-.rbt {
-  height: 40px;
+.empty-event-display {
+  h2, h6 {
+    color: #053662;
+  }
+
+  h6 {
+    margin-top: 2rem;
+  }
 }