final-3

Lab3/PrBookfill/admin.html

@@ -54,14 +54,15 @@
         <div class="row">
             <div class="col">
                 <div class="btn-group mt-2" role="group">
-                    <button id="items-add" class="btn btn-info">Add-Dialog</button>
-                    <a class="btn btn-success" href="/page-edit.html">Add-Page</a>
+                    <button id="items-add" class="btn btn-info">Add book</button>
                 </div>
                 <form class="form-inlinecustom-search mx-auto mt-2">
+
+                    <main class="container-fluid">
                         <div class="scroll-panel-favour">
-                        <main class="container-fluid p-2">
-                            <div>
                             <table id="items-table" class="table table-striped">
+
+                                <tbody>
                                     <thead>
                                         <tr>
                                             <th scope="col">#</th>
@@ -70,9 +71,10 @@
                                             <th scope="col">Author</th>
                                             <th scope="col">ISBN</th>
                                             <th scope="col">Price</th>
+                                            <th scope="col">Image</th>
                                         </tr>
                                     </thead>
-                                    <tbody>
+
                                 </tbody>
                             </table>
                         </div>
@@ -83,15 +85,14 @@
 
 
         <div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
-                <div class="modal-dialog">
+            <div class="modal-dialog ">
                 <form id="items-form" class="needs-validation" novalidate>
                     <div class="modal-content">
                         <div class="modal-header">
                             <h1 class="modal-title fs-5" id="items-update-title"></h1>
-                                <button type="button" class="btn-close" data-bs-dismiss="modal"
-                                    aria-label="Close"></button>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                         </div>
-                            <div class="modal-body">
+                        <div class="modal-body modal-dialog-scrollable">
                             <div class="text-center">
                                 <img id="image-preview" src="https://via.placeholder.com/200"
                                     class="rounded rounded-square" alt="placeholder">
@@ -110,8 +111,8 @@
                                     placeholder="Name" required />
                             </div>
                             <div class="mb-2">
-                                    <input id="author" name="author" class="form-control" type="text"
-                                        placeholder="Author" required />
+                                <input id="author" name="author" class="form-control" type="text" placeholder="Author"
+                                    required />
                             </div>
                             <div class="mb-2">
                                 <label class="form-label" for="price">Price</label>
@@ -141,7 +142,7 @@
             </div>
         </div>
 
-            <div class="row">
+        <div class="row mt-4">
             <footer class="footer fixed-bottom w-100">
                 <div class="container">
                     <img class="logos ml-0" src="png/logos.png" alt="Логотип" />

Lab3/PrBookfill/css/style.css

@@ -39,6 +39,10 @@ header{
     color: white;
     background-color: rgba(255, 0, 0, 0);
 }
+.modal-dialog-scrollable {
+    max-height: calc(85vh - 60px);
+    overflow-y: auto;
+ }
 #profile {
     width: 40px;
     height: 40px;
@@ -51,6 +55,15 @@ header{
     height: 400px;
     border-radius: 17% / 60%;
 }
+.modal-dialog img {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+}
+.small-image {
+    max-width: 200px;
+    max-height: 100px;
+}
 #small-car{
     width: 80%;
     background: #c03000;
@@ -103,7 +116,7 @@ header{
     max-width: 100px;
 }
 .scroll-panel-favour {
-    height: 400px;
+    height: 500px;
     background-color: white;
     overflow-y: scroll;
 }

Lab3/PrBookfill/js/lines-ui.js

@@ -66,7 +66,11 @@ function createTableColumn(value) {
   td.textContent = value;
   return td;
 }
-
+function createTableColumnImg(value) {
+  const td = document.createElement('td');
+  td.appendChild(value);
+  return td;
+}
 // функция создает строку таблицы
 // <tr>
 // <th scope="row">index + 1</th>
@@ -96,11 +100,20 @@ export function createTableRow(item, index, editCallback, editPageCallback, dele
   row.appendChild(createTableColumn(item.author));
   row.appendChild(createTableColumn(item.isbn));
   row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
+
+  // Добавляем картинку в таблицу
+  const img = document.createElement('img');
+  img.src = item.image;
+  img.classList.add('small-image');
+  row.appendChild(createTableColumnImg(img));
+  
+
   // редактировать в модальном окне
   row.appendChild(createTableAnchor('fa-pencil', editCallback));
   // редактировать на странице page-edit
-  row.appendChild(createTableAnchor('fa-pen-to-square', editPageCallback));
+  //row.appendChild(createTableAnchor('fa-pen-to-square', editPageCallback));
   // удаление
   row.appendChild(createTableAnchor('fa-trash', deleteCallback));
   return row;
 }
+