overlay panel isgenerated via javascript

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

@@ -3,9 +3,11 @@
 /* exported logger */
 
 var Panel = require('./Panel');
+var PanelControlElementType = require('./PanelControlElementType');
 
 var GuiConnector = require('../GuiConnector');
 var logger = require('../logger');
+var Functions = require('../Functions');
 
 function OverlayPanel(params) {
   params.panelName = "overlays";
@@ -13,32 +15,16 @@ function OverlayPanel(params) {
 
   var self = this;
 
-  if (self.getGeneralOverlaysElement() === undefined) {
-    throw new Error("Couldn't find element: generalOverlays");
-  }
-  if (self.getGeneralOverlaysTabElement() === undefined) {
-    throw new Error("Couldn't find element: generalOverlaysTab");
-  }
-  if (self.getCustomOverlaysElement() === undefined) {
-    throw new Error("Couldn't find element: customOverlays");
-  }
-  if (self.getCustomOverlaysTitleElement() === undefined) {
-    throw new Error("Couldn't find element: customOverlaysTitle");
-  }
-
-  if (self.getCustomOverlaysTabElement() === undefined) {
-    throw new Error("Couldn't find element: customOverlaysTab");
-  }
+  self._createOverlayPanelGui();
 
-  if (self.getAddButtonElement() === undefined) {
-    throw new Error("Couldn't find element: getAddButtonElement");
-  } else {
-    self.getAddButtonElement().onclick = function(){
-      self.openAddOverlayDialog();
-    };
-  }
+  var addButton =  this.getControlElement(PanelControlElementType.OVERLAY_ADD_OVERLAY_BUTTON);
+ 
+  addButton.onclick = function(){
+    self.openAddOverlayDialog();
+  };
 
-  self.setCustomOverlaysMessage(self.getCustomOverlaysTitleElement().innerHTML);
+  var titleElement = this.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TITLE);
+  self.setCustomOverlaysMessage(titleElement.innerHTML);
 
   self.refresh();
 }
@@ -46,13 +32,46 @@ function OverlayPanel(params) {
 OverlayPanel.prototype = Object.create(Panel.prototype);
 OverlayPanel.prototype.constructor = OverlayPanel;
 
+OverlayPanel.prototype._createOverlayPanelGui = function() {
+  var generalOverlaysDiv = Functions.createElement({type:"div", name:"generalOverlays", className:"searchPanel" });
+  this.getElement().appendChild(generalOverlaysDiv);
+  this.setControlElement(PanelControlElementType.OVERLAY_GENERAL_OVERLAY_DIV, generalOverlaysDiv);
+
+  var generalOverlaysTitle = Functions.createElement({type:"h5", content:"GENERAL OVERLAYS:"} );
+  generalOverlaysDiv.appendChild(generalOverlaysTitle);
+
+  var generalOverlaysTableDiv = Functions.createElement({type:"table",name:"generalOverlaysTab",className:"table table-bordered", style: "width:100%"});
+  generalOverlaysDiv.appendChild(generalOverlaysTableDiv);
+  this.setControlElement(PanelControlElementType.OVERLAY_GENERAL_OVERLAY_TABLE, generalOverlaysTableDiv);
+  
+  
+  var customOverlaysDiv = Functions.createElement({type:"div", name:"customOverlays", className:"searchPanel" });
+  this.getElement().appendChild(customOverlaysDiv);
+  this.setControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_DIV, customOverlaysDiv);
+
+  var generalOverlaysTitle = Functions.createElement({type:"h5", name:"customOverlaysTitle", content:"USER-PROVIDED OVERLAYS:"} );
+  customOverlaysDiv.appendChild(generalOverlaysTitle);
+  this.setControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TITLE, generalOverlaysTitle);
+
+  var customOverlaysTableDiv = Functions.createElement({type:"table",name:"customOverlaysTab",className:"table table-bordered", style: "width:100%"});
+  customOverlaysDiv.appendChild(customOverlaysTableDiv);
+  this.setControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TABLE, customOverlaysTableDiv);
+  
+  var centerTag = Functions.createElement({type:"center"} );
+  customOverlaysDiv.appendChild(centerTag);
+
+  var addOverlayButton = Functions.createElement({type:"button", name:"addOverlay"} );
+  centerTag.appendChild(addOverlayButton);
+  this.setControlElement(PanelControlElementType.OVERLAY_ADD_OVERLAY_BUTTON, addOverlayButton);
+};
+
 OverlayPanel.prototype.clear = function() {
-  var table = this.getGeneralOverlaysTabElement();
+  var table = this.getControlElement(PanelControlElementType.OVERLAY_GENERAL_OVERLAY_TABLE);
   while (table.firstChild) {
     table.removeChild(table.firstChild);
   }
 
-  table = this.getCustomOverlaysTabElement();
+  table = this.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TABLE);
   while (table.firstChild) {
     table.removeChild(table.firstChild);
   }
