From d9881ecf65881319722a3ed89ac91b12f2e34109 Mon Sep 17 00:00:00 2001
From: Stefan Sterz <hi@sterzy.com>
Date: Sat, 27 Feb 2016 21:11:49 +0100
Subject: [PATCH] clean up and improve modal view

---
 nodejs/public/javascripts/angularApp.js | 73 +++++++++++++++----------
 nodejs/views/index.ejs                  | 32 +++++------
 2 files changed, 60 insertions(+), 45 deletions(-)

diff --git a/nodejs/public/javascripts/angularApp.js b/nodejs/public/javascripts/angularApp.js
index 3202d62..f614cb2 100644
--- a/nodejs/public/javascripts/angularApp.js
+++ b/nodejs/public/javascripts/angularApp.js
@@ -101,6 +101,13 @@ app.factory('arduino', ['$http', 'auth', function($http, auth){
     RCs: []
   };
 
+  o.emptyrc =  {
+      name:     '',
+      on_value: '',
+      off_value:'',
+      tristate: true
+  };
+
   o.getRCs = function () {
     return $http.get('/getRCs',{
       headers: {Authorization: 'Bearer '+auth.getToken()}
@@ -146,49 +153,35 @@ app.factory('arduino', ['$http', 'auth', function($http, auth){
   return o;
 }]);
 
-app.directive('modal', function() {
-  return {
-    restrict: 'E',
-    scope: {
-      show: '='
-    },
-    replace: true, 
-    transclude: true, 
-    link: function(scope, element, attrs) {
-      scope.dialogStyle = {};
-      if (attrs.width)
-        scope.dialogStyle.width = attrs.width;
-      if (attrs.height)
-        scope.dialogStyle.height = attrs.height;
-      scope.hideModal = function() {
-        scope.show = false;
-      };
-    },
-    templateUrl: '/modal.html'
-  };
-});
-
 app.controller('MainCtrl', [
   '$scope', 
   'arduino', 
   function ($scope, arduino){
-  
-  $scope.RCs = arduino.RCs;
+
+  $scope.RCs    = arduino.RCs;
   $scope.sendRC = arduino.sendRC;
   $scope.irTest = arduino.irTest;
+  $scope.newrc  = angular.copy(arduino.emptyrc);
 
   $scope.modal={
     shown: false
   };
 
-  $scope.toggleModal = function(rc) {
+  $scope.toggleModal = function() {
     $scope.modal.shown = !$scope.modal.shown;
-    if(rc) {rc.name = rc.on = rc.off = rc.dec = '';}
+    $scope.newrc = angular.copy(arduino.emptyrc);
   };
 
-  $scope.addRC = function(rc){
+  $scope.addRC = function(){
+    console.log($scope.newrc);
     $scope.modal.shown = !$scope.modal.shown;
-    rc.name = rc.on = rc.off = rc.dec = '';
+    $scope.newrc = angular.copy(arduino.emptyrc);
+  }
+
+  $scope.deleteRC = function(RC) {
+    $scope.newrc = RC;
+    $scope.modal.shown = !$scope.modal.shown;
+    console.log($scope.newrc);
   }
 
 }]);
@@ -224,4 +217,26 @@ function($scope, auth){
   $scope.isLoggedIn = auth.isLoggedIn;
   $scope.currentUser = auth.currentUser;
   $scope.logOut = auth.logOut;
-}]);
\ No newline at end of file
+}]);
+
+app.directive('modal', function() {
+  return {
+    restrict: 'E',
+    scope: {
+      show: '='
+    },
+    replace: true, 
+    transclude: true, 
+    link: function($scope, element, attrs) {
+      $scope.dialogStyle = {};
+      if (attrs.width)
+        $scope.dialogStyle.width = attrs.width;
+      if (attrs.height)
+        $scope.dialogStyle.height = attrs.height;
+      $scope.hideModal = function() {
+        $scope.show = false;
+      };
+    },
+    templateUrl: '/modal.html'
+  };
+});
\ No newline at end of file
diff --git a/nodejs/views/index.ejs b/nodejs/views/index.ejs
index c3f4c28..965f7f9 100644
--- a/nodejs/views/index.ejs
+++ b/nodejs/views/index.ejs
@@ -36,35 +36,35 @@
   <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">
+      <form ng-submit="addRC()" ng-model="newrc">
+        <input class="u-full-width" ng-model="newrc.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">
+            <input class="u-full-width" ng-model="newrc.on_value" placeholder="On Value" type="text">
           </div>
           <div class="six columns">
-            <input class="u-full-width" ng-model="rc.off" placeholder="Off Value" type="text">
+            <input class="u-full-width" ng-model="newrc.off_value" 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>      
+        <label>Is this a tristate switch? <input ng-model="newrc.tristate" type="checkbox" ></input></label> 
+        <button type="submit" class="button-primary">Add</button>
+        <button type="button" ng-click="toggleModal()" class="button">Cancel</button>      
       </form>
-      <button ng-click="toggleModal(rc)" class="button">Cancel</button>
     </modal>
 
     <table class="u-full-width">
       <thead>
         <th>RC Switches</th>
         <th style="text-align: right;">
-          <button ng-click='toggleModal()' class="sign">+</button>
+          <span class="symbol" ng-click='toggleModal()' >+</span>
         </th>
       </thead>
       <tbody>
         <tr ng-repeat="RC in RCs | orderBy:'switch_id'"> 
-            <td> {{RC.name}} </td>
-            <td>
-              <button ng-click="sendRC(RC)" ng-class="{'true':'button-primary','false':'button'}[RC.state]" type="submit" >Toggle RC</button>
-            </td>
+          <td><span ng-click="deleteRC(RC)" class="symbol">&#9776;</span> {{RC.name}} </td>
+          <td style="text-align: right;">
+            <button class="sign"  ng-click="sendRC(RC)" ng-class="{'true':'button-primary','false':'button'}[RC.state]" type="submit" >&#x23FB;</button>
+          </td>
         </tr>
       </tbody>
     </table>
@@ -75,10 +75,10 @@
   </script>
 
 <script type="text/ng-template" id="/modal.html">
-  <div class="modal" ng-show="show">
-    <div class="modal-overlay" ng-click="hideModal()"></div>
-    <div class="modal-dialog" ng-style="dialogStyle">
-      <div class="modal-dialog-content" ng-transclude></div>
+  <div class="ng-modal" ng-show="show" >
+    <div class="ng-modal-overlay" ng-click="hideModal()"></div>
+    <div class="ng-modal-dialog" ng-style="dialogStyle">
+      <div class="ng-modal-dialog-content" ng-transclude></div>
     </div>
   </div>
 </script>