added permission selector to account page

src/routes/user/+page.svelte

@@ -4,9 +4,9 @@
 	import { enhance } from "$app/forms"
 	import { page } from "$app/state"
 
-	const { data, form }: PageProps = $props()
+	import Permissions from "$lib/permissions"
 
-	$inspect(data)
+	const { data, form }: PageProps = $props()
 
 </script>
 
@@ -48,6 +48,69 @@
 		</tbody>
 	</table>
 
+	<table>
+		<colgroup>
+			<col class="leader2" />
+			<col class="form2" />
+		</colgroup>
+
+		<thead>
+			<tr><th colspan="2">Berechtigungen</th></tr>
+		</thead>
+		
+		<tbody>
+			<tr>
+				<td>Benutzerverwaltung</td>
+				<td>
+					<div class="permission-selector">
+						{#each Permissions.iterate(Permissions.USERADMIN) as permission}
+							<label for={permission.value}>
+								<input type="checkbox" id={permission.value} name="USERADMIN" value={permission.value} data-bits={Permissions.deconstruct(permission.value).join(" ")} onclick={(event) => {
+									const target = event.target as HTMLInputElement
+									const container = target.parentElement?.parentElement ?? target
+									
+									const bits = target.dataset?.bits?.split(" ")
+									if (!bits) return
+
+									if (bits.length > 1) {
+										for (const bit of bits) {
+											const affected = container.querySelectorAll(`input[data-bits="${bit}"]`) ?? []
+											for (const box of affected) {
+												(box as HTMLInputElement).checked = target.checked
+											}
+										}
+									} else {
+										const bit = bits[0]
+
+										const affected = container.querySelectorAll(`input[data-bits~="${bit}"]`) ?? []
+										for (const _box of affected) {
+											const box = _box as HTMLInputElement
+
+											const groupBits = box.dataset.bits?.split(" ") ?? [];
+											const children = groupBits.map(
+												b => container.querySelector(`input[data-bits="${b}"]`) as HTMLInputElement
+											);
+
+											const allChecked = children.every(cb => cb.checked);
+											const anyChecked = children.some(cb => cb.checked);
+
+											box.indeterminate = (box.indeterminate && anyChecked) || (box.checked && !allChecked && anyChecked)
+											box.checked = allChecked;
+										}
+									}
+
+
+
+								}} />
+								{permission.name}
+							</label>	
+						{/each}
+					</div>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+
 	<table>
 		<colgroup>
 			<col class="leader3" />
@@ -97,10 +160,23 @@ td {
 	width: 75%;
 }
 .form3 {
-	width: 37.5%
+	width: 37.5%;
 }
 
-input {
+.permission-selector {
+	width: 100%;
+	justify-items: center;
+}
+.permission-selector > label {
+	display: block;
+	width: 100%;
+}
+
+input[type="checkbox"] {
+	margin: 0px 10px;
+}
+
+input[type="text"] {
 	width: 100%;
 	border: none;
 	border-bottom: solid 1px black;