var curList; var bgColors = ["info", "primary", "danger", "success", "warning", "secondary"]; var borderColors = ["info", "primary", "danger", "success", "warning", "secondary"]; var textColors = ["light", "light", "light", "light", "dark", "dark" ]; 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(); if (curList) { $('#editButton').show(); } else { $('#editButton').hide(); } $('#saveButton').hide(); } function triggerSelect(listId) { console.debug('Switch selection to list ' + listId); if (curList) { $('.nav-link[data-list-id="' + curList.id + '"]').removeClass('active'); $('#listBox').removeClass("border-" + borderColors[curList.index]) .removeClass("bg-" + bgColors[curList.index]) .removeClass("text-" + textColors[curList.index]); } $('.nav-link[data-list-id="' + listId + '"]').addClass('active'); disableEditMode(); $.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; $('#listBox').addClass("border-" + borderColors[list.index]) .addClass("bg-" + bgColors[list.index]) .addClass("text-" + textColors[list.index]); $('#listName').text('Lijst van ' + list.name) $('#listUpdatedAt').text('Laaste aanpassing op: FIXME'); $('#listData').html(list.data); $('#editButton').show(); }); } function triggerUpdate(listId, data) { console.debug('Triggering HTML update for list ' + listId + ', data: ' + data); } function saveUpdate(listId, data) { console.debug('Saving data update for list ' + listId); disableEditMode(); curList.data = data; $.ajax({ method: 'PUT', url: '/lists/' + listId, headers: { 'Content-Type': 'application/json' }, data: JSON.stringify(curList) }); } $(function() { $('#cancelButton').on('click', function() { disableEditMode(); }); $('#editButton').on('click', function() { enableEditMode(); }); $('#saveButton').on('click', function() { data = $('#listData').val(); saveUpdate(curList.id, data); }); $('#listData').on('input', function() { data = this.value; triggerUpdate(curList.id, data); }); $('.listSelect').on('click', function() { listId = $(this).data("list-id"); triggerSelect(listId); }); var listId = getUrlListId(); if (listId) { triggerSelect(getUrlListId()); } disableEditMode(); });