Commit 548e89e4 authored by Milan Iliev's avatar Milan Iliev

Refactored Task and TaskView into modules

parent 8ec3eb88
class Task extends EventTarget { import Task from "./tasks/task.js"
constructor(data){ import TaskView from "./tasks/view.js"
super()
this.data = data
}
get id(){
return this.data.id
}
get done(){
return this.data.done
}
set done(new_value){
this.data.done = new_value
this.dispatchEvent(new CustomEvent("change"))
}
get description(){
return this.data.description
}
set description(new_value){
this.data.description = new_value
this.dispatchEvent(new CustomEvent("change"))
}
}
class TaskController { class TaskController {
constructor(){ constructor(){
...@@ -65,36 +38,6 @@ let task_views = [] ...@@ -65,36 +38,6 @@ let task_views = []
let list = document.querySelector("task-list") let list = document.querySelector("task-list")
class TaskView {
static template = `
<input type="checkbox" name="done"/>
<task-description> -- </task-description>
`
constructor(task){
this.task = task
this.element = document.createElement("task-summary")
this.element.innerHTML = this.constructor.template
this.fields = {
done: this.element.querySelector("[name=done]"),
}
this.update()
this.task.addEventListener("change", () => this.update())
this.fields.done.addEventListener("change", () => {
this.task.done = this.fields.done.checked
})
}
update() {
this.fields.done.checked = this.task.done
this.element.querySelector("task-description").innerText = this.task.description
}
}
class DetailTaskView { class DetailTaskView {
constructor(element){ constructor(element){
this.element = element this.element = element
......
class Task extends EventTarget {
constructor(data){
super()
this.data = data
}
get id(){
return this.data.id
}
get done(){
return this.data.done
}
set done(new_value){
this.data.done = new_value
this.dispatchEvent(new CustomEvent("change"))
}
get description(){
return this.data.description
}
set description(new_value){
this.data.description = new_value
this.dispatchEvent(new CustomEvent("change"))
}
}
export default Task
\ No newline at end of file
class TaskView {
static template = `
<input type="checkbox" name="done"/>
<task-description> -- </task-description>
`
constructor(task){
this.task = task
this.element = document.createElement("task-summary")
this.element.innerHTML = this.constructor.template
this.fields = {
done: this.element.querySelector("[name=done]"),
}
this.update()
this.task.addEventListener("change", () => this.update())
this.fields.done.addEventListener("change", () => {
this.task.done = this.fields.done.checked
})
}
update() {
this.fields.done.checked = this.task.done
this.element.querySelector("task-description").innerText = this.task.description
}
}
export default TaskView
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment