Timezone switch on status page (#191) (#233)

icecoldPHP · jbrooksuk · web-flow · commit 42f6b187c4a0 · 2025-09-13T15:01:55.000+01:00
Co-authored-by: James Brooks &lt;james@alt-three.com&gt;
diff --git a/resources/lang/de/settings.php b/resources/lang/de/settings.php
@@ -5,6 +5,7 @@
         'site_name_label' => 'Seitenname',
         'about_this_site_label' => 'Über diese Seite',
         'timezone_label' => 'Zeitzone',
+        'timezone_other' => 'Andere',
         'incident_days_label' => 'Vorfalltage',
         'major_outage_threshold_label' => 'Schwellenwert für schwere Ausfälle',
         'refresh_rate_label' => 'Automatisch Seite neuladen',
diff --git a/resources/lang/de_AT/settings.php b/resources/lang/de_AT/settings.php
@@ -5,6 +5,7 @@
         'site_name_label' => 'Seitenname',
         'about_this_site_label' => 'Über diese Seite',
         'timezone_label' => 'Zeitzone',
+        'timezone_other' => 'Andere',
         'incident_days_label' => 'Vorfalltage',
         'major_outage_threshold_label' => 'Schwellenwert für schwere Ausfälle',
         'refresh_rate_label' => 'Automatisch Seite neuladen',
diff --git a/resources/lang/de_CH/settings.php b/resources/lang/de_CH/settings.php
@@ -5,6 +5,7 @@
         'site_name_label' => 'Seitenname',
         'about_this_site_label' => 'Über diese Seite',
         'timezone_label' => 'Zeitzone',
+        'timezone_other' => 'Andere',
         'incident_days_label' => 'Vorfalltage',
         'major_outage_threshold_label' => 'Schwellenwert für schwere Ausfälle',
         'refresh_rate_label' => 'Automatisch Seite neuladen',
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
@@ -4,6 +4,9 @@
     'manage_cachet' => [
         'site_name_label' => 'Site Name',
         'about_this_site_label' => 'About This Site',
+        'timezone_label' => 'Timezone',
+        'timezone_other' => 'Other',
+        'browser_default' => 'Browser Default',
         'incident_days_label' => 'Incident Days',
         'major_outage_threshold_label' => 'Major Outage Threshold',
         'refresh_rate_label' => 'Automatically Refresh Page',
@@ -29,7 +32,7 @@
         'locale_label' => 'Locale',
         'timezone_label' => 'Timezone',
         'toggles' => [
-            'show_timezone' => 'Show Timezone',
+            'show_timezone' => 'Show timezone on status page',
         ],
     ],
     'manage_theme' => [
diff --git a/resources/lang/nl/settings.php b/resources/lang/nl/settings.php
@@ -5,6 +5,8 @@
         'site_name_label' => 'Pagina naam',
         'about_this_site_label' => 'Over deze site',
         'timezone_label' => 'Tijdzone',
+        'timezone_other' => 'Overig',
+        'browser_default' => 'Gebruik browserstandaard',
         'incident_days_label' => 'Incidentendagen',
         'major_outage_threshold_label' => 'Drempel voor ernstige storingen',
         'refresh_rate_label' => 'Pagina automatisch opnieuw laden',
diff --git a/resources/lang/ph/settings.php b/resources/lang/ph/settings.php
@@ -5,6 +5,7 @@
         'site_name_label' => 'Pangalan ng Site',
         'about_this_site_label' => 'Tungkol sa Site na Ito',
         'timezone_label' => 'Oras na Rehiyon',
+        'timezone_other' => 'Iba pang mga oras',
         'incident_days_label' => 'Mga Araw ng Insidente',
         'major_outage_threshold_label' => 'Limitasyon ng Malaking Pagka-aberya',
         'refresh_rate_label' => 'Awtomatikong I-refresh ang Pahina',
diff --git a/resources/lang/pt_BR/settings.php b/resources/lang/pt_BR/settings.php
@@ -5,6 +5,7 @@
         'site_name_label' => 'Nome do Site',
         'about_this_site_label' => 'Sobre Este Site',
         'timezone_label' => 'Fuso Horário',
+        'timezone_other' => 'Outro',
         'incident_days_label' => 'Dias de Incidentes',
         'major_outage_threshold_label' => 'Limite de Indisponibilidade Total',
         'refresh_rate_label' => 'Atualizar Página Automaticamente',
diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
@@ -11,13 +11,21 @@
     </div>
     @endif
     @if($showTimezone)
-    <div>
-        {!! preg_replace(
+    <div id="cachet-footer-timezone" data-timezone="{{ $timezone }}" data-label=""></div>
+    <script defer async>
+        document.addEventListener('DOMContentLoaded', function () {
+            const timeZoneLabel = '{!! preg_replace(
             '/\*(.*?)\*/',
             '<span class="font-semibold">$1</span>',
-            __('cachet::cachet.all_times_shown_in', ['timezone' => $timezone])
-        ) !!}
-    </div>
+            __('cachet::cachet.all_times_shown_in', ['timezone' => ':timezone:'])
+        ) !!}'
+            let footerTimeZone = document.getElementById('cachet-footer-timezone').dataset.timezone;
+            if (footerTimeZone === '-') {
+                footerTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            }
+            document.getElementById('cachet-footer-timezone').innerHTML = timeZoneLabel.replace(':timezone:', footerTimeZone);
+        });
+    </script>
     @endif
 </footer>
 @endif
