Skip to content
This repository was archived by the owner on Jul 20, 2023. It is now read-only.

Commit f20967a

Browse files
bstaijenbstaijen
committed
added loading indicators
1 parent f29aaab commit f20967a

File tree

14 files changed

+108
-21
lines changed

14 files changed

+108
-21
lines changed

‎webserver/webapp/assets/css/style.css‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,12 @@ body {
8383
border: 1px solid #F2F2F2;
8484
margin: 0 auto;
8585
}
86-
.comment-box button{
86+
.comment-box button, .comment-box i{
8787
float: right;
8888
letter-spacing: 0.3px;
8989
margin-right: 9px;
9090
margin-top: 9px;
91+
margin-bottom: 9px;
9192
padding: 6px 15px;
9293
}
9394

@@ -187,4 +188,21 @@ body {
187188
}
188189
.pointer {
189190
cursor:pointer;
191+
}
192+
.loading{
193+
background: rgba(0,0,0,0.08) url('../ajax-loader.gif') no-repeat center center;
194+
position: absolute;
195+
top: 0;
196+
left: 0;
197+
width: 100%;
198+
height: 100%;
199+
z-index: 99999;
200+
}
201+
.fa-loading{
202+
display: inline-block;
203+
background: url('../ajax-loader.gif') no-repeat;
204+
background-size: 30px 30px;
205+
width: 30px;
206+
height: 30px;
207+
z-index: 99999;
190208
}

‎webserver/webapp/controllers/HomeController.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,14 @@ app.controller('HomeController', function ($scope, ApiService) {
1111
// contains error messages
1212
$scope.errors = [];
1313

14+
// boolean for show a loading indicator
15+
$scope.photosLoading = true;
16+
1417
// load photos
1518
getPhotos();
1619
function getPhotos() {
20+
$scope.photosLoading = true;
21+
1722
var page = $scope.page;
1823
var itemsPerPage = 10;
1924
var offset = (page - 1) * itemsPerPage;
@@ -24,15 +29,18 @@ app.controller('HomeController', function ($scope, ApiService) {
2429

2530
$scope.hasMorePictures = (result.length == itemsPerPage);
2631

27-
2832
$scope.photos = $.merge($scope.photos, result);
2933

34+
$scope.photosLoading = false;
35+
3036
}, function (error) {
3137
console.error(error);
3238

3339
if (error.data == null && error.status == -1) {
3440
$scope.errors.push("Error connecting to API. Maybe resource is offline?");
3541
}
42+
43+
$scope.photosLoading = false;
3644
}
3745
);
3846
}
@@ -42,4 +50,5 @@ app.controller('HomeController', function ($scope, ApiService) {
4250
$scope.page = $scope.page + 1;
4351
getPhotos();
4452
}
53+
4554
});

‎webserver/webapp/controllers/HotController.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,14 @@ app.controller('HotController', function ($scope, ApiService) {
1111
// contains error messages
1212
$scope.errors = [];
1313

14+
// boolean for show a loading indicator
15+
$scope.photosLoading = true;
16+
1417
// load photos
1518
getPhotos();
1619
function getPhotos() {
20+
$scope.photosLoading = true;
21+
1722
var page = $scope.page;
1823
var itemsPerPage = 10;
1924
var offset = (page - 1) * itemsPerPage;
@@ -26,12 +31,16 @@ app.controller('HotController', function ($scope, ApiService) {
2631

2732
$scope.photos = $.merge($scope.photos, result);
2833

34+
$scope.photosLoading = false;
35+
2936
}, function (error) {
3037
console.error(error);
3138

3239
if (error.data == null && error.status == -1) {
3340
$scope.errors.push("Error connecting to API. Maybe resource is offline?");
3441
}
42+
43+
$scope.photosLoading = false;
3544
}
3645
);
3746
}

‎webserver/webapp/controllers/TopRatedController.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,14 @@ app.controller('TopRatedController', function ($scope, ApiService) {
1111
// contains error messages
1212
$scope.errors = [];
1313

14+
// boolean for show a loading indicator
15+
$scope.photosLoading = true;
16+
1417
// load photos
1518
getPhotos();
1619
function getPhotos() {
20+
$scope.photosLoading = true;
21+
1722
var page = $scope.page;
1823
var itemsPerPage = 10;
1924
var offset = (page - 1) * itemsPerPage;
@@ -26,12 +31,16 @@ app.controller('TopRatedController', function ($scope, ApiService) {
2631

2732
$scope.photos = $.merge($scope.photos, result);
2833

34+
$scope.photosLoading = false;
35+
2936
}, function (error) {
3037
console.error(error);
3138

3239
if (error.data == null && error.status == -1) {
3340
$scope.errors.push("Error connecting to API. Maybe resource is offline?");
3441
}
42+
43+
$scope.photosLoading = false;
3544
}
3645
);
3746
}

‎webserver/webapp/controllers/UploadController.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,29 @@ app.controller('UploadController', function ($scope, $window, LocalStorage, ApiS
88

99
$scope.error = "";
1010
$scope.successMessage = "";
11+
$scope.showIsUploading = false;
1112

1213
$scope.submit = function () {
14+
$scope.error = "";
15+
$scope.successMessage = "";
16+
1317
if (!$scope.title) {
1418
$scope.error = "title is mandatory";
1519
return;
1620
}
17-
21+
$scope.showIsUploading = true;
1822
var user = LocalStorage.getUser();
1923

2024
ApiService.upload(user.id, $scope.file, $scope.title).then(
2125
function (resp) {
2226
$scope.title = "";
2327
$scope.file = null;
2428
$scope.successMessage = "Image successfully uploaded.";
29+
$scope.showIsUploading = false;
2530
}, function (resp) {
2631
console.log('Error status: ' + resp.status);
2732
$scope.error = "Error uploading file.";
33+
$scope.showIsUploading = false;
2834
}, function (evt) {
2935
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
3036
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);

‎webserver/webapp/controllers/UserController.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ app.controller('UserController', function ($scope, $window, LocalStorage, ApiSer
2020
$scope.votesTabVisible = false;
2121
$scope.photosTabVisible = true;
2222

23+
$scope.showLoading = false;
24+
2325
// To load the picture on startup
2426
getPhotos();
2527

@@ -69,20 +71,24 @@ app.controller('UserController', function ($scope, $window, LocalStorage, ApiSer
6971
};
7072

7173
function getComments() {
74+
$scope.showLoading = true;
7275
ApiService.getCommentsFromUser().then(
7376
function (response) {
7477
console.info(response);
7578
if (response.result) {
7679
$scope.comment_tupel = response.result;
7780
}
81+
$scope.showLoading = false;
7882
}, function (error) {
7983
console.error(error);
84+
$scope.showLoading = false;
8085
}
8186
)
8287
}
8388

8489

8590
function getPhotos() {
91+
$scope.showLoading = true;
8692

8793
var page = $scope.photo_pages;
8894
var itemsPerPage = 10;
@@ -96,26 +102,32 @@ app.controller('UserController', function ($scope, $window, LocalStorage, ApiSer
96102
if (response) {
97103
$scope.photos = response;
98104
}
105+
$scope.showLoading = false;
99106
}, function (error) {
100107
console.error(error);
108+
$scope.showLoading = false;
101109
}
102110
);
103111
}
104112

105113
function getVotes() {
114+
$scope.showLoading = true;
106115
ApiService.getTheVotesFromUser().then(
107116
function (response) {
108117
console.info(response);
109118
if (response.result) {
110119
$scope.voted_photos = response.result;
111120
}
121+
$scope.showLoading = false;
112122
}, function (error) {
113123
console.error(error);
124+
$scope.showLoading = false;
114125
}
115126
)
116127
}
117128

118129
$scope.deleteComment = function(commentID) {
130+
$scope.showLoading = true;
119131
ApiService.deleteComment(commentID).then(
120132
function(response){
121133
console.info(response);
@@ -124,16 +136,18 @@ app.controller('UserController', function ($scope, $window, LocalStorage, ApiSer
124136
if (tupel.comment.id === commentID) {
125137
$scope.comment_tupel.splice(index, 1);
126138
}
127-
})
128-
139+
});
140+
$scope.showLoading = false;
129141
},
130142
function(error){
131143
console.error(error);
144+
$scope.showLoading = false;
132145
}
133146
);
134147
};
135148

136149
$scope.deletePhoto = function(photoID) {
150+
$scope.showLoading = true;
137151
ApiService.deletePhoto(photoID).then(
138152
function(response){
139153
console.info(response);
@@ -143,10 +157,11 @@ app.controller('UserController', function ($scope, $window, LocalStorage, ApiSer
143157
$scope.photos.splice(index, 1);
144158
}
145159
})
146-
160+
$scope.showLoading = false;
147161
},
148162
function(error){
149163
console.error(error);
164+
$scope.showLoading = false;
150165
}
151166
);
152167
};

‎webserver/webapp/directives/postDirective.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ app.directive('post', function (LocalStorage, ApiService, $uibModal, $location)
77
templateUrl: 'directives/postView.html',
88
controller: function ($scope) {
99

10+
$scope.commentLoading = false;
11+
$scope.voteLoading = false;
1012
$scope.showMessages = false;
1113
$scope.page = 1;
1214

@@ -68,7 +70,7 @@ app.directive('post', function (LocalStorage, ApiService, $uibModal, $location)
6870
showSignInRequiredModal();
6971
return;
7072
}
71-
73+
$scope.voteLoading = true;
7274
ApiService.upvote(usr.id, photo.id).then(function (resp) {
7375
// If this is the first vote from this user then increase the number of total votes.
7476
if (!photo.downvote && !photo.upvote) {
@@ -85,9 +87,10 @@ app.directive('post', function (LocalStorage, ApiService, $uibModal, $location)
8587
// Let angular know which button to show on page
8688
photo.downvote = false;
8789
photo.upvote = true;
88-
90+
$scope.voteLoading = false;
8991
}, function (error) {
9092
console.error(error);
93+
$scope.voteLoading = false;
9194
});
9295

9396
};
@@ -103,7 +106,7 @@ app.directive('post', function (LocalStorage, ApiService, $uibModal, $location)
103106
showSignInRequiredModal();
104107
return;
105108
}
106-
109+
$scope.voteLoading = true;
107110
ApiService.downvote(usr.id, photo.id).then(function (resp) {
108111
// If this is the first vote from this user then increase the number of total votes.
109112
if (!photo.downvote && !photo.upvote) {
@@ -120,9 +123,10 @@ app.directive('post', function (LocalStorage, ApiService, $uibModal, $location)
120123
// Let angular know which button to show on page
121124
photo.upvote = false;
122125
photo.downvote = true;
123-
126+
$scope.voteLoading = false;
124127
}, function (error) {
125128
console.error(error);
129+
$scope.voteLoading = false;
126130
});
127131
};
128132

@@ -132,7 +136,7 @@ app.directive('post', function (LocalStorage, ApiService, $uibModal, $location)
132136
showSignInRequiredModal();
133137
return;
134138
}
135-
139+
$scope.commentLoading = true;
136140
ApiService.comment(usr.id, photo.id, $scope.comment_text).then(
137141
function (response) {
138142
console.info(response);
@@ -141,9 +145,11 @@ app.directive('post', function (LocalStorage, ApiService, $uibModal, $location)
141145
if ($scope.photo && $scope.photo.comments) {
142146
$scope.photo.comments.push(response);
143147
}
148+
$scope.commentLoading = false;
144149
},
145150
function (error) {
146151
console.error(error);
152+
$scope.commentLoading = false;
147153
}
148154
);
149155
}

‎webserver/webapp/directives/postView.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
<i class="fa fa-3x fa-comment-o"></i>
1818
</button>
1919
</div>
20+
<div class="text-center">
21+
<i class="fa"></i><i ng-show="voteLoading" class="fa fa-loading"></i>
22+
</div>
2023
<div class="panel-body text-center">
2124
<span class="text-muted">{{photo.totalVotes || 0}} votes - {{calcPerc(photo)}}</span><br>
2225
<span class="text-muted">{{photo.upvote_count || 0}} <i class="fa fa-thumbs-o-up"></i> - {{photo.downvote_count || 0}} <i class="fa fa-thumbs-o-down"></i> - {{photo.comment_count || 0}} <i class="fa fa-comment-o"></i></span>
@@ -25,11 +28,12 @@
2528
<div class="col-md-3"></div>
2629
<div class="col-md-6">
2730
<div class="comment-box">
28-
<textarea maxlength="140" ng-model="comment_text" placeholder="Leave a nice comment :)"></textarea>
29-
<button class="btn btn-success" ng-click="comment(photo)">Send</button>
31+
<textarea maxlength="255" ng-model="comment_text" placeholder="Leave a nice comment :) (max 255 chars)"></textarea>
32+
<button class="btn btn-success" ng-click="comment(photo)">Send</button><i ng-show="commentLoading" class="fa fa-loading"></i>
33+
<div class="clearfix"></div>
3034
</div>
3135
<div class="clearfix"></div>
32-
<table class="table table-striped mt10">
36+
<table class="table table-striped">
3337
<tbody>
3438
<tr ng-repeat="comment in photo.comments | orderBy:'createdAt':true ">
3539
<td> {{comment.username}} - {{comment.comment}}

‎webserver/webapp/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525

2626
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans"/>
27-
<link rel="shortcut icon" href="https://mariadb.com/sites/default/files/favicon.png" type="image/png">
27+
<link rel="shortcut icon" href="assets/favicon.png" type="image/png">
2828
</head>
2929
<body>
3030
<nav class="navbar navbar-mariadb navbar-fixed-top" ng-controller="NavController" role="navigation">

‎webserver/webapp/view/HomeView.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
<p ng-show="photos.length < 1" class="text-info text-center fs17">No photo's available.</p>
2-
<post ng-repeat="photo in photos" photo="photo"></post>
1+
<p ng-show="photosLoading" class="loading"></p>
2+
<p ng-show="photos.length < 1 && !photosLoading" class="text-info text-center fs17">There are no photos..</p>
3+
<post class="animated fadeInDown" ng-repeat="photo in photos" photo="photo"></post>
34
<div ng-show="hasMorePictures && photos.length > 0" class="btn btn-success btn-block animated fadeIn"
45
ng-click="loadNext()">Load more
56
</div>

0 commit comments

Comments
 (0)