refactor; sanity check before saving new order to localstorage

src/lib/TSHelpers/ComponentOrder.ts

@@ -0,0 +1,28 @@
+export const components: string[] = [
+	'BasicInfoTile',
+	'GradesTile',
+	'MensaTile',
+	'CalendarTile',
+	'ExamSignupTile'
+];
+
+export const tileNames: Map<string, string> = new Map([
+	['BasicInfoTile', 'Deine Infos'],
+	['GradesTile', 'Noten'],
+	['ExamSignupTile', 'Prüfungen'],
+	['MensaTile', 'Mensa'],
+	['CalendarTile', 'Kalender']
+]);
+
+export function validateComponentOrder(order: string[]): boolean {
+	if (
+		order.length == components.length &&
+		components.every((e) => {
+			return order.includes(e);
+		})
+	) {
+		return true;
+	} else {
+		return false;
+	}
+}

src/lib/TilesAndModals/DashReorderModal.svelte

@@ -7,31 +7,37 @@
 	export let parent: SvelteComponent;
 	export let componentOrder: Writable<string[]>;
 
-	const tileNames: Map<string, string> = new Map([
-		['BasicInfoTile', 'Deine Infos'],
-		['GradesTile', 'Noten'],
-		['ExamSignupTile', 'Prüfungen'],
-		['MensaTile', 'Mensa'],
-		['CalendarTile', 'Kalender']
-	]);
-
 	let items = $componentOrder.map((id) => ({ id, title: tileNames.get(id) }));
 
+	let dropTargetStyle = {};
+
 	function handleSort(e: CustomEvent) {
 		items = e.detail.items;
 	}
 
 	function finalize(e: CustomEvent) {
 		handleSort(e);
-		componentOrder.set(items.map((item) => item.id));
+		let newSort = items.map((item) => item.id);
+
+		if (!validateComponentOrder(newSort)) {
+			window.alert('Reorder failed');
+		} else {
+			componentOrder.set(newSort);
+		}
 	}
 
 	import { dndzone } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
+	import { tileNames, validateComponentOrder } from '$lib/TSHelpers/ComponentOrder';
 </script>
 
 <DashboardModal bind:parent title="Anordnung ändern">
-	<div class="space-y-2" use:dndzone={{ items }} on:consider={handleSort} on:finalize={finalize}>
+	<section
+		class="space-y-2"
+		use:dndzone={{ items, dropTargetStyle }}
+		on:consider={handleSort}
+		on:finalize={finalize}
+	>
 		{#each items as item (item.id)}
 			<div
 				animate:flip={{ duration: 200 }}
@@ -41,5 +47,5 @@
 				<i class="fa-solid fa-bars"></i>
 			</div>
 		{/each}
-	</div>
+	</section>
 </DashboardModal>