fixing operations loading spinner and other ui issues

revert-70aa11f8
Ace 8 years ago
parent 9fa4775ec6
commit 34225bd9da

@ -51,7 +51,10 @@
var operationsLogTable = "#operations-log-table"; var operationsLogTable = "#operations-log-table";
if (update) { if (update) {
operationTable = $(operationsLogTable).DataTable(); operationTable = $(operationsLogTable).DataTable();
operationTable.ajax.reload(false); $("#operations-spinner").removeClass("hidden");
operationTable.ajax.reload(function ( json ) {
$("#operations-spinner").addClass("hidden");
}, false);
return; return;
} }
operationTable = $(operationsLogTable).datatables_extended({ operationTable = $(operationsLogTable).datatables_extended({
@ -142,53 +145,54 @@
function (template) { function (template) {
var getEffectivePolicyURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/effective-policy"; var getEffectivePolicyURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/effective-policy";
var getDeviceComplianceURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/compliance-data"; var getDeviceComplianceURL = "/api/device-mgt/v1.0/devices/" + deviceType + "/" + deviceId + "/compliance-data";
invokerUtil.get( invokerUtil.get(
getEffectivePolicyURL, getEffectivePolicyURL,
// success-callback // success-callback
function (data, textStatus, jqXHR) { function (data, textStatus, jqXHR) {
if (jqXHR.status == 200 && data) { if (jqXHR.status == 200) {
data = JSON.parse(data);
$("#policy-spinner").addClass("hidden"); $("#policy-spinner").addClass("hidden");
if (data["active"] == true) { if(data){
activePolicy = data; data = JSON.parse(data);
invokerUtil.get( if (data["active"] == true) {
getDeviceComplianceURL, activePolicy = data;
// success-callback invokerUtil.get(
function (data, textStatus, jqXHR) { getDeviceComplianceURL,
if (jqXHR.status == 200 && data) { // success-callback
var viewModel = {}; function (data, textStatus, jqXHR) {
viewModel["policy"] = activePolicy; if (jqXHR.status == 200 && data) {
viewModel["deviceType"] = deviceType; var viewModel = {};
data = JSON.parse(data); viewModel["policy"] = activePolicy;
var content; viewModel["deviceType"] = deviceType;
if (data["complianceData"]) { data = JSON.parse(data);
if (data["complianceData"]["complianceFeatures"] && var content;
data["complianceData"]["complianceFeatures"].length > 0) { if (data["complianceData"]) {
viewModel["compliance"] = "NON-COMPLIANT"; if (data["complianceData"]["complianceFeatures"] &&
viewModel["complianceFeatures"] = data["complianceData"]["complianceFeatures"]; data["complianceData"]["complianceFeatures"].length > 0) {
content = template(viewModel); viewModel["compliance"] = "NON-COMPLIANT";
$("#policy-list-container").html(content); viewModel["complianceFeatures"] = data["complianceData"]["complianceFeatures"];
content = template(viewModel);
$("#policy-list-container").html(content);
} else {
viewModel["compliance"] = "COMPLIANT";
content = template(viewModel);
$("#policy-list-container").html(content);
$("#policy-compliance-table").addClass("hidden");
}
} else { } else {
viewModel["compliance"] = "COMPLIANT"; $("#policy-list-container").
content = template(viewModel); html("<div class='panel-body'><br><p class='fw-warning'> This device " +
$("#policy-list-container").html(content); "has no policy applied.<p></div>");
$("#policy-compliance-table").addClass("hidden");
} }
} else {
$("#policy-list-container").
html("<div class='panel-body'><br><p class='fw-warning'> This device " +
"has no policy applied.<p></div>");
} }
},
// error-callback
function () {
$("#policy-list-container").
html("<div class='panel-body'><br><p class='fw-warning'> Loading policy compliance related data " +
"was not successful. please try refreshing data in a while.<p></div>");
} }
}, );
// error-callback }
function () {
$("#policy-list-container").
html("<div class='panel-body'><br><p class='fw-warning'> Loading policy compliance related data " +
"was not successful. please try refreshing data in a while.<p></div>");
}
);
} }
} }
}, },

@ -78,12 +78,12 @@ var responsiveTextRatio = 0.2,
* A function to add data attributes to HTML about the user agent * A function to add data attributes to HTML about the user agent
* @return {Null} * @return {Null}
*/ */
$.browser_meta = function(){ $.browser_meta = function(){
$('html') $('html')
.attr('data-useragent', navigator.userAgent) .attr('data-useragent', navigator.userAgent)
.attr('data-platform', navigator.platform) .attr('data-platform', navigator.platform)
.addClass(((!!('ontouchstart' in window) || !!('onmsgesturechange' in window)) ? ' touch' : '')); .addClass(((!!('ontouchstart' in window) || !!('onmsgesturechange' in window)) ? ' touch' : ''));
}; };
/** /**
* @description Data Loader function * @description Data Loader function
@ -96,17 +96,17 @@ var responsiveTextRatio = 0.2,
var loadingText = ($(this).attr('data-loading-text') === undefined) ? 'LOADING' : $(this).attr('data-loading-text'); var loadingText = ($(this).attr('data-loading-text') === undefined) ? 'LOADING' : $(this).attr('data-loading-text');
var html = '<div class="loading-animation">' + var html = '<div class="loading-animation">' +
'<div class="logo">' + '<div class="logo">' +
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"' + '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"' +
'viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve">' + 'viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve">' +
'<path class="circle" stroke-width="1.4" stroke-miterlimit="10" d="M6.534,0.748C7.546,0.683,8.578,0.836,9.508,1.25 c1.903,0.807,3.339,2.615,3.685,4.654c0.244,1.363,0.028,2.807-0.624,4.031c-0.851,1.635-2.458,2.852-4.266,3.222 c-1.189,0.25-2.45,0.152-3.583-0.289c-1.095-0.423-2.066-1.16-2.765-2.101C1.213,9.78,0.774,8.568,0.718,7.335 C0.634,5.866,1.094,4.372,1.993,3.207C3.064,1.788,4.76,0.867,6.534,0.748z"/>' + '<path class="circle" stroke-width="1.4" stroke-miterlimit="10" d="M6.534,0.748C7.546,0.683,8.578,0.836,9.508,1.25 c1.903,0.807,3.339,2.615,3.685,4.654c0.244,1.363,0.028,2.807-0.624,4.031c-0.851,1.635-2.458,2.852-4.266,3.222 c-1.189,0.25-2.45,0.152-3.583-0.289c-1.095-0.423-2.066-1.16-2.765-2.101C1.213,9.78,0.774,8.568,0.718,7.335 C0.634,5.866,1.094,4.372,1.993,3.207C3.064,1.788,4.76,0.867,6.534,0.748z"/>' +
'<path class="pulse-line" stroke-width="0.55" stroke-miterlimit="10" d="M12.602,7.006c-0.582-0.001-1.368-0.001-1.95,0 c-0.491,0.883-0.782,1.4-1.278,2.28C8.572,7.347,7.755,5.337,6.951,3.399c-0.586,1.29-1.338,3.017-1.923,4.307 c-1.235,0-2.38-0.002-3.615,0"/>' + '<path class="pulse-line" stroke-width="0.55" stroke-miterlimit="10" d="M12.602,7.006c-0.582-0.001-1.368-0.001-1.95,0 c-0.491,0.883-0.782,1.4-1.278,2.28C8.572,7.347,7.755,5.337,6.951,3.399c-0.586,1.29-1.338,3.017-1.923,4.307 c-1.235,0-2.38-0.002-3.615,0"/>' +
'</svg>' + '</svg>' +
'<div class="signal"></div>' + '<div class="signal"></div>' +
'</div>' + '</div>' +
'<p>'+ loadingText +'</p>' + '<p>'+ loadingText +'</p>' +
'</div>' + '</div>' +
'<div class="loading-bg"></div>'; '<div class="loading-bg"></div>';
if (action === 'show') { if (action === 'show') {
$(this).prepend(html).addClass('loading'); $(this).prepend(html).addClass('loading');
@ -230,13 +230,13 @@ var responsiveTextRatio = 0.2,
responsive: false, responsive: false,
autoWidth: false, autoWidth: false,
dom:'<"dataTablesTop"' + dom:'<"dataTablesTop"' +
'f' + 'f' +
'<"dataTables_toolbar">' + '<"dataTables_toolbar">' +
'>' + '>' +
'rt' + 'rt' +
'<"dataTablesBottom"' + '<"dataTablesBottom"' +
'lip' + 'lip' +
'>', '>',
language: { language: {
searchPlaceholder: 'Filter by ...', searchPlaceholder: 'Filter by ...',
search: '' search: ''
@ -244,6 +244,7 @@ var responsiveTextRatio = 0.2,
initComplete: function(){ initComplete: function(){
var ROW_SELECTED_CLASS = 'DTTT_selected'; var ROW_SELECTED_CLASS = 'DTTT_selected';
var table = this;
this.api().columns().every(function(){ this.api().columns().every(function(){
@ -301,7 +302,7 @@ var responsiveTextRatio = 0.2,
var search_input = $(this).closest('.dataTables_wrapper').find('div[id$=_filter] input'); var search_input = $(this).closest('.dataTables_wrapper').find('div[id$=_filter] input');
search_input.before('<i class="fw fw-search search-icon"></i>').removeClass('input-sm'); search_input.before('<i class="fw fw-search search-icon"></i>').removeClass('input-sm');
// Create sorting dropdown menu for list table advance operations // Create sorting dropdown menu for list table advance operations
var dropdownmenu = $('<ul class="dropdown-menu arrow arrow-top-right dark sort-list add-margin-top-2x"><li class="dropdown-header">Sort by</li></ul>'); var dropdownmenu = $('<ul class="dropdown-menu arrow arrow-top-right dark sort-list add-margin-top-2x"><li class="dropdown-header">Sort by</li></ul>');
$('.sort-row th', elem).each(function(){ $('.sort-row th', elem).each(function(){
if(!$(this).hasClass('no-sort')){ if(!$(this).hasClass('no-sort')){
@ -313,19 +314,19 @@ var responsiveTextRatio = 0.2,
if (!table.hasClass('no-toolbar')) { if (!table.hasClass('no-toolbar')) {
if (table.hasClass('sorting-enabled')) { if (table.hasClass('sorting-enabled')) {
return '<ul class="nav nav-pills navbar-right remove-margin" role="tablist">' + return '<ul class="nav nav-pills navbar-right remove-margin" role="tablist">' +
'<li><button data-click-event="toggle-selectable" class="btn btn-default btn-primary select-enable-btn">Select</li>' + '<li><button data-click-event="toggle-selectable" class="btn btn-default btn-primary select-enable-btn">Select</li>' +
'<li><button data-click-event="toggle-selected" id="dt-select-all" class="btn btn-default btn-primary disabled">Select All</li>' + '<li><button data-click-event="toggle-selected" id="dt-select-all" class="btn btn-default btn-primary disabled">Select All</li>' +
'<li><button data-click-event="toggle-list-view" data-view="grid" class="btn btn-default"><i class="fw fw-grid"></i></button></li>' + '<li><button data-click-event="toggle-list-view" data-view="grid" class="btn btn-default"><i class="fw fw-grid"></i></button></li>' +
'<li><button data-click-event="toggle-list-view" data-view="list" class="btn btn-default"><i class="fw fw-list"></i></button></li>' + '<li><button data-click-event="toggle-list-view" data-view="list" class="btn btn-default"><i class="fw fw-list"></i></button></li>' +
'<li><button class="btn btn-default" data-toggle="dropdown"><i class="fw fw-sort"></i></button>' + dropdownmenu[0].outerHTML + '</li>' + '<li><button class="btn btn-default" data-toggle="dropdown"><i class="fw fw-sort"></i></button>' + dropdownmenu[0].outerHTML + '</li>' +
'</ul>' '</ul>'
} else { } else {
return '<ul class="nav nav-pills navbar-right remove-margin" role="tablist">' + return '<ul class="nav nav-pills navbar-right remove-margin" role="tablist">' +
'<li><button data-click-event="toggle-selectable" class="btn btn-default btn-primary select-enable-btn">Select</li>' + '<li><button data-click-event="toggle-selectable" class="btn btn-default btn-primary select-enable-btn">Select</li>' +
'<li><button data-click-event="toggle-selected" id="dt-select-all" class="btn btn-default btn-primary disabled">Select All</li>' + '<li><button data-click-event="toggle-selected" id="dt-select-all" class="btn btn-default btn-primary disabled">Select All</li>' +
'<li><button data-click-event="toggle-list-view" data-view="grid" class="btn btn-default"><i class="fw fw-grid"></i></button></li>' + '<li><button data-click-event="toggle-list-view" data-view="grid" class="btn btn-default"><i class="fw fw-grid"></i></button></li>' +
'<li><button data-click-event="toggle-list-view" data-view="list" class="btn btn-default"><i class="fw fw-list"></i></button></li>' + '<li><button data-click-event="toggle-list-view" data-view="list" class="btn btn-default"><i class="fw fw-list"></i></button></li>' +
'</ul>' '</ul>'
} }
} else { } else {
return ''; return '';
@ -335,9 +336,11 @@ var responsiveTextRatio = 0.2,
/** /**
* append advance operations to list table toolbar * append advance operations to list table toolbar
*/ */
$('.dataTable.list-table').closest('.dataTables_wrapper').find('.dataTablesTop .dataTables_toolbar').html( if (table.hasClass('dataTables_toolbar')) {
$('.dataTable.list-table').closest('.dataTables_wrapper').find('.dataTablesTop .dataTables_toolbar').html(
getAdvanceToolBar() getAdvanceToolBar()
); );
}
//Sorting dropdown menu select function //Sorting dropdown menu select function
$('.dataTables_wrapper .sort-list li a').click(function() { $('.dataTables_wrapper .sort-list li a').click(function() {

Loading…
Cancel
Save