Merge branch '593-user-provided-overlays-section-not-updating' into 'master'

Resolve "user-provided overlays section not updating"

Closes #593

See merge request !543

frontend-js/src/main/js/gui/PanelControlElementType.js

@@ -14,9 +14,7 @@ var PanelControlElementType = {
   OVERLAY_GENERAL_OVERLAY_DIV : "OVERLAY_GENERAL_OVERLAY_DIV",
   OVERLAY_GENERAL_OVERLAY_TABLE : "OVERLAY_GENERAL_OVERLAY_TABLE",
   OVERLAY_CUSTOM_OVERLAY_DIV : "OVERLAY_CUSTOM_OVERLAY_DIV",
-  OVERLAY_CUSTOM_OVERLAY_TABLE : "OVERLAY_CUSTOM_OVERLAY_TABLE",
   OVERLAY_CUSTOM_OVERLAY_TITLE : "OVERLAY_CUSTOM_OVERLAY_TITLE",
-  OVERLAY_ADD_OVERLAY_BUTTON : "OVERLAY_ADD_OVERLAY_BUTTON",
 
   USER_TAB_LOGIN_DIV : "USER_TAB_LOGIN_DIV",
   USER_TAB_LOGIN_INPUT_TEXT : "USER_TAB_LOGIN_INPUT_TEXT",

frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js

@@ -44,11 +44,16 @@ function OverlayPanel(params) {
 
   self._createOverlayPanelGui();
 
-  var addButton = this.getControlElement(PanelControlElementType.OVERLAY_ADD_OVERLAY_BUTTON);
+  var addButton = $("[name='addOverlay']", self.getElement());
+  var refreshButton = $("[name='refreshOverlays']", self.getElement());
 
-  addButton.onclick = function () {
+  addButton.on("click", function () {
     return self.openAddOverlayDialog();
-  };
+  });
+
+  refreshButton.on("click", function () {
+    return self.refresh();
+  });
 
   var titleElement = this.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TITLE);
   self.setCustomOverlaysMessage(titleElement.innerHTML);
@@ -105,6 +110,8 @@ OverlayPanel.prototype.constructor = OverlayPanel;
  * @private
  */
 OverlayPanel.prototype._createOverlayPanelGui = function () {
+  var self = this;
+
   var generalOverlaysDiv = Functions.createElement({
     type: "div",
     name: "generalOverlays",
@@ -151,20 +158,28 @@ OverlayPanel.prototype._createOverlayPanelGui = function () {
     style: "width:100%"
   });
   customOverlaysDiv.appendChild(customOverlaysTableDiv);
-  this.setControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TABLE, customOverlaysTableDiv);
 
   var centerTag = Functions.createElement({
-    type: "center"
+    type: "div",
+    style: "text-align: center;"
   });
   customOverlaysDiv.appendChild(centerTag);
 
   var addOverlayButton = Functions.createElement({
     type: "button",
     name: "addOverlay",
-    content: "Add overlay"
+    content: "Add overlay",
+    style: "margin: 4px;"
   });
   centerTag.appendChild(addOverlayButton);
-  this.setControlElement(PanelControlElementType.OVERLAY_ADD_OVERLAY_BUTTON, addOverlayButton);
+
+  var refreshButton = Functions.createElement({
+    type: "button",
+    name: "refreshOverlays",
+    content: "<span class=\"ui-icon ui-icon-refresh\"></span>&nbsp;Refresh",
+    xss: false
+  });
+  centerTag.appendChild(refreshButton);
 };
 
 /**
@@ -176,7 +191,7 @@ OverlayPanel.prototype.clear = function () {
     table.removeChild(table.firstChild);
   }
 
-  table = $(this.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TABLE)).DataTable();
+  table = $("[name='customOverlaysTab']", this.getElement()).DataTable();
   table.clear().draw();
 };
 
@@ -319,7 +334,7 @@ OverlayPanel.prototype.overlayToDataRow = function (overlay, checked, disabled)
 
     result[3] = "<button data='" + overlay.getId() + "' name='download-overlay'><span class='ui-icon ui-icon-arrowthickstop-1-s'></span></button>";
   } else {
-    result[2] = "<a href='#' data='" + overlay.getId() + "' name='overlayLink'><img src='" + GuiConnector.getImgPrefix() + "icons/search.png' style='float: left' hspace='5'/></a>";
+    result[2] = "<a href='#' data='" + overlay.getId() + "' name='overlayLink'><img src='" + GuiConnector.getImgPrefix() + "icons/search.png' alt='search' style='float: left' hspace='5'/></a>";
     result[3] = "";
   }
 
@@ -476,8 +491,9 @@ OverlayPanel.prototype.refresh = function (showDefault) {
     }
 
     var title = self.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TITLE);
-    var addButton = self.getControlElement(PanelControlElementType.OVERLAY_ADD_OVERLAY_BUTTON);
-    var tableElement = self.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TABLE);
+    var addButton = $("[name='addOverlay']", self.getElement());
+    var refreshButton = $("[name='refreshOverlays']", self.getElement());
+    var tableElement = $("[name='customOverlaysTab']", self.getElement());
     if (user.getLogin() === "anonymous") {
       title.innerHTML = 'YOU ARE NOT LOGGED IN. PLEASE, <a href="#">LOG IN</a> '
         + 'TO UPLOAD AND VIEW CUSTOM OVERLAYS<br/><center><button>LOGIN</button></center>';
@@ -486,15 +502,17 @@ OverlayPanel.prototype.refresh = function (showDefault) {
       };
       $(title).find("a")[0].onclick = openLoginDialog;
       $(title).find("button")[0].onclick = openLoginDialog;
-      addButton.style.display = "none";
-      $(tableElement).hide();
+      addButton.hide();
+      refreshButton.hide();
+      tableElement.hide();
     } else {
-      $(tableElement).show();
+      tableElement.show();
       title.innerHTML = self.getCustomOverlaysMessage();
-      addButton.style.display = "block";
+      addButton.show();
+      refreshButton.show();
 
-      table = $(tableElement).on('order.dt', function () {
-        if ($(tableElement).dataTable().fnSettings().aaSorting[0][0] === 0) {
+      table = tableElement.on('order.dt', function () {
+        if (tableElement.dataTable().fnSettings().aaSorting[0][0] === 0) {
           table.rowReorder.enable();
         } else {
           table.rowReorder.disable();
@@ -580,7 +598,7 @@ OverlayPanel.prototype.init = function () {
   var self = this;
   var backgroundOverlay = self.getServerConnector().getSessionData().getSelectedBackgroundOverlay();
   var showDefault = (backgroundOverlay === undefined || backgroundOverlay === "undefined");
-  var table = $(this.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TABLE)).DataTable({
+  var table = $("[name='customOverlaysTab']", self.getElement()).DataTable({
     columns: [{
       title: 'No',
       type: 'num',
@@ -665,7 +683,7 @@ OverlayPanel.prototype.removeOverlay = function (overlay) {
 OverlayPanel.prototype.destroy = function () {
   var self = this;
   Panel.prototype.destroy.call(this);
-  var customOverlayDataTable = self.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TABLE);
+  var customOverlayDataTable = $("[name='customOverlaysTab']", self.getElement());
   if ($.fn.DataTable.isDataTable(customOverlayDataTable)) {
     $(customOverlayDataTable).DataTable().destroy();
   }