Modifica esercizi

TPSI/cavallo_davide/svelte/Todos-web/src/components/cell.svelte

@@ -1,4 +1,11 @@
-<div class="cell">
+<script>
+    import {fade} from 'svelte/transition'
+    export let last = false;
+</script>
+
+<div class="cell {last ? 'cell-last' : ''} "
+   in:fade="{{duration: 700}}"
+   out:fade="{{duration: 350}}">
     <slot />
 </div>
 
@@ -12,4 +19,8 @@
         line-height: 32px;
         font-size: 18px;
     }
-</style>
+
+    .cell-last{
+        border-right: none;
+    }
+</style>

TPSI/cavallo_davide/svelte/Todos-web/src/components/icon.svelte

@@ -1,20 +1,20 @@
 <svelte:head>
-    <link
-    href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
-    rel="stylesheet"
-    />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
 </svelte:head>
 
 <script>
     export let name;
+    export let handler = () => {}
+    export let color = "green"
 </script>
 
-<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/cavallo_davide/svelte/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;
+    }
+
+    .ALTA {
+        background-color: red;
+    }
+
+    .MEDIA {
+        background-color: orange;
+    }
+
+    .BASSA {
+        background-color: green;
+    }
+
+    .DISABILITATO{
+        background-color: grey;
+    }
+</style>

TPSI/cavallo_davide/svelte/Todos-web/src/components/todo_item.svelte

@@ -1,24 +1,80 @@
 <script>
+    import { createEventDispatcher } from "svelte";
     import Cell from "./cell.svelte";
     import Icon from "./icon.svelte";
+    import Priority from "./priority.svelte";
+
+    export let todo
+    let old_priority = todo.priority
+    const dispatch = createEventDispatcher()
+
+    const toggle_status = () => {
+        todo.done = !todo.done
+        item_change('update')
+    }
+
+    const edit_task = () => {
+        document.getElementById(todo.id).blur()
+        item_change('update')
+    }
+
+    const item_change = (type) => {
+        dispatch ('change', { type: type, id: todo.id})
+    }
+
+    $: {
+        if (todo.priority != old_priority) {
+            old_priority = todo.priority
+            item_change('update')
+        }
+    }
 </script>
 
 <Cell>
-    id
+    {todo.id}
 </Cell>
-
 <Cell>
-    <Icon name="circle" />
+    {#if todo.done == false}
+        <Icon name="circle" handler={toggle_status} color="red"/>
+    {:else}
+        <Icon name="task_alt" handler={toggle_status}/>
+    {/if}
+
 </Cell>
-
 <Cell>
-    task
+    <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>
-    priorità
+    <Priority bind:prio={todo.priority} disable={todo.done}/>
 </Cell>
-
-<Cell>
-    <Icon name="delete_forever" />
+<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/cavallo_davide/svelte/Todos-web/src/components/todo_list.svelte

@@ -1,30 +1,111 @@
 <script>
+    import { onMount } from "svelte";
     import Icon from "./icon.svelte";
     import TodoItem from "./todo_item.svelte";
+
+    let todos = []
+    let last_id = 0
+
+    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]
+    })
+
+    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) => {
+        switch (e.detail.type) {
+            case 'update':
+                update_item(e.detail.id)
+                break
+            case 'delete':
+                delete_item(e.detail.id)
+                break
+            default:
+                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);
+    }
 </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>
-
-    <TodoItem />
-
-    <TodoItem />
-
-    <TodoItem />
+    <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 header-last"><Icon name="add_box" handler={create_todo}/></div>
+
+    {#each todos as todo}
+        <TodoItem todo={todo} on:change={change_todo_item}/>
+    {/each}
 
 </div>
 
 <style>
-    .todo-list{
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
+    .app-title {
+        font-family: "Montserrat", serif;
+        margin-top: 0px;
+        font-size: 60px;
+        opacity: 0.3px;
+
+    }
+
+    .todo-list {
+        border: 0px solid blue;
+        width: 95%;
         display: grid;
         grid-template-columns: 1fr 1fr 4fr 2fr 1fr;
-        border: 3px solid blue;
-        width: 95%;
-        height: 80%;
-        margin: auto;
+    }
+
+    .header {
+        border-bottom: 1px solid #E7ECEE;
+        border-right: 1px solid #E7ECEE;
+        text-align: center;
+        padding-bottom: 20px;
+    }
+
+    .header-last {
+        border-right: none;
     }
 </style>

TPSI/cavallo_davide/svelte/Todos-web/src/routes/+page.svelte

@@ -7,9 +7,8 @@
 
 <style>
     main{
-        border: 3px solid red;
+        border: 0px solid red;
         width: 60%;
-        height: 90vh;
         margin: auto;
     }
-</style>
+</style>