Rewrite page in Svelte 5 #49
6 changed files with 51 additions and 59 deletions
|
@ -42,14 +42,13 @@
|
|||
if (typeof monitor !== 'undefined') {
|
||||
status = monitor.status;
|
||||
}
|
||||
if (icons.length != 0 && typeof server.icon !== "undefined") {
|
||||
if (icons.length != 0 && typeof server.icon !== 'undefined') {
|
||||
const rootSplit = server.icon.split('/');
|
||||
const root = rootSplit[rootSplit.length - 1];
|
||||
|
||||
if (server.iconType === IconType.SVG) {
|
||||
checkForImage(server);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if (icons.includes(`${root}-36.${server.iconType}`)) {
|
||||
img_source = `${server.icon}-36.${server.iconType}`;
|
||||
} else {
|
||||
|
@ -62,7 +61,8 @@
|
|||
|
||||
<div
|
||||
class="flex h-48 w-[28rem] flex-col gap-y-2 rounded-xl border-t-4
|
||||
{status == 99 ? 'border-primary'
|
||||
{status == 99
|
||||
? 'border-primary'
|
||||
: status == 0
|
||||
? 'border-offline'
|
||||
: status == 1
|
||||
|
@ -80,7 +80,7 @@
|
|||
on:mouseover={() => (hover.title = true)}
|
||||
on:mouseleave={() => (hover.title = false)}
|
||||
>
|
||||
{#if typeof server.icon !== "undefined"}
|
||||
{#if typeof server.icon !== 'undefined'}
|
||||
{#if img_source != ''}
|
||||
<img
|
||||
width="24px"
|
||||
|
@ -92,11 +92,7 @@
|
|||
<Skeleton class="h-6 w-6 rounded-full" />
|
||||
{/if}
|
||||
{:else}{/if}
|
||||
<a
|
||||
href={server.href}
|
||||
class="font-bold {!hover.title || 'text-secondary'}"
|
||||
>{server.name}</a
|
||||
>
|
||||
<a href={server.href} class="font-bold {!hover.title || 'text-secondary'}">{server.name}</a>
|
||||
{#if hover.title}
|
||||
<div
|
||||
transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
|
||||
|
@ -110,7 +106,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
|
||||
{#if typeof server.id !== "undefined"}
|
||||
{#if typeof server.id !== 'undefined'}
|
||||
<h1
|
||||
class="w-16 rounded-md border-b-2
|
||||
{status == 0
|
||||
|
|
|
@ -87,11 +87,7 @@
|
|||
<Skeleton class="h-6 w-6 rounded-full" />
|
||||
{/if}
|
||||
{:else}{/if}
|
||||
<a
|
||||
href={service.href}
|
||||
class="font-bold {!hover.title || 'text-secondary'}"
|
||||
>{service.name}</a
|
||||
>
|
||||
<a href={service.href} class="font-bold {!hover.title || 'text-secondary'}">{service.name}</a>
|
||||
{#if hover.title}
|
||||
<div
|
||||
transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
|
||||
|
|
|
@ -8,4 +8,3 @@
|
|||
<div class="h-full pt-16">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
|
|
|
@ -12,8 +12,7 @@
|
|||
<Button
|
||||
variant="ghost"
|
||||
href="/"
|
||||
class="{button} + {!($page.url.pathname === '/')
|
||||
|| 'border-secondary text-secondary'}"
|
||||
class="{button} + {!($page.url.pathname === '/') || 'border-secondary text-secondary'}"
|
||||
>
|
||||
Home
|
||||
</Button>
|
||||
|
@ -22,8 +21,8 @@
|
|||
<Button
|
||||
variant="ghost"
|
||||
href="/servers"
|
||||
class="{button} + {!$page.url.pathname.startsWith('/servers')
|
||||
|| 'border-secondary text-secondary'}"
|
||||
class="{button} + {!$page.url.pathname.startsWith('/servers') ||
|
||||
'border-secondary text-secondary'}"
|
||||
>
|
||||
Servers
|
||||
</Button>
|
||||
|
@ -32,8 +31,8 @@
|
|||
<Button
|
||||
variant="ghost"
|
||||
href="/services"
|
||||
class="{button} + {!$page.url.pathname.startsWith('/services')
|
||||
|| 'border-secondary text-secondary'}"
|
||||
class="{button} + {!$page.url.pathname.startsWith('/services') ||
|
||||
'border-secondary text-secondary'}"
|
||||
>
|
||||
Services
|
||||
</Button>
|
||||
|
@ -42,8 +41,8 @@
|
|||
<Button
|
||||
variant="ghost"
|
||||
href="/about"
|
||||
class="{button} + {!$page.url.pathname.startsWith('/about')
|
||||
|| 'border-secondary text-secondary'}"
|
||||
class="{button} + {!$page.url.pathname.startsWith('/about') ||
|
||||
'border-secondary text-secondary'}"
|
||||
>
|
||||
About
|
||||
</Button>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { version } from '$app/environment'
|
||||
import { version } from '$app/environment';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
@ -9,12 +9,14 @@
|
|||
|
||||
<p>
|
||||
Version:
|
||||
<a href="https://forgejo.neshweb.net/Neshweb-Sites/main-site/releases/tag/{version}" class="hover:underline">
|
||||
<a
|
||||
href="https://forgejo.neshweb.net/Neshweb-Sites/main-site/releases/tag/{version}"
|
||||
class="hover:underline"
|
||||
>
|
||||
{version}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
||||
<p class="text-background">Background</p>
|
||||
<p class="text-foreground">Foreground</p>
|
||||
<p class="text-muted">Muted</p>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
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";
|
||||
import ServerCard from '$lib/components/ServerCard.svelte';
|
||||
|
||||
let { data }: { data: { promise: Promise<string> } } = $props();
|
||||
|
||||
|
@ -43,7 +43,7 @@
|
|||
};
|
||||
monitorList.set(monitor.monitorID, monitor);
|
||||
monitorList = new Map(monitorList.entries());
|
||||
})
|
||||
});
|
||||
|
||||
socket.on('heartbeatList', (_, data) => {
|
||||
let recent = data[data.length - 1];
|
||||
|
|
Loading…
Reference in a new issue