fix up the modal view for use with angular js

This commit is contained in:
Stefan 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}, {
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', [

View File

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

View File

@ -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">