Compare commits
No commits in common. "9a82be27aad4289a7e630b2846c65238f0cada8b" and "06e33c19c4a413f08383fef956801b0dfdb07305" have entirely different histories.
9a82be27aa
...
06e33c19c4
3
db.json
3
db.json
@ -1,4 +1,7 @@
|
|||||||
{
|
{
|
||||||
|
"posts": [{ "id": 1, "title": "json-server", "author": "typicode" }],
|
||||||
|
"comments": [{ "id": 1, "body": "some comment", "postId": 1 }],
|
||||||
|
"profile": { "name": "typicode" },
|
||||||
"students": [
|
"students": [
|
||||||
{
|
{
|
||||||
"id": 1,
|
"id": 1,
|
||||||
|
90
page-js.html
90
page-js.html
@ -41,10 +41,7 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main class="container-fluid p-3">
|
<main class="container-fluid p-3">
|
||||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#studentModal">
|
<table class="table table-sm table-hover">
|
||||||
New student
|
|
||||||
</button>
|
|
||||||
<table class="table table-sm table-hover mt-2">
|
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">#</th>
|
<th scope="col">#</th>
|
||||||
@ -59,88 +56,11 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody id="students"></tbody>
|
<tbody id="students"></tbody>
|
||||||
</table>
|
</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>
|
</main>
|
||||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||||
Автор, 2022
|
Автор, 2022
|
||||||
</footer>
|
</footer>
|
||||||
<script type="module">
|
<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) => {
|
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}?`);
|
||||||
@ -205,14 +125,6 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
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();
|
getStudents();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user