226 lines
6.8 KiB
JavaScript
226 lines
6.8 KiB
JavaScript
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'
|
|
});
|
|
});
|