Rewrite page in Svelte 5 #49
4 changed files with 186 additions and 0 deletions
185
src/lib/components/ServerCard.svelte
Normal file
185
src/lib/components/ServerCard.svelte
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
<svelte:options runes={true} />
|
||||
|
||||
<script lang="ts">
|
||||
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 { Skeleton } from '$lib/components/ui/skeleton';
|
||||
import type { Heartbeat } from '$lib/types/uptime-kuma-types';
|
||||
|
||||
let { service, icons, monitor } = $props<{
|
||||
service: Service;
|
||||
icons: Array<string>;
|
||||
monitor: Heartbeat;
|
||||
}>();
|
||||
|
||||
let status = $state(4);
|
||||
|
||||
let hover = $state({
|
||||
title: false,
|
||||
link: false,
|
||||
ext: false
|
||||
});
|
||||
|
||||
let img_source: string = $state('');
|
||||
|
||||
function checkForImage(service: Service) {
|
||||
const rootSplit = service.icon.split('/');
|
||||
const root = rootSplit[rootSplit.length - 1];
|
||||
|
||||
if (icons.includes(`${root}.${service.iconType}`)) {
|
||||
img_source = `${service.icon}.${service.iconType}`;
|
||||
} else {
|
||||
img_source = '';
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (typeof monitor !== 'undefined') {
|
||||
status = monitor.status;
|
||||
}
|
||||
if (icons.length != 0) {
|
||||
const rootSplit = service.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}`;
|
||||
} else {
|
||||
checkForImage(service);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<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'}
|
||||
z-0 bg-black/55 p-4 backdrop-blur-sm"
|
||||
>
|
||||
<div class="flex flex-row justify-between pb-4">
|
||||
<div
|
||||
class="flex flex-row items-center gap-1"
|
||||
on:mouseover={() => (hover.title = true)}
|
||||
on:mouseleave={() => (hover.title = false)}
|
||||
>
|
||||
{#if service.icon}
|
||||
{#if img_source != ''}
|
||||
<img
|
||||
width="24px"
|
||||
class="h-6 w-6 cursor-pointer"
|
||||
src={img_source}
|
||||
alt="{service.name} Logo"
|
||||
/>
|
||||
{:else}
|
||||
<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
|
||||
>
|
||||
{#if hover.title}
|
||||
<div
|
||||
transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
|
||||
class="grid items-center"
|
||||
>
|
||||
<OpenInNewWindow
|
||||
color={hover.title ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
|
||||
class="self-center"
|
||||
/>
|
||||
</div>
|
||||
{/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'}
|
||||
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'}
|
||||
</h1>
|
||||
</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">
|
||||
<a
|
||||
class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
|
||||
href={service.href}
|
||||
on:mouseover={() => (hover.link = true)}
|
||||
on:mouseleave={() => (hover.link = false)}
|
||||
>
|
||||
Open
|
||||
{#if hover.link}
|
||||
<div
|
||||
transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
|
||||
class="grid items-center pl-1 pr-0"
|
||||
>
|
||||
<OpenInNewWindow
|
||||
color={hover.link ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
|
||||
class="self-center"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{#if service.extLink}
|
||||
<a
|
||||
class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
|
||||
href={service.extLink}
|
||||
on:mouseover={() => (hover.ext = true)}
|
||||
on:mouseleave={() => (hover.ext = false)}
|
||||
>
|
||||
Official Site
|
||||
{#if hover.ext}
|
||||
<div
|
||||
transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
|
||||
class="grid items-center pl-1 pr-0"
|
||||
>
|
||||
<OpenInNewWindow
|
||||
color={hover.ext ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
|
||||
class="self-center"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
0
src/routes/data/servers/+server.ts
Normal file
0
src/routes/data/servers/+server.ts
Normal file
0
src/routes/servers/+page.server.ts
Normal file
0
src/routes/servers/+page.server.ts
Normal file
|
|
@ -50,6 +50,7 @@ async function login(socket: Socket): Promise<string> {
|
|||
{ username: process.env.KUMA_USERNAME, password: process.env.KUMA_PASSWORD, token: '' },
|
||||
(res: { token: string }) => {
|
||||
token = res.token;
|
||||
socket.close();
|
||||
}
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue