106 lines
2.6 KiB
Svelte
106 lines
2.6 KiB
Svelte
<svelte:options runes={true} />
|
|
|
|
<script lang="ts">
|
|
import type { Server } from '$lib/types/data-types';
|
|
import { io } from 'socket.io-client';
|
|
import type { Heartbeat } from '$lib/types/uptime-kuma-types';
|
|
import ServerCard from '$lib/components/ServerCard.svelte';
|
|
|
|
let { data }: { data: { promise: Promise<string> } } = $props();
|
|
|
|
let token = $state();
|
|
|
|
data.promise.then((jwt) => {
|
|
token = jwt;
|
|
});
|
|
|
|
let servers: readonly Server[] = $state.frozen([]);
|
|
|
|
let icons: readonly string[] = $state.frozen([]);
|
|
|
|
let monitorList: Map<number, Heartbeat> = $state(new Map());
|
|
|
|
//let token = $props();
|
|
|
|
$effect(() => {
|
|
if (token) {
|
|
const socket = io('https://status.neshweb.net/');
|
|
|
|
socket.on('connect', () => {
|
|
socket.emit('loginByToken', token, () => {});
|
|
});
|
|
|
|
socket.on('importantHeartbeatList', (_, data) => {
|
|
let recent = data[data.length - 1];
|
|
let monitor: Heartbeat = {
|
|
monitorID: recent.monitor_id,
|
|
status: recent.status,
|
|
time: recent.time,
|
|
msg: recent.msg,
|
|
ping: recent.ping,
|
|
important: recent.important,
|
|
duration: recent.duration
|
|
};
|
|
monitorList.set(monitor.monitorID, monitor);
|
|
monitorList = new Map(monitorList.entries());
|
|
});
|
|
|
|
socket.on('heartbeatList', (_, data) => {
|
|
let recent = data[data.length - 1];
|
|
let monitor: Heartbeat = {
|
|
monitorID: recent.monitor_id,
|
|
status: recent.status,
|
|
time: recent.time,
|
|
msg: recent.msg,
|
|
ping: recent.ping,
|
|
important: recent.important,
|
|
duration: recent.duration
|
|
};
|
|
monitorList.set(monitor.monitorID, monitor);
|
|
monitorList = new Map(monitorList.entries());
|
|
});
|
|
|
|
socket.on('heartbeat', (data) => {
|
|
monitorList.set(data.monitorID, data);
|
|
monitorList = new Map(monitorList.entries());
|
|
});
|
|
}
|
|
});
|
|
|
|
async function get(url: string): Promise<any> {
|
|
let res = await fetch(url);
|
|
if (res.ok) {
|
|
let data = await res.json();
|
|
return data;
|
|
} else {
|
|
return Promise.reject();
|
|
}
|
|
}
|
|
|
|
$effect(() => {
|
|
get('/data/servers').then((data: Server[]) => {
|
|
servers = data;
|
|
});
|
|
});
|
|
|
|
$effect(() => {
|
|
get('/assets/icons').then((data: string[]) => {
|
|
icons = data;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Servers</title>
|
|
<meta name="description" content="Overview of Game Servers running on neshweb.net" />
|
|
</svelte:head>
|
|
|
|
<div class="flex max-h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
|
|
{#each servers as server}
|
|
{#if typeof server.id === 'undefined'}
|
|
<ServerCard {server} {icons} />
|
|
{:else}
|
|
<ServerCard {server} {icons} monitor={monitorList.get(server.id)} />
|
|
{/if}
|
|
{/each}
|
|
</div>
|