Updated progress bar

master
Giancarlo Panichi 2 years ago
parent ec06374a3b
commit 4531edb6b2

@ -11,6 +11,7 @@ public class Constants {
public static final String DEFAULT_USER = "giancarlo.panichi"; public static final String DEFAULT_USER = "giancarlo.panichi";
public static final String DEFAULT_SCOPE = "/gcube"; public static final String DEFAULT_SCOPE = "/gcube";
public static final String DEFAULT_TOKEN = ""; public static final String DEFAULT_TOKEN = "";
public static final String DEFAULT_ROLE = "OrganizationMember"; public static final String DEFAULT_ROLE = "OrganizationMember";
// Session // Session

@ -1,8 +1,3 @@
.system-service-definition-portlet .circle_button {
padding: 1px 1px;
line-height: 1px;
border-radius: 16px !important;
}
.system-service-definition-portlet table thead { .system-service-definition-portlet table thead {
background: #f8f8f8; background: #f8f8f8;
@ -151,13 +146,13 @@
background: #50a2f5; background: #50a2f5;
} }
.system-service-definition-portlet #simpleProgress { .progressDialog #simpleProgress {
width: 100%; width: 100%;
background-color: #ddd; background-color: #ddd;
visibility: hidden; visibility: hidden;
} }
.system-service-definition-portlet #simpleBar { .progressDialog #simpleBar {
width: 30%; width: 30%;
height: 20px; height: 20px;
background-color: #50a2f5; background-color: #50a2f5;
@ -166,4 +161,41 @@
color: white; color: white;
} }
.system-service-definition-portlet .circle_button {
padding: 1px 3px 1px 1px;
line-height: 1px;
border-radius: 12px !important;
height: 30px;
}
.system-service-definition-portlet .circle_button_text {
display: inline-block;
vertical-align: middle;
height: 15px;
font-size: medium;
}
.system-service-definition-portlet #loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin: auto;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@ -50,5 +50,6 @@ function loadingActive(){
move(); move();
} }
loadingActive();
</script> </script>

@ -32,6 +32,8 @@
</form> </form>
<%@include file="ssd_dialog_progressbar.jsp" %>
<script type="text/javascript"> <script type="text/javascript">
function cancel(){ function cancel(){
document.getElementById("act").value="cancel"; document.getElementById("act").value="cancel";
@ -43,9 +45,7 @@ function createDefinition(elem){
document.getElementById("act").value="submit"; document.getElementById("act").value="submit";
let frm=document.getElementById("createDefinitionForm"); let frm=document.getElementById("createDefinitionForm");
frm.submit(); frm.submit();
loadingActive(); progressDialog();
} }
</script> </script>
<%@include file="simpleProgressBar.jsp" %>

@ -1,20 +1,14 @@
<%@include file="init.jsp"%> <%@include file="init.jsp"%>
<portlet:renderURL var="ssdDialogCreateContent" <portlet:renderURL var="ssdSimpleProgressBar"
windowState="<%=LiferayWindowState.EXCLUSIVE.toString()%>"> windowState="<%=LiferayWindowState.EXCLUSIVE.toString()%>">
<portlet:param name="mvcPath" <portlet:param name="mvcPath"
value="/html/systemservicedefinition/ssd_dialog_create_content.jsp" /> value="/html/systemservicedefinition/simpleProgressBar.jsp" />
</portlet:renderURL> </portlet:renderURL>
<script>
function progressDialog(){
<div> AUI().use('aui-base',
<aui:button name="ssd_dialog_create" id="ssd_dialog_create"
value="Create">
</aui:button>
</div>
<aui:script>
AUI().use('aui-base',
'aui-io-plugin-deprecated', 'aui-io-plugin-deprecated',
'liferay-util-window', 'liferay-util-window',
function(A) { function(A) {
@ -23,10 +17,15 @@ AUI().use('aui-base',
dialog: { dialog: {
centered: true, centered: true,
constrain2view: true, constrain2view: true,
//cssClass: 'yourCSSclassName', cssClass: 'progressDialog',
modal: true, modal: true,
resizable: false, resizable: false,
width: 475 width: 320,
height: 100,
destroyOnClose: true,
destroyOnHide: true,
toolbars: {
}
} }
} }
).plug( ).plug(
@ -36,9 +35,22 @@ AUI().use('aui-base',
} }
).render(); ).render();
popUpWindow.show(); popUpWindow.show();
popUpWindow.titleNode.html("Loading"); popUpWindow.titleNode.html("Processing...");
popUpWindow.io.set('uri','<%=ssdDialogCreateContent%>'); popUpWindow.io.set('uri','<%=ssdSimpleProgressBar%>');
popUpWindow.io.start(); popUpWindow.io.start();
}); });
}); }
</aui:script> </script>
<%--
footer: [
{
label: '&lt;%= UnicodeLanguageUtil.get(pageContext, "cancel") %&gt;',
on: {
click: function() {
messagingDialog.hide();
}
}
}
]
--%>

