2017-12-29 23:56:24 +01:00
|
|
|
var lists;
|
2017-12-23 22:36:43 +01:00
|
|
|
|
2017-12-29 23:56:24 +01:00
|
|
|
var bgColors = ["info", "primary", "danger", "success", "warning", "secondary"];
|
|
|
|
var textColors = ["light", "light", "light", "light", "dark", "dark" ];
|
2017-12-27 20:28:34 +01:00
|
|
|
|
2017-12-23 22:36:43 +01:00
|
|
|
function getUrlListId() {
|
|
|
|
var hash = window.location.hash;
|
2017-12-29 23:56:24 +01:00
|
|
|
if (hash.length <= 1) {
|
2017-12-23 22:36:43 +01:00
|
|
|
return undefined;
|
|
|
|
} else {
|
|
|
|
return hash.substr(1, hash.length);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-12-29 23:56:24 +01:00
|
|
|
function initLists() {
|
|
|
|
$.ajax({
|
|
|
|
url: '/lists',
|
|
|
|
headers: { 'Accept': 'application/json' }
|
|
|
|
}).done(function(allLists) {
|
|
|
|
lists = allLists;
|
|
|
|
lists.forEach(updateList);
|
|
|
|
|
|
|
|
var curListId = getUrlListId();
|
|
|
|
selectList(curListId);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function getListElem(listId) {
|
|
|
|
return $('.list[data-list-id="' + listId + '"]');
|
2017-12-23 22:36:43 +01:00
|
|
|
}
|
|
|
|
|
2017-12-29 23:56:24 +01:00
|
|
|
function selectList(listId) {
|
|
|
|
if (listId) {
|
|
|
|
console.debug("Selecting list " + listId);
|
|
|
|
lists.forEach(function(list) {
|
|
|
|
var listElem = getListElem(list.id);
|
|
|
|
if (list.id == listId) {
|
|
|
|
listElem.fadeIn(250);
|
|
|
|
} else {
|
|
|
|
listElem.fadeOut(250);
|
|
|
|
}
|
|
|
|
});
|
2017-12-27 17:33:46 +01:00
|
|
|
} else {
|
2017-12-29 23:56:24 +01:00
|
|
|
console.debug("Showing all lists");
|
|
|
|
lists.forEach(function(list) {
|
|
|
|
var listElem = getListElem(list.id);
|
|
|
|
listElem.fadeIn(250);
|
|
|
|
});
|
2017-12-27 17:33:46 +01:00
|
|
|
}
|
2017-12-23 22:36:43 +01:00
|
|
|
}
|
|
|
|
|
2017-12-29 23:56:24 +01:00
|
|
|
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('Laaste aanpassing op ' +
|
|
|
|
mtime.toLocaleDateString("nl") + ' om ' + mtime.toLocaleTimeString("nl"));
|
|
|
|
$('.list-data', listElem).val(list.data);
|
2017-12-23 22:36:43 +01:00
|
|
|
|
2017-12-29 23:56:24 +01:00
|
|
|
updateListHTML(listElem);
|
2017-12-29 19:55:28 +01:00
|
|
|
|
2017-12-29 23:56:24 +01:00
|
|
|
disableListEditMode(listElem);
|
2017-12-23 22:36:43 +01:00
|
|
|
}
|
|
|
|
|
2017-12-29 23:56:24 +01:00
|
|
|
function updateListHTML(listElem) {
|
|
|
|
var listId = listElem.data("list-id");
|
2017-12-27 21:47:23 +01:00
|
|
|
$.ajax({
|
2017-12-29 23:56:24 +01:00
|
|
|
url: '/lists/' + listId,
|
|
|
|
headers: { 'Accept': 'text/html' }
|
2017-12-30 14:06:46 +01:00
|
|
|
}).done(function(html) {
|
2017-12-30 16:14:52 +01:00
|
|
|
var listHtmlElem = $('.list-html', listElem)
|
|
|
|
listHtmlElem.html(html);
|
|
|
|
$("ul > li", listHtmlElem).has('input[type="checkbox"]')
|
|
|
|
.parent()
|
|
|
|
.addClass("tasklist");
|
2017-12-30 14:06:46 +01:00
|
|
|
});
|
2017-12-23 22:36:43 +01:00
|
|
|
}
|
|
|
|
|
2017-12-29 23:56:24 +01:00
|
|
|
function saveListChanges(listElem) {
|
|
|
|
var listId = listElem.data("list-id");
|
|
|
|
var list = lists.find(function(list) { return list.id == listId });
|
|
|
|
list.data = $('.list-data', listElem).val();
|
2017-12-27 21:48:25 +01:00
|
|
|
|
2017-12-23 22:36:43 +01:00
|
|
|
$.ajax({
|
|
|
|
method: 'PUT',
|
|
|
|
url: '/lists/' + listId,
|
2017-12-27 21:48:25 +01:00
|
|
|
headers: { 'Accept': 'application/json',
|
|
|
|
'Content-Type': 'application/json' },
|
2017-12-29 23:56:24 +01:00
|
|
|
data: JSON.stringify(list)
|
2017-12-30 16:16:26 +01:00
|
|
|
}).done(updateList);
|
2017-12-23 22:36:43 +01:00
|
|
|
}
|
|
|
|
|
2017-12-29 23:56:24 +01:00
|
|
|
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) {
|
2017-12-30 16:16:59 +01:00
|
|
|
$('.list-data', listElem).hide()
|
|
|
|
.popover('hide');
|
2017-12-29 23:56:24 +01:00
|
|
|
$('.list-html', listElem).show();
|
|
|
|
$('.list-cancel-button', listElem).hide();
|
|
|
|
$('.list-edit-button', listElem).show();
|
2017-12-30 16:16:59 +01:00
|
|
|
$('.list-edit-help', listElem).hide();
|
2017-12-29 23:56:24 +01:00
|
|
|
$('.list-save-button', listElem).hide();
|
2017-12-30 16:16:59 +01:00
|
|
|
$('.list-edit-help', listElem).removeClass('active')
|
|
|
|
.popover('hide');
|
2017-12-29 23:56:24 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
function enableListEditMode(listElem) {
|
|
|
|
$('.list-data', listElem).show();
|
|
|
|
$('.list-html', listElem).hide();
|
|
|
|
$('.list-cancel-button', listElem).show();
|
|
|
|
$('.list-edit-button', listElem).hide();
|
2017-12-30 16:16:59 +01:00
|
|
|
$('.list-edit-help', listElem).show();
|
2017-12-29 23:56:24 +01:00
|
|
|
$('.list-save-button', listElem).show();
|
|
|
|
}
|
|
|
|
|
2017-12-23 22:36:43 +01:00
|
|
|
$(function() {
|
2017-12-29 23:56:24 +01:00
|
|
|
$('.list-cancel-button').on('click', function() {
|
|
|
|
var listElem = $(this).parents(".list");
|
|
|
|
console.debug("Cancelling the edit of list " + listElem.data("list-id"));
|
|
|
|
revertListChanges(listElem);
|
2017-12-27 21:47:54 +01:00
|
|
|
});
|
2017-12-23 22:36:43 +01:00
|
|
|
|
2017-12-29 23:56:24 +01:00
|
|
|
$('.list-edit-button').on('click', function() {
|
|
|
|
var listElem = $(this).parents(".list");
|
|
|
|
console.debug("Going to edit list " + listElem.data("list-id"));
|
|
|
|
enableListEditMode(listElem);
|
2017-12-23 22:36:43 +01:00
|
|
|
});
|
|
|
|
|
2017-12-30 16:16:59 +01:00
|
|
|
$('.list-edit-help').on('click', function() {
|
|
|
|
var listElem = $(this).parents(".list");
|
|
|
|
var listDataElem = $('.list-data', listElem);
|
|
|
|
$(this).toggleClass('active')
|
|
|
|
listDataElem.popover('toggle');
|
|
|
|
});
|
|
|
|
|
2017-12-29 23:56:24 +01:00
|
|
|
$('.list-save-button').on('click', function() {
|
|
|
|
var listElem = $(this).parents(".list");
|
|
|
|
console.debug("Saving the changes for list " + listElem.data("list-id"));
|
|
|
|
saveListChanges(listElem);
|
2017-12-23 22:36:43 +01:00
|
|
|
});
|
|
|
|
|
2017-12-29 23:56:24 +01:00
|
|
|
$('.list-select').on('click', function() {
|
|
|
|
listId = $(this).data('list-id');
|
|
|
|
selectList(listId);
|
2017-12-23 22:36:43 +01:00
|
|
|
});
|
|
|
|
|
2017-12-29 23:56:24 +01:00
|
|
|
initLists();
|
2017-12-30 16:16:59 +01:00
|
|
|
$('textarea').popover({
|
|
|
|
html: true,
|
|
|
|
trigger: 'manual'
|
|
|
|
});
|
2017-12-23 22:36:43 +01:00
|
|
|
});
|