diff options
| -rw-r--r-- | src/lib/Popup.svelte | 4 | ||||
| -rw-r--r-- | src/routes/api/badges/+server.ts | 26 | ||||
| -rw-r--r-- | src/routes/user/[user]/badges/+page.svelte | 64 |
3 files changed, 92 insertions, 2 deletions
diff --git a/src/lib/Popup.svelte b/src/lib/Popup.svelte index badd4f2c..2eb799bd 100644 --- a/src/lib/Popup.svelte +++ b/src/lib/Popup.svelte @@ -33,6 +33,10 @@ <style> .popup { z-index: 3; + + position: fixed; + top: 5%; + left: 50%; } .centered { diff --git a/src/routes/api/badges/+server.ts b/src/routes/api/badges/+server.ts index 2dc1d7b3..000dfa6c 100644 --- a/src/routes/api/badges/+server.ts +++ b/src/routes/api/badges/+server.ts @@ -73,6 +73,32 @@ export const PUT = async ({ cookies, url, request }) => { return await badges(identity.id); } + if (url.searchParams.get('hide') || undefined) { + const allBadges = await getUserBadges(identity.id); + + await Promise.all( + allBadges + .filter((badge) => badge.category === (url.searchParams.get('category') || '')) + .map(async (badge) => { + await updateUserBadge(identity.id, badge.id as number, { + ...badge, + hidden: + allBadges + .filter((badge) => badge.category === (url.searchParams.get('category') || '')) + .filter((badge) => badge.hidden).length > + allBadges.filter( + (badge) => badge.category === (url.searchParams.get('category') || '') + ).length / + 2 + ? false + : true + }); + }) + ); + + return await badges(identity.id); + } + const badge = { post: url.searchParams.get('post') || undefined, image: url.searchParams.get('image') || undefined, diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte index 0490dc97..48a10a0c 100644 --- a/src/routes/user/[user]/badges/+page.svelte +++ b/src/routes/user/[user]/badges/+page.svelte @@ -53,6 +53,7 @@ let importReplies = false; let badger: Partial<User>; let migrateMode = false; + let hideMode = false; let preferences: UserPreferences; $: categoryFilter = new URLSearchParams($page.url.searchParams).get('category'); @@ -429,6 +430,19 @@ migrateMode = false; }; + const hideCategory = () => { + badgesPromise = fetch( + `/api/badges?hide=true&category=${encodeURIComponent( + (document.querySelector('#category_hide') as HTMLInputElement).value + )}`, + { + method: 'PUT' + } + ); + + hideMode = false; + }; + // const exportBadges = (groupedBadges: [string, Badge[]][]) => { // const url = URL.createObjectURL( // new Blob([JSON.stringify(groupedBadges)], { type: 'application/json' }) @@ -560,8 +574,18 @@ > Migrate Category </button> - <!-- <span style="margin: 0 0.625rem;">•</span> - <button on:click={() => exportBadges(groupedBadges)}>Export Badges</button> --> + <span style="margin: 0 0.625rem;">•</span> + <button + on:click={() => { + if (hideMode) selectedBadge = undefined; + + hideMode = !hideMode; + }} + > + Hide Category + </button> + <!-- <!-- <span style="margin: 0 0.625rem;">•</span> --> + <!-- <button on:click={() => exportBadges(groupedBadges)}>Export Badges</button> --> {#if editMode && isOwner} {@const groups = groupedBadges @@ -908,6 +932,42 @@ </button> </Popup> +<Popup fullscreen onLeave={() => (hideMode = false)} show={hideMode}> + Hide Category + + <SettingHint lineBreak> + If the majority of the badges in a category are shown, the category will be hidden, and vice + versa. + </SettingHint> + + <p /> + + <input + type="text" + placeholder="Category" + id="category_hide" + minlength="1" + maxlength="1000" + size="20" + /> + <SettingHint lineBreak>Leave category field empty to hide all.</SettingHint> + + <p /> + + <button + on:click={() => { + hideMode = false; + importImages = undefined; + }} + class="button-lined" + > + {$locale().user.badges.importMode.cancel} + </button> + <button on:click={() => hideCategory()} class="button-lined" style="float: right;" + >Toggle Visibility</button + > +</Popup> + <style> /* body { margin: 0; |