Create a players modal service to keep it DRY

Author: idanen

app/index.html

@@ -98,6 +98,7 @@
 	<script src="scripts/stats/stats-ctrl.js"></script>
 	<script src="scripts/communities/communities.service.js"></script>
 	<script src="scripts/communities/communities.ctrl.js"></script>
+	<script src="scripts/players/players-modal.service.js"></script>
 	<script src="scripts/manager/manager-ctrl.js"></script>
 	<script src="scripts/manager/game-ctrl.js"></script>
 	<script src="scripts/manager/game-drtv.js"></script>

app/partials/modals/addNewPlayer.html

@@ -2,9 +2,9 @@
 	<h3>Player Details <!-- <button ng-model="isAdmin" class="btn btn-sm btn-default" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><span class="glyphicon glyphicon-edit"></span></button> --></h3>
 </div>
 <div class="modal-body">
-	<player-details player="player"></player-details>
+	<player-details player="modalCtrl.player"></player-details>
 </div>
 <div class="modal-footer">
-	<button class="btn btn-primary" ng-click="ok()"><i class="fa fa-check"></i> OK</button>
-	<button class="btn btn-warning" ng-click="cancel()"><i class="fa fa-remove"></i> Cancel</button>
+	<button class="btn btn-primary" ng-click="modalCtrl.ok()"><i class="fa fa-check"></i> OK</button>
+	<button class="btn btn-warning" ng-click="modalCtrl.cancel()"><i class="fa fa-remove"></i> Cancel</button>
 </div>

app/partials/tmpls/player-details-tmpl.html

@@ -2,39 +2,39 @@
 	<div class="form-group">
 		<label class="col-sm-4 control-label" for="playerName">Added on</label>
 		<div class="col-sm-8">
-			<input class="form-control" type="text" id="playerName" name="playerName" ng-model="player.createDate" disabled="disabled"/>
+			<input class="form-control" type="text" id="playerName" name="playerName" ng-model="pCtrl.player.createDate" disabled="disabled"/>
 		</div>
 	</div>
 	<div class="form-group">
 		<label class="col-sm-4 control-label" for="playerName">Name</label>
 		<div class="col-sm-8">
-			<input class="form-control" type="text" id="playerName" name="playerName" ng-model="player.name" disabled="disabled" ng-disabled="!isAdmin()"/>
+			<input class="form-control" type="text" id="playerName" name="playerName" ng-model="pCtrl.player.name" disabled="disabled" ng-disabled="!pCtrl.isAdmin()"/>
 		</div>
 	</div>
 	<div class="form-group">
 		<label class="col-sm-4 control-label" for="playerEmail">Email</label>
 		<div class="col-sm-8">
-			<input class="form-control" type="email" id="playerEmail" name="playerEmail" ng-model="player.email" disabled="disabled" ng-disabled="!isAdmin()"/>
+			<input class="form-control" type="email" id="playerEmail" name="playerEmail" ng-model="pCtrl.player.email" disabled="disabled" ng-disabled="!pCtrl.isAdmin()"/>
 		</div>
 	</div>
 	<div class="form-group">
 		<label class="col-sm-4 control-label" for="playerPhone">Phone</label>
 		<div class="col-sm-8">
-			<input class="form-control" type="tel" id="playerPhone" name="playerPhone" ng-model="player.phone" disabled="disabled" ng-disabled="!isAdmin()"/>
+			<input class="form-control" type="tel" id="playerPhone" name="playerPhone" ng-model="pCtrl.player.phone" disabled="disabled" ng-disabled="!pCtrl.isAdmin()"/>
 		</div>
 	</div>
 	<div class="form-group">
 		<label class="col-sm-4 control-label" for="playerBalance">Balance</label>
 		<div class="col-sm-8">
-			<input class="form-control" type="number" step="10" id="playerBalance" name="playerBalance" ng-model="player.balance" disabled="disabled"/>
+			<input class="form-control" type="number" step="10" id="playerBalance" name="playerBalance" ng-model="pCtrl.player.balance" disabled="disabled"/>
 		</div>
 	</div>
 </form>
 
 <div class="loader" ng-show="loading">Loading...</div>
 <div ng-hide="loading">
