From a360caf479ea477aa073872f4cff3e1cb24c520f Mon Sep 17 00:00:00 2001
From: Riccardo <149433192+riccardo-girone@users.noreply.github.com>
Date: Mon, 3 Feb 2025 13:37:39 +0100
Subject: [PATCH 1/3] esercitazione 11

---
 .../todos-web/src/components/icon.svelte      |  3 +-
 .../todos-web/src/components/priority.svelte  | 45 ++++++++++++++++
 .../todos-web/src/components/todo_item.svelte | 52 +++++++++++++++++--
 .../todos-web/src/components/todo_list.svelte | 22 ++++++--
 4 files changed, 113 insertions(+), 9 deletions(-)
 create mode 100644 TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/priority.svelte

diff --git a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/icon.svelte b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/icon.svelte
index 40652d39..586e97f9 100644
--- a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/icon.svelte
+++ b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/icon.svelte
@@ -1,5 +1,6 @@
 <script>
 	export let name;
+	export let handler = () => {};
 </script>
 
 <svelte:head>
@@ -9,7 +10,7 @@
 	/>
 </svelte:head>
 
-<span class="material-icons-outlined icon">
+<span class="material-icons-outlined icon" on:click={handler}>
 	{name}
 </span>
 
diff --git a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/priority.svelte b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/priority.svelte
new file mode 100644
index 00000000..5a0913e0
--- /dev/null
+++ b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/priority.svelte
@@ -0,0 +1,45 @@
+<script>
+	export let prio = 3;
+
+	const prio2str = (prio) => {
+		let map = {
+			1: "ALTA",
+			2: "MEDIA",
+			3: "BASSA",
+		};
+		return map[prio];
+	};
+
+	const change_prio = () => {
+		prio = ((prio + 1) % 3) + 1;
+	};
+</script>
+
+<span class={prio2str(prio)} onclick={change_prio}>
+	{prio2str(prio)}
+</span>
+
+<style>
+	span {
+		display: inline-block;
+		border-radius: 5px;
+		color: white;
+		font-weight: bold;
+		width: 100px;
+		height: 30px;
+	}
+
+	span:hover {
+		cursor: pointer;
+	}
+
+	.ALTA {
+		background-color: red;
+	}
+	.MEDIA {
+		background-color: orange;
+	}
+	.BASSA {
+		background-color: green;
+	}
+</style>
diff --git a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_item.svelte b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_item.svelte
index 9928cceb..bf6719f7 100644
--- a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_item.svelte
+++ b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_item.svelte
@@ -1,18 +1,62 @@
 <script>
 	import Cell from "./cell.svelte";
 	import Icon from "./icon.svelte";
+	import Priority from "./priority.svelte";
+
+	export let todo;
+
+	const toggle_status = () => {
+		todo.done = !todo.done;
+	};
+
+	const edit_task = () => {
+		document.getElementById(todo.id).blur();
+	};
 </script>
 
-<Cell>id</Cell>
+<Cell>
+	{todo.id}
+</Cell>
 
 <Cell>
