Add initial /servers route

src/routes/data/servers/+server.ts

@@ -0,0 +1,10 @@
+import * as fs from 'fs';
+import { json } from '@sveltejs/kit';
+
+export function GET() {
+	const content = fs.readFileSync('static/data/servers.json').toString();
+
+	const data = JSON.parse(content);
+
+	return json(data);
+}

src/routes/data/services/+server.ts

@@ -4,7 +4,7 @@ import { json } from '@sveltejs/kit';
 export function GET() {
 	const content = fs.readFileSync('static/data/services.json').toString();
 
-	let data = JSON.parse(content);
+	const data = JSON.parse(content);
 
 	return json(data);
 }

src/routes/servers/+page.server.ts

@@ -0,0 +1,62 @@
+import { io, Socket } from 'socket.io-client';
+import * as fs from 'fs';
+
+export async function load() {
+	const promise = getJwt();
+
+	return {
+		promise
+	};
+}
+
+async function getJwt(): Promise<string> {
+	const socket = io('https://status.neshweb.net/');
+	const credFile = './credentials.json';
+	let token = '';
+	let valid = false;
+
+	if (fs.existsSync(credFile)) {
+		const content = fs.readFileSync(credFile);
+		token = content.toString();
+	}
+
+	socket.on('connect', async () => {
+		if (token == '') {
+			token = await login(socket);
+			valid = true;
+		} else {
+			socket.emit('loginByToken', token, async (res) => {
+				if (!res.ok) {
+					token = await login(socket);
+				}
+				valid = true;
+			});
+		}
+	});
+
+	while (!valid) {
+		await new Promise((resolve) => setTimeout(resolve, 10));
+	}
+
+	fs.writeFileSync(credFile, token);
+
+	return token;
+}
+
+async function login(socket: Socket): Promise<string> {
+	let token = '';
+	socket.emit(
+		'login',
+		{ username: process.env.KUMA_USERNAME, password: process.env.KUMA_PASSWORD, token: '' },
+		(res: { token: string }) => {
+			token = res.token;
+			socket.close();
+		}
+	);
+
+	while (token == '') {
+		await new Promise((resolve) => setTimeout(resolve, 10));
+	}
+
+	return token;
+}

src/routes/servers/+page.svelte

@@ -1,4 +1,106 @@
+<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>