Refactor the timetable

Dlurak · Aug 25, 2024 · 8e49b35 · 8e49b35
1 parent ce3318a
commit 8e49b35
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 43 deletions.
diff --git a/src/lib/components/timetable/TimetableCell.svelte b/src/lib/components/timetable/TimetableCell.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import TextInput from '$lib/components/input/Text.svelte';
+	import { i } from '$lib/i18n/store';
+	import { asyncRequestAnimationFrame } from '$lib/utils/dom';
+	import { svocal } from '$lib/utils/store/svocal';
+	import type { TimetableWeekday } from '../settings/timetable/types';
+	import { addRow, countMaxLessons, getLastLessons } from '../settings/timetable/utils';
+
+	export let isToday: boolean;
+	export let elements: Record<string, HTMLInputElement | undefined>;
+	export let day: TimetableWeekday;
+	export let dayIndex: number;
+	export let lessonIndex: number;
+
+	const timetable = svocal('settings.timetable');
+</script>
+
+<td
+	class="bg-opacity-20 px-1 py-3 dark:bg-opacity-10"
+	class:bg-emerald-200={isToday}
+	class:dark:bg-emerald-800={isToday}
+>
+	<TextInput
+		minimal
+		placeholder={i('settings.timetable.subject.placeholder')}
+		value={$timetable[day][lessonIndex] ?? undefined}
+		on:input={({ detail }) => {
+			$timetable[day][lessonIndex] = detail;
+		}}
+		on:enter={async () => {
+			const isOnlyNull = getLastLessons($timetable).every((x) => x === null);
+			const hasLessons = countMaxLessons($timetable) > 0;
+			if (!(isOnlyNull && hasLessons)) {
+				timetable.update(addRow);
+				await asyncRequestAnimationFrame();
+			}
+
+			const nextEle = elements[`${lessonIndex + 1}-${dayIndex}`];
+			if (!nextEle) return;
+
+			nextEle.focus();
+		}}
+		bind:element={elements[`${lessonIndex}-${dayIndex}`]}
+	/>
+</td>
diff --git a/src/lib/components/timetable/TimetableRow.svelte b/src/lib/components/timetable/TimetableRow.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { svocal } from '$lib/utils/store/svocal';
+	import { WEEKDAYS } from '../settings/timetable/weekdays';
+	import TimetableCell from './TimetableCell.svelte';
+
+	export let elements: Record<string, HTMLInputElement | undefined>;
+	export let lessonIndex: number;
+
+	const weekStartsOn = svocal('settings.weekStartsOn');
+	const showWeekend = svocal('settings.timetable.showWeekend');
+
+	const currentWeekday = WEEKDAYS[new Date().getDay()];
+</script>
+
+{#each WEEKDAYS as _, ind}
+	{@const day = WEEKDAYS[(ind + $weekStartsOn) % 7]}
+	{@const show = $showWeekend ? true : !(day === 'sat' || day === 'sun')}
+
+	{#if show}
+		<TimetableCell {day} {elements} {lessonIndex} dayIndex={ind} isToday={currentWeekday === day} />
+	{/if}
+{/each}
diff --git a/src/routes/settings/timetable/+page.svelte b/src/routes/settings/timetable/+page.svelte
@@ -6,7 +6,6 @@
 		removeNthLesson,
 		cleanUpTimeTable
 	} from '$lib/components/settings/timetable/utils';
-	import TextInput from '$lib/components/input/Text.svelte';
 	import QuickAction from '$lib/components/buttons/QuickAction.svelte';
 	import Store from '$lib/components/utils/Store.svelte';
 	import { i } from '$lib/i18n/store';
@@ -22,7 +21,7 @@
 	import { WEEKDAYS } from '$lib/components/settings/timetable/weekdays';
 	import BoolSetting from '$lib/components/settings/BoolSetting.svelte';
 	import { settingsHeader } from '$lib/stores';
-	import { asyncRequestAnimationFrame } from '$lib/utils/dom';
+	import TimetableRow from '$lib/components/timetable/TimetableRow.svelte';
 
 	const timetable = svocal('settings.timetable');
 	const weekStartsOn = svocal('settings.weekStartsOn');
@@ -34,8 +33,6 @@
 		timetable.update(cleanUpTimeTable);
 	});
 
-	const currentWeekday = WEEKDAYS[new Date().getDay()];
-
 	settingsHeader.set(i('settings.timetable.title'));
 
 	let elements: Record<string, HTMLInputElement | undefined> = {};
@@ -102,42 +99,7 @@
 							/>
 						</th>
 
-						{#each WEEKDAYS as _, ind}
-							{@const day = WEEKDAYS[(ind + $weekStartsOn) % 7]}
-							{@const isToday = currentWeekday === day}
-							{@const show = $showWeekend ? true : !(day === 'sat' || day === 'sun')}
-
-							{#if show}
-								<td
-									class="bg-opacity-20 px-1 py-3 dark:bg-opacity-10"
-									class:bg-emerald-200={isToday}
-									class:dark:bg-emerald-800={isToday}
-								>
-									<TextInput
-										minimal
-										placeholder={i('settings.timetable.subject.placeholder')}
-										value={$timetable[day][lessonIndex] ?? undefined}
-										on:input={({ detail }) => {
-											$timetable[day][lessonIndex] = detail;
-										}}
-										on:enter={async () => {
-											const isOnlyNull = getLastLessons($timetable).every((x) => x === null);
-											const hasLessons = countMaxLessons($timetable) > 0;
-											if (!(isOnlyNull && hasLessons)) {
-												timetable.update(addRow);
-												await asyncRequestAnimationFrame();
-											}
-
-											const nextEle = elements[`${lessonIndex + 1}-${ind}`];
-											if (!nextEle) return;
-
-											nextEle.focus();
-										}}
-										bind:element={elements[`${lessonIndex}-${ind}`]}
-									/>
-								</td>
-							{/if}
-						{/each}
+						<TimetableRow {elements} {lessonIndex} />
 					</tr>
 				{/each}
 
@@ -147,9 +109,7 @@
 							icon={Plus}
 							disabled={getLastLessons($timetable).every((x) => x === null) &&
 								countMaxLessons($timetable) > 0}
-							on:click={() => {
-								timetable.update(addRow);
-							}}
+							on:click={() => timetable.update(addRow)}
 						/>
 					</th>
 				</tr>