-	<Icon name="circle" />
+	{#if todo.done == false}
+		<Icon name="circle" handler={toggle_status} />
+	{:else}
+		<Icon name="task_alt" handler={toggle_status} />
+	{/if}
 </Cell>
 
-<Cell>task</Cell>
+<Cell>
+	<input
+		type="text"
+		class="todo-item-input-text"
+		id={todo.id}
+		placeholder="inserisci il nuovo todo"
+		bind:value={todo.task}
+		on:change={edit_task}
+	/>
+</Cell>
 
-<Cell>priorità</Cell>
+<Cell>
+	<Priority />
+</Cell>
 
 <Cell>
 	<Icon name="delete_forever" />
 </Cell>
+
+<style>
+	.todo-item-input-text {
+		border: none;
+		width: 90%;
+		height: 30px;
+		font-size: 20px;
+		color: #525252;
+	}
+	.todo-item-input-text:focus {
+		background-color: rgb(204, 229, 253);
+		color: black;
+		padding: 4px;
+		padding-left: 10px;
+	}
+</style>
diff --git a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_list.svelte b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_list.svelte
index f3227fc6..e824d044 100644
--- a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_list.svelte
+++ b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_list.svelte
@@ -1,6 +1,20 @@
 <script>
 	import Icon from "./icon.svelte";
 	import TodoItem from "./todo_item.svelte";
+
+	let todos = [];
+	let last_id = 0;
+
+	const create_todo = async () => {
+		let todo = {
+			id: ++last_id,
+			task: "",
+			done: false,
+			priority: 1,
+		};
+		console.log("CREATE", todo);
+		todos = [...todos, todo];
+	};
 </script>
 
 <h1>ToDos</h1>
@@ -9,11 +23,11 @@
 	<div class="header"><Icon name="task_alt" /></div>
 	<div class="header"><Icon name="list" /></div>
 	<div class="header"><Icon name="schedule" /></div>
-	<div class="header"><Icon name="add_box" /></div>
+	<div class="header"><Icon name="add_box" handler={create_todo} /></div>
 
-	<TodoItem />
-	<TodoItem />
-	<TodoItem />
+	{#each todos as todo}
+		<TodoItem {todo} />
+	{/each}
 </div>
 
 <style>

From 80fdfae2ec55e13412bb820e099d907edcebd7e5 Mon Sep 17 00:00:00 2001
From: Riccardo <149433192+riccardo-girone@users.noreply.github.com>
Date: Mon, 17 Feb 2025 12:52:48 +0100
Subject: [PATCH 2/3] esercitazioni

---
 .../todos-web/src/components/cell.svelte      | 10 +++-
 .../todos-web/src/components/icon.svelte      |  8 +++-
 .../todos-web/src/components/priority.svelte  | 10 +++-
 .../todos-web/src/components/todo_item.svelte | 32 +++++++++----
 .../todos-web/src/components/todo_list.svelte | 47 +++++++++++++++----
 5 files changed, 86 insertions(+), 21 deletions(-)

diff --git a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/cell.svelte b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/cell.svelte
index e468c477..23575502 100644
--- a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/cell.svelte
+++ b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/cell.svelte
@@ -1,4 +1,8 @@
-<div class="cell">
+<script>
+	export let last = false;
+</script>
+
+<div class="cell {last ? 'cell-last' : ''}">
 	<slot />
 </div>
 
@@ -12,4 +16,8 @@
 		line-height: 32px;
 		font-size: 18px;
 	}
+
+	.cell-last {
+		border-right: none;
+	}
 </style>
diff --git a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/icon.svelte b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/icon.svelte
index 586e97f9..9f6bacef 100644
--- a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/icon.svelte
+++ b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/icon.svelte
@@ -1,6 +1,7 @@
 <script>
 	export let name;
 	export let handler = () => {};
+	export let color = "green";
 </script>
 
 <svelte:head>
@@ -10,12 +11,17 @@
 	/>
 </svelte:head>
 
-<span class="material-icons-outlined icon" on:click={handler}>
+<span
+	class="material-icons-outlined icon"
+	style="--color:{color};"
+	on:click={handler}
+>
 	{name}
 </span>
 
 <style>
 	.icon {
+		color: var(--color);
 		font-size: 32px;
 	}
 
diff --git a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/priority.svelte b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/priority.svelte
index 5a0913e0..6eb24a5c 100644
--- a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/priority.svelte
+++ b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/priority.svelte
@@ -1,5 +1,6 @@
 <script>
 	export let prio = 3;
+	export let disabled = false;
 
 	const prio2str = (prio) => {
 		let map = {
@@ -7,6 +8,7 @@
 			2: "MEDIA",
 			3: "BASSA",
 		};
+
 		return map[prio];
 	};
 
@@ -15,7 +17,7 @@
 	};
 </script>
 
-<span class={prio2str(prio)} onclick={change_prio}>
+<span class={disabled ? "DISABILITATO" : prio2str(prio)} on:click={change_prio}>
 	{prio2str(prio)}
 </span>
 
@@ -33,12 +35,18 @@
 		cursor: pointer;
 	}
 
+	.DISABILITATO {
+		background-color: gray;
+	}
+
 	.ALTA {
 		background-color: red;
 	}
+
 	.MEDIA {
 		background-color: orange;
 	}
+
 	.BASSA {
 		background-color: green;
 	}
diff --git a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_item.svelte b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_item.svelte
index bf6719f7..14f4c85e 100644
--- a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_item.svelte
+++ b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_item.svelte
@@ -1,9 +1,11 @@
 <script>
+	import { createEventDispatcher } from "svelte";
 	import Cell from "./cell.svelte";
 	import Icon from "./icon.svelte";
 	import Priority from "./priority.svelte";
 
 	export let todo;
