59 lines
3.3 KiB
PHP
59 lines
3.3 KiB
PHP
<div>
|
|
<x-topbar :title="__('nav.devices')" :subtitle="__('devices.index_subtitle')">
|
|
<x-slot:actions>
|
|
<button type="button" wire:click="$dispatch('openModal', { component: 'modals.add-device' })"
|
|
class="inline-flex items-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-[12px] font-bold text-base hover:brightness-110 transition-[filter]">
|
|
<x-icon name="plus" :size="15" /> <span class="hidden sm:inline">{{ __('devices.add') }}</span>
|
|
</button>
|
|
</x-slot:actions>
|
|
</x-topbar>
|
|
|
|
<div class="px-5 lg:px-[26px] py-6 flex flex-col gap-5 max-w-[1560px] mx-auto w-full">
|
|
{{-- filters --}}
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<div class="relative flex-1">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-ink-3"><x-icon name="devices" :size="15" /></span>
|
|
<input wire:model.live.debounce.300ms="search" type="search" placeholder="{{ __('devices.search_placeholder') }}"
|
|
class="w-full rounded-lg bg-raised border border-line pl-9 pr-3 py-2.5 text-sm text-ink placeholder:text-ink-3 outline-none focus:border-accent focus:ring-1 focus:ring-accent">
|
|
</div>
|
|
<select wire:model.live="room" class="rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent">
|
|
<option value="">{{ __('devices.all_rooms') }}</option>
|
|
@foreach ($rooms as $r)
|
|
<option value="{{ $r->uuid }}">{{ $r->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
<select wire:model.live="status" class="rounded-lg bg-raised border border-line px-3 py-2.5 text-sm text-ink outline-none focus:border-accent">
|
|
<option value="">{{ __('devices.all_status') }}</option>
|
|
<option value="online">{{ __('devices.online') }}</option>
|
|
<option value="offline">{{ __('devices.offline') }}</option>
|
|
</select>
|
|
@if ($search || $room || $status)
|
|
<button type="button" wire:click="clearFilters"
|
|
class="rounded-lg border border-line px-3 py-2.5 text-[13px] font-semibold text-ink-2 hover:text-ink hover:bg-raised transition-colors">
|
|
{{ __('devices.clear') }}
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="text-[12px] text-ink-3">{{ trans_choice('devices.count', $total, ['count' => $total]) }}</div>
|
|
|
|
@forelse ($groups as $roomName => $devices)
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<h2 class="text-[13px] font-bold text-ink-2 uppercase tracking-[0.08em]">{{ $roomName }}</h2>
|
|
<span class="font-mono tabular-nums text-[11px] text-ink-3">{{ $devices->count() }}</span>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
|
@foreach ($devices as $device)
|
|
<x-device-card :device="$device" />
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<x-panel>
|
|
<p class="text-[13px] text-ink-3 text-center py-6">{{ __('devices.none_match') }}</p>
|
|
</x-panel>
|
|
@endforelse
|
|
</div>
|
|
</div>
|