-	<button class="btn btn-info refresh-data-btn" analytics-on analytics-event="Player Performance" analytics-category="Actions" analytics-label="{{ player.name }}">Refresh <span class="fa fa-refresh"></span></button>
-	<table class="table table-striped table-hover" ng-hide="player.balance == 0">
+	<button class="btn btn-info refresh-data-btn" analytics-on analytics-event="Player Performance" analytics-category="Actions" analytics-label="{{ pCtrl.player.name }}">Refresh <span class="fa fa-refresh"></span></button>
+	<table class="table table-striped table-hover" ng-hide="pCtrl.player.balance == 0">
 		<thead>
 			<tr>
 				<th>Date</th>
@@ -44,7 +44,7 @@
 			</tr>
 		</thead>
 		<tbody>
-			<tr ng-repeat="game in player.games" ng-class="{'success': (game.players[ 0 ].balance > 0), 'danger': (game.players[ 0 ].balance < 0)}">
+			<tr ng-repeat="game in pCtrl.player.games" ng-class="{'success': (game.players[ 0 ].balance > 0), 'danger': (game.players[ 0 ].balance < 0)}">
 				<td>{{ game.date | date:'y-MM-dd' }}</td>
 				<td>
 					<span ng-class="{'label label-success': (game.players[0].buyout > game.players[0].buyin), 'label label-danger': (game.players[0].buyout < game.players[0].buyin), 'label label-default': (game.players[0].buyout == game.players[0].buyin)}">{{ game.players[0].buyout - game.players[0].buyin }}</span>
@@ -58,12 +58,12 @@
 			</tr>
 		</tbody>
 		<tfoot>
-			<tr ng-class="{'success': player.games[player.games.length - 1].balance > 0, 'danger': player.games[player.games.length - 1].balance < 0}">
-				<th>Played {{ player.games.length }} games</th>
-				<th>{{ player.winningSessions }} winning sessions <span class="badge">{{ player.winningSessions / player.games.length | percentage:1 }}</span></th>
-				<th>Average winnings (in BBs): <span class="badge">{{ player.avgWinning | number:2 }}</span></th>
+			<tr ng-class="{'success': pCtrl.player.games[pCtrl.player.games.length - 1].balance > 0, 'danger': pCtrl.player.games[pCtrl.player.games.length - 1].balance < 0}">
+				<th>Played {{ pCtrl.player.games.length }} games</th>
+				<th>{{ pCtrl.player.winningSessions }} winning sessions <span class="badge">{{ pCtrl.player.winningSessions / pCtrl.player.games.length | percentage:1 }}</span></th>
+				<th>Average winnings (in BBs): <span class="badge">{{ pCtrl.player.avgWinning | number:2 }}</span></th>
 				<th>
-					{{ player.games[player.games.length - 1].balance }}
+					{{ pCtrl.player.games[pCtrl.player.games.length - 1].balance }}
 				</th>
 			</tr>
 		</tfoot>

app/scripts/manager/manager-ctrl.js

@@ -5,9 +5,9 @@
 angular.module( 'pokerManager' ).
 	controller( 'PokerManagerCtrl', PokerManagerController );
 
-	PokerManagerController.$inject = [ '$scope', '$modal', '$filter', '$analytics', 'toaster', 'Utils', 'Players', 'Games' ];
+	PokerManagerController.$inject = [ '$scope', '$filter', '$analytics', 'toaster', 'Utils', 'Players', 'Games', 'playerModal' ];
 
