Skip to content

Commit 8eb18ed

Browse files
Simon Hosimonhoibm
Simon Ho
authored and
simonhoibm
committed
Create an AngularJS client - No lb-services.js 
1 parent 69e0b32 commit 8eb18ed

16 files changed

+30558
-4
lines changed

‎client/css/style.css

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/*global*/
2+
* {
3+
margin:0;
4+
padding:0;
5+
}
6+
body {
7+
font-family:'courier new';
8+
font-size:1rem;
9+
}
10+
button {
11+
background:#eee;
12+
border:0;
13+
color:#777;
14+
cursor:pointer;
15+
font-family:'courier new';
16+
font-size:1rem;
17+
padding:.5rem;
18+
}
19+
button:active {
20+
background:#ddd;
21+
}
22+
[disabled] {
23+
background:#eee;
24+
color:#ccc;
25+
}
26+
fieldset {
27+
color:#777;
28+
padding:1rem;
29+
}
30+
fieldset legend {
31+
border:1px solid #777;
32+
padding:0 .5rem;
33+
}
34+
label {
35+
display:inline-block;
36+
text-align:right;
37+
vertical-align:middle;
38+
width:200px;
39+
}
40+
select {
41+
background:#ddd;
42+
text-indent: 0.01px;
43+
text-overflow: "";
44+
}
45+
p {
46+
padding:1rem;
47+
}
48+
/*header*/
49+
body > header {
50+
border-bottom:1px solid #ccc;
51+
}
52+
body > header h1 {
53+
font-size:2rem;
54+
padding:1rem 1rem 0 1rem;
55+
}
56+
body > header h2 {
57+
font-size:1rem;
58+
padding:0 1rem;
59+
}
60+
/*nav*/
61+
body > header nav {
62+
padding:1rem;
63+
}
64+
body > header nav li {
65+
display:inline-block;
66+
padding-bottom:.5rem;
67+
}
68+
body > header nav li a {
69+
color:#777;
70+
padding:.5rem;
71+
text-decoration:none;
72+
}
73+
body > header nav li a.active {
74+
background:#eee;
75+
}
76+
/*main*/
77+
main section {
78+
padding:1rem;
79+
}
80+
main section article {
81+
padding-bottom:2rem;
82+
}
83+
main section article h1 {
84+
font-size:1.5rem;
85+
}
86+
main section article h2 {
87+
font-size:1rem;
88+
margin-bottom:1rem;
89+
}
90+
/*main form*/
91+
main input,
92+
select,
93+
textarea {
94+
background:#ddd;
95+
border:0;
96+
display:inline-block;
97+
font-family:'courier new';
98+
margin-bottom:1rem;
99+
padding:.5rem;
100+
vertical-align:middle;
101+
}
102+
main select,
103+
textarea {
104+
width:300px;
105+
}

‎client/index.html

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,47 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="app">
23
<head>
3-
<title>LoopBack</title>
4+
<meta charset="utf-8">
5+
<title>loopback-getting-started-intermediate</title>
6+
<link href="css/style.css" rel="stylesheet">
47
</head>
58
<body>
6-
<h1>LoopBack Rocks!</h1>
7-
<p>Hello World... </p>
9+
<header>
10+
<h1>Coffee shop reviews</h1>
11+
<h2 ng-show="currentUser">Hello {{currentUser.email}}</h2>
12+
<nav>
13+
<ul>
14+
<li>
15+
<a ui-sref="all-reviews" ui-sref-active="active">All reviews</a>
16+
</li>
17+
<li ng-hide="currentUser">
18+
<a ui-sref="sign-up" ui-sref-active="active">Sign up</a>
19+
</li>
20+
<li ng-show="currentUser">
21+
<a ui-sref="my-reviews" ui-sref-active="active">My Reviews</a>
22+
</li>
23+
<li ng-show="currentUser">
24+
<a ui-sref="add-review" ui-sref-active="active">Add Review</a>
25+
</li>
26+
<li ng-hide="currentUser">
27+
<a ui-sref="login" ui-sref-active="active">Log in</a>
28+
</li>
29+
<li ng-show="currentUser">
30+
<a ui-sref="logout" ui-sref-active="active">Log out</a>
31+
</li>
32+
</ul>
33+
</nav>
34+
</header>
35+
36+
<main ui-view></main>
37+
38+
<script src="vendor/angular.js"></script>
39+
<script src="vendor/angular-resource.js"></script>
40+
<script src="vendor/angular-ui-router.js"></script>
41+
<script src="js/app.js"></script>
42+
<script src="js/services/lb-services.js"></script>
43+
<script src="js/controllers/auth.js"></script>
44+
<script src="js/controllers/review.js"></script>
45+
<script src="js/services/auth.js"></script>
846
</body>
947
</html>

