DeltaDB Dream Code

index.js

// TODO: refactor so models for UI, db

'use strict';

var sites = [], db = new DeltaDB('https://websites.example.com', 'user', 'secret'),
  websites = db.col('websites');

function setFormValues(site) {
  document.getElementById('name').value = site.name ? site.name : '';
  document.getElementById('url').value = site.url ? site.url : '';
}

function getFormValues() {
  return { name: document.getElementById('name').value, url: document.getElementById('url').value };
}

function setFormVisible(visible) {
  document.getElementById('form').style.display = visible ? 'block' : 'none';
  document.getElementById('newButton').style.display = !visible ? 'block' : 'none';
}

function getItemHtml(site) {
  return '<button onclick="editSite(\'' + site.$id + '\')">Edit</button>' +
    '<button onclick="removeSite(\'' + site.$id + '\')">Delete</button> ' +
    site.name + ': ' + site.url;
}

function addItem(site) {
  if (!document.getElementById(site.$id)) { // doesn't exist?
    var siteList = document.getElementById('siteList'), li = document.createElement('li');
    li.id = site.$id;
    li.innerHTML = getItemHtml(site);
    siteList.appendChild(li);
  }
}

function updateItem(site) {
  var item = document.getElementById(site.$id);
  item.innerHTML = getItemHtml(site);
}

function deleteItem(id) {
  document.getElementById('siteList').removeChild(document.getElementById(id));
}

function indexOf(id) {
  for (var i in sites) {
    if (sites[i].$id === id) {
      return i;
    }
  }
  return null;    
}

function getSite(id) {
  var i = indexOf(id);
  return i === null ? null : sites[i];
}

function deleteSite(id) {
  var i = indexOf(id);
  if (i !== null) {
    sites.splice(i, 1);
  }
}

function updateSite(site) {
  var i = indexOf(site.$id);
  if (i !== null) {
    sites[i] = site; 
  }
}

function addSiteAndItem(site) {
  sites.push(site);
  addItem(site);
}

function updateSiteAndItem(changes) {
  var site = db.merge(getSite(changes.$id), changes);
  updateSite(site);
  updateItem(site);
}

function deleteSiteAndItem(id) {
  deleteSite(id);
  deleteItem(id);
}

function editSite(id) {
  setFormValues(id ? getSite(id) : {});
  setFormVisible(true);
}

function removeSite(id) {
  db.delete(id);
}

function saveChanges() {
  websites.set(getFormValues());
}

function saveSite() {
  saveChanges();
  setFormVisible(false);
}

websites
  .on('doc:create', addSiteAndItem),
  .on('doc:update', updateSiteAndItem);
  .on('doc:create', deleteSiteAndItem);

websites.all().then(function (docs) {
  docs.each(function (doc) {
    addSiteAndItem(doc);
  });
});