lab 3 x

Lab3/PrBookfill/admin.html

@@ -57,11 +57,7 @@
                     <button id="items-add" class="btn btn-info">Add-Dialog</button>
                     <a class="btn btn-success" href="/page-edit.html">Add-Page</a>
                 </div>
-                <form class="form-inlinecustom-search mx-auto mt-2" >
+                <form class="form-inlinecustom-search mx-auto mt-2">
-                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
-                    <div class="form-group col-md-6">
-                        <input type="text" class="form-control mt-2" id="keyword" placeholder="Keyword" />
-                    </div>
                     <div class="scroll-panel-favour">
                         <main class="container-fluid p-2">
                             <div>
@@ -70,6 +66,7 @@
                                         <tr>
                                             <th scope="col">#</th>
                                             <th scope="col">Category</th>
+                                            <th scope="col">Name</th>
                                             <th scope="col">Author</th>
                                             <th scope="col">ISBN</th>
                                             <th scope="col">Price</th>
@@ -109,21 +106,21 @@
                                     </select>
                                 </div>
                                 <div class="mb-2">
-                                    <input id="name" name="name" class="form-control" type="text" placeholder="Name"
+                                    <input id="name_book" name="name_book" class="form-control" type="text"
-                                        required />
+                                        placeholder="Name" required />
                                 </div>
                                 <div class="mb-2">
-                                    <input id="author" name="author" class="form-control" type="text" placeholder="Author"
+                                    <input id="author" name="author" class="form-control" type="text"
-                                        required />
+                                        placeholder="Author" required />
                                 </div>
                                 <div class="mb-2">
                                     <label class="form-label" for="price">Price</label>
                                     <input id="price" name="price" class="form-control" type="number" value="0.00"
-                                        min="1000.00" step="0.50" required>
+                                        min="100.00" step="0.50" required>
                                 </div>
                                 <div class="mb-2">
                                     <label class="form-label" for="count">ISBN</label>
-                                    <input id="count" name="count" class="form-control" type="number" value="0" min="1"
+                                    <input id="isbn" name="count" class="form-control" type="isbn" value="0" min="100"
                                         step="1" required>
                                 </div>
                                 <div class="mb-2">
@@ -132,7 +129,7 @@
                                 </div>
                                 <div class="mb-2">
                                     <label class="form-label" for="file">File</label>
-                                    <input id="pdf" type="file" name="file" class="form-control" accept="file/*">
+                                    <input id="text" type="file" name="file" class="form-control" accept="file/*">
                                 </div>
                             </div>
                             <div class="modal-footer">
@@ -144,9 +141,6 @@
                 </div>
             </div>
 
-
-
-
             <div class="row">
                 <footer class="footer fixed-bottom w-100">
                     <div class="container">
@@ -155,6 +149,7 @@
                 </footer>
             </div>
         </div>
+    </div>
     <script type="module">
         import validation from "./js/validation";
         import { linesForm } from "./js/lines";
@@ -164,6 +159,7 @@
             linesForm();
         });
     </script>
+
 </body>
 
 </html>

Lab3/PrBookfill/js/lines-modal.js

@@ -19,11 +19,12 @@ const modalTitle = document.getElementById('items-update-title');
 function resetValues() {
   cntrls.lineId.value = '';
   cntrls.itemsType.value = '';
+  cntrls.name_book.value = '';
   cntrls.author.value = '';
-  cntrls.name.value = '';
   cntrls.price.value = parseFloat(0).toFixed(2);
-  cntrls.count.value = 0;
+  cntrls.isbn.value = 0;
   cntrls.image.value = '';
+  cntrls.text.value = '';
   cntrls.imagePreview.src = imagePlaceholder;
 }
 
