web:

o Handling empty property and value tables.
o Testing a better layout of device overview.

2 files changed, 76 insertions, 7 deletions

diff --git a/web/static/app/templates/device.html b/web/static/app/templates/device.html
index b466fdc..b8936f3 100644
--- a/web/static/app/templates/device.html
+++ b/web/static/app/templates/device.html
@@ -5,15 +5,77 @@
     <small class="text-muted">device</small>
   </h1>
 
-  <ul>
-    <li>Created: {{ctrl.device.created_timestamp | date}}</li>
-    <li>Name: {{ctrl.property.name}}</li>
-    <li>Description: {{ctrl.property.description}}</li>
-  </ul>
+  <!--
+  <hr/>
+  <div class="row">
+    <div class="col-sm-3">
+      Created
+    </div>
+    <div class="col-sm-9">
+      {{ctrl.device.created_timestamp | date}}
+    </div>
+  </div>
 
-  <h3>Properties</h3>
+  <div class="row">
+    <div class="col-sm-3">
+      Name
+    </div>
+    <div class="col-sm-9">
+      {{ctrl.device.name}}
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-sm-3">
+      Description
+    </div>
+    <div class="col-sm-9">
+      {{ctrl.device.description}}
+    </div>
+  </div>
+
+  <hr/>
 
   <table class="table">
+    <tr>
+      <th width="25%">Created</th>
+      <td>{{ctrl.device.created_timestamp | date}}</td>
+    </tr>
+    <tr>
+      <th width="25%">Name</th>
+      <td>{{ctrl.device.name}}</td>
+    </tr>
+    <tr>
+      <th width="25%">Description</th>
+      <td>{{ctrl.device.description}}</td>
+    </tr>
+  </table>
+
+  <hr/>
+  -->
+
+  <dl class="dl-horizontalX">
+    <dt class="col-sm-3">Created</dt>
+    <dd class="col-sm-9">{{ctrl.device.created_timestamp | date}}</dd>
+
+    <dt class="col-sm-3">Name</dt>
+    <dd class="col-sm-9">&nbsp;{{ctrl.device.name}}</dd>
+
+    <dt class="col-sm-3">Description</dt>
+    <dd class="col-sm-9">&nbsp;{{ctrl.device.description}}</dd>
+  </dl>
+
+  <h3>Properties</h3>
+
+  <div class="row">
+    <div class="col-sm-12">
+      <p ng-if="ctrl.device.properties.length == 0">
+        No properties registered...
+      </p>
+    </div>
+  </div>
+
+  <table class="table" ng-if="ctrl.device.properties.length > 0">
     <thead>
     <tr>
       <td>Registered</td>
diff --git a/web/static/app/templates/property.html b/web/static/app/templates/property.html
index cd003ca..5e8199d 100644
--- a/web/static/app/templates/property.html
+++ b/web/static/app/templates/property.html
@@ -33,7 +33,14 @@
       <th>Value</th>
     </tr>
     </thead>
-    <tbody>
+    <tbody ng-if="ctrl.values.length == 0">
+    <tr>
+      <td>
+        No values registered
+      </td>
+    </tr>
+    </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.value}}</td>