adjust to new api

This commit is contained in:
Akis 2022-12-13 17:37:58 +02:00
parent 5a76748208
commit 5ab0e2ecdc
Signed by untrusted user: akis
GPG Key ID: 267BF5C6677944ED
2 changed files with 57 additions and 46 deletions

View File

@ -2,5 +2,8 @@ import type { PageServerLoad } from "./$types";
import { env } from "$env/dynamic/private"; import { env } from "$env/dynamic/private";
export const load: PageServerLoad = async () => { export const load: PageServerLoad = async () => {
return await fetch(env.VITE_API_URL + "/api/v1/status").then((res) => res.json()); return {
state: await fetch(env.VITE_API_URL + "/api/v1/state/status").then((res) => res.json()),
instances: await fetch(env.VITE_API_URL + "/api/v1/status").then((res) => res.json())
}
} }

View File

@ -13,52 +13,60 @@
</svelte:head> </svelte:head>
<h1>Our instances</h1> <h1>Our instances</h1>
<div class="flex flex-col gap-4">
<CardOuter>
<div class="wrapper">
{#each data.status as group}
<h2>{group.name}</h2>
<div class="items">
{#each group.data as item}
<CardInner
title={item.name}
description={item.description}
icon={item.icon}
>
<LinksOuter>
<InstanceLink url={item.link} item={item.status} type="main" />
{#if item.us} {#if data.state.enabled}
<InstanceLink url={item.us} item={item.statusUs} type="us" /> <div class="flex flex-col gap-4">
{/if} <CardOuter>
<div class="wrapper">
{#each data.instances.status as group}
<h2>{group.name}</h2>
<div class="items">
{#each group.data as item}
<CardInner
title={item.name}
description={item.description}
icon={item.icon}
>
<LinksOuter>
<InstanceLink url={item.link} item={item.status} type="main" />
{#if item.bp} {#if item.us}
<InstanceLink url={item.bp} item={item.statusBp} type="backup" /> <InstanceLink url={item.us} item={item.statusUs} type="us" />
{/if} {/if}
</LinksOuter>
</CardInner>
{/each}
</div>
{/each}
</div>
</CardOuter>
<span>Last updated: {dayjs {#if item.bp}
.unix(data.updated) <InstanceLink url={item.bp} item={item.statusBp} type="backup" />
.format("DD/MM/YYYY HH:mm:ss")} {/if}
</span> </LinksOuter>
</div> </CardInner>
{/each}
</div>
{/each}
</div>
</CardOuter>
<style> <span>Last updated: {dayjs
.wrapper { .unix(data.instances.updated)
display: flex; .format("DD/MM/YYYY HH:mm:ss")}
flex-direction: column; </span>
} </div>
.items { <style>
display: flex; .wrapper {
flex-direction: row; display: flex;
flex-wrap: wrap; flex-direction: column;
gap: 2rem; }
}
</style> .items {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 2rem;
}
</style>
{:else}
<div class="flex items-center gap-1 mt-16">
<div class="i-fa6-solid:circle-info" />
<span>Instances are currently disabled.</span>
</div>
{/if}