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 showErrorDialog(title, html, buttons) {
  var errorDialog = $("#errorDialog");
  errorDialog.find('.modal-title').text(title);
  errorDialog.find('.modal-body').html(html);
  if (buttons) {
    errorDialog.find('.modal-footer').show();
  } else {
    errorDialog.find('.modal-footer').hide();
  }
  errorDialog.modal();
}

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

    var curListId = getUrlListId();
    selectList(curListId);
  }).fail(function(jqXHR, textMsg, error) {
    showErrorDialog("Laden mislukt!",
      "<p>Kan de lijsten niet laden!</p>" +
      "<p>Probeer eventueel de pagina te verversen</p>" +
      "<p class='pt-2'><small><i>(Technische foutmelding: " + error +
        " (" + textMsg + "))<i></small></p>",
      false);
  });
}

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.show(200);
      } else {
        listElem.hide(200);
      }
    });
  } else {
    console.debug("Showing all lists");
    lists.forEach(function(list) {
      var listElem = getListElem(list.id);
      listElem.show(200);
    });
  }

  $("#navbarNav").collapse('hide');
}

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('Laatste 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");
  var listHtmlElem = $('.list-html', listElem)

  $.ajax({
    url: '/lists/' + listId,
    headers: { 'Accept': 'text/html' }
  }).done(function(html) {
    listHtmlElem.html(html);
    $("ul > li", listHtmlElem).has('input[type="checkbox"]')
                              .parent()
                              .addClass("tasklist");
    if (listHtmlElem.find('hr').length) {
      listHtmlElem.find('hr')
                  .nextAll()
                  .wrapAll('<div class="collapse list-more"/>')
      listHtmlElem.append('<div class="row justify-content-center">' +
        '<button class="btn btn-sm btn-light text-dark list-more-toggle" '+
                 'data-toggle="collapse" ' +
                 'data-target=".list[data-list-id=\'' + listId + '\'] .list-more">' +
          'Meer…</button>' +
        '</div>');

      var listMoreButton = listHtmlElem.find(".list-more-toggle");
      console.debug(listMoreButton);
      listHtmlElem.find('.list-more')
        .on('shown.bs.collapse', function() {
        listMoreButton.text('Minder…');
      }).on('hidden.bs.collapse', function() {
        listMoreButton.text('Meer…');
      });
    }
  }).fail(function(html, textMsg, error) {
    listHtmlElem.html("<h3><i>Kan lijst niet tonen!</i></h3>" +
      "<p class='pt-2'><small><i>(Technische foutmelding: " + error +
        " (" + textMsg + "))<i></small></p>");
  });
}

function saveListChanges(listElem) {
  var listId = listElem.data("list-id");
  var list = lists.find(function(list) { return list.id == listId });
  var old_data = list.data;
  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(updateList)
    .fail(function(jqXHR, textMsg, error) {
      list.data = old_data;
      showErrorDialog("Opslaan mislukt!",
        "<p>Kan de lijst niet opslaan! Probeer later nog eens of " +
          "annuleer de bewerking.</p>" +
        "<p class='pt-2'><small><i>(Technische foutmelding: " + error +
          " (" + textMsg + "))<i></small></p>",
        true);
  });
}

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(200)
                           .popover('hide');
  $('.list-html', listElem).show(200);
  $('.list-edit-buttons', listElem).hide(200);
  $('.list-edit-mode-buttons', listElem).show(200);
  $('.list-edit-help', listElem).removeClass('active')
                                .popover('hide');
}

function enableListEditMode(listElem) {
  $('.list-data', listElem).show(200);
  $('.list-html', listElem).hide(200);
  $('.list-edit-mode-buttons', listElem).hide(200);
  $('.list-edit-buttons', listElem).show(200);
}

$(function() {
  $('.lists-refresh').on('click', function() {
    if ($(".list-data:visible").length) {
      showErrorDialog("Kan niet verversen tijdens bewerken!",
        "<p>Het is niet mogelijk om de lijsten te verversen als er " +
          "op dit moment een lijst bewerkt wordt.</p>" +
        "<p>Sla te lijst die bewerkt wordt eerst op of annuleer de " +
          "bewerking.",
        true);
    } else {
      initLists();
    }
  });

  $('.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-edit-help').on('click', function() {
    var listElem = $(this).parents(".list");
    var listDataElem = $('.list-data', listElem);
    $(this).toggleClass('active')
    listDataElem.popover('toggle');
  });

  $('.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();
  $('textarea').popover({
    html: true,
    trigger: 'manual'
  });
});