Use the output from Lab-08, or this archive here at the starter project:
In the Players controller, replace the current newPlayer method with the following:
public static void newPlayer(String name, String club)
{
Player player = new Player (name);
Club theClub = Club.findByName(club);
if (theClub != null)
{
theClub.addPlayer(player);
theClub.save();
}
else
{
player.save();
}
index();
}
It takes an extra parameter, the name of the club the player is to belong to.
We need to allow the user to select this in the view - open views/Players/addplayer.html and introduce the new select element as shown:
<section class="ui raised form segment">
<form action="/players/newplayer" method="POST">
<div class="field">
<label> Player Name </label>
<input type="text" name="name">
</div>
<div class="field">
<select name="club">
#{list items:clubs, as:'club'}
<option>${club.name}</option>
#{/list}
</select>
</div>
<button class="ui blue submit button">Add</button>
</form>
</section>
Try this now and it should work - ie. you should be able to select a club for the player to belong to.
The styling is blank though, so change this now, based on some examples here:
Replace the <select> element above with the following:
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="club">
<div class="default text">Select Club</div>
<i class="dropdown icon"></i>
<div class="menu">
#{list items:clubs, as:'club'}
<div class="item">${club.name}</div>
#{/list}
</div>
</div>
</div>
And try it out. Although the control will appear, it wont quite work. This is because we are missing some initiualiation code for the drop down control. This can be inserter into views/main.html - at the end of the <block> element:
...
<body>
#{doLayout /}
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Try this out now, it should work as expected.
Experiment with other styles on:
We could bring in a view to permit an existing player to be edited - either his name changed, or club or both.
First create a new view in views/players called editplayer.html:
#{extends 'main.html' /}
#{set title:'Edit Player Details' /}
This is empty for the moment.
We need two new actions in Players controller:
public static void editPlayer(Long id)
{
Player player = Player.findById(id);
List<Club> clubs = Club.findAll();
render(player, clubs);
}
public static void changePlayer(Long id, String name, Long club)
{
// todo
index();
}
... and two new routes route to trigger these actions:
GET /players/editplayer/{id} Players.editPlayer
POST /players/changeplayer/{id} Players.changePlayer
We also need to make sure the addPlayer method sends the list of clubs to the view:
public static void addPlayer()
{
List<Club> clubs = Club.findAll();
render(clubs);
}
Now, in views/players/index.html', extend the table to include anedit` button which will use the GET route above:
...
...
<section class="ui raised segment">
<h1>Players</h1>
<table class="ui table">
<thead>
<tr>
<th> Player</th>
<th> Club </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
#{list items:players, as:'player'}
<tr>
<td>${player.name}</td>
<td> ${player.club?.name} </td>
<td>
<a class="ui ui icon button" href="/players/delete/${player.id}">
<i class="delete red icon"></i>
</a>
</td>
<td>
<a class="ui icon button " href="/players/editplayer/${player.id}">
<i class="edit icon"></i>
</a>
</td>
</tr>
#{/list}
</tbody>
</table>
<a class="ui blue button" href="/players/addplayer">
<i class="user icon"></i> Add Player
</a>
</section>
First, we complete the views/Players/editplayer.html view:
#{extends 'main.html' /}
#{set title:'Player Details' /}
<section class="ui raised form segment">
<form action="/players/changeplayer/${player.id}" method="POST">
<div class="field">
<label> Player Name </label>
<input type="text" name="name" value=${player.name}>
</div>
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="club">
<div class="default text">${player.club.name}</div>
<i class="dropdown icon"></i>
<div class="menu">
#{list items:clubs, as:'club'}
<div class="item">${club.name}</div>
#{/list}
</div>
</div>
</div>
<button class="ui blue submit button">Change</button>
</form>
</section>
With this in place, we can complete the changePlayer in the Players controller:
public static void changePlayer(Long id, String name, String club)
{
Player player = Player.findById(id);
Club theClub = Club.findByName(club);
Logger.info ("CLub = " + club);
player.name = name;
if (null != theClub)
{
Logger.info ("changing club");
player.club.players.remove(player);
theClub.addPlayer(player);
player.club = theClub;
theClub.save();
}
player.save();
index();
}
You should now be able to edit a player, change his/her name and club.
Using this lab as a model, see if you can bring in ability to add / edit clubs, divisions and sponsors