mirror of
https://github.com/wireadmin/wireadmin
synced 2025-06-26 18:28:06 +00:00
chore: update the server page layout
This commit is contained in:
Shahrad Elahi
parent
ff674dda61
commit
5edb9b46c0
@ -1,19 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { Button } from '$lib/components/ui/button';
|
|
||||||
import BasePage from '$lib/components/page/BasePage.svelte';
|
import BasePage from '$lib/components/page/BasePage.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<BasePage showLogout={true}>
|
<BasePage showLogout={true}>
|
||||||
<div class="py-3 px-2">
|
<slot />
|
||||||
<a href="/" title="Home">
|
|
||||||
<Button variant="outline" class="leading-none px-3 space-x-2.5">
|
|
||||||
<i class="far fa-arrow-left"></i>
|
|
||||||
<span> Back to Home </span>
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-3.5">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</BasePage>
|
</BasePage>
|
||||||
|
|||||||
@ -83,124 +83,134 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Card>
|
<div class="flex items-center gap-2 py-4 px-2 leading-none">
|
||||||
<CardHeader>
|
<a
|
||||||
<CardTitle>Server</CardTitle>
|
href="/"
|
||||||
</CardHeader>
|
title="Home"
|
||||||
|
class="space-x-1 font-bold text-sm text-primary hover:text-primary/80 tracking-tight"
|
||||||
|
>
|
||||||
|
<i class="fa-solid fa-chevron-left"></i>
|
||||||
|
<span> Back to Home </span>
|
||||||
|
</a>
|
||||||
|
<i class="fa-regular fa-slash-forward"></i>
|
||||||
|
<span class="mb-0.5"> {data.server.name} </span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<CardContent>
|
|
||||||
<DetailRow label={'Name'}>
|
|
||||||
<CopiableText value={data.server.name}>
|
|
||||||
{data.server.name}
|
|
||||||
</CopiableText>
|
|
||||||
</DetailRow>
|
|
||||||
|
|
||||||
{#if data.server.tor}
|
<div class="space-y-3.5">
|
||||||
<DetailRow label={'Mode'}>
|
<Card>
|
||||||
<Badge variant="tor">Tor</Badge>
|
<CardHeader>
|
||||||
</DetailRow>
|
<CardTitle>Server</CardTitle>
|
||||||
{/if}
|
</CardHeader>
|
||||||
|
|
||||||
<DetailRow label={'IP address'}>
|
|
||||||
<pre> {data.server.address}/24 </pre>
|
|
||||||
</DetailRow>
|
|
||||||
|
|
||||||
<DetailRow label={'Listen Port'}>
|
|
||||||
<pre> {data.server.listen} </pre>
|
|
||||||
</DetailRow>
|
|
||||||
|
|
||||||
<DetailRow label={'Total Usage'}>
|
|
||||||
<div class="flex items-center gap-3 text-sm">
|
|
||||||
<div class="flex items-center gap-x-1.5">
|
|
||||||
<i class="fas fa-arrow-up text-gray-500"></i>
|
|
||||||
<span>{prettyBytes(data.usage.total.tx)}</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-x-1.5">
|
|
||||||
<i class="fas fa-arrow-down text-gray-500"></i>
|
|
||||||
<span>{prettyBytes(data.usage.total.rx)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</DetailRow>
|
|
||||||
|
|
||||||
<DetailRow label={'Status'}>
|
|
||||||
<Badge variant={data.server.status === 'up' ? 'success' : 'destructive'} />
|
|
||||||
</DetailRow>
|
|
||||||
|
|
||||||
<DetailRow label={'Public Key'}>
|
|
||||||
<CopiableText value={data.server.publicKey}>
|
|
||||||
<MiddleEllipsis content={data.server.publicKey} maxLength={12} />
|
|
||||||
</CopiableText>
|
|
||||||
</DetailRow>
|
|
||||||
</CardContent>
|
|
||||||
|
|
||||||
<CardFooter class="flex flex-wrap items-center gap-2">
|
|
||||||
{#if data.server.status === 'up'}
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
class="max-md:w-full"
|
|
||||||
size="sm"
|
|
||||||
on:click={() => {
|
|
||||||
handleChangeState('restart');
|
|
||||||
}}>Restart</Button
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
variant="destructive"
|
|
||||||
class="max-md:w-full"
|
|
||||||
size="sm"
|
|
||||||
on:click={() => {
|
|
||||||
handleChangeState('stop');
|
|
||||||
}}>Stop</Button
|
|
||||||
>
|
|
||||||
{:else}
|
|
||||||
<Button
|
|
||||||
variant="success"
|
|
||||||
class="max-md:w-full bg-green-500"
|
|
||||||
size="sm"
|
|
||||||
on:click={() => {
|
|
||||||
handleChangeState('start');
|
|
||||||
}}>Start</Button
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
variant="destructive"
|
|
||||||
class="max-md:w-full"
|
|
||||||
size="sm"
|
|
||||||
on:click={() => {
|
|
||||||
handleChangeState('remove');
|
|
||||||
}}>Remove</Button
|
|
||||||
>
|
|
||||||
{/if}
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader class="flex flex-row items-center justify-between">
|
|
||||||
<CardTitle>Clients</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
{#if data.server.peers.length > 0}
|
|
||||||
<CardContent class="space-y-3">
|
|
||||||
{#each data.server.peers as peer}
|
|
||||||
<Peer
|
|
||||||
{peer}
|
|
||||||
serverKey={data.server.publicKey}
|
|
||||||
serverPort={data.server.listen}
|
|
||||||
serverDNS={data.server.dns}
|
|
||||||
on:rename={({ detail }) => {
|
|
||||||
handleRename(peer.id.toString(), detail);
|
|
||||||
}}
|
|
||||||
on:remove={() => {
|
|
||||||
handleRemove(peer.id.toString());
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</CardContent>
|
|
||||||
{:else}
|
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Empty description={'No Clients!'} />
|
{#if data.server.tor}
|
||||||
|
<DetailRow label={'Mode'}>
|
||||||
|
<Badge variant="tor">Tor</Badge>
|
||||||
|
</DetailRow>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<DetailRow label={'IP address'}>
|
||||||
|
<pre> {data.server.address}/24 </pre>
|
||||||
|
</DetailRow>
|
||||||
|
|
||||||
|
<DetailRow label={'Listen Port'}>
|
||||||
|
<pre> {data.server.listen} </pre>
|
||||||
|
</DetailRow>
|
||||||
|
|
||||||
|
<DetailRow label={'Total Usage'}>
|
||||||
|
<div class="flex items-center gap-3 text-sm">
|
||||||
|
<div class="flex items-center gap-x-1.5">
|
||||||
|
<i class="fas fa-arrow-up text-gray-500"></i>
|
||||||
|
<span>{prettyBytes(data.usage.total.tx)}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-x-1.5">
|
||||||
|
<i class="fas fa-arrow-down text-gray-500"></i>
|
||||||
|
<span>{prettyBytes(data.usage.total.rx)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DetailRow>
|
||||||
|
|
||||||
|
<DetailRow label={'Status'}>
|
||||||
|
<Badge variant={data.server.status === 'up' ? 'success' : 'destructive'} />
|
||||||
|
</DetailRow>
|
||||||
|
|
||||||
|
<DetailRow label={'Public Key'}>
|
||||||
|
<CopiableText value={data.server.publicKey}>
|
||||||
|
<MiddleEllipsis content={data.server.publicKey} maxLength={12} />
|
||||||
|
</CopiableText>
|
||||||
|
</DetailRow>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
{/if}
|
|
||||||
<CardFooter>
|
<CardFooter class="flex flex-wrap items-center gap-2">
|
||||||
<CreatePeerDialog let:builder>
|
{#if data.server.status === 'up'}
|
||||||
<Button size="sm" builders={[builder]}>Add Client</Button>
|
<Button
|
||||||
</CreatePeerDialog>
|
variant="outline"
|
||||||
</CardFooter>
|
class="max-md:w-full"
|
||||||
</Card>
|
size="sm"
|
||||||
|
on:click={() => {
|
||||||
|
handleChangeState('restart');
|
||||||
|
}}>Restart</Button
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
class="max-md:w-full"
|
||||||
|
size="sm"
|
||||||
|
on:click={() => {
|
||||||
|
handleChangeState('stop');
|
||||||
|
}}>Stop</Button
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
|
<Button
|
||||||
|
variant="success"
|
||||||
|
class="max-md:w-full bg-green-500"
|
||||||
|
size="sm"
|
||||||
|
on:click={() => {
|
||||||
|
handleChangeState('start');
|
||||||
|
}}>Start</Button
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
class="max-md:w-full"
|
||||||
|
size="sm"
|
||||||
|
on:click={() => {
|
||||||
|
handleChangeState('remove');
|
||||||
|
}}>Remove</Button
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader class="flex flex-row items-center justify-between">
|
||||||
|
<CardTitle>Clients</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
{#if data.server.peers.length > 0}
|
||||||
|
<CardContent class="space-y-3">
|
||||||
|
{#each data.server.peers as peer}
|
||||||
|
<Peer
|
||||||
|
{peer}
|
||||||
|
serverKey={data.server.publicKey}
|
||||||
|
serverPort={data.server.listen}
|
||||||
|
serverDNS={data.server.dns}
|
||||||
|
on:rename={({ detail }) => {
|
||||||
|
handleRename(peer.id.toString(), detail);
|
||||||
|
}}
|
||||||
|
on:remove={() => {
|
||||||
|
handleRemove(peer.id.toString());
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</CardContent>
|
||||||
|
{:else}
|
||||||
|
<CardContent>
|
||||||
|
<Empty description={'No Clients!'} />
|
||||||
|
</CardContent>
|
||||||
|
{/if}
|
||||||
|
<CardFooter>
|
||||||
|
<CreatePeerDialog let:builder>
|
||||||
|
<Button size="sm" builders={[builder]}>Add Client</Button>
|
||||||
|
</CreatePeerDialog>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user