Incident Timeline and Schedule Localization (#98)

Author: jbrooksuk

resources/lang/en.json

@@ -40,7 +40,6 @@
     "Settings": "Settings",
     "Setup Cachet": "Setup Cachet",
     "Show Dashboard Link": "Show Dashboard Link",
-    "Showing :from - :to": "Showing :from - :to",
     "Status Page": "Status Page",
     "Subscriber": "Subscriber",
     "Sum": "Sum",

resources/views/components/incident-timeline.blade.php

@@ -3,8 +3,9 @@
         <div>
             <h2 class="text-2xl font-semibold">{{ __('Past Incidents') }}</h2>
         </div>
-        <div class="text-sm text-zinc-500 dark:text-zinc-400">
-            {{ __('Showing :from - :to', ['from' => $from, 'to' => $to]) }}
+        <div class="flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-400" x-data="{ from: new Date(@js($from)), to: new Date(@js($to)) }">
+            <div><x-heroicon-m-calendar class="size-4" /></div>
+            <div><span x-html="from.toLocaleDateString()"></span> &mdash; <span x-html="to.toLocaleDateString()"></span></div>
         </div>
     </div>
 

resources/views/components/incident.blade.php

@@ -3,10 +3,10 @@
     'incidents',
 ])
 
-<div class="relative flex flex-col gap-5">
-    <h3 class="text-xl font-semibold">{{ $date }}</h3>
+<div class="relative flex flex-col gap-5" x-data="{ forDate: new Date(@js($date)) }">
+    <h3 class="text-xl font-semibold" x-html="forDate.toLocaleDateString()"></h3>
     @forelse($incidents as $incident)
-    <div class="bg-white border divide-y rounded-lg ml-9 dark:divide-zinc-700 dark:border-zinc-700 dark:bg-zinc-800">
+    <div x-data="{ timestamp: new Date(@js($incident->timestamp)) }" class="bg-white border divide-y rounded-lg ml-9 dark:divide-zinc-700 dark:border-zinc-700 dark:bg-zinc-800">
         <div @class([
             'flex flex-col bg-zinc-50 p-4 dark:bg-zinc-900 gap-2',
             'rounded-t-lg' => $incident->incidentUpdates->isNotEmpty(),
@@ -19,7 +19,7 @@
                         <a href="{{ route('cachet.status-page.incident', $incident) }}">{{ $incident->name}}</a>
                     </h3>
                     <span class="text-xs text-zinc-500 dark:text-zinc-400">
-                        {{ $incident->timestamp->diffForHumans() }} — {{ $incident->timestamp->toDayDateTimeString() }}
+                        {{ $incident->timestamp->diffForHumans() }} — <span x-text="timestamp.toLocaleString()"></span>
                     </span>
                 </div>
                 <div class="flex justify-start sm:justify-end">
@@ -40,10 +40,12 @@
             </div>
             <div class="flex flex-col px-4 divide-y dark:divide-zinc-700">
                 @foreach ($incident->incidentUpdates as $update)
-                <div class="relative py-4">
+                <div class="relative py-4" x-data="{ timestamp: new Date(@js($update->created_at)) }">
                     <x-cachet::incident-update-status :update="$update" />
 {{--                    <h3 class="text-lg font-semibold">Incident Update Title</h3>--}}
-                    <span class="text-xs text-zinc-500 dark:text-zinc-400">{{ $update->created_at->diffForHumans() }} — {{ $update->created_at->toDayDateTimeString() }}</span>
+                    <span class="text-xs text-zinc-500 dark:text-zinc-400">
+                        {{ $update->created_at->diffForHumans() }} — <span x-text="timestamp.toLocaleString()"></span>
+                    </span>
                     <div class="mt-1 prose-sm md:prose md:prose-zinc dark:text-zinc-100">
                        {!! $update->formattedMessage() !!}
                     </div>

resources/views/components/schedule.blade.php

@@ -1,4 +1,4 @@
-<li class="p-4">
+<li class="p-4" x-data="{ timestamp: new Date(@js($schedule->scheduled_at)) }">
     <div class="flex flex-col-reverse items-start justify-between gap-4 md:flex-row md:items-center">
         <div class="flex items-start gap-2.5">
             <span class="mt-1.5 h-3 w-3 shrink-0 rounded-full bg-orange-200 animate-pulse"></span>
@@ -7,10 +7,10 @@
                     <h3 class="font-semibold leading-6">{{ $schedule->name }}</h3>
                     <div class="flex grow text-sm sm:text-xs gap-2 text-zinc-500 dark:text-zinc-400 items-center">
                         @svg('cachet-clock', 'size-4 hidden sm:block')
-                        <span>{{ $schedule->scheduled_at->toFormattedDayDateString() }}</span>
+                        <span x-text="timestamp.toLocaleString()"></span>
                     </div>
                 </div>
-                <div class="prose-sm md:prose md:prose-zinc dark:prose-invert mt-1">
+                <div class="prose-sm md:prose md:prose-zinc dark:text-zinc-100">
                     {!! $schedule->formattedMessage() !!}
                 </div>
             </div>