DBC22-1810: updated event panel content without styling (#322)

* DBC22-1810: updated event panel content without styling * DBC22-1810: fixed next_update rendering in mobile without value
bcgov · Mar 8, 2024 · 09b8451 · 09b8451
1 parent 454e40e
commit 09b8451
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/src/frontend/src/Components/events/EventCard.js b/src/frontend/src/Components/events/EventCard.js
@@ -59,12 +59,14 @@ export default function EventCard(props) {
           </div>
         </div>
 
-        <div className="next-update">
-          <div className="header">{ showLoader ? <Skeleton /> : 'Next Update' }</div>
-          <div className="content">
-            { showLoader ? <Skeleton width={'90%'} /> : <FriendlyTime date={event.next_update} /> }
+        {event && event.next_update &&
+          <div className="next-update">
+            <div className="header">{ showLoader ? <Skeleton /> : 'Next Update' }</div>
+            <div className="content">
+              { showLoader ? <Skeleton width={'90%'} /> : <FriendlyTime date={event.next_update} /> }
+            </div>
           </div>
-        </div>
+        }
 
         <div className="map">
           <div className="header">{ showLoader ? <Skeleton /> : 'Map' }</div>

diff --git a/src/frontend/src/Components/map/mapPopup.js b/src/frontend/src/Components/map/mapPopup.js
@@ -6,7 +6,7 @@ import EventTypeIcon from '../EventTypeIcon';
 import FriendlyTime from '../FriendlyTime';
 import parse from 'html-react-parser';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { 
+import {
   faFerry,
   faTemperatureHalf,
   faMountain,
@@ -24,7 +24,7 @@ import './mapPopup.scss';
 
 function convertCategory(event) {
   switch(event.display_category) {
-    case 'closures': 
+    case 'closures':
       return 'Closure';
     case 'majorEvents':
       return event.event_type === 'INCIDENT' ? 'Major incident ' : 'Major delay';
@@ -70,15 +70,37 @@ export function getEventPopup(eventFeature) {
         </div>
         <p className="name">{convertCategory(eventData)}</p>
       </div>
+
       <div className="popup__content">
         <div className="popup__content__title">
-          <p className="name">{`${eventData.route_at} - ${eventData.route_display}`}</p>
           <p className="direction">{convertDirection(eventData.direction)}</p>
+          <p className="name">{eventData.highway_segment_names ? eventData.highway_segment_names : eventData.route_at}</p>
+          <p className="location">{eventData.location_description}</p>
+        </div>
+
+        {eventData.closest_landmark &&
+          <div className="popup__content__description">
+            <p>Closest Landmark</p>
+            <p>{eventData.closest_landmark}</p>
+          </div>
+        }
+
+        <div className="popup__content__description">
+          <p>Description</p>
+          <p>{eventData.optimized_description}</p>
         </div>
+
         <div className="popup__content__description">
+          <p>Last update</p>
           <FriendlyTime date={eventData.last_updated} />
-          <p>{eventData.description}</p>
         </div>
+
+        {eventData.next_update &&
+          <div className="popup__content__description">
+            <p>Next update</p>
+            <FriendlyTime date={eventData.next_update} />
+          </div>
+        }
       </div>
     </div>
   );