Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

task completed #3

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

task completed #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions src/main/webapp/css/my.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
table {
border-collapse: collapse;
border: 3px solid black;
text-align: center;
}

th {
border: 3px solid black;
font-weight: bold;
width: 100px;
}

td {
border: 1px solid black;
}

.highlight{
color: red;
background-color: blanchedalmond;
}
314 changes: 313 additions & 1 deletion src/main/webapp/html/my.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,321 @@
<title>RPG</title>
<script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
<link href="/css/my.css" rel="stylesheet">


</head>
<body>
<body onload="showPlayers(0)">
<h1>RPG admin panel</h1>
<h2>Account list</h2>

<label for="countPlayersOnPage">Count per page:</label>
<select id="countPlayersOnPage" onchange="location.reload(), showPlayers(0)">
<option value="3">3</option>
<option selected value="6">6</option>
<option value="9">9</option>
</select>

<table id="accounts">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Title</th>
<th>Race</th>
<th>Profession</th>
<th>Level</th>
<th>Birthday</th>
<th>Banned</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody></tbody>
</table>

<div id="pages">
Pages:
</div>

<hr>
<h1>Create new account:</h1>
<label for="input_name_new">Name:</label>
<input type="text" id="input_name_new" name="name" required size="12" maxlength="12">
<br>

<label for="input_title_new">Title:</label>
<input type="text" id="input_title_new" name="name" required size="30" maxlength="30">
<br>

<label for="input_race_new">Race:</label>
<select id="input_race_new" name='race'>
<option value='HUMAN'>HUMAN</option>
<option value='DWARF'>DWARF</option>
<option value='ELF'>ELF</option>
<option value='GIANT'>GIANT</option>
<option value='ORC'>ORC</option>
<option value='TROLL'>TROLL</option>
</select>
<br>

<label for="input_profession_new">Profession:</label>
<select id="input_profession_new" name='profession'>
<option value='WARRIOR'>WARRIOR</option>
<option value='ROGUE'>ROGUE</option>
<option value='SORCERE'>SORCERE</option>
<option value='CLERIC'>CLERIC</option>
<option value='PALADIN'>PALADIN</option>
<option value='NAZGUL'>NAZGUL</option>
<option value='WARLOCK'>WARLOCK</option>
<option value='DRUID'>DRUID</option>
</select>
<br>

<label for="input_level_new">Level:</label>
<input type="number" id="input_level_new" name="level" min="0" max="100">
<br>

<label for="input_birthday_new">Birthday:</label>
<input type="date" id="input_birthday_new" name="birthday" min="2000-01-01" max="2100-12-31">
<br>

<label for="input_banned_new">Banned:</label>
<select id="input_banned_new" name='banned'>
<option value='false'>FALSE</option>
<option value='true'>TRUE</option>
</select>
<br>

<span>
<button type="submit" onclick="createPlayer()">Save</button>
</span>

<script>

function showPlayers(numberPage) {

let url = "/rest/players";

url = url.concat("?pageNumber=").concat(numberPage).concat("&pageSize=").concat($("#countPlayersOnPage").val());

$.get(url, function (response) {
$("#accounts tbody").empty();
$.each(response, function (i, item) {
$('<tr>').html("<td>"
+ item.id + "</td><td>"
+ item.name + "</td><td>"
+ item.title + "</td><td>"
+ item.race + "</td><td>"
+ item.profession + "</td><td>"
+ item.level + "</td><td>"
+ new Date(item.birthday).toLocaleDateString() + "</td><td>"
+ item.banned + "</td><td>"
+ "<button id='button_edit_" + item.id + "' onclick='editPlayer(" + item.id + ")'>"
+ "<img src='img/edit.png' alt='Picture not found'>" + "</td><td>"
+ "<button id='button_delete_" + item.id + "' onclick='deletePlayer(" + item.id + ")'>"
+ "<img src='img/delete.png' alt='Picture not found'>" + "</td><td>"
).appendTo("#accounts tbody");
});
});

let countPages = Math.ceil(getCountPlayers() / showPlayersOnPage());

$('#pages').empty();

for (let i = 0; i < countPages; i++) {
let button_tag = `<button onclick="showPlayers(${i})">${i + 1}</button>'`;
button_tag = $(button_tag).attr('id', "page_" + i);
$('#pages').append(button_tag);
}

let currentPage = "#page_" + numberPage;
currentPage = $(currentPage).addClass("highlight");
}

function showPlayersOnPage() {
return document.getElementById('countPlayersOnPage').value;
}

function getCountPlayers() {
let res;
$.ajax({
type: "GET",
url: "/rest/players/count",
async: false,
success: function (result) {
res = result;
}
})
return res;
}

function deletePlayer(id) {
let url = "/rest/players/" + id;
$.ajax({
type: 'DELETE',
url: url,
success: function () {
showPlayers(getCurrentPage());
}
});
}

