Skip to content
Snippets Groups Projects
Commit 63679a00 authored by Aaron Dötsch's avatar Aaron Dötsch
Browse files

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.
parent 73829214
No related branches found
No related tags found
No related merge requests found
<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}
<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}
......
<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>
......
<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} />
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment