From 02d6e77bd180cbbf6f7f6e1a69c670e922d8204d Mon Sep 17 00:00:00 2001
From: Trygve Laugstøl <trygvis@inamo.no>
Date: Sat, 31 Oct 2015 12:04:28 +0100
Subject: web: o Starting on edit button for device name.

---
 web/static/app/DillerRpc.js                        | 13 ++++++++++
 web/static/app/app.js                              | 29 ++++++++++++++++++++--
 .../app/templates/device-edit-attribute.modal.html | 13 ++++++++++
 web/static/app/templates/device.html               |  8 +++++-
 web/templates/index.jade                           |  4 +++
 5 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 web/static/app/templates/device-edit-attribute.modal.html

(limited to 'web')

diff --git a/web/static/app/DillerRpc.js b/web/static/app/DillerRpc.js
index de90aee..b1939f4 100644
--- a/web/static/app/DillerRpc.js
+++ b/web/static/app/DillerRpc.js
@@ -16,6 +16,15 @@ function DillerRpc($http, DillerConfig) {
     return $http(req);
   }
 
+  function patchDevice(deviceId, payload) {
+    var req = {};
+    req.method = 'patch';
+    req.url = baseUrl + '/api/device/:deviceId';
+    req.url = req.url.replace(/:deviceId/, deviceId);
+    req.data = payload;
+    return $http(req);
+  }
+
   function getValues(propertyId) {
     var req = {};
     req.method = 'get';
@@ -27,6 +36,7 @@ function DillerRpc($http, DillerConfig) {
   return {
     getDevices: getDevices,
     getDevice: getDevice,
+    patchDevice: patchDevice,
     getValues: getValues
   };
 }
@@ -38,6 +48,9 @@ DillerRpcResolve.getDevices = function(DillerRpc) {
 DillerRpcResolve.getDevice = function(DillerRpc, $route) {
   return DillerRpc.getDevice($route.current.params.deviceId);
 };
+DillerRpcResolve.patchDevice = function(DillerRpc, $route) {
+  return DillerRpc.patchDevice($route.current.params.deviceId, $route.current.params.payload);
+};
 DillerRpcResolve.getValues = function(DillerRpc, $route) {
   return DillerRpc.getValues($route.current.params.propertyId);
 };
diff --git a/web/static/app/app.js b/web/static/app/app.js
index 6fa1f71..134afc8 100644
--- a/web/static/app/app.js
+++ b/web/static/app/app.js
@@ -5,10 +5,35 @@
     ctrl.devices = devices.data.devices;
   }
 
-  function DeviceController(device) {
+  function DeviceController($uibModal, device, DillerRpc) {
     var ctrl = this;
 
     ctrl.device = device.data.device;
+
+    ctrl.editDeviceAttribute = function (attributeName) {
+      var outer = ctrl;
+      $uibModal.open({
+        controller: function ($uibModalInstance) {
+          var ctrl = this;
+
+          ctrl.attributeName = attributeName;
+          ctrl.value = outer.device[attributeName];
+
+          ctrl.value = 'yoyo';
+
+          ctrl.update = function () {
+
+            DillerRpc.patchDevice(outer.device.id, {attribute: attributeName, value: ctrl.value})
+              .then(function (res) {
+                $uibModalInstance.close({});
+              });
+          };
+        },
+        controllerAs: 'ctrl',
+        bindToController: true,
+        templateUrl: 'app/templates/device-edit-attribute.modal.html'
+      });
+    }
   }
 
   function PropertyController($timeout, $route, DillerRpc, device, values) {
@@ -110,7 +135,7 @@
   }
 
   angular
-    .module('Diller', ['ngRoute'])
+    .module('Diller', ['ngRoute', 'ui.bootstrap'])
     .config(config)
     .filter('timestamp', TimestampFilter)
     .directive('dlTimestamp', DlTimestampDirective)
diff --git a/web/static/app/templates/device-edit-attribute.modal.html b/web/static/app/templates/device-edit-attribute.modal.html
new file mode 100644
index 0000000..e471e5f
--- /dev/null
+++ b/web/static/app/templates/device-edit-attribute.modal.html
@@ -0,0 +1,13 @@
+<div class="modal-header">
+  <button type="button" class="close" ng-click="$dismiss()">
+    <span>&times;</span>
+  </button>
+  <h4 class="modal-title">Edit device {{attributeName}}</h4>
+</div>
+<div class="modal-body">
+  <p>One fine body&hellip;</p>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-secondary" ng-click="$dismiss()">Cancel</button>
+  <button type="button" class="btn btn-primary" ng-click="ctrl.update()">Update</button>
+</div>
diff --git a/web/static/app/templates/device.html b/web/static/app/templates/device.html
index b8936f3..d126f1d 100644
--- a/web/static/app/templates/device.html
+++ b/web/static/app/templates/device.html
@@ -59,7 +59,13 @@
     <dd class="col-sm-9">{{ctrl.device.created_timestamp | date}}</dd>
 
     <dt class="col-sm-3">Name</dt>
-    <dd class="col-sm-9">&nbsp;{{ctrl.device.name}}</dd>
+    <dd class="col-sm-9">
+      &nbsp;{{ctrl.device.name}}
+
+      <a ng-click="ctrl.editDeviceAttribute('name')" class="pull-right">
+        <i class="fa fa-edit"/>
+      </a>
+    </dd>
 
     <dt class="col-sm-3">Description</dt>
     <dd class="col-sm-9">&nbsp;{{ctrl.device.description}}</dd>
diff --git a/web/templates/index.jade b/web/templates/index.jade
index 6dad0f5..1b2adbc 100644
--- a/web/templates/index.jade
+++ b/web/templates/index.jade
@@ -13,6 +13,8 @@ html(lang='en')
     link(rel="stylesheet", href="bower_components/bootstrap/dist/css/bootstrap.css")
     script(src="bower_components/angular/angular.js", type="application/javascript")
     script(src="bower_components/angular-route/angular-route.js", type="application/javascript")
+    script(src="bower_components/angular-bootstrap/ui-bootstrap.js", type="application/javascript")
+    script(src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js", type="application/javascript")
     script(src="bower_components/lodash/lodash.js", type="application/javascript")
     script(src="bower_components/moment/moment.js", type="application/javascript")
 
@@ -20,6 +22,8 @@ html(lang='en')
     script(src="app/app.js", type="application/javascript")
     link(href="app/app.css", rel="stylesheet")
 
+    link(rel="stylesheet", href="bower_components/font-awesome/css/font-awesome.min.css")
+
   body(ng-app="Diller")
     .container
       nav.navbar.navbar-dark.bg-inverse
-- 
cgit v1.2.3