41 lines
2.6 KiB
PHP
41 lines
2.6 KiB
PHP
<div wire:poll.30s>
|
|
<x-topbar :title="__('nav.rooms')" :subtitle="__('rooms.subtitle')" />
|
|
|
|
<div class="px-5 lg:px-[26px] py-6 flex flex-col gap-5 max-w-[1560px] mx-auto w-full">
|
|
@if ($rooms->isEmpty())
|
|
<x-panel><p class="text-[13px] text-ink-3 text-center py-6">{{ __('rooms.empty') }}</p></x-panel>
|
|
@else
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
|
|
@foreach ($rooms as $room)
|
|
@php
|
|
$devices = $room->devices;
|
|
$entities = $devices->flatMap->entities;
|
|
$online = $devices->filter->isOnline()->count();
|
|
$lightsOn = $entities->filter(fn ($e) => in_array($e->type, ['light', 'switch']) && data_get($e->state, 'state.on') === true)->count();
|
|
$open = $entities->filter(fn ($e) => $e->type === 'contact' && data_get($e->state, 'state.open') === true)->count();
|
|
@endphp
|
|
<a href="{{ route('rooms.show', $room) }}" wire:navigate
|
|
class="bg-surface border border-line-soft rounded-card p-4 flex flex-col gap-3 transition-[border-color,transform] duration-200 hover:border-line hover:-translate-y-px">
|
|
<div class="flex items-center gap-2.5">
|
|
<span class="grid place-items-center w-9 h-9 rounded-lg bg-inset text-ink-2"><x-icon :name="$room->icon ?? 'rooms'" :size="17" /></span>
|
|
<span class="text-[14px] font-bold text-ink truncate">{{ $room->name }}</span>
|
|
<x-icon name="chevron" :size="15" class="ml-auto text-ink-3" />
|
|
</div>
|
|
<div class="flex flex-wrap gap-1.5">
|
|
<x-status-pill :state="$online === $devices->count() && $devices->count() > 0 ? 'online' : 'neutral'">
|
|
<span class="font-mono tabular-nums">{{ $online }}/{{ $devices->count() }}</span> {{ __('rooms.online') }}
|
|
</x-status-pill>
|
|
@if ($lightsOn > 0)
|
|
<x-status-pill state="online"><span class="font-mono">{{ $lightsOn }}</span> {{ __('rooms.lights') }}</x-status-pill>
|
|
@endif
|
|
@if ($open > 0)
|
|
<x-status-pill state="warning"><span class="font-mono">{{ $open }}</span> {{ __('rooms.open') }}</x-status-pill>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|