From 13ebc9d3f82f686ca2bc8388095feeb9067e2e40 Mon Sep 17 00:00:00 2001
From: Trygve Laugstøl <trygvis@inamo.no>
Date: Sat, 31 Oct 2015 21:26:13 +0100
Subject: web: o Showning device name and description. o Trying out cards for
 the property list.

---
 web/static/app/templates/device.html | 66 +++++++++++++++++++++++++++++++++---
 1 file changed, 61 insertions(+), 5 deletions(-)

(limited to 'web/static/app/templates/device.html')

diff --git a/web/static/app/templates/device.html b/web/static/app/templates/device.html
index 66b5e4d..fbda67f 100644
--- a/web/static/app/templates/device.html
+++ b/web/static/app/templates/device.html
@@ -1,10 +1,13 @@
 <div class="container">
 
   <h1>
-    {{ctrl.device.key}}
-    <small class="text-muted">device</small>
+    {{(ctrl.device.name || ctrl.device.key)}}
   </h1>
 
+  <p ng-if="ctrl.device.description">
+    {{ctrl.device.description}}
+  </p>
+
   <!--
   <hr/>
   <div class="row">
@@ -54,7 +57,13 @@
   <hr/>
   -->
 
-  <dl class="dl-horizontalX">
+  <dl>
+    <dt class="col-sm-3">Key</dt>
+    <dd class="col-sm-9">
+      {{ctrl.device.key}}
+      &nbsp;
+    </dd>
+
     <dt class="col-sm-3">Created</dt>
     <dd class="col-sm-9">
       {{ctrl.device.created_timestamp | date}}
@@ -81,14 +90,60 @@
 
   <h3>Properties</h3>
 
-  <div class="row">
+  <div class="row" ng-if="ctrl.device.properties.length == 0">
     <div class="col-sm-12">
-      <p ng-if="ctrl.device.properties.length == 0">
+      <p>
         No properties registered...
       </p>
     </div>
   </div>
 
+  <div class="row" ng-if="ctrl.device.properties.length > 0"
+       ng-repeat="chunk in ctrl.propertyChunks | orderBy:'key' track by $index">
+
+    <div class="col-sm-4" ng-repeat="p in chunk | orderBy:'key' track by $index">
+      <div class="card">
+        <!--
+        <div class="card-header">
+          <span ng-if="p.name">{{p.name}}</span>
+          <span ng-if="!p.name">{{p.key}}</span>
+          <span class="small" ng-if="p.name">
+            {{p.key}}
+          </span>
+        </div>
+        -->
+        <div class="card-block">
+          <h4 class="card-title" ng-if="p.name">{{p.name}}</h4>
+          <h4 class="card-title" ng-if="!p.name">{{p.key}}</h4>
+          <h6 class="card-subtitle text-muted" ng-if="p.name">
+            {{p.key}}
+          </h6>
+        </div>
+        <div class="card-block">
+          Last value:
+            <span ng-if="p.last_value">
+              {{p.last_value}}<br/>
+              {{p.last_timestamp | date:'medium'}}
+            </span>
+            <span ng-if="!p.last_value">
+              No values received yet.
+            </span>
+        </div>
+        <!--
+        <div class="card-block">
+          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+          <a href="#" class="card-link">Card link</a>
+          <a href="#" class="card-link">Another link</a>
+        </div>
+        -->
+        <div class="card-block">
+          <a class="card-link" href="#/device/{{ctrl.device.id}}/property/{{p.id}}">Details</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!--
   <table class="table" ng-if="ctrl.device.properties.length > 0">
     <thead>
     <tr>
@@ -115,4 +170,5 @@
     </tr>
     </tbody>
   </table>
+  -->
 </div>
-- 
cgit v1.2.3