[SECARSP-145] Device details flip card was implemented

Change-Id: Ie3b02e512f31510937e1d94d3704f47879643d89

diff --git a/dashboard/src/app/pages/device/device.component.html b/dashboard/src/app/pages/device/device.component.html
index 9f9bc16..36dc41d 100644 (file)
--- a/dashboard/src/app/pages/device/device.component.html
+++ b/dashboard/src/app/pages/device/device.component.html
@@ -1,27 +1,82 @@
-<nb-card class="device-card {{device.type.name}}">
-  <nb-card-body>
-    <div cass="row">
-      <button class="btn btn-icon" [ngClass]="(device.locked===0) ? 'btn-hero-info' : 'btn-hero-danger'" type="button" (click)=toggleLock(device.id,device.locked)>
+<nb-flip-card>
+  <nb-card-front>
+    <nb-card size="xsmall" accent="{{(device.locked===0) ? 'success' : 'active'}}" class="device-card {{device.type.name}}">
+      <nb-card-body>
+        <div cass="row">
+          <button class="btn btn-icon btn-hero-info" type="button" (click)=toggleLock(device.id,device.locked)>
             <div class="icon"></div>
           </button>
-      <div class="info">
-        <div class="title font-w-bold">{{device.type.name | uppercase}}</div>
-        <div class="description font-w-light">{{device.model}}</div>
-      </div>
-      <div *ngIf="device.locked===1" class="locked"><i class="nb-locked"></i></div>
-    </div>
-  </nb-card-body>
-  <nb-card-footer>
-    <nb-actions fullwidth="" size="medium" class="medium full-width">
-      <nb-action>
-        <i class="nb-arrow-retweet"></i><span>Details</span>
-      </nb-action>
-      <nb-action>
-        <i class="nb-list"></i><span>Logs</span>
-      </nb-action>
-      <nb-action>
-        <i class="nb-gear"></i><span>Policies</span>
-      </nb-action>
-    </nb-actions>
-  </nb-card-footer>
-</nb-card>
+          <div class="info">
+            <div class="title font-w-bold">{{device.type.name | uppercase}}</div>
+            <div class="description font-w-light">{{device.model}}</div>
+          </div>
+          <div *ngIf="device.locked===1" class="locked"><i class="nb-locked"></i></div>
+        </div>
+      </nb-card-body>
+      <nb-card-footer>
+        <nb-actions size="small">
+          <nb-action>
+            <i class="nb-list"></i><span>Logs</span>
+          </nb-action>
+          <nb-action>
+            <i class="nb-gear"></i><span>Policies</span>
+          </nb-action>
+        </nb-actions>
+      </nb-card-footer>
+    </nb-card>
+  </nb-card-front>
+  <nb-card-back>
+    <nb-card size="xsmall">
+      <nb-card-body>
+          <div class="row">
+              <div class="col-xxxl-12 col-md-12"><h4 class="font-w-bold">COMMON</h4></div>
+          </div>
+          <div class="row">
+              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Type:</span></div>
+              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.type.name}}</div>
+          </div>
+          <div class="row">
+              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Model:</span></div>
+              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.model}}</div>
+          </div>
+          <div class="row">
+              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">SN:</span></div>
+              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.sn}}</div>
+          </div>
+          <div class="row">
+              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Registered:</span></div>
+              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.ctime | date:'medium'}}</div>
+          </div>
+          <div class="row">
+              <div class="col-xxxl-12 col-md-12"><h4 class="font-w-bold mt-3">OS</h4></div>
+          </div>
+          <div class="row">
+              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Name:</span></div>
+              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.os.name}}</div>
+          </div>
+          <div class="row">
+              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Version:</span></div>
+              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.os.version}}</div>
+          </div>
+          <div class="row">
+              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">SW:</span></div>
+              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.os.sw}}</div>
+          </div>
+          <div class="row">
+              <div class="col-xxxl-12 col-md-12"><h4 class="font-w-bold mt-3">GEO</h4></div>
+          </div>
+          <div class="row">
+              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Country:</span></div>
+              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.geo.country_name}}</div>
+          </div>
+          <div class="row mb-2">
+              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">City:</span></div>
+              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.geo.city}}</div>
+          </div>
+      </nb-card-body>
+      <nb-card-footer>
+        Back
+      </nb-card-footer>
+    </nb-card>
+  </nb-card-back>
+</nb-flip-card>

diff --git a/dashboard/src/app/pages/device/device.component.scss b/dashboard/src/app/pages/device/device.component.scss
index a70835a..5e9e38a 100644 (file)
--- a/dashboard/src/app/pages/device/device.component.scss
+++ b/dashboard/src/app/pages/device/device.component.scss
@@ -6,6 +6,10 @@
     margin: 0 !important;
 }
 
+.nopading {
+    padding: 0 !important;
+}
+
 .device-card {
     .btn-icon {
         float: left;
@@ -82,13 +86,12 @@
         font-size: 2rem;
     }
 
-    //tmp solution, remove after migration
     nb-actions {
         &:hover {
             cursor: pointer;
         }
         i {
-            font-size: 1.5em;
+            font-size: 2rem;
         }
-    }
+     }
 }