-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtask.js
More file actions
105 lines (88 loc) · 3.68 KB
/
task.js
File metadata and controls
105 lines (88 loc) · 3.68 KB
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import Button from "./button.js";
// import TaskData from "../app.state.js";
import Container from "./container.js";
export default function taskItem({ task, onRemove, onMark, onEdit }) {
var taskItem = document.createElement('li');
taskItem.id = task.id;
taskItem.classList.add("task");
var taskDiv = document.createElement("div");
var taskText = document.createTextNode(task.title);
taskDiv.append(taskText);
var removeButton = Button({
label: "×", onClick: () => {
taskItem.remove();
onRemove();
}
});
removeButton.title = "Remove Task";
var doneButton = Button({
label: "✓", onClick: (e) => {
taskDiv.style.textDecoration = "line-through";
e.target.disabled = true;
if(startTime) manageTimer(e);
startStopTaskButton.disabled = true;
startStopTaskButton.title = "Task Complete";
onMark();
}
});
doneButton.title = "Mark Task";
doneButton.classList.add('mark-task-button');
var editButton = Button({ label: "✎", onClick: onEdit });
editButton.title = "Edit Task";
var startStopTaskButton = Button({ label: "⏵", onClick: manageTimer });
startStopTaskButton.title = "Start working on task";
doneButton.classList.add('startstop-task-button');
if (task.status === 'done') {
taskDiv.style.textDecoration = "line-through";
doneButton.disabled = true;
startStopTaskButton.disabled = true;
}
var taskTImerInterval;
let startTime, now;
function manageTimer(evt) {
var btn = evt.target;
if (taskTImerInterval || (!taskTImerInterval && btn.classList.contains('mark-task-button'))) {
clearInterval(taskTImerInterval);
taskTImerInterval = undefined;
if (btn.classList.contains('mark-task-button')) {
// startStopTaskButton.innerHTML = "⏵";
if (confirm("Would you like to mark this task as done?")) {
taskDiv.style.textDecoration = "line-through";
doneButton.disabled = true;
doneButton.innerHTML = "✓";
doneButton.title = "Task Complete";
startStopTaskButton.disabled = true;
startStopTaskButton.title = "Task Complete";
onMark();
}
}
else{
startStopTaskButton.innerHTML = "⏵" + calculateTime();
startStopTaskButton.title = "Continue Task";
}
}
else {
doneButton.innerHTML = "⏹";
doneButton.title = "Complete Task";
startStopTaskButton.title = "Pause Task";
if(!now) startStopTaskButton.innerHTML = `⏸ ${calculateTime()}`;
taskTImerInterval = setInterval(()=>{
startStopTaskButton.innerHTML = `⏸ ${calculateTime()}`
}, 1000);
}
}
function calculateTime(){
if (!startTime) startTime = new Date();
if(!now) now = new Date();
now.setSeconds(now.getSeconds() + 1);
const diff = now.getTime() - startTime.getTime();
const hrs = Math.floor(diff / (1000 * 60 * 24));
const min = Math.floor((diff % (1000 * 60 * 24)) / (1000 * 60));
const sec = Math.floor((diff % (1000 * 60)) / 1000);
return `${hrs.toString().padStart(2, '0')}`
+ `:${min.toString().padStart(2, '0')}:`
+ `${sec.toString().padStart(2, '0')}`;
};
taskItem.append(taskDiv, Container(startStopTaskButton, doneButton, editButton, removeButton));
return taskItem;
}