osh.silva
/
device-mgt-plugins
forked from community/device-mgt-plugins
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #704 from dunithd/master

Browse Source 
Applying new UX for Android device details page
revert-dabc3590
Kamidu Sachith Punchihewa 8 years ago committed by GitHub
parent 834c3e30b9 c4fcaaf498
commit 08992be99d
5 changed files with 100 additions and 345 deletions
Show Stats Download Patch File Download Diff File

324
components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/device-view.hbs
Unescape View File

@ -4,279 +4,91 @@
{{#if deviceFound}}
{{#if isAuthorized}}
{{#zone "device-details-header"}}
<h1 class="page-sub-title device-id device-select"
data-deviceid="{{device.deviceIdentifier}}" data-type="{{device.type}}"
data-ownership="{{device.ownership}}"
data-owner="{{device.owner}}" data-status="{{device.status}}">
Device {{device.name}}
{{#if device.model}}
<span class="lbl-device">
( {{device.vendor}} {{device.model}} )
</span>
{{/if}}
</h1>
{{#zone "device-thumbnail"}}
<i class="fw fw-android device-type fw-2x"></i>
{{/zone}}
{{#zone "overview-section"}}
<div class="media-body asset-desc add-padding-left-5x">
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">Device
Overview
</div>
<table class="table table-responsive table-striped" id="members">
<tbody>
{{#if device.deviceIdentifier}}
<tr role="row" class="odd">
<td class="sorting_1" style="padding:10px 15px; width: 15%;">Device ID</td>
<td style="padding:10px 15px;">{{device.deviceIdentifier}}</td>
</tr>
{{/if}}
{{#if device.name}}
<tr role="row" class="even">
<td class="sorting_1" style="padding:10px 15px; width: 15%;">Name</td>
<td style="padding:10px 15px;">{{device.name}}</td>
</tr>
{{/if}}
{{#if device.vendor}}
{{#if device.model}}
<tr role="row" class="odd">
<td class="sorting_1" style="padding:10px 15px; width: 15%;">Model</td>
<td style="padding:10px 15px;">{{device.vendor}}
{{device.model}}</td>
</tr>
{{/if}}
{{/if}}
{{#if device.status}}
<tr role="row" class="even">
<td class="sorting_1" style="padding:10px 15px; width: 15%;">Status</td>
<td style="padding:10px 15px;">
{{#equal device.status "ACTIVE"}}<span><i
class="fw fw-success icon-success"></i>Active</span>{{/equal}}
{{#equal device.status "INACTIVE"}}<span><i
class="fw fw-warning icon-warning"></i>Inactive</span>{{/equal}}
{{#equal device.status "BLOCKED"}}<span><i
class="fw fw-remove icon-danger"></i>Blocked</span>{{/equal}}
{{#equal device.status "REMOVED"}}<span><i
class="fw fw-delete icon-danger"></i>Removed</span>{{/equal}}
{{#equal device.status "UNREACHABLE"}}<span><i
class="fw fw-warning icon-warning"></i>Unreachable</span>{{/equal}}
</td>
</tr>
{{/if}}
{{#if device.owner}}
<tr role="row" class="odd">
<td class="sorting_1" style="padding:10px 15px; width: 15%;">Owner</td>
<td style="padding:10px 15px;">{{device.owner}}</td>
</tr>
{{/if}}
{{#if device.ownership}}
<tr role="row" class="even">
<td class="sorting_1" style="padding:10px 15px; width: 15%;">Ownership</td>
<td style="padding:10px 15px;">{{device.ownership}}</td>
</tr>
{{/if}}
{{#if device.imei}}
<tr role="row" class="even">
<td class="sorting_1" style="padding:10px 15px; width: 15%;">IMEI</td>
<td style="padding:10px 15px;">{{device.imei}}</td>
</tr>
{{/if}}
{{#if device.udid}}
<tr role="row" class="odd">
<td class="sorting_1" style="padding:10px 15px; width: 15%;">UDID</td>
<td style="padding:10px 15px;">{{device.udid}}</td>
</tr>
{{/if}}
{{#if device.osBuildDate}}
<tr role="row" class="even">
<td class="sorting_1" style="padding:10px 15px; width: 15%;">Firmware Build
Date
</td>
<td style="padding:10px 15px;">{{device.osBuildDate}}</td>
</tr>
{{/if}}
{{#if device.phoneNumber}}
<tr role="row" class="odd">
<td class="sorting_1" style="padding:10px 15px; width: 15%;">Phone Number</td>
<td style="padding:10px 15px;">{{device.phoneNumber}}</td>
</tr>
{{/if}}
{{#if device.lastUpdatedTime}}
<tr role="row" class="even">
<td class="sorting_1" style="padding:10px 15px; width: 15%;">Last Update</td>
<td style="padding:10px 15px;">{{device.lastUpdatedTime}}</td>
</tr>
{{/if}}
</tbody>
</table>
</div>
{{#zone "device-details-header"}}
<h1 class="device-id"
data-deviceid="{{device.deviceIdentifier}}"
data-type="{{device.type}}"
data-ownership="{{device.ownership}}"
data-owner="{{device.owner}}">
{{device.owner}}'s {{device.name}}
<a id="device-info-tooltip" href="#" data-toggle="tooltip" title="Device Identifier: {{device.deviceIdentifier}}
Firmware Build Date: {{device.osBuildDate}}
UDID: {{device.udid}}">
<i class="fw fw-info"></i>
</a>
</h1>
{{#if device.model}}
<h4>{{device.vendor}} {{device.model}}</h4>
{{/if}}
<h4>Ownership - <strong>{{device.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>
{{/zone}}
{{#zone "device-opetations"}}
{{#if device.isNotRemoved}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
Operations
</div>
<div class="add-margin-top-4x">
<div class="operation-container">
<div class="operation-title">
<h4>Device Operations</h4>
</div>
{{unit "cdmf.unit.device.type.android.operation-bar" device=device
backendApiUri=backendApiUri autoCompleteParams=autoCompleteParams}}
</div>
{{/if}}
{{/zone}}
{{#zone "device-details-tab-injected"}}
<li role="presentation" class="list-group-item">
<a href="#policy_compliance_tab" role="tab" data-toggle="tab"
aria-controls="policy_compliance_tab">
<i class="icon fw fw-policy"></i><span class="hidden-sm">Policy Compliance</span>
</a>
</li>
<li role="presentation" class="list-group-item location_tab">
<a href="#device_location_tab" role="tab" data-toggle="tab"
data-lat="{{device.location.latitude}}"
data-long="{{device.location.longitude}}"
aria-controls="device_location_tab"
class="initGeoLocationLink">
<i class="icon fw fw-map-location"></i>
<span class="hidden-sm">Device Location</span>
</a>
</li>
<li role="presentation" class="list-group-item">
<a href="#installed_applications_tab" role="tab" data-toggle="tab"
aria-controls="installed_applications_tab">
<i class="icon fw fw-application"></i><span class="hidden-sm">Installed Applications</span>
</a>
</li>
{{#zone "device-details"}}
{{#if device.deviceInfoAvailable}}
{{#if device.BatteryLevel}}
<p><i class="icon fw fw-battery fw-2x"></i> <span>{{device.BatteryLevel.value}}%</span></p>
{{/if}}
{{#if device.ramUsage}}
<p><i class="icon fw fw-hardware fw-2x fw-rotate-90"></i> <span>{{device.ramUsage.value}}%</span></p>
{{/if}}
{{#if device.internalMemory}}
<p><i class="icon fw fw-hdd fw-2x fw-rotate-90"></i> <span>{{device.internalMemory.usage}}</span>
<span class="memory-amt">GB/{{device.internalMemory.total}}GB</span></p>
{{/if}}
{{#if device.externalMemory}}
<p><i class="icon fw fw-usb-drive fw-2x"></i> <span>{{device.externalMemory.usage}}</span>
<span class="memory-amt">GB/{{device.externalMemory.total}}GB</span></p>
{{/if}}
{{else}}
<p>Battery, RAM and Storage related information are not
available yet.</p>
{{/if}}
{{/zone}}
{{#zone "device-details-tab-contents"}}
<div class="panel panel-default" role="tabpanel" id="device_details_tab">
<div class="panel-heading visible-xs collapsed" id="device_details">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#tabs"
href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fw fw-mobile fw-2x"></i>
Device Details
<i class="caret-updown fw fw-down"></i>
</a>
</h4>
</div>
<div class="panel-heading display-none-xs">Device Details</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
aria-labelledby="device_details">
<div class="panel-body ">
<div class="device-detail-body">
<!-- device summary -->
{{#if device.deviceInfoAvailable}}
{{#if device.BatteryLevel}}
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-md-12">
<div class="wr-stats-board-tile">
<div class="tile-name">BATTERY</div>
<div>
<div class="tile-icon"><i
class="fw fw-battery"></i></div>
<div class="tile-stats">
{{device.BatteryLevel
.value}} %
</div>
</div>
</div>
</div>
</div>
{{/if}}
<!--{{#if device.cpuUsage}}-->
<!--<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">-->
<!--<div class="col-md-12">-->
<!--<div class="wr-stats-board-tile">-->
<!--<div class="tile-name">CPU Usage</div>-->
<!--<div>-->
<!--<div class="tile-icon"><i class="fw fw-dashboard"></i></div>-->
<!--<div class="tile-stats">-->
<!--{{device.cpuUsage.value}} %-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--{{/if}}-->
{{#if device.ramUsage}}
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-md-12">
<div class="wr-stats-board-tile">
<div class="tile-name">RAM Usage</div>
<div>
<div class="tile-icon"><i
class="fw fw-hardware"></i></div>
<div class="tile-stats">
{{device.ramUsage
.value}} %
</div>
</div>
</div>
</div>
</div>
{{/if}}
{{#if device.internalMemory}}
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-md-12">
<div class="wr-stats-board-tile">
<div class="tile-name">Local Storage</div>
<div>
<div class="tile-icon"><i
class="fw fw-hdd"></i>
</div>
<div class="tile-stats">
{{device.internalMemory
.usage}} %
<span class="tile-stats-free">
TOTAL OF {{device.internalMemory
.total}} GB
</span>
</div>
</div>
</div>
</div>
</div>
{{/if}}
{{#if device.externalMemory}}
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="col-md-12">
<div class="wr-stats-board-tile">
<div class="tile-name">External Storage</div>
<div>
<div class="tile-icon"><i
class="fw fw-usb-drive"></i></div>
<div class="tile-stats">
{{device.externalMemory
.usage}} %
<span class="tile-stats-free">
TOTAL OF {{device.externalMemory
.total}} GB
</span>
</div>
</div>
</div>
</div>
</div>
{{/if}}
{{else}}
<div class="message message-info">
<h4 class="remove-margin">
<i class="icon fw fw-info"></i>
Battery, RAM and Storage related information are not
available yet.
</h4>
</div>
{{/if}}
</div>
</div>
</div>
</div>
{{#zone "device-details-tab-injected"}}
<li><a data-toggle="tab" href="#location">Location</a></li>
<li><a data-toggle="tab" href="#app">Applications</a></li>
<li><a data-toggle="tab" href="#policy">Policy Compliance</a></li>
{{/zone}}
{{#zone "device-view-tab-injected-conents"}}
<div id="location" class="tab-pane fade">
<iframe width="100%" height="100%" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJk_gsqyVZ4joR4UxR7brwMnA&key=AIzaSyChgf100i4rBz6neCNRyK1D05g9VLY8jvo" allowfullscreen></iframe>
</div>
<div id="app" class="tab-pane fade">
<div id="applications-list-container" data-public-uri="{{@unit.publicUri}}">
</div>
</div>
<div id="policy" class="tab-pane fade">
<div id="policy-list-container">
</div>
</div>
<div class="panel panel-default visible-xs-block" role="tabpanel"
id="policy_compliance_tab">
<div class="panel-heading visible-xs collapsed" id="policy_compliance">

BIN
components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/public/img/android_app_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

2
components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/public/js/device-detail.js
Unescape View File

@ -307,6 +307,8 @@ var InitiateViewOption = null;
viewModel["appContext"] = context;
var content = template(viewModel);
$("#applications-list-container").html(content);
var iconSource = $("#applications-list-container").data("public-uri") + "/img/android_app_icon.png";
$("#applications-list-container img").attr("src",iconSource);
} else {
$("#applications-list-container").html("<div class='message message-info'><h4><i class='icon fw fw-info'></i>No applications found.</h4>" +
"<p>Please try refreshing the list in a while.</p></div>");

40
components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/public/templates/applications-list.hbs
Unescape View File

@ -1,31 +1,9 @@
<div class="wr-app-listing">
<div class="wr-applist">
{{#each applications}}
<a style="text-align: center; width: 110px; height: 140px;">
{{#equal platform "android"}}<i class="icon fw fw-android"></i>{{/equal}}
{{#equal platform "ios"}}<i class="icon fw fw-apple"></i>{{/equal}}
{{#equal platform "windows"}}<i class="icon fw fw-windows"></i>{{/equal}}
{{#equal isActive true}}
<span style="word-wrap: break-word;">
<i class="fw fw-success icon-success" style="font-size: 14px;"></i>
&nbsp;Active
</span>
<span style="word-wrap: break-word;"><b>{{name}}</b></span>
<span style="word-wrap: break-word;"><b>V:{{version}}</b></span>
{{#if memoryUsage}}
<span style="word-wrap: break-word;">
Memory Usage
</span>
<span style="word-wrap: break-word;">
( {{memoryUsage}} Bytes )
</span>
{{/if}}
{{/equal}}
{{#equal isActive false}}
<span style="word-wrap: break-word;">{{name}}</span>
<span style="word-wrap: break-word;"><b>V:{{version}}</b></span>
{{/equal}}
</a>
{{/each}}
</div>
</div>
{{#each applications}}
<div class="application">
<img src="">
<div class="app-info">
<h4>{{name}}</h4>
<p>v{{version}}</p>
</div>
</div>
{{/each}}

79
components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/public/templates/policy-compliance.hbs
Unescape View File

@ -1,63 +1,26 @@
<div class="wr-list-group wr-sortable policy-list">
<span class="list-group-item" id="{{id}}">
<div class="row">
<div class="col-lg-3 clearfix">
<span class="wr-list-icon">
{{#equal deviceType "android"}}
<i class=" fw fw-android"></i>
{{/equal}}
{{#equal deviceType "ios"}}
<i class=" fw fw-apple"></i>
{{/equal}}
{{#equal deviceType "windows"}}
<i class=" fw fw-windows"></i>
{{/equal}}
</span>
<span class="wr-list-desc">
<h3 class="wr-list-name">{{policy.policyName}}</h3>
<span class="wr-list-username">{{deviceType}}</span>
</span>
</div>
<div class="col-lg-6">
<div class="row no-gutter">
<div class="wr-desc-list-configs col-lg-4">
<div>
<b>Ownership Type : </b> {{policy.ownershipType}}
</div>
</div>
<div class="wr-desc-list-configs col-lg-4">
<div>
<b>Compliance Type :</b> {{policy.compliance}}
</div>
</div>
<div class="wr-desc-list-configs col-lg-4">
<div>
<b>Compliance :</b>
{{#equal compliance "COMPLIANT"}}
<span><i class="fw fw-success icon-success"></i> Compliant</span>
{{/equal}}
{{#equal compliance "NON-COMPLIANT"}}
<span><i class="fw fw-warning icon-danger"></i> Not Compliant</span>
{{/equal}}
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<span class="list-group-item-actions">
<a href="{{appContext}}/policy/effective-policy?type={{deviceType}}&id={{deviceId}}" class="cu-btn-inner
policy-view-link" data-id="{{id}}">
<span class="fw-stack">
<i class="fw fw-circle-outline fw-stack-2x"></i>
<i class="fw fw-view fw-stack-1x"></i>
</span>
View
</a>
</span>
<div class="policy-item">
{{#equal compliance "COMPLIANT"}}
<i class="icon fw fw-success fw-3x policy-status"></i>
{{/equal}}
{{#equal compliance "NON-COMPLIANT"}}
<i class="icon fw fw-warning fw-3x policy-status"></i>
{{/equal}}
<p>
<span class="policy-name">{{policy.policyName}}</span>
<span class="policy-platform">{{deviceType}}</span>
</p>
<p>
<span class="comp-type">Compliance Type : <strong>{{policy.compliance}}</strong></span>
<span class="ownership-type">Ownership type : <strong>{{policy.ownershipType}}</strong></span>
</p>
<div class="actions">
<div class="action-btn ripple">
<p><a href="{{appContext}}/policy/effective-policy?type={{deviceType}}&id={{deviceId}}">
<i class="icon fw fw-view fw-2x"></i> <span>View Policy </span></a></p>
</div>
</div>
</span>
</div>
<table class="table table-striped table-hover table-bordered display data-table" id="policy-compliance-table">
<thead>
<tr class="sort-row">
@ -77,4 +40,4 @@
{{/each}}
<br class="c-both" />
</tbody>
</table>
</table>

Write Preview
Loading…
Cancel
Save