resetreboot/todolist
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Changed from localStorage to IndexedDB

Browse source
This commit is contained in:
José Carlos Cuevas 2015-02-22 23:36:55 +01:00
parent 198ef57ad1
commit 00486995ab
5 changed files with 3193 additions and 221 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -13,7 +13,7 @@
<script type="text/javascript" src="js/libs/fastclick.js"></script>
<script type="text/javascript" src="js/libs/appframework.ui.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="js/storelists.js" defer></script>
<script type="text/javascript" src="js/libs/Dexie.js"></script>
<script type="text/javascript" src="js/app.js" defer></script>
<!--

145
js/app.js
View file

@ -3,38 +3,53 @@
// That makes the app more responsive and perceived as faster.
// https://developer.mozilla.org/Web/Reference/Events/DOMContentLoaded
// Dexie to the rescue
var db = new Dexie("ToDoList");
db.version(1).stores({
lists: "++id",
items: "++id"
});
db.version(2).stores({
lists: "++id",
items: "++id,listID"
});
db.open();
function openList(elementClicked) {
var listID = elementClicked.data('listID');
var listTitle = getListTitle(listID);
$('#list_title').text(listTitle);
$('ul#list_display').find('li').remove();
var numElements = getListItemCount(listID);
if((numElements) && (numElements > 0)) {
var text;
db.lists.get(listID).then(function(list) {
var listTitle = list.name;
$('#list_title').text(listTitle);
$('ul#list_display').find('li').remove();
db.items.where('listID').equals(listID).each(function(item) {
console.log(item);
var text = item.text;
var identification;
for(var count = 0; count < numElements; count++) {
text = getItemText(listID, count);
identification = listID + '_' + count;
if(text) {
var list_display = $('#new_elem_text');
if (isItemChecked(listID, count)) {
list_display.before('<li id="element_' + identification +'"><span id="check_' + identification + '" class="icon check"></span>' + text + '</li>');
} else {
list_display.before('<li id="element_' + identification +'"><span id="check_' + identification + '" class="icon minimize"></span>' + text + '</li>');
}
$('#check_' + identification).data('listID', listID);
$('#check_' + identification).data('itemID', count);
$('#check_' + identification).click(function () {
itemClicked($(this));
});
}
}
}
$('#add_new_item').data('currentlist', listID);
$('#delete_list').data('currentlist', listID);
$.afui.loadContent('#list_panel', false, false, "slide");
identification = listID + '_' + item.id;
var list_display = $('#new_elem_text');
if (item.checked) {
list_display.before('<li id="element_' + identification +'"><span id="check_' + identification + '" class="icon check"></span>' + text + '</li>');
} else {
list_display.before('<li id="element_' + identification +'"><span id="check_' + identification + '" class="icon minimize"></span>' + text + '</li>');
}
$('#check_' + identification).data('listID', listID);
$('#check_' + identification).data('itemID', item.id);
$('#check_' + identification).click(function () {
itemClicked($(this));
});
});
$('#add_new_item').data('currentlist', listID);
$('#delete_list').data('currentlist', listID);
$.afui.loadContent('#list_panel', false, false, "slide");
}).catch(function(err) { console.error(err); });
}
function itemClicked(elementClicked) {
@ -42,40 +57,50 @@ function itemClicked(elementClicked) {
var itemID = elementClicked.data('itemID');
var identification = listID + '_' + itemID;
if(!isItemChecked(listID, itemID)) {
checkItem(listID, itemID);
$('#check_' + identification).removeClass('minimize');
$('#check_' + identification).addClass('check');
} else {
uncheckItem(listID, itemID);
$('#check_' + identification).removeClass('check');
$('#check_' + identification).addClass('minimize');
}
db.items.get(itemID).then(function(item) {
if(!item.checked) {
db.items.update(item.id, {checked: true});
$('#check_' + identification).removeClass('minimize');
$('#check_' + identification).addClass('check');
} else {
db.items.update(item.id, {checked: false});
$('#check_' + identification).removeClass('check');
$('#check_' + identification).addClass('minimize');
}
});
}
function addItemToListClicked(listID, text) {
var itemID = insertItem(listID, text);
var list_display = $('#new_elem_text');
var identification = listID + '_' + itemID;
list_display.before('<li id="element_' + identification +'"><span id="check_' + identification + '" class="icon minimize"></span>' + text + '</li>');
$('#check_' + identification).data('listID', listID);
$('#check_' + identification).data('itemID', itemID);
$('#check_' + identification).click(function () {
itemClicked($(this));
function addItemToListClicked(list_ID, txt) {
console.log('listID ' + list_ID);
db.items.add({text: txt, listID: list_ID, checked: false}).then(function(itemID) {
console.log('Adding new item ' + itemID);
var list_display = $('#new_elem_text');
var identification = list_ID + '_' + itemID;
console.log(identification);
list_display.before('<li id="element_' + identification +'"><span id="check_' + identification + '" class="icon minimize"></span>' + txt + '</li>');
$('#check_' + identification).data('listID', list_ID);
$('#check_' + identification).data('itemID', itemID);
$('#check_' + identification).click(function () {
itemClicked($(this));
});
});
}
function addNewListClicked(newListName) {
var listID = createList(newListName);
$('li#add_list_last_elem').before('<li><a id="list_' + listID + '">' + newListName + '</li>');
$('a#list_' + listID).data('listID', listID);
$('a#list_' + listID).click(function () { openList($(this)); });
db.lists.add({name: newListName}).then(function(list) {
$('li#add_list_last_elem').before('<li><a id="list_' + list.id + '">' + newListName + '</li>');
$('a#list_' + list.id).data('listID', list.id);
$('a#list_' + list.id).click(function () { openList($(this)); });
$.afui.goBack();
});
}
function deleteListClicked(listID) {
deleteList(listID);
db.lists.delete(listID);
db.items.where('listID').equals(listID).each(function(item) {
db.items.delete(item.id);
});
$('a#list_' + listID).parent().remove();
$('a#list_' + listID).remove();
@ -86,14 +111,10 @@ function deleteListClicked(listID) {
function loadLists() {
console.log('Recovering data');
var listData = getAllLists();
console.log("Lists: " + listData.length);
listData.forEach(function(list, count) {
console.log('Adding list item ' + count);
$('li#add_list_last_elem').before('<li><a id="list_' + list.listID + '">' + list.title + '</li>');
$('a#list_' + list.listID).click(function () { openList($(this)); });
$('a#list_' + list.listID).data('listID', list.listID);
db.lists.each(function(list) {
$('li#add_list_last_elem').before('<li><a id="list_' + list.id + '">' + list.name + '</li>');
$('a#list_' + list.id).click(function () { openList($(this)); });
$('a#list_' + list.id).data('listID', list.id);
});
}
@ -119,8 +140,6 @@ window.addEventListener('DOMContentLoaded', function() {
// https://developer.mozilla.org/Web/API/Element.innerHTML#Security_considerations
// message.textContent = translate('message');
$('#main').data('title', translate('main_list'));
loadLists();
$('#add_list').click(function(){

3099
js/libs/Dexie.js Normal file
View file

File diff suppressed because it is too large Load diff

154
js/storelists.js
View file

@ -1,154 +0,0 @@
/* Small library to deal with the localStorage with in a simpler way. I also expect it'll make the
code clearer to read and minimize errors */
// Now time for some constants
var PREFIX = "ToDoList_";
// Now time for some GETs
function getListTitle(listID) {
return localStorage.getItem(PREFIX + 'list' + listID);
}
function getListItemCount(listID) {
return parseInt(localStorage.getItem(PREFIX + listID + '_element_count'));
}
function getAllLists() {
var maxLists = parseInt(localStorage.getItem('ToDoList_LastID'));
console.log('LastID: ' + maxLists);
var allLists = [];
for(var count = 0; count < maxLists; count++) {
listTitle = getListTitle(count);
if (listTitle) {
allLists.push({listID: count, title: listTitle});
}
}
return allLists;
}
function getItemText(listID, itemID) {
return localStorage.getItem(PREFIX + listID + '_element_' + itemID);
}
function isItemChecked(listID, itemID) {
var checked = localStorage.getItem(PREFIX + listID + '_element_' + itemID + '_checked');
return checked == 'true';
}
function itemExists(listID, itemID) {
if (localStorage.getItem(PREFIX + listID + '_element_' + itemID)) {
return true;
} else {
return false;
}
}
// INSERTs and SETs
function createList(text) {
var lastID = 0;
if(localStorage.getItem(PREFIX + 'LastID')) {
lastID = parseInt(localStorage.getItem(PREFIX + 'LastID'));
} else {
localStorage.setItem(PREFIX + 'LastID', 0);
}
var finalID = 0;
if(lastID != 0) {
var count = 0;
while((localStorage.getItem(PREFIX + 'list' + count)) && (count < lastID)) {
count++;
}
if(count < lastID) {
finalID = count;
} else {
finalID = lastID;
lastID++;
localStorage.setItem(PREFIX + 'LastID', lastID);
}
} else {
finalID = 0;
lastID = 1;
localStorage.setItem(PREFIX + 'LastID', lastID);
}
localStorage.setItem(PREFIX + 'list' + finalID, text);
return finalID;
}
function insertItem(listID, text) {
var numElements = getListItemCount(listID);
var elementPosition = 0;
if((numElements) && (numElements > 0)) {
var count = 0;
while ((itemExists(listID, count)) && (count < numElements)) {
count++;
}
if(count < numElements) {
elementPosition = count;
} else {
elementPosition = numElements;
numElements++;
}
} else {
elementPosition = 0;
numElements = 1;
}
localStorage.setItem(PREFIX + listID + '_element_' + elementPosition, text);
localStorage.setItem(PREFIX + listID + '_element_' + elementPosition + '_checked', 'false');
localStorage.setItem(PREFIX + listID + '_element_count', numElements);
return elementPosition;
}
function checkItem(listID, itemID) {
if(itemExists(listID, itemID)) {
localStorage.setItem(PREFIX + listID + '_element_' + itemID + '_checked', 'true');
}
}
function uncheckItem(listID, itemID) {
if(itemExists(listID, itemID)) {
localStorage.setItem(PREFIX + listID + '_element_' + itemID + '_checked', 'false');
}
}
// Delete functions
function deleteItem(listID, itemID) {
var maxElementID = getListItemCount(listID);
if(itemExists(listID, itemID)) {
localStorage.removeItem(PREFIX + listID + '_element_' + itemID);
localStorage.removeItem(PREFIX + listID + '_element_' + itemID + '_checked');
if(itemID == (maxElementID - 1)) {
localStorage.setItem(PREFIX + listID + '_element_count', itemID);
}
}
}
function deleteList(listID) {
var maxItemID = getListItemCount(listID);
for(var count = 0; count < maxItemID; count++) {
deleteItem(listID, count);
}
localStorage.removeItem(PREFIX + listID + '_element_count');
localStorage.removeItem(PREFIX + 'list' + listID);
if (listID == (localStorage.getItem(PREFIX + 'LastID') - 1)) {
localStorage.setItem(PREFIX + 'LastID', listID);
}
if (listID == 0) {
localStorage.removeItem(PREFIX + 'LastID');
}
}

14
manifest.webapp
View file

@ -1,7 +1,7 @@
{
"version": "0.1.0",
"name": "ToDo List",
"description": "A template with the bare minimum structure",
"description": "A simple ToDo List",
"launch_path": "/index.html",
"icons": {
"16": "/img/icons/icon16x16.png",
@ -14,7 +14,11 @@
"url": "https://github.com/resetreboot"
},
"type": "privileged",
"permissions": {"storage": true},
"permissions": {
"storage": {
"description": "Required to store the todo lists data"
}
},
"installs_allowed_from": [
"*"
],
@ -28,7 +32,11 @@
"es": {
"name": "Lista de Tareas",
"description": "Una sencilla lista de tareas",
"permissions": {"storage": true}
"permissions": {
"storage":{
"description": "Se necesita para almacenar las listas de tareas"
}
}
}
},
"default_locale": "en"