Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues2 Pull requests Releases11 Packages1 Activity Actions

Integrate with Uptime Kuma Socket.io API

Browse source
This commit is contained in:
Neshura 2024-01-03 20:39:53 +01:00
parent 4523de1217
commit 3c1938af80
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
4 changed files with 113 additions and 7 deletions
src/lib/components
ServiceCard.svelte

23
src/lib/components/ServiceCard.svelte
View file

@ -5,10 +5,12 @@
import { quintInOut } from 'svelte/easing';
import { slide } from 'svelte/transition';
import { IconType, type Service } from '$lib/types/data-types';
import { onMount } from 'svelte';
import { Skeleton } from '$lib/components/ui/skeleton';
import type {Heartbeat} from "$lib/types/uptime-kuma-types";
let { service, icons } = $props<{ service: Service; icons: Array<string> }>();
let { service, icons, monitor } = $props<{ service: Service; icons: Array<string>, monitor: Heartbeat }>();
let status = $state(4);
let hover = $state({
title: false,
@ -30,6 +32,12 @@
}
$effect(() => {
if (typeof monitor !== "undefined") {
if (monitor.monitorID == 9) {
console.log("Vaultwarden: ", monitor.status)
}
status = monitor.status;
}
if (icons.length != 0) {
const rootSplit = service.icon.split('/');
const root = rootSplit[rootSplit.length - 1];
@ -48,7 +56,9 @@
</script>
<div
class="flex h-48 w-[30rem] flex-col gap-y-2 rounded-xl border-t-4 border-maintenance bg-black/55 p-4"
class="flex h-48 w-[28rem] flex-col gap-y-2 rounded-xl border-t-4
{status == 0 ? 'border-offline' : status == 1 ? 'border-online' : status == 2 ? 'border-pending' : status == 3 ? 'border-maintenance' : 'border-maintenance'}
bg-black/55 p-4"
>
<div class="flex flex-row justify-between pb-4">
<div
@ -86,8 +96,11 @@
{/if}
</div>
<h1 class="w-16 rounded-md border-b-2 border-maintenance text-center text-sm text-maintenance">
Loading
<h1 class="w-16 rounded-md border-b-2
{status == 0 ? 'border-offline' : status == 1 ? 'border-online' : status == 2 ? 'border-pending' : status == 3 ? 'border-maintenance' : 'border-maintenance'}
text-center text-sm
{status == 0 ? 'text-offline' : status == 1 ? 'text-online' : status == 2 ? 'text-pending' : status == 3 ? 'text-maintenance' : 'text-maintenance'}">
{status == 0 ? 'Offline' : status == 1 ? 'Online' : status == 2 ? 'Pending' : status == 3 ? 'Maint.' : 'Loading'}
</h1>
</div>
<p class="text-wrap text-center text-sm text-accent">{service.desc}</p>