Skip to content

Commit

Permalink
Merge 26d02b2 into b900880
Browse files Browse the repository at this point in the history
  • Loading branch information
dikaeinstein committed Jul 24, 2018
2 parents b900880 + 26d02b2 commit ceab766
Show file tree
Hide file tree
Showing 9 changed files with 258 additions and 23 deletions.
1 change: 1 addition & 0 deletions app/controllers/game.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const leaderboard = (req, res, next) => Game.aggregate(gamesWonQuery())
error.status = 404;
return next(error);
}

return res.status(200).json({
status: 'success',
games,
Expand Down
1 change: 1 addition & 0 deletions app/views/includes/foot.jade
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ script(type='text/javascript', src='/js/init.js')

// Application components
script(type='text/javascript', src='/js/directives/profile.js')
script(type='text/javascript', src='/js/directives/isLoading.js')

//Introjs
script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js')
Expand Down
95 changes: 95 additions & 0 deletions frontend-test/angular/dashboard-controller.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/* eslint prefer-arrow-callback: 0, func-names: 0, no-undef: 0 */

describe('DashboardController', function () {
let $scope, $rootScope, $controller, DashboardService;
const flag = 'success';
const leaderBoardGames = [
{
rank: '1',
gamesWon: 2,
username: 'Nkemjiks',
},
{
rank: '2',
gamesWon: 3,
username: 'Dikaeinstein',
},
];

const gamelogGames = [
{
players: [
{ username: 'Nkemjiks' },
{ username: 'Dikaeinstein' }
],
meta: {
gameWinner: {
username: 'Dikaeinstein'
}
}
},
{
players: [
{ username: 'Nkemjiks' },
{ username: 'Dikaeinstein' }
],
meta: {
gameWinner: {
username: 'Dikaeinstein'
}
}
}
];

beforeEach(module('mean.system'));
beforeEach(inject(function (_$controller_, _$rootScope_) {
$rootScope = _$rootScope_;
$controller = _$controller_;
DashboardService = {
leaderBoard: function leaderBoard() {},
gameLog: function gameLog() {}
};

spyOn(DashboardService, 'leaderBoard').and.callFake(function () {
return {
then: function then(successCallback, errorCallback) {
if (flag === 'success') successCallback({ games: leaderBoardGames });
else errorCallback('Error');
}
};
});

spyOn(DashboardService, 'gameLog').and.callFake(function () {
return {
then: function then(successCallback, errorCallback) {
if (flag === 'success') successCallback({ games: gamelogGames });
else errorCallback('Error');
}
};
});
}));

it('should return the leaderboard with 2 players fetched with $http', function () {
$scope = $rootScope.$new();
$controller('DashboardController', {
$scope,
DashboardService,
});

expect($scope.games.data.length).toEqual(2);
expect($scope.games.data[0]).toEqual(leaderBoardGames[0]);
});

it('should return the gamelog containing 2 games fetched with $http', function () {
$scope = $rootScope.$new();
$controller('DashboardController', {
$scope,
DashboardService,
});

expect($scope.currentUser.games.data.length).toEqual(0);
$scope.fetchGamelog();
expect($scope.currentUser.games.data.length).toEqual(2);
expect($scope.currentUser.games.data[0]).toEqual(gamelogGames[0]);
});
});
21 changes: 21 additions & 0 deletions frontend-test/angular/isLoading-directive.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/* eslint prefer-arrow-callback: 0, no-var: 0, func-names: 0, no-undef: 0, require-jsdoc: 0 */

describe('Directive: isLoading', function () {
let $scope, $compile;

beforeEach(module('mean.system'));
beforeEach(inject(function (_$compile_, $rootScope, _$httpBackend_) {
$compile = _$compile_;
$scope = $rootScope.$new();
$httpBackend = _$httpBackend_;

$compile(angular
.element('<div is-loading></div>'))($scope);
$scope.$digest();
}));

it('should render hide loading indicator', function () {
expect($scope.loadingIndicatorShow).toBeDefined();
expect($scope.loadingIndicatorShow).toBeFalsy();
});
});
4 changes: 1 addition & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

52 changes: 39 additions & 13 deletions public/js/controllers/dashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,48 @@

angular.module('mean.system')
.controller('DashboardController', ['$scope', 'DashboardService', function DashboardController($scope, DashboardService) {
$scope.games = [];
$scope.games = {
data: [],
status: null,
};

$scope.currentUser = {
games: [],
games: {
data: [],
status: null,
},
};

DashboardService.leaderBoard().then(function (data) {
$scope.games = data.games.map(function (game, index) {
return {
rank: `${index + 1}`,
username: game.username,
gamesWon: game.gamesWon,
};
$scope.fetchLeaderboard = function () {
DashboardService.leaderBoard().then(function (data) {
$scope.games.data = data.games.map(function (game, index) {
return {
rank: `${index + 1}`,
username: game.username,
gamesWon: game.gamesWon,
};
});
}, function (error) {
$scope.games.data = error.data
|| 'Error fetching leaderboard, please try again';
$scope.games.status = error.status;
});
});
};

$scope.fetchGamelog = function () {
DashboardService.gameLog().then(function (data) {
console.log('im called');
$scope.currentUser.games.data = data.games;
}, function (error) {
$scope.currentUser.games.data = error.data
|| 'Error fetching gamelog, please try again';
$scope.currentUser.games.status = error.status;
});
};

// Initialize tabs
$('.tabs').tabs();

DashboardService.gameLog().then(function (data) {
$scope.currentUser.games = data.games;
});
// Fetch leaderboard onLoad
$scope.fetchLeaderboard();
}]);
47 changes: 47 additions & 0 deletions public/js/directives/isLoading.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/* eslint prefer-arrow-callback: 0, no-var: 0, func-names: 0 */

angular.module('mean.system')
.directive('isLoading', ['$http', function isLoading($http) {
/**
* isLoading directive factory function
*
* @param {object} scope Directive scope
* @param {DOMElement} elem HTML element
*
* @returns {object} New directive instance
*/
function link(scope, elem) {
/**
* Toggles loading indicator visibility
*
* @param {boolean} loading Either true or false
*
* @returns {null} Returns nothing
*/
function toggleShowLoadingIndicator(loading) {
if (loading) {
scope.loadingIndicatorShow = true;
elem.show();
} else {
scope.loadingIndicatorShow = false;
elem.hide();
}
}

/**
* Checks request state
*
* @returns {boolean} true or false depending on request state
*/
function isHttpLoading() {
return $http.pendingRequests.length >= 1;
}

scope.isHttpLoading = isHttpLoading;
scope.$watch(scope.isHttpLoading, toggleShowLoadingIndicator);
}

return {
link,
};
}]);
52 changes: 45 additions & 7 deletions public/views/dashboard.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,32 +25,69 @@
<div class="row">
<div class="col m4 s12 dashboard-nav">
<ul class="tabs">
<li class="tab"><a class="active" href="#leaderboard">Leaderboard</a></li>
<li class="tab"><a href="#gamelog">Gamelog</a></li>
<li class="tab"><a class="active" href="#leaderboard" ng-click="!games.data.length && fetchLeaderboard()">Leaderboard</a></li>
<li class="tab"><a href="#gamelog" ng-click="!currentUser.games.data.length && fetchGamelog()">Gamelog</a></li>
<!-- <li class="tab"><a href="#donations">Donations</a></li> -->
</ul>
</div>
<div class="col m8 s12">
<div id="leaderboard" class="col s12 tab-content">
<section>
<!-- Loading indicator directive -->
<div is-loading>
<!-- Spinning preloader -->
<div class="preloader-wrapper active">
<div class="spinner-layer spinner-green-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<!-- Ender Loader -->
<br /><br />
Loading ...
</div>
<section ng-show="!loadingIndicatorShow && games.data.length">
<div class="row tab-header">
<div class="col s4">Rank</div>
<div class="col s4">Players</div>
<div class="col s4">Games Won</div>
</div>
<div class="row card card-item" ng-repeat="game in games">
<div class="row card card-item" ng-repeat="game in games.data">
<div class="col s4">{{game.rank}}</div>
<div class="col s4">{{game.username}}</div>
<div class="col s4">{{game.gamesWon}}</div>
</div>
</section>
<div ng-show="games.status">{{games.data}}</div>
</div>
<div id="gamelog" class="col s12 tab-content">
<div ng-show="currentUser.games.length">
<!-- Loading indicator directive -->
<div is-loading>
<!-- Spinning preloader -->
<div class="preloader-wrapper active">
<div class="spinner-layer spinner-green-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<!-- Ender Loader -->
<br /><br />
Loading ...
</div>
<div ng-show="!loadingIndicatorShow && currentUser.games.data.length">
<!-- this should contain the game cards -->
<div
class="card col s12 m3 l3"
ng-repeat="game in currentUser.games"
ng-repeat="game in currentUser.games.data"
id="game" title="click to view game details">
<div class="log-card-item">
<!-- the name -->
Expand All @@ -68,6 +105,7 @@
</div>
</div>
</div>
<div ng-show="currentUser.games.status">{{games.data}}</div>
</div>
<!-- <div id="donations" class="col s12 tab-content">
<section class="center-align">
Expand Down Expand Up @@ -95,6 +133,6 @@ <h3>No Donations have been made</h3>

<script>
$(document).ready(function(){
$('.tabs').tabs();

});
</script>
8 changes: 8 additions & 0 deletions public/views/signup.html
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,14 @@ <h3 class="font-bold auth-text">Signup</h3>
<div class="col s12">
<button data-target="modal1" ng-click="openModal()" class="modal-trigger center-align" id="choose-avatar" >Click to upload profile picture</button>
</div>
<div is-loading>
<!-- Indeterminate loader -->
<div class="progress">
<div class="indeterminate"></div>
</div>
<!-- Ender Loader -->
Signing Up ...
</div>
<div class="auth-input">
<button class="btn col s12 green darken-4 font-lg font-quick-sand auth-btn">SIGN UP</button>
</div>
Expand Down

0 comments on commit ceab766

Please sign in to comment.