@@ -38,9 +39,10 @@ export function showUpdateModal(item) {
   if (item) {
     cntrls.lineId.value = item.id;
     cntrls.itemsType.value = item.itemsId;
+    cntrls.name_book.value = item.name_book;
     cntrls.author.value = item.author;
     cntrls.price.value = item.price;
-    cntrls.count.value = item.count;
+    cntrls.isbn.value = item.isbn;
     // заполнение превью
     // Если пользователь выбрал изображение, то оно загружается
     // в тэг image с id image - preview

Lab3/PrBookfill/js/lines-rest-api.js

@@ -5,14 +5,15 @@ const serverUrl = 'http://localhost:8081';
 
 // функция возвращает объект нужной структуры для отправки на сервер
 // eslint-disable-next-line require-jsdoc
-function createLineObject(item, author, price, count, image) {
+function createLineObject(item, name_book, author, price, isbn, image, text) {
   return {
     itemsId: item,
+    name_book,
     author,
-    count,
+    isbn,
-    sum: parseFloat(price * count).toFixed(2),
     price: parseFloat(price).toFixed(2),
     image,
+    text,
   };
 }
 
@@ -50,8 +51,8 @@ export async function getLine(id) {
 // обращение к серверу для создания записи (post)
 // объект отправляется в теле запроса (body)
 // eslint-disable-next-line require-jsdoc
-export async function createLine(item, author, price, count, image) {
+export async function createLine(item, name_book, author, price, isbn, image, text) {
-  const itemObject = createLineObject(item, author, price, count, image);
+  const itemObject = createLineObject(item, name_book, author, price, isbn, image, text);
 
   const options = {
     method: 'POST',
@@ -73,8 +74,8 @@ export async function createLine(item, author, price, count, image) {
 // объект отправляется в теле запроса (body)
 // id передается в качестве части пути URL get-запроса
 // eslint-disable-next-line require-jsdoc
-export async function updateLine(id, item, price, count, image) {
+export async function updateLine(id, item, name_book, author, price, isbn, image, text) {
-  const itemObject = createLineObject(item, price, count, image);
+  const itemObject = createLineObject(item, name_book, author, price, isbn, image, text);
 
   const options = {
     method: 'PUT',

Lab3/PrBookfill/js/lines-ui.js

@@ -11,9 +11,11 @@ export const cntrls = {
   itemsType: document.getElementById('item'),
   author: document.getElementById('author'),
   name: document.getElementById('name'),
+  name_book: document.getElementById('name_book'),
   price: document.getElementById('price'),
-  count: document.getElementById('count'),
+  isbn: document.getElementById('isbn'),
   image: document.getElementById('image'),
+  text: document.getElementById('text'),
   imagePreview: document.getElementById('image-preview'),
 };
 
@@ -90,8 +92,9 @@ export function createTableRow(item, index, editCallback, editPageCallback, dele
 
   row.appendChild(rowNumber);
   row.appendChild(createTableColumn(item.items.name));
+  row.appendChild(createTableColumn(item.name_book));
   row.appendChild(createTableColumn(item.author));
-  row.appendChild(createTableColumn(item.count));
+  row.appendChild(createTableColumn(item.isbn));
   row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
   // редактировать в модальном окне
   row.appendChild(createTableAnchor('fa-pencil', editCallback));

Lab3/PrBookfill/js/lines.js

@@ -59,10 +59,10 @@ async function drawLinesTable() {
 }
 
 // eslint-disable-next-line require-jsdoc
-async function addLine(item, author, price, count, image) {
+async function addLine(item, name_book, author, price, isbn, image, text) {
   console.info('Try to add item');
   // вызов метода REST API для добавления записи
-  const data = await createLine(item, author, price, count, image);
+  const data = await createLine(item, name_book, author, price, isbn, image, text);
   console.info('Added');
   console.info(data);
   // загрузка и заполнение table
@@ -70,10 +70,10 @@ async function addLine(item, author, price, count, image) {
 }
 
 // eslint-disable-next-line require-jsdoc
-async function editLine(id, item, author, price, count, image) {
+async function editLine(id, item, name_book, author, price, isbn, image, text) {
   console.info('Try to update item');
   // вызов метода REST API для обновления записи
-  const data = await updateLine(id, item, author, price, count, image);
+  const data = await updateLine(id, item, name_book, author, price, isbn, image, text);
   console.info('Updated');
   console.info(data);
   // загрузка и заполнение table
@@ -189,6 +189,12 @@ export function linesForm() {
       // без использования обработчиков (callback) с помощью await
       imageBase64 = await readFile(blob);
     }
+    //TEXT
+    let textBase64 = '';
+    const result = await fetch(cntrls.text.src);
+    const blob = await result.blob();
+    textBase64 = await readFile(blob);
+
 
     // получение id строки для редактирования
     // это значение содержится в скрытом input
@@ -199,19 +205,23 @@ export function linesForm() {
     if (!currentId) {
       await addLine(
           cntrls.itemsType.value,
+          cntrls.name_book.value,
           cntrls.author.value,
           cntrls.price.value,
-          cntrls.count.value,
+          cntrls.isbn.value,
           imageBase64,
+          textBase64,
       );
     } else {
       await editLine(
           currentId,
           cntrls.itemsType.value,
+          cntrls.name_book.value,
           cntrls.author.value,
           cntrls.price.value,
-          cntrls.count.value,
+          cntrls.isbn.value,
           imageBase64,
+          textBase64,
       );
     }
 
@@ -251,9 +261,10 @@ export async function linesPageForm() {
       const line = await getLine(currentId);
       // заполнение формы для редактирования
       cntrls.itemsType.value = line.itemsId;
+      cntrls.name_book.value = line.name_book;
       cntrls.author.value = line.author;
       cntrls.price.value = line.price;
-      cntrls.count.value = line.count;
+      cntrls.isbn.value = line.isbn;
       // заполнение превью
       // Если пользователь выбрал изображение, то оно загружается
       // в тэг image с id image - preview
@@ -296,6 +307,11 @@ export async function linesPageForm() {
       // без использования обработчиков (callback) с помощью await
       imageBase64 = await readFile(blob);
     }
+    //TEXT
+    let textBase64 = '';
+    const result = await fetch(cntrls.text.src);
+    const blob = await result.blob();
+    textBase64 = await readFile(blob);
 
     // если значение параметра запроса не задано,
     // то необходимо выполнить добавление записи
@@ -303,19 +319,24 @@ export async function linesPageForm() {
     if (!currentId) {
       await addLine(
           cntrls.itemsType.value,
+          cntrls.name_book.value,
           cntrls.author.value,
           cntrls.price.value,
-          cntrls.count.value,
+          cntrls.isbn.value,
           imageBase64,
+          textBase64,
       );
     } else {
       await editLine(
           currentId,
           cntrls.itemsType.value,
+          cntrls.name_book.value,
           cntrls.author.value,
           cntrls.price.value,
-          cntrls.count.value,
+          cntrls.isbn.value,
           imageBase64,
+          textBase64,
+          
       );
     }
     // возврат к странице page4

Lab3/PrBookfill/page-edit.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Boolfill</title>
+
+    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" />
+    <link rel="stylesheet" href="./css/style.css">
+
+    <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script src="js/script.js"></script>
+
+</head>
+
+<body>
+    <div class="container-fluid px-4">
+        <div class="row">
+            <header class="col-12">
+                <nav class="navbar navbar-expand-lg navbar-dark bg-transparent py-0">
+                    <a class="navbar-brand" href="index.html">
+                        <img class="logo mb-2" src="png/logo.png" alt="Логотип">
+                    </a>
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                        aria-expanded="false" aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="collapse navbar-collapse me-5" id="navbarSupportedContent">
+                        <ul class="navbar-nav mt-2">
+                            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+                            <button class="btn btn-outline-success my-2 my-sm-0" type="button"
+                                onclick="location.href='search.html';"><i class="fas fa-search"></i></button>
+                            <li class="nav-item">
+                                <a class="nav-link h5 h-sm-4" href="favour.html">Favourite</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link h5 h-sm-4" href="audio.html">Audio</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link h5 h-sm-4" href="comics.html">Comics</a>
+                            </li>
+                            <a class="nav-item mb-3" href="login.html">
+                                <img id="profile" class="user-photo mt-1 ml-4 mr-3">
+                            </a>
+                        </ul>
+                    </div>
+                </nav>
+            </header>
+        </div>
+
+        <div class="row mb-5">
+            <main class="container-fluid p-3 mb-5">
+                <div class="text-center">
+                    <img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-square"
+                        alt="placeholder">
+                </div>
+                <form id="items-form" class="needs-validation" novalidate>
+                    <input id="items-line-id" type="number" hidden>
+                    <div class="mb-2">
+                        <label for="item" class="form-label">Category</label>
+                        <select id="item" class="form-select" name="selected" required>
+                            <option>Book</option>
+                            <option>Audio</option>
+                            <option>Comics</option>
+                        </select>
+                    </div>
+                    <div class="mb-2">
+                        <input id="name_book" name="name_book" class="form-control" type="text" placeholder="Name"
+                            required />
+                    </div>
+                    <div class="mb-2">
+                        <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>
+                        <input id="price" name="price" class="form-control" type="number" value="0.00" min="100.00"
+                            step="0.50" required>
+                    </div>
+                    <div class="mb-2">
+                        <label class="form-label" for="count">ISBN</label>
+                        <input id="isbn" name="count" class="form-control" type="isbn" value="0" min="100" step="1"
+                            required>
+                    </div>
+                    <div class="mb-2">
+                        <label class="form-label" for="image">Image</label>
+                        <input id="image" type="file" name="image" class="form-control" accept="image/*">
+                    </div>
+                    <div class="mb-2">
+                        <label class="form-label" for="file">File</label>
+                        <input id="text" type="file" name="file" class="form-control" accept="file/*">
+                    </div>
+                    <a href="/admin.html" class="btn btn-secondary">Back</a>
+                    <button type="submit" class="btn btn-primary but-cust">Save</button>
+                </form>
+            </main>
+        </div>
+        <div class="row">
+            <footer class="footer fixed-bottom w-100">
+                <div class="container">
+                    <img class="logos ml-0" src="png/logos.png" alt="Логотип" />
+                </div>
+            </footer>
+        </div>
+    </div>
+
+    <script type="module">
+        import validation from "./js/validation";
+        import { linesPageForm } from "./js/lines"
+
+        document.addEventListener('DOMContentLoaded', () => {
+            validation();
+            linesPageForm();
+        });
+    </script>
+</body>
+
+</html>