From 2e5640b9409f3d7b12b87392d5c7143d13a523b4 Mon Sep 17 00:00:00 2001
From: Giancarlo Panichi <g.panichi@isti.cnr.it>
Date: Thu, 21 Oct 2021 14:32:38 +0200
Subject: [PATCH] Updated loader dialog

---
 src/main/webapp/css/main.css                  |  2 +-
 .../simpleProgressBar.jsp                     | 93 ++++++++++--------
 .../ssd_dialog_create_content.jsp             | 97 -------------------
 .../ssd_dialog_progressbar.jsp                | 33 +++++--
 .../html/systemservicedefinition/view.jsp     | 44 ++++++---
 5 files changed, 110 insertions(+), 159 deletions(-)
 delete mode 100644 src/main/webapp/html/systemservicedefinition/ssd_dialog_create_content.jsp

diff --git a/src/main/webapp/css/main.css b/src/main/webapp/css/main.css
index b35832c..20e5279 100644
--- a/src/main/webapp/css/main.css
+++ b/src/main/webapp/css/main.css
@@ -177,7 +177,7 @@
 }
 
 
-.system-service-definition-portlet #loader {
+.progressDialog #loader {
   border: 16px solid #f3f3f3;
   border-radius: 50%;
   border-top: 16px solid #3498db;
diff --git a/src/main/webapp/html/systemservicedefinition/simpleProgressBar.jsp b/src/main/webapp/html/systemservicedefinition/simpleProgressBar.jsp
index 1ceddea..0e24a7a 100644
--- a/src/main/webapp/html/systemservicedefinition/simpleProgressBar.jsp
+++ b/src/main/webapp/html/systemservicedefinition/simpleProgressBar.jsp
@@ -1,55 +1,66 @@
 
 <div id="simpleProgress">
-		<div id="simpleBar"></div>
+	<div id="simpleBar"></div>
 </div>
 
 <script type="text/javascript">
-var elem = document.getElementById("simpleBar");
+	var elem = document.getElementById("simpleBar");
 
-var position = 0;
-var rm = true;
-var id;
+	var position = 0;
+	var rm = true;
+	var id;
 
+	var start;
 
-function frame() {
-    
-    if(rm) {
-    	if(position>70){
-        	rm=false;
-            position--;  
-        } else {
-        	position++;
-        }
-    } else {
-    	if(position>0){
-        	position--;
-        } else {
-        	rm=true;
-            position++;
-        }
-    }
-    elem.style.marginLeft = position+"%";
-}
+	function frame() {
+		if (start === undefined){
+			start = new Date();
+		} 
+		let timestamp = new Date();	
+		const elapsed = timestamp - start;
+		
+		if (rm) {
+			if (position > 69) {
+				rm = false;
+				position=position-(0.1*elapsed);
+			} else {
+				position=position+(0.1*elapsed);
+			}
+		} else {
+			if (position > 0) {
+				position=position-(0.1*elapsed);
+			} else {
+				rm = true;
+				position=position+(0.1*elapsed);
+			}
+		}
+		
+		elem.style.marginLeft = position + "%";
+		start=timestamp;
+		//id = window.requestAnimationFrame(frame)
+	}
 
-function end(){
-	clearInterval(id);
-	var elemContainer = document.getElementById("simpleProgress");
-	//elemContainer.style.display = "none";
-	elemContainer.style.visibility = "hidden";
-}
+	function end() {
+		//window.cancelAnimationFrame(id);
+		clearInterval(id);
+		var elemContainer = document.getElementById("simpleProgress");
+		//elemContainer.style.display = "none";
+		elemContainer.style.visibility = "hidden";
+	}
 
