DBC22-3158: used timezone data coming from DIT

src/backend/apps/event/migrations/0020_event_timezone.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.16 on 2024-12-16 17:46
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('event', '0019_event_polygon'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='event',
+            name='timezone',
+            field=models.CharField(blank=True, max_length=32, null=True),
+        ),
+    ]

src/backend/apps/event/models.py

@@ -41,6 +41,9 @@ class Event(BaseModel):
     start = models.DateTimeField(null=True)
     end = models.DateTimeField(null=True)
 
+    # Timezone
+    timezone = models.CharField(max_length=32, null=True, blank=True)
+
     def save(self, *args, **kwargs):
         uses_polygon = self.event_type in ['ROAD_CONDITION']  # chain up not used for now
         width = 1500 if self.event_type == 'CHAIN_UP' else 2000

src/backend/apps/event/tasks.py

@@ -118,7 +118,8 @@ def populate_all_event_data():
                 event_data["route_at"] = cars_data['route_at']
 
             # DBC22-3081 replace timezone with DIT API data, to be removed if source is corrected
-            if 'timezone' in cars_data:
+            if 'timezone' in cars_data and cars_data['timezone']:
+                event_data['timezone'] = cars_data['timezone']
                 new_tz = ZoneInfo(cars_data['timezone'])
 
                 first_created_time = event_data["first_created"].replace(tzinfo=new_tz)

src/frontend/src/Components/map/panels/EventPanel.js

@@ -67,13 +67,13 @@ export default function EventPanel(props) {
         <div className="popup__content__block">
           <div className="popup__content__description last-update">
             <p>Last update</p>
-            <FriendlyTime date={eventData.last_updated} />
+            <FriendlyTime date={eventData.last_updated} timezone={eventData.timezone} />
           </div>
 
           {eventData.next_update &&
             <div className="popup__content__description next-update">
               <p>Next update</p>
-              <FriendlyTime date={eventData.next_update} isNextUpdate={true} />
+              <FriendlyTime date={eventData.next_update} isNextUpdate={true} timezone={eventData.timezone} />
             </div>
           }
         </div>

src/frontend/src/Components/shared/FriendlyTime.js

@@ -9,30 +9,32 @@ import OutsideClickHandler from 'react-outside-click-handler';
 // Styling
 import './FriendlyTime.scss';
 
-const datetimeFormat = {
-  weekday: 'short',
-  month: 'short',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric',
-  year: 'numeric',
-  timeZoneName: 'short',
-};
-const formatter = new Intl.DateTimeFormat('en-US', datetimeFormat);
 const ONE_DAY = 1000 * 60 * 60 * 24; // 24 hours in milliseconds
 
-export const formatDate = (date, isNextUpdate=false) => {
+export const formatDate = (date, tz='America/Vancouver', isNextUpdate=false) => {
+  const datetimeFormat = {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    year: 'numeric',
+    timeZoneName: 'short',
+    timeZone: tz,
+  };
+  const formatter = new Intl.DateTimeFormat('en-US', datetimeFormat);
+
   // get time difference in milliseconds
   const timeDiff = (new Date() - new Date(date));
   return (isNextUpdate && timeDiff > 0) ? "Update expected as soon as possible, please continue to check back." : formatter.format(new Date(date));
 }
 
-export default function FriendlyTime({ date, asDate=false, includeFullIfHumanized=false, timeOnly=false, isNextUpdate=false }) {
+export default function FriendlyTime({ date, timezone, asDate=false, includeFullIfHumanized=false, timeOnly=false, isNextUpdate=false }) {
   const [showTooltip, setShowTooltip] = useState(false);
 
   // get time difference in milliseconds
   const timeDiff = (new Date() - new Date(date));
-  const dateFormatted = formatDate(date, isNextUpdate);
+  const dateFormatted = formatDate(date, timezone, isNextUpdate);
 
   // if difference is less than 24hrs
   const humanize = timeDiff < ONE_DAY;
@@ -80,7 +82,7 @@ export default function FriendlyTime({ date, asDate=false, includeFullIfHumanize
           >
             <div className="friendly-time-text">
               {(isNextUpdate && timeDiff > 0) ? "Update expected as soon as possible, please continue to check back." :
-                <ReactTimeAgo date={dt} locale="en-US"/>
+                <ReactTimeAgo date={dt} verboseDate={dateFormatted} locale="en-US"/>
               }
             </div>
             { !(isNextUpdate && timeDiff > 0) &&