fix up the modal view for use with angular js

This commit is contained in:
Shannon Sterz 2016-02-25 21:03:48 +01:00
parent 60227ad7da
commit e115840125
3 changed files with 36 additions and 23 deletions

View file

@ -114,7 +114,7 @@ app.factory('arduino', ['$http', 'auth', function($http, auth){
return $http.post('/sendRC', {code}, { return $http.post('/sendRC', {code}, {
headers: {Authorization: 'Bearer '+auth.getToken()} headers: {Authorization: 'Bearer '+auth.getToken()}
}).success(function (data) { }).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.sendRC = arduino.sendRC;
$scope.irTest = arduino.irTest; $scope.irTest = arduino.irTest;
$scope.modalShown = false; $scope.modal={
$scope.toggleModal = function() { shown: false
$scope.modalShown = !$scope.modalShown;
}; };
$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', [ app.controller('AuthCtrl', [

View file

@ -8,6 +8,10 @@ td button, td .button {
font-weight: 600; font-weight: 600;
} }
.modal form {
display: inline;
}
/* Navigation */ /* Navigation */
nav { nav {

View file

@ -33,7 +33,25 @@
</div> </div>
</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"> <table class="u-full-width">
<thead> <thead>
<th>RC Switches</th> <th>RC Switches</th>
@ -54,24 +72,6 @@
<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"> <script type="text/ng-template" id="/modal.html">