Paul van Tilburg
a7a90ce84b
* Add the card-link class to all anchors in the HTML * Override the default Bootstrap styling for links in card text
150 lines
4.1 KiB
JavaScript
150 lines
4.1 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 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 + '"]');
|
|
}
|
|
|
|
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);
|
|
}
|
|
});
|
|
} else {
|
|
console.debug("Showing all lists");
|
|
lists.forEach(function(list) {
|
|
var listElem = getListElem(list.id);
|
|
listElem.fadeIn(250);
|
|
});
|
|
}
|
|
}
|
|
|
|
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);
|
|
|
|
updateListHTML(listElem);
|
|
|
|
disableListEditMode(listElem);
|
|
}
|
|
|
|
function updateListHTML(listElem) {
|
|
var listId = listElem.data("list-id");
|
|
$.ajax({
|
|
url: '/lists/' + listId,
|
|
headers: { 'Accept': 'text/html' }
|
|
}).done(function(html) {
|
|
$('.list-html', listElem).html(html)
|
|
.find("a").addClass("card-link");
|
|
|
|
});
|
|
}
|
|
|
|
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();
|
|
|
|
$.ajax({
|
|
method: 'PUT',
|
|
url: '/lists/' + listId,
|
|
headers: { 'Accept': 'application/json',
|
|
'Content-Type': 'application/json' },
|
|
data: JSON.stringify(list)
|
|
}).done(function(list) {
|
|
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);
|
|
updateListHTML(listElem);
|
|
disableListEditMode(listElem);
|
|
});
|
|
}
|
|
|
|
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();
|
|
$('.list-html', listElem).show();
|
|
$('.list-cancel-button', listElem).hide();
|
|
$('.list-edit-button', listElem).show();
|
|
$('.list-save-button', listElem).hide();
|
|
}
|
|
|
|
function enableListEditMode(listElem) {
|
|
$('.list-data', listElem).show();
|
|
$('.list-html', listElem).hide();
|
|
$('.list-cancel-button', listElem).show();
|
|
$('.list-edit-button', listElem).hide();
|
|
$('.list-save-button', listElem).show();
|
|
}
|
|
|
|
$(function() {
|
|
$('.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-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();
|
|
});
|