TaskController+saving

web/main.js

@@ -27,7 +27,39 @@ class Task extends EventTarget {
   }
 }
 
-let tasks = []
+
+class TaskController {
+  constructor(){
+    this.tasks = []
+  }
+
+  addTask(task){
+    let view = new TaskView(task)
+    view.element.addEventListener("click", () => detail_view.task = task )
+    list.appendChild(view.element)
+    task_views.push(view)
+
+    task.addEventListener("change", () => this.save(task))
+  }
+
+  async refresh(){
+    let tasks_response = await fetch("/tasks", {method: "GET"})
+    let tasks_data = await tasks_response.json()
+  
+    for (let task_data of tasks_data){ this.tasks.push(new Task(task_data)) }
+    for (let task of this.tasks){ this.addTask(task) }
+  }
+
+  async save(task){
+    let tasks_response = await fetch(`/tasks/${task.id}`, {
+      method: "PUT",
+      body: JSON.stringify(task.data),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+  }
+}
 
 let task_views = []
 
@@ -110,25 +142,16 @@ class DetailTaskView {
 
 let detail_view = new DetailTaskView(document.querySelector("task-detail"))
 
-let addTask = function(task){
-  let view = new TaskView(task)
-  view.element.addEventListener("click", () => detail_view.task = task )
-  list.appendChild(view.element)
-  task_views.push(view)
-}
-
 let addButton = document.querySelector('#add_button')
 addButton.addEventListener("click", () => {
   addTask(new Task({done: false, description: "New Task"}))
 })
 
-let main = async () => {
-  let tasks_response = await fetch("/tasks", {method: "GET"})
-  let tasks_data = await tasks_response.json()
+let task_controller = new TaskController()
 
-  for (let task_data of tasks_data){ tasks.push(new Task(task_data)) }
-
-  for (let task of tasks){ addTask(task) }
+let main = async () => {
+  task_controller.refresh()
 }
 
 main()
+