userPanel create content in javascript

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

@@ -60,7 +60,7 @@ OverlayPanel.prototype._createOverlayPanelGui = function() {
   var centerTag = Functions.createElement({type:"center"} );
   customOverlaysDiv.appendChild(centerTag);
 
-  var addOverlayButton = Functions.createElement({type:"button", name:"addOverlay"} );
+  var addOverlayButton = Functions.createElement({type:"button", name:"addOverlay", content:"Add overlay"} );
   centerTag.appendChild(addOverlayButton);
   this.setControlElement(PanelControlElementType.OVERLAY_ADD_OVERLAY_BUTTON, addOverlayButton);
 };
@@ -281,7 +281,7 @@ OverlayPanel.prototype.refresh = function() {
       title.innerHTML = self.getCustomOverlaysMessage();
       addButton.style.display="block";
 
-      table = self.getCustomOverlaysTabElement();
+      table = self.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TABLE);
       table.appendChild(self.createTableHeader(true));
 
       body = document.createElement("tbody");

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

@@ -12,12 +12,23 @@ var PanelControlElementType = {
   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_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",
+  USER_TAB_PASSOWRD_INPUT_TEXT : "USER_TAB_PASSOWRD_INPUT_TEXT",
+  USER_TAB_LOGIN_BUTTON : "USER_TAB_LOGIN_BUTTON",
+
+  USER_TAB_USER_DIV : "USER_TAB_USER_DIV",
+  USER_TAB_LOGIN_TEXT : "USER_TAB_LOGIN_TEXT",
+  USER_TAB_NAME_TEXT : "USER_TAB_NAME_TEXT",
+  USER_TAB_SURNAME_TEXT : "USER_TAB_SURNAME_TEXT",
+  USER_TAB_EMAIL_TEXT : "USER_TAB_EMAIL_TEXT",
+  USER_TAB_LOGOUT_BUTTON : "USER_TAB_LOGOUT_BUTTON",
 };
 
 module.exports = PanelControlElementType;

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

@@ -3,8 +3,10 @@
 /* exported logger */
 
 var Panel = require('./Panel');
+var PanelControlElementType = require('./PanelControlElementType');
 
 var GuiConnector = require('../GuiConnector');
