56 lines
1.8 KiB
Vue
56 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
const pushApi = usePushApi();
|
|
const toast = useToast();
|
|
|
|
const { data, pending, refresh, error } = await useAsyncData("summary", () => pushApi.request<{
|
|
instances: number;
|
|
devices: number;
|
|
jobs: number;
|
|
failedJobs: number;
|
|
}>("/admin/summary"), { immediate: false });
|
|
|
|
onMounted(async () => {
|
|
pushApi.hydrateToken();
|
|
if (pushApi.token.value) await refresh();
|
|
});
|
|
|
|
watch(error, (nextError) => {
|
|
if (nextError) toast.add({ title: "Dashboard konnte nicht geladen werden", color: "error" });
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<AdminShell>
|
|
<TokenGate>
|
|
<div class="space-y-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-950">Übersicht</h2>
|
|
<p class="text-sm text-gray-500">Technischer Zustand des zentralen Push-Gateways.</p>
|
|
</div>
|
|
<UButton icon="i-lucide-refresh-cw" variant="soft" :loading="pending" @click="refresh()">Aktualisieren</UButton>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-4">
|
|
<UCard>
|
|
<p class="text-sm text-gray-500">Instanzen</p>
|
|
<p class="mt-2 text-3xl font-bold">{{ data?.instances ?? 0 }}</p>
|
|
</UCard>
|
|
<UCard>
|
|
<p class="text-sm text-gray-500">Geräte</p>
|
|
<p class="mt-2 text-3xl font-bold">{{ data?.devices ?? 0 }}</p>
|
|
</UCard>
|
|
<UCard>
|
|
<p class="text-sm text-gray-500">Jobs</p>
|
|
<p class="mt-2 text-3xl font-bold">{{ data?.jobs ?? 0 }}</p>
|
|
</UCard>
|
|
<UCard>
|
|
<p class="text-sm text-gray-500">Fehler</p>
|
|
<p class="mt-2 text-3xl font-bold text-red-600">{{ data?.failedJobs ?? 0 }}</p>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
</TokenGate>
|
|
</AdminShell>
|
|
</template>
|