<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.17" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script data-require="angular-ui-router@*" data-semver="0.2.10" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script data-require="angular-ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="sample">
<div ui-view="menu" ng-controller="MenuCtrl" id="navbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">sample</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li><a ui-sref="settings" href="#"><span class="glyphicon glyphicon-cog"></span></a>
<li><a ng-click="showInfo()" href="#"><span class="glyphicon glyphicon-info-sign"></span></a>
</li>
</ul>
</div>
<!-- /.container-fluid -->
</div>
<div ui-view="content"></div>
<script type="text/ng-template" id="info.html">
<div class="modal-body" >
<div class="modal-dialog modal-dialog-center">
<a ng-click="showAbout()"><span class="glyphicon glyphicon-info-sign"/> Info</a>
</div>
</div>
</script>
<script type="text/ng-template" id="login.html">
<form novalidate name="loginForm" class="form-signin" role="form">
<h2 class="form-signin-heading">Login</h2>
<input name="username" ng-model="user.username" type="text" class="form-control" placeholder="Username" required="true" autofocus="" >
<input name="password" ng-model="user.password" type="password" class="form-control" placeholder="Password" required="true" >
<button class="btn btn-lg btn-primary btn-block" ng-disabled="loginForm.$invalid" type="submit" ng-click="login()">Log in</button >
</form>
</script>
<script type="text/ng-template" id="settings.html">
<form novalidate name="connectionForm" class="form-signin" role="form">
<h2 class="form-signin-heading">Connection</h2>
<input name="host" ng-model="connectionSettings.host" type="url" class="form-control" placeholder="http://www" required="" autofocus="">
<input name="port" ng-model="connectionSettings.port" type="number" class="form-control" placeholder="8080" required="">
<input name="path" ng-model="connectionSettings.path" type="text" class="form-control" placeholder="/api" required="">
<h2 class="form-signin-heading">Feedback</h2>
<label class="checkbox">
<input name="feedback" ng-model="connectionSettings.feedback" type="checkbox">Sound and Vibration
</label>
<button ng-click="save()" ng-disabled="connectionForm.$invalid" class="btn btn-lg btn-primary btn-block" type="submit">Save</button>
</form>
</script>
</body>
</html>
angular.module('sample', ['ui.bootstrap', 'ui.router'])
.config(
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
views: {
'content': {
templateUrl: 'login.html'
}
}
})
.state('settings', {
url: '/settings',
views: {
'content': {
templateUrl: 'settings.html'
}
}
})
.state('login.info', {
url: '/info',
onEnter: function($stateParams, $state, $modal) {
$modal.open({
templateUrl: "info.html",
controller: ['$scope',
function($scope) {
$scope.showAbout = function() {
$scope.$dismiss();
};
}]
}).result.then(function(result) {
$state.transitionTo("login");
});
}
});
$urlRouterProvider.otherwise('/login');
})
.controller('MenuCtrl', function($scope, $modal, $state) {
$scope.$state = $state;
$scope.isCollapsed = true;
$scope.showInfo = function() {
$state.transitionTo('login.info',null,{location:false});
};
});
/* Styles go here */
body { padding-top: 200px; }