@@ -242,7 +261,8 @@ OverlayPanel.prototype.refresh = function() {
       }
     }
 
-    var table = self.getGeneralOverlaysTabElement();
+    
+    var table = self.getControlElement(PanelControlElementType.OVERLAY_GENERAL_OVERLAY_TABLE);
     table.appendChild(self.createTableHeader());
 
     var body = document.createElement("tbody");
@@ -252,8 +272,8 @@ OverlayPanel.prototype.refresh = function() {
       body.appendChild(self.createOverlayRow(overlay, selectedOverlay[overlay.getId()]));
     }
 
-    var title = self.getCustomOverlaysTitleElement();
-    var addButton = self.getAddButtonElement();
+    var title = self.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TABLE);
+    var addButton = self.getControlElement(PanelControlElementType.OVERLAY_ADD_OVERLAY_BUTTON);
     if (user.getLogin() === "anonymous") {
       title.innerHTML = "YOU ARE NOT LOGGED IN. PLEASE, LOG IN TO UPLOAD AND VIEW CUSTOM OVERLAYS";
       addButton.style.display="none";
@@ -276,27 +296,6 @@ OverlayPanel.prototype.refresh = function() {
   });
 };
 
-OverlayPanel.prototype.getGeneralOverlaysElement = function() {
-  return this.getElementByName(this.getElement(), "generalOverlays");
-};
-
-OverlayPanel.prototype.getGeneralOverlaysTabElement = function() {
-  return this.getElementByName(this.getElement(), "generalOverlaysTab");
-};
-
-OverlayPanel.prototype.getCustomOverlaysElement = function() {
-  return this.getElementByName(this.getElement(), "customOverlays");
-};
-OverlayPanel.prototype.getCustomOverlaysTitleElement = function() {
-  return this.getElementByName(this.getElement(), "customOverlaysTitle");
-};
-OverlayPanel.prototype.getAddButtonElement = function() {
-  return this.getElementByName(this.getElement(), "addOverlay");
-};
-OverlayPanel.prototype.getCustomOverlaysTabElement = function() {
-  return this.getElementByName(this.getElement(), "customOverlaysTab");
-};
-
 OverlayPanel.prototype.setCustomOverlaysMessage = function(customOverlaysMessage) {
   this._customOverlaysMessage = customOverlaysMessage;
 };

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

@@ -10,6 +10,14 @@ var PanelControlElementType = {
   SEARCH_RESULTS_CONTENT_TAB : "SEARCH_RESULTS_CONTENT_TAB",
 
   SEARCH_PERFECT_MATCH_CHECKBOX : "SEARCH_PERFECT_MATCH_CHECKBOX",
+
+  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",
+
 };
 
 module.exports = PanelControlElementType;

frontend-js/src/test/js/gui/OverlayPanel-test.js

@@ -18,7 +18,7 @@ describe('OverlayPanel', function() {
   });
 
   it('contructor', function() {
-    var div = helper.createOverlayTab();
+    var div = document.createElement("div");
 
     var map = helper.createCustomMap();