-function move() { 
-	var elemContainer = document.getElementById("simpleProgress");
-	//elemContainer.style.display = "block";
-	elemContainer.style.visibility = "visible";
-	id=setInterval(frame, 10);
-}
+	function move() {
+		var elemContainer = document.getElementById("simpleProgress");
+		//elemContainer.style.display = "block";
+		elemContainer.style.visibility = "visible";
+		//id = window.requestAnimationFrame(frame);
+		id=setInterval(frame, 100);
+	}
 
-function loadingActive(){
-	console.log("Loading...");
-    move();
-}
+	function loadingActive() {
+		console.log("Loading...");
+		move();
+	}
 
-loadingActive();
+	loadingActive();
 </script>
 
diff --git a/src/main/webapp/html/systemservicedefinition/ssd_dialog_create_content.jsp b/src/main/webapp/html/systemservicedefinition/ssd_dialog_create_content.jsp
deleted file mode 100644
index f46474a..0000000
--- a/src/main/webapp/html/systemservicedefinition/ssd_dialog_create_content.jsp
+++ /dev/null
@@ -1,97 +0,0 @@
-<%@include file="init.jsp"%>
-<%--
-<%@ page import="org.gcube.vomanagement.usermanagement.model.GCubeGroup"%>
-<%
-List<GCubeGroup> userGroups = (List<GCubeGroup>) request.getAttribute("userGroups");
-pageContext.setAttribute("userGroups", userGroups);
-
-List<String> userContexts = (List<String>) request.getAttribute("userContexts");
-pageContext.setAttribute("userContexts", userContexts);
-%>  
---%>
-
-
-<portlet:actionURL name="createDefinition" var="createDefinitionURL" />
-
-<%--
-<%=ParamUtil.getString(renderRequest,"message")%>
- --%>
-
-<div>
-<p>Create:</p>
-<div>
-	<label for="ssd_clientId">Client Id:</label>
-	<input id="ssd_clientId" name="ssd_clientId" value="" />
-	<label for="ssd_description">Description:</label>
-	<input id="ssd_description" name="ssd_description" value="" />
-	<%-- 
-	<select style="width: 100%;" name="contexts" id="myselect">
-		<c:forEach var="context" items="${userContexts}">
-			<option value="${context}">${context}</option>
-		</c:forEach>
-	</select> --%>
-</div>
-<div style="margin-bottom: 15px;">
-	<button name="createSSDButton" id="createSSDButton" type="button"
-		class="btn btn-primary" onClick="createSysyemServiceDefinition()">Create</button>
-</div>
-<%--
-<div>
-	<button id="buttonCopy" class="btn btn-mini" onclick="copyFunction()">
-		<i class="icon-copy"></i> Copy
-	</button>
-	<!-- 300px; margin: 10px;" -->
-	<textarea style="width: 90%;"  id="tokenResult"></textarea>
-</div>
- --%>
-</div>
-
-<script>
-function createSysyemServiceDefinition() {
-	console.log("createSysyemServiceDefinition: ");
-	var selectedClientId = $("#ssd_clientId").val();
-	console.log("name: "+selectedName);
-	var selectedDescription = $("#ssd_description").val();
-	console.log("description: "+selectedDescription);
-	
-	$.ajax({
-		url : '<%=createDefinitionURL%>',
-		type : 'POST',
-		datatype : 'json',
-		data : {
-			name : selectedName,
-			description : selectedDescription
-		},
-		success : function(data) {
-			console.log("Success!");
-		}
-	});
-}
-
-<%--
-var resultObject = JSON.parse(JSON.stringify(data));
-if (resultObject.success) {
-	$('#tokenResult').text(resultObject.comment);
-	$('#buttonCopy').show();
-} else {
-	$('#tokenResult').text(resultObject.comment);
-	$('#tokenResult').css('color', 'red');
-}
-$('#createSSDButton').attr("disabled", false);
-
-function copyFunction() {
-	/* Get the text field */
-	var copyText = document.getElementById("tokenResult");
-
-	/* Select the text field */
-	copyText.select();
-	copyText.setSelectionRange(0, 99999); /* For mobile devices */
-
-	/* Copy the text inside the text field */
-	document.execCommand("copy");
-}
-
-
-$('#buttonCopy').hide();
---%>
-</script>
\ No newline at end of file
diff --git a/src/main/webapp/html/systemservicedefinition/ssd_dialog_progressbar.jsp b/src/main/webapp/html/systemservicedefinition/ssd_dialog_progressbar.jsp
index dcadac2..ba7b899 100644
--- a/src/main/webapp/html/systemservicedefinition/ssd_dialog_progressbar.jsp
+++ b/src/main/webapp/html/systemservicedefinition/ssd_dialog_progressbar.jsp
@@ -7,12 +7,14 @@
 </portlet:renderURL>
 
 <script>
