109 lines
4.1 KiB
Vue
109 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute();
|
|
const pushApi = usePushApi();
|
|
const id = route.params.id as string;
|
|
|
|
const { data: instance, refresh: refreshInstance } = await useAsyncData(`instance-${id}`, () => pushApi.request<Record<string, any>>(`/admin/instances/${id}`), { immediate: false });
|
|
const { data: devices, refresh: refreshDevices } = await useAsyncData(`devices-${id}`, () => pushApi.request<Record<string, any>[]>(`/admin/instances/${id}/devices`), { default: () => [], immediate: false });
|
|
const { data: jobs, refresh: refreshJobs } = await useAsyncData(`jobs-${id}`, () => pushApi.request<Record<string, any>[]>(`/admin/instances/${id}/jobs`), { default: () => [], immediate: false });
|
|
|
|
onMounted(async () => {
|
|
pushApi.hydrateToken();
|
|
if (pushApi.token.value) {
|
|
await refreshAll();
|
|
}
|
|
});
|
|
|
|
async function refreshAll() {
|
|
await Promise.all([refreshInstance(), refreshDevices(), refreshJobs()]);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AdminShell>
|
|
<TokenGate>
|
|
<div class="space-y-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<UButton to="/instances" icon="i-lucide-arrow-left" variant="ghost" size="sm">Zurück</UButton>
|
|
<h2 class="mt-2 text-2xl font-bold">{{ instance?.name || "Instanz" }}</h2>
|
|
<p class="text-sm text-gray-500">{{ instance?.instanceId }}</p>
|
|
</div>
|
|
<UButton icon="i-lucide-refresh-cw" variant="soft" @click="refreshAll">Aktualisieren</UButton>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-3">
|
|
<UCard>
|
|
<p class="text-sm text-gray-500">Geräte</p>
|
|
<p class="mt-2 text-3xl font-bold">{{ instance?.deviceCount ?? 0 }}</p>
|
|
</UCard>
|
|
<UCard>
|
|
<p class="text-sm text-gray-500">Zustelljobs</p>
|
|
<p class="mt-2 text-3xl font-bold">{{ instance?.jobCount ?? 0 }}</p>
|
|
</UCard>
|
|
<UCard>
|
|
<p class="text-sm text-gray-500">Status</p>
|
|
<p class="mt-2 text-xl font-bold">{{ instance?.status }}</p>
|
|
</UCard>
|
|
</div>
|
|
|
|
<UCard>
|
|
<template #header>
|
|
<h3 class="font-bold">Geräte</h3>
|
|
</template>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left text-sm">
|
|
<thead class="text-gray-500">
|
|
<tr>
|
|
<th class="py-2">Central ID</th>
|
|
<th>Plattform</th>
|
|
<th>Status</th>
|
|
<th>Zuletzt gesehen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="device in devices" :key="device.id" class="border-t border-gray-100">
|
|
<td class="py-2 font-mono">{{ device.centralDeviceId }}</td>
|
|
<td>{{ device.platform }}</td>
|
|
<td>{{ device.status }}</td>
|
|
<td>{{ new Date(device.lastSeenAt).toLocaleString() }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<template #header>
|
|
<h3 class="font-bold">Letzte Zustelljobs</h3>
|
|
</template>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left text-sm">
|
|
<thead class="text-gray-500">
|
|
<tr>
|
|
<th class="py-2">Job</th>
|
|
<th>Status</th>
|
|
<th>Angenommen</th>
|
|
<th>Gesendet</th>
|
|
<th>Fehler</th>
|
|
<th>Erstellt</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="job in jobs" :key="job.id" class="border-t border-gray-100">
|
|
<td class="py-2 font-mono">{{ job.deliveryJobId }}</td>
|
|
<td>{{ job.status }}</td>
|
|
<td>{{ job.acceptedCount }}</td>
|
|
<td>{{ job.sentCount }}</td>
|
|
<td>{{ job.failedCount }}</td>
|
|
<td>{{ new Date(job.createdAt).toLocaleString() }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</TokenGate>
|
|
</AdminShell>
|
|
</template>
|