From 09563d4d2059fbb521ca7b52ff3f1bd4ad7109b9 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Mon, 15 Apr 2024 19:38:20 -0700 Subject: feat(badges): source and designer fields --- src/lib/Database/userBadges.ts | 22 ++++- src/lib/Dropdown.svelte | 1 + src/lib/FallbackBadge.svelte | 5 +- src/lib/Locale/english.ts | 4 +- src/lib/Locale/japanese.ts | 4 +- src/lib/Locale/layout.ts | 2 + src/routes/api/badges/+server.ts | 4 +- src/routes/user/[user]/badges/+page.svelte | 128 ++++++++++++++++++----------- 8 files changed, 116 insertions(+), 54 deletions(-) (limited to 'src') diff --git a/src/lib/Database/userBadges.ts b/src/lib/Database/userBadges.ts index c6cb4919..36bf7955 100644 --- a/src/lib/Database/userBadges.ts +++ b/src/lib/Database/userBadges.ts @@ -9,6 +9,8 @@ export interface Badge { time?: string; category?: string; hidden?: boolean; + source: string; + designer: string; } export const getUserBadges = async (userId: number): Promise => { @@ -25,18 +27,28 @@ export const getUserBadges = async (userId: number): Promise => { }; export const addUserBadge = async (userId: number, badge: Badge) => { - const { post, image, description, time, category, hidden } = badge; + const { post, image, description, time, category, hidden, source, designer } = badge; if (post === undefined || image === undefined) return; if (time) { await supabase .from('user_badges') - .insert({ user_id: userId, post, image, description, time, category, hidden }); + .insert({ + user_id: userId, + post, + image, + description, + time, + category, + hidden, + source, + designer + }); } else { await supabase .from('user_badges') - .insert({ user_id: userId, post, image, description, category, hidden }); + .insert({ user_id: userId, post, image, description, category, hidden, source, designer }); } }; @@ -55,7 +67,9 @@ export const updateUserBadge = async (userId: number, id: number, badge: Badge) description: badge.description, category: badge.category, time: badge.time, - hidden: badge.hidden + hidden: badge.hidden, + source: badge.source, + designer: badge.designer }) .eq('id', id) .eq('user_id', userId); diff --git a/src/lib/Dropdown.svelte b/src/lib/Dropdown.svelte index 39d9ecec..dd48af45 100644 --- a/src/lib/Dropdown.svelte +++ b/src/lib/Dropdown.svelte @@ -92,6 +92,7 @@ transition: opacity $delay ease, transform $delay ease, visibility 0s linear $delay; left: var(--dropdown-left); transform: var(--dropdown-transform); + z-index: 1; } .dropdown-open { diff --git a/src/lib/FallbackBadge.svelte b/src/lib/FallbackBadge.svelte index 470f5d8c..3f87b9f2 100644 --- a/src/lib/FallbackBadge.svelte +++ b/src/lib/FallbackBadge.svelte @@ -52,9 +52,12 @@ id={`badge-${badge.id}`} class="badge-container badge" title={`${badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''}${ - badge.description ? `\n${badge.description}` : '' + badge.description ? `, ${badge.description}` : '' + }${badge.designer ? `\nDesigner: ${badge.designer}` : ''}${ + badge.source ? `\nSource: ${badge.source}` : '' }`} use:tooltip + data-tooltipPin={`badge-${badge.id}`} > { description: url.searchParams.get('description') || undefined, time: url.searchParams.get('time') || undefined, category: url.searchParams.get('category') || undefined, - hidden: url.searchParams.get('hidden') || undefined + hidden: url.searchParams.get('hidden') || undefined, + source: url.searchParams.get('source') || undefined, + designer: url.searchParams.get('designer') || undefined }; if ( diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte index d55068e4..4aa205d9 100644 --- a/src/routes/user/[user]/badges/+page.svelte +++ b/src/routes/user/[user]/badges/+page.svelte @@ -66,6 +66,8 @@ link: string; description: string; image: string; + source: string; + designer: string; } interface AWCBadgesGroup { @@ -208,6 +210,8 @@ 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; + const source = document.querySelector('input[name="source"]') as HTMLInputElement; + const designer = document.querySelector('input[name="designer"]') as HTMLInputElement; if (!imageURL.value) { error = 'Image URL cannot be empty.'; @@ -235,7 +239,9 @@ : '' }${ selectedBadge && selectedBadge.id ? `&update=${encodeURIComponent(selectedBadge.id)}` : '' - }&hidden=${hidden.value === 'Hidden'}`, + }&hidden=${hidden.value === 'Hidden'}${ + source.value.length > 0 ? `&source=${encodeURIComponent(source.value)}` : '' + }${designer.value.length > 0 ? `&designer=${encodeURIComponent(designer.value)}` : ''}`, { method: 'PUT' } @@ -659,50 +665,6 @@ /> - ({ - 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} - > - - - - - - {#if selectedBadge} - {$locale().user.badges.editMode.or} - - {/if} Must be full date and time, defaults to now if any fields empty + +

+ +

+ + + ({ + 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} + > + + + + + + {#if selectedBadge} + {$locale().user.badges.editMode.or} + + {/if} +
{/if} {/if} @@ -753,8 +782,11 @@ badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : '' - }${badge.description ? `\n${badge.description}` : ''}`} + }${badge.description ? `, ${badge.description}` : ''}${ + badge.designer ? `\nDesigner: ${badge.designer}` : '' + }${badge.source ? `\nSource: ${badge.source}` : ''}`} use:tooltip + data-tooltipPin={`badge-${badge.id}`} > -- cgit v1.2.3