esercitazione_18

TPSI/bramoso_tommaso/svelte/toDos-web/src/components/todo_item.svelte

@@ -5,6 +5,7 @@
     import Priority from "./priority.svelte";
 
     export let todo;
+    let old_priority = todo.priority;
     const dispatch = createEventDispatcher();
 
     const item_change = (type) => {
@@ -18,6 +19,13 @@
     const edit_task = () => {
         document.getElementById(todo.id).blur();
     }
+
+    $: {
+        if(todo.priority != old_priority) {
+            old_priority = todo.priority;
+            item_change('update');
+        }
+    }
 </script>
 
 <Cell>
@@ -40,7 +48,7 @@
         on:change={edit_task} />
 </Cell>
 <Cell>
-    <Priority disabled={todo.done}/>
+    <Priority bind:prio={todo.priority} disabled={todo.done} />
 </Cell>
 <Cell last>
     <Icon name = "delete_forever" color="red" handler={() => item_change('delete')} />

TPSI/bramoso_tommaso/svelte/toDos-web/src/components/todo_list.svelte

@@ -2,6 +2,7 @@
     import Icon from "./icon.svelte";
     import Priority from "./priority.svelte";
     import TodoItem from "./todo_item.svelte";
+    import { onMount } from "svelte";
 
     let todos = [];
     let last_id = 0;
@@ -14,17 +15,49 @@
             priority: 3
         };
         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);
+        switch(e.detail.type) {
+            case 'update':
+                update_item(e.detail.id);
+                break;
+            case 'delete':
+                delete_item(e.detail.id);
+                break;
+        };
+    }
+
+    const update_item = (id) => {
+        console.log("UPDATE", id);
+
+        const todo = todos.filter(t => t.id == id)[0];
+        localStorage.setItem(`todo${id}`, JSON.stringify(todo));
     }
 
     const delete_item = (id) => {
         console.log("DELETE", id);
         todos = todos.filter(t => t.id != id);
+
+        localStorage.removeItem('todo${id}');
     }
+
+    onMount(async () => {
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            const keyn = +key.substring(4);
+
+            if (keyn >= last_id) {
+                last_id = keyn;
+            }
+            const todo = JSON.parse(localStorage.getItem(key));
+            if (todo != null)
+                todos.push(todo);
+            }
+            todos = [...todos];
+        });
 </script>
 
 <h1 class="app-title">ToDos</h1>