diff --git a/src/main/java/com/game/config/WebConfig.java b/src/main/java/com/game/config/WebConfig.java index 7a324807..758a7688 100644 --- a/src/main/java/com/game/config/WebConfig.java +++ b/src/main/java/com/game/config/WebConfig.java @@ -49,6 +49,7 @@ public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/html/**").addResourceLocations("/html/"); registry.addResourceHandler("/css/**").addResourceLocations("/css/"); registry.addResourceHandler("/img/**").addResourceLocations("/img/"); + registry.addResourceHandler("/script/**").addResourceLocations("/script/"); } @Bean diff --git a/src/main/webapp/css/my.css b/src/main/webapp/css/my.css index e69de29b..8438ab14 100644 --- a/src/main/webapp/css/my.css +++ b/src/main/webapp/css/my.css @@ -0,0 +1,45 @@ + +.table { + border-collapse: collapse; + border: 1px solid black; +} + +th, td { + border: 1px solid black; +} + +tr:first-child th { + border-top: none; +} + +tr:last-child td { + border-bottom: none; +} + +tr td:first-child { + border-left: none; +} + +tr td:last-child { + border-right: none; +} + +td.edit { + background-image: url("/img/edit.png"); + background-position: center center; + background-repeat: no-repeat; + background-size: 25px 25px; +} + +td.delete { + background-image: url("/img/delete.png"); + background-position: center center; + background-repeat: no-repeat; + background-size: 25px 25px; +} + +.active-page { + color: red; +} + + diff --git a/src/main/webapp/html/my.html b/src/main/webapp/html/my.html index eb66ac55..0cbab7f2 100644 --- a/src/main/webapp/html/my.html +++ b/src/main/webapp/html/my.html @@ -2,10 +2,95 @@ RPG +

RPG admin panel

+

Accounts list:

+
+ Count per page: + +
+ + + + + + + + + + + + + + + + + + +
#NameTitleRaceProfessionLevelBirthdayBannedEditDelete
+
+ Pages: +
+
+
+

Create new account:

+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ \ No newline at end of file diff --git a/src/main/webapp/script/script.js b/src/main/webapp/script/script.js new file mode 100644 index 00000000..e803a1bd --- /dev/null +++ b/src/main/webapp/script/script.js @@ -0,0 +1,186 @@ +$(document).ready(function () { + const table = $("#my-table"); + const tableBody = $("#t-body"); + const dropDown = $("#my-dropdown"); + const pageNumber = $("#page-number"); + let pageNum = pageNumber.val(); + + function renderTable(pageSize, pageNumber) { + $.get(`/rest/players/?pageNumber=${pageNumber}&pageSize=${pageSize}`, function (data) { + tableBody.empty(); + $.each(data, function (i, member) { + const row = ` + ${member.id} + ${member.name} + ${member.title}> + ${member.race}> + ${member.profession} + ${member.level} + ${new Date(member.birthday).toLocaleDateString()} + ${member.banned} + + + `; + table.append(row); + }); + }); + } + + function renderPaginationButtons() { + $.get('/rest/players/count', function (data) { + let pageSize = dropDown.val(); + let chunk = Math.ceil(data / pageSize); + pageNumber.empty(); + for (let i = 1; i <= chunk; i++) { + let button = $(''); + pageNumber.append(button); + button.attr('id', 'b-num'); + button.attr('value', i); + + if (i === pageNum + 1) { + button.find('span').addClass('active-page'); + } + button.click(function () { + $('#page-number .active-page').removeClass('active-page'); + $(this).find('span').addClass('active-page'); + + }); + } + }); + } + + function deleteAccount(id) { + const btn = $(this); + $.ajax({ + url: `/rest/players/${id}`, type: 'DELETE', success: function () { + btn.closest('tr').remove(); + renderTable(dropDown.val(), pageNum); + renderPaginationButtons(); + console.log(`User with id: ${id} deleted successfully`); + }, error: function (error) { + if (error.status === 404) { + alert(`Error deleting user: ${error}. Player is not found.`); + } else if (error.status === 400) { + alert(`Error deleting user: ${error}. Invalid ID.`); + } else { + alert(`Error deleting user: ${error}`); + } + } + }); + } + + renderTable(5, 0); + renderPaginationButtons(); + + dropDown.click(() => { + let pageSize = dropDown.val(); + renderTable(pageSize, 0); + renderPaginationButtons(); + }); + + tableBody.on('click', '.btn-delete', function () { + const id = $(this).data('id'); + deleteAccount(id); + }); + + tableBody.on('click', '.btn-edit', function () { + $(this).find('img').attr('src', 'img/save.png'); + $(this).closest('tr').find('.btn-delete').toggle(); + + const row = $(this).closest('tr'); + const name = row.find('.name').text(); + const title = row.find('.title').text(); + const race = row.find('.race').text(); + const profession = row.find('.profession').text(); + const banned = row.find('.banned').text() === 'true'; + + let new_name = row.find('.name').html(``); + let new_title = row.find('.title').html(``); + let new_race = row.find('.race').html(``); + let new_profession = row.find('.profession').html(``); + let new_banned = row.find('.banned').html(` + + `); + + $('.btn-edit').off('click').on('click', function () { + var id = $(this).data('id'); + $.ajax({ + url: `/rest/players/${id}`, + type: 'POST', + dataType: 'json', + contentType: 'application/json;charset=UTF-8', + async: false, + data: JSON.stringify({ + name: new_name.find('input').val(), + title: new_title.find('input').val(), + race: new_race.find('input').val(), + profession: new_profession.find('input').val(), + banned: new_banned.find('select').val() === 'true' + }), success: function () { + renderTable(dropDown.val(), pageNum); + renderPaginationButtons(); + }, error: function (error) { + if (error.status === 404) { + alert(`Error editing user: ${error}. Player is not found in the database.`); + } else if (error.status === 400) { + alert(`Error editing user: ${error}. Invalid ID.`); + } else { + alert(`Error editing user: ${error}`); + } + } + }); + }); + }); + + $('.save-btn').on('click', function () { + let name = $('#name-new').val(); + let title = $('#title-new').val(); + let race = $('#race-new').val(); + let profession = $('#profession-new').val(); + let level = $('#level-new').val(); + let birthday = $('#birthday-new').val(); + let banned = $('#banned-new').val(); + + $.ajax({ + url: '/rest/players', + type: 'POST', + dataType: 'json', + contentType: 'application/json;charset=UTF-8', + async: false, + data: JSON.stringify({ + name: name, + title: title, + race: race, + profession: profession, + level: level, + birthday: new Date(birthday).getTime(), + banned: banned + }), success: function () { + $('#name-new').val(''); + $('#title-new').val(''); + $('#race-new').val(''); + $('#profession-new').val(''); + $('#level-new').val(''); + $('#birthday-new').val(''); + $('#banned-new').val(''); + renderTable(dropDown.val(), pageNum); + renderPaginationButtons(); + }, error: function (error) { + if (error.status === 400) { + alert(error.message); + } else { + alert(`Error saving user: ${error}.`); + } + } + }); + }); + + pageNumber.on('click', 'button', function () { + let pageSize = dropDown.val(); + pageNum = $(this).val() - 1; + renderTable(pageSize, pageNum); + }); +}); \ No newline at end of file