diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Database/userBadges.ts | 10 | ||||
| -rw-r--r-- | src/routes/api/badges/+server.ts | 7 | ||||
| -rw-r--r-- | src/routes/user/[user]/badges/+page.svelte | 50 |
3 files changed, 57 insertions, 10 deletions
diff --git a/src/lib/Database/userBadges.ts b/src/lib/Database/userBadges.ts index 4ee47685..c6cb4919 100644 --- a/src/lib/Database/userBadges.ts +++ b/src/lib/Database/userBadges.ts @@ -8,6 +8,7 @@ export interface Badge { id?: number; time?: string; category?: string; + hidden?: boolean; } export const getUserBadges = async (userId: number): Promise<Badge[]> => { @@ -24,18 +25,18 @@ export const getUserBadges = async (userId: number): Promise<Badge[]> => { }; export const addUserBadge = async (userId: number, badge: Badge) => { - const { post, image, description, time, category } = badge; + const { post, image, description, time, category, hidden } = badge; if (post === undefined || image === undefined) return; if (time) { await supabase .from('user_badges') - .insert({ user_id: userId, post, image, description, time, category }); + .insert({ user_id: userId, post, image, description, time, category, hidden }); } else { await supabase .from('user_badges') - .insert({ user_id: userId, post, image, description, category }); + .insert({ user_id: userId, post, image, description, category, hidden }); } }; @@ -53,7 +54,8 @@ export const updateUserBadge = async (userId: number, id: number, badge: Badge) image: badge.image, description: badge.description, category: badge.category, - time: badge.time + time: badge.time, + hidden: badge.hidden }) .eq('id', id) .eq('user_id', userId); diff --git a/src/routes/api/badges/+server.ts b/src/routes/api/badges/+server.ts index 20777845..2dc1d7b3 100644 --- a/src/routes/api/badges/+server.ts +++ b/src/routes/api/badges/+server.ts @@ -78,7 +78,8 @@ export const PUT = async ({ cookies, url, request }) => { image: url.searchParams.get('image') || undefined, description: url.searchParams.get('description') || undefined, time: url.searchParams.get('time') || undefined, - category: url.searchParams.get('category') || undefined + category: url.searchParams.get('category') || undefined, + hidden: url.searchParams.get('hidden') || undefined }; if ( @@ -86,9 +87,9 @@ export const PUT = async ({ cookies, url, request }) => { (badge) => Number(badge.id) === Number(url.searchParams.get('update')) ) ) { - await updateUserBadge(identity.id, Number(url.searchParams.get('update')), badge); + await updateUserBadge(identity.id, Number(url.searchParams.get('update')), badge as Badge); } else { - await addUserBadge(identity.id, badge); + await addUserBadge(identity.id, badge as Badge); } return await badges(identity.id); diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte index 1d0896fc..18f014be 100644 --- a/src/routes/user/[user]/badges/+page.svelte +++ b/src/routes/user/[user]/badges/+page.svelte @@ -206,6 +206,7 @@ const description = document.querySelector('input[name="description"]') as HTMLInputElement; const time = document.querySelector('input[type="datetime-local"]') as HTMLInputElement; const category = document.querySelector('input[name="category"]') as HTMLInputElement; + const hidden = document.querySelector('input[name="hidden"]') as HTMLInputElement; if (!imageURL.value) { error = 'Image URL cannot be empty.'; @@ -233,7 +234,7 @@ : '' }${ selectedBadge && selectedBadge.id ? `&update=${encodeURIComponent(selectedBadge.id)}` : '' - }`, + }&hidden=${hidden.value === 'Hidden'}`, { method: 'PUT' } @@ -244,6 +245,7 @@ activityURL.value = ''; description.value = ''; category.value = ''; + hidden.value = 'Shown'; selectedBadge = undefined; }; @@ -441,6 +443,9 @@ downloadAnchor.remove(); URL.revokeObjectURL(url); }; + + const removeHiddenBadges = (badges: Badge[]) => + editMode ? badges : badges.filter((b) => !b.hidden); </script> <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} /> @@ -519,7 +524,9 @@ <Skeleton grid={true} count={10} width="150px" height="170px" /> {:else} - {@const groupedBadges = Object.entries(groupBadges(ungroupedBadges))} + {@const groupedBadges = Object.entries( + groupBadges(removeHiddenBadges(ungroupedBadges)) + )} {#if isOwner} <div class="card"> @@ -631,6 +638,36 @@ /> </span> </Dropdown> + <Dropdown + items={[false, true].map((hidden) => ({ + name: hidden ? 'Hidden' : 'Shown', + url: '#', + onClick: () => { + const hiddenInput = document.querySelector('input[name="hidden"]'); + + if (hiddenInput instanceof HTMLInputElement) + hiddenInput.value = hidden ? 'Hidden' : 'Shown'; + } + }))} + header={false} + center={false} + > + <span slot="title"> + <input + type="text" + placeholder="Shown" + name="hidden" + minlength="1" + maxlength="1000" + size="15" + value={selectedBadge + ? selectedBadge.hidden + ? 'Hidden' + : 'Shown' + : 'Shown'} + /> + </span> + </Dropdown> <button class="button-lined" on:click={submitBadge} >{selectedBadge ? $locale().user.badges.editMode.update @@ -682,7 +719,14 @@ {#if editMode} <a href={`#`} - on:click={() => (selectedBadge = badge)} + on:click={() => { + selectedBadge = badge; + + const hiddenInput = document.querySelector('input[name="hidden"]'); + + if (hiddenInput instanceof HTMLInputElement) + hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown'; + }} id={`badge-${badge.id}`} title={`${ badge.time |