submaps are orginzed by types

frontend-js/src/main/js/gui/leftPanel/SubmapPanel.js

@@ -32,21 +32,6 @@ SubmapPanel.prototype._createSubmapGui = function() {
   this.getElement().appendChild(submapDiv);
   this.setControlElement(PanelControlElementType.SUBMAP_DIV, submapDiv);
 
-  var generalOverlaysTitle = Functions.createElement({
-    type : "h5",
-    content : "SUBMAPS:"
-  });
-  submapDiv.appendChild(generalOverlaysTitle);
-
-  var submapTableDiv = Functions.createElement({
-    type : "table",
-    name : "submapTable",
-    className : "table table-bordered",
-    style : "width:100%"
-  });
-  submapDiv.appendChild(submapTableDiv);
-  this.setControlElement(PanelControlElementType.SUBMAP_TABLE, submapTableDiv);
-
 };
 
 SubmapPanel.prototype.createRow = function(model) {
@@ -94,19 +79,53 @@ SubmapPanel.prototype.createTableHeader = function() {
 
 SubmapPanel.prototype.init = function() {
   var self = this;
-  var table = self.getControlElement(PanelControlElementType.SUBMAP_TABLE);
-  while (table.lastChild) {
-    table.removeChild(table.lastChild);
-  }
-  table.appendChild(self.createTableHeader());
+  return new Promise(function(resolve) {
+    var div = self.getControlElement(PanelControlElementType.SUBMAP_DIV);
+    div.innerHTML = "";
+    var models = self.getMap().getProject().getModel().getSubmodels();
+    var modelsByType = [];
+    var types = [];
+    for (var i = 0; i < models.length; i++) {
+      var model = models[i];
+      if (modelsByType[model.getSubmodelType()] === undefined) {
+        modelsByType[model.getSubmodelType()] = [];
+        types.push(model.getSubmodelType());
+      }
+      modelsByType[model.getSubmodelType()].push(model);
+    }
+    for (var i = 0; i < types.length; i++) {
+      var type = types[i];
+      div.appendChild(self.createTable(modelsByType[type], type + " submaps"));
+    }
+    return resolve();
+  });
+};
+
+SubmapPanel.prototype.createTable = function(models, type) {
+  var self = this;
+  var result = Functions.createElement({
+    type : "div",
+  });
 
-  table.appendChild(self.createRow(self.getMap().getModel()));
+  var title = Functions.createElement({
+    type : "h5",
+    content : type
+  });
+  result.appendChild(title);
 
-  var submodels = self.getMap().getModel().getSubmodels();
-  for (var i = 0; i < submodels.length; i++) {
-    table.appendChild(self.createRow(submodels[i]));
+  var table = Functions.createElement({
+    type : "table",
+    className : "table table-bordered",
+    style : "width:100%"
+  });
+  result.appendChild(table);
+
+  table.appendChild(self.createTableHeader());
+  for (var i = 0; i < models.length; i++) {
+    table.appendChild(self.createRow(models[i]));
   }
-  return Promise.resolve();
+
+  return result;
 };
 
 module.exports = SubmapPanel;