-
Notifications
You must be signed in to change notification settings - Fork 38
/
application.js
157 lines (139 loc) · 4.02 KB
/
application.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
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
(function() {
var api = 'https://offline-todo-api.herokuapp.com/todos';
var db, input, ul;
databaseOpen()
.then(function() {
input = document.getElementsByTagName('input')[0];
ul = document.getElementsByTagName('ul')[0];
document.body.addEventListener('submit', onSubmit);
document.body.addEventListener('click', onClick);
})
.then(refreshView);
function onClick(e) {
e.preventDefault();
if (e.target.hasAttribute('id')) {
databaseTodosGetById(e.target.getAttribute('id'))
.then(function(todo) {
todo.deleted = true;
return databaseTodosPut(todo);
})
.then(refreshView);
}
}
function onSubmit(e) {
e.preventDefault();
var todo = { text: input.value, _id: String(Date.now()) };
databaseTodosPut(todo)
.then(function() {
input.value = '';
})
.then(refreshView);
}
function refreshView() {
return databaseTodosGet({ deleted: false }).then(renderAllTodos);
}
function renderAllTodos(todos) {
var html = '';
todos.forEach(function(todo) {
html += todoToHtml(todo);
});
ul.innerHTML = html;
}
function todoToHtml(todo) {
return '<li><button id="'+todo._id+'">delete</button>'+todo.text+'</li>';
}
function databaseOpen() {
return new Promise(function(resolve, reject) {
var version = 1;
var request = indexedDB.open('todos', version);
request.onupgradeneeded = function(e) {
db = e.target.result;
e.target.transaction.onerror = reject;
db.createObjectStore('todo', { keyPath: '_id' });
};
request.onsuccess = function(e) {
db = e.target.result;
resolve();
};
request.onerror = reject;
});
}
function databaseTodosPut(todo) {
return new Promise(function(resolve, reject) {
var transaction = db.transaction(['todo'], 'readwrite');
var store = transaction.objectStore('todo');
var request = store.put(todo);
transaction.oncomplete = resolve;
request.onerror = reject;
});
}
function databaseTodosGet(query) {
return new Promise(function(resolve, reject) {
var transaction = db.transaction(['todo'], 'readonly');
var store = transaction.objectStore('todo');
// Get everything in the store
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);
// This fires once per row in the store, so for simplicity collect the data
// in an array (data) and send it pass it in the resolve call in one go
var data = [];
cursorRequest.onsuccess = function(e) {
var result = e.target.result;
// If there's data, add it to array
if (result) {
if (!query || (query.deleted === true && result.value.deleted) || (query.deleted === false && !result.value.deleted)) {
data.push(result.value);
}
result.continue();
// Reach the end of the data
} else {
resolve(data);
}
};
});
}
function databaseTodosGetById(id) {
return new Promise(function(resolve, reject) {
var transaction = db.transaction(['todo'], 'readonly');
var store = transaction.objectStore('todo');
var request = store.get(id);
request.onsuccess = function(e) {
var result = e.target.result;
resolve(result);
};
request.onerror = reject;
});
}
function databaseTodosDelete(todo) {
return new Promise(function(resolve, reject) {
var transaction = db.transaction(['todo'], 'readwrite');
var store = transaction.objectStore('todo');
var request = store.delete(todo._id);
transaction.oncomplete = resolve;
request.onerror = reject;
});
}
function serverTodosGet(_id) {
return fetch(api + '/' + (_id ? _id : ''))
.then(function(response) {
return response.json();
});
}
function serverTodosPost(todo) {
return fetch(api, {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(todo)
})
.then(function(response) {
if (response.status === 410) throw new Error(response.statusText);
return response;
});
}
function serverTodosDelete(todo) {
return fetch(api + '/' + todo._id, { method: 'delete' });
}
}());