+	const dispatch = createEventDispatcher();
 
 	const toggle_status = () => {
 		todo.done = !todo.done;
@@ -12,37 +14,41 @@
 	const edit_task = () => {
 		document.getElementById(todo.id).blur();
 	};
+
+	const item_change = (type) => {
+		dispatch("change", { type: type, id: todo.id });
+	};
 </script>
 
 <Cell>
 	{todo.id}
 </Cell>
-
 <Cell>
 	{#if todo.done == false}
-		<Icon name="circle" handler={toggle_status} />
+		<Icon name="circle" handler={toggle_status} color="red" />
 	{:else}
 		<Icon name="task_alt" handler={toggle_status} />
 	{/if}
 </Cell>
-
 <Cell>
 	<input
 		type="text"
-		class="todo-item-input-text"
+		class="todo-item-input-text {todo.done == true ? 'text-done' : ''}"
 		id={todo.id}
-		placeholder="inserisci il nuovo todo"
+		placeholder="inserisci il nuovo ToDo"
 		bind:value={todo.task}
 		on:change={edit_task}
 	/>
 </Cell>
-
 <Cell>
-	<Priority />
+	<Priority disabled={todo.done} />
 </Cell>
-
-<Cell>
-	<Icon name="delete_forever" />
+<Cell last>
+	<Icon
+		name="delete_forever"
+		color="red"
+		handler={() => item_change("delete")}
+	/>
 </Cell>
 
 <style>
@@ -53,10 +59,16 @@
 		font-size: 20px;
 		color: #525252;
 	}
+
 	.todo-item-input-text:focus {
 		background-color: rgb(204, 229, 253);
 		color: black;
 		padding: 4px;
 		padding-left: 10px;
 	}
+
+	.text-done {
+		text-decoration: line-through;
+		opacity: 0.3;
+	}
 </style>
diff --git a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_list.svelte b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_list.svelte
index e824d044..2dcddc4d 100644
--- a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_list.svelte
+++ b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_list.svelte
@@ -12,31 +12,62 @@
 			done: false,
 			priority: 1,
 		};
-		console.log("CREATE", todo);
+		console.log("CREATE: ", todo);
 		todos = [...todos, todo];
 	};
+
+	const change_todo_item = async (e) => {
+		delete_item(e.detail.id);
+	};
+
+	const delete_item = (id) => {
+		console.log("DELETE:", id);
+		todos = todos.filter((t) => t.id != id);
+	};
 </script>
 
-<h1>ToDos</h1>
+<h1 class="app-title">ToDos</h1>
+
 <div class="todo-list">
 	<div class="header"><Icon name="tag" /></div>
 	<div class="header"><Icon name="task_alt" /></div>
 	<div class="header"><Icon name="list" /></div>
 	<div class="header"><Icon name="schedule" /></div>
-	<div class="header"><Icon name="add_box" handler={create_todo} /></div>
+	<div class="header header-last">
+		<Icon name="add_box" handler={create_todo} />
+	</div>
 
 	{#each todos as todo}
-		<TodoItem {todo} />
+		<TodoItem {todo} on:change={change_todo_item} />
 	{/each}
 </div>
 
 <style>
+	@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+
 	.todo-list {
-		border: 3px solid blue;
-		width: 95%;
-		height: 80%;
-		margin: auto;
 		display: grid;
 		grid-template-columns: 1fr 1fr 4fr 2fr 1fr;
+		border: 0px solid blue;
+		width: 95%;
+		margin: auto;
+	}
+
+	.header {
+		border-bottom: 1px solid #e7ecee;
+		border-right: 1px solid #e7ecee;
+		text-align: center;
+		padding-bottom: 20px;
+	}
+
+	.header-last {
+		border-right: none;
+	}
+
+	.app-title {
+		font-family: "Montserrat", serif;
+		margin-top: 0px;
+		font-size: 60px;
+		opacity: 0.3px;
 	}
 </style>

From 0d326700bb4d7f0b79f9c505c486faf516bf8af2 Mon Sep 17 00:00:00 2001
From: Riccardo <149433192+riccardo-girone@users.noreply.github.com>
Date: Mon, 17 Feb 2025 13:44:36 +0100
Subject: [PATCH 3/3] esercitazione 18

---
 .../todos-web/src/components/todo_list.svelte    | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_list.svelte b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_list.svelte
index 2dcddc4d..648e399e 100644
--- a/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_list.svelte
+++ b/TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_list.svelte
@@ -1,6 +1,7 @@
 <script>
 	import Icon from "./icon.svelte";
 	import TodoItem from "./todo_item.svelte";
+	import { onMount } from "svelte";
 
 	let todos = [];
 	let last_id = 0;
@@ -13,6 +14,9 @@
 			priority: 1,
 		};
 		console.log("CREATE: ", todo);
+
+		localStorage.setItem("todo" + todo.id, JSON.stringify(todo));
+
 		todos = [...todos, todo];
 	};
 
@@ -24,6 +28,18 @@
 		console.log("DELETE:", id);
 		todos = todos.filter((t) => t.id != id);
 	};
+
+	onMount(async () => {
+		for (let i = 0; i < localStorage.length; i++) {
+			const key = localStorage.key(i);
+			const todo = JSON.parse(localStorage.getItem(key));
+			if (todo != null) {
+				todos.push(todo);
+			}
+		}
+
+		todos = [...todos];
+	});
 </script>
 
 <h1 class="app-title">ToDos</h1>