192 lines
5.9 KiB
HTML
192 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru-en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>Список пользователей</title>
|
|
<!-- bootstrap -->
|
|
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
|
|
<script
|
|
src="bootstrap/js/bootstrap.bundle.min.js"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script src="jquery/jquery.min.js" crossorigin="anonymous"></script>
|
|
</head>
|
|
<body>
|
|
<main class="text-center">
|
|
<h2 class="my-5 text-center">Список пользователей</h2>
|
|
<form name="userForm">
|
|
<input type="hidden" name="id" value="0" />
|
|
<div class="form-group mb-3">
|
|
<label for="name">Имя:</label>
|
|
<input class="form-control" name="name" />
|
|
</div>
|
|
<div class="form-group mb-3">
|
|
<label for="age">Возраст:</label>
|
|
<input type="number" 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>Имя</th>
|
|
<th>Возраст</th>
|
|
<th>Опции</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 (name == "" || id == "" || age == 0) return false;
|
|
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>
|
|
</main>
|
|
</body>
|
|
</html>
|