Created
October 14, 2014 01:37
-
-
Save gasolin/d76800de8bfd66bbc007 to your computer and use it in GitHub Desktop.
SPA todo app II
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Main entry point. | |
* | |
* the DOM has been localized and the user sees it in their language. | |
* | |
* @class Main | |
*/ | |
(function() { | |
'use strict'; | |
var CRUD = function() { | |
var DBNAME = 'crud'; | |
var elements = {}; | |
}; | |
CRUD.prototype = { | |
init: function c_init() { | |
this.elements = { | |
goEdit: document.querySelector('#edit'), | |
goView: document.querySelector('#view'), | |
taskList: document.querySelector('#tasklist'), | |
content: document.querySelector('#content'), | |
taskPanel: document.querySelector('#task_panel'), | |
taskInput: document.querySelector('#task_input'), | |
submit: document.querySelector('#submit') | |
}; | |
this.elements.goView.addEventListener('click', this); | |
this.elements.goEdit.addEventListener('click', this); | |
this.elements.submit.addEventListener('click', this); | |
this.elements.taskInput.addEventListener('keydown', this); | |
this.showPage('view'); | |
}, | |
// dispatcher | |
handleEvent: function c_handleEvent(evt) { | |
switch (evt.type) { | |
case 'click': | |
evt.preventDefault(); | |
switch (evt.target.id) { | |
case 'view': | |
this.showPage('view'); | |
break; | |
case 'edit': | |
this.showPage('edit'); | |
break; | |
case 'submit': | |
this.insertItem(); | |
break; | |
} | |
break; | |
case 'keydown': | |
evt.preventDefault(); | |
if (evt.keyCode === 13) { | |
this.insertItem(); | |
} | |
}, | |
showPage: function c_showPage(page) { | |
switch(page) { | |
case 'edit': | |
this.elements.goView.hidden = false; | |
this.elements.goEdit.hidden = true; | |
this.elements.taskPanel.hidden = true; | |
this.listItems('edit'); | |
break; | |
case 'view': | |
default: | |
this.elements.goView.hidden = true; | |
this.elements.goEdit.hidden = false; | |
this.elements.taskPanel.hidden = false; | |
this.listItems('view'); | |
break; | |
} | |
}, | |
// create fragment, append to taskList | |
renderList: function c_renderList(type, data) { | |
this.elements.taskList.innerHTML = ''; | |
data.forEach(function(item) { | |
console.log(item.item); | |
var li = document.createElement('li'); | |
if (type === 'view') { | |
li.textContent = item.item; | |
} else { | |
li.innerHTML = item.item + ' <a href="#" data-id=' + item._id + '>x</a>'; | |
li.addEventListener('click', function(evt) { | |
evt.preventDefault(); | |
evt.stopPropagation(); | |
this.removeItem(evt.target.dataset.id); | |
}.bind(this)); | |
} | |
this.elements.taskList.appendChild(li); | |
}.bind(this)); | |
}, | |
listItems: function c_listContent(type) { | |
indexed(this.DBNAME).create(); | |
var promise = this.getItems(); | |
promise.then(function(data) { | |
this.renderList(type, data); | |
}.bind(this)); | |
}, | |
getItems: function c_getItems() { | |
var self = this; | |
return new Promise(function(resolve, reject) { | |
indexed(self.DBNAME).find(function (err, data) { | |
if (err) { | |
console.log('Nope.'); | |
} else { | |
resolve(data); | |
} | |
}); | |
}); | |
}, | |
getItem: function c_getItem(id) { | |
indexed(this.DBNAME).find({ | |
_id: id | |
}, function (err, data) { | |
if (err) { | |
console.log('Nope.'); | |
} else { | |
console.log(data); | |
} | |
}); | |
}, | |
insertItem: function c_insertItem() { | |
var content = this.elements.taskInput.value; | |
var now = new Date(); | |
if (content.length > 0) { | |
indexed(this.DBNAME).insert({ | |
item: content, | |
}, function (err, data) { | |
if (err) { | |
console.log('Nope.'); | |
} else { | |
console.log(data); | |
} | |
}); | |
} | |
this.elements.taskInput.value = ''; | |
this.listItems('view'); | |
}, | |
updateItem: function c_updateItem(id, item) { | |
indexed(this.DBNAME).update({ | |
_id: id | |
}, { | |
item: item | |
}, function (err, data) { | |
// Handle response... | |
this.listItems('view'); | |
}); | |
}, | |
removeItem: function c_removeItem(id) { | |
indexed(this.DBNAME).delete({ | |
_id: id | |
}, function (err, data) { | |
// Handle response... | |
this.listItems('edit'); | |
}.bind(this)); | |
}, | |
resetItems: function c_resetItems() { | |
indexed(this.DBNAME).drop(); | |
} | |
} | |
document.addEventListener('DocumentLocalized', function() { | |
document.body.classList.remove('hidden'); | |
var crud = new CRUD(); | |
crud.init(); | |
}); | |
}()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment