chellaris-sign-up-site/src/routes/admin/new/+page.svelte

<svelte:options runes={true} />

<script lang="ts">
	import { Separator } from '$lib/components/ui/separator';
	import * as Collapsible from "$lib/components/ui/collapsible";
	import { Button } from '$lib/components/ui/button';
	import { CaretDown, CaretRight } from 'radix-icons-svelte';
	import { Checkbox } from '$lib/components/ui/checkbox';
	import { Label } from '$lib/components/ui/label';

	// Dummy Data, Replace with API fetch
	function defaultGroups() {
		return [
			{
				id: 0,
				checked: false,
				name: "Test Group 1"
			},
			{
				id: 1,
				checked: false,
				name: "Test Group 2"
			}
		]
	}

	type Group = {
		id: number,
		checked: boolean,
		name: string
	}

	type Game = {
		id: number,
		checked: boolean,
		name: string,
		groups: Array<Group>
	}

	let games: Array<Game> = $state([
		{
			id: 0,
			checked: false,
			name: "Test 1",
			groups: defaultGroups()
		},
		{
			id: 1,
			checked: false,
			name: "Test 2",
			groups: defaultGroups()
		},
		{
			id: 2,
			checked: false,
			name: "Test 3",
			groups: defaultGroups()
		},
		{
			id: 3,
			checked: false,
			name: "Test 4",
			groups: defaultGroups()
		}
	])

	$effect(() => {
		console.log(games)
	})


	function toggleGame(id: number) {
		games[id].checked = !games[id].checked;
		games = games;
	}

	let test = $state([
		true,
		false,
		true
	])

	let filterWidth = 90
</script>

<div class="h-full grid grid-cols-5">
	<div class="p-2 flex flex-col items-center border-r-2 border-accent">
		<h2 class="py-2">Editing Mode</h2>
		<Separator orientation="horizontal" class="w-[{filterWidth}%]" />
		<h2 class="py-2">Filters</h2>
		<Separator orientation="horizontal" class="w-[{filterWidth}%]" />
		<Collapsible.Root class="w-[{filterWidth}%] space-y-2 py-2">
			<Collapsible.Trigger asChild let:builder>
				<Button builders={[builder]} variant="ghost" size="sm" class="w-full p-0 justify-start">
					{#if builder["data-state"] == "open"}
						<CaretDown />
					{:else}
						<CaretRight />
					{/if}
					<h4 class="rounded-md text-sm font-semibold text-left align-middle">
						Games
					</h4>
				</Button>
			</Collapsible.Trigger>
			<Collapsible.Content class="space-y-2">
				{#each games as game}
					<div class="pl-4 flex items-center space-x-2">
						<Checkbox id="{game.id.toString()}" checked={game.checked} on:click={() => game.checked = !game.checked} />
						<Label
							for="{game.id.toString()}"
							class=""
						>
							{game.name}
						</Label>
					</div>
				{/each}
			</Collapsible.Content>
		</Collapsible.Root>
		<Separator orientation="horizontal" class="w-[{filterWidth}%]" />
		<Collapsible.Root class="w-[{filterWidth}%] space-y-2 py-2">
			<Collapsible.Trigger asChild let:builder>
				<Button builders={[builder]} variant="ghost" size="sm" class="w-full p-0 justify-start">
					{#if builder["data-state"] == "open"}
						<CaretDown />
					{:else}
						<CaretRight />
					{/if}
					<h4 class="rounded-md text-sm font-semibold text-left align-middle">
						Groups
					</h4>
				</Button>
			</Collapsible.Trigger>
			<Collapsible.Content class="space-y-2">
				{#if games.filter(value => value.checked == true).length == 0}
					<div class="pl-4 flex flex-col items-center space-x-2 text-muted-foreground">
						<Label class="text-center" >No Games Selected</Label>
					</div>
				{/if}
				{#each games as game}
					{#if game.checked}
						{#each game.groups as group}
							<div class="pl-4 flex items-center space-x-2">
								<Checkbox id="{game.id}-{group.id}" checked={group.checked} on:click={() => {games[game.id].groups[group.id].checked = !group.checked}} />
								<Label
									for="{game.id}-{group.id}"
									class=""
								>
									{game.name} {group.name}
								</Label>
							</div>
						{/each}
					{/if}
				{/each}
			</Collapsible.Content>
		</Collapsible.Root>
	</div>
	<div class="col-span-2 border-r-2 border-accent">B</div>
	<div class=""></div>
</div>