From f3048f489dfd7b5b7bc41db5c002e12379abc8b9 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <piotr.gawron@uni.lu>
Date: Mon, 30 Jan 2017 11:36:33 +0100
Subject: [PATCH] adding overlays implemented
---
frontend-js/package.json | 1 +
frontend-js/src/main/js/gui/OverlayPanel.js | 130 +++++++++++++++++-
frontend-js/src/main/js/gui/Panel.js | 13 +-
.../src/test/js/gui/OverlayPanel-test.js | 32 +++++
frontend-js/src/test/js/helper.js | 4 +
frontend-js/testFiles/overlay/good.txt | 8 ++
.../WEB-INF/components/map/layoutPanel.xhtml | 1 +
web/src/main/webapp/resources/css/style.css | 2 +-
8 files changed, 188 insertions(+), 3 deletions(-)
create mode 100644 frontend-js/testFiles/overlay/good.txt
diff --git a/frontend-js/package.json b/frontend-js/package.json
index 432f0545ae..68b9ecf5ed 100644
--- a/frontend-js/package.json
+++ b/frontend-js/package.json
@@ -12,6 +12,7 @@
"author": "Piotr Gawron",
"devDependencies": {
"assert": "1.4.1",
+ "blob-util": "^1.2.1",
"bluebird": "^3.4.6",
"bootstrap": "^3.3.7",
"browserify": "^13.1.1",
diff --git a/frontend-js/src/main/js/gui/OverlayPanel.js b/frontend-js/src/main/js/gui/OverlayPanel.js
index 5999775fa1..10703fffc6 100644
--- a/frontend-js/src/main/js/gui/OverlayPanel.js
+++ b/frontend-js/src/main/js/gui/OverlayPanel.js
@@ -29,10 +29,19 @@ function OverlayPanel(params) {
if (self.getCustomOverlaysTitleElement() === undefined) {
throw new Error("Couldn't find element: customOverlaysTitle");
}
+
if (self.getCustomOverlaysTabElement() === undefined) {
throw new Error("Couldn't find element: customOverlaysTab");
}
+ if (self.getAddButtonElement() === undefined) {
+ throw new Error("Couldn't find element: getAddButtonElement");
+ } else {
+ self.getAddButtonElement().onclick = function(){
+ self.openAddOverlayDialog();
+ }
+ }
+
self.setCustomOverlaysMessage(self.getCustomOverlaysTitleElement().innerHTML);
self.refresh();
@@ -206,7 +215,7 @@ OverlayPanel.prototype.refresh = function() {
var user = null;
var overlayTypes = [];
-
+
return ServerConnector.getOverlayTypes().then(function(types) {
overlayTypes = types;
return ServerConnector.getLoggedUser();
@@ -248,10 +257,13 @@ OverlayPanel.prototype.refresh = function() {
}
var title = self.getCustomOverlaysTitleElement();
+ var addButton = self.getAddButtonElement();
if (user.getLogin() === "anonymous") {
title.innerHTML = "YOU ARE NOT LOGGED IN. PLEASE, LOG IN TO UPLOAD AND VIEW CUSTOM OVERLAYS";
+ addButton.style.display="none";
} else {
title.innerHTML = self.getCustomOverlaysMessage();
+ addButton.style.display="block";
table = self.getCustomOverlaysTabElement();
table.appendChild(self.createTableHeader(true));
@@ -282,6 +294,9 @@ OverlayPanel.prototype.getCustomOverlaysElement = function() {
OverlayPanel.prototype.getCustomOverlaysTitleElement = function() {
return this.getElementByName(this.getElement(), "customOverlaysTitle");
};
+OverlayPanel.prototype.getAddButtonElement = function() {
+ return this.getElementByName(this.getElement(), "addOverlay");
+};
OverlayPanel.prototype.getCustomOverlaysTabElement = function() {
return this.getElementByName(this.getElement(), "customOverlaysTab");
};
@@ -294,4 +309,117 @@ OverlayPanel.prototype.getCustomOverlaysMessage = function() {
return this._customOverlaysMessage;
};
+OverlayPanel.prototype.parseFile = function(fileContent) {
+ var result = {};
+ var lines = fileContent.split("\n");
+ for (var i=0;i<lines.length;i++) {
+ var line = lines[i];
+ if (line.startsWith("#")) {
+ if (line.indexOf("=")>0) {
+ var name = line.substring(1, line.indexOf("=")).trim();
+ var value = line.substring(line.indexOf("=")+1).trim();
+ if (name==="NAME") {
+ result.name = value;
+ } else if (name==="DESCRIPTION") {
+ result.description= value;
+ } else if (name==="TYPE") {
+ result.type= value;
+ }
+ } else {
+ logger.warn("Invalid overlay header line: "+line);
+ }
+ } else {
+ break;
+ }
+ }
+ return result;
+};
+
+OverlayPanel.prototype.openAddOverlayDialog = function() {
+ var self = this;
+ var fileContent = null;
+ return new Promise(function(resolve, reject){
+
+ var content = document.createElement("div");
+ content.style.width="100%";
+ content.style.height="100%";
+ content.appendChild(self.createLabel("Name"));
+ var nameInput = self.createInputText();
+ content.appendChild(nameInput);
+ content.appendChild(self.createNewLine());
+
+ content.appendChild(self.createLabel("Description"));
+ content.appendChild(self.createNewLine());
+ var descriptionInput = self.createTextArea();
+ content.appendChild(descriptionInput);
+ content.appendChild(self.createNewLine());
+
+ content.appendChild(self.createLabel("File"));
+ var fileInput = self.createFileButton();
+ fileInput.addEventListener("change", function(){
+ fileContent = null;
+ var file = fileInput.files[0];
+ if (file) {
+ var reader = new FileReader();
+ reader.readAsText(file, "UTF-8");
+ reader.onload = function (evt) {
+ fileContent = evt.target.result;
+ var data = self.parseFile(fileContent);
+ if (data.name!==undefined) {
+ nameInput.value =data.name;
+ } else {
+ var filename = fileInput.value;
+ if (filename.indexOf(".")>0) {
+ filename.substr(0,filename.indexOf(".")-1);
+ }
+ nameInput.value =filename;
+ }
+ if (data.description!==undefined) {
+ descriptionInput.value =data.description;
+ }
+ }
+ reader.onerror = function (evt) {
+ GuiConnector.alert("Problem reading file");
+ }
+ }
+ }, false);
+ content.appendChild(fileInput);
+ content.appendChild(self.createNewLine());
+
+ var buttons = [ {
+ text : "UPLOAD",
+ click : function() {
+ var dialog = this;
+ if (fileContent===null) {
+ GuiConnector.alert("No file was selected");
+ } else {
+ var data = {
+ name : nameInput.value,
+ description : descriptionInput.value,
+ content : fileContent,
+ filename : fileInput.value
+ }
+ return ServerConnector.addOverlay(data).then(function(){
+ return self.refresh();
+ }).then(function(){
+ $(dialog).dialog("close");
+ });
+ }
+ }
+ }, {
+ text : "CANCEL",
+ click : function() {
+ $(this).dialog("close");
+ }
+ } ];
+ self.openDialog(content, {
+ id : "addOverlay",
+ modal: true,
+ buttons : buttons,
+ });
+
+ resolve();
+ });
+};
+
module.exports = OverlayPanel;
diff --git a/frontend-js/src/main/js/gui/Panel.js b/frontend-js/src/main/js/gui/Panel.js
index 7789372c18..d0eb10276e 100644
--- a/frontend-js/src/main/js/gui/Panel.js
+++ b/frontend-js/src/main/js/gui/Panel.js
@@ -221,6 +221,11 @@ Panel.prototype.createTextArea = function(value) {
}
return result;
};
+Panel.prototype.createFileButton = function() {
+ var result = document.createElement("input");
+ result.setAttribute('type', 'file');
+ return result;
+};
Panel.prototype.createParamLine = function(label, value) {
var result = document.createElement("div");
@@ -358,8 +363,14 @@ Panel.prototype.openDialog = function(content, options) {
contentDiv.removeChild(contentDiv.lastChild);
}
contentDiv.appendChild(content);
+ contentDiv.style.display="block";
- $(div).dialog();
+ $(div).dialog({
+ close : function() {
+ contentDiv.style.display="none";
+ $(this).dialog('destroy');
+ }
+ });
this.assignDialogOptions(div, options);
diff --git a/frontend-js/src/test/js/gui/OverlayPanel-test.js b/frontend-js/src/test/js/gui/OverlayPanel-test.js
index c15b99bbb4..d3053c6703 100644
--- a/frontend-js/src/test/js/gui/OverlayPanel-test.js
+++ b/frontend-js/src/test/js/gui/OverlayPanel-test.js
@@ -9,6 +9,7 @@ var OverlayPanel = require('../../../main/js/gui/OverlayPanel');
var chai = require('chai');
var assert = chai.assert;
var logger = require('../logger');
+var blobUtil = require('blob-util');
describe('OverlayPanel', function() {
@@ -105,4 +106,35 @@ describe('OverlayPanel', function() {
});
});
+ it('openAddOverlayDialog', function() {
+ var div = helper.createOverlayTab();
+
+ var map = helper.createCustomMap();
+
+ var panel = new OverlayPanel({
+ element : div,
+ customMap : map
+ });
+
+ return panel.openAddOverlayDialog();
+ });
+
+ it('parse overlay file', function() {
+ var div = helper.createOverlayTab();
+
+ var map = helper.createCustomMap();
+
+ var panel = new OverlayPanel({
+ element : div,
+ customMap : map
+ });
+
+ return ServerConnector.readFile("testFiles/overlay/good.txt").then(function(fileContent) {
+ var obj = panel.parseFile(fileContent);
+ assert.equal(obj.name, "example name");
+ assert.equal(obj.description, "layout description");
+ assert.equal(obj.type, "GENERIC");
+ });
+ });
+
});
diff --git a/frontend-js/src/test/js/helper.js b/frontend-js/src/test/js/helper.js
index 5523e620c9..efe13fa5e5 100644
--- a/frontend-js/src/test/js/helper.js
+++ b/frontend-js/src/test/js/helper.js
@@ -102,6 +102,10 @@ Helper.prototype.createOverlayTab = function() {
customOverlaysTitleDiv.setAttribute("name", "customOverlaysTitle");
customOverlaysDiv.appendChild(customOverlaysTitleDiv);
+ var addButton = document.createElement("button");
+ addButton.setAttribute("name", "addOverlay");
+ customOverlaysDiv.appendChild(addButton);
+
return result;
};
diff --git a/frontend-js/testFiles/overlay/good.txt b/frontend-js/testFiles/overlay/good.txt
new file mode 100644
index 0000000000..ecc8403333
--- /dev/null
+++ b/frontend-js/testFiles/overlay/good.txt
@@ -0,0 +1,8 @@
+#TYPE=GENERIC
+# VERSION=1.0
+# NAME=example name
+# DESCRIPTION=layout description
+value identifier Chebi
+-0,943978048 HGNC:11138
+-0,941309505 CHEBI:15377
+1 CHEBI:15376
diff --git a/web/src/main/webapp/WEB-INF/components/map/layoutPanel.xhtml b/web/src/main/webapp/WEB-INF/components/map/layoutPanel.xhtml
index 315b5ce612..2a566c9e51 100644
--- a/web/src/main/webapp/WEB-INF/components/map/layoutPanel.xhtml
+++ b/web/src/main/webapp/WEB-INF/components/map/layoutPanel.xhtml
@@ -17,6 +17,7 @@
<div name="customOverlays" class="searchPanel">
<h5 name="customOverlaysTitle">USER-PROVIDED OVERLAYS:</h5>
<table cellpadding="4" name="customOverlaysTab" class="table table-bordered" style="width:100%"/>
+ <center><button name="addOverlay">Add overlay</button></center>
</div>
</div>
diff --git a/web/src/main/webapp/resources/css/style.css b/web/src/main/webapp/resources/css/style.css
index 88f02e9ba1..a9c506e11a 100644
--- a/web/src/main/webapp/resources/css/style.css
+++ b/web/src/main/webapp/resources/css/style.css
@@ -1057,7 +1057,7 @@ a.mainTitle:hover {background-color:#000000; transition: background-color 0.4s e
/*form format*/
-input[type=file] {width:280px !important; height:7px !important; top:15px !important;}
+input[type=file] {width:280px !important; top:15px !important;}
.ui-inputtext, .ui-password, .ui-autocomplete-input{
--
GitLab