diff --git a/resources/views/components/incident.blade.php b/resources/views/components/incident.blade.php
@@ -6,7 +6,7 @@
 
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_INCIDENTS_BEFORE) }}
 <div class="relative flex flex-col gap-5" x-data="{ forDate: new Date(@js($date)) }">
-    <h3 class="text-xl font-semibold"><time datetime="{{ $date }}" x-text="forDate.toLocaleDateString()"></time></h3>
+    <h3 class="text-xl font-semibold"><time datetime="{{ $date }}" x-text="forDate.toLocaleDateString(@if($appSettings->timezone !== '-')undefined, {timeZone: '{{$appSettings->timezone}}'}@endif )"></time></h3>
     @forelse($incidents as $incident)
     <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-white/5">
         <div @class([
@@ -32,7 +32,7 @@
                         @endauth
                     </div>
                     <span class="text-xs text-zinc-500 dark:text-zinc-400">
-                        {{ $incident->timestamp->diffForHumans() }} — <time datetime="{{ $incident->timestamp->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>
+                        {{ $incident->timestamp->diffForHumans() }} — <time datetime="{{ $incident->timestamp->toW3cString() }}" x-text="timestamp.toLocaleString(@if($appSettings->timezone !== '-')undefined, {timeZone: '{{$appSettings->timezone}}'}@endif )"></time>
                     </span>
                 </div>
                 <div class="flex justify-start sm:justify-end">
@@ -53,7 +53,7 @@
                     <x-cachet::incident-update-status :status="$update->status" />
                     <h3 class="text-lg font-semibold">{{ $update->status->getLabel() }}</h3>
                     <span class="text-xs text-zinc-500 dark:text-zinc-400">
-                        {{ $update->created_at->diffForHumans() }} — <time datetime="{{ $update->created_at->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>
+                        {{ $update->created_at->diffForHumans() }} — <time datetime="{{ $update->created_at->toW3cString() }}" x-text="timestamp.toLocaleString(@if($appSettings->timezone !== '-')undefined, {timeZone: '{{$appSettings->timezone}}'}@endif )"></time>
                     </span>
                     <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-accent-content prose-a:underline prose-p:leading-normal">{!! $update->formattedMessage() !!}</div>
                 </div>
@@ -62,7 +62,7 @@
                     <x-cachet::incident-update-status :status="IncidentStatusEnum::unknown" />
 
                     <span class="text-xs text-zinc-500 dark:text-zinc-400">
-                        {{ $incident->timestamp->diffForHumans() }} — <time datetime="{{ $incident->timestamp->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>
+                        {{ $incident->timestamp->diffForHumans() }} — <time datetime="{{ $incident->timestamp->toW3cString() }}" x-text="timestamp.toLocaleString(@if($appSettings->timezone !== '-')undefined, {timeZone: '{{$appSettings->timezone}}'}@endif )"></time>
                     </span>
                     <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-accent-content prose-a:underline prose-p:leading-normal">{!! $incident->formattedMessage() !!}</div>
                 </div>
diff --git a/resources/views/components/schedule.blade.php b/resources/views/components/schedule.blade.php
@@ -11,7 +11,7 @@
                             </h3>
                         </div>
                         <span class="text-xs text-zinc-500 dark:text-zinc-400">
-                            {{ $schedule->scheduled_at->diffForHumans() }} — <time datetime="{{ $schedule->scheduled_at->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>
+                            {{ $schedule->scheduled_at->diffForHumans() }} — <time datetime="{{ $schedule->scheduled_at->toW3cString()}}" x-text="timestamp.toLocaleString(@if($appSettings->timezone !== '-')undefined, {timeZone: '{{$appSettings->timezone}}'}@endif )"></time>
                         </span>
                     </div>
 
@@ -30,7 +30,7 @@
             @foreach ($schedule->updates as $update)
             <div class="relative py-4" x-data="{ timestamp: new Date(@js($update->created_at)) }">
                 <span class="text-xs text-zinc-500 dark:text-zinc-400">
-                    {{ $update->created_at->diffForHumans() }} — <time datetime="{{ $update->created_at->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>
+                    {{ $update->created_at->diffForHumans() }} — <time datetime="{{ $update->created_at->toW3cString() }}" x-text="timestamp.toLocaleString(@if($appSettings->timezone !== '-')undefined, {timeZone: '{{$appSettings->timezone}}'}@endif )"></time>
                 </span>
                 <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-accent-content prose-a:underline prose-p:leading-normal">{!! $update->formattedMessage() !!}</div>
             </div>
diff --git a/src/CachetCoreServiceProvider.php b/src/CachetCoreServiceProvider.php
@@ -164,6 +164,7 @@ private function registerPublishing(): void
      */
     private function registerBladeComponents(): void
     {
+        view()->share('appSettings', app(AppSettings::class));
         Blade::componentNamespace('Cachet\\View\\Components', 'cachet');
 
         $this->callAfterResolving(Factory::class, function (Factory $factory) {
diff --git a/src/Filament/Pages/Settings/ManageCachet.php b/src/Filament/Pages/Settings/ManageCachet.php
@@ -40,21 +40,9 @@ public function form(Schema $schema): Schema
                     MarkdownEditor::make('about')
                         ->label(__('cachet::settings.manage_cachet.about_this_site_label'))
                         ->columnSpanFull(),
+                ]),
 
-                    Select::make('timezone')
-                        ->label(__('cachet::settings.manage_cachet.timezone_label'))
-                        ->options(fn () => collect(timezone_identifiers_list())
-                            ->mapToGroups(
-                                fn ($timezone) => [
-                                    Str::of($timezone)
-                                        ->before('/')
-                                        ->toString() => [$timezone => $timezone],
-                                ]
-                            )
-                            ->map(fn ($group) => $group->collapse()))
-                        ->searchable()
-                        ->suffixIcon('heroicon-o-globe-alt'),
-
+                Section::make()->columns(3)->schema([
                     TextInput::make('incident_days')
                         ->numeric()
                         ->label(__('cachet::settings.manage_cachet.incident_days_label'))
@@ -78,13 +66,7 @@ public function form(Schema $schema): Schema
                         ->step(1)
                         ->suffix(__('cachet::settings.manage_cachet.refresh_rate_label_input_suffix_seconds')),
 
-                    Toggle::make('show_timezone')
-                        ->label(__('cachet::settings.manage_cachet.toggles.show_timezone')),
-                    Toggle::make('only_disrupted_days')
-                        ->label(__('cachet::settings.manage_cachet.toggles.only_show_disrupted_days')),
-                    Toggle::make('dashboard_login_link')
-                        ->label(__('cachet::settings.manage_cachet.toggles.show_dashboard_link')),
-                    Grid::make(2)
+                    Grid::make(1)
                         ->schema([
                             Toggle::make('recent_incidents_only')
                                 ->label(__('cachet::settings.manage_cachet.toggles.recent_incidents_only'))
@@ -99,14 +81,19 @@ public function form(Schema $schema): Schema
                                 ->hidden(fn (Get $get) => $get('recent_incidents_only') !== true),
                         ]),
                 ]),
+
                 Section::make(__('cachet::settings.manage_cachet.display_settings_title'))
                     ->schema([
+                        Toggle::make('dashboard_login_link')
+                            ->label(__('cachet::settings.manage_cachet.toggles.show_dashboard_link')),
                         Toggle::make('show_support')
                             ->label(__('cachet::settings.manage_cachet.toggles.support_cachet')),
                         Toggle::make('display_graphs')
                             ->label(__('cachet::settings.manage_cachet.toggles.display_graphs')),
                         Toggle::make('enable_external_dependencies')
                             ->label(__('cachet::settings.manage_cachet.toggles.enable_external_dependencies')),
+                        Toggle::make('only_disrupted_days')
+                            ->label(__('cachet::settings.manage_cachet.toggles.only_show_disrupted_days')),
                     ]),
             ]);
     }
diff --git a/src/Filament/Pages/Settings/ManageLocalization.php b/src/Filament/Pages/Settings/ManageLocalization.php
@@ -48,6 +48,7 @@ public function form(Schema $schema): Schema
                                 ]
                             )
                             ->map(fn ($group) => $group->collapse()))
+                        ->required()
                         ->searchable()
                         ->suffixIcon('heroicon-o-globe-alt'),
 
diff --git a/src/Settings/AppSettings.php b/src/Settings/AppSettings.php
@@ -2,6 +2,8 @@
 
 namespace Cachet\Settings;
 
+use Cachet\Enums\IncidentStatusEnum;
+use Cachet\Enums\MetricTypeEnum;
 use Spatie\LaravelSettings\Settings;
 
 class AppSettings extends Settings
