206 lines
6 KiB
JavaScript
206 lines
6 KiB
JavaScript
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");
|
|
}).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'
|
|
});
|
|
});
|