Adding new UX design for Raspberry Pi device details page.

revert-dabc3590
dunithd 8 years ago
parent 16812a9943
commit da21efe9be

@ -24,15 +24,38 @@
{{/zone}}
{{#zone "device-thumbnail"}}
<img src="{{@unit.publicUri}}/images/respberry-icon.png"/>
<img src="{{@unit.publicUri}}/images/respberry-icon.png" class="img-responsive"/>
{{/zone}}
{{#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.enrolmentInfo.owner}}'s {{device.name}}
<a id="device-info-tooltip" href="#" data-toggle="tooltip" title="Device Identifier: {{device.deviceIdentifier}}">
<i class="fw fw-info"></i>
</a>
</h1>
<h4>Ownership - <strong>{{device.enrolmentInfo.ownership}}</strong></h4>
<h4>Device is
<strong>
{{#equal device.enrolmentInfo.status "ACTIVE"}}Active{{/equal}}
{{#equal device.enrolmentInfo.status "INACTIVE"}}Inactive{{/equal}}
{{#equal device.enrolmentInfo.status "BLOCKED"}}Blocked{{/equal}}
{{#equal device.enrolmentInfo.status "REMOVED"}}Removed{{/equal}}
{{#equal device.enrolmentInfo.status "UNREACHABLE"}}Unreachable{{/equal}}
</strong>
</h4>
{{/zone}}
{{#zone "device-opetations"}}
<div style="background: #11375B; color: #fff; padding: 10px; margin-bottom: 5px">
Operations
</div>
<div class="add-margin-top-4x">
{{unit "cdmf.unit.device.operation-bar" device=device autoCompleteParams=autoCompleteParams
<div class="operation-container">
<div class="operation-title">
<h4>Device Operations</h4>
</div>
{{unit "cdmf.unit.device.operation-bar" device=device autoCompleteParams=autoCompleteParams
encodedFeaturePayloads=encodedFeaturePayloads}}
</div>
{{/zone}}
@ -42,10 +65,6 @@
data-toggle="tab" aria-controls="device_statistics">Device
Statistics</a>
</li>
<li><a class="list-group-item" href="#event_log" role="tab" data-toggle="tab"
aria-controls="event_log">Operations Log</a></li>
<li><a class="list-group-item" href="#geo_dashboard" role="tab" data-toggle="tab"
aria-controls="geo_dashboard">Map</a></li>
{{/zone}}
{{#zone "device-view-tab-contents"}}
@ -54,43 +73,4 @@
<div class="panel-heading">Device Statistics</div>
{{unit "cdmf.unit.device.type.raspberrypi.realtime.analytics-view" device=device}}
</div>
<div class="panel panel-default tab-pane" id="event_log" role="tabpanel"
aria-labelledby="event_log">
<div class="panel-heading">Operations Log <span><a href="#"
id="refresh-operations"><i
class="fw fw-refresh"></i></a></span></div>
<div class="panel-body">
<div id="operations-spinner" class="wr-advance-operations-init hidden">
<br>
<i class="fw fw-settings fw-spin fw-2x"></i>
Loading Operations Log . . .
<br>
<br>
</div>
<div id="operations-log-container">
<div class="panel-body">
Not available yet
</div>
<br class="c-both"/>
</div>
</div>
</div>
<div class="panel panel-default tab-pane"
id="geo_dashboard" role="tabpanel" aria-labelledby="geo_dashboard">
<div class="panel-heading">Map</div>
<div id="chartWrapper">
</div>
<a class="padding-left"
href="{{portalUrl}}/portal/dashboards/geo-dashboard/?GLOBAL-STATE={{anchor}}">
<span class="fw-stack">
<i class="fw fw-circle-outline fw-stack-2x"></i>
<i class="fw fw-statistics fw-stack-1x"></i>
</span> View Device Location
</a>
</div>
{{/zone}}
{{/zone}}

@ -50,25 +50,27 @@
{{/zone}}
{{#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>
<div class="vital-strip">
{{#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}}
{{else}}
<p>Battery, RAM and Storage related information are not
available yet.</p>
{{/if}}
</div>
{{/zone}}
{{#zone "device-details-tab-injected"}}

@ -52,21 +52,23 @@
{{/zone}}
{{#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>
<div class="vital-strip">
{{#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}} MB</span></p>
{{/if}}
{{#if device.internalMemory}}
<p><i class="icon fw fw-hdd fw-2x fw-rotate-90"></i> <span>{{device.internalMemory.value}} GB</span>
</p>
{{/if}}
{{else}}
<p>Battery, RAM and Storage related information are not
available yet.</p>
{{/if}}
{{#if device.ramUsage}}
<p><i class="icon fw fw-hardware fw-2x fw-rotate-90"></i> <span>{{device.ramUsage.value}} MB</span></p>
{{/if}}
{{#if device.internalMemory}}
<p><i class="icon fw fw-hdd fw-2x fw-rotate-90"></i> <span>{{device.internalMemory.value}} GB</span>
</p>
{{/if}}
{{else}}
<p>Battery, RAM and Storage related information are not
available yet.</p>
{{/if}}
</div>
{{/zone}}
{{#zone "device-details-tab-injected"}}

Loading…
Cancel
Save