+var Functions = require('../Functions');
 var logger = require('../logger');
 
 function UserPanel(params) {
@@ -12,7 +14,9 @@ function UserPanel(params) {
   Panel.call(this, params);
 
   var self = this;
-
+  
+  self._createLoginTab();
+  self._createUserDataTab();
   ServerConnector.getLoggedUser().then(function(user) {
     if (user.getLogin() === "anonymous") {
       self.showLoginPage();
@@ -44,6 +48,89 @@ function UserPanel(params) {
 UserPanel.prototype = Object.create(Panel.prototype);
 UserPanel.prototype.constructor = UserPanel;
 
+function createTableRow(elements) {
+  var row = Functions.createElement({type:"div", style:"display: table-row;"} );
+  
+  for (var i=0;i<elements.length;i++) {
+    var cell =Functions.createElement({type:"div", style:"display: table-cell;"} );
+    cell.appendChild(elements[i]);
+    row.appendChild(cell);
+  }
+  return row;
+}
+
+UserPanel.prototype._createLoginTab = function() {
+  var loginTabDiv = Functions.createElement({type:"div", name:"userLoginTab", className:"searchPanel" });
+  this.getElement().appendChild(loginTabDiv);
+  this.setControlElement(PanelControlElementType.USER_TAB_LOGIN_DIV, loginTabDiv);
+
+  var authirizationTitle = Functions.createElement({type:"h5", content:"AUTHORIZATION FORM:"} );
+  loginTabDiv.appendChild(authirizationTitle);
+
+  var authorizationFormTab = Functions.createElement({type:"div", style:"width:100%;display: table;border-spacing: 10px;"} );
+  loginTabDiv.appendChild(authorizationFormTab);
+  
+  var loginLabel = Functions.createElement({type:"div", content:"LOGIN:"} );
+  var loginInput = Functions.createElement({type:"input", inputType:"text", style:"width:100%", name:"loginText"} );
+  this.setControlElement(PanelControlElementType.USER_TAB_LOGIN_INPUT_TEXT, loginInput);
+
+  authorizationFormTab.appendChild(createTableRow([loginLabel, loginInput]));
+  
+  var passwordLabel = Functions.createElement({type:"div", content:"LOGIN:"} );
+  var passwordInput = Functions.createElement({type:"input", inputType:"password", style:"width:100%", name:"passwordText"} );
+  this.setControlElement(PanelControlElementType.USER_TAB_PASSOWRD_INPUT_TEXT, passwordInput);
+
+  authorizationFormTab.appendChild(createTableRow([passwordLabel, passwordInput]));
+
+  var centerTag = Functions.createElement({type:"center"} );
+  loginTabDiv.appendChild(centerTag);
+
+  var loginButton = Functions.createElement({type:"button", name:"loginButton", content:"LOGIN"} );
+  centerTag.appendChild(loginButton);
+  this.setControlElement(PanelControlElementType.USER_TAB_LOGIN_BUTTON, loginButton);
+
+};
+
+UserPanel.prototype._createUserDataTab = function() {
+  var userDataDiv = Functions.createElement({type:"div", name:"userDataTab", className:"searchPanel", style:"display:none"});
+  this.getElement().appendChild(userDataDiv);
+  this.setControlElement(PanelControlElementType.USER_TAB_USER_DIV, userDataDiv);
+
+  var userDataTitle = Functions.createElement({type:"h3", content:'<img src="./resources/images/profile.png" border="0" align="left"/><br/>WELCOME<br/>'} );
+  userDataDiv.appendChild(userDataTitle);
+
+  var userDataFormTab = Functions.createElement({type:"div", style:"width:100%;display: table;border-spacing: 10px;"} );
+  userDataDiv.appendChild(userDataFormTab);
+  
+  var loginLabel = Functions.createElement({type:"span", content:"LOGIN:", style:"color:#999999"} );
+  var loginText = Functions.createElement({type:"span", name:"loginValue"} );
+  this.setControlElement(PanelControlElementType.USER_TAB_LOGIN_TEXT, loginText);
+  userDataDiv.appendChild(createTableRow([loginLabel, loginText]));
+  
+  var nameLabel = Functions.createElement({type:"span", content:"NAME:", style:"color:#999999"} );
+  var nameText = Functions.createElement({type:"span", name:"nameValue"} );
+  this.setControlElement(PanelControlElementType.USER_TAB_NAME_TEXT, nameText);
+  userDataDiv.appendChild(createTableRow([nameLabel, nameText]));
+  
+  var surnameLabel = Functions.createElement({type:"span", content:"SURNAME:", style:"color:#999999"} );
+  var surnameText = Functions.createElement({type:"span", name:"surnameValue"} );
+  this.setControlElement(PanelControlElementType.USER_TAB_SURNAME_TEXT, surnameText);
+  userDataDiv.appendChild(createTableRow([surnameLabel, surnameText]));
+  
+  var emailLabel = Functions.createElement({type:"span", content:"EMAIL:", style:"color:#999999"} );
+  var emailText = Functions.createElement({type:"span", name:"emailValue"} );
+  this.setControlElement(PanelControlElementType.USER_TAB_EMAIL_TEXT, emailText);
+  userDataDiv.appendChild(createTableRow([emailLabel, emailText]));
+  
+  var centerTag = Functions.createElement({type:"center"} );
+  userDataDiv.appendChild(centerTag);
+
+  var logoutButton = Functions.createElement({type:"button", name:"logoutButton", content:"LOGOUT"} );
+  centerTag.appendChild(logoutButton);
+  this.setControlElement(PanelControlElementType.USER_TAB_LOGOUT_BUTTON, logoutButton);  
+};
+
+
 UserPanel.prototype.getUserLoginTab = function() {
   return this.getElementByName(this.getElement(), "userLoginTab");
 };

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

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