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

src/main/webapp/css/custom.css

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

src/main/webapp/index.jsp

@@ -72,8 +72,8 @@
 								</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>
 						</div>
 					</div>
@@ -95,7 +95,11 @@
 			</div>
 			<!--  this is the main 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="right-side" id="result-params-div"></div>
 				<div style="text-align: left;">

src/main/webapp/js/main.js

@@ -16,8 +16,9 @@ var hexLetters = '0123456789ABCDEF';
 // with valid algs info.
 // ------------------------------------------------------------------------------------------------------
 
-$
+$(document).ready(function() {
-		.ajax({
+	disableExecuteButton();
+	$.ajax({
 		url : "https://data.d4science.org/bnp4UDNyb21lSURkQXdDUnlSS0JkVWgzWk1KMUxWVGZHbWJQNStIS0N6Yz0",
 		type : "GET",
 		async : true,
@@ -40,7 +41,7 @@ $
 				jsonContent = null;
 			});
 
-				$("#execute-button").css("background-color", pageGray);
+			disableExecuteButton();
 
 			$("#upload-button")
 					.uploadFile(
@@ -99,8 +100,7 @@ $
 															+ files
 															+ "</span>");
 									publicLink = data.message;
-										$("#execute-button").css(
+									enableExecuteButton();
-												"background-color", pageGreen);
 									if (publicLink == null) {
 										alert("Error uploading file.");
 									}
@@ -117,6 +117,8 @@ $
 			alert("Unexpected Error. Status: " + richiesta.status);
 		}
 	});
+});
+
 
 /*
  * 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
  */
 setEventListeners = 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")
 			.click(
 					function() {
+						if(!isEnabled())
+							return;
+						
 						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;
 						}
 
+						disableExecuteButton();
+						
 						showProgress();
 						// if some text has been written in the text area, then
 						// a corresponding text file
@@ -286,7 +323,6 @@ setEventListeners = function() {
 										contentType : "text/plain; charset=utf-8",
 										success : function(data, stato) {
 											publicLink = data.message;
-											// console.log(data.language);
 											if (publicLink == null) {
 												alert("Error uploading file.");
 											}
@@ -370,6 +406,7 @@ launchAlgorithm = function() {
 		success : function(data, stato) {
 			textAreaEnable(true);
 			$("#file-info").empty();
+			$("#reset-upload").css("display", "none");
 			if (typeof (data.response) != 'undefined') {
 				var jsonOut = getOutputJson(data.message);
 			} else if (typeof (data.error) != 'undefined') {
@@ -444,13 +481,15 @@ showResult = function(data) {
 	jsonContent = data;
 	resultText = jsonContent.output.text;
 
-	$("#result-header").empty();
+	$("#result-header-left").empty();
+	$("#result-header-right").empty();
 	$("#result-params-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;
 	localText = resultText.replace(/\n/g, "<br>");
 	$("#result-text-div").empty();
@@ -536,7 +575,10 @@ rewriteText = function(annotation, color) {
 	var G = enhanceColor(complement.substring(2,4));
 	var B = enhanceColor(complement.substring(4));
 	complement = "#" + R + G + B;
+	
 	var indices = getIndices(annotation);
+	$("#result-header-right").empty();
+	$("#result-header-right").append("<span style='color:" + color + ";'>" + annotation + "</span> occurs " + indices.length + " times.");
 	var indexedText = "";
 
 	if ((typeof (indices) == 'undefined') || (indices.length == 0)) {
@@ -636,7 +678,7 @@ mergeIndices = function(indices) {
  */
 resetExecuteButton = function() {
 	publicLink = null;
-	$("#execute-button").css("background-color", pageGray);
+	disableExecuteButton();
 }
 
 /*