-
Notifications
You must be signed in to change notification settings - Fork 0
/
tasksDone.html
115 lines (103 loc) · 3.66 KB
/
tasksDone.html
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
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Daily Report</title>
<link rel="shortcut icon" type="image/png" href="favicon-tasks.ico"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="col-xs-12">
<h2>What am I doing today?</h2>
<div class="form_group">
<label for="tasks_text">Tasks done:</label>
<textarea class="form-control" rows="3" id="tasks_text"></textarea>
<p class="text-muted text-right">Ctrl + enter para adicionar</p>
<!-- <button class="btn btn-default" onclick="addText()">Add text</button> -->
</div>
<br>
<div class="form-group">
<div id="header"><p>Bons dias,</p></div>
<div id="total_tasks"></div>
<div id="footer"><p>Cumprimentos</p></div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
var arrayTotalTasks = [];
var textArea = document.getElementById('tasks_text');
var pendingEditId = -1;
// adds an event listener to the text area
document.getElementById('tasks_text').addEventListener('keypress', function(ev){
if(ev.keyCode == 10) { //ctrl + enter
ev.preventDefault();
addText();
}
});
(function(){
//set the day
let today = new Date().toJSON().slice(0,10);
let storedDay = localStorage.getItem('today');
if(!storedDay){
localStorage.setItem('today', today);
} else {
isOtherDay = new Date(today) > new Date(storedDay);
if(isOtherDay){ //if it's other day, lets clear all the tasks
localStorage.removeItem('todayTasks');
localStorage.setItem('today', today);
}
}
//see if there is local storage for the tasks
let todayTasks = localStorage.getItem('todayTasks');
if(todayTasks){ // and show them if available
arrayTotalTasks = todayTasks.split(',');
writeText();
}
})();
// add a task
function addText(){
if(textArea.value !== ""){
if(pendingEditId > -1 ){ // is there text to edit?
addEditedText();
} else {
arrayTotalTasks.push(textArea.value);
}
}
writeText();
}
// replace the edited text
function addEditedText(){
if(textArea.value !== ""){
arrayTotalTasks[pendingEditId] = textArea.value;
pendingEditId = -1;
}
}
// removes the item and refresh's the total tasks div
function removeItem(id){
arrayTotalTasks.splice(id, 1);
addText();
}
//edit the item that a user has clicked
function editItem(id){
pendingEditId = id; // add the current id to the pendingEditId
let p = document.getElementById('p'+ id);
textArea.value = p.textContent;
textArea.focus();
}
// write the text inside the array to the text div of the total tasks
function writeText(){
let totalTasks = document.getElementById('total_tasks');
let currentVal = arrayTotalTasks.length;
totalTasks.innerHTML = "";
arrayTotalTasks.forEach(function(text, idx){
let spanToEdit = ' <span class="glyphicon glyphicon-pencil" onclick="editItem(' + idx + ')"></span>';
let spanToRemove = ' <span class="glyphicon glyphicon-remove" onclick="removeItem(' + idx + ')"></span>';
totalTasks.innerHTML += '<p id="p' + idx + '">' + text + spanToEdit + spanToRemove + '</p>';
});
localStorage.setItem('todayTasks', arrayTotalTasks); // refresh the local storage
textArea.value = ""; // clear the text area
}
</script>
</html>