simple gui visualization (without data)

frontend-js/src/main/js/gui/admin/MapsAdminPanel.js

@@ -4,16 +4,95 @@
 
 var AbstractAdminPanel = require('./AbstractAdminPanel');
 
+var Functions = require('../../Functions');
 var Promise = require("bluebird");
 
 function MapsAdminPanel(params) {
-  AbstractAdminPanel.call(this, params);
+  var self = this;
+  AbstractAdminPanel.call(self, params);
+  self._createGui();
+  
+  $(self.getElement()).addClass("projects-tab");
 
 }
 
 MapsAdminPanel.prototype = Object.create(AbstractAdminPanel.prototype);
 MapsAdminPanel.prototype.constructor = MapsAdminPanel;
 
+MapsAdminPanel.prototype._createGui = function() {
+  var self = this;
+  var projectsDiv = Functions.createElement({
+    type : "div",
+  });
+  self.getElement().appendChild(projectsDiv);
+
+  var dataDiv = Functions.createElement({
+    type : "div",
+    style : "display:table; width:100%",
+  });
+  projectsDiv.appendChild(dataDiv);
+
+  dataDiv.appendChild(self._createMenuRow());
+  dataDiv.appendChild(self._createProjectTableRow());
+  dataDiv.appendChild(self._createMenuRow());
+
+};
+
+MapsAdminPanel.prototype._createMenuRow = function() {
+  var menuRow = Functions.createElement({
+    type : "div",
+    style : "display:table-row; margin:10px",
+  });
+
+  var addProjectButton = Functions.createElement({
+    type : "button",
+    name : "addProject",
+    content : '<span class="ui-icon ui-icon-circle-plus"></span>&nbsp;ADD PROJECT',
+  });
+  var refreshButton = Functions.createElement({
+    type : "button",
+    name : "refreshProject",
+    content : '<span class="ui-icon ui-icon-refresh"></span>&nbsp;REFRESH',
+  });
+  menuRow.appendChild(addProjectButton);
+  menuRow.appendChild(refreshButton);
+  return menuRow;
+};
+
+MapsAdminPanel.prototype._createProjectTableRow = function() {
+  var projectsRow = Functions.createElement({
+    type : "div",
+    style : "display:table-row; width:100%",
+  });
+
+  var projectsTable = Functions.createElement({
+    type : "table",
+    name : "projectsTable",
+    className : "display",
+    style : "width:100%",
+  });
+  projectsRow.appendChild(projectsTable);
+
+  $(projectsTable).DataTable({
+    columns : [ {
+      title : 'ProjectId',
+    }, {
+      title : 'Name',
+    }, {
+      title : 'Disease',
+    }, {
+      title : 'Organism',
+    }, {
+      title : 'Status',
+    }, {
+      title : 'Edit',
+    }, {
+      title : 'Remove',
+    }, ],
+  });
+  return projectsRow;
+}
+
 MapsAdminPanel.prototype.init = function() {
 
 };