simple visualization of project table

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

@@ -5,13 +5,14 @@
 var AbstractAdminPanel = require('./AbstractAdminPanel');
 
 var Functions = require('../../Functions');
+var GuiConnector = require('../../GuiConnector');
 var Promise = require("bluebird");
 
 function MapsAdminPanel(params) {
   var self = this;
   AbstractAdminPanel.call(self, params);
   self._createGui();
-  
+
   $(self.getElement()).addClass("projects-tab");
 
 }
@@ -39,6 +40,7 @@ MapsAdminPanel.prototype._createGui = function() {
 };
 
 MapsAdminPanel.prototype._createMenuRow = function() {
+  var self = this;
   var menuRow = Functions.createElement({
     type : "div",
     style : "display:table-row; margin:10px",
@@ -48,11 +50,17 @@ MapsAdminPanel.prototype._createMenuRow = function() {
     type : "button",
     name : "addProject",
     content : '<span class="ui-icon ui-icon-circle-plus"></span>&nbsp;ADD PROJECT',
+    onclick : function() {
+      return self.onAddClicked().then(null, GuiConnector.alert);
+    },
   });
   var refreshButton = Functions.createElement({
     type : "button",
     name : "refreshProject",
     content : '<span class="ui-icon ui-icon-refresh"></span>&nbsp;REFRESH',
+    onclick : function() {
+      return self.onRefreshClicked().then(null, GuiConnector.alert);
+    },
   });
   menuRow.appendChild(addProjectButton);
   menuRow.appendChild(refreshButton);
@@ -94,7 +102,54 @@ MapsAdminPanel.prototype._createProjectTableRow = function() {
 }
 
 MapsAdminPanel.prototype.init = function() {
-
+  var self = this;
+  return ServerConnector.getProjects().then(function(projects) {
+    return self.setProjects(projects);
+  }).then(function() {
+    $(window).trigger('resize');
+  });
 };
 
+MapsAdminPanel.prototype.projectToTableRow = function(project) {
+  var self = this;
+  var disease = "N/A";
+  if (project.getDisease() != undefined && project.getDisease() != null) {
+    disease = self.getGuiUtils().createAnnotationLink(project.getDisease(), true).innerHTML;
+  }
+  var organism = "N/A";
+  if (project.getOrganism() != undefined && project.getOrganism() != null) {
+    organism = self.getGuiUtils().createAnnotationLink(project.getOrganism(), true).innerHTML;
+  }
+
+  var row = [ project.getProjectId(), // 
+  project.getName(), //
+  disease, // 
+  organism, // 
+  project.getStatus(), //
+  "<button name='showEditDialog' data='" + project.getProjectId() + "'>EDIT</button>", //
+  "<button name='removeProject' data='" + project.getProjectId() + "'>REMOVE</button>", // 
+  ];
+  return row;
+}
+
+MapsAdminPanel.prototype.setProjects = function(projects) {
+  var self = this;
+  var dataTable = $($("[name='projectsTable']", self.getElement())[0]).DataTable();
+  var data = [];
+  for (var i = 0; i < projects.length; i++) {
+    data.push(self.projectToTableRow(projects[i]));
+  }
+  dataTable.clear().rows.add(data).draw();
+
+  $("[name='projectsTable']", self.getElement()).on("click", "[name='removeProject']", function() {
+    var button = this;
+    return self.removeProject($(button).attr("data")).then(null, GuiConnector.alert);
+  });
+
+  $("[name='projectsTable']", self.getElement()).on("click", "[name='showEditDialog']", function() {
+    var button = this;
+    return self.showEditDialog($(button).attr("data")).then(null, GuiConnector.alert);
+  });
+}
+
 module.exports = MapsAdminPanel;

frontend-js/src/main/js/map/data/Project.js

@@ -36,6 +36,8 @@ Project.prototype.loadFromData = function(data) {
     this.setTopOverviewImage(data.getTopOverviewImage());
     this.setDisease(data.getDisease());
     this.setOrganism(data.getOrganism());
+    this.setStatus(data.getStatus());
+    this.setStatus(data.getProgress());
 
     this.setModel(new Model(data.getModel()));
 
@@ -50,6 +52,8 @@ Project.prototype.loadFromData = function(data) {
     this.setTopOverviewImage(data.topOverviewImage);
     this.setDisease(data.disease);
     this.setOrganism(data.organism);
+    this.setStatus(data.status);
+    this.setProgress(data.progress);
 
     this.callListeners("onreload");
   }
@@ -128,4 +132,18 @@ Project.prototype.setOrganism = function(organism) {
   }
 };
 
+Project.prototype.getStatus = function() {
+  return this._status;
+};
+Project.prototype.setStatus = function(status) {
+  this._status = status;
+};
+
+Project.prototype.getProgress = function() {
+  return this._progress;
+};
+Project.prototype.setProgress = function(progress) {
+  this._progress = progress;
+};
+
 module.exports = Project;