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

Add initial create student function

Browse Source
This commit is contained in:
Aleksey Filippov 2024-11-14 15:11:00 +04:00
parent 06e33c19c4
commit 8f706fb6e1
1 changed files with 89 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
page-js.html
View File

@ -41,7 +41,10 @@
</nav>
</header>
<main class="container-fluid p-3">
<table class="table table-sm table-hover">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#studentModal">
New student
</button>
<table class="table table-sm table-hover mt-2">
<thead>
<tr>
<th scope="col">#</th>
@ -56,11 +59,88 @@
</thead>
<tbody id="students"></tbody>
</table>
<div class="modal fade" id="studentModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-header">
<h1 class="modal-title fs-5">Student</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="id" class="form-label">ID:</label>
<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 />
</div>
<div class="mb-3">
<label for="firstname" class="form-label">First Name:</label>
<input type="text" class="form-control" id="firstname" required />
</div>
<div class="mb-3">
<label for="bdate" class="form-label">Birth date:</label>
<input type="date" class="form-control" id="bdate" required />
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" required />
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone:</label>
<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>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button id="saveStudent" type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Автор, 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,
};
const response = await fetch("http://localhost:3001/students", {
method: "post",
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}?`);
@ -125,6 +205,14 @@
};
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();
myModal.hide();
getStudents();
});
getStudents();
});
</script>