-	function PokerManagerController( $scope, $modal, $filter, $analytics, toaster, utils, Players, Games ) {
+	function PokerManagerController( $scope, $filter, $analytics, toaster, utils, Players, Games, playerModal ) {
 		'use strict';
 
 		var vm = this;
@@ -176,36 +176,23 @@ angular.module( 'pokerManager' ).
 		}
 
 		function openPlayerDetailsDialog( player ) {
-			var isNew = ( typeof( player ) === 'undefined' || player === null );
-
 			vm.closePlayersControl();
-
-			if (isNew) {
-				player = Players.create();
-			}
-			var modalInstance = $modal.open( {
-				templateUrl: './partials/modals/addNewPlayer.html',
-				controller: 'ModalPlayerDetailsCtrl',
-				resolve: {
-					player: function() {
-						return player;
+			
+			playerModal.open( player )
+				.then( function ( savedPlayer ) {
+					// If new -> update default values
+					if ( savedPlayer.isNew ) {
+						savedPlayer.buyin = 0;
+						savedPlayer.isPlaying = false;
+					// Update changed fields
 					}
-				}
-			} );
-
-			modalInstance.result.then( function( savedPlayer ) {
-				// If new -> update default values
-				if ( isNew ) {
-					savedPlayer.buyin = 0;
-					savedPlayer.isPlaying = false;
-				// Update changed fields
-				}
-				
-				player = savedPlayer;
-				
-				// Model.savePlayer( player );
-				Players.update( player ).$promise.then( playerSaved );
-			} );
+					
+					player = savedPlayer;
+					
+					// Model.savePlayer( player );
+					return Players.update( player ).$promise;
+				} )
+				.then( playerSaved );
 		}
 
 		$scope.$watch( function () {

app/scripts/manager/player-details-ctrl.js

@@ -1,35 +1,36 @@
 (function () {
+	'use strict';
 /**
  * Player Modal's controller
  */
-angular.module( 'pokerManager' ).
-	controller( 'ModalPlayerDetailsCtrl', modalPlayerDetailsController ).
-	controller( 'PlayerDetailsCtrl', playerDetailsController );
+angular.module( 'pokerManager' )
+	.controller( 'ModalPlayerDetailsCtrl', ModalPlayerDetailsController )
+	.controller( 'PlayerDetailsCtrl', PlayerDetailsController );
 
-	modalPlayerDetailsController.$inject = [ '$scope', '$http', '$modalInstance', 'player' ];
+	ModalPlayerDetailsController.$inject = [ '$scope', '$http', '$modalInstance', 'player' ];
 
-	function modalPlayerDetailsController( $scope, $http, $modalInstance, player ) {
-		'use strict';
-
-		$scope.player = player;
-
-		$scope.ok = function() {
-			$modalInstance.close($scope.player);
-		};
-
-		$scope.cancel = function() {
+	function ModalPlayerDetailsController( $scope, $http, $modalInstance, player ) {
+		var vm = this;
+		
+		vm.player = player;
+		vm.ok = okFn;
+		vm.cancel = cancelFn;
+		
+		function okFn() {
+			$modalInstance.close(vm.player);
+		}
+		
+		function cancelFn() {
 			$modalInstance.dismiss('cancel');
-		};
+		}
 	}
 
-	playerDetailsController.$inject = [ '$scope', 'Utils' ];
+	PlayerDetailsController.$inject = [ 'Utils' ];
 
-	function playerDetailsController( $scope, utils ) {
-		'use strict';
+	function PlayerDetailsController( utils ) {
+		this.loading = true;
 
-		$scope.loading = true;
-
-		$scope.isAdmin = function() {
+		this.isAdmin = function() {
 			//return ( window.location.pathname.indexOf( 'manage.html' ) > -1 );
 			return true;
 		};

app/scripts/manager/player-details-drtv.js

@@ -16,24 +16,26 @@ angular.module( 'pokerManager' ).
 				player: '='
 			},
 			controller: 'PlayerDetailsCtrl',
+			controllerAs: 'pCtrl',
+			bindToController: true,
 			templateUrl: 'partials/tmpls/player-details-tmpl.html',
 			link: postLinkFn
 		};
 
 		function postLinkFn( scope, element, attrs, ctrl ) {
-			var chartData = createData( scope.player ),
+			var chartData = createData( ctrl.player ),
 				chartHolder = angular.element('<div/>'),
-				chartObj = createChartObject( scope.player.name, chartData ),
+				chartObj = createChartObject( ctrl.player.name, chartData ),
 				refreshBtn = element.find( '.refresh-data-btn' );
 
 			function refreshData() {
-				scope.loading = false;
+				ctrl.loading = false;
 
 				// Calculate extra data
-				scope.player.winningSessions = winningSessions( scope.player );
-				scope.player.avgWinning = avgWinning( scope.player, true );
+				ctrl.player.winningSessions = winningSessions( ctrl.player );
+				ctrl.player.avgWinning = avgWinning( ctrl.player, true );
 
-				chartData = createData( scope.player );
+				chartData = createData( ctrl.player );
 
 				chartHolder.highcharts().destroy();
 
@@ -54,8 +56,10 @@ angular.module( 'pokerManager' ).
 				chartHolder.highcharts( chartObj );
 			}, 0, false);
 
-			if ( !scope.player.isNew ) {
-				scope.player = Players.get( { playerId: scope.player.id }, refreshData );
+			if ( !ctrl.player.isNew ) {
+				ctrl.player = Players.get( { playerId: ctrl.player.id }, refreshData );
+			} else {
+				ctrl.loading = false;
 			}
 
 			refreshBtn.on( 'click', refreshData );

app/scripts/players/players-modal.service.js

@@ -0,0 +1,34 @@
+(function () {
+	angular
+		.module( 'pokerManager' )
+		.service( 'playerModal', PlayerModal );
+		
+	PlayerModal.$inject = [ '$modal', 'Players' ];
+	function PlayerModal( $modal, Players ) {
+		this.$modal = $modal;
+		this.Players = Players;
+	}
+	
+	PlayerModal.prototype = {
+		open: function ( player ) {
+			var isNew = ( typeof( player ) === 'undefined' || player === null );
+
+			if (isNew) {
+				player = this.Players.create();
+			}
+			var modalInstance = this.$modal.open( {
+				templateUrl: './partials/modals/addNewPlayer.html',
+				controller: 'ModalPlayerDetailsCtrl',
+				controllerAs: 'modalCtrl',
+				bindToController: true,
+				resolve: {
+					player: function() {
+						return player;
+					}
+				}
+			} );
+
+			return modalInstance.result;
+		}
+	};
+}());

app/scripts/stats/stats-ctrl.js

@@ -5,9 +5,9 @@
 angular.module( 'pokerManager' ).
 	controller( 'PokerStatsCtrl', PokerStatsController );
 
-	PokerStatsController.$inject = [ '$modal', '$filter', 'Utils', 'Games', 'Players' ];
+	PokerStatsController.$inject = [ '$filter', 'Utils', 'Games', 'Players', 'playerModal' ];
 
-	function PokerStatsController( $modal, $filter, utils, Games, Players ) {
+	function PokerStatsController( $filter, utils, Games, Players, playerModal ) {
 		'use strict';
 
 		var vm = this;
@@ -57,7 +57,7 @@ angular.module( 'pokerManager' ).
 		function playerSaved( savedPlayer ) {
 			// console.log('savedPlayer = ' + savedPlayer);
 			var isNew = true,
-				playerIdx, len,
+				playerIdx,
 				players = vm.displayGames.players;
 
 			isNew = players.some( function ( player ) {
@@ -181,43 +181,19 @@ angular.module( 'pokerManager' ).
 		}
 
 		function openPlayerDetailsDialog( player ) {
-			var isNew = ( player === null );
-
-			if ( isNew ) {
-				player = {
-					name: '',
-					balance: 0,
-					isPlaying: false,
-					buyin: 0,
-					currentChipCount: 0,
-					email: '',
-					phone:'',
-					id: 0,
-					createDate: $filter( 'date' )( vm.today, 'y-MM-dd' ),
-					isNew: true
-				};
-			}
-			var modalInstance = $modal.open( {
-				templateUrl: './partials/modals/addNewPlayer.html',
-				controller: 'ModalPlayerDetailsCtrl',
-				resolve: {
-					player: function() {
-						return player;
+			playerModal.open( player )
+				.then( function ( savedPlayer ) {
+					// If new -> update default values
+					if ( isNew ) {
+						savedPlayer.buyin = 0;
+						savedPlayer.isPlaying = false;
 					}
-				}
-			} );
-
-			modalInstance.result.then( function ( savedPlayer ) {
-				// If new -> update default values
-				if ( isNew ) {
-					savedPlayer.buyin = 0;
-					savedPlayer.isPlaying = false;
-				}
-				
-				player = savedPlayer;
-				
-				Players.update( player ).$promise.then( playerSaved );
-			} );
+					
+					player = savedPlayer;
+					
+					return Players.update( player ).$promise;
+				} )
+				.then( playerSaved );;
 		}
 	}
 })();