From e242c23c10cbfb51bab1a678daef34441f127eda Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 4 May 2024 20:26:49 -0700
Subject: feat(user): pinned category ui

---
 src/routes/api/preferences/+server.ts | 13 ++++++-
 src/routes/user/[user]/+page.svelte   | 69 ++++++++++++++++++++++++++++++++---
 2 files changed, 76 insertions(+), 6 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/api/preferences/+server.ts b/src/routes/api/preferences/+server.ts
index 379f33c5..2fe2ccfe 100644
--- a/src/routes/api/preferences/+server.ts
+++ b/src/routes/api/preferences/+server.ts
@@ -4,7 +4,8 @@ import {
 	toggleHideMissingBadges,
 	setCSS,
 	setBiography,
-	toggleHideAWCBadges
+	toggleHideAWCBadges,
+	togglePinnedBadgeWallCategory
 } from '$lib/Database/userPreferences';
 
 const unauthorised = new Response('Unauthorised', { status: 401 });
@@ -55,6 +56,16 @@ export const PUT = async ({ url, cookies, request }) => {
 			}
 		});
 
+	if (url.searchParams.get('toggleCategory') !== null)
+		return Response.json(
+			await togglePinnedBadgeWallCategory(userId, url.searchParams.get('toggleCategory') || ''),
+			{
+				headers: {
+					'Access-Control-Allow-Origin': 'https://due.moe'
+				}
+			}
+		);
+
 	if (url.searchParams.get('biography') !== null)
 		return Response.json(await setBiography(userId, (await request.text()).slice(0, 3000)), {
 			headers: {
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 2dd8dc2b..097007f0 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -68,6 +68,11 @@
 	const getBiography = () =>
 		(document.getElementById('biography') as HTMLTextAreaElement).value.slice(0, 3000);
 
+	const refreshPreferences = () =>
+		fetch(root(`/api/preferences?id=${userData?.id}`))
+			.then((rawPreferences) => rawPreferences.json())
+			.then((JSONpreferences) => (preferences = JSONpreferences));
+
 	// 8.5827814569536423841e0
 </script>
 
@@ -239,6 +244,49 @@
 
 			<p />
 
+			Pinned Categories
+
+			<div class="pinned-categories">
+				{#each preferences.pinned_badge_wall_categories.split(',') as category}
+					<span class="card card-small pinned-category">
+						<span class="pinned-category-name">
+							{category}
+						</span>
+						<button
+							on:click={() => {
+								if (userData)
+									fetch(root(`/api/preferences?id=${userData.id}&toggleCategory=${category}`), {
+										method: 'PUT'
+									}).then(refreshPreferences);
+							}}>Remove</button
+						>
+					</span>
+				{/each}
+
+				<span class="card card-small pinned-category">
+					<span class="pinned-category-name">
+						<input type="text" id="category" placeholder="Category" style="width: 10em;" />
+					</span>
+
+					<button
+						class="button-lined"
+						on:click={() => {
+							if (userData) {
+								const category = document.getElementById('category').value;
+
+								fetch(root(`/api/preferences?id=${userData.id}&toggleCategory=${category}`), {
+									method: 'PUT'
+								}).then(refreshPreferences);
+
+								document.getElementById('category').value = '';
+							}
+						}}>Add</button
+					>
+				</span>
+			</div>
+
+			<p />
+
 			Biography
 
 			<button
@@ -247,11 +295,7 @@
 						fetch(root(`/api/preferences?id=${userData.id}&biography`), {
 							method: 'PUT',
 							body: getBiography()
-						}).then(() =>
-							fetch(root(`/api/preferences?id=${userData?.id}`))
-								.then((rawPreferences) => rawPreferences.json())
-								.then((JSONpreferences) => (preferences = JSONpreferences))
-						);
+						}).then(refreshPreferences);
 				}}>Save</button
 			>
 			<textarea
@@ -355,4 +399,19 @@
 	.user-grid-rest {
 		flex: 1;
 	}
+
+	.pinned-categories {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+	}
+
+	.pinned-category {
+		display: flex;
+		align-items: center;
+	}
+
+	.pinned-category-name {
+		margin-right: 0.5em;
+	}
 </style>
-- 
cgit v1.2.3