sterzy/trev
Archived
1
1
Fork 0
Code Issues 7 Pull requests Releases Wiki Activity

clean up and improve modal view

Browse source
This commit is contained in:
Shannon Sterz 2016-02-27 21:11:49 +01:00
parent 1517ada85d
commit d9881ecf65
2 changed files with 60 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
nodejs/public/javascripts/angularApp.js vendored
View file

@ -101,6 +101,13 @@ app.factory('arduino', ['$http', 'auth', function($http, auth){
RCs: [] RCs: []
}; };
o.emptyrc = {
name: '',
on_value: '',
off_value:'',
tristate: true
};
o.getRCs = function () { o.getRCs = function () {
return $http.get('/getRCs',{ return $http.get('/getRCs',{
headers: {Authorization: 'Bearer '+auth.getToken()} headers: {Authorization: 'Bearer '+auth.getToken()}
@ -146,49 +153,35 @@ 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.sendRC = arduino.sendRC;
$scope.irTest = arduino.irTest; $scope.irTest = arduino.irTest;
$scope.newrc = angular.copy(arduino.emptyrc);
$scope.modal={ $scope.modal={
shown: false shown: false
}; };
$scope.toggleModal = function(rc) { $scope.toggleModal = function() {
$scope.modal.shown = !$scope.modal.shown; $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; $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);
} }
}]); }]);
@ -225,3 +218,25 @@ function($scope, auth){
$scope.currentUser = auth.currentUser; $scope.currentUser = auth.currentUser;
$scope.logOut = auth.logOut; $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'
};
});

30
nodejs/views/index.ejs
View file

@ -36,35 +36,35 @@
<script type="text/ng-template" id="/home.html" > <script type="text/ng-template" id="/home.html" >
<modal show="modal.shown" > <modal show="modal.shown" >
<h2>Add new RC Switch</h2> <h2>Add new RC Switch</h2>
<form ng-submit="addRC(rc)" ng-model="rc"> <form ng-submit="addRC()" ng-model="newrc">
<input class="u-full-width" ng-model="rc.name" placeholder="Name" type="text"> <input class="u-full-width" ng-model="newrc.name" placeholder="Name" type="text">
<div class="row"> <div class="row">
<div class="six columns"> <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>
<div class="six columns"> <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>
</div> </div>
<label>Is this a decimal switch? <input ng-model="rc.dec" type="checkbox" ></input></label> <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="submit" class="button-primary">Add</button>
<button type="button" ng-click="toggleModal()" class="button">Cancel</button>
</form> </form>
<button ng-click="toggleModal(rc)" class="button">Cancel</button>
</modal> </modal>
<table class="u-full-width"> <table class="u-full-width">
<thead> <thead>
<th>RC Switches</th> <th>RC Switches</th>
<th style="text-align: right;"> <th style="text-align: right;">
<button ng-click='toggleModal()' class="sign">+</button> <span class="symbol" ng-click='toggleModal()' >+</span>
</th> </th>
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat="RC in RCs | orderBy:'switch_id'"> <tr ng-repeat="RC in RCs | orderBy:'switch_id'">
<td> {{RC.name}} </td> <td><span ng-click="deleteRC(RC)" class="symbol">&#9776;</span> {{RC.name}} </td>
<td> <td style="text-align: right;">
<button ng-click="sendRC(RC)" ng-class="{'true':'button-primary','false':'button'}[RC.state]" type="submit" >Toggle RC</button> <button class="sign" ng-click="sendRC(RC)" ng-class="{'true':'button-primary','false':'button'}[RC.state]" type="submit" >&#x23FB;</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -75,10 +75,10 @@
</script> </script>
<script type="text/ng-template" id="/modal.html"> <script type="text/ng-template" id="/modal.html">
<div class="modal" ng-show="show"> <div class="ng-modal" ng-show="show" >
<div class="modal-overlay" ng-click="hideModal()"></div> <div class="ng-modal-overlay" ng-click="hideModal()"></div>
<div class="modal-dialog" ng-style="dialogStyle"> <div class="ng-modal-dialog" ng-style="dialogStyle">
<div class="modal-dialog-content" ng-transclude></div> <div class="ng-modal-dialog-content" ng-transclude></div>
</div> </div>
</div> </div>
</script> </script>