Rewrite page in Svelte 5 #49

Merged
Neshura merged 94 commits from rewrite/svelte into main 2024-01-06 14:12:09 +00:00
7 changed files with 247 additions and 60 deletions
Showing only changes of commit abea3f1be9 - Show all commits

View file

@ -4,14 +4,14 @@
import { OpenInNewWindow } from 'radix-icons-svelte';
import { quintInOut } from 'svelte/easing';
import { slide } from 'svelte/transition';
import { IconType, type Service } from '$lib/types/data-types';
import { IconType, type Server } from '$lib/types/data-types';
import { Skeleton } from '$lib/components/ui/skeleton';
import type { Heartbeat } from '$lib/types/uptime-kuma-types';
let { service, icons, monitor } = $props<{
service: Service;
let { server, icons, monitor } = $props<{
server: Server;
icons: Array<string>;
monitor: Heartbeat;
monitor?: Heartbeat;
}>();
let status = $state(4);
@ -24,32 +24,36 @@
let img_source: string = $state('');
function checkForImage(service: Service) {
const rootSplit = service.icon.split('/');
function checkForImage(server: Server) {
const rootSplit = server.icon.split('/');
const root = rootSplit[rootSplit.length - 1];
if (icons.includes(`${root}.${service.iconType}`)) {
img_source = `${service.icon}.${service.iconType}`;
if (icons.includes(`${root}.${server.iconType}`)) {
img_source = `${server.icon}.${server.iconType}`;
} else {
img_source = '';
}
}
$effect(() => {
if (typeof server.id === 'undefined') {
status = 99;
}
if (typeof monitor !== 'undefined') {
status = monitor.status;
}
if (icons.length != 0) {
const rootSplit = service.icon.split('/');
if (icons.length != 0 && typeof server.icon !== "undefined") {
const rootSplit = server.icon.split('/');
const root = rootSplit[rootSplit.length - 1];
if (service.iconType === IconType.SVG) {
checkForImage(service);
} else {
if (icons.includes(`${root}-36.${service.iconType}`)) {
img_source = `${service.icon}-36.${service.iconType}`;
if (server.iconType === IconType.SVG) {
checkForImage(server);
}
else {
if (icons.includes(`${root}-36.${server.iconType}`)) {
img_source = `${server.icon}-36.${server.iconType}`;
} else {
checkForImage(service);
checkForImage(server);
}
}
}
@ -58,15 +62,16 @@
<div
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'}
{status == 99 ? 'border-primary'
: status == 0
? 'border-offline'
: status == 1
? 'border-online'
: status == 2
? 'border-pending'
: status == 3
? 'border-maintenance'
: 'border-maintenance'}
z-0 bg-black/55 p-4 backdrop-blur-sm"
>
<div class="flex flex-row justify-between pb-4">
@ -75,22 +80,22 @@
on:mouseover={() => (hover.title = true)}
on:mouseleave={() => (hover.title = false)}
>
{#if service.icon}
{#if typeof server.icon !== "undefined"}
{#if img_source != ''}
<img
width="24px"
class="h-6 w-6 cursor-pointer"
src={img_source}
alt="{service.name} Logo"
alt="{server.name} Logo"
/>
{:else}
<Skeleton class="h-6 w-6 rounded-full" />
{/if}
{:else}{/if}
<a
href={service.href}
href={server.href}
class="font-bold {!hover.title || 'text-secondary'}"
>{service.name}</a
>{server.name}</a
>
{#if hover.title}
<div
@ -105,7 +110,8 @@
{/if}
</div>
<h1
{#if typeof server.id !== "undefined"}
<h1
class="w-16 rounded-md border-b-2
{status == 0
? 'border-offline'
@ -137,13 +143,14 @@
? 'Maint.'
: 'Loading'}
</h1>
{/if}
</div>
<p class="text-wrap text-center text-sm">{service.desc}</p>
<p class="text-center text-sm font-bold text-destructive">{service.warn}</p>
<div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
<p class="text-wrap text-center text-sm">{server.desc}</p>
<p class="text-center text-sm font-bold text-destructive">{server.warn}</p>
<div class="grid {server.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
<a
class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
href={service.href}
href={server.href}
on:mouseover={() => (hover.link = true)}
on:mouseleave={() => (hover.link = false)}
>
@ -160,10 +167,10 @@
</div>
{/if}
</a>
{#if service.extLink}
{#if server.extLink}
<a
class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
href={service.extLink}
href={server.extLink}
on:mouseover={() => (hover.ext = true)}
on:mouseleave={() => (hover.ext = false)}
>

View file

@ -1,7 +1,7 @@
export type Service = {
readonly name: string;
readonly icon: string;
readonly iconType: IconType;
readonly icon?: string;
readonly iconType?: IconType;
readonly href: string;
readonly desc: string;
readonly warn: string;
@ -9,6 +9,17 @@ export type Service = {
readonly id: number;
};
export type Server = {
readonly name: string;
readonly icon?: string;
readonly iconType?: IconType;
readonly connection?: string;
readonly href?: string;
readonly desc?: string;
readonly extLink?: string;
readonly id?: number;
};
export enum IconType {
SVG = 'svg',
AVIF = 'avif',

View file

@ -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);
}

View file

@ -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);
}

View file

@ -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;
}

View file

@ -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>

View file

@ -1,31 +1,26 @@
[
{
"name": "Minecraft",
"icon": "/assets/icons/minecraft-logo",
"iconType": "avif",
"href": "https://minecraft.neshweb.net/",
"desc": "View all currently available Minecraft Servers and their mods"
"name": "Minecraft",
"icon": "/assets/icons/minecraft-logo",
"iconType": "avif",
"connection": "minecraft.neshweb.net",
"href": "https://minecraft.neshweb.net/",
"desc": "View all currently available Minecraft Servers and their mods",
"id": 38
},
{
"name": "Ready or Not",
"icon": "/assets/icons/ron-logo",
"iconType": "avif",
"href": "https://readyornot.neshweb.net/",
"desc": "Collection of Floor Plans for the Game 'Ready or Not'"
"name": "Ready or Not",
"icon": "/assets/icons/ron-logo",
"iconType": "avif",
"connection": "minecraft.neshweb.net",
"href": "https://readyornot.neshweb.net/",
"desc": "Collection of Floor Plans for the Game 'Ready or Not'"
},
{
"name": "Zomboid",
"icon": "/assets/icons/zomboid-logo",
"iconType": "avif",
"ip": "91.13.248.30",
"status": "Online"
"name": "Factorio"
},
{
"name": "Factorio",
"status": "Online"
},
{
"name": "Space Engineers",
"status": "Online"
"name": "Space Engineers",
"id": 13
}
]