The card-link class does also other things with padding and spacing. Instead, apply the style override to all links in the list HTML.
149 lines
4.1 KiB
JavaScript
149 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);
|
|
});
|
|
}
|
|
|
|
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();
|
|
});
|