diff options
| -rw-r--r-- | src/DillerDao.js | 2 | ||||
| -rw-r--r-- | web/static/app/app.js | 2 | ||||
| -rw-r--r-- | web/static/app/templates/device.html | 66 | ||||
| -rw-r--r-- | web/static/app/templates/property.html | 17 |
4 files changed, 76 insertions, 11 deletions
diff --git a/src/DillerDao.js b/src/DillerDao.js index e372841..e7f6b54 100644 --- a/src/DillerDao.js +++ b/src/DillerDao.js @@ -3,7 +3,7 @@ var _ = require('lodash'); function DillerDao(tx) { var deviceColumns = 'id, created_timestamp, key, name, description'; - var propertyColumns = 'id, created_timestamp, device, key, last_value, last_timestamp'; + var propertyColumns = 'id, created_timestamp, device, key, name, description, last_value, last_timestamp'; var valueColumns = 'property, timestamp, value_text, value_numeric'; // ------------------------------------------------------------------------------------------------------------------- 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}} + + </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> |