Skip to content

Project-Front Kovalinsky Svyatoslav #5

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

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

Project-Front Kovalinsky Svyatoslav #5

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
c555914
The project is completed
SvyatoslavZL Feb 23, 2024
57d4b0f
Added required fields checking when creating a new account
SvyatoslavZL Feb 24, 2024
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 @@
th, td {
border: 1px solid black;
padding: 3px;
}
324 changes: 322 additions & 2 deletions src/main/webapp/html/my.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,331 @@
<html>
<html lang="en">
<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="showAccountsList(0)">
<h1>RPG admin panel</h1>
<h2>Accounts list:</h2>

<label for="count1">Count per page:</label>
<select id="count1" onchange="showAccountsList(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="pagingButtons">Pages:</div>

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

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

<label for="selectNewRace">Race:</label>
<select id="selectNewRace" 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>
<br>

<label for="selectNewProfession">Profession:</label>
<select id="selectNewProfession" 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>
</select>
<br>

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

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

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

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

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

let url = "/rest/players?";

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

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

if (pageNumber == null) {
pageNumber = 0;
}
url = url.concat("&pageNumber=").concat(pageNumber);

$.get(url, function (response) {
$.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='buttonEdit" + item.id + "' onclick='editAcc(" + item.id + ")'>"
+ "<img src='/img/edit.png'>"
+ "</button>" + "</td><td>"
+ "<button id='buttonDelete" + item.id + "' onclick='deleteAcc(" + item.id + ")'>"
+ "<img src='/img/delete.png'>"
+ "</button>" + "</td>"
).appendTo("#table1");
});
});
let totalCount = getTotalCount();

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

$('button.pgn-btn-styled').remove();

for (let i = 0; i < pagesCount; i++) {
let buttonTag = "<button>" + (i + 1) + "</button>";
let btn = $(buttonTag)
.attr('id', "pagingButton" + i)
.attr('onclick', "showAccountsList(" + i + ")")
.addClass('pgn-btn-styled');
$('#pagingButtons').append(btn);
}

let pageButtonId = "#pagingButton" + pageNumber;
$(pageButtonId).css('color', "red");
}

function getTotalCount() {
let url = "/rest/players/count";
let res = 0;
// $.get(url, function (success) {
// res = parseInt(success);
// })
$.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 () {
showAccountsList(getCurrentPage());
}
});
}

function editAcc(id) {
let identifierEdit = "#buttonEdit" + id;
let identifierDelete = "#buttonDelete" + id;

$(identifierDelete).remove();

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

let currentTrElement = $(identifierEdit).parent().parent();
let children = currentTrElement.children();

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

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

let tdRace = children[3];
let raceId = "#selectRace" + id;
let raceCurrentValue = tdRace.innerHTML;
tdRace.innerHTML = getDropdownRaceHtml(id);
$(raceId).val(raceCurrentValue).change();

let tdProfession = children[4];
let professionId = "#selectProfession" + id;
let professionCurrentValue = tdProfession.innerHTML;
tdProfession.innerHTML = getDropdownProfessionHtml(id);
$(professionId).val(professionCurrentValue).change();

let tdBanned = children[7];
let bannedId = "#selectBanned" + id;
let bannedCurrentValue = tdBanned.innerHTML;
tdBanned.innerHTML = getDropdownBannedHtml(id);
$(bannedId).val(bannedCurrentValue).change();

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

function createAcc() {
let nameValue = $("#inputNewName").val();
let titleValue = $("#inputNewTitle").val();
let raceValue = $("#selectNewRace").val();
let professionValue = $("#selectNewProfession").val();
let levelValue = $("#inputNewLevel").val();
let birthdayValue = $("#inputNewBirthday").val();
let bannedValue = $("#selectNewBanned").val();

let url = "/rest/players";
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
async: false,
data: JSON.stringify({
"name": nameValue,
"title": titleValue,
"race": raceValue,
"profession": professionValue,
"level": levelValue,
"birthday": new Date(birthdayValue).getTime(),
"banned": bannedValue
}),
success: function () {
$("#inputNewName").val("");
$("#inputNewTitle").val("");
$("#selectNewRace").val("");
$("#selectNewProfession").val("");
$("#inputNewLevel").val("");
$("#inputNewBirthday").val("");
$("#selectNewBanned").val("");
showAccountsList(getCurrentPage(""));
}
});

if (!nameValue || !titleValue || !raceValue || !professionValue || !levelValue || !birthdayValue) {
alert('All fields are required');
}
}

function saveAcc(id) {
let nameValue = $("#inputName" + id).val();
let titleValue = $("#inputTitle" + id).val();
let raceValue = $("#selectRace" + id).val();
let professionValue = $("#selectProfession" + id).val();
let bannedValue = $("#selectBanned" + 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": nameValue,
"title": titleValue,
"race": raceValue,
"profession": professionValue,
"banned": bannedValue
}),
success: function () {
showAccountsList(getCurrentPage());
}
})
}

function getDropdownRaceHtml(id) {
let raceId = "selectRace" + id;
return "<label for='race'></label>"
+ "<select id=" + raceId + " 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 professionId = "selectProfession" + id;
return "<label for='profession'></label>"
+ "<select id=" + professionId + " 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>"
+ "</select>"
}

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

function getCurrentPage() {
let currentPage = 1;
$('button:parent(div)').each(function () {
if ($(this).css('color') === 'rgb(255, 0, 0)') {
currentPage = $(this).text();
}
});
return parseInt(currentPage) - 1;
}
</script>
</body>
</html>