rocket-pinboard/static/js/wishlists.js

var curList;

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 == 0) {
    return undefined;
  } else {
    return hash.substr(1, hash.length);
  }
}

function enableEditMode() {
  if (curList) {
    $('#listData').html(curList.data);
  }
  $('#listData').show(250);
  $('#cancelButton').show(250);
  $('#editButton').hide(250);
  $('#saveButton').show(250);
}

function disableEditMode() {
  $('#listData').hide();
  $('#cancelButton').hide();
  if (curList) {
    $('#editButton').show();
  } else {
    $('#editButton').hide();
  }
  $('#saveButton').hide();
}

function triggerSelect(listId) {
  console.debug('Switch selection to list ' + listId);
  if (curList) {
    $('.nav-link[data-list-id="' + curList.id + '"]').removeClass('active');
    $('#listBox').removeClass("bg-" + bgColors[curList.index])
                 .removeClass("text-" + textColors[curList.index]);
  }
  $('.nav-link[data-list-id="' + listId + '"]').addClass('active');
  disableEditMode();

  $.ajax({
    url: '/lists/' + listId,
    headers: { 'Accept': 'text/html' }
  }).done(function(html) { $('#listHtml').html(html); });

  $.ajax({
    url: '/lists/' + listId,
    headers: { 'Accept': 'application/json' }
  }).done(function(list) {
    curList = list;
    $('#listBox').addClass("bg-" + bgColors[list.index])
                 .addClass("text-" + textColors[list.index]);
    $('#listName').text(list.name);
    mtime = new Date(list.mtime.secs_since_epoch * 1000);
    $('#listUpdatedAt').text('Laaste aanpassing op ' +
      mtime.toLocaleDateString("nl") + ' om ' + mtime.toLocaleTimeString("nl"));
    $('#listData').val(list.data);
    $('#editButton').show();
  });
}

function triggerUpdate(listId, data) {
  console.debug('Triggering HTML update for list ' + listId + ', data: ' + data);
  listCopy = Object.assign({}, curList);
  listCopy.data = data;

  $.ajax({
    method: 'POST',
    url: '/lists',
    headers: { 'Accept': 'text/html',
               'Content-Type': 'application/json' },
    data: JSON.stringify(listCopy)
  }).done(function(html) { $("#listHtml").html(html) });
}

function saveUpdate(listId, data) {
  console.debug('Saving data update for list ' + listId);
  disableEditMode();
  curList.data = data;

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

$(function() {
  $('#cancelButton').on('click', function() {
     disableEditMode();
     triggerUpdate(curList.id, curList.data);
     $('#listData').val(curList.data);
  });

  $('#editButton').on('click', function() { enableEditMode(); });

  $('#saveButton').on('click', function() {
    data = $('#listData').val();
    saveUpdate(curList.id, data);
  });

  $('#listData').on('input', function() {
    data = this.value;
    triggerUpdate(curList.id, data);
  });

  $('.listSelect').on('click', function() {
    listId = $(this).data("list-id");
    triggerSelect(listId);
  });

  var listId = getUrlListId();
  if (listId) {
    triggerSelect(getUrlListId());
  }
  disableEditMode();
});