function getCurrentPage() {
let current_page = 1;
$('button:parent(div)').each(function () {
if ($(this).css('color') === 'rgb(255, 0, 0)') {
current_page = $(this).text();
}
});
return current_page - 1;
}

function editPlayer(id) {
let identifier_edit = "#button_edit_" + id;
let identifier_delete = "#button_delete_" + id;

$(identifier_delete).remove();

let save_image = "<img src='/img/save.png'>";
$(identifier_edit).html(save_image);

let current_tr_element = $(identifier_edit).parent().parent();
let children = current_tr_element.children();

let td_name = children[1];
td_name.innerHTML = "<input id='input_name_" + id + "'type = 'text' value = '" + td_name.innerHTML + "'>";

let td_title = children[2];
td_title.innerHTML = "<input id='input_title_" + id + "'type = 'text' value = '" + td_title.innerHTML + "'>";

let td_race = children[3];
let race_id = "#select_race_" + id;
let race_current_value = td_race.innerHTML;
td_race.innerHTML = getDropdownRaceHtml(id);
$(race_id).val(race_current_value).change();

let td_profession = children[4];
let profession_id = "#select_profession_" + id;
let profession_current_value = td_profession.innerHTML;
td_profession.innerHTML = getDropdownProfessionHtml(id);
$(profession_id).val(profession_current_value).change();

let td_banned = children[7];
let banned_id = "#select_banned_" + id;
let banned_current_value = td_banned.innerHTML;
td_banned.innerHTML = getDropdownBannedHtml(id);
$(banned_id).val(banned_current_value).change();

let property_save_tag = "saveAcc(" + id + ")";
$(identifier_edit).attr('onclick', property_save_tag);
}

function saveAcc(id) {
let value_name = $("#input_name_" + id).val();
let value_title = $("#input_title_" + id).val();
let value_race = $("#select_race_" + id).val();
let value_profession = $("#select_profession_" + id).val();
let value_banned = $("#select_banned_" + id).val();

let url = "/rest/players/" + id;
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
async: false,
data: JSON.stringify({
"name": value_name,
"title": value_title,
"race": value_race,
"profession": value_profession,
"banned": value_banned,
}),
success: function () {
showPlayers(getCurrentPage());
}
})
}

function getDropdownRaceHtml(id) {
let race_id = "select_race_" + id;
return "<label for='race'></label>"
+ "<select id=" + race_id + " name='race'>"
+ "<option value='HUMAN'>HUMAN</option>"
+ "<option value='DWARF'>DWARF</option>"
+ "<option value='ELF'>ELF</option>"
+ "<option value='GIANT'>GIANT</option>"
+ "<option value='ORC'>ORC</option>"
+ "<option value='TROLL'>TROLL</option>"
+ "<option value='HOBBIT'>HOBBIT</option>"
+ "</select>";
}

function getDropdownProfessionHtml(id) {
let profession_id = "select_profession_" + id;
return "<label for='profession'></label>"
+ "<select id=" + profession_id + " name='profession'>"
+ "<option value='WARRIOR'>WARRIOR</option>"
+ "<option value='ROGUE'>ROGUE</option>"
+ "<option value='SORCERE'>SORCERE</option>"
+ "<option value='CLERIC'>CLERIC</option>"
+ "<option value='PALADIN'>PALADIN</option>"
+ "<option value='NAZGUL'>NAZGUL</option>"
+ "<option value='WARLOCK'>WARLOCK</option>"
+ "<option value='DRUID'>DRUID</option>"
+ "</select>";
}

function getDropdownBannedHtml(id) {
let banned_id = "select_banned_" + id;
return "<label for='banned'></label>"
+ "<select id=" + banned_id + " name='banned'>"
+ "<option value='false'>FALSE</option>"
+ "<option value='true'>TRUE</option>"
+ "</select>";
}

function createPlayer() {
let value_name = $("#input_name_new").val();
let value_title = $("#input_title_new").val();
let value_race = $("#input_race_new").val();
let value_profession = $("#input_profession_new").val();
let value_level = $("#input_level_new").val();
let value_birthday = $("#input_birthday_new").val();
let value_banned = $("#input_banned_new").val();

let current_page = window.location.href;

let url = "/rest/players";
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
async: false,
data: JSON.stringify({
"name": value_name,
"title": value_title,
"race": value_race,
"profession": value_profession,
"level": value_level,
"birthday": new Date(value_birthday).getTime(),
"banned": value_banned
}),
success: function () {
$("#input_name_new").val("");
$("#input_title_new").val("");
$("#input_race_new").val("");
$("#input_profession_new").val("");
$("#input_level_new").val("");
$("#input_birthday_new").val("");
$("#input_banned_new").val("");
showPlayers(getCurrentPage());
}
})
}

</script>

</body>
</html>