feat(darkmode): Added Darkmode classes

app/Http/Livewire/Dashboard/Components/Components.php

@@ -8,12 +8,15 @@
 namespace App\Http\Livewire\Dashboard\Components;
 
 use App\Events\ActionLog;
+use App\Http\Livewire\DataTable\WithPerPagePagination;
 use App\Models\ComponentGroup;
 use Auth;
 use Livewire\Component;
 
 class Components extends Component
 {
+    use WithPerPagePagination;
+
     protected $listeners = ['refreshData'];
 
     public function render()
@@ -24,7 +27,7 @@ public function render()
             'message' => 'Components',
         ));
         return view('livewire.dashboard.components.components', [
-            'groups' => ComponentGroup::getAllGroups(),
+            'groups' => $this->applyPagination(ComponentGroup::query()->orderBy('order')),
         ]);
     }
 

app/Http/Livewire/Dashboard/Metrics/Metrics.php

@@ -29,6 +29,11 @@ public function render()
         ]);
     }
 
+    public function reorder($orderedIds)
+    {
+        dd($orderedIds);
+    }
+
     public function updatedSearch(){
         $this->resetPage();
     }

app/Http/Livewire/Home/Home.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Livewire\Home;
+
+use Livewire\Component;
+use \App\Models\Metric;
+use Session;
+
+class Home extends Component
+{
+    public $interval = 60;
+    public $lastHours = 24;
+
+    public function render()
+    {
+        return view('livewire.home.home', [
+            'metrics' => Metric::query()->where('visibility', true)->orderBy('order')->get()
+        ])->layout('layouts.guest');
+    }
+
+    public function mount(){
+        $this->interval = Session::get('interval', $this->interval);
+        $this->lastHours = Session::get('lastHours', $this->lastHours);
+    }
+
+    public function updatedInterval(){
+        Session::put('interval', $this->interval);
+    }
+
+    public function updatedLastHours(){
+        Session::put('lastHours', $this->lastHours);
+    }
+}

app/Http/Livewire/Home/Metric.php

@@ -7,26 +7,19 @@
 class Metric extends Component
 {
     protected $listeners = ['update'];
-    protected $queryString = ['interval'];
 
     public \App\Models\Metric $metric;
-    private object $metricData;
-    public $intervalSelect = 60;
     public $interval;
+    public $lastHours;
 
     public function render()
     {
-        $this->metricData = $this->metric->getIntervalPointsLastHours(24, $this->interval ?? 60);
-
         return view('livewire.home.metric', [
-            'labels' => json_encode($this->metricData->labels, JSON_NUMERIC_CHECK),
-            'data' => json_encode($this->metricData->points, JSON_NUMERIC_CHECK)
+            'metricData' => $this->metric->getIntervalPointsLastHours($this->lastHours ?? 24, $this->interval ?? 60),
         ]);
     }
 
-    public function update(){
-        $this->redirectRoute('home', [
-            'interval' => $this->intervalSelect,
-        ]);
+    public function updated(){
+        $this->dispatchBrowserEvent('refreshJavaScript-'.$this->metric->id);
     }
 }

app/Models/Metric.php

@@ -7,6 +7,7 @@
 
 namespace App\Models;
 
+use Cache;
 use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
@@ -46,12 +47,19 @@ public function getIntervalPointsLastHours($lastHours, $interval = 60): object
                 if(Carbon::now()->subHours($i)->setMinutes($j) < Carbon::now()){
                     array_push($return->labels, Carbon::now()->subHours($i)->setMinutes($j)->format('H:i'));
 
-                    $points = $this->points()->whereBetween('created_at', [Carbon::now()->subHours($i)->setMinutes($j), Carbon::now()->subHours($i-1)->setMinutes($j+$interval)])->get();
+                    $points = $this->getPoints($interval, $i, $j);
                     array_push($return->points, $points->avg('value') ?? 0);
                 }
             }
         }
 
         return $return;
     }
+
+    private function getPoints($interval, $i, $j){
+        if(Cache::has('points_'.$this->id)){
+            return Cache::get('points_'.$this->id);
+        }
+        return $this->points()->whereBetween('created_at', [Carbon::now()->subHours($i)->setMinutes($j), Carbon::now()->subHours($i-1)->setMinutes($j+$interval)])->get();
+    }
 }

resources/js/app.js

@@ -7,47 +7,3 @@
 require('./bootstrap');
 
 require('alpinejs');
