From da21efe9be220e84747f463846ea417572e87eca Mon Sep 17 00:00:00 2001
From: dunithd <dunithd@gmail.com>
Date: Thu, 22 Jun 2017 16:51:19 +0530
Subject: [PATCH] Adding new UX design for Raspberry Pi device details page.

---
 .../device-view.hbs                           | 80 +++++++------------
 .../device-view.hbs                           | 38 ++++-----
 .../device-view.hbs                           | 30 +++----
 3 files changed, 66 insertions(+), 82 deletions(-)

diff --git a/components/device-types/raspberrypi-plugin/org.wso2.carbon.device.mgt.iot.raspberrypi.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.device-view/device-view.hbs b/components/device-types/raspberrypi-plugin/org.wso2.carbon.device.mgt.iot.raspberrypi.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.device-view/device-view.hbs
index 8f77b561b1..86e3452351 100644
--- a/components/device-types/raspberrypi-plugin/org.wso2.carbon.device.mgt.iot.raspberrypi.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.device-view/device-view.hbs
+++ b/components/device-types/raspberrypi-plugin/org.wso2.carbon.device.mgt.iot.raspberrypi.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.raspberrypi.device-view/device-view.hbs
@@ -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}}
\ No newline at end of file
+{{/zone}}
diff --git a/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 b/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
index 09121c01f9..a9cb25acba 100644
--- a/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
+++ b/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
@@ -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"}}
diff --git a/components/mobile-plugins/windows-plugin/org.wso2.carbon.device.mgt.mobile.windows.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.windows.device-view/device-view.hbs b/components/mobile-plugins/windows-plugin/org.wso2.carbon.device.mgt.mobile.windows.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.windows.device-view/device-view.hbs
index 35eac61145..1fb4ef3203 100644
--- a/components/mobile-plugins/windows-plugin/org.wso2.carbon.device.mgt.mobile.windows.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.windows.device-view/device-view.hbs
+++ b/components/mobile-plugins/windows-plugin/org.wso2.carbon.device.mgt.mobile.windows.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.windows.device-view/device-view.hbs
@@ -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"}}