rocket-pinboard/static/js/wishlists.js

var lists;

var bgColors =   ["info",  "primary", "danger", "success", "warning", "secondary"];
var textColors = ["light", "light",   "light",  "light",   "dark",    "dark"     ];

function getUrlListId() {
  var hash = window.location.hash;
  if (hash.length <= 1) {
    return undefined;
  } else {
    return hash.substr(1, hash.length);
  }
}

function initLists() {
  $.ajax({
    url: '/lists',
    headers: { 'Accept': 'application/json' }
  }).done(function(allLists) {
    lists = allLists;
    lists.forEach(updateList);

    var curListId = getUrlListId();
    selectList(curListId);
  });
}

function getListElem(listId) {
  return $('.list[data-list-id="' + listId + '"]');
}

function selectList(listId) {
  if (listId) {
    console.debug("Selecting list " + listId);
    lists.forEach(function(list) {
      var listElem = getListElem(list.id);
      if (list.id == listId) {
        listElem.fadeIn(250);
      } else {
        listElem.fadeOut(250);
      }
    });
  } else {
    console.debug("Showing all lists");
    lists.forEach(function(list) {
      var listElem = getListElem(list.id);
      listElem.fadeIn(250);
    });
  }
}

function updateList(list) {
  var listElem = $('.list[data-list-id="' + list.id + '"]');
  listElem.addClass("bg-" + bgColors[list.index])
          .addClass("text-" + textColors[list.index]);
  $('.list-name', listElem).text(list.name);
  mtime = new Date(list.mtime.secs_since_epoch * 1000);
  $('.list-updated-at', listElem).text('Laaste aanpassing op ' +
    mtime.toLocaleDateString("nl") + ' om ' + mtime.toLocaleTimeString("nl"));
  $('.list-data', listElem).val(list.data);

  updateListHTML(listElem);

  disableListEditMode(listElem);
}

function updateListHTML(listElem) {
  var listId = listElem.data("list-id");
  $.ajax({
    url: '/lists/' + listId,
    headers: { 'Accept': 'text/html' }
  }).done(function(html) { $('.list-html', listElem).html(html); });
}

function saveListChanges(listElem) {
  var listId = listElem.data("list-id");
  var list = lists.find(function(list) { return list.id == listId });
  list.data = $('.list-data', listElem).val();

  $.ajax({
    method: 'PUT',
    url: '/lists/' + listId,
    headers: { 'Accept': 'application/json',
               'Content-Type': 'application/json' },
    data: JSON.stringify(list)
  }).done(function(list) {
    mtime = new Date(list.mtime.secs_since_epoch * 1000);
    $('.list-updated-at', listElem).text('Laaste aanpassing op ' +
      mtime.toLocaleDateString("nl") + ' om ' + mtime.toLocaleTimeString("nl"));
    $('.list-data', listElem).val(list.data);
    updateListHTML(listElem);
    disableListEditMode(listElem);
  });
}

function revertListChanges(listElem) {
  var listId = listElem.data("list-id");
  var list = lists.find(function(list) { return list.id == listId });

  disableListEditMode(listElem);

  $('.list-data', listElem).val(list.data);
}

function disableListEditMode(listElem) {
  $('.list-data', listElem).hide();
  $('.list-html', listElem).show();
  $('.list-cancel-button', listElem).hide();
  $('.list-edit-button', listElem).show();
  $('.list-save-button', listElem).hide();
}

function enableListEditMode(listElem) {
  $('.list-data', listElem).show();
  $('.list-html', listElem).hide();
  $('.list-cancel-button', listElem).show();
  $('.list-edit-button', listElem).hide();
  $('.list-save-button', listElem).show();
}

$(function() {
  $('.list-cancel-button').on('click', function() {
    var listElem = $(this).parents(".list");
    console.debug("Cancelling the edit of list " + listElem.data("list-id"));
    revertListChanges(listElem);
  });

  $('.list-edit-button').on('click', function() {
    var listElem = $(this).parents(".list");
    console.debug("Going to edit list " + listElem.data("list-id"));
    enableListEditMode(listElem);
  });

  $('.list-save-button').on('click', function() {
    var listElem = $(this).parents(".list");
    console.debug("Saving the changes for list " + listElem.data("list-id"));
    saveListChanges(listElem);
  });

  $('.list-select').on('click', function() {
    listId = $(this).data('list-id');
    selectList(listId);
  });

  initLists();
});