add modal view for adding a new rc switch

nodejs/public/javascripts/angularApp.js

@@ -97,49 +97,89 @@ app.factory('auth', ['$http', '$window', function ($http, $window) {
 }]);
 
 app.factory('arduino', ['$http', 'auth', function($http, auth){
-    var o = {
-      RCs: []
-    };
+  var o = {
+    RCs: []
+  };
 
-    o.getRCs = function ( ) {
-      return $http.get('/getRCs',{
-        headers: {Authorization: 'Bearer '+auth.getToken()}
-      }).success(function(data) {
-        angular.copy(data, o.RCs);
-      });
-    }
+  o.getRCs = function () {
+    return $http.get('/getRCs',{
+      headers: {Authorization: 'Bearer '+auth.getToken()}
+    }).success(function(data) {
+      angular.copy(data, o.RCs);
+    });
+  }
 
-    o.sendRC = function (RC) {  
-      var code = (RC.state) ? RC.off_value : RC.on_value;
-      return $http.post('/sendRC', {code}, {
-        headers: {Authorization: 'Bearer '+auth.getToken()}
-      }).success(function (data) {
-        RC.state = (RC.state) ? false : true;
-      });
-    }
+  o.sendRC = function (RC) {  
+    var code = (RC.state) ? RC.off_value : RC.on_value;
+    return $http.post('/sendRC', {code}, {
+      headers: {Authorization: 'Bearer '+auth.getToken()}
+    }).success(function (data) {
+      RC.state = (RC.state) ? false : true;
+    });
+  }
 
-    o.irTest = function ( ) {
-      return $http.get('/irTest',{
-        headers: {Authorization: 'Bearer '+auth.getToken()}
-      });
-    }
+  o.addRC = function (RC) {
+    return $http.post('/addRC', RC, {
+      headers: {Authorization: 'Bearer '+auth.getToken()}
+    }).success(function (data) {
+      console.log(data);
+      RC.id = data.insertId;
+      o.RCs.push(RC);
+    });
+  }
 
-    return o;
+  o.deleteRC = function (RC) {
+    var id = RC.id;
+    return $http.post('/deleteRC', {id}, {
+      headers: {Authorization: 'Bearer '+auth.getToken()}
+    }).success(function (data) {
+      o.RCs.splice(o.RCs.indexOf(RC), 1);
+    });
+  }
+
+  o.irTest = function () {
+    return $http.get('/irTest',{
+      headers: {Authorization: 'Bearer '+auth.getToken()}
+    });
+  }
+
+  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.sendRC = arduino.sendRC;
+  $scope.irTest = arduino.irTest;
 
-  $scope.sendRC = function(RC){
-    arduino.sendRC(RC);
-  };
-
-  $scope.irTest = function(){
-      arduino.irTest();
+  $scope.modalShown = false;
+  $scope.toggleModal = function() {
+    $scope.modalShown = !$scope.modalShown;
   };
 
 }]);

nodejs/public/stylesheets/skeleton.css

@@ -49,7 +49,7 @@
 /* Grid
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .container {
-  position: relative;
+  /*position: relative;*/
   width: 100%;
   max-width: 960px;
   margin: 0 auto;

nodejs/public/stylesheets/style.css

@@ -1,5 +1,4 @@
 /*Custom CSS*/
-
 td button, td .button {
   margin: 0px;
 }
@@ -52,4 +51,44 @@ nav li img {
   text-transform: capitalize;
   border-left: 1px solid #E1E1E1;
   color: #222;
+}
+/* Extras */
+.sign{
+  margin-bottom: 0;
+  padding: 0 15px;
+  font-size: 12pt;
+}  
+
+/* Modal */
+.modal {
+  width: 85% !important;
+  max-width: 960px;
+}
+
+.modal-overlay {
+  position:absolute;
+  z-index:9999;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background-color:#000000;
+  opacity: 0.6;
+}
+.modal-dialog {
+  z-index:10000;
+  position: absolute;
+  width: 50%; 
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  background-color: #fff;
+  box-shadow: 4px 4px 80px #000;
+  border-radius: 5px;
+}
+.modal-dialog-content {
+  padding:10px;
+  text-align: left;
 }

nodejs/views/index.ejs

@@ -37,7 +37,9 @@
     <table class="u-full-width">
       <thead>
         <th>RC Switches</th>
-        <th>Function</th>
+        <th style="text-align: right;">
+          <button ng-click='toggleModal()' class="sign">+</button>
+        </th>
       </thead>
       <tbody>
         <tr ng-repeat="RC in RCs | orderBy:'switch_id'"> 
@@ -52,15 +54,41 @@
     <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">
+  <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>
+  </div>
+</script>
+
 <script type="text/ng-template" id="/register.html">
   <div ng-show="error">
     <span class="errorm">{{ error.message }}</span>
   </div>
 
-  <form ng-submit="register()"
-    style="margin-top:30px;">
+  <form ng-submit="register()" style="margin-top:30px;">
     <h3>Register</h3>
 
     <div class="row">