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

88
db.json
View File

@ -1,36 +1,54 @@
{
"students": [
{
"id": 1,
"last_name": "Ivanov",
"first_name": "Ivan",
"bdate": "01.01.1999",
"email": "i.ivanov@mail.ru",
"phone": "8 111 111 11 11",
"groupId": 1
},
{
"id": 2,
"last_name": "Petrov",
"first_name": "Petr",
"bdate": "12.12.2000",
"email": "p.petrov@mail.ru",
"phone": "8 222 222 22 22",
"groupId": 1
},
{
"id": 3,
"last_name": "Sidorov",
"first_name": "Sidr",
"bdate": "12.12.2000",
"email": "s.sidorov@mail.ru",
"phone": "8 333 333 33 33",
"groupId": 2
}
],
"groups": [
{ "id": 1, "name": "SomeGroup-11" },
{ "id": 2, "name": "SomeGroup-12" },
{ "id": 2, "name": "SomeGroup-13" }
]
}
"students": [
{
"last_name": "Ivanov",
"first_name": "Ivan",
"bdate": "1999-01-01",
"email": "i.ivanov@mail.ru",
"phone": "8 111 111 11 11",
"groupId": "1",
"id": 1
},
{
"last_name": "Petrov",
"first_name": "Petr",
"bdate": "2000-12-12",
"email": "p.petrov@mail.ru",
"phone": "8 222 222 22 22",
"groupId": "1",
"id": 2
},
{
"last_name": "Sidorov",
"first_name": "Sidr",
"bdate": "2000-12-12",
"email": "s.sidorov@mail.ru",
"phone": "8 333 333 33 33",
"groupId": "2",
"id": 3
},
{
"last_name": "!!!!",
"first_name": "asdasd",
"bdate": "0001-01-01",
"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 />
</div>
<div class="mb-3">
<label for="lastname" class="form-label">Last Name:</label>
<input type="text" class="form-control" id="lastname" required />
<label for="last_name" class="form-label">Last Name:</label>
<input type="text" class="form-control" id="last_name" required />
</div>
<div class="mb-3">
<label for="firstname" class="form-label">First Name:</label>
<input type="text" class="form-control" id="firstname" required />
<label for="first_name" class="form-label">First Name:</label>
<input type="text" class="form-control" id="first_name" required />
</div>
<div class="mb-3">
<label for="bdate" class="form-label">Birth date:</label>
@ -99,8 +99,8 @@
<input type="text" class="form-control" id="phone" required />
</div>
<div class="mb-3">
<select class="form-select" aria-label="Select group">
<option selected>Select group</option>
<select class="form-select" aria-label="Select group" required>
<option value="">Select group</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
@ -120,15 +120,31 @@
Автор, 2022
</footer>
<script type="module">
const addStudent = async () => {
const data = {
last_name: "Last",
first_name: "First",
bdate: "01.01.1999",
email: "f.last@mail.ru",
phone: "8 111 111 11 12",
groupId: 1,
};
// eslint-disable-next-line no-undef
const myModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("studentModal"));
const studentForm = document.querySelector("#studentModal form");
const setModalData = (element) => {
const inputs = studentForm.querySelectorAll("input[required]");
inputs.forEach((input) => {
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", {
method: "post",
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) => {
// eslint-disable-next-line no-restricted-globals, no-alert
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.phone));
container.appendChild(createTd(element.group.name));
container.appendChild(
createButton("Edit", "btn-warning", async () => {
setModalData(element);
})
);
container.appendChild(
createButton("Delete", "btn-danger", async () => {
await deleteStudent(element.id);
@ -205,11 +239,23 @@
};
document.addEventListener("DOMContentLoaded", () => {
// eslint-disable-next-line no-undef
const myModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("studentModal"));
const saveStudent = document.getElementById("saveStudent");
saveStudent.addEventListener("click", async () => {
await addStudent();
studentForm.addEventListener("submit", async (event) => {
event.preventDefault();
const data = {};
const inputs = studentForm.querySelectorAll("input[required]");
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();
getStudents();
});