From 6e6649f1f84adbf96c935bcec16eb7e190222fad Mon Sep 17 00:00:00 2001 From: Erik Perrone Date: Wed, 21 Feb 2018 13:05:45 +0000 Subject: [PATCH] git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/data-analysis/nlphub@164503 82a268e6-3cf1-43bd-a215-b396298e98cf --- src/main/webapp/css/custom.css | 40 +++- src/main/webapp/index.jsp | 349 +++++++++++++++++++-------------- 2 files changed, 242 insertions(+), 147 deletions(-) diff --git a/src/main/webapp/css/custom.css b/src/main/webapp/css/custom.css index 8b1886e..5bf3612 100644 --- a/src/main/webapp/css/custom.css +++ b/src/main/webapp/css/custom.css @@ -116,7 +116,6 @@ pre { #execute-button { margin: 10px; color: white; - /*background-color: #4CAF50 !important;*/ padding: 0.6rem; text-transform: uppercase; vertical-align: middle; @@ -126,6 +125,18 @@ pre { cursor: pointer; } +#reset-upload { + color: white; + background-color: #4CAF50; + padding: 0.2rem; + text-transform: uppercase; + vertical-align: middle; + border-radius: 2px; + display: inline-block; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + cursor: pointer; +} + .ajax-file-upload-statusbar { height: 1.3em; width: 100% !important; @@ -139,8 +150,8 @@ pre { } #file-info { - float: right; - margin-left: 10px; + /*float: right; + margin-left: 10px;*/ } .ajax-file-upload-progress { @@ -176,4 +187,27 @@ pre { select { display: block; visibility: visible; +} + +.hidden-div { + display: none; +} + +.progress-circular-div { + position: absolute; + z-index: 100; + border: solid 1px gray; + padding: 10px; + background: white; +} + +#progress-caption { + margin-top: 3px; + margin-left: auto; + margin-right: auto; +} + +.float-right-div { + float: right; + margin-left: 10px; } \ No newline at end of file diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp index 5c2f4fe..9c4f8c5 100644 --- a/src/main/webapp/index.jsp +++ b/src/main/webapp/index.jsp @@ -30,6 +30,7 @@ var savedAnnotations = ""; $("#execute-button").css("background-color", pageGray); + // ------------------------------------------------------------------------------------------------------ // Starting point: get the csv file with algorithm parameters and set the page with valid algs info. // ------------------------------------------------------------------------------------------------------ @@ -47,40 +48,67 @@ resizeTable(); resizeLogo(); buildLanguageList(); - setEventListeners(); - $("#execute-button").css("background-color", pageGray); - $("#upload-button").uploadFile({ - url : "/nlphub/nlphub-uploader-servlet", - fileName : "mytxtfile", - maxFileCount : 100, - multiple : false, - maxFileSize : 1024 * 1000 * 6.14, - showFileCounter : false, - showCancel : true, - dragDropStr : "", - extErrorStr : "Error. Text file only", - sizeErrorStr : "Error. Max size: 6 Mb", - onLoad : function(obj) { - $("#file-info").remove(); - $("#fu-container").append("
"); - savedAnnotations = ""; - }, - onSuccess : function(files, data, xhr) { - console.log("files: " + files); - $("#file-info").empty(); - $("#file-info").append("Uploaded: " + files + ""); - publicLink = data.message; - $("#execute-button").css("background-color", pageGreen); - if(publicLink == null) { - alert("Error uploading file."); - } - }, - onError : function(files, status, - errMsg, pd) { - alert(errMsg); - } - }); + $("#execute-button").css("background-color", pageGray); + + $("#upload-button") + .uploadFile( + { + url : "/nlphub/nlphub-uploader-servlet", + fileName : "mytxtfile", + maxFileCount : 100, + multiple : false, + maxFileSize : 1024 * 1000 * 6.14, + showFileCounter : false, + showCancel : true, + dragDropStr : "", + extErrorStr : "Error. Text file only", + sizeErrorStr : "Error. Max size: 6 Mb", + onLoad : function(obj) { + $("#file-info").remove(); + $("#reset-upload").remove(); + $("#fu-container").append("
"); + $("#right-child").append("
"); + $("#right-child").append("
Cancel
"); + $("#reset-upload").hide(); + $("#reset-upload").click(function() { + resetExecuteButton(); + $("#file-info").empty(); + $("#reset-upload").css("display", "none"); + textAreaEnable(true); + }); + savedAnnotations = ""; + setEventListeners(); + }, + onSelect : function(files) { + showProgress(); + textAreaEnable(false); + }, + onSuccess : function(files, data, xhr) { + hideProgress(); + $("#reset-upload").css("display", "inline"); + console.log("files: " + files); + $("#file-info").empty(); + $("#file-info") + .append( + "Uploaded: " + + files + + ""); + publicLink = data.message; + $("#execute-button").css( + "background-color", + pageGreen); + if (publicLink == null) { + alert("Error uploading file."); + } + }, + onError : function(files, status, + errMsg, pd) { + hideProgress(); + textAreaEnable(true); + alert(errMsg); + } + }); }, error : function(richiesta, stato, errori) { alert("Unexpected Error"); @@ -187,135 +215,158 @@ } } - + setEventListeners = function() { $("#input-textarea").on("keyup", function() { - if($("#input-textarea").val() == "") - $("#execute-button").css("background-color", pageGray); - else - $("#execute-button").css("background-color", pageGreen); + if ($("#input-textarea").val() == "") + $("#execute-button").css("background-color", pageGray); + else + $("#execute-button").css("background-color", pageGreen); }); - - - $("#execute-button").click(function() { - if((publicLink == null) && ($("#input-textarea").val() == "")) { - alert("You must upload a file or paste some text in the text area before submit a request."); - return; - } - // if some text has been written in the text area, then a corresponding text file - // must be written in the workspace and the public link is set. - if($("#input-textarea").val().length > 0) { - freeText = $("#input-textarea").val(); - $ - .ajax({ - url : "/nlphub/nlphub-uploader-servlet?freetext=" + encodeURI(freeText), - type : "POST", - async : true, - contentType : "text/plain; charset=utf-8", - success : function(data, stato) { - publicLink = data.message; - if(publicLink == null) { - alert("Error uploading file."); - } - launchAlgorithm(); - }, - error : function(richiesta, stato, errori) { - alert("Unexpected Error"); - } - }); - } - - else { - launchAlgorithm(); - } - }); + $("#execute-button") + .click( + function() { + if ((publicLink == null) + && ($("#input-textarea").val() == "")) { + alert("You must upload a file or write some text in the text area before submit a request."); + return; + } + + showProgress(); + // if some text has been written in the text area, then a corresponding text file + // must be written in the workspace and the public link is set. + if ($("#input-textarea").val().length > 0) { + freeText = $("#input-textarea").val(); + $ + .ajax({ + url : "/nlphub/nlphub-uploader-servlet?freetext=" + + encodeURI(freeText), + type : "POST", + async : true, + contentType : "text/plain; charset=utf-8", + success : function(data, stato) { + publicLink = data.message; + if (publicLink == null) { + alert("Error uploading file."); + } + launchAlgorithm(); + }, + error : function(richiesta, stato, + errori) { + alert("Unexpected Error"); + hideProgress(); + textAreaEnable(true); + $("#file-info").empty(); + } + }); + } + + else { + launchAlgorithm(); + } + }); + } + + showProgress = function() { + var width = $(".progress-circular-div").width(); + var height = $(".progress-circular-div").height(); + var left = parseInt((window.innerWidth - width)/2); + var top = parseInt((window.innerHeight - height)/2); + $(".progress-circular-div").css("left", left); + $(".progress-circular-div").css("top", top); + $(".hidden-div").css("display", "block"); + } + + hideProgress = function() { + $(".hidden-div").css("display","none"); } launchAlgorithm = function() { - if(publicLink == null) { + if (publicLink == null) { alert("No input text available for the service."); return; } var list = buildInputAnnotationList(); var annList = ""; - for(i in list) { + for (i in list) { annList += list[i] + ","; } - annList = annList.substring(0, annList.length-1); + annList = annList.substring(0, annList.length - 1); savedAnnotations = annList; - + var algList = ""; - for(j in algorithms) { + for (j in algorithms) { algList += encodeURI(algorithms[j].id) + ","; } - algList = algList.substring(0, algList.length-1); - - - var parameters = "annotations=" + annList; + algList = algList.substring(0, algList.length - 1); + + var parameters = "annotations=" + annList; parameters += "&lang=" + $("#language-select").val(); parameters += "&plink=" + encodeURI(publicLink); parameters += "&algs=" + algList; - - $ - .ajax({ + + $.ajax({ url : "/nlphub/nlphub-servlet?" + parameters, type : "POST", async : true, success : function(data, stato) { - if(typeof(data.response) != 'undefined') { + hideProgress(); + textAreaEnable(true); + $("#file-info").empty(); + if (typeof (data.response) != 'undefined') { var jsonOut = getOutputJson(data.message); - } - else if (typeof(data.error) != 'undefined') + } else if (typeof (data.error) != 'undefined') { alert(data.message); - else + } + else { alert("Unexpected response"); + } + resetExecuteButton(); }, error : function(richiesta, stato, errori) { + hideProgress(); + textAreaEnable(true); alert("Unexpected Error"); + resetExecuteButton(); } }); - - //publicLink = null; } - + getOutputJson = function(message) { var tobemap = ""; - for(var i=0; i" + annotationElement + ""); } } - + resizeLogo = function() { - if(window.innerWidth < 200) - $("#logo-image").width(window.innerWidth-10); + if (window.innerWidth < 200) + $("#logo-image").width(window.innerWidth - 10); } buildInputAnnotationList = function() { var list = []; for (var i = 0; i < annotations.length; i++) { - if($("#check-" + i).is(":Checked")) + if ($("#check-" + i).is(":Checked")) list[list.length] = $("#check-" + i).val(); } return list; } - + // event handlers window.onresize = function(event) { resizeTable(); resizeLogo(); }; - - $(".ajax-file-upload-abort").on("DOMAttrModified", function (event) { + + $(".ajax-file-upload-abort").on("DOMAttrModified", function(event) { $(".ajax-file-upload-abort").css("display", "none"); - if(event.attributeName == "display") { // which attribute you want to watch for changes - $(".ajax-file-upload-abort").css("display", "none"); - } + if (event.attributeName == "display") { // which attribute you want to watch for changes + $(".ajax-file-upload-abort").css("display", "none"); + } }); buildLanguageList = function() { @@ -384,29 +435,22 @@ $("#language-select").append(opt); } } - - -// $("#upload-button").click(function() { -// $("#upload-input").click(); -// }); - -// $("#upload-input").change( -// function() { -// $("#upload-button") -// .text( -// $("#upload-input").val().substring( -// $("#upload-input").val().lastIndexOf( -// "\\") + 1)); -// }); + textAreaEnable = function(enable) { + if(enable == true) + $("#input-textarea").prop('disabled', false); + else + $("#input-textarea").prop('disabled', true); + } - - - + +
@@ -420,7 +464,7 @@
-

Name Entity Recognition

+

Name Entity Recognition

Language selection
@@ -442,15 +486,15 @@
-

Use the button to upload a text file or drag and drop a file in the upload area; or paste a text in - the text area.

+

To upload a text file you can use the button or drag a + file on the "upload arrow". Otherwise, write some text in the text area.

- -
Upload text file
+
Upload text file
@@ -474,9 +518,9 @@ -
+
@@ -488,6 +532,23 @@
+
+
+ +
+
In progress
+
+