fix: bind group_cnt and day

khajornritdacha · Dec 20, 2023 · c3182ea · c3182ea
1 parent 5f08cbc
commit c3182ea
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 19 deletions.
diff --git a/src/components/GroupInformation.svelte b/src/components/GroupInformation.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { data } from '../store';
 
-	export let group_cnt = 0;
-	export let day = 1;
+	export let group_cnt: number;
+	export let day: number;
 	const PRIMES = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29];
+
+	$: console.log(`group_cnt in children= ${group_cnt}`);
 </script>
 
 <div class="flex flex-col pt-10 justify-center">

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,25 +1,27 @@
 <script lang="ts">
-	import DownloadButton from "../components/DownloadButton.svelte";
-	import DropMember from "../components/DropMember.svelte";
-	import Footer from "../components/Footer.svelte";
-	import ForbiddenPair from "../components/ForbiddenPair.svelte";
-	import GroupInformation from "../components/GroupInformation.svelte";
-    // import Modal from 'svelte-parts/Modal.svelte';
+	import DownloadButton from '../components/DownloadButton.svelte';
+	import DropMember from '../components/DropMember.svelte';
+	import Footer from '../components/Footer.svelte';
+	import ForbiddenPair from '../components/ForbiddenPair.svelte';
+	import GroupInformation from '../components/GroupInformation.svelte';
+	// import Modal from 'svelte-parts/Modal.svelte';
 
-    let group_cnt = 0;
-    let day = 1;
+	let group_cnt = 0;
+	let day = 1;
+
+	$: console.log(`group_cnt = ${group_cnt}`);
 </script>
 
 <h1 class="font-bold text-7xl text-center py-10 text-indigo-950">Group Randomizer</h1>
 <div class="flex flex-row">
-    <div class="basis-1/2 m-5 flex flex-col items-center">
-        <DropMember />
-        <GroupInformation group_cnt={group_cnt} day={day}/>
-    </div>
-    <div class="basis-1/2 m-5 flex flex-col items-center">
-        <DownloadButton />
-        <ForbiddenPair />
-    </div>
+	<div class="basis-1/2 m-5 flex flex-col items-center">
+		<DropMember />
+		<GroupInformation bind:group_cnt bind:day />
+	</div>
+	<div class="basis-1/2 m-5 flex flex-col items-center">
+		<DownloadButton />
+		<ForbiddenPair />
+	</div>
 </div>
 
 <!-- TODO: let me learn about $: first, and I will go back to create modal -->
@@ -31,4 +33,4 @@
 
 <Footer />
 
-<!-- <button type="button" on:click={() => count += 1} class="bg-blue-500 text-white rounded px-4 py-2">Augment</button> -->
+<!-- <button type="button" on:click={() => count += 1} class="bg-blue-500 text-white rounded px-4 py-2">Augment</button> -->