Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #1201 from Nachete/indexeddb

IndexedDB backend for tasks app.
  • Loading branch information...
commit 429c2e6895d66c08f657f7ac3a59627227c65041 2 parents 34779d2 + 00e9a1e
@etiennesegonzac etiennesegonzac authored
View
2  apps/tasks/index.html
@@ -7,6 +7,7 @@
<link rel="stylesheet" type="text/css" media="screen" href="style/ui.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="style/tasks.css"/>
<link rel="resource" type="application/l10n" href="locale/tasks.properties"/>
+ <script type="text/javascript" src="js/db.js"></script>
<script type="text/javascript" src="js/tasks.js"></script>
</head>
@@ -16,6 +17,7 @@
<a id="task-new" href="#task" class="right button">+</a>
<span id="tasks-title" class="label" data-l10n-id="tasks">Tasks</span>
</header>
+ <div id="tasks-loading" class="loading hidden" data-l10n-id="loading">Loading ...</div>
<ul id="tasks" class="tableView"></ul>
</div>
View
79 apps/tasks/js/db.js
@@ -0,0 +1,79 @@
+'use strict';
+
+var SimpleDB = {
+
+ query: function(dbName, storeName, func, callback, data) {
+
+ var request = mozIndexedDB.open(dbName, 5);
+
+ request.onsuccess = function(event) {
+ func(request.result, storeName, callback, data);
+ };
+
+ request.onerror = function(event) {
+ console.error('Can\'t open database', dbName, event);
+ };
+
+ // DB init
+ request.onupgradeneeded = function(event) {
+ console.log('Upgrading db');
+ var db = event.target.result;
+ if (db.objectStoreNames.contains(storeName))
+ db.deleteObjectStore(storeName);
+ db.createObjectStore(storeName, {keyPath: 'id', autoIncrement: true});
+ console.log('Upgrading db done');
+ };
+ },
+
+ put: function(database, storeName, callback, item) {
+ var txn = database.transaction(storeName, 'readwrite');
+ var store = txn.objectStore(storeName);
+
+ var putreq = store.put(item);
+
+ putreq.onsuccess = function(event) {
+ item.id = event.target.result;
+ callback(item);
+ };
+
+ putreq.onerror = function(e) {
+ console.error('Add operation failure: ', database.name,
+ storeName, e.message, putreq.errorCode);
+ };
+ },
+
+ load: function(database, storeName, callback) {
+ var tasks = [];
+
+ var txn = database.transaction(storeName);
+ var store = txn.objectStore(storeName);
+
+ var cursor = store.openCursor(null, 'prev');
+ cursor.onsuccess = function(event) {
+ var item = event.target.result;
+ if (item) {
+ tasks.push(item.value);
+ item.continue();
+ } else {
+ callback(tasks);
+ }
+ };
+
+ cursor.onerror = function(event) {
+ callback([]);
+ };
+ },
+
+ delete: function(database, storeName, callback, key) {
+ var txn = database.transaction(storeName, 'readwrite');
+ var store = txn.objectStore(storeName);
+ var request = store.delete(key);
+
+ request.onsuccess = callback;
+
+ request.onerror = function(e) {
+ console.error('Delete operation failure: ', database.name,
+ storeName, e.message, putreq.errorCode);
+ };
+ }
+};
View
113 apps/tasks/js/tasks.js
@@ -4,9 +4,9 @@ if (!window['Gaia'])
var Gaia = {};
const TASK_ICONS = ['task_ta.png'];
-var taskDataList = [];
var TaskList = {
+
get tasks() {
delete this.tasks;
return this.tasks = document.getElementById('tasks');
@@ -17,6 +17,11 @@ var TaskList = {
return this.title = document.getElementById('tasks-title');
},
+ get loading() {
+ delete this.loading;
+ return this.loading = document.getElementById('tasks-loading');
+ },
+
handleEvent: function(evt) {
switch (evt.type) {
case 'click':
@@ -36,7 +41,27 @@ var TaskList = {
},
init: function() {
+
+ this.loading.classList.remove('hidden');
+ TasksDB.load();
+ },
+
+ refresh: function() {
+ if (this.tasks.hasChildNodes()) {
+ while (this.tasks.childNodes.length >= 1) {
+ this.tasks.removeChild(this.tasks.firstChild);
+ }
+ }
+
+ this.loading.classList.remove('hidden');
+
+ TasksDB.load();
+ },
+
+ fill: function(taskDataList) {
+
var self = this;
+
taskDataList.forEach(function(task) {
var li = document.createElement('li');
@@ -70,17 +95,7 @@ var TaskList = {
self.tasks.appendChild(li);
});
- window.parent.postMessage('appready', '*');
- },
-
- refresh: function() {
- if (this.tasks.hasChildNodes()) {
- while (this.tasks.childNodes.length >= 1) {
- this.tasks.removeChild(this.tasks.firstChild);
- }
- }
-
- this.init();
+ this.loading.classList.add('hidden');
}
};
@@ -116,12 +131,10 @@ var EditTask = {
switch (input.id) {
case 'task-save':
- if (this.updateCurrent())
- TaskList.refresh();
+ this.updateCurrent();
break;
case 'task-del':
this.deleteCurrent();
- TaskList.refresh();
break;
}
break;
@@ -150,7 +163,9 @@ var EditTask = {
updateCurrent: function() {
var task = {};
- if (this.element.dataset.id != '') {
+
+ if (this.element.dataset.id != 'undefined' &&
+ this.element.dataset.id != '') {
task.id = parseInt(this.element.dataset.id.substring(5));
}
@@ -166,7 +181,7 @@ var EditTask = {
}
if (!error) {
- this.manageTask(task);
+ TasksDB.put(task);
}
return !error;
@@ -175,47 +190,43 @@ var EditTask = {
deleteCurrent: function() {
if (this.element.dataset.id != '') {
var id = parseInt(this.element.dataset.id.substring(5));
- this.deleteTask(id);
+ TasksDB.delete(id);
}
+ }
+
+};
+
+var TasksDB = {
+
+ DBNAME: 'tasks',
+ STORENAME: 'tasks',
+
+ // Database methods
+ load: function() {
+ SimpleDB.query(this.DBNAME, this.STORENAME, SimpleDB.load,
+ this.loadSuccess);
},
- updateTaskProperty: function(id, property, value) {
- for (var i in taskDataList) {
- if (taskDataList[i].id == id) {
- taskDataList[i][property] = value;
- break;
- }
- }
+ put: function(task) {
+ SimpleDB.query(this.DBNAME, this.STORENAME, SimpleDB.put,
+ this.putSuccess, task);
},
- manageTask: function(task) {
- if (task.id) {
- taskDataList.some(function(taskElem) {
- if (taskElem.id == task.id) {
- taskElem.name = task.name;
- taskElem.desc = task.desc;
- taskElem.done = task.done;
- return true;
- }
- return false;
- });
- } else {
- task.id = taskDataList.length > 0 ?
- taskDataList[taskDataList.length - 1].id + 1 : 1;
- taskDataList.push(task);
- }
+ delete: function(key) {
+ SimpleDB.query(this.DBNAME, this.STORENAME, SimpleDB.delete,
+ this.deleteSuccess, key);
},
- deleteTask: function(id) {
- if (id) {
- taskDataList.some(function(taskElem, index) {
- if (taskElem.id == id) {
- taskDataList.splice(index, 1);
- return true;
- }
- return false;
- });
- }
+ putSuccess: function(task) {
+ TaskList.refresh();
+ },
+
+ loadSuccess: function(tasks) {
+ TaskList.fill(tasks);
+ },
+
+ deleteSuccess: function() {
+ TaskList.refresh();
}
};
View
4 apps/tasks/locale/tasks.properties
@@ -2,16 +2,18 @@
tasks=Tasks
back=Back
save=Save
+loading=Loading ...
name=Name
description=Description
done=Done
delete=Delete
-[es-ES]
+[es]
tasks=Tareas
back=Atrás
save=Guardar
+loading=Cargando ...
name=Nombre
description=Descripción
View
14 apps/tasks/style/tasks.css
@@ -30,6 +30,20 @@ header {
text-align: center;
}
+/* ---------- Styles --------------- */
+
+.hidden {
+ display:none;
+}
+
+.loading {
+ text-align:center;
+ line-height: 94px;
+ color: #555;
+ background-color: #f5f5f5;
+ border-bottom: 2px solid #c3c9cb;
+}
+
/* ------------- Button ------------- */
a.button, span.button {
margin:4px;
Please sign in to comment.
Something went wrong with that request. Please try again.