‎client/js/app.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
angular
2+
.module('app', [
3+
'ui.router',
4+
'lbServices'
5+
])
6+
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
7+
$urlRouterProvider) {
8+
$stateProvider
9+
.state('add-review', {
10+
url: '/add-review',
11+
templateUrl: 'views/review-form.html',
12+
controller: 'AddReviewController',
13+
authenticate: true
14+
})
15+
.state('all-reviews', {
16+
url: '/all-reviews',
17+
templateUrl: 'views/all-reviews.html',
18+
controller: 'AllReviewsController'
19+
})
20+
.state('edit-review', {
21+
url: '/edit-review/:id',
22+
templateUrl: 'views/review-form.html',
23+
controller: 'EditReviewController',
24+
authenticate: true
25+
})
26+
.state('delete-review', {
27+
url: '/delete-review/:id',
28+
controller: 'DeleteReviewController',
29+
authenticate: true
30+
})
31+
.state('forbidden', {
32+
url: '/forbidden',
33+
templateUrl: 'views/forbidden.html',
34+
})
35+
.state('login', {
36+
url: '/login',
37+
templateUrl: 'views/login.html',
38+
controller: 'AuthLoginController'
39+
})
40+
.state('logout', {
41+
url: '/logout',
42+
controller: 'AuthLogoutController'
43+
})
44+
.state('my-reviews', {
45+
url: '/my-reviews',
46+
templateUrl: 'views/my-reviews.html',
47+
controller: 'MyReviewsController',
48+
authenticate: true
49+
})
50+
.state('sign-up', {
51+
url: '/sign-up',
52+
templateUrl: 'views/sign-up-form.html',
53+
controller: 'SignUpController',
54+
})
55+
.state('sign-up-success', {
56+
url: '/sign-up/success',
57+
templateUrl: 'views/sign-up-success.html'
58+
});
59+
$urlRouterProvider.otherwise('all-reviews');
60+
}])
61+
.run(['$rootScope', '$state', function($rootScope, $state) {
62+
$rootScope.$on('$stateChangeStart', function(event, next) {
63+
// redirect to login page if not logged in
64+
if (next.authenticate && !$rootScope.currentUser) {
65+
event.preventDefault(); //prevent current page from loading
66+
$state.go('forbidden');
67+
}
68+
});
69+
}]);

‎client/js/controllers/auth.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
angular
2+
.module('app')
3+
.controller('AuthLoginController', ['$scope', 'AuthService', '$state',
4+
function($scope, AuthService, $state) {
5+
$scope.user = {
6+
email: 'foo@bar.com',
7+
password: 'foobar'
8+
};
9+
10+
$scope.login = function() {
11+
AuthService.login($scope.user.email, $scope.user.password)
12+
.then(function() {
13+
$state.go('add-review');
14+
});
15+
};
16+
}])
17+
.controller('AuthLogoutController', ['$scope', 'AuthService', '$state',
18+
function($scope, AuthService, $state) {
19+
AuthService.logout()
20+
.then(function() {
21+
$state.go('all-reviews');
22+
});
23+
}])
24+
.controller('SignUpController', ['$scope', 'AuthService', '$state',
25+
function($scope, AuthService, $state) {
26+
$scope.user = {
27+
email: 'baz@qux.com',
28+
password: 'bazqux'
29+
};
30+
31+
$scope.register = function() {
32+
AuthService.register($scope.user.email, $scope.user.password)
33+
.then(function() {
34+
$state.transitionTo('sign-up-success');
35+
});
36+
};
37+
}]);

