gCubeSystem
/
nlphub
16
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Maxlength attribute in the text area. Some other fix. 

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/data-analysis/nlphub@164998 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Erik Perrone 2018-03-13 13:31:37 +00:00
parent 7210d91790
commit 7dc3514e2e
3 changed files with 170 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/main/webapp/css/custom.css
View File

@ -241,12 +241,26 @@ select {
margin: 2px; margin: 2px;
} }
.left-side-half {
float: left;
width: 49%;
height: 3vh;
margin: 1px;
}
.right-side::after { .right-side::after {
content: ""; content: "";
clear: both; clear: both;
display: table; display: table;
} }
.left-side-half::after {
content: "";
clear: both;
display: table;
}
.header-side { .header-side {
float: left; float: left;
width: 100%; width: 100%;

10
src/main/webapp/index.jsp
View File

@ -72,8 +72,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="input-field col s12"> <div class="input-field col s12">Write or paste a text in the text area (<span style="color:red;">max 4000 characters</span>)
<textarea id="input-textarea" class="my-textarea" rows="8" <textarea maxlength="4000" id="input-textarea" class="my-textarea" rows="8"
placeholder="paste your text here"></textarea> placeholder="paste your text here"></textarea>
</div> </div>
</div> </div>
@ -95,7 +95,11 @@
</div> </div>
<!-- this is the main result container --> <!-- this is the main result container -->
<div id="ner-result-container"> <div id="ner-result-container">
<div id="result-header" class="header-side"></div> <div id="result-header" class="header-side">
<div class="left-side-half" id="result-header-left"></div>
<div class="left-side-half" id="result-header-right"></div>
</div>
<div></div>
<div class="left-side" id="result-text-div"></div> <div class="left-side" id="result-text-div"></div>
<div class="right-side" id="result-params-div"></div> <div class="right-side" id="result-params-div"></div>
<div style="text-align: left;"> <div style="text-align: left;">

256
src/main/webapp/js/main.js
View File

@ -16,107 +16,109 @@ var hexLetters = '0123456789ABCDEF';
// with valid algs info. // with valid algs info.
// ------------------------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------------------
$ $(document).ready(function() {
.ajax({ disableExecuteButton();
url : "https://data.d4science.org/bnp4UDNyb21lSURkQXdDUnlSS0JkVWgzWk1KMUxWVGZHbWJQNStIS0N6Yz0", $.ajax({
type : "GET", url : "https://data.d4science.org/bnp4UDNyb21lSURkQXdDUnlSS0JkVWgzWk1KMUxWVGZHbWJQNStIS0N6Yz0",
async : true, type : "GET",
contentType : "text/plain; charset=utf-8", async : true,
success : function(data, stato) { contentType : "text/plain; charset=utf-8",
success : function(data, stato) {
$("#ner-result-container").hide();
var lineTokens = manageCsvData(data);
getAlgorithms(lineTokens);
buildLanguageSelection();
buildLanguageList();
buildAnnotations();
resizeTable();
resizeLogo();
$("#back-ner-ui-button").click(function() {
$("#ner-result-container").hide(); $("#ner-result-container").hide();
var lineTokens = manageCsvData(data); $("#ner-ui").show();
getAlgorithms(lineTokens); $("#input-textarea").val("");
buildLanguageSelection(); publicLink = null;
buildLanguageList(); jsonContent = null;
buildAnnotations(); });
resizeTable();
resizeLogo();
$("#back-ner-ui-button").click(function() { disableExecuteButton();
$("#ner-result-container").hide();
$("#ner-ui").show();
$("#input-textarea").val("");
publicLink = null;
jsonContent = null;
});
$("#execute-button").css("background-color", pageGray); $("#upload-button")
.uploadFile(
$("#upload-button") {
.uploadFile( url : "/nlphub/nlphub-uploader-servlet",
{ fileName : "mytxtfile",
url : "/nlphub/nlphub-uploader-servlet", maxFileCount : 100,
fileName : "mytxtfile", multiple : false,
maxFileCount : 100, maxFileSize : 1024 * 1000 * 6.14,
multiple : false, showFileCounter : false,
maxFileSize : 1024 * 1000 * 6.14, showCancel : true,
showFileCounter : false, dragDropStr : "<img class='img-prompt' src='img/upload.png' width='60px' height='60px' style='display:block; margin:auto; padding: 10px'>",
showCancel : true, extErrorStr : "Error. Text file only",
dragDropStr : "<img class='img-prompt' src='img/upload.png' width='60px' height='60px' style='display:block; margin:auto; padding: 10px'>", sizeErrorStr : "Error. Max size: 6 Mb",
extErrorStr : "Error. Text file only", onLoad : function(obj) {
sizeErrorStr : "Error. Max size: 6 Mb", $("#file-info").remove();
onLoad : function(obj) { $("#reset-upload").remove();
$("#file-info").remove(); $("#fu-container")
$("#reset-upload").remove(); .append(
$("#fu-container") "<div id=\"right-child\" class=\"float-right-div\"></div>");
.append( $("#right-child")
"<div id=\"right-child\" class=\"float-right-div\"></div>"); .append(
$("#right-child") "<div id=\"file-info\" class=\"centered\"></div>");
.append( $("#right-child")
"<div id=\"file-info\" class=\"centered\"></div>"); .append(
$("#right-child") "<div id=\"reset-upload\" class=\"centered\">Cancel</div>");
.append( $("#reset-upload").hide();
"<div id=\"reset-upload\" class=\"centered\">Cancel</div>"); $("#reset-upload").click(
$("#reset-upload").hide(); function() {
$("#reset-upload").click( resetExecuteButton();
function() { $("#file-info").empty();
resetExecuteButton(); $("#reset-upload").css(
$("#file-info").empty(); "display", "none");
$("#reset-upload").css( textAreaEnable(true);
"display", "none"); });
textAreaEnable(true); savedAnnotations = "";
}); setEventListeners();
savedAnnotations = ""; },
setEventListeners(); onSelect : function(files) {
}, showProgress();
onSelect : function(files) { textAreaEnable(false);
showProgress(); $("#input-textarea").val("");
textAreaEnable(false); },
$("#input-textarea").val(""); onSuccess : function(files, data, xhr) {
}, hideProgress();
onSuccess : function(files, data, xhr) { console.log('' + data.language);
hideProgress(); checkLanguage(data.language);
console.log('' + data.language); selectAnnotationsByLanguage();
checkLanguage(data.language); $("#reset-upload").css("display",
selectAnnotationsByLanguage(); "inline");
$("#reset-upload").css("display", console.log("files: " + files);
"inline"); $("#file-info").empty();
console.log("files: " + files); $("#file-info")
$("#file-info").empty(); .append(
$("#file-info") "Uploaded: <span style=\"color:#4CAF50; letter-spacing: 1px; font-weight: bold;\">"
.append( + files
"Uploaded: <span style=\"color:#4CAF50; letter-spacing: 1px; font-weight: bold;\">" + "</span>");
+ files publicLink = data.message;
+ "</span>"); enableExecuteButton();
publicLink = data.message; if (publicLink == null) {
$("#execute-button").css( alert("Error uploading file.");
"background-color", pageGreen);
if (publicLink == null) {
alert("Error uploading file.");
}
},
onError : function(files, status, errMsg,
pd) {
hideProgress();
textAreaEnable(true);
alert(errMsg);
} }
}); },
}, onError : function(files, status, errMsg,
error : function(richiesta, stato, errori) { pd) {
alert("Unexpected Error. Status: " + richiesta.status); hideProgress();
} textAreaEnable(true);
}); alert(errMsg);
}
});
},
error : function(richiesta, stato, errori) {
alert("Unexpected Error. Status: " + richiesta.status);
}
});
});
/* /*
* Utility function processing the language indication returned by the language recognition service * Utility function processing the language indication returned by the language recognition service
@ -250,26 +252,61 @@ buildLanguageSelection = function() {
} }
} }
enableExecuteButton = function() {
$("#execute-button").css("background-color", pageGreen);
$("#execute-button").attr("enable", "true");
}
disableExecuteButton = function() {
$("#execute-button").css("background-color", pageGray);
$("#execute-button").attr("enable", "false");
}
isEnabled = function() {
if($("#execute-button").attr("enable") == "true")
return true;
return false;
}
enableDisableTextArea = function() {
if ($("#input-textarea").val() == "")
disableExecuteButton();
else
enableExecuteButton();
}
/* /*
* Set the listeners on the text area and the execute button * Set the listeners on the text area and the execute button
*/ */
setEventListeners = function() { setEventListeners = function() {
$("#input-textarea").on("keyup", function() { $("#input-textarea").on("keyup", function() {
if ($("#input-textarea").val() == "") enableDisableTextArea();
$("#execute-button").css("background-color", pageGray); });
else
$("#execute-button").css("background-color", pageGreen); $("#input-textarea").change(function() {
enableDisableTextArea();
}); });
window.addEventListener('contextmenu', function(e) {
//alert("You've tried to open context menu"); //here you draw your own menu
//e.preventDefault();
enableDisableTextArea();
}, false);
$("#execute-button") $("#execute-button")
.click( .click(
function() { function() {
if(!isEnabled())
return;
if ((publicLink == null) if ((publicLink == null)
&& ($("#input-textarea").val() == "")) { && ($("#input-textarea").val() == "")) {
alert("You must upload a file or write some text in the text area before submit a request."); alert("You must upload a file or write some text in the text area before submit a request.");
return; return;
} }
disableExecuteButton();
showProgress(); showProgress();
// if some text has been written in the text area, then // if some text has been written in the text area, then
// a corresponding text file // a corresponding text file
@ -286,7 +323,6 @@ setEventListeners = function() {
contentType : "text/plain; charset=utf-8", contentType : "text/plain; charset=utf-8",
success : function(data, stato) { success : function(data, stato) {
publicLink = data.message; publicLink = data.message;
// console.log(data.language);
if (publicLink == null) { if (publicLink == null) {
alert("Error uploading file."); alert("Error uploading file.");
} }
@ -370,6 +406,7 @@ launchAlgorithm = function() {
success : function(data, stato) { success : function(data, stato) {
textAreaEnable(true); textAreaEnable(true);
$("#file-info").empty(); $("#file-info").empty();
$("#reset-upload").css("display", "none");
if (typeof (data.response) != 'undefined') { if (typeof (data.response) != 'undefined') {
var jsonOut = getOutputJson(data.message); var jsonOut = getOutputJson(data.message);
} else if (typeof (data.error) != 'undefined') { } else if (typeof (data.error) != 'undefined') {
@ -444,13 +481,15 @@ showResult = function(data) {
jsonContent = data; jsonContent = data;
resultText = jsonContent.output.text; resultText = jsonContent.output.text;
$("#result-header").empty(); $("#result-header-left").empty();
$("#result-header-right").empty();
$("#result-params-div").empty(); $("#result-params-div").empty();
$("#result-text-div").empty(); $("#result-text-div").empty();
$("#result-header").append( $("#result-header-left").append(
"<p>You can download the overall result as a JSON file <a href='" "You can download the overall result as a JSON file <a href='"
+ jsonContent.link + "'>here</a></p>"); + jsonContent.link + "'>here</a>");
$("#result-header-right").append("&nbsp;");
var localText = resultText; var localText = resultText;
localText = resultText.replace(/\n/g, "<br>"); localText = resultText.replace(/\n/g, "<br>");
$("#result-text-div").empty(); $("#result-text-div").empty();
@ -536,7 +575,10 @@ rewriteText = function(annotation, color) {
var G = enhanceColor(complement.substring(2,4)); var G = enhanceColor(complement.substring(2,4));
var B = enhanceColor(complement.substring(4)); var B = enhanceColor(complement.substring(4));
complement = "#" + R + G + B; complement = "#" + R + G + B;
var indices = getIndices(annotation); var indices = getIndices(annotation);
$("#result-header-right").empty();
$("#result-header-right").append("<span style='color:" + color + ";'>" + annotation + "</span> occurs " + indices.length + " times.");
var indexedText = ""; var indexedText = "";
if ((typeof (indices) == 'undefined') || (indices.length == 0)) { if ((typeof (indices) == 'undefined') || (indices.length == 0)) {
@ -636,7 +678,7 @@ mergeIndices = function(indices) {
*/ */
resetExecuteButton = function() { resetExecuteButton = function() {
publicLink = null; publicLink = null;
$("#execute-button").css("background-color", pageGray); disableExecuteButton();
} }
/* /*