60 lines
2.6 KiB
PHP
60 lines
2.6 KiB
PHP
@props(['device', 'controllable' => true])
|
|
|
|
@php
|
|
$entities = $device->entities;
|
|
$primary = $controllable ? $entities->first(fn ($e) => in_array($e->type, ['switch', 'light'], true)) : null;
|
|
$on = $primary ? (data_get($primary->state?->state, 'on') === true) : false;
|
|
$secondary = $primary ? $entities->reject(fn ($e) => $e->id === $primary->id) : $entities;
|
|
$online = $device->isOnline();
|
|
$icon = match (true) {
|
|
$device->isCloud() => 'doorbell',
|
|
$primary?->type === 'light' => 'bolt',
|
|
$entities->contains(fn ($e) => $e->type === 'contact') => 'window',
|
|
$entities->contains(fn ($e) => $e->type === 'motion') => 'activity',
|
|
default => 'devices',
|
|
};
|
|
@endphp
|
|
|
|
<div @class([
|
|
'group rounded-card border p-4 flex flex-col gap-3 transition-[border-color,transform] duration-150 hover:-translate-y-px',
|
|
'border-accent/40 bg-accent/[0.07]' => $on,
|
|
'border-line-soft bg-surface hover:border-line' => ! $on,
|
|
])>
|
|
<div class="flex items-center gap-3">
|
|
<span @class([
|
|
'grid place-items-center w-9 h-9 rounded-lg shrink-0 transition-colors',
|
|
'bg-accent/20 text-accent' => $on,
|
|
'bg-inset text-ink-2' => ! $on,
|
|
])><x-icon :name="$icon" :size="18" /></span>
|
|
|
|
<div class="min-w-0 flex-1">
|
|
<a href="{{ route('devices.show', $device) }}" wire:navigate
|
|
class="block text-[13.5px] font-bold text-ink truncate hover:text-accent transition-colors">{{ $device->name }}</a>
|
|
<div class="flex items-center gap-1.5 text-[11px] text-ink-3 truncate">
|
|
<span class="truncate">{{ $device->room?->name ?? __('devices.no_room') }}</span>
|
|
@if ($device->isCloud())
|
|
<span title="{{ __('addons.cloud') }}"><x-icon name="cloud" :size="10" /></span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<x-status-dot :state="$online ? 'online' : 'offline'" :pulse="$online" />
|
|
</div>
|
|
|
|
@if ($secondary->isNotEmpty())
|
|
<div class="flex flex-wrap gap-1.5">
|
|
@foreach ($secondary as $entity)
|
|
<x-entity-state :entity="$entity" />
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
@if ($primary)
|
|
<div class="mt-auto flex items-center gap-2 border-t border-line-soft pt-3">
|
|
<span @class(['text-[12.5px] font-bold', 'text-accent' => $on, 'text-ink-3' => ! $on])>{{ $on ? __('devices.on') : __('devices.off') }}</span>
|
|
<x-toggle :on="$on" wire:click="toggleEntity({{ $primary->id }})" :label="$device->name"
|
|
wire:loading.attr="disabled" class="ml-auto" />
|
|
</div>
|
|
@endif
|
|
</div>
|