rocket-pinboard/static/js/pinboard.js

var notes;

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

function getUrlNoteId() {
  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 initNotes() {
  $.ajax({
    url: '/notes',
    headers: { 'Accept': 'application/json' }
  }).done(function(allNotes) {
    notes = allNotes;
    notes.forEach(updateNote);

    var curNoteId = getUrlNoteId();
    selectNote(curNoteId);
  }).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 getNoteElem(noteId) {
  return $('.note[data-note-id="' + noteId + '"]');
}

function selectNote(noteId) {
  if (noteId) {
    console.debug("Selecting note " + noteId);
    notes.forEach(function(note) {
      var noteElem = getNoteElem(note.id);
      if (note.id == noteId) {
        noteElem.show(200);
      } else {
        noteElem.hide(200);
      }
    });
  } else {
    console.debug("Showing all notes");
    notes.forEach(function(note) {
      var noteElem = getNoteElem(note.id);
      noteElem.show(200);
    });
  }

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

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

  updateNoteHTML(noteElem);

  disableNoteEditMode(noteElem);
}

function updateNoteHTML(noteElem) {
  var noteId = noteElem.data("note-id");
  var noteHtmlElem = $('.note-html', noteElem)

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

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

function saveNoteChanges(noteElem) {
  var noteId = noteElem.data("note-id");
  var note = notes.find(function(note) { return note.id == noteId });
  var old_data = note.data;
  note.data = $('.note-data', noteElem).val();

  $.ajax({
    method: 'PUT',
    url: '/notes/' + noteId,
    headers: { 'Accept': 'application/json',
               'Content-Type': 'application/json' },
    data: JSON.stringify(note)
  }).done(updateNote)
    .fail(function(jqXHR, textMsg, error) {
      note.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 revertNoteChanges(noteElem) {
  var noteId = noteElem.data("note-id");
  var note = notes.find(function(note) { return note.id == noteId });

  disableNoteEditMode(noteElem);

  $('.note-data', noteElem).val(note.data);
}

function disableNoteEditMode(noteElem) {
  $('.note-data', noteElem).hide(200)
                           .popover('hide');
  $('.note-html', noteElem).show(200);
  $('.note-edit-buttons', noteElem).hide(200);
  $('.note-edit-mode-buttons', noteElem).show(200);
  $('.note-edit-help', noteElem).removeClass('active')
                                .popover('hide');
}

function enableNoteEditMode(noteElem) {
  $('.note-data', noteElem).show(200);
  $('.note-html', noteElem).hide(200);
  $('.note-edit-mode-buttons', noteElem).hide(200);
  $('.note-edit-buttons', noteElem).show(200);
}

$(function() {
  $('.notes-refresh').on('click', function() {
    if ($(".note-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 {
      initNotes();
    }
  });

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

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

  $('.note-edit-help').on('click', function() {
    var noteElem = $(this).parents(".note");
    var noteDataElem = $('.note-data', noteElem);
    $(this).toggleClass('active')
    noteDataElem.popover('toggle');
  });

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

  $('.note-select').on('click', function() {
    noteId = $(this).data('note-id');
    selectNote(noteId);
  });

  initNotes();
  $('textarea').popover({
    html: true,
    trigger: 'manual'
  });
});