XD

2023-11-09 21:58:08 +03:00
commit 3e1c549cbc
10 changed files with 2027 additions and 0 deletions
--- a/API/public/index.html
+++ b/API/public/index.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Список пользователей</title>
+        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
+        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
+    </head>
+    <body>
+        <h1 style="text-align: center;">Список пользователей</h1>
+
+        <form style="text-align: center;" name="userForm">
+            <input type="hidden" name="id" value="0"/>
+
+            <div class="form-group">
+                <label for="name">Name:</label>
+                <input class="form-control" name="name"/>
+            </div>
+
+            <div class="form-group">
+                <label for="age">Age:</label>
+                <input class="form-control" name="age"/>
+            </div>
+
+            <div class="panel-body">
+                <button type="submit" class="btn btn-sm btn-primary">Сохранить</button>
+                <a id="reset" class="btn btn-sm btn-primary">Сбросить</a>
+            </div>
+        </form>
+        <table class="table table-condensed table-striped table-bordered">
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Name</th>
+                    <th>Age</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+
+        <script>
+            function GetUsers() {
+                $.ajax({
+                    url: '/api/users',
+                    type: 'GET',
+                    contentType: 'application/json',
+                    success: function (users) {
+                        var rows = '';
+                        $.each(users, function (
+                            index,
+                            user
+                        )
+                        {
+                            rows += row(user);
+                        });
+                        $('table tbody').append(rows);
+                    },
+                });
+            }
+
+            function GetUser(id) {
+                $.ajax({
+                    url: '/api/users/' + id,
+                    type: 'GET',
+                    contentType: 'application/json',
+                    success: function (user) {
+                        var form =
+                            document.forms['userForm'];
+                        form.elements['id'].value = user.id;
+                        form.elements['name'].value =
+                            user.name;
+                        form.elements['age'].value =
+                            user.age;
+                    },
+                });
+            }
+
+            function CreateUser(userName, userAge) {
+                $.ajax({
+                    url: 'api/users',
+                    contentType: 'application/json',
+                    method: 'POST',
+                    data: JSON.stringify({
+                        name: userName,
+                        age: userAge,
+                    }),
+                    success: function (user) {
+                        reset();
+                        $('table tbody').append(row(user));
+                    },
+                });
+            }
+
+            function EditUser(userId, userName, userAge) {
+                $.ajax({
+                    url: 'api/users',
+                    contentType: 'application/json',
+                    method: 'PUT',
+                    data: JSON.stringify({
+                        id: userId,
+                        name: userName,
+                        age: userAge,
+                    }),
+                    success: function (user) {
+                        reset();
+                        $(
+                            "tr[data-rowid='" +
+                                user.id +
+                                "']"
+                        ).replaceWith(row(user));
+                    },
+                });
+            }
+
+            function reset() {
+                var form = document.forms['userForm'];
+                form.reset();
+                form.elements['id'].value = 0;
+            }
+
+            function DeleteUser(id) {
+                $.ajax({
+                    url: 'api/users/' + id,
+                    contentType: 'application/json',
+                    method: 'DELETE',
+                    success: function (user) {
+                        console.log(user);
+                        $(
+                            "tr[data-rowid='" +
+                                user.id +
+                                "']"
+                        ).remove();
+                    },
+                });
+            }
+
+            var row = function (user) {
+                return (
+                    "<tr data-rowid='" +
+                    user.id +
+                    "'><td>" +
+                    user.id +
+                    '</td>' +
+                    '<td>' +
+                    user.name +
+                    '</td> <td>' +
+                    user.age +
+                    '</td>' +
+                    "<td><a class='editLink' data-id='" +
+                    user.id +
+                    "'>Изменить</a> | " +
+                    "<a class='removeLink' data-id='" +
+                    user.id +
+                    "'>Удалить</a></td></tr>"
+                );
+            };
+
+            $('#reset').click(function (e) {
+                e.preventDefault();
+                reset();
+            });
+
+            $('form').submit(function (e) {
+                e.preventDefault();
+                var id = this.elements['id'].value;
+                var name = this.elements['name'].value;
+                var age = this.elements['age'].value;
+                if (id == 0) CreateUser(name, age);
+                else EditUser(id, name, age);
+            });
+
+            $('body').on('click', '.editLink', function () {
+                var id = $(this).data('id');
+                GetUser(id);
+            });
+
+            $('body').on(
+                'click',
+                '.removeLink',
+                function () {
+                    var id = $(this).data('id');
+                    DeleteUser(id);
+                }
+            );
+
+            GetUsers();
+        </script>
+    </body>
+</html>