47 lines
3.0 KiB
PHP
47 lines
3.0 KiB
PHP
<div wire:poll.30s>
|
|
<x-topbar :title="__('nav.panel')" :subtitle="__('panel.subtitle')" />
|
|
|
|
<div class="px-5 lg:px-[26px] py-6 max-w-[1560px] mx-auto w-full">
|
|
@if ($tiles->isEmpty())
|
|
<x-panel><p class="text-[13px] text-ink-3 text-center py-8">{{ __('panel.empty') }}</p></x-panel>
|
|
@else
|
|
<p class="text-[11.5px] text-ink-3 mb-3">{{ __('panel.reorder_hint') }}</p>
|
|
<div x-data="sortableGrid()" x-ref="grid"
|
|
class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
|
|
@foreach ($tiles as $tile)
|
|
@php $on = data_get($tile->state?->state, 'on') === true; @endphp
|
|
<div wire:key="tile-{{ $tile->id }}" data-uuid="{{ $tile->uuid }}"
|
|
@class([
|
|
'relative rounded-card border p-4 min-h-[7.5rem] flex flex-col select-none transition-colors',
|
|
'border-accent/40 bg-accent/10' => $on,
|
|
'border-line-soft bg-surface' => ! $on,
|
|
])>
|
|
<div class="flex items-start">
|
|
<span @class(['grid place-items-center w-10 h-10 rounded-lg', 'bg-accent/20 text-accent' => $on, 'bg-inset text-ink-3' => ! $on])>
|
|
<x-icon :name="$tile->type === 'light' ? 'bolt' : 'devices'" :size="20" />
|
|
</span>
|
|
<button type="button" class="drag-handle ml-auto -mr-1 -mt-1 p-1 cursor-grab touch-none text-ink-3 hover:text-ink" aria-label="{{ __('panel.drag') }}">
|
|
<x-icon name="menu" :size="16" />
|
|
</button>
|
|
</div>
|
|
|
|
<button type="button" wire:click="toggle({{ $tile->id }})" class="text-left mt-auto pt-2">
|
|
<div class="text-[14px] font-bold text-ink truncate">{{ $tile->device->name }}</div>
|
|
<div class="text-[11px] text-ink-3 truncate">{{ $tile->device->room?->name ?? '—' }}</div>
|
|
<div @class(['mt-1 text-[13px] font-bold', 'text-accent' => $on, 'text-ink-3' => ! $on])>{{ $on ? __('devices.on') : __('devices.off') }}</div>
|
|
</button>
|
|
|
|
@if ($tile->type === 'light')
|
|
<button type="button"
|
|
wire:click="$dispatch('openModal', { component: 'modals.light-control', arguments: { entity: @js($tile->uuid) } })"
|
|
class="absolute bottom-3 right-3 grid place-items-center w-8 h-8 rounded-lg bg-raised text-ink-2 hover:text-ink transition-colors" aria-label="{{ __('panel.light_settings') }}">
|
|
<x-icon name="settings" :size="15" />
|
|
</button>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|