Add presets for homework

src/enums/svocal.ts

@@ -44,5 +44,10 @@ export enum SvocalKeys {
 	/**
 	 * Default: login, homework, events, notes
 	 */
-	NAVBAR_IDS = 'navbar.ids'
+	NAVBAR_IDS = 'navbar.ids',
+
+	/**
+	 * Default: []
+	 */
+	AUTOFILL_HOMEWORK_STRINGS = 'autofill.homework.strings'
 }

src/languages/de.ts

@@ -202,6 +202,7 @@ const de = {
 	'settings.nav.tooltip': 'Bewege die icons einfach via Drag and Drop an die gewünschte Position',
 	'settings.apperance.homework.opacity': 'Transparenz abgelaufener Hausaufgaben',
 	'settings.homework.amount': 'Hausaufgaben pro Seite',
+	'settings.homework.presets': 'Voreinstellungen für Aufgabenstellungen',
 
 	'settings.subjectColors': 'Farben für Fächer',
 	'settings.subjectColors.import': 'Importiere die Farben von einer JSON-Datei',

src/languages/en.ts

@@ -197,6 +197,7 @@ const en = {
 	'settings.nav.tooltip': 'Simply move the icons via drag and drop to their desired position',
 	'settings.apperance.homework.opacity': 'Transparency of finished homework',
 	'settings.homework.amount': 'Homework per page',
+	'settings.homework.presets': 'Presets for homework',
 
 	'settings.subjectColors': 'Colors for subjects',
 	'settings.subjectColors.import': 'Import colors from a JSON file',

src/lib/homework/CreateHomeworkAssignment.svelte

@@ -12,6 +12,8 @@
 	import type { CustomDate } from '../../types/customDate';
 	import type { WeekDay } from '../../constants/weekDays';
 	import deepEqual from 'deep-equal';
+	import { localstorage } from 'svocal';
+	import { SvocalKeys } from '../../enums/svocal';
 
 	// export let assignment: Assignment;
 	export let subject: string;
@@ -28,24 +30,33 @@
 	let inputModified = true;
 	const inputModifiedFalse = () => (inputModified = false);
 
+	let showPresets = false;
+	let presets: string[] = [];
+	let presetsAreEnabled = false;
+
+	const autofillSvocal = localstorage<string[]>(SvocalKeys.AUTOFILL_HOMEWORK_STRINGS, []);
+
+	autofillSvocal.subscribe((val) => {
+		presets = val;
+		presetsAreEnabled = val.length > 0;
+	});
+
 	$: {
 		fromAbbr;
 		inputModifiedFalse();
 	}
 
-	$: {
-		(() => {
-			if (!canUseTimetable) return;
-			fromAbbr = getWeekdayAbbreviationByDate(fromDate);
-			dueWeekday = nextWeekdayForSubject(fromAbbr, subject);
-
-			if (!inputModified) {
-				due = nextCustomDateForWeekday(dueWeekday, fromDate);
-			} else {
-				inputModifiedFalse();
-			}
-		})();
-	}
+	$: (() => {
+		if (!canUseTimetable) return;
+		fromAbbr = getWeekdayAbbreviationByDate(fromDate);
+		dueWeekday = nextWeekdayForSubject(fromAbbr, subject);
+
+		if (!inputModified) {
+			due = nextCustomDateForWeekday(dueWeekday, fromDate);
+		} else {
+			inputModifiedFalse();
+		}
+	})();
 
 	let autocompleteSubjects = $settings.useTimeTableForAutcomplete
 		? $timetable[fromAbbr]
@@ -117,14 +128,37 @@
 			</span>
 		</div>
 	</span>
-	<I18n>
-		<textarea
-			bind:value={description}
-			placeholder={i('homework.add.description')}
-			class="w-full outline-1 outline-gray-400 outline rounded-sm p-1"
-			rows="2"
-		/>
-	</I18n>
+	<div class:relative={!showPresets} class:flex={showPresets}>
+		{#if showPresets}
+			<select
+				class="bg-transparent inline-block pl-2 pr-4 py-2 rounded-md text-light-text dark:text-dark-text border-solid border-emerald-400 dark:border-emerald-700 border-2 w-full"
+				bind:value={description}
+			>
+				{#each presets as value}
+					<option {value} selected={description == value}>{value}</option>
+				{/each}
+			</select>
+		{:else}
+			<I18n>
+				<textarea
+					bind:value={description}
+					placeholder={i('homework.add.description')}
+					class="w-full outline-1 outline-gray-400 outline rounded-sm p-1"
+					rows="2"
+				/>
+			</I18n>
+		{/if}
+		{#if presetsAreEnabled}
+			<QuickActionButton
+				iconName="bx-book-bookmark"
+				focusedIconName="bxs-book-bookmark"
+				color={showPresets ? '' : 'absolute bottom-0 right-0'}
+				on:click={() => {
+					showPresets = !showPresets;
+				}}
+			/>
+		{/if}
+	</div>
 </div>
 
 <style>

src/lib/preferences/Presets.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { localstorage } from 'svocal';
+	import { SvocalKeys } from '../../enums/svocal';
+	import QuickActionButton from '$lib/QuickActionButton.svelte';
+	import I18n from '$lib/I18n.svelte';
+
+	const svocal = localstorage<string[]>(SvocalKeys.AUTOFILL_HOMEWORK_STRINGS, []);
+
+	let inputValue = '';
+
+	const isCompatibleWithList = (inputValue: string) => {
+		const listIsEmpty = $svocal.length === 0;
+		if (listIsEmpty) return true;
+
+		const existsInList = $svocal.some((s) => s === inputValue);
+		if (existsInList) return false;
+
+		return true;
+	};
+</script>
+
+<div class="flex justify-between">
+	<span><I18n key="settings.homework.presets" /></span>
+
+	<div class="flex flex-col">
+		<ul>
+			{#each $svocal as preset}
+				<li class="flex justify-between items-center">
+					{preset}
+					<QuickActionButton
+						iconName="bx-trash"
+						color="text-red-600"
+						on:click={() => {
+							svocal.update((val) => val.filter((s) => s !== preset));
+						}}
+					/>
+				</li>
+			{/each}
+		</ul>
+
+		<span>
+			<input
+				class="rounded-sm text-light-text dark:text-light-text px-2 py-0.5"
+				bind:value={inputValue}
+			/>
+			<QuickActionButton
+				iconName="bx-plus"
+				color="text-green-600"
+				disabled={!isCompatibleWithList(inputValue) || !inputValue.trim()}
+				on:click={() => {
+					svocal.update((val) => [...val, inputValue.trim()]);
+					inputValue = '';
+				}}
+			/>
+		</span>
+	</div>
+</div>

src/routes/settings/preferences/+page.svelte

@@ -5,6 +5,7 @@
 	import Theme from '$lib/preferences/Theme.svelte';
 	import ChangeHomeworkOpacity from '$lib/preferences/ChangeHomeworkOpacity.svelte';
 	import HomeworkPerPage from '$lib/preferences/HomeworkPerPage.svelte';
+	import Presets from '$lib/preferences/Presets.svelte';
 </script>
 
 <div>
@@ -21,6 +22,7 @@
 				<h4><I18n key="homework" /></h4>
 				<ChangeHomeworkOpacity />
 				<HomeworkPerPage />
+				<Presets />
 			</section>
 		</div>
 	</section>