From f7ff8a837bed336a14aa0442ed8286f3ef78f577 Mon Sep 17 00:00:00 2001
From: Trygve Laugstøl <trygvis@inamo.no>
Date: Sun, 1 Nov 2015 01:06:40 +0100
Subject: core: o Adding updates of device property's name and description.
 web: o Ading editing of property name and description.

---
 web/static/app/DillerRpc.js                        | 15 +++++++-
 web/static/app/app.js                              | 41 ++++++++++++++++++----
 .../app/templates/device-edit-attribute.modal.html | 32 -----------------
 web/static/app/templates/device.html               | 13 ++++---
 web/static/app/templates/edit-attribute.modal.html | 32 +++++++++++++++++
 web/static/app/templates/front-page.html           | 10 +++---
 web/static/app/templates/property.html             | 38 +++++++++++++-------
 7 files changed, 121 insertions(+), 60 deletions(-)
 delete mode 100644 web/static/app/templates/device-edit-attribute.modal.html
 create mode 100644 web/static/app/templates/edit-attribute.modal.html

(limited to 'web')

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-edit-attribute.modal.html b/web/static/app/templates/device-edit-attribute.modal.html
deleted file mode 100644
index 2e57f2d..0000000
--- a/web/static/app/templates/device-edit-attribute.modal.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<form name="form" ng-submit="ctrl.update()">
-  <div class="modal-header">
-    <button type="button" class="close" ng-click="$dismiss()">
-      <span>&times;</span>
-    </button>
-    <h4 class="modal-title">Edit device {{ctrl.attributeName}}</h4>
-  </div>
-  <div class="modal-body">
-    <fieldset class="form-group">
-      <label for="attribute" class="text-capitalize">{{ctrl.label}}</label>
-      <input type="text" class="form-control" id="attribute" autofocus
-             ng-model="ctrl.value"/>
-    </fieldset>
-  </div>
-  <div class="modal-footer">
-
-    <div class="row">
-      <div class="col-sm-7 text-left">
-        <p class="form-control-static">
-          {{ctrl.error}}
-        </p>
-      </div>
-      <div class="col-sm-5">
-        <button type="button" class="btn btn-secondary" ng-click="$dismiss()">Cancel</button>
-        <button type="submit" class="btn btn-primary"
-                ng-disabled="form.$invalid">
-          Update
-        </button>
-      </div>
-    </div>
-  </div>
-</form>
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/edit-attribute.modal.html b/web/static/app/templates/edit-attribute.modal.html
new file mode 100644
index 0000000..effa08f
--- /dev/null
+++ b/web/static/app/templates/edit-attribute.modal.html
@@ -0,0 +1,32 @@
+<form name="form" ng-submit="ctrl.update()">
+  <div class="modal-header">
+    <button type="button" class="close" ng-click="$dismiss()">
+      <span>&times;</span>
+    </button>
+    <h4 class="modal-title">{{ctrl.title}}</h4>
+  </div>
+  <div class="modal-body">
+    <fieldset class="form-group">
+      <label for="attribute" class="text-capitalize">{{ctrl.label}}</label>
+      <input type="text" class="form-control" id="attribute" autofocus
+             ng-model="ctrl.value"/>
+    </fieldset>
+  </div>
+  <div class="modal-footer">
+
+    <div class="row">
+      <div class="col-sm-7 text-left">
+        <p class="form-control-static">
+          {{ctrl.error}}
+        </p>
+      </div>
+      <div class="col-sm-5">
+        <button type="button" class="btn btn-secondary" ng-click="$dismiss()">Cancel</button>
+        <button type="submit" class="btn btn-primary"
+                ng-disabled="form.$invalid">
+          Update
+        </button>
+      </div>
+    </div>
+  </div>
+</form>
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
-- 
cgit v1.2.3