web:

o Showning device name and description.
o Trying out cards for the property list.

3 files changed, 75 insertions, 10 deletions

diff --git a/web/static/app/app.js b/web/static/app/app.js
index a76aa33..fa4c4cc 100644
--- a/web/static/app/app.js
+++ b/web/static/app/app.js
@@ -10,6 +10,8 @@
 
     ctrl.device = device.data.device;
 
+    ctrl.propertyChunks = _.chunk(ctrl.device.properties, 3);
+
     ctrl.editDeviceAttribute = function (attributeName) {
       var outer = ctrl;
       $uibModal.open({
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>
diff --git a/web/static/app/templates/property.html b/web/static/app/templates/property.html
index 5e8199d..8cff1f0 100644
--- a/web/static/app/templates/property.html
+++ b/web/static/app/templates/property.html
@@ -1,15 +1,19 @@
 <div class="container">
 
   <h1>
-    <a href="#/device/{{ctrl.device.id}}">{{ctrl.device.key}}</a>
-    <small class="muted">device</small>
+    <a href="#/device/{{ctrl.device.id}}">
+      {{(ctrl.device.name || ctrl.device.key)}}
+    </a>
   </h1>
 
   <h2>
-    {{ctrl.property.key}}
-    <small class="muted">property</small>
+    {{(ctrl.property.name || ctrl.property.key)}}
   </h2>
 
+  <p ng-show="ctrl.property.description">
+    {{ctrl.property.description}}
+  </p>
+
   <ul>
     <li>Created: {{ctrl.property.created_timestamp | date}}</li>
     <li>Name: {{ctrl.property.name}}</li>
@@ -42,7 +46,10 @@
     </tbody>
     <tbody ng-if="ctrl.values.length > 0">
     <tr ng-repeat="v in ctrl.values">
-      <td><dl-timestamp value="v.timestamp"></dl-timestamp></td>
+      <td>
+        {{v.timestamp | date:'medium'}},
+        <dl-timestamp value="v.timestamp"></dl-timestamp>
+      </td>
       <td>{{v.value}}</td>
     </tr>
     </tbody>