+var popUpWindowProgress;
+
 function progressDialog(){
   AUI().use('aui-base',
 	'aui-io-plugin-deprecated',
 	'liferay-util-window', 
 	function(A) {
-		var popUpWindow=Liferay.Util.Window.getWindow(
+		window.popUpWindowProgress=Liferay.Util.Window.getWindow(
 						{
 							dialog: {
 								centered: true,
@@ -21,7 +23,7 @@ function progressDialog(){
 								modal: true,
 								resizable: false,
 								width: 320,
-							    height: 100,
+							    height: 280,
 							    destroyOnClose: true,
 							    destroyOnHide: true,
 							    toolbars: {
@@ -34,12 +36,31 @@ function progressDialog(){
 					autoLoad: false
 				}
 			).render();
-		popUpWindow.show();
-		popUpWindow.titleNode.html("Processing...");
-		popUpWindow.io.set('uri','<%=ssdSimpleProgressBar%>');
-		popUpWindow.io.start();
+		window.popUpWindowProgress.show();
+		window.popUpWindowProgress.titleNode.html("Processing...");
+		window.popUpWindowProgress.bodyNode.html("<div id='loader'></div>");
+		
 	});
 }
+
+
+<%--
+'<%=ssdSimpleProgressBar%>'
+window.popUpWindowProgress.io.set("uri","<%=ssdSimpleProgressBar%>");
+window.popUpWindowProgress.io.start();
+		
+window.popUpWindowProgress.bodyNode.html("<%@include file="simpleProgressBar.jsp" %>");
+--%>
+
+
+function progressDialogClose(){
+	if(window.popUpWindowProgress){
+		console.log("<%=ssdSimpleProgressBar%>");
+		console.log(window.popUpWindowProgress);
+		window.popUpWindowProgress.destroy();
+	}
+	<%--window.Liferay.Util.getOpener().closePopup();--%>
+}
 </script>
 
 <%--
diff --git a/src/main/webapp/html/systemservicedefinition/view.jsp b/src/main/webapp/html/systemservicedefinition/view.jsp
index 75c45a9..373e34b 100644
--- a/src/main/webapp/html/systemservicedefinition/view.jsp
+++ b/src/main/webapp/html/systemservicedefinition/view.jsp
@@ -19,7 +19,6 @@
 	<portlet:param name="description" value="descriptionValue" />
 </portlet:actionURL>
 
-	
 <% 
 pageContext.setAttribute("currentGroup", GroupLocalServiceUtil.getGroup(PortalUtil.getScopeGroupId(request)));
 String currentUsername = PortalUtil.getUser(request).getScreenName();
@@ -36,8 +35,6 @@ pageContext.setAttribute("currentUsername", currentUsername);
 <script src="<%=renderRequest.getContextPath()%>/js/dataTables.buttons.min.js"></script>
 <script src="<%=renderRequest.getContextPath()%>/js/buttons.html5.min.js"></script>
 <script src="<%=renderRequest.getContextPath()%>/js/buttons.print.min.js"></script>
-
- <p>Use this portlet to automatically create or delete system services, our internal services that carry out "system" operations with the need to be authorised to access other services with every active contexts of the infrastructure.</p>
  
 <liferay-ui:error key="error-session" message="Invalid Session please refresh the page!" />
 <liferay-ui:error key="error-create-definition" message="Error creating the definition!" />
@@ -47,6 +44,8 @@ pageContext.setAttribute("currentUsername", currentUsername);
 <liferay-ui:error key="error-delete-definition" message="Error deleting the definition!" />
 <liferay-ui:success key="success-definition-deleted" message="Definition deleted!" />
 
+ <p>Use this portlet to automatically create or delete system services, our internal services that carry out "system" operations with the need to be authorised to access other services with every active contexts of the infrastructure.</p>
+
 <table id="definitionsTable" style="width:100%">
 	<thead>
 		<tr>
@@ -56,6 +55,7 @@ pageContext.setAttribute("currentUsername", currentUsername);
 	</thead>
 </table>
 
+<%@include file="ssd_dialog_progressbar.jsp" %>
 
 <!-- Script -->
 <script>
@@ -103,7 +103,7 @@ function deleteSSD(){
 		return;
 	}
 	
-	var selected = JSON.stringify(rowSelected["0"]);
+	var selected = rowSelected["0"]["ClientId"];
     console.log("Selected: ",selected);
     
     var confirmed = confirm("Are you sure to delete it?\n"+selected);
@@ -111,14 +111,9 @@ function deleteSSD(){
     	return;
     }
     
-    <%-- 
-    $('#definitionsTable_processing')
-    .on( 'processing.dt', function ( e, settings, processing ) {
-        $('#processingIndicator').css( 'display', processing ? 'block' : 'none' );
-    } )
-    .dataTable(); --%>
+    progressDialog();
     
-    $('#definitionsTable_processing').css( 'display', 'block');
+    <%-- $('#definitionsTable_processing').css( 'display', 'block'); --%>
         
 	var deleteUrl='<%=ssdDeleteURL.toString()%>';
 	deleteUrl= deleteUrl.replace("clientIdValue",rowSelected["0"]["ClientId"]);
@@ -133,6 +128,8 @@ function refreshSSD(){
 }
 
 
+
+
 $.fn.dataTable.ext.buttons.createSSD = {
 	    text: '<span class="material-icons">add_circle_outline</span><span class="circle_button_text">Create</span>',
 	    action: function ( e, dt, node, config ) {
@@ -182,6 +179,9 @@ attr:  {
     id: 'copyButton'
 } --%>
 
+
+
+
 //Instance of DataTables framework, see https://datatables.net/manual/
 function mainTable() {
 	var table = $('#definitionsTable').DataTable( {
@@ -195,7 +195,7 @@ function mainTable() {
 	        'createSSD','deleteSSD','refreshSSD'
 	    ],
 		processing: true,
-		oLanguage: {sProcessing: "<div id='loader'></div>"},
+		oLanguage: {sProcessing: "<div></div>"},
 		serverSide: true, 
 		searching: true,
 		ordering:  true,
@@ -263,17 +263,33 @@ function mainTable() {
 	        }
 	} );
 	 
-	/* Remove selected by a button
+	<%-- Remove selected by a button
 	 $('#button').click( function () {
 	        table.row('.selected').remove().draw( false );
 	    } );
-	*/
+	--%>
 	
+	
+	<%-- In alternative a simple loader image use:
+	  oLanguage: {sProcessing: "<div id='loader'></div>"}
+	--%>
+	table.on('processing.dt', function ( e, settings, processing ) {
+		$('#definitionsTable_processing').css( 'display', 'none');
+		if(processing){
+	    	progressDialog();
+	    } else {
+	    	progressDialogClose();
+	    }
+				
+		<%-- $('#definitionsTable_processing').css( 'display', processing ? 'block' : 'none' ); --%>
+	} );
+		
 	console.log("mainTable() done");
 }
 
 
 $(document).ready(mainTable);
+
 </script>