DBC22-1811: added CARS data to events table

Author: ray-oxd

src/backend/apps/event/enums.py

@@ -92,8 +92,8 @@ class EVENT_DIRECTION:
     EVENT_DIRECTION.EAST: "Eastbound",
     EVENT_DIRECTION.SOUTH: "Southbound",
     EVENT_DIRECTION.WEST: "Westbound",
-    EVENT_DIRECTION.BOTH: "Both Directions",
-    EVENT_DIRECTION.NONE: "Not Applicable"
+    EVENT_DIRECTION.BOTH: "Both",
+    EVENT_DIRECTION.NONE: "Both"
 }
 
 EVENT_DIFF_FIELDS = [

src/backend/apps/event/serializers.py

@@ -17,10 +17,38 @@ class ScheduleSerializer(serializers.Serializer):
     )
 
 
+def tail_trim(text, target):
+    target_index = text.find(target)
+    return text[:target_index] if target_index != -1 else text
+
+
+def optimize_description(text):
+    res = text
+
+    # Remove next update from the end
+    res = tail_trim(res, ' Next update')
+
+    # Remove last updated from the end
+    res = tail_trim(res, ' Last updated')
+
+    # Split by periods and remove road+directions
+    res = res.split('. ')[1:]
+
+    # Remove 'at' location phrases from the beginning
+    res[0] = tail_trim(res[0], ' at')
+
+    # Remove 'between' location phrases from the beginning
+    res[0] = tail_trim(res[0], ' between')
+
+    # Join split strings and return
+    return '. '.join(res) if len(res) > 1 else res[0] + '.'
+
+
 class EventInternalSerializer(serializers.ModelSerializer):
     display_category = serializers.SerializerMethodField()
     direction_display = serializers.SerializerMethodField()
     route_display = serializers.SerializerMethodField()
+    optimized_description = serializers.SerializerMethodField()
     schedule = ScheduleSerializer()
 
     class Meta:
@@ -50,11 +78,14 @@ def get_route_display(self, obj):
 
         return res
 
+    def get_optimized_description(self, obj):
+        return optimize_description(obj.description)
+
     def get_display_category(self, obj):
         if obj.closed:
             return EVENT_DISPLAY_CATEGORY.CLOSURE
 
-        if obj.id.startswith('drivebc.ca/DBCRCON'):
+        if obj.id.startswith('DBCRCON'):
             return EVENT_DISPLAY_CATEGORY.ROAD_CONDITION
 
         if obj.start and datetime.datetime.now(pytz.utc) < obj.start:

src/frontend/src/App.scss

@@ -139,4 +139,9 @@ body {
   &::placeholder {
     color: $Type-Disabled;
   }
-}
+}
+
+// Hide recaptcha badge
+.grecaptcha-badge {
+    visibility: hidden !important;
+}

src/frontend/src/Components/events/EventCard.js

@@ -35,18 +35,37 @@ export default function EventCard(props) {
           </div>
         </div>
 
+        <div className="location">
+          <div className="header">{ showLoader ? <Skeleton /> : 'Location' }</div>
+          <div className="content">{ showLoader ? <Skeleton width={200} /> : event.location_description }</div>
+        </div>
+
+        <div className="closest-landmark">
+          <div className="header">{ showLoader ? <Skeleton /> : 'Closest Landmark' }</div>
+          <div className="content">
+            { showLoader ? <Skeleton width={100} /> : (event.closest_landmark ? event.closest_landmark : '-')}
+          </div>
+        </div>
+
         <div className="description">
           <div className="header">{ showLoader ? <Skeleton /> : 'Description' }</div>
           <div className="content">{ showLoader ? <Skeleton count={7} /> : event.description }</div>
         </div>
 
         <div className="last-update">
-          <div className="header">{ showLoader ? <Skeleton /> : 'Last Update' }</div>
+          <div className="header">{ showLoader ? <Skeleton /> : 'Last Updated' }</div>
           <div className="content">
             { showLoader ? <Skeleton width={'90%'} /> : <FriendlyTime date={event.last_updated} /> }
           </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} /> }
+          </div>
+        </div>
+
         <div className="map">
           <div className="header">{ showLoader ? <Skeleton /> : 'Map' }</div>
           <div className="content">

src/frontend/src/Components/events/EventsTable.scss

@@ -89,22 +89,34 @@ td.last_updated .friendly-time-text {
   }
 
   &.route_at {
-    width: 8.5614%
+    width: 8.7677%
   }
 
-  &.direction {
-    width: 8.1593%
+  &.direction_display {
+    width: 10.1058%
   }
 
-  &.description {
-    width: 50.1690%
+  &.location_description {
+    width: 11.3612%
+  }
+
+  &.closest_landmark {
+    width: 10.5925%
+  }
+
+  &.optimized_description {
+    width: 19.9172%
   }
 
   &.last_updated {
-    width: 12.9110%
+    width: 10.5293%
+  }
+
+  &.next_update {
+    width: 8.5266%
   }
 
   &.map {
-    width: 5.4422%
+    width: 5.4439%
   }
 }

src/frontend/src/pages/EventsListPage.js

@@ -82,13 +82,25 @@ export default function EventsListPage() {
     },
     {
       header: 'Direction',
-      accessorKey: 'direction',
-      cell: (props) => <span>{props.getValue().toLowerCase()}</span>,
+      accessorKey: 'direction_display',
+      cell: (props) => <span>{props.getValue()}</span>,
+      enableSorting: false,
+    },
+    {
+      header: 'Location',
+      accessorKey: 'location_description',
+      cell: (props) => <span>{props.getValue()}</span>,
+      enableSorting: false,
+    },
+    {
+      header: 'Closest Landmark',
+      accessorKey: 'closest_landmark',
+      cell: (props) => <span>{props.getValue() ? props.getValue() : '-'}</span>,
       enableSorting: false,
     },
     {
       header: 'Description',
-      accessorKey: 'description',
+      accessorKey: 'optimized_description',
       enableSorting: false,
     },
     {
@@ -97,6 +109,12 @@ export default function EventsListPage() {
       cell: (props) => <FriendlyTime date={props.getValue()} />,
       sortDescFirst: true,
     },
+    {
+      header: 'Next Update',
+      accessorKey: 'next_update',
+      cell: (props) => props.getValue() ? <FriendlyTime date={props.getValue()} /> : '-',
+      enableSorting: false,
+    },
     {
       header: 'Map',
       accessorKey: 'map',