overview.blade.php (5058B)
1 <?php 2 3 use function Livewire\Volt\{state}; 4 use Livewire\Attributes\Rule; 5 use App\Models\Room; 6 use Livewire\Volt\Component; 7 use Livewire\WithPagination; 8 9 new class extends Component { 10 use WithPagination; 11 12 #[Rule(['required', 'string'])] 13 public string $roomname = ''; 14 15 #[Rule(['required', 'string'])] 16 public string $description = ''; 17 18 public function createRoom(): void 19 { 20 $this->validate(); 21 try { 22 Room::firstOrCreate([ 23 'name' => $this->roomname, 24 'description' => $this->description, 25 ]); 26 $this->roomname = ''; 27 $this->description = ''; 28 $this->dispatch('close'); 29 } catch (\Exception $e) { 30 $this->addError('create-error', 'Failed to create Room. Please notify the admin'); 31 } 32 } 33 34 public function with(): array 35 { 36 return [ 37 'rooms' => Room::cursorPaginate(10), 38 ]; 39 } 40 }; ?> 41 42 <section class="space-y-6"> 43 <header class="flex item justify-between"> 44 <div> 45 <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100"> 46 {{ __('Rooms') }} 47 </h2> 48 49 <p class="mt-1 text-sm text-gray-600 dark:text-gray-400"> 50 {{ __('The rooms in your house') }} 51 </p> 52 </div> 53 54 <button x-on:click.prevent="$dispatch('open-modal', 'create-room')" 55 class="px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"> 56 {{ __('Create Room') }} 57 </button> 58 </header> 59 60 61 <x-modal name="create-room" :show="$errors->isNotEmpty()" focusable> 62 <form wire:submit="createRoom" class="p-6"> 63 <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100"> 64 {{ __('Create Room') }} 65 </h2> 66 <div class="mt-6"> 67 <x-input-label for="roomname" value="{{ __('Roomname') }}" class="sr-only" /> 68 69 <x-text-input wire:model="roomname" id="roomname" name="roomname" type="text" 70 class="mt-1 block w-full" placeholder="{{ __('Roomname') }}" /> 71 72 <x-input-error :messages="$errors->get('roomname')" class="mt-2" /> 73 </div> 74 75 <div class="mt-3"> 76 <x-input-label for="description" value="{{ __('Description') }}" class="sr-only" /> 77 78 <x-text-input wire:model="description" id="description" name="description" type="text" 79 class="mt-1 block w-full" placeholder="{{ __('Description') }}" /> 80 81 <x-input-error :messages="$errors->get('description')" class="mt-2" /> 82 </div> 83 <div class="mt-6 flex justify-end"> 84 <x-secondary-button x-on:click="$dispatch('close')"> 85 {{ __('Cancel') }} 86 </x-secondary-button> 87 88 <x-primary-button class="ml-3"> 89 {{ __('Create Room') }} 90 </x-primary-button> 91 <x-input-error :messages="$errors->get('create-error')" class="mt-2" /> 92 </div> 93 </form> 94 </x-modal> 95 96 @if ($rooms->count() > 0) 97 <table class="table-fixed w-full border-separate border-spacing-0 rounded-lg text-sm"> 98 <thead class="bg-gray-700 font-medium text-slate-300 dark:text-slate-200 text-left"> 99 <tr> 100 <th class="border-b dark:border-slate-600 p-4 pl-8 pt-3 pb-3"> 101 {{ __('Name') }} 102 </th> 103 <th class="border-b dark:border-slate-600 p-4 pl-8 pt-3 pb-3"> 104 {{ __('Description') }} 105 </th> 106 </tr> 107 </thead> 108 <tbody class="bg-white dark:bg-gray-900 text-slate-700 dark:text-slate-400"> 109 @foreach ($rooms as $room) 110 <tr> 111 <td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8"> 112 {{ $room->name }} 113 </td> 114 <td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8"> 115 {{ $room->description }} 116 </td> 117 </tr> 118 @endforeach 119 </tbody> 120 </table> 121 {{ $rooms->links() }} 122 @else 123 <p class="mt-1 text-base text-gray-800 dark:text-gray-200"> 124 {{ __('No rooms found. Please create a new Room') }} 125 </p> 126 @endif 127 </section> 128 129 <script> 130 document.addEventListener('livewire:initialized', () => { 131 Livewire.on('flash-nfc', ({ 132 room_id 133 }) => { 134 135 }) 136 }) 137 </script>