From 141cb7cba5c36a9c5415772e2de9823f927d7abb Mon Sep 17 00:00:00 2001
From: Trygve Laugstøl <trygvis@inamo.no>
Date: Sat, 31 Oct 2015 20:04:06 +0100
Subject: web: o Better form interaction: enter to submit and autofocus on the
 field.

---
 web/static/app/app.js                              |  2 -
 .../app/templates/device-edit-attribute.modal.html | 48 ++++++++++++----------
 web/static/app/templates/device.html               |  6 ++-
 3 files changed, 30 insertions(+), 26 deletions(-)

(limited to 'web/static/app')

diff --git a/web/static/app/app.js b/web/static/app/app.js
index fedfb54..a76aa33 100644
--- a/web/static/app/app.js
+++ b/web/static/app/app.js
@@ -20,8 +20,6 @@
           ctrl.label = attributeName.substr(0, 1).toUpperCase() + attributeName.substr(1);
           ctrl.value = outer.device[attributeName];
 
-          ctrl.error = 'fail';
-
           ctrl.update = function () {
             DillerRpc.patchDevice(outer.device.id, {attribute: attributeName, value: ctrl.value})
               .then(function (res) {
diff --git a/web/static/app/templates/device-edit-attribute.modal.html b/web/static/app/templates/device-edit-attribute.modal.html
index fc22d7b..10314e5 100644
--- a/web/static/app/templates/device-edit-attribute.modal.html
+++ b/web/static/app/templates/device-edit-attribute.modal.html
@@ -1,28 +1,32 @@
-<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">
-  <form>
+<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" style="text-transform: capitalize">{{ctrl.label}}</label>
-      <input type="email" class="form-control" id="attribute" ng-model="ctrl.value"/>
+      <input type="text" class="form-control" id="attribute" autofocus
+             ng-model="ctrl.value"/>
     </fieldset>
-  </form>
-</div>
-<div class="modal-footer">
+  </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="button" class="btn btn-primary" ng-click="ctrl.update()">Update</button>
+    <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>
-</div>
+</form>
diff --git a/web/static/app/templates/device.html b/web/static/app/templates/device.html
index d1fb6f9..66b5e4d 100644
--- a/web/static/app/templates/device.html
+++ b/web/static/app/templates/device.html
@@ -56,8 +56,10 @@
 
   <dl class="dl-horizontalX">
     <dt class="col-sm-3">Created</dt>
-    <dd class="col-sm-9">&nbsp;
-      {{ctrl.device.created_timestamp | date}}</dd>
+    <dd class="col-sm-9">
+      {{ctrl.device.created_timestamp | date}}
+      &nbsp;
+    </dd>
 
     <dt class="col-sm-3">Name</dt>
     <dd class="col-sm-9">
-- 
cgit v1.2.3