mirror of
https://github.com/PluralKit/PluralKit.git
synced 2026-02-10 07:47:53 +00:00
refactor(dashboard): re-organize dashboard files
This commit is contained in:
Jake Fulmine
parent
e0cde35b3d
commit
1b3f188997
41 changed files with 165 additions and 166 deletions
109
dashboard/src/components/system/Body.svelte
Normal file
109
dashboard/src/components/system/Body.svelte
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<script lang="ts">
|
||||
import { Row, Col, Modal, Image, Button } from 'sveltestrap';
|
||||
import moment from 'moment';
|
||||
import { toHTML } from 'discord-markdown';
|
||||
import parseTimestamps from '../../api/parse-timestamps';
|
||||
import resizeMedia from '../../api/resize-media';
|
||||
import twemoji from 'twemoji';
|
||||
|
||||
import { System } from '../../api/types';
|
||||
|
||||
export let user: System;
|
||||
export let editMode: boolean;
|
||||
export let isPublic: boolean;
|
||||
|
||||
let htmlDescription: string;
|
||||
let htmlName: string;
|
||||
let htmlPronouns: string;
|
||||
|
||||
if (user.description) {
|
||||
htmlDescription = toHTML(parseTimestamps(user.description), {embed: true});
|
||||
} else {
|
||||
htmlDescription = "(no description)";
|
||||
}
|
||||
|
||||
if (user.name) {
|
||||
htmlName = toHTML(user.name);
|
||||
}
|
||||
|
||||
if (user.pronouns) {
|
||||
htmlPronouns = toHTML(user.pronouns);
|
||||
}
|
||||
|
||||
let created = moment(user.created).format("MMM D, YYYY");
|
||||
|
||||
let bannerOpen = false;
|
||||
const toggleBannerModal = () => (bannerOpen = !bannerOpen);
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
let descriptionElement: any;
|
||||
let nameElement: any;
|
||||
let tagElement: any;
|
||||
let pronounElement: any;
|
||||
|
||||
$: if (settings && settings.appearance.twemoji) {
|
||||
if (descriptionElement) twemoji.parse(descriptionElement);
|
||||
if (nameElement) twemoji.parse(nameElement);
|
||||
if (tagElement) twemoji.parse(tagElement);
|
||||
if (pronounElement) twemoji.parse(pronounElement);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Row>
|
||||
{#if user.id}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>ID:</b> {user.id}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if user.name}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<span bind:this={nameElement}><b>Name:</b> {@html htmlName}</span>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if user.tag}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<span bind:this={tagElement}><b>Tag:</b> {user.tag}</span>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if user.pronouns}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<span bind:this={pronounElement}><b>Pronouns:</b> {@html htmlPronouns}</span>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if user.created && !isPublic}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Created:</b> {created}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if user.timezone && !isPublic}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Timezone:</b> {user.timezone}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if user.color}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Color:</b> {user.color}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if user.banner}
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal} aria-label="view system banner">View</Button>
|
||||
<Modal isOpen={bannerOpen} toggle={toggleBannerModal}>
|
||||
<div slot="external" on:click={toggleBannerModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
|
||||
<Image style="display: block; margin: auto;" src={user.banner} thumbnail alt="system banner" />
|
||||
</div>
|
||||
</Modal>
|
||||
</Col>
|
||||
{/if}
|
||||
</Row>
|
||||
<div class="my-2 description" bind:this={descriptionElement}>
|
||||
<b>Description:</b><br />
|
||||
{@html htmlDescription}
|
||||
</div>
|
||||
{#if (user.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
|
||||
<img on:click={toggleBannerModal} src={resizeMedia(user.banner, [1200, 480])} alt="system banner" class="w-100 mb-3 rounded" style="max-height: 13em; object-fit: cover; cursor: pointer;"/>
|
||||
{/if}
|
||||
{#if !isPublic}
|
||||
<Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit system information">Edit</Button>
|
||||
{/if}
|
||||
107
dashboard/src/components/system/Edit.svelte
Normal file
107
dashboard/src/components/system/Edit.svelte
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<script lang="ts">
|
||||
import { Row, Col, Input, Button, Label, Alert, Spinner } from 'sveltestrap';
|
||||
import { autoresize } from 'svelte-textarea-autoresize';
|
||||
// import moment from 'moment-timezone';
|
||||
import { currentUser } from '../../stores';
|
||||
|
||||
const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
|
||||
|
||||
import { System } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
export let editMode: boolean;
|
||||
export let user: System;
|
||||
let loading: boolean;
|
||||
let success = false;
|
||||
|
||||
let err: string[] = [];
|
||||
|
||||
let input: System = {...user};
|
||||
|
||||
async function submit() {
|
||||
let data = input;
|
||||
err = [];
|
||||
|
||||
if (data.color && !/^#?[A-Fa-f0-9]{6}$/.test(input.color)) {
|
||||
err.push(`"${data.color}" is not a valid color, the color must be a 6-digit hex code. (example: #ff0000)`);
|
||||
} else if (data.color) {
|
||||
if (data.color.startsWith("#")) {
|
||||
data.color = input.color.slice(1, input.color.length);
|
||||
}
|
||||
}
|
||||
|
||||
/* if (data.timezone && !moment.tz.zone(data.timezone)) {
|
||||
err.push(`"${data.timezone}" is not a valid timezone, check out <a target="_blank" style="color: var(--bs-body-color);" href="https://xske.github.io/tz/">this site</a> to see your current timezone!`);
|
||||
} */
|
||||
|
||||
// trim all string fields
|
||||
Object.keys(data).forEach(k => data[k] = typeof data[k] == "string" ? data[k].trim() : data[k]);
|
||||
|
||||
err = err;
|
||||
if (err.length > 0) return;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res = await api().systems("@me").patch({data});
|
||||
user = res;
|
||||
currentUser.update(() => res);
|
||||
err = [];
|
||||
success = true;
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err.push(error.message);
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each err as error}
|
||||
<Alert color="danger">{@html error}</Alert>
|
||||
{/each}
|
||||
{#if success}
|
||||
<Alert fade={false} color="success">System information updated!</Alert>
|
||||
{/if}
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Name:</Label>
|
||||
<Input bind:value={input.name} maxlength={100} type="text" placeholder={user.name} aria-label="system name" />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Tag:</Label>
|
||||
<Input bind:value={input.tag} maxlength={100} type="text" placeholder={user.tag} aria-label="system tag" />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Pronouns:</Label>
|
||||
<Input bind:value={input.pronouns} maxlength={100} style="resize: none; height: 1em" type="textarea" placeholder={user.pronouns} aria-label="system pronouns" />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Color:</Label>
|
||||
<Input bind:value={input.color} type="text" placeholder={user.color} aria-label="system color"/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Avatar url:</Label>
|
||||
<Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={user.avatar_url} aria-label="system avatar url" />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Banner url:</Label>
|
||||
<Input bind:value={input.banner} maxlength={256} type="url" placeholder={user.banner} aria-label="system banner url" />
|
||||
</Col>
|
||||
</Row>
|
||||
<div class="my-2">
|
||||
<b>Description:</b><br />
|
||||
{#if descriptions.length > 0 && descriptions[0].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[0]} aria-label="use template 1">Template 1</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 1 && descriptions[1].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[1]} aria-label="use template 2">Template 2</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 2 && descriptions[2].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
|
||||
{/if}
|
||||
<br>
|
||||
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={user.description} aria-label="system description"/>
|
||||
</div>
|
||||
{#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits" >Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button>
|
||||
{:else}<Button style="flex: 0" color="primary" disabled aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button>{/if}
|
||||
53
dashboard/src/components/system/Main.svelte
Normal file
53
dashboard/src/components/system/Main.svelte
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<script lang="ts">
|
||||
import { Card, CardBody, CardHeader, Tooltip } from 'sveltestrap';
|
||||
import FaAddressCard from 'svelte-icons/fa/FaAddressCard.svelte'
|
||||
import CardsHeader from '../common/CardsHeader.svelte';
|
||||
import Body from './Body.svelte';
|
||||
import Privacy from './Privacy.svelte';
|
||||
import Edit from './Edit.svelte';
|
||||
|
||||
import { System } from '../../api/types';
|
||||
|
||||
export let user: System;
|
||||
export let isPublic = true;
|
||||
|
||||
let editMode = false;
|
||||
let copied = false;
|
||||
|
||||
async function copyShortLink(event?) {
|
||||
if (event) {
|
||||
let ctrlDown = event.ctrlKey||event.metaKey; // mac support
|
||||
if (!(ctrlDown && event.key === "c") && event.key !== "Enter") return;
|
||||
}
|
||||
try {
|
||||
await navigator.clipboard.writeText(`https://pk.mt/s/${user.id}`);
|
||||
copied = true;
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
copied = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardsHeader bind:item={user}>
|
||||
<div slot="icon" style="cursor: pointer;" id={`copy-${user.id}`} on:click|stopPropagation={() => copyShortLink()} on:keydown|stopPropagation={(e) => copyShortLink(e)} tabindex={0} >
|
||||
<FaAddressCard />
|
||||
</div>
|
||||
</CardsHeader>
|
||||
<Tooltip placement="top" target={`copy-${user.id}`}>{copied ? "Copied!" : "Copy public link"}</Tooltip>
|
||||
</CardHeader>
|
||||
<CardBody style="border-left: 4px solid #{user.color}">
|
||||
{#if !editMode}
|
||||
<Body bind:user bind:editMode bind:isPublic/>
|
||||
{:else}
|
||||
<Edit bind:user bind:editMode />
|
||||
{/if}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{#if !isPublic}
|
||||
<Privacy bind:user />
|
||||
{/if}
|
||||
50
dashboard/src/components/system/Privacy.svelte
Normal file
50
dashboard/src/components/system/Privacy.svelte
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<script lang="ts">
|
||||
import { Card, CardHeader, CardBody, CardTitle, Row, Col, Button, Spinner } from 'sveltestrap';
|
||||
import {Link} from 'svelte-navigator';
|
||||
import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
|
||||
import PrivacyEdit from './PrivacyEdit.svelte';
|
||||
|
||||
import { System, SystemPrivacy } from '../../api/types';
|
||||
|
||||
export let user: System;
|
||||
let editMode = false;
|
||||
|
||||
let loading: boolean;
|
||||
|
||||
const privacyNames: { [P in keyof SystemPrivacy]-?: string; } = {
|
||||
description_privacy: "Description",
|
||||
member_list_privacy: "Member list",
|
||||
front_privacy: "Front",
|
||||
front_history_privacy: "Front history",
|
||||
group_list_privacy: "Group list",
|
||||
pronoun_privacy: "Pronouns"
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaUserLock />
|
||||
</div> System privacy
|
||||
{#if loading}<div class="d-inline-block mr-5" style="float: right;"><Spinner color="primary" /></div>{/if}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody style="border-left: 4px solid #{user.color}">
|
||||
{#if editMode}
|
||||
<PrivacyEdit bind:user={user} bind:editMode/>
|
||||
{:else}
|
||||
<Row>
|
||||
{#each Object.keys(user.privacy) as x}
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<b>{privacyNames[x]}:</b> {user.privacy[x]}
|
||||
</Col>
|
||||
{/each}
|
||||
</Row>
|
||||
<Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit system privacy">Edit</Button>
|
||||
<Link to="/dash/bulk-member-privacy"><Button style="flex: 0" color="secondary" tabindex={-1}>Bulk member privacy</Button></Link>
|
||||
<Link to="/dash/bulk-group-privacy"><Button style="flex: 0" color="secondary" tabindex={-1}>Bulk group privacy</Button></Link>
|
||||
{/if}
|
||||
</CardBody>
|
||||
</Card>
|
||||
76
dashboard/src/components/system/PrivacyEdit.svelte
Normal file
76
dashboard/src/components/system/PrivacyEdit.svelte
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<script lang="ts">
|
||||
import { Input, Row, Col, Button, Label, Alert, Spinner } from 'sveltestrap';
|
||||
import { currentUser } from '../../stores';
|
||||
|
||||
import { System, SystemPrivacy } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
export let user: System;
|
||||
export let editMode: boolean;
|
||||
|
||||
let err: string;
|
||||
let success = false;
|
||||
let loading = false;
|
||||
|
||||
function changeAll(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
Object.keys(privacy).forEach(x => privacy[x] = target.value);
|
||||
}
|
||||
|
||||
let privacy = user.privacy;
|
||||
|
||||
const privacyNames: { [P in keyof SystemPrivacy]-?: string; } = {
|
||||
description_privacy: "Description",
|
||||
member_list_privacy: "Member list",
|
||||
front_privacy: "Front",
|
||||
front_history_privacy: "Front history",
|
||||
group_list_privacy: "Group list",
|
||||
pronoun_privacy: "Pronouns"
|
||||
};
|
||||
|
||||
async function submit() {
|
||||
loading = true;
|
||||
const data: System = {privacy: privacy};
|
||||
try {
|
||||
let res = await api().systems(user.id).patch({data});
|
||||
user = res;
|
||||
currentUser.update(() => res);
|
||||
success = true;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
}
|
||||
loading = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{#if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{/if}
|
||||
{#if success}
|
||||
<Alert color="success">System privacy updated!</Alert>
|
||||
{/if}
|
||||
<Label><b>Set all to:</b></Label>
|
||||
<select class="form-control" on:change={(e) => changeAll(e)} aria-label="set all to">
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</select>
|
||||
<hr/>
|
||||
<Row>
|
||||
{#each Object.keys(privacy) as x}
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>{privacyNames[x]}:</Label>
|
||||
<Input type="select" bind:value={privacy[x]} aria-label={`group ${privacyNames[x]} privacy`}>
|
||||
<option default={privacy[x] === "public"}>public</option>
|
||||
<option default={privacy[x] === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
{/each}
|
||||
</Row>
|
||||
|
||||
{#if loading}
|
||||
<Button style="flex: 0" color="primary" aria-label="submit privacy edit"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" aria-label="cancel privacy edit"><Spinner size="sm"/></Button>
|
||||
{:else}
|
||||
<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit privacy edit">Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel privacy edit">Back</Button>
|
||||
{/if}
|
||||
Loading…
Add table
Add a link
Reference in a new issue