sam/Catalogger.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(dashboard): edit log channels page

Browse source
This commit is contained in:
sam 2024-10-19 16:52:27 +02:00
parent ec7aa9faba
commit 32ddb9fae2
Signed by: sam
GPG key ID: 5F3C3C1B3166639D
16 changed files with 471 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Catalogger.Frontend/package.json
View file

@ -25,6 +25,7 @@
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"sass": "^1.80.1",
"svelecte": "^4.3.1",
"svelte": "^4.2.7",
"svelte-check": "^4.0.0",
"typescript": "^5.0.0",

31
Catalogger.Frontend/src/app.scss
View file

@ -1,3 +1,34 @@
@use "bootstrap/scss/bootstrap" with (
$color-mode-type: media-query
);
:root {
--sv-min-height: 40px;
}
// Svelecte doesn't have a built in dark mode :)
@media (prefers-color-scheme: dark) {
:root {
--sv-bg: #32363f;
--sv-disabled-bg: #eee;
--sv-border: 1px solid #626262;
--sv-item-selected-bg: #626262;
--sv-item-btn-color: #ccc;
--sv-item-btn-color-hover: #ccc;
--sv-item-btn-bg: #626262;
--sv-item-btn-bg-hover: #bc6063;
--sv-icon-color: #bbb;
--sv-icon-color-hover: #ccc;
--sv-separator-bg: #626262;
--sv-placeholder-color: #ccccd6;
--sv-dropdown-bg: var(--sv-bg);
--sv-dropdown-border: var(--sv-border);
--sv-dropdown-shadow: 0 1px 3px #555;
--sv-dropdown-active-bg: #553d3d;
--sv-dropdown-selected-bg: #754545;
--sv-create-kbd-border: 1px solid #626262;
--sv-create-kbd-bg: #626262;
--sv-create-disabled-bg: #fcbaba;
--sv-loader-border: 2px solid #626262;
}
}

105
Catalogger.Frontend/src/lib/api.ts
View file

@ -1,28 +1,3 @@
export type User = {
id: string;
tag: string;
avatar_url: string;
};
export type PartialGuild = {
id: string;
name: string;
icon_url: string;
bot_in_guild: boolean;
};
export type CurrentUser = {
user: User;
guilds: PartialGuild[];
};
export type AuthCallback = CurrentUser & { token: string };
export type ApiError = {
error_code: string;
message: string;
};
export const TOKEN_KEY = "catalogger-token";
export default async function apiFetch<T>(
@ -53,3 +28,83 @@ export default async function apiFetch<T>(
return (await resp.json()) as T;
}
export type User = {
id: string;
tag: string;
avatar_url: string;
};
export type PartialGuild = {
id: string;
name: string;
icon_url: string;
bot_in_guild: boolean;
};
export type FullGuild = {
id: string;
name: string;
icon_url: string;
categories: GuildCategory[];
channels_without_category: GuildChannel[];
config: GuildConfig;
};
export type GuildCategory = {
id: string;
name: string;
channels: GuildChannel[];
};
export type GuildChannel = {
id: string;
name: string;
can_log_to: boolean;
can_redirect_from: boolean;
};
export type CurrentUser = {
user: User;
guilds: PartialGuild[];
};
export type AuthCallback = CurrentUser & { token: string };
export type ApiError = {
error_code: string;
message: string;
};
export type GuildConfig = GuildChannelConfig & {
ignored_channels: string[];
ignored_users: string[];
ignored_users_per_channel: Record<string, string[]>;
redirects: Record<string, string>;
};
export type GuildChannelConfig = {
guild_update: string;
guild_emojis_update: string;
guild_role_create: string;
guild_role_update: string;
guild_role_delete: string;
channel_create: string;
channel_update: string;
channel_delete: string;
guild_member_add: string;
guild_member_update: string;
guild_key_role_update: string;
guild_member_nick_update: string;
guild_member_avatar_update: string;
guild_member_timeout: string;
guild_member_remove: string;
guild_member_kick: string;
guild_ban_add: string;
guild_ban_remove: string;
invite_create: string;
invite_delete: string;
message_update: string;
message_delete: string;
message_delete_bulk: string;
};

4
Catalogger.Frontend/src/routes/+page.svelte
View file

@ -12,6 +12,10 @@
});
</script>
<svelte:head>
<title>Catalogger</title>
</svelte:head>
<h1>Welcome to SvelteKit</h1>
<p>
Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation

1
Catalogger.Frontend/src/routes/callback/+page.ts Normal file
View file

@ -0,0 +1 @@
export const prerender = false;

2
Catalogger.Frontend/src/routes/dash/+layout.ts
View file

@ -1,6 +1,8 @@
import { addToast } from "$lib/toast";
import { redirect } from "@sveltejs/kit";
export const prerender = false;
export const load = async ({ parent }) => {
const data = await parent();
if (!data.user) {

4
Catalogger.Frontend/src/routes/dash/+page.svelte
View file

@ -8,6 +8,10 @@
$: unjoinedGuilds = data.guilds.filter((g) => !g.bot_in_guild);
</script>
<svelte:head>
<title>Catalogger - Dashboard</title>
</svelte:head>
<h1>Manage your servers</h1>
<div class="row">

86
Catalogger.Frontend/src/routes/dash/[guildId]/+layout.svelte Normal file
View file

@ -0,0 +1,86 @@
<script lang="ts">
import { Button, Nav, NavItem, NavLink } from "@sveltestrap/sveltestrap";
import type { LayoutData } from "./$types";
import { page } from "$app/stores";
import apiFetch, { type ApiError, type GuildConfig } from "$lib/api";
import { addToast } from "$lib/toast";
export let data: LayoutData;
// This only saves log channels. All other pages are lists and are saved immediately upon adding/removing an entry.
const save = async () => {
try {
const resp = await apiFetch<GuildConfig>(
"PATCH",
`/api/guilds/${data.guild.id}`,
data.guild.config,
);
data.guild.config = resp;
} catch (e) {
addToast({
header: "Error saving changes to log channels",
body:
(e as ApiError).message || "Unknown error. Please try again later.",
});
}
};
</script>
<svelte:head>
<title>Catalogger - Managing {data.guild.name}</title>
</svelte:head>
<div class="d-flex flex-column flex-lg-row justify-content-lg-between">
<Nav pills={true} class="flex-column flex-lg-row">
<NavItem
><NavLink href="#" disabled>Managing {data.guild.name}</NavLink></NavItem
>
<NavItem
><NavLink
href="/dash/{data.guild.id}"
active={$page.url.pathname === `/dash/${data.guild.id}`}
>
Log channels
</NavLink></NavItem
>
<NavItem
><NavLink
href="/dash/{data.guild.id}/redirects"
active={$page.url.pathname === `/dash/${data.guild.id}/redirects`}
>
Redirects
</NavLink></NavItem
>
<NavItem
><NavLink
href="/dash/{data.guild.id}/ignored-channels"
active={$page.url.pathname ===
`/dash/${data.guild.id}/ignored-channels`}
>
Ignored channels
</NavLink></NavItem
>
<NavItem
><NavLink
href="/dash/{data.guild.id}/ignored-users"
active={$page.url.pathname === `/dash/${data.guild.id}/ignored-users`}
>
Ignored users
</NavLink></NavItem
>
<NavItem
><NavLink
href="/dash/{data.guild.id}/key-roles"
active={$page.url.pathname === `/dash/${data.guild.id}/key-roles`}
>
Key roles
</NavLink></NavItem
>
</Nav>
{#if $page.url.pathname === `/dash/${data.guild.id}`}
<Button on:click={save}>Save changes</Button>
{/if}
</div>
<slot />

17
Catalogger.Frontend/src/routes/dash/[guildId]/+layout.ts Normal file
View file

@ -0,0 +1,17 @@
import apiFetch, { type ApiError, type FullGuild } from "$lib/api";
import { error } from "@sveltejs/kit";
export const load = async ({ params }) => {
try {
const guild = await apiFetch<FullGuild>(
"GET",
`/api/guilds/${params.guildId}`,
);
return { guild };
} catch (e) {
const err = e as ApiError;
console.log("Fetching guild", params.guildId, ":", e);
error(404, err.message);
}
};

138
Catalogger.Frontend/src/routes/dash/[guildId]/+page.svelte Normal file
View file

@ -0,0 +1,138 @@
<script lang="ts">
import { Label } from "@sveltestrap/sveltestrap";
import type { FullGuild, GuildChannelConfig } from "$lib/api";
import type { PageData } from "./$types";
import ChannelSelect from "./ChannelSelect.svelte";
export let data: PageData;
$: channels = data.guild.config as GuildChannelConfig;
const logChannelOptions = (g: FullGuild) => {
let options = [];
const channelsWithoutCategory = g.channels_without_category.filter(
(c) => c.can_log_to,
);
if (channelsWithoutCategory.length > 0)
options.push({
label: "(no category)",
options: channelsWithoutCategory.map((c) => ({
value: c.id,
label: `#${c.name}`,
})),
});
options.push(
...data.guild.categories
.map((cat) => ({
label: cat.name,
options: cat.channels
.filter((c) => c.can_log_to)
.map((c) => ({ value: c.id, label: `#${c.name}` })),
}))
.filter((c) => c.options.length > 0),
);
return options;
};
$: options = logChannelOptions(data.guild);
</script>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="p-2">
<Label><strong>Server changes</strong></Label>
<ChannelSelect bind:value={channels.guild_update} {options} />
</div>
<div class="p-2">
<Label><strong>Changes to emotes</strong></Label>
<ChannelSelect bind:value={channels.guild_emojis_update} {options} />
</div>
<div class="p-2">
<Label><strong>New roles</strong></Label>
<ChannelSelect bind:value={channels.guild_role_create} {options} />
</div>
<div class="p-2">
<Label><strong>Changes to roles</strong></Label>
<ChannelSelect bind:value={channels.guild_role_update} {options} />
</div>
<div class="p-2">
<Label><strong>Deleted roles</strong></Label>
<ChannelSelect bind:value={channels.guild_role_delete} {options} />
</div>
<div class="p-2">
<Label><strong>New channels</strong></Label>
<ChannelSelect bind:value={channels.channel_create} {options} />
</div>
<div class="p-2">
<Label><strong>Changes to channels</strong></Label>
<ChannelSelect bind:value={channels.channel_update} {options} />
</div>
<div class="p-2">
<Label><strong>Deleted channels</strong></Label>
<ChannelSelect bind:value={channels.channel_delete} {options} />
</div>
<div class="p-2">
<Label><strong>Users joining</strong></Label>
<ChannelSelect bind:value={channels.guild_member_add} {options} />
</div>
<div class="p-2">
<Label><strong>Users leaving</strong></Label>
<ChannelSelect bind:value={channels.guild_member_remove} {options} />
</div>
<div class="p-2">
<Label><strong>Changes to key roles</strong></Label>
<ChannelSelect bind:value={channels.guild_update} {options} />
<small>
Key roles can be designated with the <code>/key-roles</code> command or the
"Key roles" tab above.
</small>
</div>
<div class="p-2">
<Label><strong>Member name changes</strong></Label>
<ChannelSelect bind:value={channels.guild_member_nick_update} {options} />
</div>
<div class="p-2">
<Label><strong>Member icon changes</strong></Label>
<ChannelSelect bind:value={channels.guild_member_avatar_update} {options} />
</div>
<div class="p-2">
<Label><strong>Timeouts</strong></Label>
<ChannelSelect bind:value={channels.guild_member_timeout} {options} />
<small> Note that this will not log timeouts naturally expiring. </small>
</div>
<div class="p-2">
<Label><strong>Kicked users</strong></Label>
<ChannelSelect bind:value={channels.guild_member_kick} {options} />
</div>
<div class="p-2">
<Label><strong>Banned users</strong></Label>
<ChannelSelect bind:value={channels.guild_ban_add} {options} />
</div>
<div class="p-2">
<Label><strong>Unbanned users</strong></Label>
<ChannelSelect bind:value={channels.guild_ban_remove} {options} />
</div>
<div class="p-2">
<Label><strong>New invites</strong></Label>
<ChannelSelect bind:value={channels.invite_create} {options} />
</div>
<div class="p-2">
<Label><strong>Deleted invites</strong></Label>
<ChannelSelect bind:value={channels.invite_delete} {options} />
</div>
<div class="p-2">
<Label><strong>Edited messages</strong></Label>
<ChannelSelect bind:value={channels.message_update} {options} />
</div>
<div class="p-2">
<Label><strong>Deleted messages</strong></Label>
<ChannelSelect bind:value={channels.message_delete} {options} />
</div>
<div class="p-2">
<Label><strong>Bulk deleted messages</strong></Label>
<ChannelSelect bind:value={channels.message_delete_bulk} {options} />
<small> This will only be triggered by bots, not normal users. </small>
</div>
</div>

21
Catalogger.Frontend/src/routes/dash/[guildId]/ChannelSelect.svelte Normal file
View file

@ -0,0 +1,21 @@
<script lang="ts">
import Svelecte from "svelecte";
type Group = { label: string; options: Option[] };
type Option = { label: string; value: string };
export let options: Group[];
export let placeholder: string = "Select a channel";
export let value: string;
</script>
<Svelecte
bind:value
{options}
{placeholder}
labelField="label"
valueField="value"
groupLabelField="label"
groupItemsField="options"
searchable={true}
/>

1
Catalogger.Frontend/src/routes/dash/[guildId]/redirects/+page.svelte Normal file
View file

@ -0,0 +1 @@
<h1>aaaaaaaaa</h1>

2
Catalogger.Frontend/svelte.config.js
View file

@ -12,7 +12,7 @@ const config = {
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter({
fallback: "index.html",
fallback: "spa.html",
}),
},
};

3
Catalogger.Frontend/vite.config.ts
View file

@ -4,6 +4,8 @@ import { defineConfig } from "vite";
export default defineConfig({
plugins: [sveltekit()],
server: {
port: 5173,
strictPort: true,
proxy: {
"/api": {
target: "http://localhost:5005",
@ -12,6 +14,7 @@ export default defineConfig({
},
hmr: {
host: "localhost",
port: 5173,
protocol: "ws",
},
},

12
Catalogger.Frontend/yarn.lock
View file

@ -1497,6 +1497,13 @@ supports-color@^7.1.0:
dependencies:
has-flag "^4.0.0"
svelecte@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/svelecte/-/svelecte-4.3.1.tgz#d7bfb8c14ef080ac43e36f42c6020aae044dd2fe"
integrity sha512-0wyPDel4J16ecwaDHvgdXsI5QvuC1pU8n2FY3tO4X39e6gcrnoQkgV3zVWYdm7xAQaqawAgZNBDgNZlonPLOmw==
dependencies:
svelte-tiny-virtual-list "^2.1.0"
svelte-check@^4.0.0:
version "4.0.5"
resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-4.0.5.tgz#5cd910c3b1d50f38159c17cc3bae127cbbb55c8d"
@ -1524,6 +1531,11 @@ svelte-hmr@^0.16.0:
resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.16.0.tgz#9f345b7d1c1662f1613747ed7e82507e376c1716"
integrity sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==
svelte-tiny-virtual-list@^2.1.0:
version "2.1.2"
resolved "https://registry.yarnpkg.com/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-2.1.2.tgz#db826e5915f0374b793798bc8125b8a66fbc6c34"
integrity sha512-jeP/WMvgFUR4mYXHGPiCexjX5DuzSO+3xzHNhxfcsFyy+uYPtnqI5UGb383swpzQAyXB0OBqYfzpYihD/5gxnA==
svelte@^4.2.7:
version "4.2.19"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-4.2.19.tgz#4e6e84a8818e2cd04ae0255fcf395bc211e61d4c"