‎client/js/controllers/review.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
angular
2+
.module('app')
3+
.controller('AllReviewsController', ['$scope', 'Review', function($scope,
4+
Review) {
5+
$scope.reviews = Review.find({
6+
filter: {
7+
include: [
8+
'coffeeShop',
9+
'reviewer'
10+
]
11+
}
12+
});
13+
}])
14+
.controller('AddReviewController', ['$scope', 'CoffeeShop', 'Review',
15+
'$state', function($scope, CoffeeShop, Review, $state) {
16+
$scope.action = 'Add';
17+
$scope.coffeeShops = [];
18+
$scope.selectedShop;
19+
$scope.review = {};
20+
$scope.isDisabled = false;
21+
22+
CoffeeShop
23+
.find()
24+
.$promise
25+
.then(function(coffeeShops) {
26+
$scope.coffeeShops = coffeeShops;
27+
$scope.selectedShop = $scope.selectedShop || coffeeShops[0];
28+
});
29+
30+
$scope.submitForm = function() {
31+
Review
32+
.create({
33+
rating: $scope.review.rating,
34+
comments: $scope.review.comments,
35+
coffeeShopId: $scope.selectedShop.id
36+
})
37+
.$promise
38+
.then(function() {
39+
$state.go('all-reviews');
40+
});
41+
};
42+
}])
43+
.controller('DeleteReviewController', ['$scope', 'Review', '$state',
44+
'$stateParams', function($scope, Review, $state, $stateParams) {
45+
Review
46+
.deleteById({ id: $stateParams.id })
47+
.$promise
48+
.then(function() {
49+
$state.go('my-reviews');
50+
});
51+
}])
52+
.controller('EditReviewController', ['$scope', '$q', 'CoffeeShop', 'Review',
53+
'$stateParams', '$state', function($scope, $q, CoffeeShop, Review,
54+
$stateParams, $state) {
55+
$scope.action = 'Edit';
56+
$scope.coffeeShops = [];
57+
$scope.selectedShop;
58+
$scope.review = {};
59+
$scope.isDisabled = true;
60+
61+
$q
62+
.all([
63+
CoffeeShop.find().$promise,
64+
Review.findById({ id: $stateParams.id }).$promise
65+
])
66+
.then(function(data) {
67+
var coffeeShops = $scope.coffeeShops = data[0];
68+
$scope.review = data[1];
69+
$scope.selectedShop;
70+
71+
var selectedShopIndex = coffeeShops
72+
.map(function(coffeeShop) {
73+
return coffeeShop.id;
74+
})
75+
.indexOf($scope.review.coffeeShopId);
76+
$scope.selectedShop = coffeeShops[selectedShopIndex];
77+
});
78+
79+
$scope.submitForm = function() {
80+
$scope.review.coffeeShopId = $scope.selectedShop.id;
81+
$scope.review
82+
.$save()
83+
.then(function(review) {
84+
$state.go('all-reviews');
85+
});
86+
};
87+
}])
88+
.controller('MyReviewsController', ['$scope', 'Review', '$rootScope',
89+
function($scope, Review, $rootScope) {
90+
$scope.reviews = Review.find({
91+
filter: {
92+
where: {
93+
publisherId: $rootScope.currentUser.id
94+
},
95+
include: [
96+
'coffeeShop',
97+
'reviewer'
98+
]
99+
}
100+
});
101+
}]);

0 commit comments

Comments
 (0)