From 31bfca72f89d7bde92f3a68b0991072e6cdc0ace Mon Sep 17 00:00:00 2001
From: Yassin <yassin@siouda.com>
Date: Mon, 20 Nov 2023 17:53:26 +0100
Subject: [PATCH] feat: basic toggle button

---
 src/routes/+page.svelte | 108 ++++++++++++++++++++++++----------------
 1 file changed, 64 insertions(+), 44 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e6083f5..fd7fdc9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,13 +16,12 @@
 	}
 	let display = false;
 
-	let url = $page.url.href
-
+	let url = $page.url.href;
 
 	async function parse() {
-		const mainCatLines = await parseCSV(url +'/main.csv');
-		const catLines = await parseCSV(url +'/category.csv');
-		const itemLines = await parseCSV(url +'/items.csv');
+		const mainCatLines = await parseCSV(url + '/main.csv');
+		const catLines = await parseCSV(url + '/category.csv');
+		const itemLines = await parseCSV(url + '/items.csv');
 
 		let categories = catLines.map(([category_label, category_index]) => ({
 			category_index: category_index?.replace('\r', ''), // Remove the carriage return "\r
@@ -42,6 +41,7 @@
 			category_index: category_index.replace('\r', ''), // Remove the carriage return "\r
 			category_label: category_label,
 			checked: true,
+			toggle: false,
 			sub_categorie_items: category_index
 				.split(';')
 				.map((index) => categories.find((cat) => cat.category_index === index))
@@ -61,23 +61,29 @@
 		displayedCategories = spliced;
 	}
 
-	onMount(parse);
+	onMount(() => {
+		parse();
+	});
+
 </script>
 
 <section>
 	<div class="flex justify-center p-4">
 		<div class="flex w-auto h-20">
-			<img src={url +'/logos/interpretable.png'} alt="logo" class="pr-4"/>
-			<img src={url +'/logos/logo_erasme_entete.png'} alt="logo"  class="h-auto"/>
+			<img src={url + '/logos/interpretable.png'} alt="logo" class="pr-4" />
+			<img src={url + '/logos/logo_erasme_entete.png'} alt="logo" class="h-auto" />
 		</div>
 	</div>
 
 	<div class="text-center text-2xl">
-		Interprétable est un outil de communication utilisant des pictogrammes.<br>
-		Il a été développé par le laboratoire d'innovation ouverte Erasme de la Métropole de Lyon.<br>
-		Pour plus d'information visitez la page <a class="text-purple-600 " href="https://erasme.org/interpretable" target="_blank">https://erasme.org/interpretable</a>.<br>
+		Interprétable est un outil de communication utilisant des pictogrammes.<br />
+		Il a été développé par le laboratoire d'innovation ouverte Erasme de la Métropole de Lyon.<br />
+		Pour plus d'information visitez la page
+		<a class="text-purple-600" href="https://erasme.org/interpretable" target="_blank"
+			>https://erasme.org/interpretable</a
+		>.<br />
 	</div>
-	
+
 	<button
 		class="print:hidden roun bg-purple-600 p-3 rounded-3xl text-white fixed bottom-5 right-5 flex items-center hover:scale-125"
 		on:click={() => window.print()}
@@ -87,6 +93,7 @@
 			<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
 			<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
 			<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+			<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
 			<style>
 				svg {
 					fill: #ffffff;
@@ -97,12 +104,13 @@
 		>
 		<p class="ml-4">Imprimer</p>
 	</button>
+
 	<div class="print:hidden">
 		<h1>Categories</h1>
 		{#if display}
 			{#each mainCategories as category, categoryIndex}
 				<div class="flex flex-col">
-					<div>
+					<div class="flex items-center">
 						<input
 							type="checkbox"
 							id={category.category_index}
@@ -110,41 +118,47 @@
 							value={category.category_index}
 							checked={category.checked}
 							on:change={(e) =>
-								displayedCategories = mainCategories.map((cat, catIndex) => {
+								(displayedCategories = mainCategories.map((cat, catIndex) => {
 									if (catIndex === categoryIndex) {
 										cat.checked = e.target.checked;
 									}
 									return cat;
-								}
-							)}
+								}))}
 						/>
-						<label for={category.category_index} class="ml-2">{category.category_label}</label>
+						<label for={category.category_index} class="ml-2" >{category.category_label}</label>
+						<p class="text-3xl cursor-pointer text-white" on:click={() => category.toggle = !category.toggle}>
+							{#if !category.toggle}
+							<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 256 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>
+							{:else}
+							<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z"/></svg>
+							{/if}
+						</p>
+					</div>
+					<div class="{category.toggle ? '' : 'hidden'}">
+						{#each category.sub_categorie_items as subCategory, subCategoryIndex}
+							{#if subCategory}
+								<div class="ml-4">
+									<input
+										type="checkbox"
+										id={subCategory.category_index}
+										name={subCategory.category_index}
+										value={subCategory.category_index}
+										checked={subCategory.checked}
+										on:change={(e) =>
+											(displayedCategories = mainCategories.map((cat, catIndex) => {
+												if (catIndex === categoryIndex) {
+													cat.sub_categorie_items[subCategoryIndex].checked = e.target.checked;
+												}
+												return cat;
+											}))}
+									/>
+									<label for={subCategory.category_index} class="ml-2"
+										>{subCategory.category_label}</label
+									>
+								</div>
+							{/if}
+						{/each}
 					</div>
-
-					{#each category.sub_categorie_items as subCategory, subCategoryIndex}
-						{#if subCategory}
-							<div class="ml-4">
-								<input
-									type="checkbox"
-									id={subCategory.category_index}
-									name={subCategory.category_index}
-									value={subCategory.category_index}
-									checked={subCategory.checked}
-									on:change={(e) =>
-										displayedCategories = mainCategories.map((cat, catIndex) => {
-											if (catIndex === categoryIndex) {
-												cat.sub_categorie_items[subCategoryIndex].checked = e.target.checked;
-											}
-											return cat;
-										}
-									)}
-								/>
-								<label for={subCategory.category_index} class="ml-2"
-									>{subCategory.category_label}</label
-								>
-							</div>
-						{/if}
-					{/each}
 				</div>
 			{/each}
 		{/if}
@@ -160,7 +174,9 @@
 							<ul class="flex flex-wrap justify-center">
 								{#if category?.items}
 									{#each category.items as item, itemIndex}
-										<li class="w-1/3 md:w-1/5 lg:w-1/6 print:w-1/5 border border-solid border-r-4 rounded-lg m-1">
+										<li
+											class="w-1/3 md:w-1/5 lg:w-1/6 print:w-1/5 border border-solid border-r-4 rounded-lg m-1"
+										>
 											<button
 												class="print:hidden absolute -m-2 hover:scale-125"
 												on:click={() => removeItem(categoriesIndex, categoryIndex, itemIndex)}
@@ -170,6 +186,7 @@
 													<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
 													<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
 													<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+													<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
 													<style>
 														svg {
 															fill: #ff0000;
@@ -179,7 +196,10 @@
 													/></svg
 												>
 											</button>
-											<img src={url +'/svg/' + item.pictogram_file + '.svg'} alt={item.pictogram_label} />
+											<img
+												src={url + '/svg/' + item.pictogram_file + '.svg'}
+												alt={item.pictogram_label}
+											/>
 											<p>{item.pictogram_label}</p>
 										</li>
 									{/each}