-
-let root = document.querySelector('[drag-root]')
-
-root.querySelectorAll('[drag-item]').forEach(el => {
-    el.addEventListener('dragstart', e => {
-        e.target.setAttribute('dragging', true)
-    })
-
-    el.addEventListener('drop', e => {
-        e.target.classList.remove('bg-yellow-100')
-
-        let draggingEl = root.querySelector('[dragging]')
-
-        e.target.before(draggingEl)
-
-        // Refresh the livewire component
-        let component = Livewire.find(
-            e.target.closest('[wire\\:id]').getAttribute('wire:id')
-        )
-
-        let orderIds = Array.from(root.querySelectorAll('[drag-item]'))
-            .map(itemEl => itemEl.getAttribute('drag-item'))
-
-        let method = root.getAttribute('drag-root')
-
-        component.call(method, orderIds)
-    })
-
-    el.addEventListener('dragenter', e => {
-        e.target.classList.add('bg-yellow-100')
-
-        e.preventDefault()
-    })
-
-    el.addEventListener('dragover', e => e.preventDefault())
-
-    el.addEventListener('dragleave', e => {
-        e.target.classList.remove('bg-yellow-100')
-    })
-
-    el.addEventListener('dragend', e => {
-        e.target.removeAttribute('dragging')
-    })
-})

resources/js/misc.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 by HerrTxbias.
+ *
+ * Using / Editing this without my consent is not allowed.
+ */
+
+tippy('button', {
+    content:(reference)=>reference.getAttribute('data-title'),
+    onMount(instance) {
+        instance.popperInstance.setOptions({
+            placement :instance.reference.getAttribute('data-placement')
+        });
+    }
+});

resources/views/api/api-token-manager.blade.php

@@ -26,7 +26,7 @@
                         @foreach (Laravel\Jetstream\Jetstream::$permissions as $permission)
                             <label class="flex items-center">
                                 <x-jet-checkbox wire:model.defer="createApiTokenForm.permissions" :value="$permission"/>
-                                <span class="ml-2 text-sm text-gray-600">{{ $permission }}</span>
+                                <span class="ml-2 text-sm text-gray-600 dark:text-white">{{ $permission }}</span>
                             </label>
                         @endforeach
                     </div>
@@ -129,7 +129,7 @@ class="mt-4 bg-gray-100 px-4 py-2 rounded font-mono text-sm text-gray-500 w-full
                 @foreach (Laravel\Jetstream\Jetstream::$permissions as $permission)
                     <label class="flex items-center">
                         <x-jet-checkbox wire:model.defer="updateApiTokenForm.permissions" :value="$permission"/>
-                        <span class="ml-2 text-sm text-gray-600">{{ $permission }}</span>
+                        <span class="ml-2 text-sm text-gray-600 dark:text-white">{{ $permission }}</span>
                     </label>
                 @endforeach
             </div>

resources/views/api/index.blade.php

@@ -1,6 +1,6 @@
 <x-app-layout>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-white leading-tight">
             {{ __('API Tokens') }}
         </h2>
     </x-slot>

resources/views/auth/two-factor-challenge.blade.php

@@ -5,11 +5,11 @@
         </x-slot>
 
         <div x-data="{ recovery: false }">
-            <div class="mb-4 text-sm text-gray-600" x-show="! recovery">
+            <div class="mb-4 text-sm text-gray-600 dark:text-white" x-show="! recovery">
                 {{ __('Please confirm access to your account by entering the authentication code provided by your authenticator application.') }}
             </div>
 
-            <div class="mb-4 text-sm text-gray-600" x-show="recovery">
+            <div class="mb-4 text-sm text-gray-600 dark:text-white" x-show="recovery">
                 {{ __('Please confirm access to your account by entering one of your emergency recovery codes.') }}
             </div>
 

resources/views/components/dropdown-new.blade.php

@@ -1,13 +1,3 @@
-{{--
--- Important note:
---
--- This template is based on an example from Tailwind UI, and is used here with permission from Tailwind Labs
--- for educational purposes only. Please do not use this template in your own projects without purchasing a
--- Tailwind UI license, or they’ll have to tighten up the licensing and you’ll ruin the fun for everyone.
---
--- Purchase here: https://tailwindui.com/
---}}
-
 @props(['label' => ''])
 
 <div x-data="{ open: false }" @keydown.window.escape="open = false" @click.away="open = false" class="relative inline-block text-left z-10">

resources/views/components/dropdown/item.blade.php

@@ -1,13 +1,3 @@
-{{--
--- Important note:
---
--- This template is based on an example from Tailwind UI, and is used here with permission from Tailwind Labs
--- for educational purposes only. Please do not use this template in your own projects without purchasing a
--- Tailwind UI license, or they’ll have to tighten up the licensing and you’ll ruin the fun for everyone.
---
--- Purchase here: https://tailwindui.com/
---}}
-
 @props(['type' => 'link'])
 
 @if ($type === 'link')

resources/views/components/input/checkbox.blade.php

@@ -1,13 +1,3 @@
-{{--
--- Important note:
---
--- This template is based on an example from Tailwind UI, and is used here with permission from Tailwind Labs
--- for educational purposes only. Please do not use this template in your own projects without purchasing a
--- Tailwind UI license, or they’ll have to tighten up the licensing and you’ll ruin the fun for everyone.
---
--- Purchase here: https://tailwindui.com/
---}}
-
 <div class="flex rounded-md shadow-sm">
     <input {{ $attributes }}
         type="checkbox"

resources/views/components/input/date.blade.php

