clean up and improve modal view
This commit is contained in:
parent
1517ada85d
commit
d9881ecf65
2 changed files with 60 additions and 45 deletions
73
nodejs/public/javascripts/angularApp.js
vendored
73
nodejs/public/javascripts/angularApp.js
vendored
|
|
@ -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;
|
||||
}]);
|
||||
}]);
|
||||
|
||||
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'
|
||||
};
|
||||
});
|
||||
|
|
@ -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">☰</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" >⏻</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>
|
||||
|
|
|
|||
Reference in a new issue