basic dialog functionality

frontend-js/package.json

@@ -19,6 +19,7 @@
     "exorcist": "^0.4.0",
     "file-url": "^2.0.0",
     "jquery": "3.1.1",
+    "jquery-ui-dist": "^1.12.1",
     "jsdom": "^9.9.1",
     "jsdom-global": "^2.1.1",
     "jshint": "^2.9.4",

frontend-js/src/main/js/ServerConnector.js

@@ -150,12 +150,12 @@ ServerConnector.createGetParams = function(params) {
   var sorted = [], key;
   
   for (key in params) {
-      if (params.hasOwnProperty(key)) {
-        sorted.push(key);
-      }
+    if (params.hasOwnProperty(key)) {
+      sorted.push(key);
+    }
   }
   sorted.sort();
-  
+
   var result = "";
   for (var i = 0; i < sorted.length; i++) {
     if (params[sorted[i]]!==undefined) {

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

@@ -139,8 +139,13 @@ OverlayPanel.prototype.createOverlayRow = function(overlay, checked) {
     var editTd = document.createElement("td");
     var editButton = document.createElement("button");
     editButton.onclick = function() {
-      throw new Error("Not implemented");
+      var content = document.createElement("div");
+      content.innerHTML = "test";
+      self.openDialog(content, {
+        id : overlay.getId()
+      });
     };
+    editButton.innerHTML = "<span class='ui-icon ui-icon-document'></span>";
     editTd.appendChild(editButton);
     result.appendChild(editTd);
   }

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

@@ -6,6 +6,7 @@ var GuiConnector = require('../GuiConnector');
 var ObjectWithListeners = require('../ObjectWithListeners');
 
 var logger = require('../logger');
+var fun = require('../Functions');
 
 function Panel(params) {
   ObjectWithListeners.call(this, params);
@@ -276,4 +277,71 @@ Panel.prototype.getElementByName = function(element, name) {
   return undefined;
 };
 
+Panel.prototype.getDialogDiv = function(id) {
+  var dialogs = this.getElementByName(this.getElement(), "dialogs");
+  if (dialogs === undefined) {
+    dialogs = document.createElement("div");
+    dialogs.setAttribute("name", "dialogs");
+    this.getElement().appendChild(dialogs);
+    
+    this._dialogs = [];
+  }
+
+  var dialogDiv = this._dialogs[id];
+
+  if (dialogDiv === undefined) {
+    dialogDiv = document.createElement("div");
+    dialogDiv.className = "ui-widget";
+    dialogDiv.setAttribute("name", "dialog-" + id);
+
+    var contentDiv = document.createElement("div");
+    contentDiv.setAttribute("name", "content");
+    dialogDiv.appendChild(contentDiv);
+
+    dialogs.appendChild(dialogDiv);
+    
+    this._dialogs[id]=dialogDiv;
+  }
+  return dialogDiv;
+};
+
+Panel.prototype.assignDialogOptions = function(div, params) {
+  var dialog = $(div);
+  for ( var key in params) {
+    if (params.hasOwnProperty(key)) {
+      if (key === "id") {
+        div.setAttribute("name", "dialog-" + params[key]);
+      } else if (key === "modal") {
+        dialog.dialog('option', 'modal', params[key]);
+      } else {
+        throw new Error("Unknown dialog param: " + key + " - " + params[key]);
+      }
+    }
+  }
+};
+
+Panel.prototype.openDialog = function(content, options) {
+  if (options === undefined) {
+    options = {};
+  }
+
+  if (options.id === undefined) {
+    logger.warn("Id of dialog is not defined");
+  }
+
+  var div = this.getDialogDiv(options.id);
+
+  this.assignDialogOptions(div, options);
+
+  var contentDiv = this.getElementByName(div, "content");
+  while (contentDiv.hasChildNodes()) {
+    contentDiv.removeChild(contentDiv.lastChild);
+  }
+  contentDiv.appendChild(content);
+  
+
+  $(div).dialog();
+  $(div).dialog("open");
+};
+
 module.exports = Panel;

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

+"use strict";
+
+var Helper = require('../helper');
+
+require("../mocha-config.js");
+
+var Alias = require('../../../main/js/map/data/Alias');
+var Panel = require('../../../main/js/gui/Panel');
+
+var chai = require('chai');
+var assert = chai.assert;
+var logger = require('../logger');
+
+describe('SearchPanel', function() {
+
+  var helper;
+  before(function() {
+    helper = new Helper();
+  });
+
+  it('openDialog', function() {
+    var div = helper.createSearchTab();
+
+    var map = helper.createCustomMap();
+
+    var panel = new Panel({
+      element : div,
+      customMap : map
+    });
+
+    var content = document.createElement("div");
+    content.innerHTML = "some content";
+
+    var id = 1;
+    panel.openDialog(content, {
+      id : id
+    });
+
+    assert.ok(panel.getDialogDiv(id).innerHTML.indexOf("some content") >= 0);
+
+  });
+
+});

frontend-js/src/test/js/mocha-config.js

@@ -5,6 +5,10 @@ var Cookies = require('js-cookie');
 
 
 // GLOBAL configuration
+global.navigator = {
+    userAgent : 'node.js'
+  };
+
 var jsdom = require('jsdom');
 global.document = jsdom.jsdom(undefined);
 global.window = document.defaultView;
@@ -13,6 +17,8 @@ global.$ = require('jQuery');
 global.jQuery = $;
 global.window.$ = $;
 
+require('jquery-ui-dist/jquery-ui.js')
+
 require("bootstrap");
 
 
@@ -21,9 +27,6 @@ global.google = require('./google-map-mock');
 global.GuiConnector = require('./GuiConnector-mock');
 global.ServerConnector = require('./ServerConnector-mock');
 
-global.navigator = {
-  userAgent : 'node.js'
-};
 
 // -----------------------------
 

web/src/main/webapp/index.xhtml

@@ -21,6 +21,7 @@
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"/>
 	<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.min.js" type="text/javascript"/>
 
+  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
 	
 	<link rel="shortcut icon" href="./resources/images/favicon.png" type="image/png" />