@ -111,6 +111,15 @@ function deleteSSD(){
return; return;
} }
<%--
$('#definitionsTable_processing')
.on( 'processing.dt', function ( e, settings, processing ) {
$('#processingIndicator').css( 'display', processing ? 'block' : 'none' );
} )
.dataTable(); --%>
$('#definitionsTable_processing').css( 'display', 'block');
var deleteUrl='<%=ssdDeleteURL.toString()%>'; var deleteUrl='<%=ssdDeleteURL.toString()%>';
deleteUrl= deleteUrl.replace("clientIdValue",rowSelected["0"]["ClientId"]); deleteUrl= deleteUrl.replace("clientIdValue",rowSelected["0"]["ClientId"]);
deleteUrl= deleteUrl.replace("descriptionValue",rowSelected["0"]["Description"]); deleteUrl= deleteUrl.replace("descriptionValue",rowSelected["0"]["Description"]);
@ -125,7 +134,7 @@ function refreshSSD(){
$.fn.dataTable.ext.buttons.createSSD = { $.fn.dataTable.ext.buttons.createSSD = {
text: '<span class="material-icons">add_circle_outline</span>', text: '<span class="material-icons">add_circle_outline</span><span class="circle_button_text">Create</span>',
action: function ( e, dt, node, config ) { action: function ( e, dt, node, config ) {
createSSD(); createSSD();
}, },
@ -136,7 +145,7 @@ $.fn.dataTable.ext.buttons.createSSD = {
}; };
$.fn.dataTable.ext.buttons.deleteSSD = { $.fn.dataTable.ext.buttons.deleteSSD = {
text: '<span class="material-icons">remove_circle_outline</span>', text: '<span class="material-icons">remove_circle_outline</span><span class="circle_button_text">Delete</span>',
action: function ( e, dt, node, config ) { action: function ( e, dt, node, config ) {
deleteSSD(); deleteSSD();
}, },
@ -147,7 +156,7 @@ $.fn.dataTable.ext.buttons.deleteSSD = {
}; };
$.fn.dataTable.ext.buttons.refreshSSD = { $.fn.dataTable.ext.buttons.refreshSSD = {
text: '<span class="material-icons">refresh</span>', text: '<span class="material-icons">refresh</span><span class="circle_button_text">Refresh</span>',
action: function ( e, dt, node, config ) { action: function ( e, dt, node, config ) {
refreshSSD(); refreshSSD();
}, },
@ -186,12 +195,14 @@ function mainTable() {
'createSSD','deleteSSD','refreshSSD' 'createSSD','deleteSSD','refreshSSD'
], ],
processing: true, processing: true,
oLanguage: {sProcessing: "<div id='loader'></div>"},
serverSide: true, serverSide: true,
searching: true, searching: true,
ordering: true, ordering: true,
"order": [], "order": [],
search: { search: {
return: true "return": true
}, },
"language": { "language": {
"emptyTable": "Empty", "emptyTable": "Empty",

Loading…
Cancel
Save