diff options
Diffstat (limited to 'web/static/app/templates/device.html')
| -rw-r--r-- | web/static/app/templates/device.html | 66 |
1 files changed, 61 insertions, 5 deletions
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> |