cacto/home_automatization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Страница зоны со всеми её устройствами и live-статусом

Browse Source 
Раньше зона в списке была просто строкой без возможности провалиться
внутрь — все устройства смотрелись только через общий плоский список
/devices с колонкой "Зона". Теперь клик по зоне открывает её страницу
с карточками устройств (иконка по категории, статус online/offline/
unknown точкой с пульсацией для online, external_id) — ровно то, что
просили: все устройства и их статус на одном экране при выборе зоны.

Заодно список зон переведён с голой таблицы на карточки для
консистентности с новой страницей — вся карточка кликабельна и ведёт
на show, кнопки изменить/удалить остаются только у owner.

ZonePolicy::view уже был публичным (true всем) — новый роут
zones.show использует его без изменений.
This commit is contained in:
cacto
2026-08-13 13:07:01 +05:00
parent be1f238f89
commit f7aa0ba88e
8 changed files with 204 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
laravel-app/resources/js/Pages/Zones/Index.vue
+26 -25
View File
@@ -34,31 +34,32 @@ function destroy(zone) {
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
<table class="w-full text-left text-sm">
<thead>
<tr class="border-b">
<th class="py-2">Название</th>
<th class="py-2">Описание</th>
<th class="py-2">Устройств</th>
<th class="py-2" />
</tr>
</thead>
<tbody>
<tr v-if="zones.length === 0">
<td colspan="4" class="py-4 text-gray-500">Зон пока нет.</td>
</tr>
<tr v-for="zone in zones" :key="zone.id" class="border-b">
<td class="py-2">{{ zone.name }}</td>
<td class="py-2 text-gray-500">{{ zone.description }}</td>
<td class="py-2">{{ zone.devices_count }}</td>
<td class="py-2 text-right space-x-2">
<Link v-if="isOwner" :href="routes.zones.edit(zone.id)" class="text-indigo-600 hover:underline">Изменить</Link>
<button v-if="isOwner" type="button" class="text-red-600 hover:underline" @click="destroy(zone)">Удалить</button>
</td>
</tr>
</tbody>
</table>
<div v-if="zones.length === 0" class="bg-white rounded-xl border border-dashed border-gray-300 p-10 text-center text-sm text-gray-500">
Зон пока нет.
</div>
<div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div
v-for="zone in zones"
:key="zone.id"
class="group relative flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-5 transition hover:border-indigo-200 hover:shadow-md"
>
<Link :href="routes.zones.show(zone.id)" class="absolute inset-0" :aria-label="zone.name" />
<div class="flex items-start justify-between">
<h3 class="font-medium text-gray-900 group-hover:text-indigo-600">{{ zone.name }}</h3>
<span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600">
{{ zone.devices_count }} {{ zone.devices_count === 1 ? 'устройство' : 'устройств' }}
</span>
</div>
<p class="text-sm text-gray-500 min-h-5">{{ zone.description }}</p>
<div v-if="isOwner" class="relative z-10 mt-2 flex items-center gap-3 border-t border-gray-100 pt-3 text-sm">
<Link :href="routes.zones.edit(zone.id)" class="text-indigo-600 hover:underline">Изменить</Link>
<button type="button" class="text-red-600 hover:underline" @click="destroy(zone)">Удалить</button>
</div>
</div>
</div>
</div>
</div>