Lections/upas-web-site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add addStudent and editStudent functions

Browse Source
This commit is contained in:
Aleksey Filippov 2024-11-28 14:35:33 +04:00
parent 9a82be27aa
commit 46f0caeb4d
2 changed files with 119 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
db.json
View File

@ -1,36 +1,54 @@
{ {
"students": [ "students": [
{ {
"id": 1, "last_name": "Ivanov",
"last_name": "Ivanov", "first_name": "Ivan",
"first_name": "Ivan", "bdate": "1999-01-01",
"bdate": "01.01.1999", "email": "i.ivanov@mail.ru",
"email": "i.ivanov@mail.ru", "phone": "8 111 111 11 11",
"phone": "8 111 111 11 11", "groupId": "1",
"groupId": 1 "id": 1
}, },
{ {
"id": 2, "last_name": "Petrov",
"last_name": "Petrov", "first_name": "Petr",
"first_name": "Petr", "bdate": "2000-12-12",
"bdate": "12.12.2000", "email": "p.petrov@mail.ru",
"email": "p.petrov@mail.ru", "phone": "8 222 222 22 22",
"phone": "8 222 222 22 22", "groupId": "1",
"groupId": 1 "id": 2
}, },
{ {
"id": 3, "last_name": "Sidorov",
"last_name": "Sidorov", "first_name": "Sidr",
"first_name": "Sidr", "bdate": "2000-12-12",
"bdate": "12.12.2000", "email": "s.sidorov@mail.ru",
"email": "s.sidorov@mail.ru", "phone": "8 333 333 33 33",
"phone": "8 333 333 33 33", "groupId": "2",
"groupId": 2 "id": 3
} },
], {
"groups": [ "last_name": "!!!!",
{ "id": 1, "name": "SomeGroup-11" }, "first_name": "asdasd",
{ "id": 2, "name": "SomeGroup-12" }, "bdate": "0001-01-01",
{ "id": 2, "name": "SomeGroup-13" } "email": "asd@asd",
] "phone": "3459345",
"groupId": "2",
"id": 4
}
],
"groups": [
{
"id": 1,
"name": "SomeGroup-11"
},
{
"id": 2,
"name": "SomeGroup-12"
},
{
"id": 3,
"name": "SomeGroup-13"
}
]
} }

86
page-js.html
View File

@ -79,12 +79,12 @@
<input type="text" class="form-control" id="id" disabled /> <input type="text" class="form-control" id="id" disabled />
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="lastname" class="form-label">Last Name:</label> <label for="last_name" class="form-label">Last Name:</label>
<input type="text" class="form-control" id="lastname" required /> <input type="text" class="form-control" id="last_name" required />
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="firstname" class="form-label">First Name:</label> <label for="first_name" class="form-label">First Name:</label>
<input type="text" class="form-control" id="firstname" required /> <input type="text" class="form-control" id="first_name" required />
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="bdate" class="form-label">Birth date:</label> <label for="bdate" class="form-label">Birth date:</label>
@ -99,8 +99,8 @@
<input type="text" class="form-control" id="phone" required /> <input type="text" class="form-control" id="phone" required />
</div> </div>
<div class="mb-3"> <div class="mb-3">
<select class="form-select" aria-label="Select group"> <select class="form-select" aria-label="Select group" required>
<option selected>Select group</option> <option value="">Select group</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
<option value="3">Three</option> <option value="3">Three</option>
@ -120,15 +120,31 @@
Автор, 2022 Автор, 2022
</footer> </footer>
<script type="module"> <script type="module">
const addStudent = async () => { // eslint-disable-next-line no-undef
const data = { const myModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("studentModal"));
last_name: "Last", const studentForm = document.querySelector("#studentModal form");
first_name: "First",
bdate: "01.01.1999", const setModalData = (element) => {
email: "f.last@mail.ru", const inputs = studentForm.querySelectorAll("input[required]");
phone: "8 111 111 11 12", inputs.forEach((input) => {
groupId: 1, input.value = element ? element[input.getAttribute("id")] : "";
}; });
const idInput = studentForm.querySelector("#id");
idInput.value = element ? element.id : "";
const groupSelector = studentForm.querySelector("select");
groupSelector.value = element ? element.group.id : "";
myModal.show();
};
const modalEl = document.getElementById("studentModal");
modalEl.addEventListener("shown.bs.modal", (event) => {
if (!event.relatedTarget) {
return;
}
setModalData();
});
const addStudent = async (data) => {
const response = await fetch("http://localhost:3001/students", { const response = await fetch("http://localhost:3001/students", {
method: "post", method: "post",
headers: { headers: {
@ -141,6 +157,19 @@
} }
}; };
const editStudent = async (id, data) => {
const response = await fetch(`http://localhost:3001/students/${id}`, {
method: "put",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error(`Response status: ${response.status}`);
}
};
const deleteStudent = async (id) => { const deleteStudent = async (id) => {
// eslint-disable-next-line no-restricted-globals, no-alert // eslint-disable-next-line no-restricted-globals, no-alert
const answer = confirm(`Do you want to delete student with id = ${id}?`); const answer = confirm(`Do you want to delete student with id = ${id}?`);
@ -193,6 +222,11 @@
container.appendChild(createTd(element.email)); container.appendChild(createTd(element.email));
container.appendChild(createTd(element.phone)); container.appendChild(createTd(element.phone));
container.appendChild(createTd(element.group.name)); container.appendChild(createTd(element.group.name));
container.appendChild(
createButton("Edit", "btn-warning", async () => {
setModalData(element);
})
);
container.appendChild( container.appendChild(
createButton("Delete", "btn-danger", async () => { createButton("Delete", "btn-danger", async () => {
await deleteStudent(element.id); await deleteStudent(element.id);
@ -205,11 +239,23 @@
}; };
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
// eslint-disable-next-line no-undef studentForm.addEventListener("submit", async (event) => {
const myModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("studentModal")); event.preventDefault();
const saveStudent = document.getElementById("saveStudent"); const data = {};
saveStudent.addEventListener("click", async () => { const inputs = studentForm.querySelectorAll("input[required]");
await addStudent(); inputs.forEach((input) => {
data[input.getAttribute("id")] = input.value;
});
const idInput = studentForm.querySelector("#id");
const studentId = idInput.value;
const groupSelector = studentForm.querySelector("select");
data.groupId = groupSelector.value;
console.log(data);
if (!studentId) {
await addStudent(data);
} else {
await editStudent(studentId, data);
}
myModal.hide(); myModal.hide();
getStudents(); getStudents();
}); });