72 lines
5.0 KiB
PHP
72 lines
5.0 KiB
PHP
<div wire:poll.30s>
|
|
<x-topbar :title="__('nav.windows')" :subtitle="__('windows.subtitle')" />
|
|
|
|
<div class="px-5 lg:px-[26px] py-6 flex flex-col gap-5 max-w-[1560px] mx-auto w-full">
|
|
@if ($total === 0)
|
|
<x-panel><p class="text-[13px] text-ink-3 text-center py-6">{{ __('windows.empty') }}</p></x-panel>
|
|
@else
|
|
{{-- summary --}}
|
|
<section class="relative overflow-hidden rounded-card border border-line-soft {{ $open > 0 ? 'bg-warning/10' : 'bg-online/10' }}">
|
|
<span class="absolute inset-y-0 left-0 w-[3px] {{ $open > 0 ? 'bg-warning' : 'bg-online' }}"></span>
|
|
<div class="flex items-center gap-3.5 p-4 pl-5">
|
|
<span class="grid place-items-center w-10 h-10 rounded-lg bg-base/40 {{ $open > 0 ? 'text-warning' : 'text-online' }} shrink-0">
|
|
<x-icon :name="$open > 0 ? 'window' : 'check'" :size="20" />
|
|
</span>
|
|
<div>
|
|
<h2 class="text-[15px] font-bold text-ink">
|
|
{{ $open > 0 ? trans_choice('windows.open_count', $open, ['count' => $open]) : __('windows.all_closed') }}
|
|
</h2>
|
|
<p class="text-[12.5px] text-ink-2">{{ trans_choice('windows.sensor_count', $total, ['count' => $total]) }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@foreach ($groups as $roomName => $sensors)
|
|
<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">{{ $sensors->count() }}</span>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
|
@foreach ($sensors as $sensor)
|
|
@php
|
|
$battery = $sensor->device->entities->firstWhere('type', 'battery');
|
|
$pct = $battery ? (int) data_get($battery->state, 'state.percent', 0) : null;
|
|
$pos = data_get($sensor->state, 'state.position') ?? (data_get($sensor->state, 'state.open') === true ? 'open' : 'closed');
|
|
$isMotion = $sensor->type === 'motion';
|
|
$alert = $isMotion ? (data_get($sensor->state, 'state.on') === true || data_get($sensor->state, 'state.active') === true) : $pos !== 'closed';
|
|
@endphp
|
|
<a href="{{ route('devices.show', $sensor->device) }}" wire:navigate
|
|
@class([
|
|
'rounded-card border p-4 flex flex-col gap-3 transition-[border-color,transform] duration-150 hover:-translate-y-px',
|
|
'border-warning/40 bg-warning/[0.07]' => $alert,
|
|
'border-line-soft bg-surface hover:border-line' => ! $alert,
|
|
])>
|
|
<div class="flex items-center gap-3">
|
|
<span @class(['grid place-items-center w-9 h-9 rounded-lg shrink-0', 'bg-warning/20 text-warning' => $alert, 'bg-inset text-ink-2' => ! $alert])>
|
|
<x-icon :name="$isMotion ? 'activity' : 'window'" :size="18" />
|
|
</span>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="text-[13.5px] font-bold text-ink truncate">{{ $sensor->device->name }}</div>
|
|
<div class="text-[11px] text-ink-3 truncate">{{ $sensor->name ?: $sensor->key }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 border-t border-line-soft pt-3">
|
|
@if ($isMotion)
|
|
<span @class(['text-[13px] font-bold', 'text-warning' => $alert, 'text-ink-3' => ! $alert])>{{ $alert ? __('devices.motion') : __('devices.no_motion') }}</span>
|
|
@else
|
|
<span @class(['text-[13px] font-bold', 'text-warning' => $alert, 'text-online' => ! $alert])>{{ __('devices.contact_'.$pos) }}</span>
|
|
@endif
|
|
@if (! is_null($pct))
|
|
<span class="ml-auto"><x-status-pill :state="$pct < 20 ? 'offline' : 'neutral'"><x-icon name="alert" :size="11" /> <span class="font-mono tabular-nums">{{ $pct }}%</span></x-status-pill></span>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
</div>
|