diff --git a/src/components/BitfieldSelector.svelte b/src/components/BitfieldSelector.svelte new file mode 100644 index 0000000000000000000000000000000000000000..3e1c2b3ec69f868b868aff00dadb44703628285f --- /dev/null +++ b/src/components/BitfieldSelector.svelte @@ -0,0 +1,27 @@ +<script lang="ts"> + export let fields: {name: string, value: number}[]; + export let value: number; + export let formName: string|undefined = undefined; + export let formFieldName: string|undefined = undefined; + let list = fields.map(({value})=>value).filter(x=>x&value); + $: selectedValue = list.reduce((a,b)=>a|b, 0); +</script> + +<style> + ul { + list-style: none; + padding: 0; + margin: 0; + } +</style> + +<ul> + {#each fields as {name, value}} + <li> + <label><input type="checkbox" bind:group={list} value={value} />{name}</label> + </li> + {/each} +</ul> +{#if formName} + <input type="hidden" name={formFieldName} value={selectedValue} form={formName} /> +{/if} diff --git a/src/routes/admin/user/[id]/CardItem.svelte b/src/routes/admin/user/[id]/CardItem.svelte index 2ee95ca49c7a77d0489094f585ae7f8eb65eae1f..93ab7079cee524aaf5996e0fed8a1451ef29db1a 100644 --- a/src/routes/admin/user/[id]/CardItem.svelte +++ b/src/routes/admin/user/[id]/CardItem.svelte @@ -1,7 +1,7 @@ <script> - import PermSelect from "./PermSelect.svelte"; import { addMessage, MessageType } from "$lib/messages"; import { Flags } from "$lib/flags"; + import BitfieldSelector from "../../../../components/BitfieldSelector.svelte"; export let code, perms, cards, index, edit; function deleteCard(){ @@ -26,7 +26,7 @@ {#if edit} <tr> <td>{code}</td> - <td><PermSelect formName="form{code}" {perms} /></td> + <td><BitfieldSelector value={perms} fields={Object.entries(Flags).map(([name, value])=>({name, value}))} formName="form{code}" formFieldName="perms" /></td> <td><button type="submit" form="form{code}">Speichern</button><button on:click={()=>edit=false}>Abbrechen</button></td> </tr> {:else} diff --git a/src/routes/admin/user/[id]/CardList.svelte b/src/routes/admin/user/[id]/CardList.svelte index ddc3c7efa4c8f342fe9788dd1aa2b02b822e5f6e..1e7ab1778d0015a728e631829747131ff0312c1b 100644 --- a/src/routes/admin/user/[id]/CardList.svelte +++ b/src/routes/admin/user/[id]/CardList.svelte @@ -1,8 +1,9 @@ <script> import CardItem from "./CardItem.svelte"; import { enhance } from "$app/forms"; - import PermSelect from "./PermSelect.svelte"; import { addMessage, MessageType } from "$lib/messages"; + import BitfieldSelector from "../../../../components/BitfieldSelector.svelte"; + import { Flags } from "$lib/flags"; export let cards; let edit = cards.map(() => false); @@ -19,7 +20,7 @@ {/each} <tr> <td><input form="form-new" name="code" /></td> - <td><PermSelect perms={0} formName="form-new" /></td> + <td><BitfieldSelector value={0} fields={Object.entries(Flags).map(([name, value])=>({name, value}))} formName="form-new" formFieldName="perms" /></td> <td><button type="submit" form="form-new">Erstellen</button></td> </tr> </table> diff --git a/src/routes/admin/user/[id]/PermSelect.svelte b/src/routes/admin/user/[id]/PermSelect.svelte deleted file mode 100644 index 0cb537db586427a308cba880b29374a673b622e0..0000000000000000000000000000000000000000 --- a/src/routes/admin/user/[id]/PermSelect.svelte +++ /dev/null @@ -1,24 +0,0 @@ -<script> - import { Flags } from "$lib/flags"; - export let formName, perms; - let permsList = Object.values(Flags).filter(x=>x&perms); - $: selectedPerms = permsList.reduce((a,b)=>a+b, 0); -</script> - -<style> - ul { - list-style: none; - padding: 0; - margin: 0; - } -</style> - -<ul> - {#each Object.keys(Flags) as p} - <li> - <label><input type="checkbox" bind:group={permsList} value={Flags[p]} />{p}</label> - </li> - {/each} -</ul> -<input type="hidden" name="perms" value={selectedPerms} form={formName} /> -