From 478e0d54164733d9af621d2f89554d6abf3bb485 Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 8 Sep 2021 17:54:54 +0900 Subject: [PATCH 01/45] Add Report composenent --- src/App.svelte | 6 +++++- src/Report.svelte | 42 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 src/Report.svelte diff --git a/src/App.svelte b/src/App.svelte index 10faec7..e7fc030 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,10 +1,14 @@

Hello {name}!

Visit the Svelte tutorial to learn how to build Svelte apps.

+ +
\ No newline at end of file + diff --git a/src/Report.svelte b/src/Report.svelte new file mode 100644 index 0000000..7102192 --- /dev/null +++ b/src/Report.svelte @@ -0,0 +1,42 @@ + + +

+ ahiahi +

+ +
+

目標

+

やること

+ + {#each todoList as todo (todo.idx)} +
  • {todo.idx} : {todo.body}
    • + {/each} + +

    やったこと

    +

    できなかったこと

    +

    今日の学び

    +

    感想

    +
    + + From 5f1d79955611684aadf8f5efd4fbce6d72e531b4 Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 8 Sep 2021 18:03:00 +0900 Subject: [PATCH 02/45] Show status of task --- src/Report.svelte | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/Report.svelte b/src/Report.svelte index 7102192..491c67f 100644 --- a/src/Report.svelte +++ b/src/Report.svelte @@ -3,7 +3,7 @@ import { text } from "svelte/internal"; let date = "2020-09-08"; - let todoList = [{"idx": 0, "body":"ahiahi"}]; + let todoList = []; let nextIndex = 1; let newTodo = ""; @@ -11,11 +11,20 @@ import { text } from "svelte/internal"; if (event.keyCode != 13 || ! newTodo) return; todoList = [...todoList, { "idx": nextIndex, + "status": "todo", "body": newTodo, }]; nextIndex += 1; newTodo = ""; } + + const statusToIcon = (status) => { + return { + "todo": "⬜", + "wip": "⏩", + "done": "✅" + }[status] + }

    @@ -30,7 +39,7 @@ import { text } from "svelte/internal"; on:keyup={addTodo} bind:value={newTodo}> {#each todoList as todo (todo.idx)} -

  • {todo.idx} : {todo.body}
    • +
  • {todo.idx}({statusToIcon(todo.status)}) : {todo.body}
    • {/each}

    やったこと

    From 0604c12539871de1944b4286eb899d14e3196964 Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 8 Sep 2021 18:39:57 +0900 Subject: [PATCH 03/45] Split files by TaskList and Task --- src/Report.svelte | 45 ++++++++++++++++++++++----------------------- src/Task.svelte | 13 +++++++++++++ src/TaskList.svelte | 9 +++++++++ 3 files changed, 44 insertions(+), 23 deletions(-) create mode 100644 src/Task.svelte create mode 100644 src/TaskList.svelte diff --git a/src/Report.svelte b/src/Report.svelte index 491c67f..1573ecd 100644 --- a/src/Report.svelte +++ b/src/Report.svelte @@ -1,30 +1,32 @@

    @@ -36,12 +38,9 @@ import { text } from "svelte/internal";

    やること

    - {#each todoList as todo (todo.idx)} -
  • {todo.idx}({statusToIcon(todo.status)}) : {todo.body}
    • - {/each} - + on:keyup={onNewTaskEntered} + bind:value={newTask}> +

    やったこと

    できなかったこと

    今日の学び

    diff --git a/src/Task.svelte b/src/Task.svelte new file mode 100644 index 0000000..4ff7dde --- /dev/null +++ b/src/Task.svelte @@ -0,0 +1,13 @@ + + +
  • {task.idx}({statusToIcon(task.status)}) : {task.body}
    • diff --git a/src/TaskList.svelte b/src/TaskList.svelte new file mode 100644 index 0000000..11b9347 --- /dev/null +++ b/src/TaskList.svelte @@ -0,0 +1,9 @@ + + +{#each taskList as task (task.idx)} + +{/each} From 66e65e8e64bc209b0dd1aee7dfa1e40a922b4d00 Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 8 Sep 2021 19:30:53 +0900 Subject: [PATCH 04/45] Add task status toggler --- src/Report.svelte | 12 +++++++++++- src/Task.svelte | 31 +++++++++++++++++++++++++++---- src/TaskList.svelte | 2 +- 3 files changed, 39 insertions(+), 6 deletions(-) diff --git a/src/Report.svelte b/src/Report.svelte index 1573ecd..9a7b481 100644 --- a/src/Report.svelte +++ b/src/Report.svelte @@ -27,6 +27,16 @@ addTask(newTask); } + const onTaskStatuToggled = (event) => { + const idx = event.detail.idx; + const status = event.detail.status; + let oldIdx = taskList.findIndex(t => t.idx == idx); + let oldTask = taskList.splice(oldIdx, 1)[0]; + let newTask = {...oldTask, status: status}; + taskList.splice(oldIdx, 0, newTask); + taskList = [...taskList]; + console.dir(taskList); + }

    @@ -40,7 +50,7 @@ placeholder="やること追加" on:keyup={onNewTaskEntered} bind:value={newTask}> - +

    やったこと

    できなかったこと

    今日の学び

    diff --git a/src/Task.svelte b/src/Task.svelte index 4ff7dde..46c1755 100644 --- a/src/Task.svelte +++ b/src/Task.svelte @@ -1,13 +1,36 @@ -
  • {task.idx}({statusToIcon(task.status)}) : {task.body}
    • +
  • + {task.idx}({statusToIcon(task.status)}) : {task.body} +
    • diff --git a/src/TaskList.svelte b/src/TaskList.svelte index 11b9347..ba1a1be 100644 --- a/src/TaskList.svelte +++ b/src/TaskList.svelte @@ -5,5 +5,5 @@ {#each taskList as task (task.idx)} - + {/each} From 36b45e4dfd6639b7d56245bb481ef4d00714ec69 Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 8 Sep 2021 21:34:54 +0900 Subject: [PATCH 05/45] Use store for tasks --- src/Report.svelte | 39 +++++++++++++-------------------------- src/Task.svelte | 26 +++----------------------- src/TaskList.svelte | 5 ++--- src/task.js | 39 +++++++++++++++++++++++++++++++++++++++ src/taskList.js | 25 +++++++++++++++++++++++++ 5 files changed, 82 insertions(+), 52 deletions(-) create mode 100644 src/task.js create mode 100644 src/taskList.js diff --git a/src/Report.svelte b/src/Report.svelte index 9a7b481..8c54f04 100644 --- a/src/Report.svelte +++ b/src/Report.svelte @@ -1,41 +1,28 @@ @@ -50,7 +37,7 @@ placeholder="やること追加" on:keyup={onNewTaskEntered} bind:value={newTask}> - +

    やったこと

    できなかったこと

    今日の学び

    diff --git a/src/Task.svelte b/src/Task.svelte index 46c1755..467df16 100644 --- a/src/Task.svelte +++ b/src/Task.svelte @@ -1,36 +1,16 @@
  • - {task.idx}({statusToIcon(task.status)}) : {task.body} + {task.idx}({toIcon(task)}) : {task.body}
    • diff --git a/src/TaskList.svelte b/src/TaskList.svelte index ba1a1be..2608af6 100644 --- a/src/TaskList.svelte +++ b/src/TaskList.svelte @@ -1,9 +1,8 @@ -{#each taskList as task (task.idx)} +{#each tasks as task (task.idx)} {/each} diff --git a/src/task.js b/src/task.js new file mode 100644 index 0000000..ecc6fa9 --- /dev/null +++ b/src/task.js @@ -0,0 +1,39 @@ +const statusIconMap = { + todo: "⬜", + wip: "⏩", + done: "✅" +} + +const nextStatusMap = { + todo: "wip", + wip: "done", + done: "todo", +} + +let nextIdx = 0; + +const makeTask = (body) => { + nextIdx += 1; + return { + idx: nextIdx, + body: body, + status: "todo", + } +} + +const toIcon = (task) => { + return statusIconMap[task.status]; +} + +const toNextStatus = (task) => { + return { + ...task, + status: nextStatusMap[task.status], + } +} + +export { + makeTask, + toIcon, + toNextStatus, +} diff --git a/src/taskList.js b/src/taskList.js new file mode 100644 index 0000000..bc7d3d6 --- /dev/null +++ b/src/taskList.js @@ -0,0 +1,25 @@ +import { writable } from 'svelte/store'; +import { makeTask, toIcon, toNextStatus } from './task'; + +const createTaskList = () => { + const { subscribe, update } = writable([]); + + return { + subscribe, + addTask: body => update(tasks => { + tasks = [...tasks, makeTask(body)]; + console.dir(`tasks: ${JSON.stringify(tasks)}`); + return tasks; + }), + toggleStatus: idx => update(tasks => { + const targetIndex = tasks.findIndex(t => t.idx == idx); + let targetTask = tasks.splice(targetIndex, 1)[0]; + targetTask = toNextStatus(targetTask); + tasks.splice(targetIndex, 0, targetTask); + tasks = [...tasks]; + return tasks; + }), + }; +} + +export const taskList = createTaskList(); From 0d93ac378f0f748cde6e982870114ef4fa3bf319 Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 8 Sep 2021 21:50:15 +0900 Subject: [PATCH 06/45] Add list of dones and undones --- src/Report.svelte | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Report.svelte b/src/Report.svelte index 8c54f04..e819bd4 100644 --- a/src/Report.svelte +++ b/src/Report.svelte @@ -11,8 +11,10 @@ const unsubscribe = taskList.subscribe(val => { tasks = val; }); + $: undones = tasks.filter(task => task.status != "done"); + $: dones = tasks.filter(task => task.status == "done"); onDestroy(unsubscribe); - console.dir(tasks); + const onNewTaskEntered = (event) => { if (event.keyCode != 13 || ! newTask) return; @@ -39,7 +41,9 @@ bind:value={newTask}>

    やったこと

    +

    できなかったこと

    +

    今日の学び

    感想

    From 5e6263306fafd1dd606c229e5ae252d50c2a7c2f Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 8 Sep 2021 21:55:02 +0900 Subject: [PATCH 07/45] Refactor tasks --- src/Task.svelte | 2 +- src/taskList.js | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/Task.svelte b/src/Task.svelte index 467df16..bad1ee1 100644 --- a/src/Task.svelte +++ b/src/Task.svelte @@ -12,5 +12,5 @@
  • - {task.idx}({toIcon(task)}) : {task.body} + {toIcon(task)} : {task.body}
    • diff --git a/src/taskList.js b/src/taskList.js index bc7d3d6..63f59e0 100644 --- a/src/taskList.js +++ b/src/taskList.js @@ -7,8 +7,7 @@ const createTaskList = () => { return { subscribe, addTask: body => update(tasks => { - tasks = [...tasks, makeTask(body)]; - console.dir(`tasks: ${JSON.stringify(tasks)}`); + tasks.push(makeTask(body)); return tasks; }), toggleStatus: idx => update(tasks => { @@ -16,7 +15,6 @@ const createTaskList = () => { let targetTask = tasks.splice(targetIndex, 1)[0]; targetTask = toNextStatus(targetTask); tasks.splice(targetIndex, 0, targetTask); - tasks = [...tasks]; return tasks; }), }; From c409b31e9fa9feb9254c939d594c248e990a1535 Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 8 Sep 2021 21:56:59 +0900 Subject: [PATCH 08/45] Change idx => id --- src/Report.svelte | 2 +- src/Task.svelte | 6 +++--- src/TaskList.svelte | 2 +- src/task.js | 6 +++--- src/taskList.js | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/Report.svelte b/src/Report.svelte index e819bd4..765941f 100644 --- a/src/Report.svelte +++ b/src/Report.svelte @@ -24,7 +24,7 @@ } const onTaskStatuToggled = (event) => { - taskList.toggleStatus(event.detail.idx); + taskList.toggleStatus(event.detail.id); } diff --git a/src/Task.svelte b/src/Task.svelte index bad1ee1..d08f539 100644 --- a/src/Task.svelte +++ b/src/Task.svelte @@ -4,13 +4,13 @@ export let task; const dispatch = createEventDispatcher(); - const onClick = (idx) => { + const onClick = (id) => { dispatch('toggle', { - idx: idx, + id: id, }); } -
  • +
  • {toIcon(task)} : {task.body}
    • diff --git a/src/TaskList.svelte b/src/TaskList.svelte index 2608af6..4001133 100644 --- a/src/TaskList.svelte +++ b/src/TaskList.svelte @@ -3,6 +3,6 @@ export let tasks; -{#each tasks as task (task.idx)} +{#each tasks as task (task.id)} {/each} diff --git a/src/task.js b/src/task.js index ecc6fa9..77a13b3 100644 --- a/src/task.js +++ b/src/task.js @@ -10,12 +10,12 @@ const nextStatusMap = { done: "todo", } -let nextIdx = 0; +let nextId = 0; const makeTask = (body) => { - nextIdx += 1; + nextId += 1; return { - idx: nextIdx, + id: nextId, body: body, status: "todo", } diff --git a/src/taskList.js b/src/taskList.js index 63f59e0..09e4017 100644 --- a/src/taskList.js +++ b/src/taskList.js @@ -10,8 +10,8 @@ const createTaskList = () => { tasks.push(makeTask(body)); return tasks; }), - toggleStatus: idx => update(tasks => { - const targetIndex = tasks.findIndex(t => t.idx == idx); + toggleStatus: id => update(tasks => { + const targetIndex = tasks.findIndex(t => t.id == id); let targetTask = tasks.splice(targetIndex, 1)[0]; targetTask = toNextStatus(targetTask); tasks.splice(targetIndex, 0, targetTask); From c1e0242955150a96d8f5462a8edf4e0ab49824b1 Mon Sep 17 00:00:00 2001 From: tanacchi Date: Sun, 12 Sep 2021 18:47:42 +0900 Subject: [PATCH 09/45] Add other input form to Report page --- src/Report.svelte | 35 +++++++++++++++++++++++++++++++---- 1 file changed, 31 insertions(+), 4 deletions(-) diff --git a/src/Report.svelte b/src/Report.svelte index 765941f..1ee3040 100644 --- a/src/Report.svelte +++ b/src/Report.svelte @@ -1,12 +1,24 @@

    @@ -34,6 +51,14 @@

    目標

    + +

    + {#each aims as aim} +

  • {aim}
    • + {/each} +

    やること

    できなかったこと

    今日の学び

    +

    感想

    +
    From 6485daae649da9fae201dc505987458b6300f9db Mon Sep 17 00:00:00 2001 From: tanacchi Date: Sun, 12 Sep 2021 19:00:10 +0900 Subject: [PATCH 10/45] Add today's date on top --- src/Report.svelte | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/Report.svelte b/src/Report.svelte index 1ee3040..46a4594 100644 --- a/src/Report.svelte +++ b/src/Report.svelte @@ -3,7 +3,15 @@ import TaskList from './TaskList.svelte'; import { taskList } from './taskList'; - let date = "2020-09-08"; + // Date + const now = new Date(); + const fmt = new Intl.DateTimeFormat('ja', { + year: "numeric", + month: "2-digit", + day: "2-digit", + }); + + let date_str = fmt.format(now); // Aim let aims = ["ahi"]; @@ -45,9 +53,9 @@ let impressions = ""; -

    - ahiahi -

    +

    + {date_str} +

    目標

    From 97262f305e51e6b5185a0b7120f8c44522b4c3fc Mon Sep 17 00:00:00 2001 From: tanacchi Date: Sun, 12 Sep 2021 21:33:38 +0900 Subject: [PATCH 11/45] Add nested structure for task list --- src/Task.svelte | 2 ++ src/TaskList.svelte | 14 +++++++++++--- src/task.js | 1 + 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/Task.svelte b/src/Task.svelte index d08f539..b67f315 100644 --- a/src/Task.svelte +++ b/src/Task.svelte @@ -1,6 +1,7 @@ -{#each tasks as task (task.id)} - -{/each} +
      + {#each tasks as task (task.id)} + + {/each} +
    + + diff --git a/src/task.js b/src/task.js index 77a13b3..700df3d 100644 --- a/src/task.js +++ b/src/task.js @@ -18,6 +18,7 @@ const makeTask = (body) => { id: nextId, body: body, status: "todo", + children: [], } } From 031c00c414c0d4f999a482f31e390d316524521c Mon Sep 17 00:00:00 2001 From: tanacchi Date: Sun, 12 Sep 2021 21:44:21 +0900 Subject: [PATCH 12/45] Add new input form to add children of task --- src/Task.svelte | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/Task.svelte b/src/Task.svelte index b67f315..8c1a6a3 100644 --- a/src/Task.svelte +++ b/src/Task.svelte @@ -1,6 +1,6 @@
  • {toIcon(task)} : {task.body} +
    • From 826f694fffc374dbe82e6478eb999caee1d612d6 Mon Sep 17 00:00:00 2001 From: tanacchi Date: Sun, 12 Sep 2021 21:46:07 +0900 Subject: [PATCH 13/45] Change to toggle status on only icon clicked --- src/Task.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Task.svelte b/src/Task.svelte index 8c1a6a3..f86c391 100644 --- a/src/Task.svelte +++ b/src/Task.svelte @@ -23,8 +23,9 @@ } -
  • - {toIcon(task)} : {task.body} +
  • + {toIcon(task)} + {task.body} From ea4cc9cd46d0be4f6aba41e7e2debf5a03abe432 Mon Sep 17 00:00:00 2001 From: tanacchi Date: Sun, 12 Sep 2021 21:59:45 +0900 Subject: [PATCH 14/45] Toggle new children form by click --- src/Task.svelte | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/Task.svelte b/src/Task.svelte index f86c391..2858908 100644 --- a/src/Task.svelte +++ b/src/Task.svelte @@ -10,6 +10,7 @@ id: id, }); } + let clicked = false; let newChild = ""; const onNewChildEntered = (event) => { @@ -25,9 +26,11 @@
  • {toIcon(task)} - {task.body} - + {task.body} + {#if clicked} + + {/if}
    • From 4fee523ebb2d89e1d78a8af07681e8621efd4706 Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 15 Sep 2021 00:28:53 +0900 Subject: [PATCH 15/45] Remove default aim ("ahi") --- src/Report.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Report.svelte b/src/Report.svelte index 46a4594..77748d2 100644 --- a/src/Report.svelte +++ b/src/Report.svelte @@ -14,7 +14,7 @@ let date_str = fmt.format(now); // Aim - let aims = ["ahi"]; + let aims = []; let newAim = ""; const onNewAimEntered = (event) => { From 065e63b4b7c532a1da2571aa87da22046e600aba Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 15 Sep 2021 00:30:24 +0900 Subject: [PATCH 16/45] Hide children task form when form focused out --- src/Task.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Task.svelte b/src/Task.svelte index 2858908..98e666a 100644 --- a/src/Task.svelte +++ b/src/Task.svelte @@ -30,7 +30,8 @@ {#if clicked} + on:keyup={onNewChildEntered} + on:blur={() => clicked = false}> {/if} From c84478fa4a6df03ac44d715c5dfa546034ad3c5e Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 15 Sep 2021 00:48:18 +0900 Subject: [PATCH 17/45] Handle drag start event for Task --- src/Task.svelte | 9 ++++++++- src/TaskList.svelte | 9 ++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/Task.svelte b/src/Task.svelte index 98e666a..4753caa 100644 --- a/src/Task.svelte +++ b/src/Task.svelte @@ -22,9 +22,16 @@ newChild = ""; task = task; } + + const onDragStart = (event) => { + dispatch('dragstart', { + target: event.target, + id: task.id, + }) + } -
  • +
  • {toIcon(task)} {task.body} {#if clicked} diff --git a/src/TaskList.svelte b/src/TaskList.svelte index 0e3d2ee..93b3753 100644 --- a/src/TaskList.svelte +++ b/src/TaskList.svelte @@ -1,11 +1,18 @@
      {#each tasks as task (task.id)} - + {/each}
    From 30e5cc3055f83fac8e17a8428abe13b3f565c2ca Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 15 Sep 2021 01:19:30 +0900 Subject: [PATCH 18/45] Add handler for all Drag&Drop event --- src/Task.svelte | 14 +++++++++++--- src/TaskList.svelte | 45 +++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 52 insertions(+), 7 deletions(-) diff --git a/src/Task.svelte b/src/Task.svelte index 4753caa..0e700e9 100644 --- a/src/Task.svelte +++ b/src/Task.svelte @@ -3,6 +3,7 @@ import { toIcon, makeTask } from './task'; import TaskList from './TaskList.svelte'; export let task; + export let idx; const dispatch = createEventDispatcher(); const onClick = (id) => { @@ -23,15 +24,22 @@ task = task; } - const onDragStart = (event) => { - dispatch('dragstart', { + // Drag and Drop event + const onDragOrDrop = (event) => { + dispatch(event.type, { target: event.target, id: task.id, + idx, }) } -
  • +
  • {toIcon(task)} {task.body} {#if clicked} diff --git a/src/TaskList.svelte b/src/TaskList.svelte index 93b3753..068b313 100644 --- a/src/TaskList.svelte +++ b/src/TaskList.svelte @@ -3,16 +3,53 @@ export let tasks; const onDragStart = (event) => { - const id = event.detail.id; - console.log("Drag started: " + id); + const idx = event.detail.idx; + console.log("Drag started: " + idx); console.dir(event); event.detail.target.style.background = "red"; } + + const onDragEnd = (event) => { + const idx = event.detail.idx; + console.log("Drag end: " + idx); + console.dir(event); + event.detail.target.style.background = ""; + } + + const onDragEnter = (event) => { + const idx = event.detail.idx; + console.log("Drag enter: " + idx); + console.dir(event); + event.detail.target.style.background = "green"; + } + + const onDragLeave = (event) => { + const idx = event.detail.idx; + console.log("Drag leave: " + idx); + console.dir(event); + event.detail.target.style.background = ""; + } + + const onDrop = (event) => { + const idx = event.detail.idx; + event.preventDefault() + console.log("Drop: " + idx); + console.dir(event); + event.detail.target.style.background = "yellow"; + }
      - {#each tasks as task (task.id)} - + {#each tasks as task, idx} + {/each}
    From f67b33539fb1f38d05a1078aa9887173451ad7ca Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 15 Sep 2021 01:47:35 +0900 Subject: [PATCH 19/45] Swap sequence of task list by Drag and Drop --- src/TaskList.svelte | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/TaskList.svelte b/src/TaskList.svelte index 068b313..46432f4 100644 --- a/src/TaskList.svelte +++ b/src/TaskList.svelte @@ -2,31 +2,33 @@ import Task from './Task.svelte'; export let tasks; + let lastLeftIdx = null; + const onDragStart = (event) => { const idx = event.detail.idx; console.log("Drag started: " + idx); - console.dir(event); - event.detail.target.style.background = "red"; } const onDragEnd = (event) => { const idx = event.detail.idx; console.log("Drag end: " + idx); - console.dir(event); event.detail.target.style.background = ""; + if (lastLeftIdx != null && idx != lastLeftIdx) { + console.log(`Swap ${idx} <-> ${lastLeftIdx}`); + [tasks[idx], tasks[lastLeftIdx]] = [tasks[lastLeftIdx], tasks[idx]] + } } const onDragEnter = (event) => { - const idx = event.detail.idx; - console.log("Drag enter: " + idx); - console.dir(event); - event.detail.target.style.background = "green"; + console.log("Drag Enter" + event.detail.idx); + // event.detail.target.style.borderBottom = "solid"; + event.detail.target.style.background = "gray"; } const onDragLeave = (event) => { - const idx = event.detail.idx; - console.log("Drag leave: " + idx); - console.dir(event); + console.log("Drag Leave" + event.detail.idx); + lastLeftIdx = event.detail.idx; + // event.detail.target.style.borderBottom = "hidden"; event.detail.target.style.background = ""; } @@ -34,7 +36,6 @@ const idx = event.detail.idx; event.preventDefault() console.log("Drop: " + idx); - console.dir(event); event.detail.target.style.background = "yellow"; } From 16a8a19041b412573ac00adcd4b7111746970fd1 Mon Sep 17 00:00:00 2001 From: tanacchi Date: Wed, 15 Sep 2021 02:03:10 +0900 Subject: [PATCH 20/45] Update taskList on store by swapping --- src/Report.svelte | 12 +++++++++++- src/TaskList.svelte | 9 +++++++-- src/taskList.js | 5 +++++ 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/Report.svelte b/src/Report.svelte index 77748d2..8e354d4 100644 --- a/src/Report.svelte +++ b/src/Report.svelte @@ -45,6 +45,13 @@ taskList.toggleStatus(event.detail.id); } + const onTasksSwapped = event => { + const [idx1, idx2] = [ + event.detail.idx1, + event.detail.idx2, + ]; + taskList.swap(idx1, idx2); + } // Learned let learned = ""; @@ -72,7 +79,10 @@ placeholder="やること追加" on:keyup={onNewTaskEntered} bind:value={newTask}> - +

    やったこと

    できなかったこと

    diff --git a/src/TaskList.svelte b/src/TaskList.svelte index 46432f4..341130a 100644 --- a/src/TaskList.svelte +++ b/src/TaskList.svelte @@ -1,7 +1,10 @@
    From 8f498b3bb41123a28950b5d5d5b08d7e7bee35d0 Mon Sep 17 00:00:00 2001 From: tanacchi Date: Thu, 16 Sep 2021 01:18:54 +0900 Subject: [PATCH 24/45] Use sveltefire module for firebase --- src/App.svelte | 12 +++++++++--- src/main.js | 2 +- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/App.svelte b/src/App.svelte index e69435e..8b145d6 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,11 +1,15 @@
    @@ -13,6 +17,8 @@

    Visit the Svelte tutorial to learn how to build Svelte apps.

    + +
    diff --git a/src/DialyList.svelte b/src/DialyList.svelte index fd5b34f..5e094ca 100644 --- a/src/DialyList.svelte +++ b/src/DialyList.svelte @@ -1,5 +1,5 @@