Merge branch 'main' of github/Draconizations/pk-webs-svelte into feat/dashboard
This commit is contained in:
spiral
commit
8fa371bcc8
|
|
@ -0,0 +1,2 @@
|
|||
dist/
|
||||
node_modules/
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
# PluralKit Dashboard
|
||||
|
||||
This project is built using [Vite](https://vitejs.dev/), using the svelte-ts template.
|
||||
|
||||
Some of the other stuff used to get this working:
|
||||
* sveltestrap (https://sveltestrap.js.org/)
|
||||
* svelte-navigator (https://github.com/mefechoel/svelte-navigator)
|
||||
* svelte-toggle (https://github.com/metonym/svelte-toggle)
|
||||
* svelecte (https://mskocik.github.io/svelecte/)
|
||||
* svelte-icons (https://github.com/Introvertuous/svelte-icons)
|
||||
* discord-markdown (https://github.com/brussell98/discord-markdown)
|
||||
* moment (https://momentjs.com/)
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="./myriad.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>pk-webs | home</title>
|
||||
<link rel="stylesheet" href="/styles/generic.scss" />
|
||||
<link rel="stylesheet" href="/styles/dark.scss" />
|
||||
<link rel="stylesheet" href="/styles/light.scss" />
|
||||
<script defer data-domain="pk-webs-beta.spectralitree.com" src="https://plausible.pluralkit.me/js/plausible.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="./src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"name": "pk-webs-2",
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
|
||||
"@tsconfig/svelte": "^2.0.1",
|
||||
"svelte": "^3.44.0",
|
||||
"svelte-check": "^2.2.7",
|
||||
"svelte-preprocess": "^4.10.1",
|
||||
"svelte-toggle": "^3.1.0",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "^4.4.4",
|
||||
"vite": "^2.7.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@sentry/browser": "^6.19.5",
|
||||
"@sentry/tracing": "^6.19.5",
|
||||
"@types/twemoji": "^12.1.2",
|
||||
"axios": "^0.24.0",
|
||||
"discord-markdown": "^2.5.1",
|
||||
"gh-pages": "^3.2.3",
|
||||
"moment": "^2.29.1",
|
||||
"sass": "^1.47.0",
|
||||
"svelecte": "^3.4.5",
|
||||
"svelte-autosize": "^1.0.1",
|
||||
"svelte-icons": "^2.1.0",
|
||||
"svelte-navigator": "^3.1.5",
|
||||
"sveltestrap": "^5.6.3",
|
||||
"twemoji": "^13.1.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
|
|
@ -0,0 +1,91 @@
|
|||
<script lang="ts">
|
||||
import { Router, Route } from "svelte-navigator";
|
||||
import Navigation from "./lib/Navigation.svelte";
|
||||
import Dash from "./pages/Dash.svelte";
|
||||
import Home from "./pages/Home.svelte";
|
||||
import Settings from './pages/Settings.svelte';
|
||||
import Footer from './lib/Footer.svelte';
|
||||
import Public from "./pages/Public.svelte";
|
||||
import Main from "./pages/profiles/Main.svelte";
|
||||
import Status from './pages/status.svelte';
|
||||
import Member from './pages/Member.svelte';
|
||||
import Group from './pages/Group.svelte';
|
||||
import PageNotFound from './pages/PageNotFound.svelte';
|
||||
import { Alert } from 'sveltestrap';
|
||||
import DiscordLogin from "./pages/DiscordLogin.svelte";
|
||||
import { onMount } from 'svelte';
|
||||
import BulkGroupPrivacy from "./pages/BulkGroupPrivacy.svelte";
|
||||
import BulkMemberPrivacy from "./pages/BulkMemberPrivacy.svelte";
|
||||
|
||||
// theme cdns (I might make some myself too)
|
||||
let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
|
||||
let dark = "https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css";
|
||||
|
||||
let styleSrc = dark;
|
||||
|
||||
// if there's a style already set, retrieve it
|
||||
let style = localStorage.getItem("pk-style") && localStorage.getItem("pk-style");
|
||||
|
||||
// this automatically applies the style every time it is updated
|
||||
$: setStyle(style);
|
||||
|
||||
// not sure if there's a better way to handle this
|
||||
function setStyle(style) {
|
||||
switch (style) {
|
||||
case "light": document.getElementById("app").className = "light";
|
||||
styleSrc = light;
|
||||
localStorage.setItem("pk-style", "light");
|
||||
break;
|
||||
case "dark": document.getElementById("app").className = "dark";
|
||||
styleSrc = dark;
|
||||
localStorage.setItem("pk-style", "dark");
|
||||
break;
|
||||
default: document.getElementById("app").className = "dark";
|
||||
styleSrc = dark;
|
||||
localStorage.setItem("pk-style", "dark");
|
||||
};
|
||||
};
|
||||
|
||||
let falseBool = false;
|
||||
|
||||
onMount(() => {
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
|
||||
if (settings && settings.accessibility && settings.accessibility.opendyslexic === true) {
|
||||
document.getElementById("app").classList.add("dyslexic");
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="stylesheet" href={styleSrc}>
|
||||
</svelte:head>
|
||||
|
||||
<Router>
|
||||
<Navigation bind:style={style}/>
|
||||
<Route path="/"><Home /></Route>
|
||||
<Route path="/login/discord"><DiscordLogin /></Route>
|
||||
<Route path="dash"><Dash /></Route>
|
||||
<Route path="dash/m/:id"><Member isPublic={falseBool}/></Route>
|
||||
<Route path = "dash/g/:id"><Group isPublic={falseBool}/></Route>
|
||||
<Route path="dash/bulk-member-privacy"><BulkMemberPrivacy/></Route>
|
||||
<Route path="dash/bulk-group-privacy"><BulkGroupPrivacy/></Route>
|
||||
<Route path="settings"><Settings /></Route>
|
||||
<Route path="profile"><Public /></Route>
|
||||
<Route path = "profile/s/:id"><Main /></Route>
|
||||
<Route path = "s">
|
||||
<Alert color="danger">Please provide a system ID in the URL.</Alert>
|
||||
</Route>
|
||||
<Route path = "profile/m/:id"><Member/></Route>
|
||||
<Route path = "profile/m">
|
||||
<Alert color="danger">Please provide a member ID in the URL.</Alert>
|
||||
</Route>
|
||||
<Route path = "profile/g/:id"><Group/></Route>
|
||||
<Route path = "profile/g">
|
||||
<Alert color="danger">Please provide a group ID in the URL.</Alert>
|
||||
</Route>
|
||||
<Route path="status"><Status /></Route>
|
||||
<Route component={PageNotFound}/>
|
||||
<Footer />
|
||||
</Router>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
enum ErrorType {
|
||||
Unknown = 0,
|
||||
InvalidToken = 401,
|
||||
NotFound = 404,
|
||||
InternalServerError = 500,
|
||||
}
|
||||
|
||||
interface ApiError {
|
||||
code: number,
|
||||
type: ErrorType,
|
||||
message?: string,
|
||||
data?: any,
|
||||
}
|
||||
|
||||
export function parse(code: number, data?: any): ApiError {
|
||||
var type = ErrorType[ErrorType[code]] ?? ErrorType.Unknown;
|
||||
if (code >= 500) type = ErrorType.InternalServerError;
|
||||
|
||||
var err: ApiError = { code, type };
|
||||
|
||||
if (data) {
|
||||
var d = data;
|
||||
err.message = d.message;
|
||||
err.data = d;
|
||||
}
|
||||
|
||||
return err;
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import axios from 'axios';
|
||||
import * as Sentry from '@sentry/browser';
|
||||
|
||||
const baseUrl = () => localStorage.isBeta ? "https://api.beta.pluralkit.me" : "https://api.pluralkit.me";
|
||||
|
||||
const methods = ['get', 'post', 'delete', 'patch', 'put'];
|
||||
const noop = () => {};
|
||||
|
||||
const scheduled = [];
|
||||
const runAPI = () => {
|
||||
if (scheduled.length == 0) return;
|
||||
const {axiosData, res, rej} = scheduled.shift();
|
||||
axios(axiosData)
|
||||
.then((resp) => res(parseData(resp.status, resp.data)))
|
||||
.catch((err) => {
|
||||
Sentry.captureException("Fetch error", err);
|
||||
rej(err);
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(runAPI, 500);
|
||||
|
||||
export default function() {
|
||||
const route = [];
|
||||
const handler = {
|
||||
get(_, name) {
|
||||
if (route.length == 0 && name != "private")
|
||||
route.push("v2");
|
||||
if (methods.includes(name)) {
|
||||
return ({ data = undefined, auth = true, token = null, query = null } = {}) => new Promise((res, rej) => scheduled.push({ res, rej, axiosData: {
|
||||
url: baseUrl() + "/" + route.join("/") + (query ? `?${Object.keys(query).map(x => `${x}=${query[x]}`).join("&")}` : ""),
|
||||
method: name,
|
||||
headers: {
|
||||
authorization: token ?? (auth ? localStorage.getItem("pk-token") : undefined),
|
||||
"content-type": name == "get" ? undefined : "application/json"
|
||||
},
|
||||
data: !!data ? JSON.stringify(data) : undefined,
|
||||
validateStatus: () => true,
|
||||
}}));
|
||||
}
|
||||
route.push(name);
|
||||
return new Proxy(noop, handler);
|
||||
},
|
||||
apply(target, _, args) {
|
||||
route.push(...args.filter(x => x != null));
|
||||
return new Proxy(noop, handler);
|
||||
}
|
||||
}
|
||||
return new Proxy(noop, handler);
|
||||
}
|
||||
|
||||
import * as errors from './errors';
|
||||
|
||||
function parseData(code: number, data: any) {
|
||||
if (code == 200) return data;
|
||||
if (code == 204) return;
|
||||
throw errors.parse(code, data);
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
interface SystemPrivacy {
|
||||
description_privacy?: string,
|
||||
member_list_privacy?: string,
|
||||
front_privacy?: string,
|
||||
front_history_privacy?: string,
|
||||
group_list_privacy?: string
|
||||
}
|
||||
|
||||
export interface System {
|
||||
id?: string;
|
||||
uuid?: string;
|
||||
name?: string;
|
||||
description?: string;
|
||||
tag?: string;
|
||||
avatar_url?: string;
|
||||
banner?: string;
|
||||
timezone?: string;
|
||||
created?: string;
|
||||
privacy?: SystemPrivacy;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export interface Config {
|
||||
timezone: string;
|
||||
pings_enabled: boolean;
|
||||
member_default_private?: boolean;
|
||||
group_default_private?: boolean;
|
||||
show_private_info?: boolean;
|
||||
member_limit: number;
|
||||
group_limit: number;
|
||||
description_templates: string[];
|
||||
}
|
||||
|
||||
export interface MemberPrivacy {
|
||||
visibility?: string,
|
||||
description_privacy?: string,
|
||||
name_privacy?: string,
|
||||
birthday_privacy?: string,
|
||||
pronoun_privacy?: string,
|
||||
avatar_privacy?: string,
|
||||
metadata_privacy?: string
|
||||
}
|
||||
|
||||
interface proxytag {
|
||||
prefix?: string,
|
||||
suffix?: string
|
||||
}
|
||||
|
||||
export interface Member {
|
||||
id?: string;
|
||||
uuid?: string;
|
||||
name?: string;
|
||||
display_name?: string;
|
||||
color?: string;
|
||||
birthday?: string;
|
||||
pronouns?: string;
|
||||
avatar_url?: string;
|
||||
banner?: string;
|
||||
description?: string;
|
||||
created?: string;
|
||||
keep_proxy?: boolean
|
||||
system?: string;
|
||||
proxy_tags?: Array<proxytag>;
|
||||
privacy?: MemberPrivacy
|
||||
}
|
||||
|
||||
export interface GroupPrivacy {
|
||||
description_privacy?: string,
|
||||
icon_privacy?: string,
|
||||
list_privacy?: string,
|
||||
visibility?: string,
|
||||
name_privacy?: string,
|
||||
metadata_privacy?: string
|
||||
}
|
||||
|
||||
export interface Group {
|
||||
id?: string;
|
||||
uuid?: string;
|
||||
name?: string;
|
||||
display_name?: string;
|
||||
description?: string;
|
||||
icon?: string;
|
||||
banner?: string;
|
||||
color?: string;
|
||||
privacy?: GroupPrivacy;
|
||||
created?: string;
|
||||
members?: string[];
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -0,0 +1,50 @@
|
|||
<script lang="ts">
|
||||
import { Modal, CardHeader, CardTitle, Image, Spinner } from 'sveltestrap';
|
||||
import default_avatar from '../assets/default_avatar.png';
|
||||
import { toHTML } from 'discord-markdown';
|
||||
import twemoji from 'twemoji';
|
||||
|
||||
export let item: any;
|
||||
|
||||
let htmlName: string;
|
||||
let nameElement: any;
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
|
||||
$: if (item.name) htmlName = toHTML(item.name);
|
||||
else htmlName = "";
|
||||
|
||||
$: if (settings && settings.appearance.twemoji) {
|
||||
if (nameElement) twemoji.parse(nameElement);
|
||||
}
|
||||
|
||||
$: icon_url = item.avatar_url ? item.avatar_url : item.icon ? item.icon : default_avatar;
|
||||
|
||||
let avatarOpen = false;
|
||||
const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
|
||||
|
||||
export let loading: boolean = false;
|
||||
</script>
|
||||
|
||||
<CardTitle style="margin-top: 0px; margin-bottom: 0px; outline: none; align-items: center;" class="d-flex justify-content-between align-middle w-100">
|
||||
<div>
|
||||
<div class="icon d-inline-block">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<span bind:this={nameElement} style="vertical-align: middle;">{@html htmlName} ({item.id})</span>
|
||||
</div>
|
||||
<div>
|
||||
{#if loading}
|
||||
<div class="d-inline-block mr-5" style="vertical-align: middle;"><Spinner color="primary" /></div>
|
||||
{/if}
|
||||
{#if item && (item.avatar_url || item.icon)}
|
||||
<img tabindex={0} on:keyup={(event) => {if (event.key === "Enter") avatarOpen = true}} on:click={toggleAvatarModal} class="rounded-circle avatar" src={icon_url} alt="Icon" />
|
||||
{:else}
|
||||
<img class="rounded-circle avatar" src={default_avatar} alt="avatar (default)" />
|
||||
{/if}
|
||||
</div>
|
||||
<Modal isOpen={avatarOpen} toggle={toggleAvatarModal}>
|
||||
<div slot="external" on:click={toggleAvatarModal} style="height: 100%; max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; display: flex;">
|
||||
<Image style="display: block; margin: auto;" src={icon_url} thumbnail alt="Your system avatar" />
|
||||
</div>
|
||||
</Modal>
|
||||
</CardTitle>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script lang="ts">
|
||||
import {Navbar, Nav, NavItem, NavLink} from 'sveltestrap';
|
||||
</script>
|
||||
|
||||
<Navbar color="light" light class="footer">
|
||||
<Nav>
|
||||
<NavItem>
|
||||
<NavLink href="https://pluralkit.me/">pluralkit.me</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</Navbar>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<script lang="ts">
|
||||
import { Pagination, PaginationItem, PaginationLink } from "sveltestrap";
|
||||
|
||||
export let currentPage: number;
|
||||
export let pageAmount: number;
|
||||
export let smallPages: boolean = false;
|
||||
|
||||
</script>
|
||||
{#if pageAmount > 1}
|
||||
<Pagination size={smallPages ? "sm" : ""} class="mx-auto" arialabel="member list page navigation">
|
||||
{#if currentPage !== 1}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" previous on:click={(e) => {e.preventDefault(); currentPage -= 1}}></PaginationLink>
|
||||
</PaginationItem>
|
||||
{:else}
|
||||
<PaginationItem disabled>
|
||||
<PaginationLink previous></PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage > 2}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage = 1}}>1</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage === 4}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage = 2}}>2</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage > 4}
|
||||
<PaginationItem disabled>
|
||||
<PaginationLink>...</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage > 1}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage -= 1}}>{currentPage - 1}</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">{currentPage}</PaginationLink>
|
||||
</PaginationItem>
|
||||
{#if currentPage < pageAmount}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage += 1}}>{currentPage + 1}</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage < pageAmount - 3}
|
||||
<PaginationItem disabled>
|
||||
<PaginationLink>...</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage === pageAmount - 3}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" on:click={(e) => {e.preventDefault(); currentPage = pageAmount - 1}}>{pageAmount - 1}</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage < pageAmount - 1}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" on:click={(e) => { e.preventDefault(); currentPage = pageAmount}}>{pageAmount}</PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
{#if currentPage !== pageAmount}
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#" next on:click={(e) => {e.preventDefault(); currentPage += 1}}></PaginationLink>
|
||||
</PaginationItem>
|
||||
{:else}
|
||||
<PaginationItem disabled>
|
||||
<PaginationLink next></PaginationLink>
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
</Pagination>
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<script lang="ts">
|
||||
import {Navbar, NavbarBrand, Nav, NavItem, NavLink, Collapse, NavbarToggler, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Button} from 'sveltestrap';
|
||||
import { loggedIn } from '../stores';
|
||||
import { Link, navigate } from 'svelte-navigator';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
export let style: string;
|
||||
|
||||
let isOpen = false;
|
||||
const toggle = () => (isOpen = !isOpen);
|
||||
|
||||
let loggedIn_value: boolean;
|
||||
|
||||
loggedIn.subscribe(value => {
|
||||
loggedIn_value = value;
|
||||
});
|
||||
|
||||
function logout() {
|
||||
localStorage.removeItem("pk-token");
|
||||
localStorage.removeItem("pk-user");
|
||||
loggedIn.update(() => false);
|
||||
navigate("/");
|
||||
}
|
||||
|
||||
</script>
|
||||
<Navbar color="light" light expand="lg" class="mb-4">
|
||||
<NavbarBrand>pk-webs</NavbarBrand>
|
||||
<NavbarToggler on:click={toggle}></NavbarToggler>
|
||||
<Collapse {isOpen} navbar expand="lg">
|
||||
<Nav class="ms-auto" navbar>
|
||||
<Dropdown nav inNavbar>
|
||||
<DropdownToggle color="transparent" tag="span" class="nav-link">Styles</DropdownToggle>
|
||||
<DropdownMenu end>
|
||||
<DropdownItem on:click={() => style = "light"}>Light</DropdownItem>
|
||||
<DropdownItem on:click={() => style = "dark"}>Dark</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
{#if loggedIn_value || localStorage.getItem("pk-token")}
|
||||
<Dropdown nav inNavbar>
|
||||
<DropdownToggle color="transparent" tag="span" class="nav-link">Dash</DropdownToggle>
|
||||
<DropdownMenu end>
|
||||
<Link style="text-decoration: none;" to="/dash?tab=system"><DropdownItem>System</DropdownItem></Link>
|
||||
<Link style="text-decoration: none;" to="/dash?tab=members"><DropdownItem>Members</DropdownItem></Link>
|
||||
<Link style="text-decoration: none;" to="/dash?tab=groups"><DropdownItem>Groups</DropdownItem></Link>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem on:click={logout}>Log out</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
{/if}
|
||||
<NavItem>
|
||||
<NavLink href="/settings">Settings</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink href="/profile">Public</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</Collapse>
|
||||
</Navbar>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<script lang="ts">
|
||||
import { Row, Col, Modal, Image, Button, CardBody, ModalHeader, ModalBody, ModalFooter, Spinner } from 'sveltestrap';
|
||||
import moment from 'moment';
|
||||
import { toHTML } from 'discord-markdown';
|
||||
import Edit from './Edit.svelte';
|
||||
import twemoji from 'twemoji';
|
||||
import Privacy from './Privacy.svelte';
|
||||
import MemberEdit from './MemberEdit.svelte';
|
||||
import { Link } from 'svelte-navigator';
|
||||
|
||||
import { Member, Group } from '../../api/types';
|
||||
|
||||
export let group: Group;
|
||||
let editMode: boolean = false;
|
||||
let memberMode: boolean = false;
|
||||
export let isPublic: boolean;
|
||||
export let members: Member[] = [];
|
||||
export let isMainDash = true;
|
||||
export let isPage = false;
|
||||
|
||||
let htmlDescription: string;
|
||||
$: if (group.description) {
|
||||
htmlDescription = toHTML(group.description, {embed: true});
|
||||
} else {
|
||||
htmlDescription = "(no description)";
|
||||
}
|
||||
let htmlDisplayName: string;
|
||||
$: if (group.display_name) htmlDisplayName = toHTML(group.display_name)
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
let descriptionElement: any;
|
||||
let displayNameElement: any;
|
||||
|
||||
$: if (settings && settings.appearance.twemoji) {
|
||||
if (descriptionElement) twemoji.parse(descriptionElement);
|
||||
if (displayNameElement) twemoji.parse(displayNameElement);
|
||||
};
|
||||
|
||||
let created = moment(group.created).format("MMM D, YYYY");
|
||||
|
||||
let bannerOpen = false;
|
||||
const toggleBannerModal = () => (bannerOpen = !bannerOpen);
|
||||
|
||||
let privacyOpen = false;
|
||||
const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
|
||||
|
||||
</script>
|
||||
|
||||
<CardBody style="border-left: 4px solid #{settings && settings.appearance.color_background ? isPage ? "" : group.color : group.color }; margin: -1rem -1.25rem">
|
||||
{#if !editMode && !memberMode}
|
||||
<Row>
|
||||
{#if group.id}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>ID:</b> {group.id}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if group.name}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Name:</b> {group.name}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if group.display_name}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Display Name:</b> <span bind:this={displayNameElement}>{@html htmlDisplayName}</span>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if group.created && !isPublic}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Created:</b> {created}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if group.color}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Color:</b> {group.color}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if group.banner}
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<b>Banner:</b> <Button size="sm" color="light" on:click={toggleBannerModal}>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={group.banner} thumbnail alt="Your system banner" />
|
||||
</div>
|
||||
</Modal>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if group.privacy}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button>
|
||||
<Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
|
||||
<ModalHeader toggle={togglePrivacyModal}>
|
||||
Edit privacy
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<Privacy on:update bind:group bind:privacyOpen={privacyOpen}/>
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
</Col>
|
||||
{/if}
|
||||
</Row>
|
||||
<div class="my-2 description" bind:this={descriptionElement}>
|
||||
<b>Description:</b><br />
|
||||
{@html htmlDescription && htmlDescription}
|
||||
</div>
|
||||
{#if (group.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
|
||||
<img src={group.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
|
||||
{/if}
|
||||
{#if !isPublic}
|
||||
<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
|
||||
{#if isMainDash}<Button style="flex: 0" color="secondary" on:click={() => memberMode = true}>Members</Button>{/if}
|
||||
{/if}
|
||||
{#if !isPage}
|
||||
<Link to={isPublic ? `/profile/g/${group.id}` : `/dash/g/${group.id}`}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary">View page</Button></Link>
|
||||
{:else if !isPublic}
|
||||
<Link to="/dash?tab=groups"><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary">View system</Button></Link>
|
||||
{/if}
|
||||
{:else if editMode}
|
||||
<Edit on:deletion on:update bind:group bind:editMode />
|
||||
{:else if memberMode}
|
||||
<MemberEdit on:updateMembers bind:group bind:memberMode bind:members />
|
||||
{/if}
|
||||
</CardBody>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<script lang="ts">
|
||||
import { Row, Col, Input, Button, Label, Alert, Spinner, Modal, ModalHeader, ModalBody } from 'sveltestrap';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { Group } from '../../api/types';
|
||||
import api from '../../api';
|
||||
import autosize from 'svelte-autosize';
|
||||
|
||||
const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
|
||||
|
||||
let loading: boolean = false;
|
||||
export let group: Group;
|
||||
export let editMode: boolean;
|
||||
|
||||
let err: string[] = [];
|
||||
|
||||
let input: Group = {...group};
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function update() {
|
||||
dispatch('update', group);
|
||||
}
|
||||
|
||||
function deletion() {
|
||||
dispatch('deletion', group.id);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
err = err;
|
||||
if (err.length > 0) return;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res = await api().groups(group.id).patch({data});
|
||||
group = {...group, ...res};
|
||||
err = [];
|
||||
update();
|
||||
editMode = false;
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err.push(error.message);
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
let deleteOpen: boolean = false;
|
||||
const toggleDeleteModal = () => deleteOpen = !deleteOpen;
|
||||
|
||||
let deleteInput: string;
|
||||
let deleteErr: string;
|
||||
|
||||
async function submitDelete() {
|
||||
deleteErr = null;
|
||||
|
||||
if (!deleteInput) {
|
||||
deleteErr = "Please type out the group ID.";
|
||||
return;
|
||||
}
|
||||
|
||||
if (deleteInput.trim().toLowerCase() !== group.id) {
|
||||
deleteErr = "This group's ID does not match the provided ID.";
|
||||
return;
|
||||
}
|
||||
loading = true;
|
||||
try {
|
||||
await api().groups(group.id).delete();
|
||||
deleteErr = null;
|
||||
toggleDeleteModal();
|
||||
loading = false;
|
||||
deletion();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
deleteErr = error.message;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each err as error}
|
||||
<Alert color="danger">{@html error}</Alert>
|
||||
{/each}
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Name:</Label>
|
||||
<Input bind:value={input.name} maxlength={100} type="text" placeholder={group.name} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Display name:</Label>
|
||||
<textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={group.display_name} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Color:</Label>
|
||||
<Input bind:value={input.color} type="text" placeholder={group.color}/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Icon url:</Label>
|
||||
<Input bind:value={input.icon} maxlength={256} type="url" placeholder={group.icon}/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Banner url:</Label>
|
||||
<Input bind:value={input.banner} maxlength={256} type="url" placeholder={group.banner}/>
|
||||
</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]}>Template 1</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 1 && descriptions[1].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 2 && descriptions[2].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
|
||||
{/if}
|
||||
<br>
|
||||
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={group.description}/>
|
||||
</div>
|
||||
{#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal}>Delete</Button>
|
||||
{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button><Button style="flex: 0; float: right;" color="danger" disabled>Delete</Button>{/if}
|
||||
<Modal size="lg" isOpen={deleteOpen} toggle={toggleDeleteModal}>
|
||||
<ModalHeader toggle={toggleDeleteModal}>
|
||||
Delete member
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{#if deleteErr}<Alert color="danger">{deleteErr}</Alert>{/if}
|
||||
<Label>If you're sure you want to delete this group, type out the group ID (<code>{group.id}</code>) below.</Label>
|
||||
<Input class="mb-3" bind:value={deleteInput} maxlength={7} placeholder={group.id}></Input>
|
||||
{#if !loading}<Button style="flex 0" color="danger" on:click={submitDelete}>Delete</Button> <Button style="flex: 0" color="secondary" on:click={toggleDeleteModal}>Back</Button>
|
||||
{:else}<Button style="flex 0" color="danger" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
|
||||
{/if}
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
|
|
@ -0,0 +1,367 @@
|
|||
<script lang="ts">
|
||||
import { Link } from 'svelte-navigator';
|
||||
import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Label, Row, Col, Spinner, Button, Tooltip } from 'sveltestrap';
|
||||
import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
|
||||
import { onMount } from 'svelte';
|
||||
import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
|
||||
import { useParams } from 'svelte-navigator';
|
||||
import CardsHeader from '../CardsHeader.svelte';
|
||||
import ListPagination from '../ListPagination.svelte';
|
||||
import Body from './Body.svelte';
|
||||
import Svelecte, { addFormatter } from 'svelecte';
|
||||
import FaLock from 'svelte-icons/fa/FaLock.svelte';
|
||||
import NewGroup from './NewGroup.svelte';
|
||||
|
||||
import { Member, Group } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
export let isPublic: boolean;
|
||||
|
||||
export let list: Group[];
|
||||
export let members: Member[];
|
||||
|
||||
$: memberlist = members && members.map(function(member) { return {name: member.name, shortid: member.id, id: member.uuid, display_name: member.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
let token = localStorage.getItem("pk-token");
|
||||
let listLoading = true;
|
||||
let err: string;
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
|
||||
let itemsPerPageValue = settings && settings.accessibility && settings.accessibility.expandedcards ? "10" : "25";
|
||||
$: itemsPerPage = parseInt(itemsPerPageValue);
|
||||
|
||||
let searchBy = "name";
|
||||
let sortBy = "name";
|
||||
let sortOrder = "ascending";
|
||||
let privacyFilter = "all";
|
||||
let memberSearchMode = "include";
|
||||
let selectedMembers = [];
|
||||
|
||||
let currentPage = 1;
|
||||
|
||||
let params = useParams();
|
||||
$: id = $params.id;
|
||||
|
||||
onMount(() => {
|
||||
if (token || isPublic) fetchGroups();
|
||||
});
|
||||
|
||||
|
||||
async function fetchGroups() {
|
||||
err = "";
|
||||
listLoading = true;
|
||||
try {
|
||||
const res: Group[] = await api().systems(isPublic ? id : "@me").groups.get({ auth: !isPublic, query: { with_members: !isPublic } });
|
||||
list = res;
|
||||
listLoading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
listLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
let searchValue: string;
|
||||
|
||||
$: {searchValue; privacyFilter; currentPage = 1};
|
||||
|
||||
$: searchedList = list.filter((item) => {
|
||||
if (!searchValue && searchBy !== "description" && searchBy !== "display name") return true;
|
||||
|
||||
switch (searchBy) {
|
||||
case "name": if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||
break;
|
||||
case "display name": if (!searchValue) {
|
||||
if (!item.display_name) return true;
|
||||
else return false;
|
||||
}
|
||||
if (item.display_name && item.display_name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||
break;
|
||||
case "description": if (!searchValue) {
|
||||
if (!item.description) return true;
|
||||
else return false;
|
||||
}
|
||||
else if (item.description && item.description.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||
break;
|
||||
case "ID": if (item.id.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||
break;
|
||||
default: if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||
break;
|
||||
}
|
||||
|
||||
return false;
|
||||
})
|
||||
|
||||
$: filteredList = searchedList.filter((item) => {
|
||||
if (privacyFilter === "all") return true;
|
||||
if (privacyFilter === "public" && item.privacy.visibility === "public") return true;
|
||||
if (privacyFilter === "private" && item.privacy.visibility === "private") return true;
|
||||
return false;
|
||||
});
|
||||
|
||||
let sortedList = [];
|
||||
|
||||
$: if (filteredList) {
|
||||
switch (sortBy) {
|
||||
case "name": sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
|
||||
break;
|
||||
case "display name": sortedList = filteredList.sort((a, b) => {
|
||||
if (a.display_name && b.display_name) return a.display_name.localeCompare(b.display_name);
|
||||
else if (a.display_name && !b.display_name) return a.display_name.localeCompare(b.name);
|
||||
else if (!a.display_name && b.display_name) return a.name.localeCompare(b.display_name);
|
||||
else return a.name.localeCompare(b.name);
|
||||
});
|
||||
break;
|
||||
case "creation date": sortedList = filteredList.sort((a, b) => {
|
||||
if (a.created && b.created) return a.created.localeCompare(b.created);
|
||||
});
|
||||
break;
|
||||
case "ID": sortedList = filteredList.sort((a, b) => a.id.localeCompare(b.id));
|
||||
break;
|
||||
default: sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
let memberFilteredList = [];
|
||||
$: memberFilteredList = sortedList.filter((item: Group) => {
|
||||
if (memberSearchMode === "none") {
|
||||
if (item.members && item.members.length > 0) return false;
|
||||
}
|
||||
|
||||
if (selectedMembers.length < 1) return true;
|
||||
|
||||
switch (memberSearchMode) {
|
||||
case "include": if (item.members && selectedMembers.some(value => item.members.includes(value))) return true;
|
||||
break;
|
||||
case "exclude": if (item.members && selectedMembers.every(value => !item.members.includes(value))) return true;
|
||||
break;
|
||||
case "match": if (item.members && selectedMembers.every(value => item.members.includes(value))) return true;
|
||||
break;
|
||||
default: return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
let finalList = [];
|
||||
$:{sortOrder; if (sortOrder === "descending") finalList = memberFilteredList.reverse(); else finalList = memberFilteredList;}
|
||||
|
||||
$: finalList = finalList;
|
||||
|
||||
$: indexOfLastItem = currentPage * itemsPerPage;
|
||||
$: indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
$: pageAmount = Math.ceil(finalList.length / itemsPerPage);
|
||||
|
||||
let slicedList = [];
|
||||
$: slicedList = finalList.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
function memberListRenderer(item: any) {
|
||||
return `${item.name} (<code>${item.shortid}</code>)`;
|
||||
}
|
||||
|
||||
addFormatter({
|
||||
'member-list': memberListRenderer
|
||||
});
|
||||
|
||||
function updateList(event: any) {
|
||||
list = list.map(group => group.id !== event.detail.id ? group : event.detail)
|
||||
}
|
||||
|
||||
function updateDelete(event: any) {
|
||||
list = list.filter(group => group.id !== event.detail);
|
||||
}
|
||||
|
||||
function addGroupToList(event: any) {
|
||||
// reference types my beloathed
|
||||
// the stringify/parse sequence is here so that a previous added group doesn't get overwritten
|
||||
let group = JSON.parse(JSON.stringify(event.detail));
|
||||
group.members = [];
|
||||
list.push(group);
|
||||
list = list;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Card class="mb-3">
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaSearch />
|
||||
</div> Search groups
|
||||
</CardTitle>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Row>
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<InputGroup>
|
||||
<InputGroupText>Page length</InputGroupText>
|
||||
<Input bind:value={itemsPerPageValue} type="select">
|
||||
<option>10</option>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
</Input>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<InputGroup>
|
||||
<InputGroupText>Search by</InputGroupText>
|
||||
<Input bind:value={searchBy} type="select">
|
||||
<option>name</option>
|
||||
<option>display name</option>
|
||||
<option>description</option>
|
||||
<option>ID</option>
|
||||
</Input>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<InputGroup>
|
||||
<InputGroupText>Sort by</InputGroupText>
|
||||
<Input bind:value={sortBy} type="select">
|
||||
<option>name</option>
|
||||
<option>display name</option>
|
||||
{#if !isPublic}<option>creation date</option>{/if}
|
||||
<option>ID</option>
|
||||
</Input>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<InputGroup>
|
||||
<InputGroupText>Sort order</InputGroupText>
|
||||
<Input bind:value={sortOrder} type="select">
|
||||
<option>ascending</option>
|
||||
<option>descending</option>
|
||||
</Input>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
{#if !isPublic}
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<InputGroup>
|
||||
<InputGroupText>Only show</InputGroupText>
|
||||
<Input bind:value={privacyFilter} type="select">
|
||||
<option>all</option>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
{/if}
|
||||
</Row>
|
||||
{#if !isPublic}
|
||||
<hr/>
|
||||
<Label>Filter groups by member</Label>
|
||||
<Svelecte renderer="member-list" bind:value={selectedMembers} disableHighlight options={memberlist} multiple style="margin-bottom: 0.5rem">
|
||||
</Svelecte>
|
||||
<span style="cursor: pointer" id="g-include" on:click={() => memberSearchMode = "include"}>{@html memberSearchMode === "include" ? "<b>include</b>" : "include"}</span>
|
||||
| <span style="cursor: pointer" id="g-exclude" on:click={() => memberSearchMode = "exclude"}>{@html memberSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span>
|
||||
| <span style="cursor: pointer" id="g-match" on:click={() => memberSearchMode = "match"}>{@html memberSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
|
||||
| <span style="cursor: pointer" id="g-none" on:click={() => memberSearchMode = "none"}>{@html memberSearchMode === "none" ? "<b>none</b>" : "none"}</span>
|
||||
<Tooltip placement="bottom" target="g-include">Includes every group with any of the members.</Tooltip>
|
||||
<Tooltip placement="bottom" target="g-exclude">Excludes every group with any of the members, opposite of include.</Tooltip>
|
||||
<Tooltip placement="bottom" target="g-match">Only includes groups which have all the members selected.</Tooltip>
|
||||
<Tooltip placement="bottom" target="g-none">Only includes groups that have no members.</Tooltip>
|
||||
{/if}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
|
||||
{#if listLoading && !err}
|
||||
<div class="mx-auto text-center">
|
||||
<Spinner class="d-inline-block" />
|
||||
</div>
|
||||
{:else if err}
|
||||
<Row>
|
||||
<Col xs={12} lg={10}>
|
||||
<Alert color="danger">{err}</Alert>
|
||||
</Col>
|
||||
<Col xs={12} lg={2}>
|
||||
<Button class="w-100 mb-3" color="primary" on:click={fetchGroups}>Refresh</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
{:else}
|
||||
|
||||
<Row>
|
||||
<Col xs={12} lg={10} class="mb-2 mb-lg-0">
|
||||
<Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/>
|
||||
</Col>
|
||||
<Col xs={12} lg={2}>
|
||||
<Button class="w-100 mb-3" color="primary" on:click={fetchGroups}>Refresh</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<ListPagination bind:currentPage bind:pageAmount />
|
||||
{#if !isPublic}
|
||||
<NewGroup on:create={addGroupToList} />
|
||||
{/if}
|
||||
{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
|
||||
<Accordion class="my-3" stayOpen>
|
||||
{#each slicedList as group, index (group.id)}
|
||||
{#if (!isPublic && group.privacy.visibility === "public") || isPublic}
|
||||
<AccordionItem>
|
||||
<CardsHeader bind:item={group} slot="header">
|
||||
<FaUsers slot="icon" />
|
||||
</CardsHeader>
|
||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateMembers={updateList} bind:members bind:group bind:isPublic={isPublic}/>
|
||||
</AccordionItem>
|
||||
{:else}
|
||||
<AccordionItem>
|
||||
<CardsHeader bind:item={group} slot="header">
|
||||
<FaLock slot="icon" />
|
||||
</CardsHeader>
|
||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateMembers={updateList} bind:members bind:group bind:isPublic={isPublic}/>
|
||||
</AccordionItem>
|
||||
{/if}
|
||||
{/each}
|
||||
</Accordion>
|
||||
{:else if settings.accessibility.expandedcards}
|
||||
{#each slicedList as group, index (group.id)}
|
||||
{#if (!isPublic && group.privacy.visibility === "public") || isPublic}
|
||||
<Card class="mb-3">
|
||||
<CardHeader>
|
||||
<CardsHeader item={group}>
|
||||
<FaUsers slot="icon" />
|
||||
</CardsHeader>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateMembers={updateList} isPublic={isPublic} bind:members bind:group />
|
||||
</CardBody>
|
||||
</Card>
|
||||
{:else}
|
||||
<Card class="mb-3">
|
||||
<CardHeader>
|
||||
<CardsHeader item={group}>
|
||||
<FaLock slot="icon" />
|
||||
</CardsHeader>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateMembers={updateList} isPublic={isPublic} bind:group bind:members />
|
||||
</CardBody>
|
||||
</Card>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="my-3">
|
||||
{#each slicedList as group, index (group.id)}
|
||||
{#if (!isPublic && group.privacy.visibility === "public") || isPublic}
|
||||
<Card>
|
||||
<Link class="accordion-button collapsed" style="text-decoration: none;" to={!isPublic ? `/dash/g/${group.id}` : `/profile/g/${group.id}`}>
|
||||
<CardsHeader bind:item={group}>
|
||||
<FaUsers slot="icon" />
|
||||
</CardsHeader>
|
||||
</Link>
|
||||
</Card>
|
||||
{:else}
|
||||
<Card>
|
||||
<Link class="accordion-button collapsed" style="text-decoration: none;" to={!isPublic ? `/dash/g/${group.id}` : `/profile/g/${group.id}`}>
|
||||
<CardsHeader bind:item={group}>
|
||||
<FaLock slot="icon" />
|
||||
</CardsHeader>
|
||||
</Link>
|
||||
</Card>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<ListPagination bind:currentPage bind:pageAmount />
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<script lang="ts">
|
||||
import { Row, Col, Button, Alert, ListGroup, ListGroupItem, Spinner } from 'sveltestrap';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import ListPagination from "../ListPagination.svelte";
|
||||
import twemoji from "twemoji";
|
||||
import FaUserPlus from 'svelte-icons/fa/FaUserPlus.svelte'
|
||||
import FaUserFriends from 'svelte-icons/fa/FaUserFriends.svelte'
|
||||
import FaUserMinus from 'svelte-icons/fa/FaUserMinus.svelte'
|
||||
import Svelecte, { addFormatter } from 'svelecte';
|
||||
|
||||
import { Group, Member } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
let loading: boolean = false;
|
||||
let err: string;
|
||||
export let group: Group;
|
||||
export let memberMode: boolean = true;
|
||||
export let members: Member[];
|
||||
|
||||
let membersInGroup: Member[];
|
||||
let membersNotInGroup: Member[];
|
||||
let membersInGroupSelection: any[];
|
||||
let membersNotInGroupSelection: any[];
|
||||
|
||||
let membersToBeAdded: any[];
|
||||
let membersToBeRemoved: any[];
|
||||
|
||||
let currentPage: number = 1;
|
||||
|
||||
let smallPages = true;
|
||||
|
||||
$: if (group.members) {
|
||||
membersInGroup = members.filter(member => group.members.includes(member.uuid));
|
||||
membersInGroup = membersInGroup.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
membersNotInGroup = members.filter(member => !group.members.includes(member.uuid));
|
||||
membersNotInGroup = membersNotInGroup.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
membersInGroupSelection = membersInGroup.map(function(member) { return {name: member.name, shortid: member.id, id: member.uuid, display_name: member.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
|
||||
membersNotInGroupSelection = membersNotInGroup.map(function(member) { return {name: member.name, shortid: member.id, id: member.uuid, display_name: member.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
|
||||
}
|
||||
|
||||
$: indexOfLastItem = currentPage * 10;
|
||||
$: indexOfFirstItem = indexOfLastItem - 10;
|
||||
$: pageAmount = Math.ceil(membersInGroup && membersInGroup.length / 10);
|
||||
|
||||
$: finalMemberList = membersInGroup && membersInGroup.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem('pk-settings'));
|
||||
let listGroupElements: any[] = [];
|
||||
$: if (settings && settings.appearance.twemoji) {
|
||||
if (listGroupElements && listGroupElements.length > 0) {
|
||||
listGroupElements.forEach(element => element && twemoji.parse(element));
|
||||
};
|
||||
}
|
||||
|
||||
function memberListRenderer(item: any) {
|
||||
return `${item.name} (<code>${item.shortid}</code>)`;
|
||||
}
|
||||
|
||||
addFormatter({
|
||||
'member-list': memberListRenderer
|
||||
});
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function update() {
|
||||
dispatch("updateMembers", group)
|
||||
}
|
||||
|
||||
async function submitAdd() {
|
||||
let data = membersToBeAdded;
|
||||
try {
|
||||
loading = true;
|
||||
await api().groups(group.id).members.add.post({data});
|
||||
data.forEach(member => group.members.push(member));
|
||||
update();
|
||||
err = null;
|
||||
membersToBeAdded = [];
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitRemove() {
|
||||
let data = membersToBeRemoved;
|
||||
try {
|
||||
loading = true;
|
||||
await api().groups(group.id).members.remove.post({data});
|
||||
group.members = group.members.filter(m => !data.includes(m));
|
||||
update();
|
||||
err = null;
|
||||
membersToBeRemoved = [];
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
{#if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{/if}
|
||||
<Row>
|
||||
<Col xs={12} lg={6} class="text-center mb-3">
|
||||
<h5><div class="icon d-inline-block">
|
||||
<FaUserFriends />
|
||||
</div>Current Members</h5>
|
||||
<ListPagination bind:currentPage bind:pageAmount bind:smallPages/>
|
||||
{#if finalMemberList && finalMemberList.length > 0}
|
||||
<ListGroup>
|
||||
{#each finalMemberList as member, index (member.id)}
|
||||
<ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]} class="d-flex justify-content-between flex-grow-1"><span><b>{member.name}</b> (<code>{member.id}</code>)</span> <span>{member.display_name ? `${member.display_name}` : ""}</span></span></ListGroupItem>
|
||||
{/each}
|
||||
</ListGroup>
|
||||
{:else}
|
||||
<p>There are no members in this group yet.</p>
|
||||
<p>You can add some in this menu!</p>
|
||||
{/if}
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="text-center mb-3">
|
||||
<h5><div class="icon d-inline-block">
|
||||
<FaUserPlus />
|
||||
</div>Add Members</h5>
|
||||
<Svelecte renderer="member-list" disableHighlight bind:value={membersToBeAdded} options={membersNotInGroupSelection} multiple/>
|
||||
{#if !loading && membersToBeAdded && membersToBeAdded.length > 0}
|
||||
<Button class="w-100 mt-2" color="primary" on:click={submitAdd}>Add</Button>{:else}
|
||||
<Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Add{/if}</Button>
|
||||
{/if}
|
||||
<hr/>
|
||||
<h5><div class="icon d-inline-block">
|
||||
<FaUserMinus />
|
||||
</div>Remove Members</h5>
|
||||
<Svelecte renderer="member-list" disableHighlight bind:value={membersToBeRemoved} options={membersInGroupSelection} multiple/>
|
||||
{#if !loading && membersToBeRemoved && membersToBeRemoved.length > 0}
|
||||
<Button class="w-100 mt-2" color="primary" on:click={submitRemove}>Remove</Button>{:else}
|
||||
<Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Remove{/if}</Button>
|
||||
{/if}
|
||||
</Col>
|
||||
</Row>
|
||||
<Button style="flex: 0" color="secondary" on:click={() => memberMode = false}>Back</Button>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<script lang="ts">
|
||||
import { Row, Col, Input, Button, Label, Alert, Spinner, Accordion, AccordionItem, CardTitle } from 'sveltestrap';
|
||||
import { Group } from '../../api/types';
|
||||
import api from '../../api';
|
||||
import autosize from 'svelte-autosize';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import FaPlus from 'svelte-icons/fa/FaPlus.svelte';
|
||||
|
||||
const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
|
||||
|
||||
let loading: boolean = false;
|
||||
let err: string[] = [];
|
||||
let message: string;
|
||||
let privacyMode = false;
|
||||
|
||||
let defaultGroup: Group = {
|
||||
privacy: {
|
||||
description_privacy: "public",
|
||||
metadata_privacy: "public",
|
||||
list_privacy: "public",
|
||||
icon_privacy: "public",
|
||||
name_privacy: "public",
|
||||
visibility: "public"
|
||||
}
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function create() {
|
||||
dispatch('create', input);
|
||||
}
|
||||
|
||||
let input: Group = defaultGroup;
|
||||
|
||||
async function submit() {
|
||||
let data = input;
|
||||
message = "";
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
err = err;
|
||||
if (err.length > 0) return;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res = await api().groups().post({data});
|
||||
input = res;
|
||||
err = [];
|
||||
create();
|
||||
message = `Group ${data.name} successfully created!`
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err.push(error.message);
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Accordion class="mb-3">
|
||||
<AccordionItem>
|
||||
<CardTitle slot="header" style="margin-top: 0px; margin-bottom: 0px; outline: none; align-items: center;" class="d-flex align-middle w-100 p-2">
|
||||
<div class="icon d-inline-block">
|
||||
<FaPlus/>
|
||||
</div>
|
||||
<span style="vertical-align: middle;">Add new Group</span>
|
||||
</CardTitle>
|
||||
{#if message}
|
||||
<Alert color="success">{@html message}</Alert>
|
||||
{/if}
|
||||
{#each err as error}
|
||||
<Alert color="danger">{@html error}</Alert>
|
||||
{/each}
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Name:</Label>
|
||||
<Input bind:value={input.name} maxlength={100} type="text" />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Display name:</Label>
|
||||
<textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text"/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Color:</Label>
|
||||
<Input bind:value={input.color} type="text"/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Icon url:</Label>
|
||||
<Input bind:value={input.icon} maxlength={256} type="url"/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Banner url:</Label>
|
||||
<Input bind:value={input.banner} maxlength={256} type="url"/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Privacy:</Label>
|
||||
<Button class="w-100" color="secondary" on:click={() => privacyMode = !privacyMode}>Toggle privacy</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
{#if privacyMode}
|
||||
<hr />
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Description:</Label>
|
||||
<Input type="select" bind:value={input.privacy.description_privacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Name:</Label>
|
||||
<Input type="select" bind:value={input.privacy.name_privacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Member list:</Label>
|
||||
<Input type="select" bind:value={input.privacy.list_privacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Icon:</Label>
|
||||
<Input type="select" bind:value={input.privacy.icon_privacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Visibility:</Label>
|
||||
<Input type="select" bind:value={input.privacy.visibility}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Metadata:</Label>
|
||||
<Input type="select" bind:value={input.privacy.metadata_privacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr />
|
||||
{/if}
|
||||
<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]}>Template 1</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 1 && descriptions[1].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 2 && descriptions[2].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
|
||||
{/if}
|
||||
<br>
|
||||
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize />
|
||||
</div>
|
||||
{#if !loading && input.name}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button>
|
||||
{:else if !input.name }<Button style="flex: 0" color="primary" disabled>Submit</Button>
|
||||
{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button>{/if}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { ModalBody, ModalHeader, Col, Row, Input, Label, ModalFooter, Button, Spinner, Alert } from "sveltestrap";
|
||||
|
||||
import { Group } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
export let privacyOpen: boolean;
|
||||
export let group: Group;
|
||||
const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
|
||||
|
||||
let err: string;
|
||||
let loading = false;
|
||||
|
||||
let allPrivacy: string;
|
||||
|
||||
$: { changePrivacy(allPrivacy)}
|
||||
|
||||
function changePrivacy(value: string) {
|
||||
if (value) {
|
||||
input.privacy.description_privacy = value;
|
||||
input.privacy.list_privacy = value;
|
||||
input.privacy.visibility = value;
|
||||
input.privacy.icon_privacy = value;
|
||||
input.privacy.name_privacy = value;
|
||||
input.privacy.metadata_privacy = value;
|
||||
}
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function update() {
|
||||
dispatch('update', group);
|
||||
}
|
||||
|
||||
let input: Group = {privacy: group.privacy};
|
||||
|
||||
async function submit() {
|
||||
let data = input;
|
||||
err = null;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res = await api().groups(group.id).patch({data});
|
||||
group = {...group, ...res};
|
||||
update();
|
||||
loading = false;
|
||||
togglePrivacyModal();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{#if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{/if}
|
||||
<Label><b>Set all to:</b></Label>
|
||||
<Input type="select" bind:value={allPrivacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
<hr />
|
||||
<Row>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Description:</Label>
|
||||
<Input type="select" bind:value={input.privacy.description_privacy}>
|
||||
<option default={group.privacy.description_privacy === "public"}>public</option>
|
||||
<option default={group.privacy.description_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Name:</Label>
|
||||
<Input type="select" bind:value={input.privacy.name_privacy}>
|
||||
<option default={group.privacy.name_privacy === "public"}>public</option>
|
||||
<option default={group.privacy.name_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Member list:</Label>
|
||||
<Input type="select" bind:value={input.privacy.list_privacy}>
|
||||
<option default={group.privacy.list_privacy === "public"}>public</option>
|
||||
<option default={group.privacy.list_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Icon:</Label>
|
||||
<Input type="select" bind:value={input.privacy.icon_privacy}>
|
||||
<option default={group.privacy.icon_privacy === "public"}>public</option>
|
||||
<option default={group.privacy.icon_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Visibility:</Label>
|
||||
<Input type="select" bind:value={input.privacy.visibility}>
|
||||
<option default={group.privacy.visibility === "public"}>public</option>
|
||||
<option default={group.privacy.visibility === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Metadata:</Label>
|
||||
<Input type="select" bind:value={input.privacy.metadata_privacy}>
|
||||
<option default={group.privacy.metadata_privacy === "public"}>public</option>
|
||||
<option default={group.privacy.metadata_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
</Row>
|
||||
{#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal}>Back</Button>
|
||||
{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<script lang="ts">
|
||||
import { Row, Col, Modal, Image, Button, CardBody, ModalHeader, ModalBody } from 'sveltestrap';
|
||||
import moment from 'moment';
|
||||
import { toHTML } from 'discord-markdown';
|
||||
import twemoji from 'twemoji';
|
||||
|
||||
import GroupEdit from './GroupEdit.svelte';
|
||||
import Edit from './Edit.svelte';
|
||||
import Privacy from './Privacy.svelte';
|
||||
import ProxyTags from './ProxyTags.svelte';
|
||||
|
||||
import { Member, Group } from '../../api/types';
|
||||
import { Link } from 'svelte-navigator';
|
||||
|
||||
export let groups: Group[] = [];
|
||||
export let member: Member;
|
||||
export let isPublic: boolean = false;
|
||||
export let isPage: boolean = false;
|
||||
export let isMainDash = true;
|
||||
|
||||
let editMode: boolean = false;
|
||||
let groupMode: boolean = false;
|
||||
|
||||
let htmlDescription: string;
|
||||
$: if (member.description) {
|
||||
htmlDescription = toHTML(member.description, {embed: true});
|
||||
} else {
|
||||
htmlDescription = "(no description)";
|
||||
}
|
||||
|
||||
let htmlPronouns: string;
|
||||
$: if (member.pronouns) {
|
||||
htmlPronouns = toHTML(member.pronouns, {embed: true});
|
||||
}
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
let descriptionElement: any;
|
||||
let displayNameElement: any;
|
||||
let pronounElement: any;
|
||||
|
||||
$: if (settings && settings.appearance.twemoji) {
|
||||
if (descriptionElement) twemoji.parse(descriptionElement);
|
||||
if (displayNameElement) twemoji.parse(displayNameElement);
|
||||
if (pronounElement) twemoji.parse(pronounElement);
|
||||
};
|
||||
|
||||
let bannerOpen = false;
|
||||
const toggleBannerModal = () => (bannerOpen = !bannerOpen);
|
||||
|
||||
let privacyOpen = false;
|
||||
const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
|
||||
|
||||
let proxyOpen = false;
|
||||
const toggleProxyModal = () => (proxyOpen = !proxyOpen);
|
||||
|
||||
let created = moment(member.created).format("MMM D, YYYY");
|
||||
let birthday: string;
|
||||
$: {member.birthday;
|
||||
if (member.birthday) birthday = moment(member.birthday, "YYYY-MM-DD").format("MMM D, YYYY");
|
||||
}
|
||||
|
||||
$: trimmedBirthday = birthday && birthday.endsWith(', 0004') ? trimmedBirthday = birthday.replace(', 0004', '') : birthday;
|
||||
|
||||
</script>
|
||||
|
||||
<CardBody style="border-left: 4px solid #{settings && settings.appearance.color_background ? isPage ? "" : member.color : member.color }; margin: -1rem -1.25rem">
|
||||
{#if !editMode && !groupMode}
|
||||
<Row>
|
||||
{#if member.id}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>ID:</b> {member.id}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.name}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Name:</b> {member.name}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.display_name}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Display Name:</b> <span bind:this={displayNameElement}>{member.display_name}</span>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.pronouns}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Pronouns:</b> <span bind:this={pronounElement}>{@html htmlPronouns}</span>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.birthday}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Birthday:</b> {trimmedBirthday}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.created}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Created:</b> {created}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.color}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Color:</b> {member.color}
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.banner}
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal}>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={member.banner} thumbnail alt="Your system banner" />
|
||||
</div>
|
||||
</Modal>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.privacy && !isPublic}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button>
|
||||
<Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
|
||||
<ModalHeader toggle={togglePrivacyModal}>
|
||||
Edit privacy
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<Privacy on:update bind:member bind:privacyOpen/>
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
</Col>
|
||||
{/if}
|
||||
{#if member.proxy_tags && !isPublic}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<b>Proxy Tags:</b> <Button size="sm" color="secondary" on:click={toggleProxyModal}>Edit</Button>
|
||||
<Modal size="lg" isOpen={proxyOpen} toggle={toggleProxyModal}>
|
||||
<ModalHeader toggle={toggleProxyModal}>
|
||||
Edit proxy tags
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<ProxyTags on:update bind:member bind:proxyOpen/>
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
</Col>
|
||||
{/if}
|
||||
</Row>
|
||||
<div class="my-2 mb-3 description" bind:this={descriptionElement}>
|
||||
<b>Description:</b><br />
|
||||
{@html htmlDescription && htmlDescription}
|
||||
</div>
|
||||
{#if (member.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
|
||||
<img src={member.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 17em; object-fit: cover"/>
|
||||
{/if}
|
||||
{#if !isPublic}
|
||||
<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
|
||||
{#if isMainDash}<Button style="flex: 0" color="secondary" on:click={() => groupMode = true}>Groups</Button>{/if}
|
||||
{/if}
|
||||
{#if !isPage}
|
||||
<Link to={isPublic ? `/profile/m/${member.id}` : `/dash/m/${member.id}`}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary">View page</Button></Link>
|
||||
{:else}
|
||||
<Link to={isPublic ? `/profile/s/${member.system}?tab=members` : "/dash?tab=members"}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary">View system</Button></Link>
|
||||
{/if}
|
||||
{:else if editMode}
|
||||
<Edit on:deletion on:update bind:member bind:editMode />
|
||||
{:else if groupMode}
|
||||
<GroupEdit on:updateGroups bind:member bind:groups bind:groupMode />
|
||||
{/if}
|
||||
</CardBody>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<script lang="ts">
|
||||
import { Row, Col, Input, Button, Label, Alert, Spinner, Modal, ModalHeader, ModalBody } from 'sveltestrap';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import autosize from 'svelte-autosize';
|
||||
import moment from 'moment';
|
||||
|
||||
import { Member } from '../../api/types'
|
||||
import api from '../../api';
|
||||
|
||||
const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
|
||||
|
||||
let loading: boolean = false;
|
||||
export let member: Member;
|
||||
export let editMode: boolean;
|
||||
|
||||
let err: string[] = [];
|
||||
|
||||
let input: Member = {...member};
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function update() {
|
||||
dispatch('update', member);
|
||||
}
|
||||
|
||||
function deletion() {
|
||||
dispatch('deletion', member.id);
|
||||
}
|
||||
|
||||
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.birthday) {
|
||||
if (!moment(data.birthday, 'YYYY-MM-DD').isValid()) {
|
||||
if (moment(data.birthday, 'MM-DD').isValid()) {
|
||||
data.birthday = '0004-' + data.birthday;
|
||||
} else {
|
||||
err.push(`${data.birthday} is not a valid date, please use the following format: YYYY-MM-DD. (example: 2019-07-21)`);
|
||||
}
|
||||
}
|
||||
if (data.birthday.includes('/')) {
|
||||
data.birthday.replace('/', '-');
|
||||
}
|
||||
}
|
||||
|
||||
err = err;
|
||||
if (err.length > 0) return;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res = await api().members(member.id).patch({data});
|
||||
member = res;
|
||||
err = [];
|
||||
update();
|
||||
editMode = false;
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err.push(error.message);
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
let deleteOpen: boolean = false;
|
||||
const toggleDeleteModal = () => deleteOpen = !deleteOpen;
|
||||
|
||||
let deleteInput: string;
|
||||
let deleteErr: string;
|
||||
|
||||
async function submitDelete() {
|
||||
deleteErr = null;
|
||||
|
||||
if (!deleteInput) {
|
||||
deleteErr = "Please type out the member ID.";
|
||||
return;
|
||||
}
|
||||
|
||||
if (deleteInput.trim().toLowerCase() !== member.id) {
|
||||
deleteErr = "This member's ID does not match the provided ID.";
|
||||
return;
|
||||
}
|
||||
loading = true;
|
||||
try {
|
||||
await api().members(member.id).delete();
|
||||
deleteErr = null;
|
||||
toggleDeleteModal();
|
||||
loading = false;
|
||||
deletion();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
deleteErr = error.message;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each err as error}
|
||||
<Alert color="danger">{@html error}</Alert>
|
||||
{/each}
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Name:</Label>
|
||||
<Input bind:value={input.name} maxlength={100} type="text" placeholder={member.name} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Display name:</Label>
|
||||
<textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={member.display_name} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Pronouns:</Label>
|
||||
<textarea class="form-control" style="resize: none; height: 1em" bind:value={input.pronouns} maxlength={100} type="text" placeholder={member.pronouns} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Birthday:</Label>
|
||||
<Input bind:value={input.birthday} maxlength={100} type="text" placeholder={member.birthday} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Color:</Label>
|
||||
<Input bind:value={input.color} type="text" placeholder={member.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={member.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={member.banner}/>
|
||||
</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]}>Template 1</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 1 && descriptions[1].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 2 && descriptions[2].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
|
||||
{/if}
|
||||
<br>
|
||||
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={member.description}/>
|
||||
</div>
|
||||
{#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal}>Delete</Button>
|
||||
{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button><Button style="flex: 0; float: right;" color="danger" disabled>Delete</Button>{/if}
|
||||
<Modal size="lg" isOpen={deleteOpen} toggle={toggleDeleteModal}>
|
||||
<ModalHeader toggle={toggleDeleteModal}>
|
||||
Delete member
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{#if deleteErr}<Alert color="danger">{deleteErr}</Alert>{/if}
|
||||
<Label>If you're sure you want to delete this member, type out the member ID (<code>{member.id}</code>) below.</Label>
|
||||
<Input class="mb-3" bind:value={deleteInput} maxlength={7} placeholder={member.id}></Input>
|
||||
{#if !loading}<Button style="flex 0" color="danger" on:click={submitDelete}>Delete</Button> <Button style="flex: 0" color="secondary" on:click={toggleDeleteModal}>Back</Button>
|
||||
{:else}<Button style="flex 0" color="danger" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
|
||||
{/if}
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<script lang="ts">
|
||||
import { Row, Col, Button, Alert, ListGroup, ListGroupItem, Spinner } from 'sveltestrap';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import ListPagination from "../ListPagination.svelte";
|
||||
import twemoji from "twemoji";
|
||||
import Svelecte, { addFormatter } from 'svelecte';
|
||||
import { toHTML } from 'discord-markdown';
|
||||
|
||||
import FaFolderOpen from 'svelte-icons/fa/FaFolderOpen.svelte'
|
||||
import FaFolderPlus from 'svelte-icons/fa/FaFolderPlus.svelte'
|
||||
import FaFolderMinus from 'svelte-icons/fa/FaFolderMinus.svelte'
|
||||
|
||||
import { Member, Group } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
export let member: Member;
|
||||
export let groups: Group[] = [];
|
||||
let loading: boolean = false;
|
||||
let err: string;
|
||||
export let groupMode: boolean = true;
|
||||
|
||||
let groupsWithMember: Group[];
|
||||
let groupsWithoutMember: Group[];
|
||||
let groupsWithMemberSelection: any[];
|
||||
let groupsWithoutMemberSelection: any[];
|
||||
|
||||
let groupsToBeAdded: any[];
|
||||
let groupsToBeRemoved: any[];
|
||||
|
||||
let currentPage = 1;
|
||||
let smallPages = true;
|
||||
|
||||
$: if (groups) {
|
||||
groupsWithMember = groups.filter(group => group.members && group.members.includes(member.uuid));
|
||||
groupsWithMember.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
groupsWithoutMember = groups.filter(group => group.members && !group.members.includes(member.uuid));
|
||||
groupsWithoutMember.sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
groupsWithMemberSelection = groupsWithMember.map(function(group) { return {name: group.name, shortid: group.id, id: group.uuid, members: group.members, display_name: group.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
|
||||
groupsWithoutMemberSelection = groupsWithoutMember.map(function(group) { return {name: group.name, shortid: group.id, id: group.uuid, members: group.members, display_name: group.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
|
||||
}
|
||||
|
||||
$: indexOfLastItem = currentPage * 10;
|
||||
$: indexOfFirstItem = indexOfLastItem - 10;
|
||||
$: pageAmount = Math.ceil(groupsWithMember && groupsWithMember.length / 10);
|
||||
|
||||
$: finalGroupsList = groupsWithMember && groupsWithMember.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem('pk-settings'));
|
||||
let listGroupElements: any[] = [];
|
||||
$: if (settings && settings.appearance.twemoji) {
|
||||
if (listGroupElements && listGroupElements.length > 0) {
|
||||
listGroupElements.forEach(element => element && twemoji.parse(element));
|
||||
};
|
||||
}
|
||||
|
||||
function groupListRenderer(item: any) {
|
||||
return `${item.name} (<code>${item.shortid}</code>)`;
|
||||
}
|
||||
|
||||
addFormatter({
|
||||
'member-list': groupListRenderer
|
||||
});
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function updateGroups() {
|
||||
dispatch("updateGroups", groups);
|
||||
}
|
||||
|
||||
async function submitAdd() {
|
||||
let data = groupsToBeAdded;
|
||||
try {
|
||||
loading = true;
|
||||
await api().members(member.id).groups.add.post({data});
|
||||
groups.forEach(group => data.includes(group.uuid) && group.members.push(member.uuid));
|
||||
updateGroups();
|
||||
err = null;
|
||||
groupsToBeAdded = [];
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitRemove() {
|
||||
let data = groupsToBeRemoved;
|
||||
try {
|
||||
loading = true;
|
||||
await api().members(member.id).groups.remove.post({data});
|
||||
groups.forEach(group => {if (data.includes(group.uuid)) group.members = group.members.filter(m => m !== member.uuid)});
|
||||
updateGroups();
|
||||
err = null;
|
||||
groupsToBeRemoved = [];
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
{#if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{/if}
|
||||
<Row>
|
||||
<Col xs={12} lg={6} class="text-center mb-3">
|
||||
<h5><div class="icon d-inline-block">
|
||||
<FaFolderOpen />
|
||||
</div>Current Groups</h5>
|
||||
<ListPagination bind:currentPage bind:pageAmount bind:smallPages/>
|
||||
{#if finalGroupsList && finalGroupsList.length > 0}
|
||||
<ListGroup>
|
||||
{#each finalGroupsList as group, index (group.id)}
|
||||
<ListGroupItem class="d-flex"><span bind:this={listGroupElements[index]} class="d-flex justify-content-between flex-grow-1"><span><b>{group.name}</b> (<code>{group.id}</code>)</span> <span>{@html group.display_name ? `${toHTML(group.display_name)}` : ""}</span></span></ListGroupItem>
|
||||
{/each}
|
||||
</ListGroup>
|
||||
{:else}
|
||||
<p>This member is inside no groups.</p>
|
||||
<p>You can add groups in this menu!</p>
|
||||
{/if}
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="text-center mb-3">
|
||||
<h5><div class="icon d-inline-block">
|
||||
<FaFolderPlus />
|
||||
</div>Add to Groups</h5>
|
||||
<Svelecte renderer="member-list" disableHighlight bind:value={groupsToBeAdded} options={groupsWithoutMemberSelection} multiple/>
|
||||
{#if !loading && groupsToBeAdded && groupsToBeAdded.length > 0}
|
||||
<Button class="w-100 mt-2" color="primary" on:click={submitAdd}>Add</Button>{:else}
|
||||
<Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Add{/if}</Button>
|
||||
{/if}
|
||||
<hr/>
|
||||
<h5><div class="icon d-inline-block">
|
||||
<FaFolderMinus />
|
||||
</div>Remove from Groups</h5>
|
||||
<Svelecte renderer="member-list" disableHighlight bind:value={groupsToBeRemoved} options={groupsWithMemberSelection} multiple/>
|
||||
{#if !loading && groupsToBeRemoved && groupsToBeRemoved.length > 0}
|
||||
<Button class="w-100 mt-2" color="primary" on:click={submitRemove}>Remove</Button>{:else}
|
||||
<Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Remove{/if}</Button>
|
||||
{/if}
|
||||
</Col>
|
||||
</Row>
|
||||
<Button style="flex: 0" color="secondary" on:click={() => groupMode = false}>Back</Button>
|
||||
|
|
@ -0,0 +1,366 @@
|
|||
<script lang="ts">
|
||||
import { Link } from 'svelte-navigator';
|
||||
import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button, Tooltip, Label } from 'sveltestrap';
|
||||
import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte'
|
||||
import { onMount } from 'svelte';
|
||||
import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
|
||||
import { useParams } from 'svelte-navigator';
|
||||
import CardsHeader from '../CardsHeader.svelte';
|
||||
import ListPagination from '../ListPagination.svelte';
|
||||
import Svelecte, { addFormatter } from 'svelecte';
|
||||
import FaLock from 'svelte-icons/fa/FaLock.svelte';
|
||||
import Body from './Body.svelte';
|
||||
import NewMember from './NewMember.svelte';
|
||||
|
||||
import { Member, Group } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
export let isPublic: boolean;
|
||||
|
||||
export let list: Member[] = [];
|
||||
export let groups: Group[] = [];
|
||||
export let isMainDash = true;
|
||||
|
||||
$: grouplist = groups && groups.map(function(group) { return {name: group.name, shortid: group.id, id: group.uuid, members: group.members, display_name: group.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
let token = localStorage.getItem("pk-token");
|
||||
let listLoading = true;
|
||||
let err: string;
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
|
||||
let itemsPerPageValue = settings && settings.accessibility && settings.accessibility.expandedcards ? "10" : "25";
|
||||
$: itemsPerPage = parseInt(itemsPerPageValue);
|
||||
|
||||
let searchBy = "name";
|
||||
let sortBy = "name";
|
||||
let sortOrder = "ascending";
|
||||
let privacyFilter = "all";
|
||||
let groupSearchMode = "include";
|
||||
let selectedGroups = [];
|
||||
|
||||
let currentPage = 1;
|
||||
|
||||
let params = useParams();
|
||||
$: id = $params.id;
|
||||
|
||||
onMount(() => {
|
||||
if (token || isPublic) fetchMembers();
|
||||
});
|
||||
|
||||
async function fetchMembers() {
|
||||
err = "";
|
||||
listLoading = true;
|
||||
try {
|
||||
const res: Member[] = await api().systems(isPublic ? id : "@me").members.get({ auth: !isPublic });
|
||||
list = res;
|
||||
listLoading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
listLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
let searchValue: string;
|
||||
|
||||
$: {searchValue; privacyFilter; currentPage = 1};
|
||||
|
||||
$: searchedList = list.filter((item) => {
|
||||
if (!searchValue && searchBy !== "description" && searchBy !== "display name") return true;
|
||||
|
||||
switch (searchBy) {
|
||||
case "name": if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||
break;
|
||||
case "display name": if (!searchValue) {
|
||||
if (!item.display_name) return true;
|
||||
else return false;
|
||||
}
|
||||
if (item.display_name && item.display_name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||
break;
|
||||
case "description": if (!searchValue) {
|
||||
if (!item.description) return true;
|
||||
else return false;
|
||||
}
|
||||
else if (item.description && item.description.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||
break;
|
||||
case "ID": if (item.id.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||
break;
|
||||
default: if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||
break;
|
||||
}
|
||||
|
||||
return false;
|
||||
})
|
||||
|
||||
$: filteredList = searchedList.filter((item) => {
|
||||
if (privacyFilter === "all") return true;
|
||||
if (privacyFilter === "public" && item.privacy.visibility === "public") return true;
|
||||
if (privacyFilter === "private" && item.privacy.visibility === "private") return true;
|
||||
return false;
|
||||
});
|
||||
|
||||
let sortedList = [];
|
||||
|
||||
$: if (filteredList) {
|
||||
switch (sortBy) {
|
||||
case "name": sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
|
||||
break;
|
||||
case "display name": sortedList = filteredList.sort((a, b) => {
|
||||
if (a.display_name && b.display_name) return a.display_name.localeCompare(b.display_name);
|
||||
else if (a.display_name && !b.display_name) return a.display_name.localeCompare(b.name);
|
||||
else if (!a.display_name && b.display_name) return a.name.localeCompare(b.display_name);
|
||||
else return a.name.localeCompare(b.name);
|
||||
});
|
||||
break;
|
||||
case "creation date": sortedList = filteredList.sort((a, b) => {
|
||||
if (a.created && b.created) return a.created.localeCompare(b.created);
|
||||
});
|
||||
break;
|
||||
case "ID": sortedList = filteredList.sort((a, b) => a.id.localeCompare(b.id));
|
||||
break;
|
||||
default: sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
let memberFilteredList = [];
|
||||
$: memberFilteredList = sortedList.filter((item: Member) => {
|
||||
if (groupSearchMode === "none") {
|
||||
if (groups.some(group => group.members && group.members.includes(item.uuid))) return false;
|
||||
}
|
||||
|
||||
if (selectedGroups.length < 1) return true;
|
||||
|
||||
switch (groupSearchMode) {
|
||||
case "include": if (selectedGroups.some(group => group.members && group.members.includes(item.uuid))) return true;
|
||||
break;
|
||||
case "exclude": if (selectedGroups.every(group => group.members && !group.members.includes(item.uuid))) return true;
|
||||
break;
|
||||
case "match": if (selectedGroups.every(group => group.members && group.members.includes(item.uuid))) return true;
|
||||
break;
|
||||
default: return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
})
|
||||
|
||||
let finalList = [];
|
||||
$:{sortOrder; if (sortOrder === "descending") finalList = memberFilteredList.reverse(); else finalList = memberFilteredList;}
|
||||
|
||||
$: finalList = finalList;
|
||||
|
||||
$: indexOfLastItem = currentPage * itemsPerPage;
|
||||
$: indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
$: pageAmount = Math.ceil(finalList.length / itemsPerPage);
|
||||
|
||||
$: slicedList = finalList.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
function groupListRenderer(item: any) {
|
||||
return `${item.name} (<code>${item.shortid}</code>)`;
|
||||
}
|
||||
|
||||
addFormatter({
|
||||
'member-list': groupListRenderer
|
||||
});
|
||||
|
||||
function updateList(event: any) {
|
||||
list = list.map(member => member.id !== event.detail.id ? member : event.detail);
|
||||
}
|
||||
|
||||
function updateGroups(event: any) {
|
||||
groups = event.detail;
|
||||
}
|
||||
|
||||
function updateDelete(event: any) {
|
||||
list = list.filter(member => member.id !== event.detail);
|
||||
}
|
||||
|
||||
function addMemberToList(event: any) {
|
||||
list.push(event.detail);
|
||||
list = list;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Card class="mb-3">
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaSearch />
|
||||
</div> Search members
|
||||
</CardTitle>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Row>
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<InputGroup>
|
||||
<InputGroupText>Page length</InputGroupText>
|
||||
<Input bind:value={itemsPerPageValue} type="select">
|
||||
<option>10</option>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
</Input>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<InputGroup>
|
||||
<InputGroupText>Search by</InputGroupText>
|
||||
<Input bind:value={searchBy} type="select">
|
||||
<option>name</option>
|
||||
<option>display name</option>
|
||||
<option>description</option>
|
||||
<option>ID</option>
|
||||
</Input>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<InputGroup>
|
||||
<InputGroupText>Sort by</InputGroupText>
|
||||
<Input bind:value={sortBy} type="select">
|
||||
<option>name</option>
|
||||
<option>display name</option>
|
||||
{#if !isPublic}<option>creation date</option>{/if}
|
||||
<option>ID</option>
|
||||
</Input>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<InputGroup>
|
||||
<InputGroupText>Sort order</InputGroupText>
|
||||
<Input bind:value={sortOrder} type="select">
|
||||
<option>ascending</option>
|
||||
<option>descending</option>
|
||||
</Input>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
{#if !isPublic}
|
||||
<Col xs={12} lg={3} class="mb-2">
|
||||
<InputGroup>
|
||||
<InputGroupText>Only show</InputGroupText>
|
||||
<Input bind:value={privacyFilter} type="select">
|
||||
<option>all</option>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
{/if}
|
||||
</Row>
|
||||
{#if !isPublic}
|
||||
<hr/>
|
||||
<Label>Filter members by group</Label>
|
||||
<Svelecte disableHighlight renderer="member-list" valueAsObject bind:value={selectedGroups} options={grouplist} multiple style="margin-bottom: 0.5rem">
|
||||
</Svelecte>
|
||||
<span style="cursor: pointer" id="m-include" on:click={() => groupSearchMode = "include"}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span>
|
||||
| <span style="cursor: pointer" id="m-exclude" on:click={() => groupSearchMode = "exclude"}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span>
|
||||
| <span style="cursor: pointer" id="m-match" on:click={() => groupSearchMode = "match"}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
|
||||
| <span style="cursor: pointer" id="m-none" on:click={() => groupSearchMode = "none"}>{@html groupSearchMode === "none" ? "<b>none</b>" : "none"}</span>
|
||||
<Tooltip placement="bottom" target="m-include">Includes every member who's a part of any of the groups.</Tooltip>
|
||||
<Tooltip placement="bottom" target="m-exclude">Excludes every member who's a part of any of the groups, the opposite of include.</Tooltip>
|
||||
<Tooltip placement="bottom" target="m-match">Only includes members who are a part of every group.</Tooltip>
|
||||
<Tooltip placement="bottom" target="m-none">Only includes members that are in no groups.</Tooltip>
|
||||
{/if}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
|
||||
{#if listLoading && !err}
|
||||
<div class="mx-auto text-center">
|
||||
<Spinner class="d-inline-block" />
|
||||
</div>
|
||||
{:else if err}
|
||||
<Row>
|
||||
<Col xs={12} lg={10}>
|
||||
<Alert color="danger">{err}</Alert>
|
||||
</Col>
|
||||
<Col xs={12} lg={2}>
|
||||
<Button class="w-100 mb-3" color="primary" on:click={fetchMembers}>Refresh</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
{:else}
|
||||
|
||||
<Row>
|
||||
<Col xs={12} lg={10}>
|
||||
<Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/>
|
||||
</Col>
|
||||
<Col xs={12} lg={2} class="mb-3 mb-lg-0">
|
||||
<Button class="w-100 mb-3" color="primary" on:click={fetchMembers}>Refresh</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<ListPagination bind:currentPage bind:pageAmount />
|
||||
{#if !isPublic}
|
||||
<NewMember on:create={addMemberToList} />
|
||||
{/if}
|
||||
{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
|
||||
<Accordion class="my-3" stayOpen>
|
||||
{#each slicedList as member, index (member.id)}
|
||||
{#if (!isPublic && member.privacy.visibility === "public") || isPublic}
|
||||
<AccordionItem>
|
||||
<CardsHeader bind:item={member} slot="header">
|
||||
<FaUserCircle slot="icon" />
|
||||
</CardsHeader>
|
||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
|
||||
</AccordionItem>
|
||||
{:else}
|
||||
<AccordionItem>
|
||||
<CardsHeader bind:item={member} slot="header">
|
||||
<FaLock slot="icon" />
|
||||
</CardsHeader>
|
||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
|
||||
</AccordionItem>
|
||||
{/if}
|
||||
{/each}
|
||||
</Accordion>
|
||||
{:else if settings.accessibility.expandedcards}
|
||||
{#each slicedList as member, index (member.id)}
|
||||
{#if (!isPublic && member.privacy.visibility === "public") || isPublic}
|
||||
<Card class="mb-3">
|
||||
<CardHeader>
|
||||
<CardsHeader bind:item={member}>
|
||||
<FaUserCircle slot="icon" />
|
||||
</CardsHeader>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
|
||||
</CardBody>
|
||||
</Card>
|
||||
{:else}
|
||||
<Card class="mb-3">
|
||||
<CardHeader>
|
||||
<CardsHeader bind:item={member}>
|
||||
<FaLock slot="icon" />
|
||||
</CardsHeader>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
|
||||
</CardBody>
|
||||
</Card>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="my-3">
|
||||
{#each slicedList as member, index (member.id)}
|
||||
{#if (!isPublic && member.privacy.visibility === "public") || isPublic}
|
||||
<Card>
|
||||
<Link class="accordion-button collapsed" style="text-decoration: none;" to={isMainDash ? `/dash/m/${member.id}` : `/profile/m/${member.id}`}>
|
||||
<CardsHeader bind:item={member}>
|
||||
<FaUserCircle slot="icon" />
|
||||
</CardsHeader>
|
||||
</Link>
|
||||
</Card>
|
||||
{:else}
|
||||
<Card>
|
||||
<Link class="accordion-button collapsed" style="text-decoration: none;" to={isMainDash ? `/dash/m/${member.id}` : `/profile/m/${member.id}`}>
|
||||
<CardsHeader bind:item={member}>
|
||||
<FaLock slot="icon" />
|
||||
</CardsHeader>
|
||||
</Link>
|
||||
</Card>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<ListPagination bind:currentPage bind:pageAmount />
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
<script lang="ts">
|
||||
import { Accordion, AccordionItem, Row, Col, Input, Button, Label, Alert, Spinner, CardTitle, InputGroup } from 'sveltestrap';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import autosize from 'svelte-autosize';
|
||||
import moment from 'moment';
|
||||
import FaPlus from 'svelte-icons/fa/FaPlus.svelte';
|
||||
import { Member } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
const descriptions: string[] = JSON.parse(localStorage.getItem("pk-config"))?.description_templates;
|
||||
|
||||
let err: string[] = [];
|
||||
let message: string;
|
||||
let loading: boolean = false;
|
||||
let privacyMode: boolean = false;
|
||||
let proxyTagMode: boolean = false;
|
||||
|
||||
let defaultMember = {
|
||||
privacy: {
|
||||
visibility: "public",
|
||||
metadata_privacy: "public",
|
||||
description_privacy: "public",
|
||||
pronoun_privacy: "public",
|
||||
birthday_privacy: "public",
|
||||
name_privacy: "public",
|
||||
avatar_privacy: "public"
|
||||
},
|
||||
proxy_tags: [
|
||||
{
|
||||
prefix: "",
|
||||
suffix: ""
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let input: Member = defaultMember;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function create() {
|
||||
dispatch('create', input);
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
let data = input;
|
||||
message = "";
|
||||
err = [];
|
||||
|
||||
if (input.proxy_tags.some(tag => tag.prefix && tag.suffix && tag.prefix.length + tag.suffix.length + 4 > 100)) {
|
||||
err.push("One of your proxy tags is too long (prefix + 'text' + suffix must be shorter than 100 characters). Please shorten this tag, or remove it.");
|
||||
}
|
||||
|
||||
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.birthday) {
|
||||
if (!moment(data.birthday, 'YYYY-MM-DD').isValid()) {
|
||||
if (moment(data.birthday, 'MM-DD').isValid()) {
|
||||
data.birthday = '0004-' + data.birthday;
|
||||
} else {
|
||||
err.push(`${data.birthday} is not a valid date, please use the following format: YYYY-MM-DD. (example: 2019-07-21)`);
|
||||
}
|
||||
}
|
||||
if (data.birthday.includes('/')) {
|
||||
data.birthday.replace('/', '-');
|
||||
}
|
||||
}
|
||||
|
||||
err = err;
|
||||
if (err.length > 0) return;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res = await api().members().post({data});
|
||||
input = res;
|
||||
err = [];
|
||||
create();
|
||||
input = defaultMember;
|
||||
message = `Member ${data.name} successfully created!`
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err.push(error.message);
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Accordion class="mb-3">
|
||||
<AccordionItem>
|
||||
<CardTitle slot="header" style="margin-top: 0px; margin-bottom: 0px; outline: none; align-items: center;" class="d-flex align-middle w-100 p-2">
|
||||
<div class="icon d-inline-block">
|
||||
<FaPlus/>
|
||||
</div>
|
||||
<span style="vertical-align: middle;">Add new Member</span>
|
||||
</CardTitle>
|
||||
{#if message}
|
||||
<Alert color="success">{@html message}</Alert>
|
||||
{/if}
|
||||
{#each err as error}
|
||||
<Alert color="danger">{@html error}</Alert>
|
||||
{/each}
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Name:</Label>
|
||||
<Input bind:value={input.name} maxlength={100} type="text" placeholder={input.name} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Display name:</Label>
|
||||
<textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={input.display_name} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Pronouns:</Label>
|
||||
<textarea class="form-control" style="resize: none; height: 1em" bind:value={input.pronouns} maxlength={100} type="text" placeholder={input.pronouns} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Birthday:</Label>
|
||||
<Input bind:value={input.birthday} maxlength={100} type="text" placeholder={input.birthday} />
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Color:</Label>
|
||||
<Input bind:value={input.color} type="text" placeholder={input.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={input.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={input.banner}/>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Privacy:</Label>
|
||||
<Button class="w-100" color="secondary" on:click={() => privacyMode = !privacyMode}>Toggle privacy</Button>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Proxy tags:</Label>
|
||||
<Button class="w-100" color="secondary" on:click={() => proxyTagMode = !proxyTagMode}>Toggle proxy tags</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
{#if privacyMode}
|
||||
<hr/>
|
||||
<b>Privacy:</b>
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Description:</Label>
|
||||
<Input type="select" bind:value={input.privacy.description_privacy}>
|
||||
<option default>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Name:</Label>
|
||||
<Input type="select" bind:value={input.privacy.name_privacy}>
|
||||
<option default>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Avatar:</Label>
|
||||
<Input type="select" bind:value={input.privacy.avatar_privacy}>
|
||||
<option default>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Birthday:</Label>
|
||||
<Input type="select" bind:value={input.privacy.birthday_privacy}>
|
||||
<option default>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Pronouns:</Label>
|
||||
<Input type="select" bind:value={input.privacy.pronoun_privacy}>
|
||||
<option default>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Visibility:</Label>
|
||||
<Input type="select" bind:value={input.privacy.visibility}>
|
||||
<option default>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Metadata:</Label>
|
||||
<Input type="select" bind:value={input.privacy.metadata_privacy}>
|
||||
<option default>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
</Row>
|
||||
{/if}
|
||||
{#if proxyTagMode}
|
||||
<hr/>
|
||||
<b>Proxy tags:</b>
|
||||
<Row class="mb-2">
|
||||
{#each input.proxy_tags as proxyTag, index (index)}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<InputGroup>
|
||||
<Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.prefix} />
|
||||
<Input disabled value="text"/>
|
||||
<Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.suffix}/>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
{/each}
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Button class="w-100" color="secondary" on:click={() => {input.proxy_tags.push({prefix: "", suffix: ""}); input.proxy_tags = input.proxy_tags;}}>New</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
{/if}
|
||||
<hr/>
|
||||
<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]}>Template 1</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 1 && descriptions[1].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 2 && descriptions[2].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
|
||||
{/if}
|
||||
<br>
|
||||
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={input.description}/>
|
||||
</div>
|
||||
{#if !loading && input.name}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button>
|
||||
{:else if !input.name }<Button style="flex: 0" color="primary" disabled>Submit</Button>
|
||||
{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button>{/if}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { Col, Row, Input, Label, Button, Alert, Spinner } from "sveltestrap";
|
||||
|
||||
import { Member } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
let loading: boolean;
|
||||
export let privacyOpen: boolean;
|
||||
export let member: Member;
|
||||
const togglePrivacyModal = () => (privacyOpen = !privacyOpen);
|
||||
|
||||
let err: string;
|
||||
|
||||
let allPrivacy: string;
|
||||
|
||||
$: { changePrivacy(allPrivacy)}
|
||||
|
||||
function changePrivacy(value: string) {
|
||||
if (value) {
|
||||
input.privacy.description_privacy = value;
|
||||
input.privacy.name_privacy = value;
|
||||
input.privacy.avatar_privacy = value;
|
||||
input.privacy.birthday_privacy = value;
|
||||
input.privacy.pronoun_privacy = value;
|
||||
input.privacy.visibility = value;
|
||||
input.privacy.metadata_privacy = value;
|
||||
}
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function update() {
|
||||
dispatch('update', member);
|
||||
}
|
||||
|
||||
let input: Member = {privacy: member.privacy};
|
||||
|
||||
async function submit() {
|
||||
let data = input;
|
||||
err = null;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res = await api().members(member.id).patch({data});
|
||||
member = res;
|
||||
update();
|
||||
loading = false;
|
||||
togglePrivacyModal();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{#if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{/if}
|
||||
<Label><b>Set all to:</b></Label>
|
||||
<Input type="select" bind:value={allPrivacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
<hr />
|
||||
<Row>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Description:</Label>
|
||||
<Input type="select" bind:value={input.privacy.description_privacy}>
|
||||
<option default={member.privacy.description_privacy === "public"}>public</option>
|
||||
<option default={member.privacy.description_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Name:</Label>
|
||||
<Input type="select" bind:value={input.privacy.name_privacy}>
|
||||
<option default={member.privacy.name_privacy === "public"}>public</option>
|
||||
<option default={member.privacy.name_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Avatar:</Label>
|
||||
<Input type="select" bind:value={input.privacy.avatar_privacy}>
|
||||
<option default={member.privacy.avatar_privacy === "public"}>public</option>
|
||||
<option default={member.privacy.avatar_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Birthday:</Label>
|
||||
<Input type="select" bind:value={input.privacy.birthday_privacy}>
|
||||
<option default={member.privacy.birthday_privacy === "public"}>public</option>
|
||||
<option default={member.privacy.birthday_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Pronouns:</Label>
|
||||
<Input type="select" bind:value={input.privacy.pronoun_privacy}>
|
||||
<option default={member.privacy.pronoun_privacy === "public"}>public</option>
|
||||
<option default={member.privacy.pronoun_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Visibility:</Label>
|
||||
<Input type="select" bind:value={input.privacy.visibility}>
|
||||
<option default={member.privacy.visibility === "public"}>public</option>
|
||||
<option default={member.privacy.visibility === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-3">
|
||||
<Label>Metadata:</Label>
|
||||
<Input type="select" bind:value={input.privacy.metadata_privacy}>
|
||||
<option default={member.privacy.metadata_privacy === "public"}>public</option>
|
||||
<option default={member.privacy.metadata_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
</Row>
|
||||
{#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal}>Back</Button>
|
||||
{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { Col, Row, Input, Label, Button, Alert, Spinner, InputGroup } from "sveltestrap";
|
||||
|
||||
import { Member } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
let loading: boolean;
|
||||
export let proxyOpen: boolean;
|
||||
export let member: Member;
|
||||
const toggleProxyModal = () => (proxyOpen = !proxyOpen);
|
||||
|
||||
let err: string;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function update() {
|
||||
dispatch('update', member);
|
||||
}
|
||||
|
||||
let input = member.proxy_tags;
|
||||
|
||||
async function submit() {
|
||||
err = null;
|
||||
if (input.some(tag => tag.prefix && tag.suffix && tag.prefix.length + tag.suffix.length + 4 > 100)) {
|
||||
err = "One of your proxy tags is too long (prefix + 'text' + suffix must be shorter than 100 characters). Please shorten this tag, or remove it."
|
||||
return;
|
||||
}
|
||||
|
||||
let data: Member = {proxy_tags: input};
|
||||
loading = true;
|
||||
|
||||
try {
|
||||
let res = await api().members(member.id).patch({data});
|
||||
member = res;
|
||||
err = null;
|
||||
update();
|
||||
loading = false;
|
||||
toggleProxyModal();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{/if}
|
||||
<Row class="mb-2">
|
||||
{#each input as proxyTag, index (index)}
|
||||
<Col xs={12} lg={6} class="mb-2">
|
||||
<InputGroup>
|
||||
<Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.prefix} />
|
||||
<Input disabled value="text"/>
|
||||
<Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.suffix}/>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
{/each}
|
||||
<Col xs={12} lg={6} class="mb-2">
|
||||
<Button class="w-100" color="secondary" on:click={() => {input.push({prefix: "", suffix: ""}); input = input;}}>New</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
{#if !loading}<Button style="flex 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={toggleProxyModal}>Back</Button>
|
||||
{:else}<Button style="flex 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<script lang="ts">
|
||||
export let hover;
|
||||
|
||||
export let shard = {
|
||||
id: 1,
|
||||
status: "",
|
||||
ping:0,
|
||||
disconnection_count:0,
|
||||
last_connection:0,
|
||||
last_heartbeat:0.
|
||||
};
|
||||
|
||||
let color = "background-color: #fff";
|
||||
|
||||
// shard is down
|
||||
// todo: check if last heartbeat is really recent, since database up/down status can get out of sync
|
||||
if (shard.status != "up") color = "background-color: #000;";
|
||||
// shard latency is < 250ms: OK!
|
||||
else if (shard.ping < 300) color = "background-color: #00cc00;";
|
||||
// shard latency is 250ms < ping < 600ms: slow, but OK
|
||||
else if (shard.ping < 600) color = "background-color: #da9317;";
|
||||
// shard latency is >600ms, this might be problematic
|
||||
else color = "background-color: #cc0000;"
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<div
|
||||
on:click={() => hover = (hover != shard.id) ? shard.id : null}
|
||||
class="shard" id={shard.id.toString()}
|
||||
style={color}
|
||||
>{ shard.id }</div>
|
||||
{#if hover == shard.id}
|
||||
<div class="more-info">
|
||||
<br>
|
||||
<h3>Shard { shard.id }</h3>
|
||||
<br>
|
||||
<span>Status: <b>{ shard.status }</b></span><br>
|
||||
<span>Latency: { shard.ping }ms</span><br>
|
||||
<span>Disconnection count: { shard.disconnection_count }</span><br>
|
||||
<span>Last connection: { shard.last_connection }</span><br>
|
||||
<span>Last heartbeat: { shard.last_heartbeat }</span><br>
|
||||
<br>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
.shard:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.shard {
|
||||
color: #fff;
|
||||
display: block;
|
||||
float: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 2px;
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
}
|
||||
.more-info {
|
||||
/* display: none; */
|
||||
position: absolute;
|
||||
margin-top: 3em;
|
||||
will-change: transform;
|
||||
min-height: 150px;
|
||||
width: 200px;
|
||||
z-index: 2;
|
||||
border-radius: 5px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
opacity: 95%;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<script lang="ts">
|
||||
import { Row, Col, Modal, Image, Button } from 'sveltestrap';
|
||||
import moment from 'moment';
|
||||
import { toHTML } from 'discord-markdown';
|
||||
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;
|
||||
if (user.description) {
|
||||
htmlDescription = toHTML(user.description, {embed: true});
|
||||
} else {
|
||||
htmlDescription = "(no description)";
|
||||
}
|
||||
|
||||
if (user.name) {
|
||||
htmlName = toHTML(user.name);
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
$: if (settings && settings.appearance.twemoji) {
|
||||
if (descriptionElement) twemoji.parse(descriptionElement);
|
||||
if (nameElement) twemoji.parse(nameElement);
|
||||
if (tagElement) twemoji.parse(tagElement);
|
||||
}
|
||||
|
||||
</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.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}>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="Your 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 src={user.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
|
||||
{/if}
|
||||
{#if !isPublic}
|
||||
<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<script lang="ts">
|
||||
import { Row, Col, Input, Button, Label, Alert } from 'sveltestrap';
|
||||
import autosize from 'svelte-autosize';
|
||||
// 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;
|
||||
export let loading: boolean;
|
||||
|
||||
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!`);
|
||||
} */
|
||||
|
||||
err = err;
|
||||
if (err.length > 0) return;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res = await api().systems("@me").patch({data});
|
||||
user = res;
|
||||
currentUser.update(() => res);
|
||||
err = [];
|
||||
editMode = false;
|
||||
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}
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Name:</Label>
|
||||
<Input bind:value={input.name} maxlength={100} type="text" placeholder={user.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} />
|
||||
</Col>
|
||||
<!-- <Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Timezone:</Label>
|
||||
<Input bind:value={input.timezone} type="text" placeholder={user.timezone} />
|
||||
</Col> -->
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<Label>Color:</Label>
|
||||
<Input bind:value={input.color} type="text" placeholder={user.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}/>
|
||||
</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}/>
|
||||
</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]}>Template 1</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 1 && descriptions[1].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
|
||||
{/if}
|
||||
{#if descriptions.length > 2 && descriptions[2].trim() != ""}
|
||||
<Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
|
||||
{/if}
|
||||
<br>
|
||||
<textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description}/>
|
||||
</div>
|
||||
<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="light" on:click={() => editMode = false}>Back</Button>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<script lang="ts">
|
||||
import { Card, CardBody, CardHeader } from 'sveltestrap';
|
||||
import FaAddressCard from 'svelte-icons/fa/FaAddressCard.svelte'
|
||||
import CardsHeader from '../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 loading = false;
|
||||
|
||||
let editMode = false;
|
||||
</script>
|
||||
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardsHeader bind:item={user} bind:loading>
|
||||
<FaAddressCard slot="icon" />
|
||||
</CardsHeader>
|
||||
</CardHeader>
|
||||
<CardBody style="border-left: 4px solid #{user.color}">
|
||||
{#if !editMode}
|
||||
<Body bind:user bind:editMode bind:isPublic/>
|
||||
{:else}
|
||||
<Edit bind:user bind:editMode bind:loading />
|
||||
{/if}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{#if !isPublic}
|
||||
<Privacy bind:user />
|
||||
{/if}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<script lang="ts">
|
||||
import { Card, CardHeader, CardBody, CardTitle, Row, Col, Button, Spinner } from 'sveltestrap';
|
||||
import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
|
||||
import PrivacyEdit from './PrivacyEdit.svelte';
|
||||
|
||||
import { System } from '../../api/types';
|
||||
|
||||
export let user: System;
|
||||
let editMode = false;
|
||||
|
||||
let loading: boolean;
|
||||
</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:loading bind:user={user} bind:editMode/>
|
||||
{:else}
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<b>Description:</b> {user.privacy.description_privacy}
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<b>Member list:</b> {user.privacy.member_list_privacy}
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<b>Group list:</b> {user.privacy.group_list_privacy}
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<b>Current front:</b> {user.privacy.front_privacy}
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<b>Front history:</b> {user.privacy.front_history_privacy}
|
||||
</Col>
|
||||
</Row>
|
||||
<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
|
||||
<Button style="flex: 0" color="secondary" on:click={() => window.location.href = window.location.origin+"/dash/bulk-member-privacy"}>Bulk member privacy</Button>
|
||||
<Button style="flex: 0" color="secondary" on:click={() => window.location.href = window.location.origin+"/dash/bulk-group-privacy"}>Bulk group privacy</Button>
|
||||
{/if}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<script lang="ts">
|
||||
import { Input, Row, Col, Button, Label, Alert } from 'sveltestrap';
|
||||
import { currentUser } from '../../stores';
|
||||
|
||||
import { System } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
export let loading = false;
|
||||
export let user: System;
|
||||
export let editMode: boolean;
|
||||
|
||||
let err: string;
|
||||
|
||||
let input: System = {privacy: user.privacy};
|
||||
|
||||
async function submit() {
|
||||
let data = input;
|
||||
err = null;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
let res = await api().systems("@me").patch({data});
|
||||
user = res;
|
||||
currentUser.update(() => res);
|
||||
editMode = false;
|
||||
loading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
err = err;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
let allPrivacy: string;
|
||||
|
||||
$: { changePrivacy(allPrivacy)}
|
||||
|
||||
function changePrivacy(value: string) {
|
||||
if (value) {
|
||||
input.privacy.description_privacy = value;
|
||||
input.privacy.member_list_privacy = value;
|
||||
input.privacy.group_list_privacy = value;
|
||||
input.privacy.front_privacy = value;
|
||||
input.privacy.front_history_privacy = value;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{/if}
|
||||
<Label><b>Set all to:</b></Label>
|
||||
<Input type="select" bind:value={allPrivacy}>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
<hr />
|
||||
<Row>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Description:</Label>
|
||||
<Input type="select" bind:value={input.privacy.description_privacy}>
|
||||
<option default={user.privacy.description_privacy === "public"}>public</option>
|
||||
<option default={user.privacy.description_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Member list:</Label>
|
||||
<Input type="select" bind:value={input.privacy.member_list_privacy}>
|
||||
<option default={user.privacy.member_list_privacy === "public"}>public</option>
|
||||
<option default={user.privacy.member_list_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Group list:</Label>
|
||||
<Input type="select" bind:value={input.privacy.group_list_privacy}>
|
||||
<option default={user.privacy.group_list_privacy === "public"}>public</option>
|
||||
<option default={user.privacy.group_list_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Current front:</Label>
|
||||
<Input type="select" bind:value={input.privacy.front_privacy}>
|
||||
<option default={user.privacy.front_privacy === "public"}>public</option>
|
||||
<option default={user.privacy.front_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-3">
|
||||
<Label>Front history:</Label>
|
||||
<Input type="select" bind:value={input.privacy.front_history_privacy}>
|
||||
<option default={user.privacy.front_history_privacy === "public"}>public</option>
|
||||
<option default={user.privacy.front_history_privacy === "private"}>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
</Row>
|
||||
<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import * as Sentry from "@sentry/browser";
|
||||
import { Integrations } from "@sentry/tracing";
|
||||
|
||||
Sentry.init({
|
||||
dsn: "https://58109fec589f4c2bbfa190329acf679a@sentry.pluralkit.me/4",
|
||||
integrations: [new Integrations.BrowserTracing()],
|
||||
|
||||
enabled: !window.location.origin.includes("localhost"),
|
||||
debug: false,
|
||||
release: "dev",
|
||||
// Set tracesSampleRate to 1.0 to capture 100%
|
||||
// of transactions for performance monitoring.
|
||||
// We recommend adjusting this value in production
|
||||
tracesSampleRate: 1.0,
|
||||
});
|
||||
|
||||
import App from './App.svelte'
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById('app')
|
||||
})
|
||||
|
||||
export default app
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<script lang="ts">
|
||||
import { Container, Row, Col, Card, CardHeader, CardBody, CardTitle, Alert, Label, Input, Button, Spinner } from 'sveltestrap';
|
||||
import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
|
||||
|
||||
import api from '../api';
|
||||
import { GroupPrivacy, System } from '../api/types';
|
||||
const user: System = JSON.parse(localStorage.getItem("pk-user"));
|
||||
|
||||
// const capitalize = (str: string) => str[0].toUpperCase() + str.substr(1);
|
||||
|
||||
let loading = false;
|
||||
let err = "";
|
||||
let success = false;
|
||||
|
||||
// kinda hacked together from typescript's Required<T> type
|
||||
const privacy: { [P in keyof GroupPrivacy]-?: string; } = {
|
||||
description_privacy: "no change",
|
||||
name_privacy: "no change",
|
||||
list_privacy: "no change",
|
||||
icon_privacy: "no change",
|
||||
visibility: "no change",
|
||||
metadata_privacy: "no change",
|
||||
};
|
||||
|
||||
const privacyNames: { [P in keyof GroupPrivacy]-?: string; } = {
|
||||
name_privacy: "Name",
|
||||
description_privacy: "Description",
|
||||
icon_privacy: "Icon",
|
||||
list_privacy: "Member list",
|
||||
metadata_privacy: "Metadata",
|
||||
visibility: "Visbility",
|
||||
};
|
||||
|
||||
async function submit() {
|
||||
success = false;
|
||||
loading = true;
|
||||
const dataArray = Object.entries(privacy).filter(([, value]) => value === "no change" ? false : true);
|
||||
const data = Object.fromEntries(dataArray);
|
||||
try {
|
||||
await api().private.bulk_privacy.group.post({ data });
|
||||
success = true;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
}
|
||||
loading = false;
|
||||
}
|
||||
|
||||
function changeAll(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
Object.keys(privacy).forEach(x => privacy[x] = target.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaUserLock />
|
||||
</div> Bulk group privacy
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody style="border-left: 4px solid #{user.color}">
|
||||
{#if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{/if}
|
||||
{#if success}
|
||||
<Alert color="success">Group privacy updated!</Alert>
|
||||
{/if}
|
||||
<Label><b>Set all to:</b></Label>
|
||||
<Input type="select" on:change={(e) => changeAll(e)}>
|
||||
<option>no change</option>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
<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]}>
|
||||
<option default>no change</option>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
{/each}
|
||||
</Row>
|
||||
|
||||
<Button color="primary" on:click={submit} bind:disabled={loading}>
|
||||
{#if loading}
|
||||
<Spinner />
|
||||
{:else}
|
||||
Submit
|
||||
{/if}
|
||||
</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<script lang="ts">
|
||||
import { Container, Row, Col, Card, CardHeader, CardBody, CardTitle, Label, Input, Button, Spinner, Alert } from 'sveltestrap';
|
||||
import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte';
|
||||
|
||||
import api from '../api';
|
||||
import { MemberPrivacy, System } from '../api/types';
|
||||
import Member from './Member.svelte';
|
||||
const user: System = JSON.parse(localStorage.getItem("pk-user"));
|
||||
|
||||
// const capitalize = (str: string) => str[0].toUpperCase() + str.substr(1);
|
||||
|
||||
let loading = false;
|
||||
let err = "";
|
||||
let success = false;
|
||||
|
||||
const privacy: { [P in keyof MemberPrivacy]-?: string; } = {
|
||||
description_privacy: "no change",
|
||||
name_privacy: "no change",
|
||||
avatar_privacy: "no change",
|
||||
birthday_privacy: "no change",
|
||||
pronoun_privacy: "no change",
|
||||
visibility: "no change",
|
||||
metadata_privacy: "no change",
|
||||
};
|
||||
|
||||
const privacyNames: { [P in keyof MemberPrivacy]-?: string; } = {
|
||||
avatar_privacy: "Avatar",
|
||||
birthday_privacy: "Birthday",
|
||||
description_privacy: "Description",
|
||||
metadata_privacy: "Metadata",
|
||||
name_privacy: "Name",
|
||||
pronoun_privacy: "Pronouns",
|
||||
visibility: "Visibility",
|
||||
};
|
||||
|
||||
async function submit() {
|
||||
success = false;
|
||||
loading = true;
|
||||
const dataArray = Object.entries(privacy).filter(([, value]) => value === "no change" ? false : true);
|
||||
const data = Object.fromEntries(dataArray);
|
||||
try {
|
||||
await api().private.bulk_privacy.member.post({ data });
|
||||
success = true;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
}
|
||||
loading = false;
|
||||
}
|
||||
|
||||
function changeAll(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
Object.keys(privacy).forEach(x => privacy[x] = target.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaUserLock />
|
||||
</div> Bulk member privacy
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody style="border-left: 4px solid #{user.color}">
|
||||
{#if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{/if}
|
||||
{#if success}
|
||||
<Alert color="success">Member privacy updated!</Alert>
|
||||
{/if}
|
||||
<Label><b>Set all to:</b></Label>
|
||||
<Input type="select" on:change={(e) => changeAll(e)}>
|
||||
<option>no change</option>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
<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]}>
|
||||
<option default>no change</option>
|
||||
<option>public</option>
|
||||
<option>private</option>
|
||||
</Input>
|
||||
</Col>
|
||||
{/each}
|
||||
</Row>
|
||||
|
||||
<Button color="primary" on:click={submit} bind:disabled={loading}>
|
||||
{#if loading}
|
||||
<Spinner />
|
||||
{:else}
|
||||
Submit
|
||||
{/if}
|
||||
</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<script lang="ts">
|
||||
import { Container, Col, Row, TabContent, TabPane } from 'sveltestrap';
|
||||
import { navigate, useLocation } from "svelte-navigator";
|
||||
import { currentUser, loggedIn } from '../stores';
|
||||
|
||||
import SystemMain from '../lib/system/Main.svelte';
|
||||
import MemberList from '../lib/member/List.svelte';
|
||||
import GroupList from '../lib/group/List.svelte';
|
||||
|
||||
import { System } from '../api/types';
|
||||
import api from '../api';
|
||||
|
||||
let isPublic = false;
|
||||
|
||||
// get the state from the navigator so that we know which tab to start on
|
||||
let location = useLocation();
|
||||
let params = $location.search && new URLSearchParams($location.search);
|
||||
let tabPane: string;
|
||||
if (params) {
|
||||
tabPane = params.get("tab");
|
||||
}
|
||||
|
||||
if (!tabPane) {
|
||||
tabPane = "system";
|
||||
}
|
||||
|
||||
// subscribe to the cached user in the store
|
||||
let current;
|
||||
currentUser.subscribe(value => {
|
||||
current = value;
|
||||
});
|
||||
|
||||
// if there is no cached user, get the user from localstorage
|
||||
let user: System = current ?? JSON.parse(localStorage.getItem("pk-user"));
|
||||
// since the user in localstorage can be outdated, fetch the user from the api again
|
||||
if (!current) {
|
||||
login(localStorage.getItem("pk-token"));
|
||||
}
|
||||
|
||||
// if there's no user, and there's no token, assume the login failed and send us back to the homepage.
|
||||
if (!localStorage.getItem("pk-token") && !user) {
|
||||
navigate("/");
|
||||
}
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
|
||||
// just the login function
|
||||
async function login(token: string) {
|
||||
try {
|
||||
if (!token) {
|
||||
throw new Error("Token cannot be empty.")
|
||||
}
|
||||
const res: System = await api().systems("@me").get({ token });
|
||||
localStorage.setItem("pk-token", token);
|
||||
localStorage.setItem("pk-user", JSON.stringify(res));
|
||||
loggedIn.update(() => true);
|
||||
currentUser.update(() => res);
|
||||
user = res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
localStorage.removeItem("pk-token");
|
||||
localStorage.removeItem("pk-user");
|
||||
currentUser.update(() => null);
|
||||
navigate("/");
|
||||
}
|
||||
}
|
||||
|
||||
// some values that get passed from the member to the group components and vice versa
|
||||
let members = [];
|
||||
let groups = [];
|
||||
|
||||
</script>
|
||||
|
||||
<!-- display the banner if there's a banner set, and if the current settings allow for it-->
|
||||
{#if user && user.banner && ((settings && settings.appearance.banner_top) || !settings)}
|
||||
<div class="banner" style="background-image: url({user.banner})" />
|
||||
{/if}
|
||||
<Container>
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
<TabContent class="mt-3">
|
||||
<TabPane tabId="system" tab="System" active={tabPane === "system"}>
|
||||
<SystemMain bind:user={user} bind:isPublic />
|
||||
</TabPane>
|
||||
<TabPane tabId="members" tab="Members" active={tabPane === "members"}>
|
||||
<MemberList bind:groups={groups} bind:list={members} bind:isPublic />
|
||||
</TabPane>
|
||||
<TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
|
||||
<GroupList bind:members={members} bind:list={groups} bind:isPublic />
|
||||
</TabPane>
|
||||
</TabContent>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
||||
<svelte:head>
|
||||
<title>pk-webs | dash</title>
|
||||
</svelte:head>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<script lang="ts">
|
||||
import { Container, Row, Col } from 'sveltestrap';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import api from '../api';
|
||||
|
||||
let text = "Loading...";
|
||||
|
||||
onMount(async () =>
|
||||
{
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramkeys = [...params.keys()];
|
||||
if (paramkeys.includes("code"))
|
||||
{
|
||||
const res = await api().private.discord.callback.post({ data: { code: params.get("code"), redirect_domain: window.location.origin } });
|
||||
localStorage.setItem("pk-token", res.token);
|
||||
localStorage.setItem("pk-user", JSON.stringify(res.system));
|
||||
localStorage.setItem("pk-config", JSON.stringify(res.config));
|
||||
window.location.href = window.location.origin;
|
||||
}
|
||||
else
|
||||
{
|
||||
text = "Error: " + params.get("error_description");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
{text}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
<script lang="ts">
|
||||
import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, Accordion, AccordionItem, CardTitle } from "sveltestrap";
|
||||
import Body from '../lib/group/Body.svelte';
|
||||
import MemberBody from '../lib/member/Body.svelte';
|
||||
import { useParams, Link } from 'svelte-navigator';
|
||||
import { onMount } from 'svelte';
|
||||
import api from "../api";
|
||||
import { Member, Group } from "../api/types";
|
||||
import CardsHeader from "../lib/CardsHeader.svelte";
|
||||
import FaUsers from 'svelte-icons/fa/FaUsers.svelte';
|
||||
import FaList from 'svelte-icons/fa/FaList.svelte';
|
||||
import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte';
|
||||
import ListPagination from '../lib/ListPagination.svelte';
|
||||
import FaLock from 'svelte-icons/fa/FaLock.svelte'
|
||||
|
||||
let loading = true;
|
||||
let memberLoading = false;
|
||||
let params = useParams();
|
||||
let err = "";
|
||||
let memberErr = "";
|
||||
let group: Group;
|
||||
let members: Member[] = [];
|
||||
let systemMembers: Group[] = [];
|
||||
let isMainDash = false;
|
||||
let isDeleted = false;
|
||||
let notOwnSystem = false;
|
||||
|
||||
const isPage = true;
|
||||
export let isPublic = true;
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
|
||||
let currentPage = 1;
|
||||
let itemsPerPage = settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
|
||||
|
||||
$: indexOfLastItem = currentPage * itemsPerPage;
|
||||
$: indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
$: pageAmount = Math.ceil(members.length / itemsPerPage);
|
||||
|
||||
$: orderedMembers = members.sort((a, b) => a.name.localeCompare(b.name));
|
||||
$: slicedMembers = orderedMembers.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
onMount(() => {
|
||||
fetchGroup();
|
||||
});
|
||||
|
||||
async function fetchGroup() {
|
||||
try {
|
||||
group = await api().groups($params.id).get({auth: !isPublic});
|
||||
if (!isPublic && !group.privacy) {
|
||||
notOwnSystem = true;
|
||||
throw new Error("Group is not from own system.");
|
||||
}
|
||||
err = "";
|
||||
loading = false;
|
||||
memberLoading = true;
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
fetchMembers();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchMembers() {
|
||||
try {
|
||||
members = await api().groups($params.id).members().get({auth: !isPublic});
|
||||
group.members = members.map(function(member) {return member.uuid});
|
||||
if (!isPublic) {
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
systemMembers = await api().systems("@me").members.get({ auth: true });
|
||||
}
|
||||
memberErr = "";
|
||||
memberLoading = false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
memberErr = error.message;
|
||||
memberLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function updateMembers() {
|
||||
memberLoading = true;
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
fetchMembers();
|
||||
}
|
||||
|
||||
function updateDelete() {
|
||||
isDeleted = true;
|
||||
}
|
||||
|
||||
function updateMemberList(event: any) {
|
||||
members = members.map(member => member.id !== event.detail.id ? member : event.detail);
|
||||
systemMembers = systemMembers.map(member => member.id !== event.detail.id ? member : event.detail);
|
||||
}
|
||||
|
||||
function deleteMemberFromList(event: any) {
|
||||
members = members.filter(member => member.id !== event.detail);
|
||||
systemMembers = systemMembers.filter(member => member.id !== event.detail);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if settings && settings.appearance.color_background && !notOwnSystem}
|
||||
<div class="background" style="background-color: {group && `#${group.color}`}"></div>
|
||||
{/if}
|
||||
{#if group && group.banner && settings && settings.appearance.banner_top && !notOwnSystem}
|
||||
<div class="banner" style="background-image: url({group.banner})" />
|
||||
{/if}
|
||||
<Container>
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
{#if isDeleted}
|
||||
<Alert color="success">Group has been successfully deleted. <Link to="/dash">Return to dash</Link></Alert>
|
||||
{:else}
|
||||
{#if isPublic}
|
||||
<Alert color="info">You are currently <b>viewing</b> a group.</Alert>
|
||||
{/if}
|
||||
{#if notOwnSystem}
|
||||
<Alert color="danger">This group does not belong to your system, did you mean to look up <Link to={`/profile/g/${group.id}`}>it's public page</Link>?</Alert>
|
||||
{:else if err}
|
||||
<Alert color="danger">{@html err}</Alert>
|
||||
{:else if loading}
|
||||
<Spinner/>
|
||||
{:else if group && group.id}
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardsHeader bind:item={group}>
|
||||
<FaUsers slot="icon" />
|
||||
</CardsHeader>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Body on:deletion={updateDelete} on:updateMembers={updateMembers} bind:members={systemMembers} bind:group={group} isPage={isPage} isPublic={isPublic}/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{/if}
|
||||
{#if memberLoading}
|
||||
<Alert color="primary"><Spinner size="sm" /> Fetching members...</Alert>
|
||||
{:else if memberErr}
|
||||
<Alert color="danger">{memberErr}</Alert>
|
||||
{:else if members && members.length > 0}
|
||||
<Card class="mb-2">
|
||||
<CardHeader>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaList />
|
||||
</div> Group list
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<ListPagination bind:currentPage bind:pageAmount />
|
||||
{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
|
||||
<Accordion class="mb-3" stayOpen>
|
||||
{#each slicedMembers as member, index (member.id)}
|
||||
{#if (!isPublic && member.privacy.visibility === "public") || isPublic}
|
||||
<AccordionItem>
|
||||
<CardsHeader bind:item={member} slot="header">
|
||||
<FaUserCircle slot="icon" />
|
||||
</CardsHeader>
|
||||
<MemberBody on:update={updateMemberList} isMainDash={isMainDash} on:deletion={deleteMemberFromList} bind:member bind:isPublic={isPublic}/>
|
||||
</AccordionItem>
|
||||
{:else}
|
||||
<AccordionItem>
|
||||
<CardsHeader bind:item={member} slot="header">
|
||||
<FaLock slot="icon" />
|
||||
</CardsHeader>
|
||||
<MemberBody on:update={updateMemberList} isMainDash={isMainDash} on:deletion={deleteMemberFromList} bind:member bind:isPublic={isPublic}/>
|
||||
</AccordionItem>
|
||||
{/if}
|
||||
{/each}
|
||||
</Accordion>
|
||||
{:else if settings.accessibility.expandedcards}
|
||||
{#each slicedMembers as member, index (member.id)}
|
||||
{#if (!isPublic && member.privacy.visibility === "public") || isPublic}
|
||||
<Card class="mb-3">
|
||||
<CardHeader>
|
||||
<CardsHeader bind:item={member}>
|
||||
<FaUserCircle slot="icon" />
|
||||
</CardsHeader>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<MemberBody on:update={updateMemberList} isMainDash={isMainDash} on:deletion={deleteMemberFromList} bind:member bind:isPublic={isPublic}/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{:else}
|
||||
<Card class="mb-3">
|
||||
<CardHeader>
|
||||
<CardsHeader bind:item={member}>
|
||||
<FaLock slot="icon" />
|
||||
</CardsHeader>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<MemberBody on:update={updateMemberList} isMainDash={isMainDash} on:deletion={deleteMemberFromList} bind:member bind:isPublic={isPublic}/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="my-3">
|
||||
{#each slicedMembers as member, index (member.id)}
|
||||
{#if (!isPublic && member.privacy.visibility === "public") || isPublic}
|
||||
<Card>
|
||||
<Link class="accordion-button collapsed" style="text-decoration: none;" to={!isPublic ? `/dash/m/${member.id}` : `/profile/m/${member.id}`}>
|
||||
<CardsHeader bind:item={member}>
|
||||
<FaUserCircle slot="icon" />
|
||||
</CardsHeader>
|
||||
</Link>
|
||||
</Card>
|
||||
{:else}
|
||||
<Card>
|
||||
<Link class="accordion-button collapsed" style="text-decoration: none;" to={!isPublic ? `/dash/m/${member.id}` : `/profile/m/${member.id}`}>
|
||||
<CardsHeader bind:item={member}>
|
||||
<FaLock slot="icon" />
|
||||
</CardsHeader>
|
||||
</Link>
|
||||
</Card>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<ListPagination bind:currentPage bind:pageAmount />
|
||||
{/if}
|
||||
{/if}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
||||
<style>
|
||||
.background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 100%;
|
||||
z-index: -30;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { Container, Card, CardHeader, CardBody, CardTitle, Col, Row, Spinner, Input, Button, Label, Alert } from 'sveltestrap';
|
||||
import FaLockOpen from 'svelte-icons/fa/FaLockOpen.svelte';
|
||||
import { loggedIn, currentUser } from '../stores';
|
||||
import { Link } from 'svelte-navigator';
|
||||
import twemoji from 'twemoji';
|
||||
import { toHTML } from 'discord-markdown';
|
||||
|
||||
import { System } from '../api/types';
|
||||
import api from '../api';
|
||||
|
||||
let loading = false;
|
||||
let err: string;
|
||||
let token: string;
|
||||
|
||||
let isLoggedIn: boolean;
|
||||
let user;
|
||||
|
||||
loggedIn.subscribe(value => {
|
||||
isLoggedIn = value;
|
||||
});
|
||||
|
||||
currentUser.subscribe(value => {
|
||||
user = value;
|
||||
})
|
||||
|
||||
onMount(() => {
|
||||
if (localStorage.getItem("pk-token")) {
|
||||
login(localStorage.getItem("pk-token"));
|
||||
}
|
||||
});
|
||||
|
||||
async function login(token: string) {
|
||||
loading = true;
|
||||
try {
|
||||
if (!token) {
|
||||
throw new Error("Token cannot be empty.")
|
||||
}
|
||||
const res: System = await api().systems("@me").get({ token });
|
||||
localStorage.setItem("pk-token", token);
|
||||
localStorage.setItem("pk-user", JSON.stringify(res));
|
||||
const settings = await api().systems("@me").settings.get({ token });
|
||||
localStorage.setItem("pk-config", JSON.stringify(settings));
|
||||
err = null;
|
||||
loggedIn.update(() => true);
|
||||
currentUser.update(() => res);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
localStorage.removeItem("pk-token");
|
||||
localStorage.removeItem("pk-user");
|
||||
currentUser.update(() => null);
|
||||
err = error.message;
|
||||
}
|
||||
loading = false;
|
||||
}
|
||||
|
||||
|
||||
function logout() {
|
||||
token = null;
|
||||
localStorage.removeItem("pk-token");
|
||||
localStorage.removeItem("pk-user");
|
||||
loggedIn.update(() => false);
|
||||
currentUser.update(() => null);
|
||||
}
|
||||
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
let welcomeElement: any;
|
||||
let htmlName: string;
|
||||
$: if (user && user.name) {
|
||||
htmlName = toHTML(user.name);
|
||||
}
|
||||
$: if (settings && settings.appearance.twemoji) {
|
||||
if (welcomeElement) twemoji.parse(welcomeElement);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
{#if err}
|
||||
<Alert color="danger" >{err}</Alert>
|
||||
{/if}
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaLockOpen />
|
||||
</div>Log in {#if loading} <div style="float: right"><Spinner color="primary" /></div> {/if}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{#if loading}
|
||||
verifying login...
|
||||
{:else if isLoggedIn}
|
||||
{#if user && user.name}
|
||||
<p bind:this={welcomeElement}>Welcome, <b>{@html htmlName}</b>!</p>
|
||||
{:else}
|
||||
<p>Welcome!</p>
|
||||
{/if}
|
||||
<Link to="/dash"><Button style="float: left;" color='primary'>Go to dash</Button></Link><Button style="float: right;" color='danger' on:click={logout}>Log out</Button>
|
||||
{:else}
|
||||
<Row>
|
||||
<Label>Enter your token here. You can get this by using <b>pk;token</b></Label>
|
||||
<Col xs={12} md={10}>
|
||||
<Input class="mb-2 mb-md-0" type="text" bind:value={token}/>
|
||||
</Col>
|
||||
<Col xs={12} md={2}>
|
||||
<Button style="width: 100%" color="primary" on:click={() => login(token)}>Submit</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<br>
|
||||
<Row>
|
||||
<Label>Or, you can</Label>
|
||||
<Col xs={12}>
|
||||
<Button color="dark" on:click={() => window.location.href = `https://discord.com/api/oauth2/authorize?client_id=${localStorage.isBeta ? "912009351160541225" : "466378653216014359"}&redirect_uri=${encodeURIComponent(window.location.origin + "/login/discord")}&response_type=code&scope=guilds%20identify`}>
|
||||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.54 0c1.356 0 2.46 1.104 2.46 2.472v21.528l-2.58-2.28-1.452-1.344-1.536-1.428.636 2.22h-13.608c-1.356 0-2.46-1.104-2.46-2.472v-16.224c0-1.368 1.104-2.472 2.46-2.472h16.08zm-4.632 15.672c2.652-.084 3.672-1.824 3.672-1.824 0-3.864-1.728-6.996-1.728-6.996-1.728-1.296-3.372-1.26-3.372-1.26l-.168.192c2.04.624 2.988 1.524 2.988 1.524-1.248-.684-2.472-1.02-3.612-1.152-.864-.096-1.692-.072-2.424.024l-.204.024c-.42.036-1.44.192-2.724.756-.444.204-.708.348-.708.348s.996-.948 3.156-1.572l-.12-.144s-1.644-.036-3.372 1.26c0 0-1.728 3.132-1.728 6.996 0 0 1.008 1.74 3.66 1.824 0 0 .444-.54.804-.996-1.524-.456-2.1-1.416-2.1-1.416l.336.204.048.036.047.027.014.006.047.027c.3.168.6.3.876.408.492.192 1.08.384 1.764.516.9.168 1.956.228 3.108.012.564-.096 1.14-.264 1.74-.516.42-.156.888-.384 1.38-.708 0 0-.6.984-2.172 1.428.36.456.792.972.792.972zm-5.58-5.604c-.684 0-1.224.6-1.224 1.332 0 .732.552 1.332 1.224 1.332.684 0 1.224-.6 1.224-1.332.012-.732-.54-1.332-1.224-1.332zm4.38 0c-.684 0-1.224.6-1.224 1.332 0 .732.552 1.332 1.224 1.332.684 0 1.224-.6 1.224-1.332 0-.732-.54-1.332-1.224-1.332z"/>
|
||||
</svg>
|
||||
Login with Discord
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
{/if}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{#if isLoggedIn}
|
||||
<Card class="mb-4">
|
||||
<CardBody>
|
||||
Some cool stuff will go here.
|
||||
</CardBody>
|
||||
</Card>
|
||||
{/if}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
<script lang="ts">
|
||||
import { Container, Row, Col, Alert, Spinner, Card, CardHeader, CardBody, Accordion, AccordionItem, CardTitle } from "sveltestrap";
|
||||
import Body from '../lib/member/Body.svelte';
|
||||
import GroupBody from '../lib/group/Body.svelte';
|
||||
import { useParams, Link } 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'
|
||||
import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
|
||||
import FaLock from 'svelte-icons/fa/FaLock.svelte'
|
||||
import FaList from 'svelte-icons/fa/FaList.svelte'
|
||||
import ListPagination from '../lib/ListPagination.svelte';
|
||||
|
||||
let loading = true;
|
||||
let groupLoading = false;
|
||||
let params = useParams();
|
||||
let err = "";
|
||||
let groupErr = "";
|
||||
let member: Member;
|
||||
let groups: Group[] = [];
|
||||
let systemGroups: Group[] = [];
|
||||
let systemMembers: Member[] = [];
|
||||
let isMainDash = false;
|
||||
let isDeleted = false;
|
||||
let notOwnSystem = false;
|
||||
|
||||
const isPage = true;
|
||||
export let isPublic = true;
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
|
||||
let currentPage = 1;
|
||||
let itemsPerPage = settings && settings.accessibility && settings.accessibility.expandedcards ? 5 : 10;
|
||||
|
||||
$: indexOfLastItem = currentPage * itemsPerPage;
|
||||
$: indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
$: pageAmount = Math.ceil(groups.length / itemsPerPage);
|
||||
|
||||
$: orderedGroups = groups.sort((a, b) => a.name.localeCompare(b.name));
|
||||
$: slicedGroups = orderedGroups.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
onMount(() => {
|
||||
fetchMember();
|
||||
});
|
||||
|
||||
async function fetchMember() {
|
||||
try {
|
||||
member = await api().members($params.id).get({auth: !isPublic});
|
||||
if (!isPublic && !member.privacy) {
|
||||
notOwnSystem = true;
|
||||
throw new Error("Member is not from own system.");
|
||||
}
|
||||
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, query: { with_members: !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;
|
||||
// we can't use with_members from a group list from a member endpoint yet, but I'm leaving this in in case we do
|
||||
// (this is needed for editing a group member list from the member page)
|
||||
/* if (!isPublic) {
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
systemMembers = await api().systems("@me").members.get({auth: true});
|
||||
} */
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
groupErr = error.message;
|
||||
groupLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function updateGroups() {
|
||||
groupLoading = true;
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
fetchGroups();
|
||||
}
|
||||
|
||||
function updateDelete() {
|
||||
isDeleted = true;
|
||||
}
|
||||
|
||||
function updateGroupList(event: any) {
|
||||
groups = groups.map(group => group.id !== event.detail.id ? group : event.detail);
|
||||
systemGroups = systemGroups.map(group => group.id !== event.detail.id ? group : event.detail);
|
||||
}
|
||||
|
||||
function deleteGroupFromList(event: any) {
|
||||
groups = groups.filter(group => group.id !== event.detail);
|
||||
systemGroups = systemGroups.filter(group => group.id !== event.detail);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if settings && settings.appearance.color_background && !notOwnSystem}
|
||||
<div class="background" style="background-color: {member && `#${member.color}`}"></div>
|
||||
{/if}
|
||||
{#if member && member.banner && settings && settings.appearance.banner_top && !notOwnSystem}
|
||||
<div class="banner" style="background-image: url({member.banner})" />
|
||||
{/if}
|
||||
<Container>
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
{#if isDeleted}
|
||||
<Alert color="success">Member has been successfully deleted. <Link to="/dash">Return to dash</Link></Alert>
|
||||
{:else}
|
||||
{#if isPublic}
|
||||
<Alert color="info">You are currently <b>viewing</b> a member.</Alert>
|
||||
{/if}
|
||||
{#if notOwnSystem}
|
||||
<Alert color="danger">This member does not belong to your system, did you mean to look up <Link to={`/profile/m/${member.id}`}>their public page</Link>?</Alert>
|
||||
{:else if err}
|
||||
<Alert color="danger">{@html err}</Alert>
|
||||
{:else if loading}
|
||||
<Spinner/>
|
||||
{:else if member && member.id}
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardsHeader bind:item={member}>
|
||||
<FaAddressCard slot="icon" />
|
||||
</CardsHeader>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Body on:deletion={updateDelete} on:updateGroups={updateGroups} bind:groups={systemGroups} bind:member={member} isPage={isPage} isPublic={isPublic}/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{/if}
|
||||
{#if groupLoading}
|
||||
<Alert color="primary"><Spinner size="sm" /> Fetching groups...</Alert>
|
||||
{:else if groupErr}
|
||||
<Alert color="danger">{groupErr}</Alert>
|
||||
{:else if groups && groups.length > 0}
|
||||
<Card class="mb-2">
|
||||
<CardHeader>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaList />
|
||||
</div> Member groups
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<ListPagination bind:currentPage bind:pageAmount />
|
||||
{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
|
||||
<Accordion class="mb-3" stayOpen>
|
||||
{#each slicedGroups as group, index (group.id)}
|
||||
{#if (!isPublic && group.privacy.visibility === "public") || isPublic}
|
||||
<AccordionItem>
|
||||
<CardsHeader bind:item={group} slot="header">
|
||||
<FaUsers slot="icon" />
|
||||
</CardsHeader>
|
||||
<GroupBody bind:members={systemMembers} on:update={updateGroupList} isMainDash={isMainDash} on:deletion={deleteGroupFromList} bind:group bind:isPublic={isPublic}/>
|
||||
</AccordionItem>
|
||||
{:else}
|
||||
<AccordionItem>
|
||||
<CardsHeader bind:item={group} slot="header">
|
||||
<FaLock slot="icon" />
|
||||
</CardsHeader>
|
||||
<GroupBody bind:members={systemMembers} on:update={updateGroupList} isMainDash={isMainDash} on:deletion={deleteGroupFromList} bind:group bind:isPublic={isPublic}/>
|
||||
</AccordionItem>
|
||||
{/if}
|
||||
{/each}
|
||||
</Accordion>
|
||||
{:else if settings.accessibility.expandedcards}
|
||||
{#each slicedGroups as group, index (group.id)}
|
||||
{#if (!isPublic && group.privacy.visibility === "public") || isPublic}
|
||||
<Card class="mb-3">
|
||||
<CardHeader>
|
||||
<CardsHeader bind:item={group} >
|
||||
<FaUsers slot="icon" />
|
||||
</CardsHeader>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<GroupBody bind:members={systemMembers} on:update={updateGroupList} isMainDash={isMainDash} on:deletion={deleteGroupFromList} bind:group bind:isPublic={isPublic}/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{:else}
|
||||
<Card class="mb-3">
|
||||
<CardHeader>
|
||||
<CardsHeader bind:item={group} >
|
||||
<FaLock slot="icon" />
|
||||
</CardsHeader>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<GroupBody bind:members={systemMembers} on:update={updateGroupList} isMainDash={isMainDash} on:deletion={deleteGroupFromList} bind:group bind:isPublic={isPublic}/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="my-3">
|
||||
{#each slicedGroups as group, index (group.id)}
|
||||
{#if (!isPublic && group.privacy.visibility === "public") || isPublic}
|
||||
<Card>
|
||||
<Link class="accordion-button collapsed" style="text-decoration: none;" to={!isPublic ? `/dash/g/${group.id}` : `/profile/g/${group.id}`}>
|
||||
<CardsHeader bind:item={group}>
|
||||
<FaUsers slot="icon" />
|
||||
</CardsHeader>
|
||||
</Link>
|
||||
</Card>
|
||||
{:else}
|
||||
<Card>
|
||||
<Link class="accordion-button collapsed" style="text-decoration: none;" to={!isPublic ? `/dash/g/${group.id}` : `/profile/g/${group.id}`}>
|
||||
<CardsHeader bind:item={group}>
|
||||
<FaUsers slot="icon" />
|
||||
</CardsHeader>
|
||||
</Link>
|
||||
</Card>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<ListPagination bind:currentPage bind:pageAmount />
|
||||
{/if}
|
||||
{/if}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
||||
<style>
|
||||
.background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 100%;
|
||||
z-index: -30;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<script lang="ts">
|
||||
import { Container, Card, CardHeader, CardBody, Row, Col, CardTitle } from 'sveltestrap';
|
||||
import { Link } from 'svelte-navigator';
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">404. Page not found</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
Looks like this page doesn't exist. <Link to="/">Go home</Link>?
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<script lang="ts">
|
||||
import { Container, Row, Col, Card, CardHeader, CardTitle, CardBody, Input, Button } from 'sveltestrap';
|
||||
import { Link, navigate } from 'svelte-navigator';
|
||||
import FaRocket from 'svelte-icons/fa/FaRocket.svelte';
|
||||
import FaStar from 'svelte-icons/fa/FaStar.svelte'
|
||||
import FaMoon from 'svelte-icons/fa/FaMoon.svelte'
|
||||
|
||||
let sysInput: string = "";
|
||||
let memberInput: string = "";
|
||||
let groupInput: string = "";
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={12}>
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaRocket />
|
||||
</div>System Profile
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
Submit a <b>system ID</b> to view that system's profile.
|
||||
<Row>
|
||||
<Col xs={12} lg={9} class="my-2">
|
||||
<Input on:keyup={(event) => {if (event.key === "Enter" && sysInput !== "") navigate(`/profile/s/${sysInput.toLowerCase().trim()}`)}} bind:value={sysInput} />
|
||||
</Col>
|
||||
<Col xs={12} lg={3} class="my-2 d-flex">
|
||||
{#if sysInput !== ""}
|
||||
<Link style="text-decoration: none; flex: 1 0 auto" to="/profile/s/{sysInput.toLowerCase().trim()}"><Button class="w-100" color="primary">View</Button></Link>
|
||||
{:else}
|
||||
<Button class="w-100" disabled color="primary">View</Button>
|
||||
{/if}
|
||||
</Col>
|
||||
</Row>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaStar />
|
||||
</div>Member Card
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
Submit a <b>member ID</b> to view that member's profile.
|
||||
<Row>
|
||||
<Col xs={12} lg={9} class="my-2">
|
||||
<Input on:keyup={(event) => {if (event.key === "Enter" && memberInput !== "") navigate(`/profile/m/${memberInput.toLowerCase().trim()}`)}} bind:value={memberInput} />
|
||||
</Col>
|
||||
<Col xs={12} lg={3} class="my-2 d-flex">
|
||||
{#if memberInput !== ""}
|
||||
<Link style="text-decoration: none; flex: 1 0 auto" to="/profile/m/{memberInput.toLowerCase().trim()}"><Button class="w-100" color="primary">View</Button></Link>
|
||||
{:else}
|
||||
<Button class="w-100" disabled color="primary">View</Button>
|
||||
{/if}
|
||||
</Col>
|
||||
</Row>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaMoon />
|
||||
</div>Group Card
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
Submit a <b>group ID</b> to view that group's profile.
|
||||
<Row>
|
||||
<Col xs={12} lg={9} class="my-2">
|
||||
<Input on:keyup={(event) => {if (event.key === "Enter" && groupInput !== "") navigate(`/profile/g/${groupInput.toLowerCase().trim()}`)}} bind:value={groupInput} />
|
||||
</Col>
|
||||
<Col xs={12} lg={3} class="my-2 d-flex">
|
||||
{#if groupInput !== ""}
|
||||
<Link style="text-decoration: none; flex: 1 0 auto" to="/profile/g/{groupInput.toLowerCase().trim()}"><Button class="w-100" color="primary">View</Button></Link>
|
||||
{:else}
|
||||
<Button class="w-100" disabled color="primary">View</Button>
|
||||
{/if}
|
||||
</Col>
|
||||
</Row>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<script lang="ts">
|
||||
import { Card, CardHeader, CardBody, Container, Row, Col, CardTitle, Tooltip, Button } from 'sveltestrap';
|
||||
import Toggle from 'svelte-toggle';
|
||||
import autosize from 'svelte-autosize';
|
||||
import FaCogs from 'svelte-icons/fa/FaCogs.svelte'
|
||||
import { Config } from '../api/types';
|
||||
import api from '../api';
|
||||
|
||||
let savedSettings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
let apiConfig: Config = JSON.parse(localStorage.getItem("pk-config"));
|
||||
|
||||
let settings = {
|
||||
appearance: {
|
||||
banner_top: false,
|
||||
banner_bottom: true,
|
||||
gradient_background: false,
|
||||
color_background: false,
|
||||
twemoji: false
|
||||
},
|
||||
accessibility: {
|
||||
opendyslexic: false,
|
||||
pagelinks: false,
|
||||
expandedcards: false
|
||||
}
|
||||
};
|
||||
|
||||
if (savedSettings) {
|
||||
settings = {...settings, ...savedSettings}
|
||||
};
|
||||
|
||||
let descriptions = apiConfig.description_templates;
|
||||
|
||||
async function saveDescriptionTemplates() {
|
||||
const res = await api().systems("@me").settings.patch({ data: { description_templates: descriptions } });
|
||||
localStorage.setItem("pk-config", JSON.stringify(res));
|
||||
}
|
||||
|
||||
function toggleOpenDyslexic() {
|
||||
if (settings.accessibility.opendyslexic) document.getElementById("app").classList.add("dyslexic");
|
||||
else document.getElementById("app").classList.remove("dyslexic");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaCogs />
|
||||
</div>Personal settings
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>These settings are saved in your localstorage. This means that you have to reapply these every time you visit in a different browser, or clear your browser's cookies.</p>
|
||||
<h4>Appearance</h4>
|
||||
<hr/>
|
||||
<Row class="mb-3">
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<span id="s-bannertop">Show banners in the background?</span> <Toggle hideLabel style="display: inline" label="Remove banner from background" toggled={settings.appearance.banner_top} on:toggle={() => {settings.appearance.banner_top = !settings.appearance.banner_top; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
|
||||
<Tooltip target="s-bannertop" placement="bottom">If enabled, shows banners from the top of the system, member and group pages.</Tooltip>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<span id="s-bannerbottom">Show banners at the bottom of cards?</span> <Toggle hideLabel style="display: inline" label="Remove banner from bottom" toggled={settings.appearance.banner_bottom} on:toggle={() => {settings.appearance.banner_bottom = !settings.appearance.banner_bottom; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
|
||||
<Tooltip target="s-bannerbottom" placement="bottom">If enabled, shows banners at the bottom of the system, member and group cards.</Tooltip>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<span id="s-twemoji">Use twemoji?</span> <Toggle hideLabel style="display: inline" label="Convert to twemoji" toggled={settings.appearance.twemoji} on:toggle={() => {settings.appearance.twemoji = !settings.appearance.twemoji; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
|
||||
<Tooltip target="s-twemoji" placement="bottom">If enabled, converts all emojis into twemoji.</Tooltip>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<span id="s-colorbackground">Colored background?</span> <Toggle hideLabel style="display: inline" label="Member color as background" toggled={settings.appearance.color_background} on:toggle={() => {settings.appearance.color_background = !settings.appearance.color_background; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
|
||||
<Tooltip target="s-colorbackground" placement="bottom">If enabled, turns the background on member pages into the member's color.</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
<h4>Accessibility</h4>
|
||||
<hr/>
|
||||
<Row>
|
||||
<!-- <Col xs={12} lg={4} class="mb-2">
|
||||
<span id="s-opendyslexic">Use the opendyslexic font?</span> <Toggle hideLabel style="display: inline" label="Use the opendyslexic font" toggled={settings.accessibility.opendyslexic} on:toggle={() => {settings.accessibility.opendyslexic = !settings.accessibility.opendyslexic; localStorage.setItem("pk-settings", JSON.stringify(settings)); toggleOpenDyslexic();}}/>
|
||||
<Tooltip target="s-opendyslexic" placement="bottom">If enabled, uses the opendyslexic font as it's main font.</Tooltip>
|
||||
</Col> -->
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<span id="s-expandedcards">Expand cards by default?</span> <Toggle hideLabel style="display: inline" label="Expand cards by default" toggled={settings.accessibility.expandedcards} on:toggle={() => {settings.accessibility.expandedcards = !settings.accessibility.expandedcards; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
|
||||
<Tooltip target="s-expandedcards" placement="bottom">If enabled, lists will be expanded by default (overrides page links).</Tooltip>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<span id="s-pagelinks">Use page links instead of cards?</span> <Toggle hideLabel style="display: inline" label="Use page links" toggled={settings.accessibility.pagelinks} on:toggle={() => {settings.accessibility.pagelinks= !settings.accessibility.pagelinks; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
|
||||
<Tooltip target="s-pagelinks" placement="bottom">If enabled, the list items will not expand, but instead link to the corresponding page.</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
<Card class="mb-4">
|
||||
<CardHeader>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
<div class="icon d-inline-block">
|
||||
<FaCogs />
|
||||
</div>Templates
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<p>Templates allow you to quickly set up a member description with a specific layout. Put in the template in one of the below fields, and access it whenever you create or edit a member. You can set up to 3 templates.</p>
|
||||
<b>Template 1</b>
|
||||
<textarea class="form-control" bind:value={descriptions[0]} maxlength={1000} use:autosize placeholder={descriptions[0]}/>
|
||||
<br>
|
||||
<b>Template 2</b>
|
||||
<textarea class="form-control" bind:value={descriptions[1]} maxlength={1000} use:autosize placeholder={descriptions[1]}/>
|
||||
<br>
|
||||
<b>Template 3</b>
|
||||
<textarea class="form-control" bind:value={descriptions[2]} maxlength={1000} use:autosize placeholder={descriptions[2]}/>
|
||||
<br>
|
||||
<Button on:click={saveDescriptionTemplates}>Save</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
||||
<svelte:head>
|
||||
<title>pk-webs | settings</title>
|
||||
</svelte:head>
|
||||
|
||||
<style>
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<script lang="ts">
|
||||
import { Container, Col, Row, TabContent, TabPane, Alert, Spinner } from 'sveltestrap';
|
||||
import { useParams, useLocation } from "svelte-navigator";
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import SystemMain from '../../lib/system/Main.svelte';
|
||||
import MemberList from '../../lib/member/List.svelte';
|
||||
import GroupList from '../../lib/group/List.svelte';
|
||||
|
||||
import { System } from '../../api/types';
|
||||
import api from '../../api';
|
||||
|
||||
let user: System = {};
|
||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||
|
||||
let members = [];
|
||||
let groups = [];
|
||||
|
||||
let params = useParams();
|
||||
$: id = $params.id;
|
||||
|
||||
let location = useLocation();
|
||||
let urlParams = $location.search && new URLSearchParams($location.search);
|
||||
let tabPane: string;
|
||||
if (urlParams) {
|
||||
tabPane = urlParams.get("tab");
|
||||
}
|
||||
|
||||
if (!tabPane) {
|
||||
tabPane = "system";
|
||||
}
|
||||
|
||||
let err: string;
|
||||
|
||||
let title = "system"
|
||||
|
||||
onMount(() => {
|
||||
getSystem();
|
||||
})
|
||||
|
||||
async function getSystem() {
|
||||
try {
|
||||
let res: System = await api().systems(id).get();
|
||||
user = res;
|
||||
title = user.name ? user.name : "system";
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
err = error.message;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- display the banner if there's a banner set, and if the current settings allow for it-->
|
||||
{#if user && user.banner && ((settings && settings.appearance.banner_top) || !settings)}
|
||||
<div class="banner" style="background-image: url({user.banner})" />
|
||||
{/if}
|
||||
<Container>
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
{#if !user.id && !err}
|
||||
<div class="mx-auto text-center">
|
||||
<Spinner class="d-inline-block" />
|
||||
</div>
|
||||
{:else if err}
|
||||
<Alert color="danger">{err}</Alert>
|
||||
{:else}
|
||||
<Alert color="info">You are currently <b>viewing</b> a system.</Alert>
|
||||
<TabContent class="mt-3">
|
||||
<TabPane tabId="system" tab="System" active={tabPane === "system"}>
|
||||
<SystemMain bind:user isPublic={true} />
|
||||
</TabPane>
|
||||
<TabPane tabId="members" tab="Members" active={tabPane === "members"}>
|
||||
<MemberList bind:list={members} isPublic={true} />
|
||||
</TabPane>
|
||||
<TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
|
||||
<GroupList bind:members={members} bind:list={groups} isPublic={true}/>
|
||||
</TabPane>
|
||||
</TabContent>
|
||||
{/if}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
||||
<svelte:head>
|
||||
<title>pk-webs | {title}</title>
|
||||
</svelte:head>
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
<script lang="ts">
|
||||
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 api from '../api';
|
||||
|
||||
let hover = null;
|
||||
|
||||
let message = "Loading...";
|
||||
let shards = [];
|
||||
let clusters = {};
|
||||
let pingAverage = "";
|
||||
let currentCommitMsg = "";
|
||||
|
||||
let foundShard = {
|
||||
id: 1,
|
||||
status: 1,
|
||||
ping:"",
|
||||
disconnection_count:0,
|
||||
last_connection:0,
|
||||
last_heartbeat:0.
|
||||
};
|
||||
foundShard = null;
|
||||
|
||||
let findShardInput = "";
|
||||
let valid = false;
|
||||
|
||||
const get = async () => {
|
||||
const pkdata = await api().private.meta.get();
|
||||
let data = pkdata.shards.sort((x, y) => (x.id > y.id) ? 1 : -1);
|
||||
let pings = 0;
|
||||
data = data.map(shard => {
|
||||
pings += shard.ping;
|
||||
shard.last_connection = new Date(Number(shard.last_connection) * 1000).toUTCString().match(/([0-9][0-9]:[0-9][0-9]:[0-9][0-9])/)?.shift()
|
||||
shard.last_heartbeat = new Date(Number(shard.last_heartbeat) * 1000).toUTCString().match(/([0-9][0-9]:[0-9][0-9]:[0-9][0-9])/)?.shift()
|
||||
return shard;
|
||||
});
|
||||
|
||||
currentCommitMsg = `Current Git commit: <a href="https://github.com/xSke/PluralKit/commit/${pkdata.version}">${pkdata.version.slice(0,7)}</a>`;
|
||||
|
||||
if (data[0].cluster_id === 0) {
|
||||
let clusterData = {};
|
||||
data.forEach(shard => {
|
||||
if (clusterData[shard.cluster_id] === undefined) clusterData[shard.cluster_id] = [];
|
||||
clusterData[shard.cluster_id].push(shard);
|
||||
});
|
||||
clusters = clusterData;
|
||||
}
|
||||
|
||||
shards = data;
|
||||
pingAverage = Math.trunc(pings / shards.length).toString();
|
||||
|
||||
message = "";
|
||||
};
|
||||
|
||||
get();
|
||||
setTimeout(get, 30 * 1000);
|
||||
|
||||
// javascript wants everything to be BigInts
|
||||
const getShardID = (guild_id: string, num_shards: number) => guild_id == "" ? -1 : (BigInt(guild_id) >> BigInt(22)) % BigInt(num_shards);
|
||||
|
||||
let shardInfoMsg = "";
|
||||
|
||||
let shardInfoHandler = (_: Event) => {
|
||||
if (findShardInput == "" || !findShardInput) {
|
||||
valid = false;
|
||||
foundShard = null;
|
||||
shardInfoMsg = "";
|
||||
return;
|
||||
};
|
||||
var match = findShardInput.match(/https:\/\/[\w+]?discord[app]?.com\/channels\/(\d+)\/\d+\/\d+/);
|
||||
if (match != null) {
|
||||
console.log("match", match)
|
||||
foundShard = shards[Number(getShardID(match[1], shards.length))];
|
||||
valid = true;
|
||||
shardInfoMsg = "";
|
||||
return;
|
||||
}
|
||||
try {
|
||||
var shard = getShardID(findShardInput, shards.length);
|
||||
if (shard == -1) {
|
||||
valid = false;
|
||||
foundShard == null;
|
||||
shardInfoMsg = "Invalid server ID";
|
||||
return;
|
||||
}
|
||||
foundShard = shards[Number(shard)];
|
||||
valid = true;
|
||||
shardInfoMsg = "";
|
||||
} catch(e) {
|
||||
valid = false;
|
||||
shardInfoMsg = "Invalid server ID";
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<Container fluid>
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
<Card class="mb-4">
|
||||
<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>
|
||||
Average latency: { pingAverage }ms
|
||||
<br><br>
|
||||
All times in UTC. More statistics available at <a href="https://stats.pluralkit.me">https://stats.pluralkit.me</a>
|
||||
<br><br>
|
||||
<details>
|
||||
<summary><b>Find my shard</b></summary>
|
||||
<br>
|
||||
Enter a server ID or a message link to find the shard currently assigned to your server:
|
||||
<br>
|
||||
<input bind:value={findShardInput} on:input={shardInfoHandler} />
|
||||
<br><br>
|
||||
<span>{ shardInfoMsg }</span>
|
||||
{#if valid}
|
||||
<h3>Your shard is: Shard { foundShard.id }</h3>
|
||||
<br>
|
||||
<span>Status: <b>{ foundShard.status }</b></span><br>
|
||||
<span>Latency: { foundShard.ping }ms</span><br>
|
||||
<span>Disconnection count: { foundShard.disconnection_count }</span><br>
|
||||
<span>Last connection: { foundShard.last_connection }</span><br>
|
||||
<span>Last heartbeat: { foundShard.last_heartbeat }</span><br>
|
||||
{/if}
|
||||
</details>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{#if Object.keys(clusters).length == 0 && shards.length > 0}
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
<Card class="mb-4">
|
||||
<CardBody>
|
||||
<span>{ message }</span>
|
||||
{#each shards as shard}
|
||||
<ShardItem shard={shard} bind:hover={hover} />
|
||||
{/each}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{/if}
|
||||
{#each Object.keys(clusters) as key}
|
||||
<Row>
|
||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||
<Card class="mb-4">
|
||||
<CardBody>
|
||||
<CardTitle style="margin-top: 8px; outline: none;">
|
||||
Cluster {key}
|
||||
</CardTitle>
|
||||
<br>
|
||||
{#each clusters[key] as shard}
|
||||
<ShardItem shard={shard} bind:hover={hover} />
|
||||
{/each}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{/each}
|
||||
</Container>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { writable } from 'svelte/store';
|
||||
|
||||
export const loggedIn = writable(false);
|
||||
|
||||
/* export const user = writable({
|
||||
id: null,
|
||||
uuid: null,
|
||||
name: null,
|
||||
description: null,
|
||||
tag: null,
|
||||
avatar_url: null,
|
||||
banner: null,
|
||||
timezone: null,
|
||||
created: null,
|
||||
color: null,
|
||||
privacy: {
|
||||
description_privacy: null,
|
||||
member_list_privacy: null,
|
||||
front_privacy: null,
|
||||
front_history_privacy: null,
|
||||
group_list_privacy: null
|
||||
}
|
||||
}); */
|
||||
|
||||
export const currentUser = writable(null);
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 2.5em;
|
||||
width: 2.5em;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.banner {
|
||||
z-index: -200;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 0.5em;
|
||||
margin: 0.25em 0 0.25em 0 !important;
|
||||
border-left: 4px solid rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
|
||||
.nav-tabs * .nav-link {
|
||||
background-color: var(--bs-body-bg) !important;
|
||||
border-color: rgba(128, 128, 128, 0.3) !important;
|
||||
border-bottom-color: transparent !important;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex: 1 0 auto !important;
|
||||
}
|
||||
|
||||
.accordion-button::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
z-index: initial !important;
|
||||
}
|
||||
|
||||
.svelecte-control .sv-control {
|
||||
border-color: rgba(128, 128, 128, 0.3) !important;
|
||||
}
|
||||
|
||||
.svelecte-control .sv-control, .sv-content, .sv-dropdown, .sv-item, .sv-item-content {
|
||||
color: var(--bs-body-color) !important;
|
||||
background-color: var(--bs-body-bg) !important;
|
||||
}
|
||||
|
||||
.sv-item-btn {
|
||||
background-color: var(--bs-light) !important;
|
||||
}
|
||||
|
||||
.sv-item {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.d-spoiler {
|
||||
color: var(--bs-dark);
|
||||
background-color: var(--bs-dark);
|
||||
border-radius: 2px;
|
||||
transition-delay: 6000s;
|
||||
}
|
||||
|
||||
.d-spoiler::selection {
|
||||
color: var(--bs-dark);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.d-spoiler:active {
|
||||
background-color: rgba(128, 128, 128, 0.3);
|
||||
color: var(--bs-body-color);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.d-emoji {
|
||||
height: 1.125em;
|
||||
width: auto;
|
||||
margin: 0 .05em 0 .1em;
|
||||
vertical-align: -0.1125em;
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--bs-body-color) !important;
|
||||
}
|
||||
|
||||
.description a {
|
||||
text-decoration: none;
|
||||
color: #457ead !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.banner {
|
||||
height: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
img.emoji {
|
||||
height: 1.125em;
|
||||
width: auto;
|
||||
margin: 0 .05em 0 .1em;
|
||||
vertical-align: -0.1125em;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.dark {
|
||||
.navbar.bg-light {
|
||||
background-color: var(--bs-body-bg) !important;
|
||||
}
|
||||
|
||||
.footer.bg-light {
|
||||
background-color: var(--bs-dark) !important;
|
||||
}
|
||||
|
||||
> * {
|
||||
.description a {
|
||||
color: #159bd4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
.nav-item {
|
||||
.btn.btn-transparent {
|
||||
color: rgba(250,250,250,.55);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
/*
|
||||
This stylesheet should be used globally regardless of theming
|
||||
|
||||
some specific rules are meant to be overwritten by the individual themes
|
||||
*/
|
||||
@import url('http://fonts.cdnfonts.com/css/open-dyslexic');
|
||||
|
||||
// some variables
|
||||
$breakpoint-xs: 0px;
|
||||
$breakpoint-sm: 576px;
|
||||
$breakpoint-md: 768px;
|
||||
$breakpoint-lg: 992px;
|
||||
$breakpoint-xl: 1200px;
|
||||
$breakpoint-xxl: 1400px;
|
||||
|
||||
$gray-transparent: rgba(128, 128, 128, 0.3);
|
||||
|
||||
// general elements
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 0.5em;
|
||||
margin: 0.25em 0 0.25em 0 !important;
|
||||
border-left: 4px solid $gray-transparent; // overwrite this in the individual styles
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--bs-body-color) !important; // overwrite
|
||||
}
|
||||
|
||||
.dyslexic {
|
||||
font-family: 'Open-Dyslexic', sans-serif;
|
||||
}
|
||||
|
||||
// pk-webs specific elements
|
||||
.icon {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 2.5em;
|
||||
width: 2.5em;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.banner {
|
||||
z-index: -20;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
.banner {
|
||||
height: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
.description a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// bootstrap elements
|
||||
.container {
|
||||
flex: 1 0 auto !important;
|
||||
}
|
||||
|
||||
.nav-tabs * .nav-link {
|
||||
background-color: var(--bs-body-bg) !important;
|
||||
border-color: $gray-transparent !important; // overwrite
|
||||
border-bottom: none !important
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.accordion-button::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
z-index: initial !important;
|
||||
}
|
||||
|
||||
// svelecte styling
|
||||
.svelecte-control .sv-control {
|
||||
border-color: $gray-transparent !important; // overwrite
|
||||
}
|
||||
|
||||
.svelecte-control .sv-control, .sv-content, .sv-dropdown, .sv-item, .sv-item-content {
|
||||
color: var(--bs-body-color) !important; //this can also be optionally overwritten
|
||||
background-color: var(--bs-body-bg) !important;
|
||||
}
|
||||
|
||||
.sv-dropdown {
|
||||
position: static !important;
|
||||
border: 1px solid rgba(128, 128, 128, 0.3) !important;
|
||||
}
|
||||
|
||||
.sv-item-btn {
|
||||
background-color: var(--bs-light) !important;
|
||||
}
|
||||
|
||||
.sv-item {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
// discord markdown styling
|
||||
.d-spoiler {
|
||||
color: var(--bs-dark); //overwrite
|
||||
background-color: var(--bs-dark); //overwrite
|
||||
border-radius: 2px;
|
||||
transition-delay: 6000s;
|
||||
}
|
||||
|
||||
.d-spoiler::selection {
|
||||
color: var(--bs-dark); //overwrite
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.d-spoiler:active {
|
||||
background-color: $gray-transparent; // overwrite
|
||||
color: var(--bs-body-color); //overwrite
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.d-emoji {
|
||||
height: 1.125em;
|
||||
width: auto;
|
||||
margin: 0 .05em 0 .1em;
|
||||
vertical-align: -0.1125em;
|
||||
}
|
||||
|
||||
//twemoji
|
||||
img.emoji {
|
||||
height: 1.125em;
|
||||
width: auto;
|
||||
margin: 0 .05em 0 .1em;
|
||||
vertical-align: -0.1125em;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.light > * {
|
||||
.footer.bg-light {
|
||||
background-color: var(--bs-light) !important;
|
||||
}
|
||||
|
||||
.description a {
|
||||
color: var(--bs-primary) !important;
|
||||
}
|
||||
|
||||
> * {
|
||||
.nav-item {
|
||||
.btn.btn-transparent {
|
||||
color: rgba(0,0,0,.55);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import sveltePreprocess from 'svelte-preprocess'
|
||||
|
||||
export default {
|
||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: sveltePreprocess()
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "esnext",
|
||||
"resolveJsonModule": true,
|
||||
"baseUrl": ".",
|
||||
/**
|
||||
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||
* Disable checkJs if you'd like to use dynamic types in JS.
|
||||
* Note that setting allowJs false does not prevent the use
|
||||
* of JS in `.svelte` files.
|
||||
*/
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"importsNotUsedAsValues": "remove"
|
||||
},
|
||||
"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import resolve from 'path';
|
||||
import { defineConfig } from 'vite'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [svelte()],
|
||||
optimizeDeps: { exclude: ["svelte-navigator"] },
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: 'index.html',
|
||||
404: '404.html'
|
||||
},
|
||||
},
|
||||
outDir: "docs"
|
||||
}
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue