diff options
| author | Fuwn <[email protected]> | 2024-05-01 19:44:28 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-05-01 19:44:28 -0700 |
| commit | fbb847df78e22e95b38d7bcebbac26d7c9856719 (patch) | |
| tree | 08d980625c2bdf698e60251a3b184aa70db32bb2 /src | |
| parent | fix(user): display anilist username (diff) | |
| download | due.moe-fbb847df78e22e95b38d7bcebbac26d7c9856719.tar.xz due.moe-fbb847df78e22e95b38d7bcebbac26d7c9856719.zip | |
feat(badges): dropdown designers
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/user/[user]/badges/+page.svelte | 53 |
1 files changed, 43 insertions, 10 deletions
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte index f9bdefa7..22182138 100644 --- a/src/routes/user/[user]/badges/+page.svelte +++ b/src/routes/user/[user]/badges/+page.svelte @@ -485,6 +485,10 @@ return previousBadge; }; + + const castAsStringArray = (array: any[]) => array as string[]; + + const castBadgesToIndexedBadges = (array: any[]) => array as IndexedBadge[]; </script> <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} /> @@ -511,7 +515,8 @@ <Message message="Parsing badges ..." /> <Skeleton grid={true} count={100} width="150px" height="170px" /> - {:then ungroupedBadges} + {:then ungroupedBadgesAny} + {@const ungroupedBadges = castBadgesToIndexedBadges(ungroupedBadgesAny)} {@const isBadgeSelected = selectedBadge && selectedBadge !== undefined && @@ -656,6 +661,17 @@ {@const groups = groupedBadges .map((group) => group[0]) .filter((group) => group !== 'Uncategorised')} + {@const designers = castAsStringArray([ + ...new Set( + ungroupedBadges + .map((badge) => badge.designer) + .filter((designer) => designer !== undefined && designer !== null) + .filter( + (designer, index, array) => + array.indexOf(designer) === index && !array.includes(`@${designer}`) + ) + ) + ])} <p /> @@ -746,15 +762,32 @@ size="16" value={selectedBadge ? selectedBadge.source : ''} /> - <input - type="text" - placeholder={$locale().user.badges.editMode.designer} - name="designer" - minlength="1" - maxlength="1000" - size="17" - value={selectedBadge ? selectedBadge.designer : ''} - /> + <Dropdown + items={designers.map((designer) => ({ + name: designer, + url: '#', + onClick: () => { + const designerField = document.querySelector('input[name="designer"]'); + + if (designerField instanceof HTMLInputElement) + designerField.value = designer; + } + }))} + header={false} + center={false} + > + <span slot="title"> + <input + type="text" + placeholder={$locale().user.badges.editMode.designer} + name="designer" + minlength="1" + maxlength="1000" + size="17" + value={selectedBadge ? selectedBadge.designer : ''} + /> + </span> + </Dropdown> <Dropdown items={[false, true].map((hidden) => ({ name: hidden ? 'Hidden' : 'Shown', |