@@ -1,13 +1,3 @@
-{{--
--- Important note:
---
--- This template is based on an example from Tailwind UI, and is used here with permission from Tailwind Labs
--- for educational purposes only. Please do not use this template in your own projects without purchasing a
--- Tailwind UI license, or they’ll have to tighten up the licensing and you’ll ruin the fun for everyone.
---
--- Purchase here: https://tailwindui.com/
---}}
-
 <div
     x-data="{ value: @entangle($attributes->wire('model')), picker: undefined }"
     x-init="new Pikaday({ field: $refs.input, format: 'MM/DD/YYYY', onOpen() { this.setDate($refs.input.value) } })"

resources/views/components/input/file-upload.blade.php

@@ -1,13 +1,3 @@
-{{--
--- Important note:
---
--- This template is based on an example from Tailwind UI, and is used here with permission from Tailwind Labs
--- for educational purposes only. Please do not use this template in your own projects without purchasing a
--- Tailwind UI license, or they’ll have to tighten up the licensing and you’ll ruin the fun for everyone.
---
--- Purchase here: https://tailwindui.com/
---}}
-
 <div class="flex items-center">
     {{ $slot }}
 

resources/views/components/input/group.blade.php

@@ -1,13 +1,3 @@
-{{--
--- Important note:
---
--- This template is based on an example from Tailwind UI, and is used here with permission from Tailwind Labs
--- for educational purposes only. Please do not use this template in your own projects without purchasing a
--- Tailwind UI license, or they’ll have to tighten up the licensing and you’ll ruin the fun for everyone.
---
--- Purchase here: https://tailwindui.com/
---}}
-
 @props([
     'label',
     'for',
@@ -20,7 +10,7 @@
 
 @if($inline)
     <div>
-        <label for="{{ $for }}" class="block text-sm font-medium leading-5 text-gray-700">{{ $label }}</label>
+        <label for="{{ $for }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-white">{{ $label }}</label>
 
         <div class="mt-1 relative rounded-md shadow-sm">
             {{ $slot }}
@@ -36,7 +26,7 @@
     </div>
 @else
     <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start {{ $borderless ? '' : ' sm:border-t ' }} sm:border-gray-200 {{ $paddingless ? '' : ' sm:py-5 ' }}">
-        <label for="{{ $for }}" class="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
+        <label for="{{ $for }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-white sm:mt-px sm:pt-2">
             {{ $label }}
         </label>
 

resources/views/components/input/money.blade.php

@@ -1,13 +1,3 @@
-{{--
--- Important note:
---
--- This template is based on an example from Tailwind UI, and is used here with permission from Tailwind Labs
--- for educational purposes only. Please do not use this template in your own projects without purchasing a
--- Tailwind UI license, or they’ll have to tighten up the licensing and you’ll ruin the fun for everyone.
---
--- Purchase here: https://tailwindui.com/
---}}
-
 <div class="mt-1 relative rounded-md shadow-sm">
     <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
         <span class="text-gray-500 sm:text-sm sm:leading-5">

resources/views/components/input/rich-text.blade.php

@@ -1,13 +1,3 @@
-{{--
--- Important note:
---
--- This template is based on an example from Tailwind UI, and is used here with permission from Tailwind Labs
--- for educational purposes only. Please do not use this template in your own projects without purchasing a
--- Tailwind UI license, or they’ll have to tighten up the licensing and you’ll ruin the fun for everyone.
---
--- Purchase here: https://tailwindui.com/
---}}
-
 <div
     class="rounded-md shadow-sm"
     x-data="{

resources/views/components/input/select.blade.php

@@ -1,20 +1,10 @@
-{{--
--- Important note:
---
--- This template is based on an example from Tailwind UI, and is used here with permission from Tailwind Labs
--- for educational purposes only. Please do not use this template in your own projects without purchasing a
--- Tailwind UI license, or they’ll have to tighten up the licensing and you’ll ruin the fun for everyone.
---
--- Purchase here: https://tailwindui.com/
---}}
-
 @props([
     'placeholder' => null,
     'trailingAddOn' => null,
 ])
 
 <div class="flex">
-  <select {{ $attributes->merge(['class' => 'form-select block w-full pl-3 pr-10 py-2 text-base leading-6 border-gray-300 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5' . ($trailingAddOn ? ' rounded-r-none' : '')]) }}>
+  <select {{ $attributes->merge(['class' => 'form-select block w-full pl-3 pr-10 py-2 text-base leading-6 border-gray-300 dark:bg-discordDark dark:border-discordBlack focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5' . ($trailingAddOn ? ' rounded-r-none' : '')]) }}>
     @if ($placeholder)
         <option disabled value="">{{ $placeholder }}</option>
     @endif

resources/views/components/input/text.blade.php

@@ -1,13 +1,3 @@
-{{--
--- Important note:
---
--- This template is based on an example from Tailwind UI, and is used here with permission from Tailwind Labs
--- for educational purposes only. Please do not use this template in your own projects without purchasing a
--- Tailwind UI license, or they’ll have to tighten up the licensing and you’ll ruin the fun for everyone.
---
--- Purchase here: https://tailwindui.com/
---}}
-
 @props([
     'leadingAddOn' => false,
 ])