vasylmalik · Melidiana · Feb 23, 2023 · Feb 26, 2023 · Feb 26, 2023 · Feb 26, 2023
diff --git 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
@@ -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
@@ -2,10 +2,95 @@
 <head>
     <title>RPG</title>
     <script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
+    <script src="/script/script.js"></script>
     <link href="/css/my.css" rel="stylesheet">
 </head>
 <body>
 <h1>RPG admin panel</h1>
+<h2>Accounts list:</h2>
+<div>
+    <caption>Count per page:</caption>
+    <select id='my-dropdown'>
+        <option value='5'>5</option>
+        <option value='10'>10</option>
+        <option value='15'>15</option>
+        <option value='20'>20</option>
+    </select>
+</div>
+<table id='my-table' class='table'>
+    <thead>
+    <tr>
+        <th id="account">#</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 id='t-body'>
+
+    </tbody>
+</table>
+<div>
+    <caption>Pages:</caption>
+    <div id='page-number'></div>
+</div>
+<div>
+    <h1>Create new account:</h1>
+    <label for="name-new">Name:</label>
+    <input type="text" id="name-new" name="name" minlength="1" maxlength="12" required>
+</div>
+<div>
+    <label for="title-new">Title:</label>
+    <input type="text" id="title-new" name="title" minlength="1" maxlength="30" required>
+</div>
+<div>
+    <label for="race-new">Race:</label>
+    <select id="race-new" name="race" required>
+        <option value="HUMAN">HUMAN</option>
+        <option value="ELF">ELF</option>
+        <option value="DWARF">DWARF</option>
+        <option value="GIANT">GIANT</option>
+        <option value="ORC">ORC</option>
+        <option value="TROLL">TROLL</option>
+        <option value="HOBBIT">HOBBIT</option>
+        >
+    </select>
+</div>
+<div>
+    <label for="profession-new">Profession:</label>
+    <select id="profession-new" name="profession" required>
+        <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>
+</div>
+<div>
+    <label for="level-new">Level:</label>
+    <input type="number" id="level-new" name="level" min="0" max="100" required>
+</div>
+<div>
+    <label for="birthday-new">Birthday:</label>
+    <input type="date" id="birthday-new" name="birthday" required>
+</div>
+<div>
+    <label for="banned-new">Banned:</label>
+    <select id="banned-new" name="banned">
+        <option value="false">false</option>
+        <option value="true">true</option>
+    </select>
+</div>
+<button class="save-btn">Save</button>
 </body>
 </html>
diff --git a/src/main/webapp/script/script.js 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 = `<tr>
+                    <td data-id="${member.id}">${member.id}</td>
+                    <td><span class="name">${member.name}</span></td>
+                    <td><span class="title">${member.title}</span>></td>
+                    <td><span class="race">${member.race}</span>></td>
+                    <td><span class="profession">${member.profession}</span></td>
+                    <td><span class="level">${member.level}</span></td>
+                    <td><span class="birthday">${new Date(member.birthday).toLocaleDateString()}</span></td>
+                    <td><span class="banned">${member.banned}</span></td>
+                    <td><button class="btn-edit" data-id="${member.id}"><img src="img/edit.png" alt="Edit"></button></td>
+                    <td><button class="btn-delete" data-id="${member.id}"><img src="img/delete.png" id="img-delete" alt="Delete"></button></td>
+                    </tr>`;
+                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 = $('<button><span>' + i + '</span></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(`<input type="text" name="name" value="${name}">`);
+        let new_title = row.find('.title').html(`<input type="text" name="title" value="${title}">`);
+        let new_race = row.find('.race').html(`<input type="text" name="race" value="${race}">`);
+        let new_profession = row.find('.profession').html(`<input type="text" name="profession" value="${profession}">`);
+        let new_banned = row.find('.banned').html(`
+        <select name="banned">
+            <option value="true" ${banned ? 'selected' : ''}>true</option>
+            <option value="false" ${!banned ? 'selected' : ''}>false</option>
+        </select>
+    `);
+
+        $('.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);
+    });
+});