From 63679a0008a8e3bf3a82995dc6b68a4e774ae2dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aaron=20D=C3=B6tsch?= <aaron@fsmpi.rwth-aachen.de>
Date: Fri, 4 Aug 2023 02:49:01 +0200
Subject: [PATCH] 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 | 27 ++++++++++++++++++++
src/routes/admin/user/[id]/CardItem.svelte | 4 +--
src/routes/admin/user/[id]/CardList.svelte | 5 ++--
src/routes/admin/user/[id]/PermSelect.svelte | 24 -----------------
4 files changed, 32 insertions(+), 28 deletions(-)
create mode 100644 src/components/BitfieldSelector.svelte
delete mode 100644 src/routes/admin/user/[id]/PermSelect.svelte
diff --git a/src/components/BitfieldSelector.svelte b/src/components/BitfieldSelector.svelte
new file mode 100644
index 0000000..3e1c2b3
--- /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 2ee95ca..93ab707 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 ddc3c7e..1e7ab17 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 0cb537d..0000000
--- 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} />
-
--
GitLab