diff --git a/frontend-js/src/main/js/GuiConnector.js b/frontend-js/src/main/js/GuiConnector.js index d37cafc43cc17f3e334d16587b4db650bd897728..1cc63b91534a7f15b475de1e1914287bd1333bb9 100644 --- a/frontend-js/src/main/js/GuiConnector.js +++ b/frontend-js/src/main/js/GuiConnector.js @@ -124,8 +124,8 @@ GuiConnector.showProcessing = function(messageText) { var self = GuiConnector; if (self._processingDialog === undefined) { self._processingDialog = document.createElement("div"); - self._errorDialogContent = document.createElement("div"); - self._processingDialog.appendChild(self._errorDialogContent); + self._processingDialogContent = document.createElement("div"); + self._processingDialog.appendChild(self._processingDialogContent); document.body.appendChild(self._processingDialog); $(self._processingDialog).dialog({ modal : true, @@ -142,9 +142,9 @@ GuiConnector.showProcessing = function(messageText) { type : "img", src : 'resources/images/icons/ajax-loader.gif', }); - self._errorDialogContent.innerHTML = ""; - self._errorDialogContent.style.textAlign = "center"; - self._errorDialogContent.appendChild(messageImg); + self._processingDialogContent.innerHTML = ""; + self._processingDialogContent.style.textAlign = "center"; + self._processingDialogContent.appendChild(messageImg); $(self._processingDialog).dialog("option", "title", messageText); diff --git a/frontend-js/src/main/js/ServerConnector.js b/frontend-js/src/main/js/ServerConnector.js index decfd30294e9e60475c1a08b18cd93d7df453154..1e5461b55e34ede5859834f775876bf492db7e0a 100644 --- a/frontend-js/src/main/js/ServerConnector.js +++ b/frontend-js/src/main/js/ServerConnector.js @@ -1301,11 +1301,22 @@ ServerConnector.addComment = function(params) { }; ServerConnector.addOverlay = function(params) { + if (!(params instanceof LayoutData)) { + throw new Error("Invalid overlay: " + params); + } var self = this; var queryParams = {}; + var data = { + name : params.getName(), + description : params.getDescription(), + content : params.getContent(), + filename : params.getFilename(), + }; + logger.info(data); + logger.info(params); return self.getProjectId(params.projectId).then(function(result) { queryParams.projectId = result; - return self.sendPostRequest(self.addOverlayUrl(queryParams), params); + return self.sendPostRequest(self.addOverlayUrl(queryParams), data); }).then(function(content) { return new LayoutData(JSON.parse(content)); }); diff --git a/frontend-js/src/main/js/gui/AddOverlayDialog.js b/frontend-js/src/main/js/gui/AddOverlayDialog.js new file mode 100644 index 0000000000000000000000000000000000000000..eb5c8002f31fe4f12e88b6a7f702ef125e3b68f9 --- /dev/null +++ b/frontend-js/src/main/js/gui/AddOverlayDialog.js @@ -0,0 +1,234 @@ +"use strict"; + +/* exported logger */ + +var AbstractGuiElement = require('./AbstractGuiElement'); +var Annotation = require('../map/data/Annotation'); +var GuiConnector = require('../GuiConnector'); +var GuiUtils = require('./leftPanel/GuiUtils'); +var LayoutData = require('../map/data/LayoutData'); +var NetworkError = require('../NetworkError'); + +var Functions = require('../functions'); +var logger = require('../logger'); +var HttpStatus = require('http-status-codes'); + +var guiUtils = new (require('./leftPanel/GuiUtils'))(); + +function AddOverlayDialog(params) { + AbstractGuiElement.call(this, params); + var self = this; + self.registerListenerType("onAddOverlay"); + self.createGui(); +} + +AddOverlayDialog.prototype = Object.create(AbstractGuiElement.prototype); +AddOverlayDialog.prototype.constructor = AddOverlayDialog; + +AddOverlayDialog.prototype.createGui = function() { + var self = this; + var guiUtils = new GuiUtils(); + var fileContent = null; + var content = document.createElement("div"); + content.style.width = "100%"; + content.style.height = "100%"; + content.appendChild(guiUtils.createLabel("Name: ")); + var nameInput = Functions.createElement({ + type : "input", + inputType : "text", + name : "overlay-name", + }); + content.appendChild(nameInput); + content.appendChild(guiUtils.createNewLine()); + + content.appendChild(guiUtils.createLabel("Description: ")); + content.appendChild(guiUtils.createNewLine()); + var descriptionInput = Functions.createElement({ + type : "textarea", + name : "overlay-description", + }); + content.appendChild(descriptionInput); + content.appendChild(guiUtils.createNewLine()); + + content.appendChild(guiUtils.createLabel("Upload file: ")); + var fileInput = Functions.createElement({ + type : "input", + inputType : "file", + name : "overlay-file", + }); + fileInput.addEventListener("change", function() { + return self.processFile(fileInput.files[0]); + }, false); + content.appendChild(fileInput); + content.appendChild(guiUtils.createNewLine()); + + content.appendChild(guiUtils.createLabel("Or provide list of elements here (one per line): ")); + content.appendChild(guiUtils.createNewLine()); + var contentInput = Functions.createElement({ + type : "textarea", + name : "overlay-content", + }); + content.appendChild(contentInput); + content.appendChild(guiUtils.createNewLine()); + + self.getElement().appendChild(content); +}; + +AddOverlayDialog.prototype.processFile = function(file) { + var self = this; + self.setFileContent(null); + if (file) { + return new Promise(function(resolve, reject) { + var reader = new FileReader(); + reader.readAsText(file, "UTF-8"); + reader.onload = function(evt) { + try { + self.setFileContent(evt.target.result); + var data = self.parseFile(evt.target.result); + var nameInput = $("[name='overlay-name']", self.getElement())[0]; + var descriptionInput = $("[name='overlay-description']", self.getElement())[0]; + if (data.name !== undefined) { + nameInput.value = data.name; + } else { + var filename = $("[name='overlay-file']", self.getElement())[0].value; + if (filename.indexOf(".") > 0) { + filename.substr(0, filename.indexOf(".") - 1); + } + nameInput.value = filename; + } + if (data.description !== undefined) { + descriptionInput.value = data.description; + } + resolve(self.getFileContent()); + } catch (error) { + reject(error); + } + }; + reader.onerror = function() { + reject(new Error("Problem reading file")); + }; + }); + } else { + return Promise.resolve(null); + } +}; + +AddOverlayDialog.prototype.setFileContent = function(fileContent) { + this._fileContent = fileContent; +}; + +AddOverlayDialog.prototype.getFileContent = function() { + var self = this; + var contentInput = $("[name='overlay-content']", self.getElement())[0]; + + if (contentInput.value !== undefined && contentInput.value !== null) { + contentInput.value = contentInput.value.trim(); + if (contentInput.value !== "") { + self._fileContent = contentInput.value; + } + } + if (self._fileContent === undefined) { + return null; + } else { + return self._fileContent; + } +}; + +AddOverlayDialog.prototype.init = function() { + return Promise.resolve(); +}; + +AddOverlayDialog.prototype.addOverlay = function() { + var self = this; + var nameInput = $("[name='overlay-name']", self.getElement())[0]; + var descriptionInput = $("[name='overlay-description']", self.getElement())[0]; + var filename = $("[name='overlay-file']", self.getElement())[0].value; + var overlay = new LayoutData({ + name : nameInput.value, + description : descriptionInput.value, + content : self.getFileContent(), + filename : filename, + }); + GuiConnector.showProcessing(); + return ServerConnector.addOverlay(overlay).then(function(result) { + overlay = result; + GuiConnector.hideProcessing(); + return self.callListeners("onAddOverlay", overlay); + }); +} + +AddOverlayDialog.prototype.destroy = function() { + $(this.getElement()).dialog("destroy"); +}; + +AddOverlayDialog.prototype.open = function() { + var self = this; + var div = self.getElement(); + if (!$(div).hasClass("ui-dialog-content")) { + var buttons = [ { + text : "UPLOAD", + click : function() { + var dialog = this; + var fileContent = self.getFileContent(); + logger.info(fileContent); + if (fileContent === null) { + GuiConnector.alert("Neither file was selected nor data was entered"); + } else { + return self.addOverlay().then(function(result) { + $(dialog).dialog("close"); + return result; + }, function(error) { + GuiConnector.hideProcessing(); + if (error instanceof NetworkError && error.statusCode === HttpStatus.BAD_REQUEST) { + var errorMessage = JSON.parse(error.content); + GuiConnector.alert("Problematic input: <br/>" + errorMessage.reason); + } else { + GuiConnector.alert(error); + } + }); + } + } + }, { + text : "CANCEL", + click : function() { + $(this).dialog("close"); + } + } ]; + + $(div).dialog({ + title : "Add overlay", + buttons : buttons, + modal : true, + }); + } + + $(div).dialog("open"); +}; + +AddOverlayDialog.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; +}; + +module.exports = AddOverlayDialog; diff --git a/frontend-js/src/main/js/gui/leftPanel/GuiUtils.js b/frontend-js/src/main/js/gui/leftPanel/GuiUtils.js index ecaa7d025f58a221fdbb424f757f6b88059b969d..17bd7acaaef04df4594789c0128e95e1649621c4 100644 --- a/frontend-js/src/main/js/gui/leftPanel/GuiUtils.js +++ b/frontend-js/src/main/js/gui/leftPanel/GuiUtils.js @@ -232,11 +232,6 @@ GuiUtils.prototype.createTextArea = function(value) { } return result; }; -GuiUtils.prototype.createFileButton = function() { - var result = document.createElement("input"); - result.setAttribute('type', 'file'); - return result; -}; GuiUtils.prototype.createParamLine = function(label, value) { var result = document.createElement("div"); diff --git a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js index b08b8c2f11ed120f70bbc17c864d283e13423c2d..3283d0d8471d7903d29410a4d9b5002a6f41b754 100644 --- a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js +++ b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js @@ -2,6 +2,7 @@ /* exported logger */ +var AddOverlayDialog = require('../AddOverlayDialog'); var Panel = require('../Panel'); var PanelControlElementType = require('../PanelControlElementType'); @@ -353,140 +354,21 @@ 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 guiUtils = self.getGuiUtils(); - var fileContent = null; - var contentInput = null; - var content = document.createElement("div"); - content.style.width = "100%"; - content.style.height = "100%"; - content.appendChild(guiUtils.createLabel("Name: ")); - var nameInput = guiUtils.createInputText(); - content.appendChild(nameInput); - content.appendChild(guiUtils.createNewLine()); - - content.appendChild(guiUtils.createLabel("Description: ")); - content.appendChild(guiUtils.createNewLine()); - var descriptionInput = guiUtils.createTextArea(); - content.appendChild(descriptionInput); - content.appendChild(guiUtils.createNewLine()); - - content.appendChild(guiUtils.createLabel("Upload file: ")); - var fileInput = guiUtils.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() { - GuiConnector.alert("Problem reading file"); - }; - } - }, false); - content.appendChild(fileInput); - content.appendChild(guiUtils.createNewLine()); - - content.appendChild(guiUtils.createLabel("Or provide list of elements here (one per line): ")); - content.appendChild(guiUtils.createNewLine()); - contentInput = guiUtils.createTextArea(); - content.appendChild(contentInput); - content.appendChild(guiUtils.createNewLine()); - - var buttons = [ { - text : "UPLOAD", - click : function() { - var dialog = this; - if (contentInput.value !== undefined && contentInput.value !== null) { - contentInput.value = contentInput.value.trim(); - if (contentInput.value !== "") { - fileContent = contentInput.value; - } - } - if (fileContent === null) { - GuiConnector.alert("Neither file was selected nor data was enterd"); - } else { - var data = { - name : nameInput.value, - description : descriptionInput.value, - content : fileContent, - filename : fileInput.value - }; - GuiConnector.showProcessing(); - return ServerConnector.addOverlay(data).then(function(overlay) { - self.getMap().getModel().addLayout(overlay); - return self.refresh(); - }).then(function() { - GuiConnector.hideProcessing(); - $(dialog).dialog("close"); - }, function(error) { - GuiConnector.hideProcessing(); - if (error instanceof NetworkError) { - if (error.statusCode === HttpStatus.BAD_REQUEST) { - var errorMessage = JSON.parse(error.content); - GuiConnector.alert("Problematic input: <br/>" + errorMessage.reason); - } else { - throw error; - } - } else { - throw error; - } - }); - } - } - }, { - text : "CANCEL", - click : function() { - $(this).dialog("close"); - } - } ]; - self.openDialog(content, { - id : "addOverlay", - modal : true, - buttons : buttons, + var addOverlayDialog = new AddOverlayDialog({ + project : self.getProject(), + customMap : self.getMap(), + element : document.createElement("div"), + }); + addOverlayDialog.addListener("onAddOverlay", function(e) { + logger.info(e.arg); + self.getMap().getModel().addLayout(e.arg); + return self.refresh(); + }) + return addOverlayDialog.init().then(function() { + return addOverlayDialog.open(); }); }; diff --git a/frontend-js/src/main/js/map/data/LayoutData.js b/frontend-js/src/main/js/map/data/LayoutData.js index 57d50f087cceee6d8391e4bf8c4a7fe55c526b8e..e502f6d1b5e8787f40127a6c0a3961f4bd544c20 100644 --- a/frontend-js/src/main/js/map/data/LayoutData.js +++ b/frontend-js/src/main/js/map/data/LayoutData.js @@ -23,6 +23,8 @@ function LayoutData(layoutId, name) { this.setDirectory(object.directory); this.setDescription(object.description); this.setCreator(object.creator); + this.setContent(object.content); + this.setFilename(object.filename); this.setPublicOverlay(object.publicOverlay); this.setInputDataAvailable(object.inputDataAvailable); if (!this.getInputDataAvailable()) { @@ -193,4 +195,20 @@ LayoutData.prototype.setPublicOverlay = function(publicOverlay) { this._publicOverlay = publicOverlay; }; +LayoutData.prototype.getContent = function() { + return this._content; +}; + +LayoutData.prototype.setContent = function(content) { + this._content = content; +}; + +LayoutData.prototype.getFilename = function() { + return this._filename; +}; + +LayoutData.prototype.setFilename= function(filename) { + this._filename = filename; +}; + module.exports = LayoutData; diff --git a/frontend-js/src/test/js/ServerConnector-test.js b/frontend-js/src/test/js/ServerConnector-test.js index 69ddaba24b8135820913b08c969c249501054cd0..d9bc91e93580b0305d80441e2e148f002257883d 100644 --- a/frontend-js/src/test/js/ServerConnector-test.js +++ b/frontend-js/src/test/js/ServerConnector-test.js @@ -170,13 +170,13 @@ describe('ServerConnector', function() { }); it('addOverlay', function() { - return ServerConnector.addOverlay({ + return ServerConnector.addOverlay(new LayoutData({ name : "test nam", description : "test desc", content : "name color\nCAPN1 #00FF00\nPARK7 #AC0000", filename : "test.txt" - }).then(function(overlayId) { - assert.ok(overlayId); + })).then(function(overlay) { + assert.ok(overlay); }); }); diff --git a/frontend-js/src/test/js/gui/AddOverlayDialog-test.js b/frontend-js/src/test/js/gui/AddOverlayDialog-test.js new file mode 100644 index 0000000000000000000000000000000000000000..dd4759e57766b0034c5ac447ecc6ad26d1bc06f9 --- /dev/null +++ b/frontend-js/src/test/js/gui/AddOverlayDialog-test.js @@ -0,0 +1,63 @@ +"use strict"; + +/* exported logger */ + +require("../mocha-config.js"); + +var AddOverlayDialog = require('../../../main/js/gui/AddOverlayDialog'); + +var chai = require('chai'); +var assert = chai.assert; +var logger = require('../logger'); + +describe('AddOverlayDialog', function() { + + describe('processFile', function() { + it('default', function() { + return ServerConnector.getProject().then(function(project) { + var dialog = new AddOverlayDialog({ + element : testDiv, + project : project, + customMap : null + }); + + var file = new Blob([ "#DESCRIPTION=xxx\nname\tvalue\ns1\t1" ]); + return dialog.processFile(file).then(function(content) { + assert.ok(content !== null); + }); + }) + }); + }); + + it('addOverlay', function() { + return ServerConnector.getProject().then(function(project) { + var dialog = new AddOverlayDialog({ + element : testDiv, + project : project, + customMap : null + }); + + dialog.setFileContent("s1\n"); + return dialog.addOverlay(); + }) + }); + + + it('parse overlay file', function() { + return ServerConnector.getProject().then(function(project) { + var dialog = new AddOverlayDialog({ + element : testDiv, + project : project, + customMap : null + }); + + return ServerConnector.sendGetRequest("testFiles/overlay/good.txt").then(function(fileContent) { + var obj = dialog.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/gui/leftPanel/OverlayPanel-test.js b/frontend-js/src/test/js/gui/leftPanel/OverlayPanel-test.js index 388d4e32c238af5a7a21a374a8486959425b4bd9..0620bc0ac089e53c17c038872b3756e4c5a391fc 100644 --- a/frontend-js/src/test/js/gui/leftPanel/OverlayPanel-test.js +++ b/frontend-js/src/test/js/gui/leftPanel/OverlayPanel-test.js @@ -101,20 +101,5 @@ describe('OverlayPanel', function() { return panel.openAddOverlayDialog(); }); - it('parse overlay file', function() { - var map = helper.createCustomMap(); - - var panel = new OverlayPanel({ - element : testDiv, - customMap : map - }); - - return ServerConnector.sendGetRequest("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/map/data/LayoutData-test.js b/frontend-js/src/test/js/map/data/LayoutData-test.js index 7939f504cdc2bae6dd165659410265a53530d97f..ed1af0ba8096386bfe9442d14dd013846ace75ea 100644 --- a/frontend-js/src/test/js/map/data/LayoutData-test.js +++ b/frontend-js/src/test/js/map/data/LayoutData-test.js @@ -9,42 +9,51 @@ var assert = chai.assert; var logger = require('../../logger'); describe('LayoutData', function() { - it("contructor", function() { - var layoutId = 3; - var name = "nm"; - var overlay = new LayoutData(layoutId, name); - assert.equal(overlay.getId(), layoutId); - assert.equal(overlay.getName(), name); - }); + describe("contructor", function() { + it("default", function() { + var layoutId = 3; + var name = "nm"; + var overlay = new LayoutData(layoutId, name); + assert.equal(overlay.getId(), layoutId); + assert.equal(overlay.getName(), name); + }); - it("contructor from json obj", function() { - var obj = { - modelId : 15781, - name : "test", - description : "test", - status : "OK", - progress : "0.00", - directory : "dir/subDir", - creator : "admin ", - inputDataAvailable : "true", - idObject : 14852 - }; - var data = new LayoutData(obj); - assert.ok(data); - assert.equal(data.getInputDataAvailable(), true); - assert.equal(data.getDirectory(), "dir/subDir"); - }); + it("with content", function() { + var overlay = new LayoutData({ + content : "test" + }); + assert.ok(overlay.getContent()); + }); - it("contructor from prolematic json", function() { - var obj = { - modelId : 15781, - name : "test", - inputDataAvailable : "wtf", - idObject : 14852 - }; - var data = new LayoutData(obj); - assert.ok(data); - assert.equal(logger.getWarnings().length, 1); + it("from json obj", function() { + var obj = { + modelId : 15781, + name : "test", + description : "test", + status : "OK", + progress : "0.00", + directory : "dir/subDir", + creator : "admin ", + inputDataAvailable : "true", + idObject : 14852 + }; + var data = new LayoutData(obj); + assert.ok(data); + assert.equal(data.getInputDataAvailable(), true); + assert.equal(data.getDirectory(), "dir/subDir"); + }); + + it("from prolematic json", function() { + var obj = { + modelId : 15781, + name : "test", + inputDataAvailable : "wtf", + idObject : 14852 + }; + var data = new LayoutData(obj); + assert.ok(data); + assert.equal(logger.getWarnings().length, 1); + }); }); it("updateAlias", function() { @@ -81,12 +90,12 @@ describe('LayoutData', function() { var aliasId = 329163; var alias = new LayoutAlias({ idObject : aliasId, - modelId: 15781, + modelId : 15781, }); overlay.addAlias(alias); - return overlay.getFullAliasById(aliasId).then(function(data){ + return overlay.getFullAliasById(aliasId).then(function(data) { assert.equal(data.getType(), LayoutAlias.GENERIC); }); }); diff --git a/frontend-js/src/test/js/mocha-config.js b/frontend-js/src/test/js/mocha-config.js index 1836062914d96d4d0a3e05fa25a44f4afe881aea..b04d4694da8de0eb0f88dfa7cc40a140f3b9fdb4 100644 --- a/frontend-js/src/test/js/mocha-config.js +++ b/frontend-js/src/test/js/mocha-config.js @@ -26,6 +26,7 @@ global.window.$ = $; global.Option = window.Option; global.Blob = window.Blob; global.MouseEvent = window.MouseEvent; +global.FileReader = window.FileReader; var originalCreateElement = document.createElement; document.createElement = function(arg) { diff --git a/frontend-js/testFiles/apiCalls/projects/sample/overlays/POST_content=s1%0A&token=MOCK_TOKEN_ID& b/frontend-js/testFiles/apiCalls/projects/sample/overlays/POST_content=s1%0A&token=MOCK_TOKEN_ID& new file mode 100644 index 0000000000000000000000000000000000000000..8d8dfbd5e9a03739cc34b46a8fa686157da13011 --- /dev/null +++ b/frontend-js/testFiles/apiCalls/projects/sample/overlays/POST_content=s1%0A&token=MOCK_TOKEN_ID& @@ -0,0 +1,4 @@ +{ + "status": "OK", + "overlayId": 17296 +} \ No newline at end of file