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

Dev #12

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Dev #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4e5d0c0
Added a table for displaying player accounts, a function for displayi…
DemidovDenis Aug 14, 2022
bfa1acc
In the function of showing the list of accounts, I added a parameter …
DemidovDenis Aug 15, 2022
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
4 changes: 4 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,4 @@
td,th{
border: 1px solid black;
padding: 3px;
}
315 changes: 314 additions & 1 deletion src/main/webapp/html/my.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,324 @@
<html>

<head>
<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="players_list(0)">
<h1>RPG admin panel</h1>
<h2>Accounts list:</h2>

<label for="count_list">Count per page:</label>
<select id="count_list" onchange="players_list(0)">
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select>

<table id="table_1">
<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>
</table>

<div id="paging_buttons">Pages:</div>
<hr>
<h2>Create new account:</h2>
<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="title" 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='GIAN'>GIAN</option>
<option value='ORC'>ORC</option>
<option value='TROLL'>TROLL</option>
<option value='HOBBIT'>HOBBIT</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='SORCERER'>SORCERER</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="3000-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><br>

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

<script>
function players_list(page_number) {
$("tr:has(td)").remove();

let url = "/rest/players?";

let countPerPage = $("#count_list").val();
if (countPerPage == null){
countPerPage = 3;
}

url = url.concat("pageSize=").concat(countPerPage);

if (page_number == null){
page_number = 0;
}

url = url.concat("&pageNumber=").concat(page_number);

$.get(url,function (response) {
$.each(response,function (key,value) {
$("<tr>").html("<td>"
+ value.id + "</td><td>"
+ value.name + "</td><td>"
+ value.title + "</td><td>"
+ value.race + "</td><td>"
+ value.profession + "</td><td>"
+ value.level + "</td><td>"
+ new Date(value.birthday).toLocaleDateString() + "</td><td>"
+ value.banned + "</td><td>"
+ "<button id='button_edit_" + value.id + "' onclick='editAccount(" + value.id + ")'>"
+ "<img src='/img/edit.png'>"
+ "</button>" + "</td><td>"
+ "<button id='button_delete_" + value.id + "'onclick='deleteAccount(" + value.id + ")'>"
+ "<img src='/img/delete.png'>"
+ "</button>" + "</td>"
).appendTo("#table_1");
})
})

let totalCount = getTotalCount();

let pagesCount = Math.ceil(totalCount/countPerPage);

$("button.pgn-btn-style").remove();

for (let i = 0; i < pagesCount; i++) {
let button_tag = "<button>" + (i + 1) + "</button>";
let btn = $(button_tag)
.attr('id',"paging_button_" + i)
.attr('onclick',"players_list(" + i + ")")
.addClass('pgn-btn-style');
$('#paging_buttons').append(btn);
}

let identifier = "#paging_button_" + page_number;
$(identifier).css('color','red');
}
function getTotalCount(){
let url = "/rest/players/count";
let res = 0;
$.ajax({
url: url,
async: false,
success: function (result) {
res = parseInt(result);
}
})
console.log(res)
return res;
}
function deleteAccount(id) {
let url = "/rest/players/" + id;
$.ajax({
url: url,
type: "DELETE",
success: function (){
players_list(getCurrentPage());
}
});
}
function editAccount(id) {
let identifier_edit = "#button_edit_" + id;
let identifier_delete = "#button_delete_" + id;

$(identifier_delete).remove();

let save_img_tag = "<img src='/img/save.png'>";
$(identifier_edit).html(save_img_tag);
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 = "saveAccount(" + id + ")";
$(identifier_edit).attr('onclick', property_save_tag);

}
function createAccount() {
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("");
players_list(getCurrentPage());
}
});

}
function saveAccount(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 () {
players_list(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='GIAN'>GIAN</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='SORCERER'>SORCERER</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='true'>true</option>"
+ "<option value='false'>false</option>"
+ "</select>";
}
function getCurrentPage(){
let current_page = 1;
$('button:parent(div)').each(function (){
if ($(this).css('color') === 'rgb(255,0,0)'){
current_page = $(this).text();
}
});
return parseInt(current_page) - 1;
}
</script>
</body>
</html>