nice logs

huserg · May 14, 2024 · f15c53d · f15c53d
1 parent b7c67b5
commit f15c53d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 23 deletions.
diff --git a/app/Models/LogEntry.php b/app/Models/LogEntry.php
@@ -15,8 +15,23 @@ class LogEntry extends Model
         'message',
     ];
 
+
+
     public function log() {
         return $this->belongsTo(Log::class);
     }
 
+
+    public function getTypeColorAttribute(): string
+    {
+        $type = strtoupper(explode(':', $this->message)[0]); // Convert to upper case for case-insensitive comparison
+        return match ($type) {
+            'DEBUG' => 'text-light-blue',
+            'INFO' => 'text-white',
+            'WARN' => 'text-yellow-400',
+            'ERROR' => 'text-red-600',
+            default => 'text-gray-200',
+        };
+    }
+
 }
diff --git a/resources/views/components/device-log-card.blade.php b/resources/views/components/device-log-card.blade.php
@@ -1,34 +1,30 @@
-<div class="bg-gray-700 dark:bg-light dark:bg-opacity-5 rounded-lg shadow-lg p-6 mb-6"
-     x-data="{ show: true }"
-     x-show="show"
-     x-transition:enter="transition ease-out duration-300"
-     x-transition:enter-start="opacity-0 transform scale-90"
-     x-transition:enter-end="opacity-100 transform scale-100"
-     x-transition:leave="transition ease-in duration-300"
-     x-transition:leave-start="opacity-100 transform scale-100"
-     x-transition:leave-end="opacity-0 transform scale-90"
->
+<div x-data="{ open: false }" class="bg-gray-700 dark:bg-light dark:bg-opacity-5 rounded-lg shadow-lg p-6 mb-6">
     <div class="flex flex-col space-y-4">
-        <div class="flex items-center justify-between w-full text-sm font-medium text-gray-200 dark:text-light mt-auto">
-            <div>
+        <div @click="open = !open" class="flex items-center justify-between w-full font-medium text-gray-200 dark:text-light mt-auto cursor-pointer">
+            <div class="">
                 @if($log->created_at->diffInDays() < 1)
                     {{ $log->created_at->diffForHumans() }}
                 @else
                     {{ $log->created_at }}
                 @endif
+                <span>{{ ' - ' . count($log->entries) . ' ' . __('entries')}}</span>
+            </div>
+            <div :class="{'transform -rotate-90 text-light-blue': open}" class="text-white p-3 transition-all duration-500">
+                <i class="fas fa-caret-left"></i>
             </div>
         </div>
-        <div class="md:flex justify-center md:justify-between w-full text-sm font-medium text-gray-200 dark:text-light mt-auto">
+        <div x-show="open" class="flex flex-col w-full mt-auto"
+             x-transition:enter="transition ease-out duration-200"
+             x-transition:enter-start="opacity-0 -translate-y-4"
+             x-transition:enter-end="opacity-100"
+             x-transition:leave="transition ease-in duration-200"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0 -translate-y-4"
+        >
             @foreach($log->entries as $entry)
-                <div class="flex flex-col space-y-2">
-                    <div class="flex items center justify-between">
-                        <div class="text-sm font-medium text-gray-200 dark:text-light">
-                            {{ $entry->type }}
-                        </div>
-                        <div class="text-sm font-medium text-gray-200 dark:text-light">
-                            {{ $entry->message }}
-                        </div>
-                    </div>
+                <div class="grid grid-cols-6 text-sm font-medium text-gray-200 dark:text-light border border-light/40 p-1">
+                    <div class="col-span-6 md:col-span-1 {{ $entry->type_color }}">{{ $entry->type }}</div>
+                    <div class="col-span-5">{{ $entry->message }}</div>
                 </div>
             @endforeach
         </div>

diff --git a/resources/views/devices/logs/index.blade.php b/resources/views/devices/logs/index.blade.php
@@ -10,7 +10,7 @@
             <div class="overflow-hidden">
                 <div class="p-6">
                     @isset($device->logs)
-                        @foreach($device->logs as $log)
+                        @foreach($device->logs->sortByDesc('created_at') as $log)
                             <x-device-log-card :log="$log" />
                         @endforeach
                     @else