-
Notifications
You must be signed in to change notification settings - Fork 0
/
tileView.js
51 lines (39 loc) · 1.44 KB
/
tileView.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
export class TileView {
controller;
constructor() {
// Add add event to add button
const addButton = document.getElementById("tileViewContainerAddItemAdd");
addButton.onclick = () => this.addItem();
}
setController(c) {
this.controller = c;
}
update() {
const tileContainer = document.getElementById('tileContainer');
tileContainer.innerHTML = "";
this.controller.getItems().forEach(todo => {
const tile = document.createElement('div');
tile.classList.add('tile');
const deleteButtonId = "delete-" + todo.id;
let tileHtml = "<p class='is-size-6'>";
tileHtml += todo.todo;
tileHtml += "<button id='" + deleteButtonId + "' class='is-medium delete ml-2'>";
tileHtml += "Delete"
tileHtml += "</button>"
tileHtml += "</p>";
tile.innerHTML = tileHtml;
tileContainer.appendChild(tile);
const deleteButton = document.getElementById(deleteButtonId);
deleteButton.onclick = () => this.deleteItem(todo.id);
});
}
addItem() {
let todo = document.getElementById('tileViewContainerAddItemInput').value;
this.controller.addItem(todo);
document.getElementById('tileViewContainerAddItemInput').value = "";
}
deleteItem(id) {
this.controller.deleteItem(id);
this.update();
}
}