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

my commit #6

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

my commit #6

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
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, td{
border: 1px solid black;
padding: 3px
}
308 changes: 307 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 @@ -4,8 +4,314 @@
<script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
<link href="/css/my.css" rel="stylesheet">
</head>
<body>
<body onload="fget(0)">
<h1>RPG admin panel</h1>

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

<table id="table1">
<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='GIANT'>GIANT</option>
<option value='ORC'>ORC</option>
<option value='TROLL'>TROLL</option>
<option value='HOBBIT'>HOBBIT</option>
</select>

<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>

<label for="input_level_new">Level: </label>
<input type="number" id="input_level_new" name="level" required size="0" maxlength="100">
<br>

<label for="input_birthday_new">Birthday: </label>
<input type="data" 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="createAcc()">Save</button>
<button type="submit" onclick="createAccs()">Save</button>
</span>

<script>
function fget(page_number) {
$("tr:has(td)").remove();
let url = "/rest/players?";
let countPerPage = $("#count_1").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 (data) {
$.each(data, function (id, element) {
$('<tr>').html("<td>"
+ element.id + "</td> <td>"
+ element.name + "</td> <td>"
+ element.title + "</td> <td>"
+ element.race + "</td> <td>"
+ element.profession + "</td> <td>"
+ element.level + "</td> <td>"
+ new Date(element.birthday).toLocaleDateString() + "</td> <td>"
+ element.banned + "</td><td>"
+ "<button id='button_edit_" + element.id + "'onclick='editAcc(" + element.id + ")'>"
+ "<img src='/img/edit.png'>"
+ "</button>"
+ "<button id='button_delete_" + element.id + "'onclick='deleteAcc(" + element.id + ")'>"
+ "<img src='/img/delete.png'>"
+ "</button>" + "</td>"
).appendTo('#table1');
});
});
let totalCount = getTotalCount();
let pagesCount = Math.ceil(totalCount / countPerPage);
$("button.paging-btn-styled").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", "fget(" + i + ")")
.addClass("paging-btn-styled");
$('#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);
}
})
return res;
}

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

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

function editAcc(id) {
let id_edit = "#button_edit_" + id;
let id_delete = "#button_delete_" + id;
$(id_delete).remove();
let save_image_tag = "<img src='/img/save.png'>"
$(id_edit).html(save_image_tag);

let current_tr_element = $(id_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_name_" + 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 = getDropdownProfessionalHtml(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 propertySaveTag = "saveAcc(" + id + ")";
$(id_edit).attr("onclick", propertySaveTag);
}

function createAcc() {
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 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,
"banned": value_banned,
"level": value_level,
"birthday": new Date(value_birthday).getTime()
}),
success: function () {
$("#input_name_new").val("");
$("#input_title_new").val("");
$("#select_race_new").val("");
$("#select_profession_new").val("");
$("#select_level_new").val("");
$("#select_birthday_new").val("");
$("#select_banned_new").val("");
fget(getCurrentPage(""));
}
})
}

function saveAcc(id) {
let valueName = $("#input_name_" + id).val();
let valueTitle = $("#input_title_" + id).val();
let valueRace = $("#select_race_" + id).val();
let valueProfession = $("#select_profession_" + id).val();
let valueBanned = $("#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": valueName,
"title": valueTitle,
"race": valueRace,
"profession": valueProfession,
"banned": valueBanned
}),
success: function () {
fget(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 getDropdownProfessionalHtml(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 select_id = "select_banned_" + id;
return "<label for='banned'></label>"
+ "<select id=" + select_id + " name='banned'>"
+ "<option value='false'>false</option>"
+ "<option value='true'>true</option>"
+ "</select>";
}
</script>

</body>
</html>