aboutsummaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorTrygve Laugstøl <trygvis@inamo.no>2015-10-31 21:26:13 +0100
committerTrygve Laugstøl <trygvis@inamo.no>2015-10-31 21:26:13 +0100
commit13ebc9d3f82f686ca2bc8388095feeb9067e2e40 (patch)
tree4d90d3178c9fa8d326b7d429ef983ca562846d9d /web
parent141cb7cba5c36a9c5415772e2de9823f927d7abb (diff)
downloaddiller-server-13ebc9d3f82f686ca2bc8388095feeb9067e2e40.tar.gz
diller-server-13ebc9d3f82f686ca2bc8388095feeb9067e2e40.tar.bz2
diller-server-13ebc9d3f82f686ca2bc8388095feeb9067e2e40.tar.xz
diller-server-13ebc9d3f82f686ca2bc8388095feeb9067e2e40.zip
web:
o Showning device name and description. o Trying out cards for the property list.
Diffstat (limited to 'web')
-rw-r--r--web/static/app/app.js2
-rw-r--r--web/static/app/templates/device.html66
-rw-r--r--web/static/app/templates/property.html17
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>