55 lines
3.3 KiB
PHP
55 lines
3.3 KiB
PHP
<div>
|
|
<x-topbar :title="__('nav.devices')" :subtitle="__('devices.index_subtitle')" />
|
|
|
|
<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)
|
|
<x-panel :title="$roomName">
|
|
<x-slot:actions><x-badge>{{ $devices->count() }}</x-badge></x-slot:actions>
|
|
<div class="grid grid-cols-1 xl:grid-cols-2 gap-x-6 divide-y xl:divide-y-0 divide-line-soft">
|
|
@foreach ($devices as $device)
|
|
<a href="{{ route('devices.show', $device) }}" wire:navigate
|
|
class="flex items-center gap-3 py-2.5 -mx-4 px-4 rounded-lg hover:bg-raised/50 transition-colors">
|
|
<x-status-dot :state="$device->isOnline() ? 'online' : 'offline'" :pulse="$device->isOnline()" />
|
|
<span class="text-[13px] font-semibold text-ink truncate">{{ $device->name }}</span>
|
|
<span class="ml-auto text-[11px] font-mono text-ink-3 truncate shrink-0">{{ $device->model }}</span>
|
|
<x-icon name="chevron" :size="14" class="text-ink-3 shrink-0" />
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</x-panel>
|
|
@empty
|
|
<x-panel>
|
|
<p class="text-[13px] text-ink-3 text-center py-6">{{ __('devices.none_match') }}</p>
|
|
</x-panel>
|
|
@endforelse
|
|
</div>
|
|
</div>
|