Страница зоны со всеми её устройствами и live-статусом
Раньше зона в списке была просто строкой без возможности провалиться внутрь — все устройства смотрелись только через общий плоский список /devices с колонкой "Зона". Теперь клик по зоне открывает её страницу с карточками устройств (иконка по категории, статус online/offline/ unknown точкой с пульсацией для online, external_id) — ровно то, что просили: все устройства и их статус на одном экране при выборе зоны. Заодно список зон переведён с голой таблицы на карточки для консистентности с новой страницей — вся карточка кликабельна и ведёт на show, кнопки изменить/удалить остаются только у owner. ZonePolicy::view уже был публичным (true всем) — новый роут zones.show использует его без изменений.
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { Link, usePage } from '@inertiajs/vue3';
|
||||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||||
import DeviceTypeIcon from '@/Components/DeviceTypeIcon.vue';
|
||||
import StatusDot from '@/Components/StatusDot.vue';
|
||||
import { routes } from '@/routes';
|
||||
|
||||
const props = defineProps({
|
||||
zone: { type: Object, required: true },
|
||||
devices: { type: Array, required: true },
|
||||
});
|
||||
|
||||
const isOwner = computed(() => usePage().props.auth.user?.role === 'owner');
|
||||
|
||||
const onlineCount = computed(() => props.devices.filter((d) => d.status === 'online').length);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<Link :href="routes.zones.index" class="text-sm text-gray-500 hover:text-gray-700">← Зоны</Link>
|
||||
<h2 class="mt-1 font-semibold text-xl text-gray-800 leading-tight">{{ zone.name }}</h2>
|
||||
</div>
|
||||
<Link
|
||||
v-if="isOwner"
|
||||
:href="routes.zones.edit(zone.id)"
|
||||
class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50"
|
||||
>
|
||||
Изменить зону
|
||||
</Link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
||||
<div v-if="zone.description" class="text-sm text-gray-600">{{ zone.description }}</div>
|
||||
|
||||
<div class="flex items-center gap-2 text-sm text-gray-500">
|
||||
<span class="font-medium text-gray-700">{{ devices.length }}</span> устройств,
|
||||
<span class="font-medium text-green-600">{{ onlineCount }}</span> онлайн
|
||||
</div>
|
||||
|
||||
<div v-if="devices.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">
|
||||
<Link
|
||||
v-for="device in devices"
|
||||
:key="device.id"
|
||||
:href="routes.devices.show(device.id)"
|
||||
class="group flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-5 transition hover:border-indigo-200 hover:shadow-md"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<DeviceTypeIcon :category="device.device_type.category" />
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 group-hover:text-indigo-600">{{ device.name }}</div>
|
||||
<div class="text-xs text-gray-500">{{ device.device_type.code }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between border-t border-gray-100 pt-3">
|
||||
<StatusDot :status="device.status" />
|
||||
<span class="font-mono text-xs text-gray-400">{{ device.external_id }}</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user