rocket-pinboard/static/js/wishlists.js

var curList;

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();
  $('#editButton').show();
  $('#saveButton').hide();
}

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

  $.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;
    $('#listName').text('Lijst van ' + list.name)
    $('#listData').html(list.data);
    var bg_color   = ["info",  "primary", "danger", "success", "warning", "secondary"][list.index];
    var text_color = ["light", "light",   "light",  "light",   "dark",    "dark"     ][list.index];
    $('#listHtml').addClass("border-" + bg_color)
                  .addClass("bg-" + bg_color)
                  .addClass("text-" + text_color);
    $('#listUpdatedAt').text('Laaste aanpassing op: FIXME');
    $('#editButton').show();
  });
}

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

function saveUpdate(listId, data) {
  console.debug('Saving data update for list ' + listId);
  disableEditMode();
  curList.data = data;
  $.ajax({
    method: 'PUT',
    url: '/lists/' + listId,
    headers: { 'Content-Type': 'application/json' },
    data: JSON.stringify(curList)
  });
}

$(function() {
  $('#cancelButton').on('click', function() { disableEditMode(); });

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