SPA todo app

todo_gaia.js

/**
 * 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', function() {
        this.showPage('view');
      }.bind(this));
      this.elements.goEdit.addEventListener('click', function() {
        this.showPage('edit');
      }.bind(this));
      this.elements.submit.addEventListener('click', this.insertItem.bind(this));
      this.elements.taskInput.addEventListener('keydown', function(evt) {
        if (evt.keyCode === 13) {
          this.insertItem();
        }
      }.bind(this));

      this.showPage('view');
    },

    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();
  });
}());