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