Create Bitfield Selector component

Until now a bit field was only used for card flags. Soon (aka in uncommited changes) there are more
bit fields used. Creating a new component for every bit field would be unnecessary and bad coding
style, so I created a component that works for all bit fields and replaced all usages of the old
PermSelect component with the new one.

src/components/BitfieldSelector.svelte

+<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}

src/routes/admin/user/[id]/CardItem.svelte

 <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}

src/routes/admin/user/[id]/CardList.svelte

 <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>

src/routes/admin/user/[id]/PermSelect.svelte

-<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} />
-