Rewrite page in Svelte 5 #49
2 changed files with 60 additions and 36 deletions
|
@ -1,12 +1,13 @@
|
||||||
<svelte:options runes={true} />
|
<svelte:options runes={true} />
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { OpenInNewWindow } from 'radix-icons-svelte';
|
import { Clipboard, Copy, OpenInNewWindow } from 'radix-icons-svelte';
|
||||||
import { quintInOut } from 'svelte/easing';
|
import { quintInOut } from 'svelte/easing';
|
||||||
import { slide } from 'svelte/transition';
|
import { slide } from 'svelte/transition';
|
||||||
import { IconType, type Server } from '$lib/types/data-types';
|
import { IconType, type Server } from '$lib/types/data-types';
|
||||||
import { Skeleton } from '$lib/components/ui/skeleton';
|
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';
|
||||||
|
import { Button } from '$lib/components/ui/button';
|
||||||
|
|
||||||
let { server, icons, monitor } = $props<{
|
let { server, icons, monitor } = $props<{
|
||||||
server: Server;
|
server: Server;
|
||||||
|
@ -24,6 +25,10 @@
|
||||||
|
|
||||||
let img_source: string = $state('');
|
let img_source: string = $state('');
|
||||||
|
|
||||||
|
function copyToClipboard(value: string) {
|
||||||
|
navigator.clipboard.writeText(value);
|
||||||
|
}
|
||||||
|
|
||||||
function checkForImage(server: Server) {
|
function checkForImage(server: Server) {
|
||||||
const rootSplit = server.icon.split('/');
|
const rootSplit = server.icon.split('/');
|
||||||
const root = rootSplit[rootSplit.length - 1];
|
const root = rootSplit[rootSplit.length - 1];
|
||||||
|
@ -60,7 +65,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="flex h-48 w-[28rem] flex-col gap-y-2 rounded-xl border-t-4
|
class="flex h-48 w-[28rem] flex-col gap-y-3 rounded-xl border-t-4
|
||||||
{status == 99
|
{status == 99
|
||||||
? 'border-primary'
|
? 'border-primary'
|
||||||
: status == 0
|
: status == 0
|
||||||
|
@ -74,7 +79,7 @@
|
||||||
: 'border-maintenance'}
|
: 'border-maintenance'}
|
||||||
z-0 bg-black/55 p-4 backdrop-blur-sm"
|
z-0 bg-black/55 p-4 backdrop-blur-sm"
|
||||||
>
|
>
|
||||||
<div class="flex flex-row justify-between pb-4">
|
<div class="flex flex-row justify-between">
|
||||||
<div
|
<div
|
||||||
class="flex flex-row items-center gap-1"
|
class="flex flex-row items-center gap-1"
|
||||||
on:mouseover={() => (hover.title = true)}
|
on:mouseover={() => (hover.title = true)}
|
||||||
|
@ -92,6 +97,7 @@
|
||||||
<Skeleton class="h-6 w-6 rounded-full" />
|
<Skeleton class="h-6 w-6 rounded-full" />
|
||||||
{/if}
|
{/if}
|
||||||
{:else}{/if}
|
{:else}{/if}
|
||||||
|
{#if typeof server.href !== 'undefined'}
|
||||||
<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}
|
{#if hover.title}
|
||||||
<div
|
<div
|
||||||
|
@ -104,6 +110,9 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<h2 class="font-bold">{server.name}</h2>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if typeof server.id !== 'undefined'}
|
{#if typeof server.id !== 'undefined'}
|
||||||
|
@ -142,8 +151,22 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<p class="text-wrap text-center text-sm">{server.desc}</p>
|
<p class="text-wrap text-center text-sm">{server.desc}</p>
|
||||||
<p class="text-center text-sm font-bold text-destructive">{server.warn}</p>
|
{#if typeof server.connection !== 'undefined'}
|
||||||
|
<div class="flex w-full flex-col items-center">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
class=" flex w-fit flex-row items-center gap-1 rounded-sm border px-2 py-1 text-center font-mono text-sm font-bold
|
||||||
|
hover:border-primary hover:bg-transparent hover:text-primary/60
|
||||||
|
active:border-secondary active:bg-black/70 active:text-secondary"
|
||||||
|
on:click={() => copyToClipboard(server.connection)}
|
||||||
|
>
|
||||||
|
{server.connection}
|
||||||
|
<Copy />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
<div class="grid {server.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
|
<div class="grid {server.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
|
||||||
|
{#if typeof server.href !== 'undefined'}
|
||||||
<a
|
<a
|
||||||
class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
|
class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
|
||||||
href={server.href}
|
href={server.href}
|
||||||
|
@ -163,6 +186,7 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</a>
|
</a>
|
||||||
|
{/if}
|
||||||
{#if server.extLink}
|
{#if server.extLink}
|
||||||
<a
|
<a
|
||||||
class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
|
class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
|
||||||
|
|
|
@ -57,7 +57,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="flex h-48 w-[28rem] flex-col gap-y-2 rounded-xl border-t-4
|
class="flex h-48 w-[28rem] flex-col gap-y-3 rounded-xl border-t-4
|
||||||
{status == 0
|
{status == 0
|
||||||
? 'border-offline'
|
? 'border-offline'
|
||||||
: status == 1
|
: status == 1
|
||||||
|
@ -69,7 +69,7 @@
|
||||||
: 'border-maintenance'}
|
: 'border-maintenance'}
|
||||||
z-0 bg-black/55 p-4 backdrop-blur-sm"
|
z-0 bg-black/55 p-4 backdrop-blur-sm"
|
||||||
>
|
>
|
||||||
<div class="flex flex-row justify-between pb-4">
|
<div class="flex flex-row justify-between">
|
||||||
<div
|
<div
|
||||||
class="flex flex-row items-center gap-1"
|
class="flex flex-row items-center gap-1"
|
||||||
on:mouseover={() => (hover.title = true)}
|
on:mouseover={() => (hover.title = true)}
|
||||||
|
|
Loading…
Reference in a new issue