Hook op JS code to make the UI work in the browser

static/js/wishlists.js

@@ -0,0 +1,93 @@
+var curList;
+
+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();
+  $('#editButton').show();
+  $('#saveButton').hide();
+}
+
+function triggerSelect(listId) {
+  console.debug('Switch selection to list ' + listId);
+  disableEditMode();
+  if (curList) {
+    $('.nav-link[data-list-id="' + curList.id + '"]').removeClass('active');
+  }
+  $('.nav-link[data-list-id="' + listId + '"]').addClass('active');
+
+  $.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;
+    $('#listName').text('Lijst van ' + list.name)
+    $('#listUpdatedAt').text('Laaste aanpassing op: FIXME');
+    $('#listData').html(list.data);
+  });
+}
+
+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').text();
+    saveUpdate(curList.id, data);
+  });
+
+  $('#listData').on('input', function() {
+    data = $(this).text();
+    triggerUpdate(curList.id, data);
+  });
+
+  $('.listSelect').on('click', function() {
+    listId = $(this).data("list-id");
+    triggerSelect(listId);
+  });
+
+  var listId = getUrlListId();
+  if (listId) {
+    triggerSelect(getUrlListId());
+  }
+  disableEditMode();
+});

templates/index.html.tera

@@ -44,3 +44,7 @@
   </div>
 </div>
 {% endblock content %}
+
+{% block script %}
+<script src="/js/wishlists.js"></script>
+{% endblock script %}