From e11584012522623b2379cb00cde827dad086a9c9 Mon Sep 17 00:00:00 2001
From: Stefan Sterz <hi@sterzy.com>
Date: Thu, 25 Feb 2016 21:03:48 +0100
Subject: [PATCH] fix up the modal view for use with angular js

---
 nodejs/public/javascripts/angularApp.js | 17 ++++++++---
 nodejs/public/stylesheets/style.css     |  4 +++
 nodejs/views/index.ejs                  | 38 ++++++++++++-------------
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/nodejs/public/javascripts/angularApp.js b/nodejs/public/javascripts/angularApp.js
index 9ee2ed7..3202d62 100644
--- a/nodejs/public/javascripts/angularApp.js
+++ b/nodejs/public/javascripts/angularApp.js
@@ -114,7 +114,7 @@ app.factory('arduino', ['$http', 'auth', function($http, auth){
     return $http.post('/sendRC', {code}, {
       headers: {Authorization: 'Bearer '+auth.getToken()}
     }).success(function (data) {
-      RC.state = (RC.state) ? false : true;
+      RC.state = !RC.state;
     });
   }
 
@@ -177,11 +177,20 @@ app.controller('MainCtrl', [
   $scope.sendRC = arduino.sendRC;
   $scope.irTest = arduino.irTest;
 
-  $scope.modalShown = false;
-  $scope.toggleModal = function() {
-    $scope.modalShown = !$scope.modalShown;
+  $scope.modal={
+    shown: false
   };
 
+  $scope.toggleModal = function(rc) {
+    $scope.modal.shown = !$scope.modal.shown;
+    if(rc) {rc.name = rc.on = rc.off = rc.dec = '';}
+  };
+
+  $scope.addRC = function(rc){
+    $scope.modal.shown = !$scope.modal.shown;
+    rc.name = rc.on = rc.off = rc.dec = '';
+  }
+
 }]);
 
 app.controller('AuthCtrl', [
diff --git a/nodejs/public/stylesheets/style.css b/nodejs/public/stylesheets/style.css
index a63e25c..422d10f 100644
--- a/nodejs/public/stylesheets/style.css
+++ b/nodejs/public/stylesheets/style.css
@@ -8,6 +8,10 @@ td button, td .button {
   font-weight: 600;
 }
 
+.modal form {
+  display: inline;
+}
+
 /* Navigation */
 
 nav {
diff --git a/nodejs/views/index.ejs b/nodejs/views/index.ejs
index 8dea371..c3f4c28 100644
--- a/nodejs/views/index.ejs
+++ b/nodejs/views/index.ejs
@@ -33,7 +33,25 @@
     </div>
   </div>
 
-  <script type="text/ng-template" id="/home.html"> 
+  <script type="text/ng-template" id="/home.html" > 
+    <modal show="modal.shown" >
+      <h2>Add new RC Switch</h2>
+      <form ng-submit="addRC(rc)" ng-model="rc">
+        <input class="u-full-width" ng-model="rc.name" placeholder="Name" type="text">
+        <div class="row">
+          <div class="six columns">
+            <input class="u-full-width" ng-model="rc.on" placeholder="On Value" type="text">
+          </div>
+          <div class="six columns">
+            <input class="u-full-width" ng-model="rc.off" placeholder="Off Value" type="text">
+          </div>
+        </div>
+        <label>Is this a decimal switch? <input ng-model="rc.dec" type="checkbox" ></input></label> 
+        <button type="submit" class="button-primary">Add</button>      
+      </form>
+      <button ng-click="toggleModal(rc)" class="button">Cancel</button>
+    </modal>
+
     <table class="u-full-width">
       <thead>
         <th>RC Switches</th>
@@ -54,24 +72,6 @@
     <form ng-submit="irTest()" style="margin-top:30px;">
       <button type="submit" class="button-primary">IR</button>
     </form>
-  
-    <modal show="modalShown">
-          <h2>Add new RC Switch</h2>
-          <form ng-submit="addRC()">
-          <input class="u-full-width" placeholder="Name" type="text">
-          <div class="row">
-            <div class="six columns">
-              <input class="u-full-width" placeholder="On Value" type="text">
-            </div>
-            <div class="six columns">
-              <input class="u-full-width" placeholder="Off Value" type="text">
-            </div>
-          </div>
-          <label>Is this a decimal switch? <input type="checkbox" ></input></label> 
-          <button type="submit" ng-click="toggleModal()" class="button">Cancel</button>
-          <button type="submit" class="button-primary">Add</button>      
-          </form>
-    </modal>
   </script>
 
 <script type="text/ng-template" id="/modal.html">