This is probably a easy problem but I have been staring at this code for ages and trying different variations but I cant seem to solve it.
I am looping through a JSON hash which consists of players in games. Each player can either be a normal player or a reserve player. The problem however lies with the current user player. I need to find the current player of the current game in the ng-repeat (which is no problem), and then set him/her as a reserve player or normal player. That is the problem. I have an if and else statement which finds out if the current user is reserve or not and then I set the boolean game.current_user.reserve to true or false. The problem is that the loop seems to go through both the if and the else if the current user is in more than one game and sets the boolean to the last of if/else statement. Hopefully you understand what I mean :)
Here is the code:
Game.get().then(function(games){
$scope.games = games;
angular.forEach(games, function(game, gameIndex){
game.tees = [];
Tee.query({game_id: game.id}).then(function(tees){
game.tees = tees;
})
PlayersGame.query({players: game.id}).then(function(players){
game.players = [];
game.reserves = [];
angular.forEach(players, function(value, index){
if(value.reserve == false){
var id = value.id;
User.get(value.userId).then(function(player){
game.players.push(player);
if(player.id == $scope.current_user.id){
game.current_user = $scope.current_user;
game.current_user.reserve = false;
}
});
}else{
User.get(value.userId).then(function(reserve){
game.reserves.push(reserve);
if(reserve.id == $scope.current_user.id){
game.current_user = $scope.current_user;
game.current_user.reserve = true;
}
});
}
});
});
})
});
I use the $scope.game in the ng-repeat and then I have to more children ng-repeats with $scope.game.players and $scope.game.reserves. When the current user wants to cancel their game, I can successfully delete the record server side but I cannot do it properly client side. I cant find the right record to delete in $scope.game Here is the cancel game function.
$scope.cancelGame = function(gameId, current_user, gameIndex){
var confirmation = confirm("Are you sure that you want to cancel your booking?");
if(confirmation){
PlayersGame.query({game_id : gameId, user_id: current_user.id}).then(function(game){
game[0].delete().then(function(){
if(current_user.reserve = true){console.log($scope.games[gameIndex]);
angular.forEach($scope.games[gameIndex].reserves, function(value,index){
if(value.id == current_user.id){
$scope.games[gameIndex].reserves.splice(index,1);
}
})
}else{console.log($scope.games[gameIndex]);
angular.forEach($scope.games[gameIndex].players, function(value,index){
if(value.id == current_user.id){
var removed = $scope.games[gameIndex].players.splice(index,1);console.log(removed);
}
})
}
});
});
$scope.games[gameIndex].current_user = [];
}
}
I just did a test with some console logs in the loop. It seems to me that the loop seems to work fine. I think the problem is in the ng-repeat. I think that the variable game.current_user.reserve gets set inside the ng-repeat after the loop has been run. Can that be possible?
Here is the html in any case:
<div ng-repeat="game in games | orderBy: 'createdAt'" class="well">
<legend ng-show="current_user.admin"><a href="/#/game/edit/{{game.id}}">Game date: {{game.gameDate}}</a></legend>
<legend ng-show="!current_user.admin">Game date: {{game.gameDate}}</legend>
<div ng-show="game.players.length > 0">
<h4>Players</h4>
<ul class="list-inline list-unstyled">
<li ng-repeat="player in game.players">
<ul class="list-unstyled imageList">
<li class="hidden-xs playerImg"><img class="img-rounded img-thumbnail" src="{{player.picture.thumb.url}}" alt="{{player.name}} picture" width="100px" height="100px" /></li>
<li>{{player.name}}</li>
</ul>
</li>
</ul>
</div>
<div ng-show="game.players.length == 0">
<p>There are no players for this game yet</p>
</div>
<div ng-show="game.reserves.length > 0">
<hr />
<h4>Reserves</h4>
<ul class="list-inline list-unstyled">
<li ng-repeat="reserve in game.reserves">
<ul class="list-unstyled imageList">
<li class="hidden-xs playerImg"><img class="img-rounded img-thumbnail" src="{{reserve.picture.thumb.url}}" alt="{{reserve.name}} picture" width="100px" height="100px" /></li>
<li>{{reserve.name}}</li>
</ul>
</li>
</ul>
</div>
<div class="row">
<div> index: {{$index}}, game id: {{game.id}}, current_user.reserve:
<div ng-show="game.current_user" class="col-md-4">
<p>You are already booked into this game</p>
<a href="" ng-click="cancelGame(game.id, game.current_user, $index)" class="btn btn-danger">Cancel booking</a>
</div>
<div ng-show="!game.current_user && game.players.length < 8" class="col-md-4">
<p>Would you like to play in this game?</p>
<a href="" ng-click="bookGame(game.id, current_user.id)" class="btn btn-success">Book a spot</a>
</div>
<div ng-show="!game.current_user && game.players.length >= 8" class="col-md-4">
<p>This game is fully booked! But you can reserve a sopt</p>
<a href="" ng-click="bookReserve(game.id, current_user.id)" class="btn btn-success">Book a reserve spot</a>
</div>
</div>
<div ng-show="game.tees.length > 0">
<div class="col-md-2 pull-right">
<h5 ng-repeat="tee in game.tees">Tee time {{$index + 1}}: {{tee.time }}</h5>
</div>
</div>
</div>
</div>
