esercitazione 11

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>

TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/icon.svelte

@@ -1,5 +1,7 @@
 <script>
 	export let name;
+	export let handler = () => {};
+	export let color = "green";
 </script>
 
 <svelte:head>
@@ -9,12 +11,17 @@
 	/>
 </svelte:head>
 
-<span class="material-icons-outlined icon">
+<span
+	class="material-icons-outlined icon"
+	style="--color:{color};"
+	on:click={handler}
+>
 	{name}
 </span>
 
 <style>
 	.icon {
+		color: var(--color);
 		font-size: 32px;
 	}
 

TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/priority.svelte

@@ -0,0 +1,53 @@
+<script>
+	export let prio = 3;
+	export let disabled = false;
+
+	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={disabled ? "DISABILITATO" : prio2str(prio)} on:click={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;
+	}
+
+	.DISABILITATO {
+		background-color: gray;
+	}
+
+	.ALTA {
+		background-color: red;
+	}
+
+	.MEDIA {
+		background-color: orange;
+	}
+
+	.BASSA {
+		background-color: green;
+	}
+</style>

TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_item.svelte

@@ -1,18 +1,74 @@
 <script>
+	import { createEventDispatcher } from "svelte";
 	import Cell from "./cell.svelte";
 	import Icon from "./icon.svelte";
-</script>
+	import Priority from "./priority.svelte";
 
-<Cell>id</Cell>
+	export let todo;
+	const dispatch = createEventDispatcher();
 
-<Cell>
-	<Icon name="circle" />
-</Cell>
+	const toggle_status = () => {
+		todo.done = !todo.done;
+	};
 
-<Cell>task</Cell>
+	const edit_task = () => {
+		document.getElementById(todo.id).blur();
+	};
 
-<Cell>priorità</Cell>
+	const item_change = (type) => {
+		dispatch("change", { type: type, id: todo.id });
+	};
+</script>
 
 <Cell>
-	<Icon name="delete_forever" />
+	{todo.id}
+</Cell>
+<Cell>
+	{#if todo.done == false}
+		<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 {todo.done == true ? 'text-done' : ''}"
+		id={todo.id}
+		placeholder="inserisci il nuovo ToDo"
+		bind:value={todo.task}
+		on:change={edit_task}
+	/>
+</Cell>
+<Cell>
+	<Priority disabled={todo.done} />
+</Cell>
+<Cell last>
+	<Icon
+		name="delete_forever"
+		color="red"
+		handler={() => item_change("delete")}
+	/>
 </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;
+	}
+
+	.text-done {
+		text-decoration: line-through;
+		opacity: 0.3;
+	}
+</style>

TPSI/girone_riccardo/svelte/ToDoSWeb-App/todos-web/src/components/todo_list.svelte

@@ -1,28 +1,89 @@
 <script>
 	import Icon from "./icon.svelte";
 	import TodoItem from "./todo_item.svelte";
+	import { onMount } from "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);
+
+		localStorage.setItem("todo" + todo.id, JSON.stringify(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);
+	};
+
+	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>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" /></div>
+	<div class="header header-last">
+		<Icon name="add_box" handler={create_todo} />
+	</div>
 
-	<TodoItem />
-	<TodoItem />
-	<TodoItem />
+	{#each todos as 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>