Currently I am trying to make my mobile app to be like, a default border around my button “OFF” when i go in my app. After “ON” button is being click, the border will be around my “ON” button, When i click “OFF” button, the border will change back to be around my “OFF” button.
HTML
<ion-view title="Single Projector Room" id="page9">
<ion-nav-buttons side="left">
<button class="button back-button buttons button-clear header-item" ng-click="goBack()">
<i class="icon ion-ios-arrow-back"> Back</i>
</button>
</ion-nav-buttons>
<ion-content padding="true" style="background: url(img/EDD79InSMCeYeMOSchjm_remote.jpg) no-repeat center;background-size:cover;" class="has-header">
<div class="row">
<div class="col"><br><br><br><br></div>
</div>
<div class="row">
<div class="col col-offset-5 col-30 text-center"><h4 style="color: #FFFFFF;">Single Projector Control</h4></div>
<div class="col col-30 text-center"><h4 style="color: #FFFFFF;">Screen Control</h4></div>
</div>
<div class="row">
<div class="col col-offset-5 col-30 text-center"><button class="button button-balanced button-large icon-right ion-power">On</button></div>
<div class="col col-30 text-center"><button class="button button-dark button-large icon-right ion-arrow-up-c">Up</button></div>
</div>
<div class="row">
<div class="col col-offset-5 col-30 text-center"><button class="button button-assertive button-large icon-right ion-android-cancel">Off</button></div>
<div class="col col-30 text-center"><button class="button button-dark button-large icon-right ion-arrow-down-c">Down</button></div>
</div>
<div class="row">
<div class="col"><br><br></div>
</div>
<div class="row">
<div class="col col-offset-5 col-30 text-center"><h4 style="color: #FFFFFF;">Mic Control</h4></div>
</div>
<div class="row">
<div class="col col-offset-5 col-30 text-center"><button class="button button-balanced button-large icon-right ion-power">On</button></div>
</div>
<div class="row">
<div class="col col-offset-5 col-30 text-center"><button class="button button-assertive button-large icon-right ion-android-cancel">Off</button></div>
</div>
</div>
</ion-content>
</ion-view>
controller.js
angular.module('app.controllers', [])
.controller("remoteCtrl", function($scope, $stateParams, $state, $ionicHistory) {
$scope.single = function() {
$state.go("singleProjectorRoom");
}
$scope.dual = function() {
$state.go("dualProjectorRoom");
}
$scope.myGoBack = function() {
$ionicHistory.goBack();
}
})
.controller('menuCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
.controller('loginCtrl', function($scope, $rootScope, $ionicHistory, sharedUtils, $state, $ionicSideMenuDelegate) {
$rootScope.extras = false; // For hiding the side bar and nav icon
// When the user logs out and reaches login page,
// we clear all the history and cache to prevent back link
$scope.$on('$ionicView.enter', function(ev) {
if(ev.targetScope !== $scope){
$ionicHistory.clearHistory();
$ionicHistory.clearCache();
}
});
//Check if user already logged in
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
//Removes back link to login page
$ionicHistory.nextViewOptions({
historyRoot: true
});
$ionicSideMenuDelegate.canDragContent(true); // Sets up the sideMenu dragable
$rootScope.extras = true;
sharedUtils.hideLoading();
$state.go('tabs.home', {}, {location: "replace"});
}
});
$scope.loginEmail = function(formName,cred) {
if(formName.$valid) { // Check if the form data is valid or not
sharedUtils.showLoading(); //starts the loading popup
//Email Login via Firebase
firebase.auth().signInWithEmailAndPassword(cred.email,cred.password).then(function(result) {
// You dont need to save the users session in your local session or cookies. Firebase handles it.
// You only need to :
// 1. clear the login page history from the history stack so that you cant come back
// 2. Set rootScope.extra;
// 3. Turn off the loading
// 4. Got to menu page
$ionicHistory.nextViewOptions({
historyRoot: true //1
});
$rootScope.extras = true; //2
sharedUtils.hideLoading(); //3
$state.go('tabs.home', {}, {location: "replace"}); //4
},
function(error) {
sharedUtils.hideLoading();
sharedUtils.showAlert("ERROR!","Authentication Error");
}
);
}else{
sharedUtils.showAlert("ERROR!","Enter in email format");
}
};
})
.controller("logoutCtrl", function($scope, $state, $ionicPopup, $rootScope, sharedUtils, $ionicHistory,$ionicSideMenuDelegate, intentService, errorMessageService) {
$scope.logoutNo = function() {
intentService.setloginFlagTrue();
$state.go("tabs.home");
console.log("Logout is reverted.The flag is now set as " + intentService.getloginFlagStatus());
}
$scope.logoutYes = function() {
sharedUtils.showLoading();
// Main Firebase logout
firebase.auth().signOut().then(function() {
errorMessageService.write("Thank you","You have logout successfully.");
$ionicSideMenuDelegate.canDragContent(false); // To remove the sidemenu white space
$ionicHistory.nextViewOptions({
historyRoot: true
});
$rootScope.extras = false;
sharedUtils.hideLoading();
$state.go('login', {}, {location: "replace"});
}, function(error) {
sharedUtils.showAlert("Error","Logout Failed")
});
}
})
.controller('singleProjectorRoomCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
$scope.goBack = function() {
window.history.back();
}
}])
.controller('dualProjectorRoomCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
$scope.goBack = function() {
window.history.back();
}
}])
.controller('homeCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
