mirror of
https://github.com/PluralKit/PluralKit.git
synced 2026-02-12 00:30:11 +00:00
108 lines
No EOL
3.5 KiB
Svelte
108 lines
No EOL
3.5 KiB
Svelte
<script lang="ts">
|
|
import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody } from "sveltestrap";
|
|
import Body from '../lib/member/Body.svelte';
|
|
import { useParams } from 'svelte-navigator';
|
|
import { onMount } from 'svelte';
|
|
import api from "../api";
|
|
import { Member, Group } from "../api/types";
|
|
import CardsHeader from "../lib/CardsHeader.svelte";
|
|
import FaAddressCard from 'svelte-icons/fa/FaAddressCard.svelte'
|
|
|
|
let loading = true;
|
|
let groupLoading = false;
|
|
let params = useParams();
|
|
let err = "";
|
|
let groupErr = "";
|
|
let member: Member;
|
|
let groups: Group[];
|
|
let systemGroups: Group[];
|
|
const isPage = true;
|
|
export let isPublic = true;
|
|
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
|
|
|
onMount(() => {
|
|
fetchMember();
|
|
});
|
|
|
|
async function fetchMember() {
|
|
try {
|
|
member = await api().members($params.id).get({auth: !isPublic});
|
|
if (!isPublic && !member.privacy) throw new Error("This member does not belong to your system, did you mean to look up their public page?")
|
|
err = "";
|
|
loading = false;
|
|
groupLoading = true;
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
fetchGroups();
|
|
} catch (error) {
|
|
console.log(error);
|
|
err = error.message;
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
async function fetchGroups() {
|
|
try {
|
|
groups = await api().members($params.id).groups().get({auth: !isPublic});
|
|
if (!isPublic) {
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
systemGroups = await api().systems("@me").groups.get({ auth: true, query: { with_members: true } });
|
|
}
|
|
groupErr = "";
|
|
groupLoading = false;
|
|
} catch (error) {
|
|
console.log(error);
|
|
groupErr = error.message;
|
|
groupLoading = false;
|
|
}
|
|
}
|
|
|
|
async function updateGroups() {
|
|
groupLoading = true;
|
|
await new Promise(resolve => setTimeout(resolve, 500));
|
|
fetchGroups();
|
|
}
|
|
</script>
|
|
|
|
{#if settings && settings.appearance.color_background}
|
|
<div class="background" style="background-color: {member && `#${member.color}`}"></div>
|
|
{/if}
|
|
<Container>
|
|
<Row>
|
|
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
|
{#if err}
|
|
<Alert color="danger">{err}</Alert>
|
|
{:else if loading}
|
|
<Spinner/>
|
|
{:else if member && member.id}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardsHeader bind:item={member}>
|
|
<FaAddressCard slot="icon" />
|
|
</CardsHeader>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<Body on:updateGroups={updateGroups} bind:groups={systemGroups} bind:member={member} isPage={isPage} isPublic={isPublic}/>
|
|
</CardBody>
|
|
</Card>
|
|
{/if}
|
|
{#if groupLoading}
|
|
fetching groups...
|
|
{:else if groupErr}
|
|
<Alert color="danger">{groupErr}</Alert>
|
|
{:else if groups && groups.length > 0}
|
|
{#each groups as group}
|
|
{group.name} ({group.id})<br/>
|
|
{/each}
|
|
{/if}
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
|
|
<style>
|
|
.background {
|
|
position: absolute;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: -30;
|
|
}
|
|
</style> |