From 8d11b6d9a6154325c0f55b5fd6ace09287c48292 Mon Sep 17 00:00:00 2001
From: Dlurak <84224239+Dlurak@users.noreply.github.com>
Date: Thu, 18 Jan 2024 22:00:58 +0100
Subject: [PATCH] Optimized lesson deletion and subject list for autocomplete

---
 src/routes/settings/timetable/+page.svelte | 29 ++++++++++++++--------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/routes/settings/timetable/+page.svelte b/src/routes/settings/timetable/+page.svelte
index 6c9ed58..b2f2ac2 100644
--- a/src/routes/settings/timetable/+page.svelte
+++ b/src/routes/settings/timetable/+page.svelte
@@ -4,6 +4,7 @@
 	import { getWeekdayByAbbreviation } from '$lib/dates/dataWeekday';
 	import QuickActionButton from '$lib/QuickActionButton.svelte';
 	import I18n from '$lib/I18n.svelte';
+	import { subjectsSortetCapitalized } from '../../../constants/subjecticons';
 
 	const getWeekdays = () =>
 		(Object.keys($timetable) as WeekDay[]).map((abbr) => ({
@@ -108,17 +109,25 @@
 											sanitizeTimetable();
 										}}
 										class="rounded-sm text-light-text dark:text-light-text px-2 py-0.5 bg-gray-200"
+										list="subjects"
 									/>
-									<QuickActionButton
-										iconName="bx bx-trash"
-										color="text-red-500"
-										on:click={() => {
-											const lessons = $timetable[weekdays[j].abbr];
-											const splicedLessons = lessons.toSpliced(i, 1);
-
-											timetable.update((t) => ({ ...t, [weekdays[j].abbr]: splicedLessons }));
-										}}
-									/>
+									<datalist id="subjects">
+										{#each subjectsSortetCapitalized as subj}
+											<option value={subj} />
+										{/each}
+									</datalist>
+									{#if lesson.trim()}
+										<QuickActionButton
+											iconName="bx bx-trash"
+											color="text-red-500"
+											on:click={() => {
+												const lessons = $timetable[weekdays[j].abbr];
+												const splicedLessons = lessons.toSpliced(i, 1);
+
+												timetable.update((t) => ({ ...t, [weekdays[j].abbr]: splicedLessons }));
+											}}
+										/>
+									{/if}
 								</div>
 							</td>
 						{/each}