feat: handle persist input data

Author: khajornritdacha

src/components/GroupInformation.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
-	import { data_store, groups_store } from '../store';
+	import { data_store } from '../store';
 
 	export let group_cnt: number;
 	export let day: number;
-	export let disableGenerateControlSheet: boolean;
-	export let enableForbiddenPairs: boolean;
-	const PRIMES = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
 </script>
 
 <div class="flex flex-col justify-center">
@@ -40,25 +37,4 @@
 			id="n_day"
 		/>
 	</div>
-
-	<!-- <div class="flex flex-row mt-4 gap-6 items-center">
-		<input
-			type="checkbox"
-			bind:checked={disableGenerateControlSheet}
-			disabled={!group_cnt}
-			class="p-2 ml-2 rounded mt-1"
-			id="control_sheet"
-		/>
-		<label class="py-3 text-xl flex font-bold" for="control_sheet">Download minimal version</label>
-	</div> -->
-	<div class="flex flex-row my-2 gap-6 items-center">
-		<input
-			type="checkbox"
-			bind:checked={enableForbiddenPairs}
-			disabled={!group_cnt}
-			class="p-2 ml-2 rounded mt-1"
-			id="forbiddenPairs"
-		/>
-		<label class="py-3 text-xl flex font-bold" for="forbiddenPairs">Enable Forbidden Pairs</label>
-	</div>
 </div>

src/routes/+page.svelte

@@ -7,14 +7,9 @@
 	import DropMember from '../components/DropMember.svelte';
 	import ForbiddenPair from '../components/ForbiddenPair.svelte';
 	import GroupInformation from '../components/GroupInformation.svelte';
-	import { data_store, groupOfMembers_store, groups_store, leader_store } from '../store';
+	import { data_store, groupOfMembers_store, groups_store, leader_store, group_cnt_store, day_store, forbiddenPairs_store } from '../store';
 	import toast, { Toaster } from 'svelte-french-toast';
-
-	let group_cnt = 0;
-	let day = 1;
-	let disableGenerateControlSheet: boolean = true;
-	let forbiddenPairs: string[][] = [];
-	let enableForbiddenPairs: boolean = false;
+	
 	let isLoading = false;
 	let intervalId: number | null = null;
 	let elapsedTime = 0;
@@ -48,9 +43,9 @@
 			data: {
 				members: $data_store,
 				leader: $leader_store,
-				group_cnt,
-				forbiddenPairs,
-				day
+				group_cnt: $group_cnt_store,
+				forbiddenPairs: $forbiddenPairs_store,
+				day: $day_store
 			}
 		});
 
@@ -121,23 +116,19 @@
 	</div>
 
 	<div
-		class={`flex flex-col justify-${
-			enableForbiddenPairs ? 'between' : 'center'
-		} items-center px-[5%] basis-1/2 min-h-[100vh]`}
+		class={`flex flex-col justify-between items-center px-[5%] basis-1/2 min-h-[100vh]`}
 	>
-		<div class={`flex flex-col justify-between gap-3 ${enableForbiddenPairs && 'pt-10'}`}>
+		<div class={`flex flex-col justify-between gap-3 pt-10`}>
 			<GroupInformation
-				bind:group_cnt
-				bind:day
-				bind:disableGenerateControlSheet
-				bind:enableForbiddenPairs
+				bind:group_cnt={$group_cnt_store}
+				bind:day={$day_store}
 			/>
 		</div>
-		{#if enableForbiddenPairs}
-			<ForbiddenPair bind:forbiddenPairs />
-		{/if}
-		<div class={`flex flex-col justify-between gap-3 ${enableForbiddenPairs && 'py-5'}`}>
-			<DownloadButton on:click={handleDownloadButton} {group_cnt} />
+		<div class={`flex flex-col justify-between py-5`}>
+			<ForbiddenPair bind:forbiddenPairs={$forbiddenPairs_store} />
+		</div>
+		<div class={`flex flex-col justify-between gap-3 py-5`}>
+			<DownloadButton on:click={handleDownloadButton} group_cnt={$group_cnt_store} />
 		</div>
 	</div>
 	{#if isLoading}

src/store.ts

@@ -8,4 +8,8 @@ export const groups_store = writable<Person[][][]>([]);
 export const groupOfMembers_store = writable<number[][]>([]);
 export const forbiddenPairs_store = writable<string[][]>([])
 
+// Persistent UI state stores
+export const group_cnt_store = writable<number>(0);
+export const day_store = writable<number>(1);
+
 export const workbook_store = writable<WorkBook | null>(null);