add modal view for adding a new rc switch

This commit is contained in:
Shannon Sterz 2016-02-25 19:41:28 +01:00
parent a85ae2fe31
commit 60227ad7da
4 changed files with 142 additions and 35 deletions

View file

@ -101,7 +101,7 @@ app.factory('arduino', ['$http', 'auth', function($http, auth){
RCs: [] RCs: []
}; };
o.getRCs = function ( ) { o.getRCs = function () {
return $http.get('/getRCs',{ return $http.get('/getRCs',{
headers: {Authorization: 'Bearer '+auth.getToken()} headers: {Authorization: 'Bearer '+auth.getToken()}
}).success(function(data) { }).success(function(data) {
@ -118,7 +118,26 @@ app.factory('arduino', ['$http', 'auth', function($http, auth){
}); });
} }
o.irTest = function ( ) { 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);
});
}
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',{ return $http.get('/irTest',{
headers: {Authorization: 'Bearer '+auth.getToken()} headers: {Authorization: 'Bearer '+auth.getToken()}
}); });
@ -127,19 +146,40 @@ app.factory('arduino', ['$http', 'auth', function($http, auth){
return o; 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', [ app.controller('MainCtrl', [
'$scope', '$scope',
'arduino', 'arduino',
function ($scope, arduino){ function ($scope, arduino){
$scope.RCs = arduino.RCs; $scope.RCs = arduino.RCs;
$scope.sendRC = arduino.sendRC;
$scope.irTest = arduino.irTest;
$scope.sendRC = function(RC){ $scope.modalShown = false;
arduino.sendRC(RC); $scope.toggleModal = function() {
}; $scope.modalShown = !$scope.modalShown;
$scope.irTest = function(){
arduino.irTest();
}; };
}]); }]);

View file

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

View file

@ -1,5 +1,4 @@
/*Custom CSS*/ /*Custom CSS*/
td button, td .button { td button, td .button {
margin: 0px; margin: 0px;
} }
@ -53,3 +52,43 @@ nav li img {
border-left: 1px solid #E1E1E1; border-left: 1px solid #E1E1E1;
color: #222; 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;
}

View file

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