Skip to content

Commit

Permalink
style: Fixed debug mode in modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@lewislarsen
lewislarsen committed Aug 2, 2024
1 parent d851fb1 commit abadaa4
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 56 deletions.
100 changes: 54 additions & 46 deletions resources/views/livewire/backup-tasks/modals/log-modal.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,73 @@
<div>
<x-modal name="backup-task-{{ $backupTaskId }}" wire:key="backup-task-{{ $backupTaskId }}">
<x-slot name="title">
{{ __('Log Results') }}
{{ __('Viewing latest log for ":label".', ['label' => $backupTask?->label ?? __('Unknown')]) }}
</x-slot>
<x-slot name="description">
{{ __('Viewing a Backup Task log.') }}
</x-slot>
<x-slot name="icon">
heroicon-o-document-text
</x-slot>
<div class="p-6">
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
{{ __('Viewing latest log for ":label".', ['label' => $backupTask?->label ?? __('Unknown')]) }}
</h2>

<div>
@if (app()->isLocal())
<!-- Debug Info -->
<div x-data="{ showDebug: false }" class="mt-4">
<button @click="showDebug = !showDebug" class="flex items-center text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
<span x-show="!showDebug">
@svg('heroicon-o-eye', 'w-4 h-4 mr-1')
{{ __('Show Debug Info') }}
</span>
<span x-show="showDebug">
@svg('heroicon-o-eye-slash', 'w-4 h-4 mr-1')
{{ __('Hide Debug Info') }}
</span>
<div
x-data="{ showDebug: false }"
class="mt-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700"
>
<button
@click="showDebug = !showDebug"
class="w-full px-4 py-2 text-left text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800/90 focus:outline-none transition-colors duration-200"
>
<div class="flex items-center justify-between">
<span class="flex items-center">
<x-heroicon-o-bug-ant class="w-5 h-5 mr-2" />
{{ __('Debug Information') }}
</span>
<x-heroicon-o-chevron-down
class="w-5 h-5 transition-transform duration-200"
::class="{ 'transform rotate-180': showDebug }"
/>
</div>
</button>
<div x-show="showDebug" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform scale-95"
x-transition:enter-end="opacity-100 transform scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-95"
class="mt-2 p-3 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded-md shadow-sm">
<ul class="space-y-1">
<li class="flex items-center">
@svg('heroicon-o-identification', 'w-4 h-4 mr-2 text-gray-500 dark:text-gray-400')
<span>Component ID: {{ $this->getId() }}</span>
</li>
<li class="flex items-center">
@svg('heroicon-o-clipboard-document-list', 'w-4 h-4 mr-2 text-gray-500 dark:text-gray-400')
<span>Backup Task ID: {{ $backupTaskId }}</span>
</li>
<li class="flex items-center">
@svg('heroicon-o-arrow-path', 'w-4 h-4 mr-2 text-gray-500 dark:text-gray-400')
<span>Is Streaming: {{ $isStreaming ? 'Yes' : 'No' }}</span>
</li>
<li class="flex items-center">
@svg('heroicon-o-clock', 'w-4 h-4 mr-2 text-gray-500 dark:text-gray-400')
<span>Is Loading: {{ $isLoading ? 'Yes' : 'No' }}</span>
</li>
<li class="flex items-center">
@svg('heroicon-o-document-text', 'w-4 h-4 mr-2 text-gray-500 dark:text-gray-400')
<span>Log Output Length: {{ strlen($logOutput) }}</span>
</li>

<div
x-show="showDebug"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-2"
class="px-4 py-3 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm rounded-b-lg"
>
<ul class="space-y-2">
@php
$debugItems = [
['icon' => 'identification', 'label' => 'Component ID', 'value' => $this->getId()],
['icon' => 'clipboard-document-list', 'label' => 'Backup Task ID', 'value' => $backupTaskId],
['icon' => 'arrow-path', 'label' => 'Is Streaming', 'value' => $isStreaming ? 'Yes' : 'No'],
['icon' => 'clock', 'label' => 'Is Loading', 'value' => $isLoading ? 'Yes' : 'No'],
['icon' => 'document-text', 'label' => 'Log Output Length', 'value' => strlen($logOutput)],
];
@endphp

@foreach ($debugItems as $item)
<li class="flex items-center justify-between">
<span class="flex items-center text-gray-600 dark:text-gray-400">
<x-dynamic-component
:component="'heroicon-o-' . $item['icon']"
class="w-4 h-4 mr-2"
/>
{{ $item['label'] }}:
</span>
<span class="font-medium">{{ $item['value'] }}</span>
</li>
@endforeach
</ul>
</div>
</div>
@endif

<div class="my-5">
@if ($isLoading)
<div class="flex flex-col items-center justify-center">
Expand Down
14 changes: 4 additions & 10 deletions resources/views/livewire/backup-tasks/tables/backup-task-history-table.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,22 +74,16 @@
@livewire('backup-tasks.buttons.delete-backup-task-log-button', ['backupTaskLog' => $backupTaskLog])
<x-modal name="backup-task-historic-log-{{ $backupTaskLog->id }}">
<x-slot name="title">
{{ __('Log Results') }}
{{ __('Viewing log for finished task: ":label".', ['label' => $backupTaskLog->backupTask->label]) }}
</x-slot>
<x-slot name="description">
{{ __('Viewing a Backup Task log.') }}
{{ __('This log was generated :date.', ['date' => $backupTaskLog->created_at->timezone(Auth::user()->timezone ?? config('app.timezone'))->format('l, d F Y H:i')]) }}
</x-slot>
<x-slot name="icon">
heroicon-o-document-text
</x-slot>
<div class="p-6 text-center">
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
{{ __('Viewing log for finished task: ":label".', ['label' => $backupTaskLog->backupTask->label]) }}
</h2>
<p class="text-gray-800 dark:text-gray-200 my-3">
{{ __('This log was generated :date.', ['date' => $backupTaskLog->created_at->timezone(Auth::user()->timezone ?? config('app.timezone'))->format('l, d F Y H:i')]) }}
</p>
<div class="my-5">
<div class="text-center">
<div class="mb-5">
<x-textarea id="logOutput" readonly
class="pre text-sm text-gray-800 bg-gray-50 font-mono" rows="16" wrap>
{{ $backupTaskLog->output }}
Expand Down

0 comments on commit abadaa4

Please sign in to comment.