added QOL buttons in filter view (#171)

src/lib/components/plan/filter/FilterItem.svelte

@@ -8,15 +8,16 @@
 	export let lesson: Lesson;
 	export let filter: Filter;
 
-	let checked = !filter.ignoredLessons.includes(lesson.id.toString());
+	export let checked = !filter.ignoredLessons.includes(lesson.id.toString());
+
+	$: if (!checked) {
+		ignoreLesson(credentials, filter.name, lesson.id);
+	} else {
+		unignoreLesson(credentials, filter.name, lesson.id);
+	}
 
 	function handleClick() {
 		checked = !checked;
-		if (!checked) {
-			ignoreLesson(credentials, filter.name, lesson.id);
-		} else {
-			unignoreLesson(credentials, filter.name, lesson.id);
-		}
 	}
 </script>
 

src/lib/components/plan/filter/FilterQuickButton.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Icon from '$lib/components/common/Icon.svelte';
+	import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
+
+	export let icon: IconDefinition
+</script>
+
+<button class="bg-clickable rounded-lg p-1 flex gap-2 items-center justify-center" on:click>
+	<Icon icon={icon} />
+	<slot />
+</button>

src/lib/components/settings/SettingsButton.svelte

@@ -1,9 +1,3 @@
-<script lang="ts">
-	import type { MouseEventHandler } from 'svelte/elements';
-
-	export let onClick: MouseEventHandler<HTMLButtonElement>;
-</script>
-
-<button class="bg-clickable col-span-5 rounded-lg p-1" on:click={onClick}>
+<button class="bg-clickable col-span-5 rounded-lg p-1" on:click>
 	<slot />
 </button>

src/routes/(app)/plan/[type]/[short]/filter/+page.svelte

@@ -3,18 +3,44 @@
 	import FilterItem from '$lib/components/plan/filter/FilterItem.svelte';
 	import BackButton from '$lib/components/common/BackButton.svelte';
 	import { setActive } from '$lib/filter/filterHelper';
+	import { faCheckCircle } from '@fortawesome/free-regular-svg-icons/faCheckCircle';
+	import { faCircle } from '@fortawesome/free-regular-svg-icons/faCircle';
+	import { faShuffle } from '@fortawesome/free-solid-svg-icons/faShuffle';
+	import FilterQuickButton from '$lib/components/plan/filter/FilterQuickButton.svelte';
 
 	export let data: PageData;
 
 	let active = data.filter.active;
 
+	// This contains the checked state of each filter item
+	// Yes, this is a bit hacky, but as long as it works...
+	const filterItems: Record<string, boolean> = {};
+
 	function toggleActive() {
 		setActive(data.credentials, data.filter.name, active);
 	}
+
+	function allActive() {
+		Object.keys(filterItems).forEach((key) => {
+			filterItems[key] = true;
+		});
+	}
+
+	function allInactive() {
+		Object.keys(filterItems).forEach((key) => {
+			filterItems[key] = false;
+		});
+	}
+
+	function allInvert() {
+		Object.keys(filterItems).forEach((key) => {
+			filterItems[key] = !filterItems[key];
+		});
+	}
 </script>
 
 <div class="flex h-full flex-col">
-	<div class="mb-2 flex w-full justify-between">
+	<div class="flex w-full justify-between">
 		<BackButton />
 
 		<div class="flex items-center justify-end gap-1">
@@ -30,9 +56,23 @@
 		</div>
 	</div>
 
+	<div class="grid grid-cols-3 gap-2 py-3">
+		<FilterQuickButton icon={faCheckCircle} on:click={allActive}>
+			Alle
+		</FilterQuickButton>
+
+		<FilterQuickButton icon={faCircle} on:click={allInactive}>
+			Nichts
+		</FilterQuickButton>
+
+		<FilterQuickButton icon={faShuffle} on:click={allInvert}>
+			Umkehren
+		</FilterQuickButton>
+	</div>
+
 	<ul class="grid max-h-full grid-cols-2 gap-4 overflow-y-auto">
 		{#each data.timetable as lesson}
-			<FilterItem {lesson} filter={data.filter} credentials={data.credentials} />
+			<FilterItem {lesson} filter={data.filter} credentials={data.credentials} bind:checked={filterItems[lesson.name+lesson.id]} />
 		{/each}
 	</ul>
 </div>

src/routes/(app)/settings/+page.svelte

@@ -32,14 +32,14 @@
 
 		<SettingsCheckbox bind:checked={$settingsStore.darkMode}>Dark Mode</SettingsCheckbox>
 
-		<SettingsButton onClick={() => ($settingsStore.primaryColor = PRIMARY_COLOR)}
+		<SettingsButton on:click={() => ($settingsStore.primaryColor = PRIMARY_COLOR)}
 			>Standardfarbe</SettingsButton
 		>
 	</SettingsSection>
 
 	<SettingsSection>
 		<svelte:fragment slot="title">Entwickleroptionen</svelte:fragment>
 
-		<SettingsButton onClick={clrCache}>Clear Cache</SettingsButton>
+		<SettingsButton on:click={clrCache}>Clear Cache</SettingsButton>
 	</SettingsSection>
 </div>