Clear DB

db.json

@@ -1,7 +1,4 @@
 {
-    "posts": [{ "id": 1, "title": "json-server", "author": "typicode" }],
-    "comments": [{ "id": 1, "body": "some comment", "postId": 1 }],
-    "profile": { "name": "typicode" },
     "students": [
         {
             "id": 1,

page-js.html

@@ -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>