2017-12-23 22:36:43 +01:00
|
|
|
var curList;
|
|
|
|
|
2017-12-27 20:28:34 +01:00
|
|
|
var bgColors = ["info", "primary", "danger", "success", "warning", "secondary"];
|
|
|
|
var borderColors = ["info", "primary", "danger", "success", "warning", "secondary"];
|
|
|
|
var textColors = ["light", "light", "light", "light", "dark", "dark" ];
|
|
|
|
|
2017-12-23 22:36:43 +01:00
|
|
|
function getUrlListId() {
|
|
|
|
var hash = window.location.hash;
|
|
|
|
if (hash.length == 0) {
|
|
|
|
return undefined;
|
|
|
|
} else {
|
|
|
|
return hash.substr(1, hash.length);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function enableEditMode() {
|
|
|
|
if (curList) {
|
|
|
|
$('#listData').html(curList.data);
|
|
|
|
}
|
|
|
|
$('#listData').show(250);
|
|
|
|
$('#cancelButton').show(250);
|
|
|
|
$('#editButton').hide(250);
|
|
|
|
$('#saveButton').show(250);
|
|
|
|
}
|
|
|
|
|
|
|
|
function disableEditMode() {
|
|
|
|
$('#listData').hide();
|
|
|
|
$('#cancelButton').hide();
|
2017-12-27 17:33:46 +01:00
|
|
|
if (curList) {
|
|
|
|
$('#editButton').show();
|
|
|
|
} else {
|
|
|
|
$('#editButton').hide();
|
|
|
|
}
|
2017-12-23 22:36:43 +01:00
|
|
|
$('#saveButton').hide();
|
|
|
|
}
|
|
|
|
|
|
|
|
function triggerSelect(listId) {
|
|
|
|
console.debug('Switch selection to list ' + listId);
|
|
|
|
if (curList) {
|
|
|
|
$('.nav-link[data-list-id="' + curList.id + '"]').removeClass('active');
|
2017-12-27 20:57:20 +01:00
|
|
|
$('#listBox').removeClass("border-" + borderColors[curList.index])
|
|
|
|
.removeClass("bg-" + bgColors[curList.index])
|
|
|
|
.removeClass("text-" + textColors[curList.index]);
|
2017-12-23 22:36:43 +01:00
|
|
|
}
|
|
|
|
$('.nav-link[data-list-id="' + listId + '"]').addClass('active');
|
2017-12-27 17:33:46 +01:00
|
|
|
disableEditMode();
|
2017-12-23 22:36:43 +01:00
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
url: '/lists/' + listId,
|
|
|
|
headers: { 'Accept': 'text/html' }
|
|
|
|
}).done(function(html) { $('#listHtml').html(html); });
|
|
|
|
$.ajax({
|
|
|
|
url: '/lists/' + listId,
|
|
|
|
headers: { 'Accept': 'application/json' }
|
|
|
|
}).done(function(list) {
|
|
|
|
curList = list;
|
2017-12-27 20:57:20 +01:00
|
|
|
$('#listBox').addClass("border-" + borderColors[list.index])
|
|
|
|
.addClass("bg-" + bgColors[list.index])
|
|
|
|
.addClass("text-" + textColors[list.index]);
|
2017-12-23 22:36:43 +01:00
|
|
|
$('#listName').text('Lijst van ' + list.name)
|
2017-12-27 21:20:17 +01:00
|
|
|
mtime = new Date(list.mtime.secs_since_epoch * 1000);
|
|
|
|
$('#listUpdatedAt').text('Laaste aanpassing op ' +
|
|
|
|
mtime.toLocaleDateString("nl") + ' om ' + mtime.toLocaleTimeString("nl"));
|
2017-12-27 20:57:20 +01:00
|
|
|
$('#listData').html(list.data);
|
2017-12-27 17:32:39 +01:00
|
|
|
$('#editButton').show();
|
2017-12-23 22:36:43 +01:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function triggerUpdate(listId, data) {
|
|
|
|
console.debug('Triggering HTML update for list ' + listId + ', data: ' + data);
|
2017-12-27 21:47:23 +01:00
|
|
|
listCopy = Object.assign({}, curList);
|
|
|
|
listCopy.data = data;
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
method: 'POST',
|
|
|
|
url: '/lists',
|
|
|
|
headers: { 'Accept': 'text/html',
|
|
|
|
'Content-Type': 'application/json' },
|
|
|
|
data: JSON.stringify(listCopy)
|
|
|
|
}).done(function(html) { $("#listHtml").html(html) });
|
2017-12-23 22:36:43 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
function saveUpdate(listId, data) {
|
|
|
|
console.debug('Saving data update for list ' + listId);
|
|
|
|
disableEditMode();
|
|
|
|
curList.data = data;
|
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-23 22:36:43 +01:00
|
|
|
data: JSON.stringify(curList)
|
2017-12-27 21:48:25 +01:00
|
|
|
}).done(function(list) {
|
|
|
|
mtime = new Date(list.mtime.secs_since_epoch * 1000);
|
|
|
|
$('#listUpdatedAt').text('Laaste aanpassing op ' +
|
|
|
|
mtime.toLocaleDateString("nl") + ' om ' + mtime.toLocaleTimeString("nl"));
|
|
|
|
$('#listData').html(list.data);
|
2017-12-23 22:36:43 +01:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
$(function() {
|
2017-12-27 21:47:54 +01:00
|
|
|
$('#cancelButton').on('click', function() {
|
|
|
|
disableEditMode();
|
|
|
|
triggerUpdate(curList.id, curList.data);
|
|
|
|
$('#listData').val(curList.data);
|
|
|
|
});
|
2017-12-23 22:36:43 +01:00
|
|
|
|
|
|
|
$('#editButton').on('click', function() { enableEditMode(); });
|
|
|
|
|
|
|
|
$('#saveButton').on('click', function() {
|
2017-12-27 17:33:28 +01:00
|
|
|
data = $('#listData').val();
|
2017-12-23 22:36:43 +01:00
|
|
|
saveUpdate(curList.id, data);
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#listData').on('input', function() {
|
2017-12-27 17:33:28 +01:00
|
|
|
data = this.value;
|
2017-12-23 22:36:43 +01:00
|
|
|
triggerUpdate(curList.id, data);
|
|
|
|
});
|
|
|
|
|
|
|
|
$('.listSelect').on('click', function() {
|
|
|
|
listId = $(this).data("list-id");
|
|
|
|
triggerSelect(listId);
|
|
|
|
});
|
|
|
|
|
|
|
|
var listId = getUrlListId();
|
|
|
|
if (listId) {
|
|
|
|
triggerSelect(getUrlListId());
|
|
|
|
}
|
|
|
|
disableEditMode();
|
|
|
|
});
|