Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues 2 Pull requests Releases 9 Packages Activity Actions

Rewrite page in Svelte 5 #49

Merged
Neshura merged 94 commits from rewrite/svelte into main 2024-01-06 14:12:09 +00:00
Conversation 0 Commits 94 Files changed 109 +58 -21
2 changed files with 58 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 8e4bf3b409 - Show all commits

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

@ -6,9 +6,13 @@
import { slide } from 'svelte/transition';
import { IconType, type Service } from '$lib/types/data-types';
import { Skeleton } from '$lib/components/ui/skeleton';
import type {Heartbeat} from "$lib/types/uptime-kuma-types";
import type { Heartbeat } from '$lib/types/uptime-kuma-types';
let { service, icons, monitor } = $props<{ service: Service; icons: Array<string>, monitor: Heartbeat }>();
let { service, icons, monitor } = $props<{
service: Service;
icons: Array<string>;
monitor: Heartbeat;
}>();
let status = $state(4);
@ -32,9 +36,9 @@
}
$effect(() => {
if (typeof monitor !== "undefined") {
if (typeof monitor !== 'undefined') {
if (monitor.monitorID == 9) {
console.log("Vaultwarden: ", monitor.status)
console.log('Vaultwarden: ', monitor.status);
}
status = monitor.status;
}
@ -57,7 +61,15 @@
<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 == 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">
@ -96,11 +108,37 @@
{/if}
</div>
<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'}
<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'}
{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>

23
src/routes/services/+page.svelte
View file

@ -3,14 +3,14 @@
<script lang="ts">
import ServiceCard from '$lib/components/ServiceCard.svelte';
import type { Service } from '$lib/types/data-types';
import {io} from "socket.io-client";
import type {Heartbeat} from "$lib/types/uptime-kuma-types";
import { io } from 'socket.io-client';
import type { Heartbeat } from '$lib/types/uptime-kuma-types';
let { data }: { data: { token: string } } = $props();
$effect(() => {
console.log("Data:", data.token)
})
console.log('Data:', data.token);
});
let services: readonly Service[] = $state.frozen([]);
@ -25,10 +25,10 @@
const socket = io('https://status.neshweb.net/');
socket.on('connect', () => {
socket.emit("loginByToken", data.token, (res) => {
console.log(data.token)
socket.emit('loginByToken', data.token, (res) => {
console.log(data.token);
console.log(res);
})
});
});
socket.on('heartbeatList', (idString: string, data) => {
@ -41,18 +41,17 @@
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);