sam/pronounscc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat(frontend): allow editing + using custom preferences

Browse source
This commit is contained in:
Sam 2023-04-19 17:17:44 +02:00 • committed by Gitea
parent 8bda5f9860
commit 9a80bb2e9b
11 changed files with 229 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

76
frontend/src/routes/edit/EditablePronouns.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts">
import { WordStatus, type Pronoun, pronounDisplay } from "$lib/api/entities";
import defaultPreferences from "$lib/api/default_preferences";
import type { Pronoun, CustomPreference, CustomPreferences } from "$lib/api/entities";
import IconButton from "$lib/components/IconButton.svelte";
import {
Button,
@ -15,6 +16,7 @@
} from "sveltestrap";
export let pronoun: Pronoun;
export let preferences: CustomPreferences;
export let moveUp: () => void;
export let moveDown: () => void;
export let remove: () => void;
@ -23,39 +25,17 @@
let displayOpen = false;
const toggleDisplay = () => (displayOpen = !displayOpen);
const iconFor = (wordStatus: WordStatus) => {
switch (wordStatus) {
case WordStatus.Favourite:
return "heart-fill";
case WordStatus.Okay:
return "hand-thumbs-up";
case WordStatus.Jokingly:
return "emoji-laughing";
case WordStatus.FriendsOnly:
return "people";
case WordStatus.Avoid:
return "hand-thumbs-down";
default:
return "hand-thumbs-up";
}
};
let mergedPreferences: CustomPreferences;
$: mergedPreferences = Object.assign(defaultPreferences, preferences);
const textFor = (wordStatus: WordStatus) => {
switch (wordStatus) {
case WordStatus.Favourite:
return "Favourite";
case WordStatus.Okay:
return "Okay";
case WordStatus.Jokingly:
return "Jokingly";
case WordStatus.FriendsOnly:
return "Friends only";
case WordStatus.Avoid:
return "Avoid";
default:
return "Okay";
}
};
let currentPreference: CustomPreference;
$: currentPreference =
pronoun.status in mergedPreferences
? mergedPreferences[pronoun.status]
: defaultPreferences.missing;
let preferenceIds: string[];
$: preferenceIds = Object.keys(mergedPreferences).filter((s) => s !== "missing");
</script>
<div class="input-group m-1">
@ -75,31 +55,17 @@
click={toggleDisplay}
/>
<ButtonDropdown>
<Tooltip target={buttonElement} placement="top">{textFor(pronoun.status)}</Tooltip>
<Tooltip target={buttonElement} placement="top">{currentPreference.tooltip}</Tooltip>
<DropdownToggle color="secondary" caret bind:inner={buttonElement}>
<Icon name={iconFor(pronoun.status)} />
<Icon name={currentPreference.icon} />
</DropdownToggle>
<DropdownMenu>
<DropdownItem
on:click={() => (pronoun.status = WordStatus.Favourite)}
active={pronoun.status === WordStatus.Favourite}>Favourite</DropdownItem
>
<DropdownItem
on:click={() => (pronoun.status = WordStatus.Okay)}
active={pronoun.status === WordStatus.Okay}>Okay</DropdownItem
>
<DropdownItem
on:click={() => (pronoun.status = WordStatus.Jokingly)}
active={pronoun.status === WordStatus.Jokingly}>Jokingly</DropdownItem
>
<DropdownItem
on:click={() => (pronoun.status = WordStatus.FriendsOnly)}
active={pronoun.status === WordStatus.FriendsOnly}>Friends only</DropdownItem
>
<DropdownItem
on:click={() => (pronoun.status = WordStatus.Avoid)}
active={pronoun.status === WordStatus.Avoid}>Avoid</DropdownItem
>
{#each preferenceIds as id}
<DropdownItem on:click={() => (pronoun.status = id)} active={pronoun.status === id}>
<Icon name={mergedPreferences[id].icon} aria-hidden />
{mergedPreferences[id].tooltip}
</DropdownItem>
{/each}
</DropdownMenu>
</ButtonDropdown>
<IconButton color="danger" icon="trash3" tooltip="Remove pronouns" click={remove} />