liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: use Card to be more UX consistent with the rest of the site

Browse Source
This commit is contained in:
spiral 2022-01-23 03:52:11 -05:00
parent 400918c349
commit faa645e3b3
No known key found for this signature in database
GPG Key ID: A6059F0CA0E1BD31
1 changed files with 57 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/pages/status.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Container } from 'sveltestrap'; import { Container, Row, Col, Card, CardHeader, CardTitle, CardBody, Input, Button } from 'sveltestrap';
import FaInfoCircle from 'svelte-icons/fa/FaInfoCircle.svelte'
import ShardItem from '../lib/shard.svelte'; import ShardItem from '../lib/shard.svelte';
let hover = null; let hover = null;
@ -82,41 +83,60 @@
</script> </script>
<Container> <Container fluid>
<h1>Bot status</h1> <Row>
<span>{@html currentCommitMsg}</span> <Col class="mx-auto" xs={12} lg={11} xl={10}>
<br> <Card class="mb-4">
<noscript>Please enable JavaScript to view this page!</noscript> <CardHeader>
<CardTitle style="margin-top: 8px; outline: none;">
<div class="icon d-inline-block">
<FaInfoCircle />
</div>
Bot status
</CardTitle>
</CardHeader>
<CardBody>
<span>{@html currentCommitMsg}</span>
<br>
<noscript>Please enable JavaScript to view this page!</noscript>
{ shards.length } shards ({ shards.filter(x => x.status == "up").length } up) <br> { shards.length } shards ({ shards.filter(x => x.status == "up").length } up) <br>
Average latency: { pingAverage }ms Average latency: { pingAverage }ms
<br><br> <br><br>
All times in UTC. More statistics available at <a href="https://stats.pluralkit.me">https://stats.pluralkit.me</a> All times in UTC. More statistics available at <a href="https://stats.pluralkit.me">https://stats.pluralkit.me</a>
<br><br> <br><br>
<details> <details>
<summary><b>Find my shard</b></summary> <summary><b>Find my shard</b></summary>
<br> <br>
Enter a server ID or a message link to find the shard currently assigned to your server: Enter a server ID or a message link to find the shard currently assigned to your server:
<br> <br>
<input bind:value={findShardInput} on:input={shardInfoHandler} /> <input bind:value={findShardInput} on:input={shardInfoHandler} />
<br><br> <br><br>
<span>{ shardInfoMsg }</span> <span>{ shardInfoMsg }</span>
{#if valid} {#if valid}
<h3>Your shard is: Shard { foundShard.id }</h3> <h3>Your shard is: Shard { foundShard.id }</h3>
<br> <br>
<span>Status: <b>{ foundShard.status }</b></span><br> <span>Status: <b>{ foundShard.status }</b></span><br>
<span>Latency: { foundShard.ping }ms</span><br> <span>Latency: { foundShard.ping }ms</span><br>
<span>Disconnection count: { foundShard.disconnection_count }</span><br> <span>Disconnection count: { foundShard.disconnection_count }</span><br>
<span>Last connection: { foundShard.last_connection }</span><br> <span>Last connection: { foundShard.last_connection }</span><br>
<span>Last heartbeat: { foundShard.last_heartbeat }</span><br> <span>Last heartbeat: { foundShard.last_heartbeat }</span><br>
{/if} {/if}
</details> </details>
<br><br> </CardBody>
<h2>Shard status</h2> </Card>
</Col>
<span>{ message }</span> </Row>
<Row>
{#each shards as shard} <Col class="mx-auto" xs={12} lg={11} xl={10}>
<ShardItem shard={shard} bind:hover={hover} /> <Card class="mb-4">
{/each} <CardBody>
<span>{ message }</span>
{#each shards as shard}
<ShardItem shard={shard} bind:hover={hover} />
{/each}
</CardBody>
</Card>
</Col>
</Row>
</Container> </Container>