mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Applying new UX design for device details default unit
This commit is contained in:
dunithd
parent
4cf3e2d421
commit
c832f1b5a9
@ -46,7 +46,125 @@
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function loadOperationsLog(update) {
|
function loadOperationsLog() {
|
||||||
|
var table = $('#operation-log').DataTable({
|
||||||
|
serverSide: true,
|
||||||
|
processing: false,
|
||||||
|
searching: false,
|
||||||
|
ordering: false,
|
||||||
|
pageLength: 10,
|
||||||
|
order: [],
|
||||||
|
autoWidth: false,
|
||||||
|
ajax: {
|
||||||
|
url: "/devicemgt/api/operation/paginate",
|
||||||
|
data: {
|
||||||
|
deviceId: deviceIdentifier,
|
||||||
|
deviceType: deviceType,
|
||||||
|
owner: deviceOwner
|
||||||
|
},
|
||||||
|
dataSrc: function(json) {
|
||||||
|
$("#operations-spinner").addClass("hidden");
|
||||||
|
$("#operations-log-container").empty();
|
||||||
|
return json.data;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
columnDefs: [{
|
||||||
|
targets: 0,
|
||||||
|
data: "code",
|
||||||
|
class: "icon-only content-fill"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
targets: 1,
|
||||||
|
data: "createdTimeStamp",
|
||||||
|
class: "text-right",
|
||||||
|
render: function(date) {
|
||||||
|
var value = String(date);
|
||||||
|
return value.slice(0, 16);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
targets: 2,
|
||||||
|
data: "status",
|
||||||
|
class: "text-right extended-log-data log-record-status",
|
||||||
|
render: function(data, type, full, meta) {
|
||||||
|
return '<i class="icon fw fw-success"></i><span> ' + data + ' </span><i class="icon fw fw-down"></i>';
|
||||||
|
},
|
||||||
|
width: "100%"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
fnCreatedRow: function(nRow, aData, iDataIndex) {
|
||||||
|
$('td:eq(0)', nRow)
|
||||||
|
.attr('data-search', aData.Device_Type)
|
||||||
|
.attr('data-display', aData.Device_Type)
|
||||||
|
.addClass(' icon-only content-fill');
|
||||||
|
|
||||||
|
$('td:eq(1), td:eq(2)', nRow).addClass('text-right');
|
||||||
|
$('td:eq(2)', nRow).addClass('log-record-status')
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#operation-log tbody').on('click', 'td.extended-log-data', function() {
|
||||||
|
var tr = $(this).closest('tr');
|
||||||
|
var row = table.row(tr);
|
||||||
|
var rowData = row.data()
|
||||||
|
var deviceid = $('.device-id').data('deviceid');
|
||||||
|
var deviceType = $('.device-id').data('type');
|
||||||
|
var uri = "/api/device-mgt/v1.0/activities/" + rowData.activityId + "/" + deviceType + "/" + deviceid;
|
||||||
|
var contentType = "application/json";
|
||||||
|
|
||||||
|
if (row.child.isShown()) {
|
||||||
|
row.child.hide();
|
||||||
|
$(row.child()).removeClass('log-data-row');
|
||||||
|
tr.removeClass('shown');
|
||||||
|
} else {
|
||||||
|
invokerUtil.get(uri,(payload) => {
|
||||||
|
row.child(renderLogDetails(row.data(),payload)).show();
|
||||||
|
$(row.child()).addClass('log-data-row');
|
||||||
|
tr.addClass('shown');
|
||||||
|
},(error) => {
|
||||||
|
|
||||||
|
},contentType);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
function renderLogDetails(obj,data) {
|
||||||
|
var payload = JSON.parse(data);
|
||||||
|
var logStream = '<div class="log-data">';
|
||||||
|
|
||||||
|
Object.entries(payload.activityStatus).forEach(
|
||||||
|
([key, entry]) => {
|
||||||
|
logStream += '<div class="row log-entry">' +
|
||||||
|
'<div class="col-lg-8">' +
|
||||||
|
'<div class="log-status"><i class="icon fw ' + getLogStatusIcon(entry.status) + ' "></i>' +
|
||||||
|
'<span>' + entry.status + '</span></div>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="col-lg-4">' +
|
||||||
|
'<div class="log-time text-right"><span>' + entry.updatedTimestamp + '</span></div>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>';
|
||||||
|
}
|
||||||
|
);
|
||||||
|
logStream += '</div></div>';
|
||||||
|
return logStream;
|
||||||
|
|
||||||
|
function getLogStatusIcon(entry) {
|
||||||
|
switch (entry) {
|
||||||
|
case 'COMPLETED':
|
||||||
|
return 'fw-success'
|
||||||
|
break;
|
||||||
|
case 'PENDING':
|
||||||
|
return 'fw-pending'
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return 'fw-info'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadOperationsLog2(update) {
|
||||||
var operationsLogTable = "#operations-log-table";
|
var operationsLogTable = "#operations-log-table";
|
||||||
|
|
||||||
if (update) {
|
if (update) {
|
||||||
@ -65,19 +183,26 @@
|
|||||||
pageLength: 10,
|
pageLength: 10,
|
||||||
order: [],
|
order: [],
|
||||||
ajax: {
|
ajax: {
|
||||||
|
|
||||||
url: "/devicemgt/api/operation/paginate",
|
url: "/devicemgt/api/operation/paginate",
|
||||||
data: {deviceId : deviceIdentifier, deviceType: deviceType, owner: deviceOwner},
|
data: {
|
||||||
|
deviceId: deviceIdentifier,
|
||||||
|
deviceType: deviceType,
|
||||||
|
owner: deviceOwner
|
||||||
|
},
|
||||||
dataSrc: function(json) {
|
dataSrc: function(json) {
|
||||||
$("#operations-spinner").addClass("hidden");
|
$("#operations-spinner").addClass("hidden");
|
||||||
$("#operations-log-container").empty();
|
$("#operations-log-container").empty();
|
||||||
return json.data;
|
return json.data;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
columnDefs: [
|
columnDefs: [{
|
||||||
{targets: 0, data: "code" },
|
targets: 0,
|
||||||
{targets: 1, data: "status", render:
|
data: "code"
|
||||||
function (status) {
|
},
|
||||||
|
{
|
||||||
|
targets: 1,
|
||||||
|
data: "status",
|
||||||
|
render: function(status) {
|
||||||
var html;
|
var html;
|
||||||
switch (status) {
|
switch (status) {
|
||||||
case "COMPLETED":
|
case "COMPLETED":
|
||||||
@ -99,8 +224,10 @@
|
|||||||
return html;
|
return html;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{targets: 2, data: "createdTimeStamp", render:
|
{
|
||||||
function (date) {
|
targets: 2,
|
||||||
|
data: "createdTimeStamp",
|
||||||
|
render: function(date) {
|
||||||
var value = String(date);
|
var value = String(date);
|
||||||
return value.slice(0, 16);
|
return value.slice(0, 16);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,135 +15,93 @@
|
|||||||
specific language governing permissions and limitations
|
specific language governing permissions and limitations
|
||||||
under the License.
|
under the License.
|
||||||
}}
|
}}
|
||||||
|
{{#zone "topCss"}}
|
||||||
|
{{css "css/main.css"}}
|
||||||
|
{{/zone}}
|
||||||
{{unit "cdmf.unit.lib.editable"}}
|
{{unit "cdmf.unit.lib.editable"}}
|
||||||
{{#zone "content"}}
|
{{#zone "content"}}
|
||||||
{{#if deviceFound}}
|
{{#if deviceFound}}
|
||||||
{{#if isAuthorized}}
|
{{#if isAuthorized}}
|
||||||
<span id="logged-in-user" class="hidden" data-username="{{@user.username}}" data-domain="{{@user.domain}}"
|
<div class="row">
|
||||||
data-tenant-id="{{@user.tenantId}}" data-iscloud="{{isCloud}}"></span>
|
<div class="col-lg-4">
|
||||||
{{#defineZone "device-details-header"}}
|
<div class="device-info-container">
|
||||||
<h1 class="page-sub-title device-id device-select" data-deviceid="{{device.deviceIdentifier}}"
|
<div class="row">
|
||||||
data-type="{{device.type}}">
|
<div class="col-lg-3">
|
||||||
Device {{device.name}}
|
|
||||||
{{#if device.viewModel.model}}
|
|
||||||
<span class="lbl-device">
|
|
||||||
( {{device.viewModel.vendor}} {{device.viewModel.model}} )
|
|
||||||
</span>
|
|
||||||
{{/if}}
|
|
||||||
</h1>
|
|
||||||
{{/defineZone}}
|
|
||||||
<div class="row no-gutter add-padding-5x add-margin-top-5x" style="border: 1px solid #e4e4e4;">
|
|
||||||
<div class="media">
|
|
||||||
<div id="device_overview">
|
|
||||||
<div class="media-left media-middle asset-image col-xs-2 col-sm-2 col-md-2 col-lg-2">
|
|
||||||
<div class="thumbnail icon">
|
|
||||||
{{#defineZone "device-thumbnail"}}
|
{{#defineZone "device-thumbnail"}}
|
||||||
<i class="square-element text fw fw-mobile"></i>
|
<i class="fw fw-mobile device-type fw-2x"></i>
|
||||||
|
{{/defineZone}}
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-9">
|
||||||
|
<div class="device-info">
|
||||||
|
{{#defineZone "device-details-header"}}
|
||||||
|
<h1 data-deviceid="{{device.deviceIdentifier}}"
|
||||||
|
data-type="{{device.type}}"
|
||||||
|
data-ownership="{{device.ownership}}"
|
||||||
|
data-owner="{{device.owner}}">
|
||||||
|
{{#if device.viewModel.model}}
|
||||||
|
<h4>{{device.viewModel.vendor}} {{device.viewModel.model}}</h4>
|
||||||
|
{{/if}}
|
||||||
|
<h4>Ownership - <strong>{{device.viewModel.ownership}}</strong></h4>
|
||||||
|
<h4>Device is
|
||||||
|
<strong>
|
||||||
|
{{#equal device.status "ACTIVE"}}Active{{/equal}}
|
||||||
|
{{#equal device.status "INACTIVE"}}Inactive{{/equal}}
|
||||||
|
{{#equal device.status "BLOCKED"}}Blocked{{/equal}}
|
||||||
|
{{#equal device.status "REMOVED"}}Removed{{/equal}}
|
||||||
|
{{#equal device.status "UNREACHABLE"}}Unreachable{{/equal}}
|
||||||
|
</strong>
|
||||||
|
</h4>
|
||||||
{{/defineZone}}
|
{{/defineZone}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="media-body asset-desc add-padding-left-5x">
|
</div>
|
||||||
{{#defineZone "overview-section"}}
|
<div class="vital-strip">
|
||||||
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
|
{{#defineZone "device-details"}}
|
||||||
Device Overview - {{label}}</div>
|
|
||||||
{{unit "cdmf.unit.device.overview-section" device=device}}
|
|
||||||
{{/defineZone}}
|
{{/defineZone}}
|
||||||
{{#defineZone "operation-status"}}{{/defineZone}}
|
</div>
|
||||||
{{#defineZone "device-opetations"}}
|
{{#defineZone "device-opetations"}}
|
||||||
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
|
<div class="operation-container">
|
||||||
Operations
|
<div class="operation-title">
|
||||||
|
<h4>Device Operations</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="add-margin-top-4x" style="height: 90px;">
|
|
||||||
{{unit "cdmf.unit.device.operation-bar" device=device}}
|
{{unit "cdmf.unit.device.operation-bar" device=device}}
|
||||||
</div>
|
</div>
|
||||||
{{/defineZone}}
|
{{/defineZone}}
|
||||||
|
<div class="clearfix"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- /col-lg-4 -->
|
||||||
</div>
|
<div class="col-lg-8">
|
||||||
|
<ul class="nav nav-tabs">
|
||||||
<div class="media tab-responsive">
|
|
||||||
<div class="media-left col-xs-1 col-sm-1 col-md-2 col-lg-2 hidden-xs">
|
|
||||||
<ul class="list-group nav nav-pills nav-stacked" role="tablist">
|
|
||||||
{{#defineZone "device-view-tabs"}}
|
{{#defineZone "device-view-tabs"}}
|
||||||
{{#defineZone "device-details-tab"}}
|
<li class="active"><a data-toggle="tab" href="#event_log">Operations Log</a></li>
|
||||||
<li role="presentation" class="list-group-item active">
|
|
||||||
<a href="#device_details_tab" role="tab" data-toggle="tab"
|
|
||||||
aria-controls="device_details_tab">
|
|
||||||
<i class="icon fw fw-mobile"></i><span class="hidden-sm">Device Details</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{{/defineZone}}
|
|
||||||
{{#defineZone "device-details-tab-injected"}}
|
{{#defineZone "device-details-tab-injected"}}
|
||||||
{{/defineZone}}
|
{{/defineZone}}
|
||||||
{{#defineZone "device-details-tab-operations"}}
|
|
||||||
<li role="presentation" class="list-group-item">
|
|
||||||
<a href="#event_log_tab" role="tab" data-toggle="tab" aria-controls="event_log_tab">
|
|
||||||
<i class="icon fw fw-text"></i><span class="hidden-sm">Operations Log</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{{/defineZone}}
|
|
||||||
{{/defineZone}}
|
{{/defineZone}}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
<div class="tab-content">
|
||||||
<div class="media-body add-padding-left-5x remove-padding-xs">
|
|
||||||
<div class="panel-group tab-content remove-padding" id="tabs" role="tablist"
|
|
||||||
data-status="{{device.isNotRemoved}}" aria-multiselectable="true">
|
|
||||||
<div class="arrow-left hidden-xs"></div>
|
|
||||||
|
|
||||||
{{#defineZone "device-view-tab-contents"}}
|
{{#defineZone "device-view-tab-contents"}}
|
||||||
{{#defineZone "device-details-tab-contents"}}
|
<div id="event_log" class="tab-pane fade in active">
|
||||||
<div class="message message-info">
|
<div class="clearfix"></div>
|
||||||
<h4 class="remove-margin">
|
<div class="operation-log-container">
|
||||||
<i class="icon fw fw-info"></i>
|
<table class="table table-striped table-hover table-responsive list-table display responsive nowrap data-table"
|
||||||
No Device details avaialbe yet.
|
id="operation-log">
|
||||||
</h4>
|
<thead class="block">
|
||||||
</div>
|
<tr class="sort-row">
|
||||||
{{/defineZone}}
|
<!-- <th class="content-fill no-sort"></th> -->
|
||||||
|
<th>Name</th>
|
||||||
{{#defineZone "device-view-tab-injected-conents"}}
|
<th>Position</th>
|
||||||
{{/defineZone}}
|
<th>Office</th>
|
||||||
|
<!-- <th>Age</th>
|
||||||
{{#defineZone "device-view-tab-operations-log-conents"}}
|
<th>Start date</th>
|
||||||
<div class="panel panel-default visible-xs-block" role="tabpanel" id="event_log_tab">
|
<th>Salary</th>
|
||||||
<div class="panel-heading visible-xs collapsed" id="event_log">
|
<th class="no-sort"></th> -->
|
||||||
<h4 class="panel-title">
|
</tr>
|
||||||
<a role="button" data-toggle="collapse" data-parent="#tabs"
|
</thead>
|
||||||
href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
|
<tbody>
|
||||||
<i class="fw fw-text fw-2x"></i>
|
</tbody>
|
||||||
Operations Log
|
</table>
|
||||||
<i class="caret-updown fw fw-down"></i>
|
<!-- <table class="table table-striped table-hover table-bordered display data-table"
|
||||||
</a>
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
<div class="panel-heading display-none-xs">
|
|
||||||
Operations Log
|
|
||||||
<span>
|
|
||||||
<a href="javascript:void(0);" id="refresh-operations">
|
|
||||||
<i class="fw fw-refresh"></i>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div id="collapseFive" class="panel-collapse collapse in" role="tabpanel"
|
|
||||||
aria-labelledby="event_log">
|
|
||||||
<div class="panel-body">
|
|
||||||
<span class="visible-xs add-padding-2x text-right">
|
|
||||||
<a href="javascript:void(0);" id="refresh-operations">
|
|
||||||
<i class="fw fw-refresh"></i>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
<div id="operations-spinner" class="wr-advance-operations-init hidden">
|
|
||||||
<i class="fw fw-settings fw-spin fw-2x"></i> Loading Operations Log...
|
|
||||||
</div>
|
|
||||||
<div id="operations-log-container">
|
|
||||||
<div class="message message-info">
|
|
||||||
<h4 class="remove-margin">
|
|
||||||
<i class="icon fw fw-info"></i>
|
|
||||||
There are no operations, performed yet on this device.
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<table class="table table-striped table-hover table-bordered display data-table"
|
|
||||||
id="operations-log-table">
|
id="operations-log-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="sort-row">
|
<tr class="sort-row">
|
||||||
@ -154,17 +112,17 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table> -->
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{{#defineZone "device-view-tab-injected-conents"}}
|
||||||
{{/defineZone}}
|
{{/defineZone}}
|
||||||
{{/defineZone}}
|
{{/defineZone}}
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- /col-lg-08 -->
|
||||||
</div>
|
</div>
|
||||||
|
<!-- /row -->
|
||||||
{{else}}
|
{{else}}
|
||||||
<h1 class="page-sub-title">
|
<h1 class="page-sub-title">
|
||||||
Permission Denied
|
Permission Denied
|
||||||
|
|||||||
@ -2859,7 +2859,8 @@ a.ast-type-item:hover {
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
color: #526A84;
|
/*color: #526A84;*/
|
||||||
|
color: #333;
|
||||||
min-width: 70px;
|
min-width: 70px;
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
padding: 2px 10px 10px 10px;
|
padding: 2px 10px 10px 10px;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user