Rewrite page in Svelte 5 #49

Merged
Neshura merged 94 commits from rewrite/svelte into main 2024-01-06 14:12:09 +00:00
5 changed files with 52 additions and 24 deletions
Showing only changes of commit 4ce3e29f57 - Show all commits

View file

@ -0,0 +1,4 @@
import { writable } from 'svelte/store';
import {io} from "socket.io-client";
export let socketStore = writable(io('https://status.neshweb.net/'));

View file

@ -0,0 +1,4 @@
import {type Writable, writable} from 'svelte/store';
import type {Heartbeat} from "$lib/types/uptime-kuma-types";
export let uptimeStore: Writable<Map<number, Heartbeat>> = writable(new Map());

View file

@ -1,6 +1,20 @@
<svelte:options runes={true} />
<script>
import '../app.pcss';
import Header from './Header.svelte';
import { socketStore } from "$lib/stores/socketStore";
import {beforeNavigate} from "$app/navigation";
$effect(() => {
beforeNavigate((navigation) => {
const servers = navigation.to.url.pathname === "/servers" || navigation.from.url.pathname === "/servers"
const services = navigation.to.url.pathname === "/services" || navigation.from.url.pathname === "/services"
if ( ! (servers && services) ) {
$socketStore.close()
}
})
})
</script>
<Header />

View file

@ -5,6 +5,8 @@
import { io } from 'socket.io-client';
import type { Heartbeat } from '$lib/types/uptime-kuma-types';
import ServerCard from '$lib/components/ServerCard.svelte';
import { socketStore } from '$lib/stores/socketStore';
import {uptimeStore} from "$lib/stores/uptimeStore";
let { data }: { data: { promise: Promise<string> } } = $props();
@ -18,33 +20,25 @@
let icons: readonly string[] = $state.frozen([]);
let monitorList: Map<number, Heartbeat> = $state(new Map());
let monitorList = $state($uptimeStore);
//let token = $props();
console.log(monitorList);
let socket = $socketStore;
$effect(() => {
if (token) {
const socket = io('https://status.neshweb.net/');
if (!socket.connected) {
socket.connect();
}
else {
console.log("already connected");
}
socket.on('connect', () => {
console.log("logging in")
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 = {
@ -58,11 +52,13 @@
};
monitorList.set(monitor.monitorID, monitor);
monitorList = new Map(monitorList.entries());
$uptimeStore = monitorList;
});
socket.on('heartbeat', (data) => {
monitorList.set(data.monitorID, data);
monitorList = new Map(monitorList.entries());
$uptimeStore = monitorList;
});
}
});

View file

@ -5,6 +5,9 @@
import type { Service } from '$lib/types/data-types';
import { io } from 'socket.io-client';
import type { Heartbeat } from '$lib/types/uptime-kuma-types';
import {socketStore} from "$lib/stores/socketStore";
import {onDestroy} from "svelte";
import {uptimeStore} from "$lib/stores/uptimeStore";
let { data }: { data: { promise: Promise<string> } } = $props();
@ -18,19 +21,24 @@
let icons: readonly string[] = $state.frozen([]);
let monitorList: Map<number, Heartbeat> = $state(new Map());
let monitorList = $state($uptimeStore);
//let token = $props();
let socket = $socketStore;
$effect(() => {
if (token) {
const socket = io('https://status.neshweb.net/');
if (!socket.connected) {
socket.connect();
}
else {
console.log("connected")
}
socket.on('connect', () => {
console.log("login")
socket.emit('loginByToken', token, () => {});
});
socket.on('heartbeatList', (idString: string, data) => {
socket.on('heartbeatList', (_: string, data) => {
let recent = data[data.length - 1];
let monitor: Heartbeat = {
monitorID: recent.monitor_id,
@ -43,11 +51,13 @@
};
monitorList.set(monitor.monitorID, monitor);
monitorList = new Map(monitorList.entries());
$uptimeStore = monitorList;
});
socket.on('heartbeat', (data) => {
monitorList.set(data.monitorID, data);
monitorList = new Map(monitorList.entries());
$uptimeStore = monitorList;
});
}
});