aboutsummaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/static/app/DillerRpc.js15
-rw-r--r--web/static/app/app.js41
-rw-r--r--web/static/app/templates/device.html13
-rw-r--r--web/static/app/templates/edit-attribute.modal.html (renamed from web/static/app/templates/device-edit-attribute.modal.html)2
-rw-r--r--web/static/app/templates/front-page.html10
-rw-r--r--web/static/app/templates/property.html38
6 files changed, 90 insertions, 29 deletions
diff --git a/web/static/app/DillerRpc.js b/web/static/app/DillerRpc.js
index b1939f4..f865dc5 100644
--- a/web/static/app/DillerRpc.js
+++ b/web/static/app/DillerRpc.js
@@ -33,11 +33,21 @@ function DillerRpc($http, DillerConfig) {
return $http(req);
}
+ function patchProperty(propertyId, payload) {
+ var req = {};
+ req.method = 'patch';
+ req.url = baseUrl + '/api/property/:propertyId/values';
+ req.url = req.url.replace(/:propertyId/, propertyId);
+ req.data = payload;
+ return $http(req);
+ }
+
return {
getDevices: getDevices,
getDevice: getDevice,
patchDevice: patchDevice,
- getValues: getValues
+ getValues: getValues,
+ patchProperty: patchProperty
};
}
@@ -54,3 +64,6 @@ DillerRpcResolve.patchDevice = function(DillerRpc, $route) {
DillerRpcResolve.getValues = function(DillerRpc, $route) {
return DillerRpc.getValues($route.current.params.propertyId);
};
+DillerRpcResolve.patchProperty = function(DillerRpc, $route) {
+ return DillerRpc.patchProperty($route.current.params.propertyId, $route.current.params.payload);
+};
diff --git a/web/static/app/app.js b/web/static/app/app.js
index fa4c4cc..22c7f83 100644
--- a/web/static/app/app.js
+++ b/web/static/app/app.js
@@ -10,7 +10,7 @@
ctrl.device = device.data.device;
- ctrl.propertyChunks = _.chunk(ctrl.device.properties, 3);
+ ctrl.propertyChunks = _(ctrl.device.properties).sortByAll(['name', 'key']).chunk(3).value();
ctrl.editDeviceAttribute = function (attributeName) {
var outer = ctrl;
@@ -18,7 +18,7 @@
controller: function ($uibModalInstance) {
var ctrl = this;
- ctrl.attributeName = attributeName;
+ ctrl.title = 'Edit device ' + attributeName;
ctrl.label = attributeName.substr(0, 1).toUpperCase() + attributeName.substr(1);
ctrl.value = outer.device[attributeName];
@@ -34,16 +34,19 @@
},
controllerAs: 'ctrl',
bindToController: true,
- templateUrl: 'app/templates/device-edit-attribute.modal.html'
+ templateUrl: 'app/templates/edit-attribute.modal.html'
});
}
}
- function PropertyController($timeout, $route, DillerRpc, device, values) {
+ function PropertyController($timeout, $route, $uibModal, DillerRpc, device, values) {
var ctrl = this;
- ctrl.device = device.data.device;
- ctrl.property = _.find(ctrl.device.properties, {id: $route.current.params.propertyId});
+ function updateData(device) {
+ ctrl.device = device.data.device;
+ ctrl.property = _.find(ctrl.device.properties, {id: $route.current.params.propertyId});
+ }
+ updateData(device);
ctrl.values = values.data.values;
var refreshPromise;
@@ -59,6 +62,32 @@
$timeout.cancel(refreshPromise);
})
};
+
+ ctrl.editPropertyAttribute = function (attributeName) {
+ var outer = ctrl;
+ $uibModal.open({
+ controller: function ($uibModalInstance) {
+ var ctrl = this;
+
+ ctrl.title = 'Edit property ' + attributeName;
+ ctrl.label = attributeName.substr(0, 1).toUpperCase() + attributeName.substr(1);
+ ctrl.value = outer.property[attributeName];
+
+ ctrl.update = function () {
+ DillerRpc.patchProperty(outer.property.id, {attribute: attributeName, value: ctrl.value})
+ .then(function (res) {
+ updateData(res);
+ $uibModalInstance.close({});
+ }, function (res) {
+ ctrl.error = res.data.message;
+ });
+ };
+ },
+ controllerAs: 'ctrl',
+ bindToController: true,
+ templateUrl: 'app/templates/edit-attribute.modal.html'
+ });
+ }
}
function TimestampFilter() {
diff --git a/web/static/app/templates/device.html b/web/static/app/templates/device.html
index e3c988d..09452a8 100644
--- a/web/static/app/templates/device.html
+++ b/web/static/app/templates/device.html
@@ -8,12 +8,15 @@
</a>
</h1>
- <p ng-if="ctrl.device.description">
+ <p>
<a ng-click="ctrl.editDeviceAttribute('description')" class="pull-right">
<i class="fa fa-edit"/>
</a>
-
{{ctrl.device.description}}
+
+ <a href ng-if="!ctrl.device.description" ng-click="ctrl.editDeviceAttribute('description')">
+ Edit description
+ </a>
</p>
<!--
@@ -74,7 +77,7 @@
<dt class="col-sm-3">Created</dt>
<dd class="col-sm-9">
- {{ctrl.device.created_timestamp | date}}
+ {{ctrl.device.created_timestamp | date:'medium'}}
&nbsp;
</dd>
</dl>
@@ -90,9 +93,9 @@
</div>
<div class="row" ng-if="ctrl.device.properties.length > 0"
- ng-repeat="chunk in ctrl.propertyChunks | orderBy:'key' track by $index">
+ ng-repeat="chunk in ctrl.propertyChunks">
- <div class="col-sm-4" ng-repeat="p in chunk | orderBy:'key' track by $index">
+ <div class="col-sm-4" ng-repeat="p in chunk">
<div class="card">
<!--
<div class="card-header">
diff --git a/web/static/app/templates/device-edit-attribute.modal.html b/web/static/app/templates/edit-attribute.modal.html
index 2e57f2d..effa08f 100644
--- a/web/static/app/templates/device-edit-attribute.modal.html
+++ b/web/static/app/templates/edit-attribute.modal.html
@@ -3,7 +3,7 @@
<button type="button" class="close" ng-click="$dismiss()">
<span>&times;</span>
</button>
- <h4 class="modal-title">Edit device {{ctrl.attributeName}}</h4>
+ <h4 class="modal-title">{{ctrl.title}}</h4>
</div>
<div class="modal-body">
<fieldset class="form-group">
diff --git a/web/static/app/templates/front-page.html b/web/static/app/templates/front-page.html
index 68026c3..e2ee38b 100644
--- a/web/static/app/templates/front-page.html
+++ b/web/static/app/templates/front-page.html
@@ -5,17 +5,19 @@
<table class="table">
<thead>
<tr>
+ <th>Name</th>
<th>Registered</th>
- <th>Key</th>
</tr>
</thead>
<tbody>
- <tr ng-repeat="d in ctrl.devices | orderBy:'key'">
+ <tr ng-repeat="d in ctrl.devices | orderBy:['name', 'key']">
<td>
- {{d.created_timestamp | date:'medium'}}
+ <a href="#/device/{{d.id}}">
+ {{(d.name || d.key)}}
+ </a>
</td>
<td>
- <a href="#/device/{{d.id}}">{{d.key}}</a>
+ {{d.created_timestamp | date:'medium'}}
</td>
</tr>
</tbody>
diff --git a/web/static/app/templates/property.html b/web/static/app/templates/property.html
index 8cff1f0..969734b 100644
--- a/web/static/app/templates/property.html
+++ b/web/static/app/templates/property.html
@@ -1,24 +1,38 @@
<div class="container">
<h1>
- <a href="#/device/{{ctrl.device.id}}">
- {{(ctrl.device.name || ctrl.device.key)}}
+ <a href="#/device/{{ctrl.device.id}}">{{(ctrl.device.name || ctrl.device.key)}}</a>:
+ {{(ctrl.property.name || ctrl.property.key)}}
+
+ <a ng-click="ctrl.editPropertyAttribute('name')" class="pull-right" style="font-size: 1rem;">
+ <i class="fa fa-edit"/>
</a>
</h1>
- <h2>
- {{(ctrl.property.name || ctrl.property.key)}}
- </h2>
-
- <p ng-show="ctrl.property.description">
+ <p>
+ <a ng-click="ctrl.editPropertyAttribute('description')" class="pull-right">
+ <i class="fa fa-edit"/>
+ </a>
{{ctrl.property.description}}
+
+ <a href ng-if="!ctrl.property.description" ng-click="ctrl.editPropertyAttribute('description')">
+ Edit description
+ </a>
</p>
- <ul>
- <li>Created: {{ctrl.property.created_timestamp | date}}</li>
- <li>Name: {{ctrl.property.name}}</li>
- <li>Description: {{ctrl.property.description}}</li>
- </ul>
+ <dl>
+ <dt class="col-sm-3">Key</dt>
+ <dd class="col-sm-9">
+ {{ctrl.property.key}}
+ &nbsp;
+ </dd>
+
+ <dt class="col-sm-3">Created</dt>
+ <dd class="col-sm-9">
+ {{ctrl.property.created_timestamp | date:'medium'}}
+ &nbsp;
+ </dd>
+ </dl>
<h3>
Latest Values