Updated loader dialog

2021-10-21 14:32:38 +02:00 · 2021-10-21 14:32:38 +02:00 · 2e5640b940
parent 4531edb6b2
commit 2e5640b940
5 changed files with 110 additions and 159 deletions
--- 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;
--- 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>

--- a/src/main/webapp/html/systemservicedefinition/ssd_dialog_create_content.jsp
+++ b/src/main/webapp/html/systemservicedefinition/ssd_dialog_create_content.jsp
@ -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>
--- 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>

 <%--
--- 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>