Правки

Lab3/admin.html

@@ -41,7 +41,7 @@
             <b>Новости</b>
         </span>
             <div class="btn-group" role="group">
-            <button id="items-add" class="btn btn-info">Добавить товар (диалог)</button>
+                <button id="items-add" class="btn btn-info">Добавить новость</button>
             </div>
         <div class="tbb1 p-3 table-responsive-md mt-4 row justify-content-start">   
             <table id = "items-table" class="table col-lg2 w-75 table-striped">

Lab3/index.html

@@ -38,20 +38,72 @@
     </nav>
     <div class = "container col text-center">
         <span class = "mainSt">Новости</span>
-        <div class="text-center">
+        <div class="text-center d-flex justify-content-end">
             <button class="btn btn-primary w-auto" type="button" onclick ="location.href='admin.html';">
-            Добавить новость</button>
+            Админ Панель</button>
         </div>
     </div>
 </header>
+<main>
+    <div class = "container-fluid d-flex justify-content-center">
+    <div class="btn-group text-center" role="group">
+        <button id="items-add" class="btn btn-info">
+            Добавить новость</button>
+    </div>
+</div>
+</main>
 <div class = "row">
-    <footer class="headStyleNavBar footer mt-5 d-flex flex-shrink-0 justify-content-center align-items-center">
+    <footer class="headStyleNavBar mt-5 d-flex flex-shrink-0 justify-content-center align-items-center">
         Адреса: ул. Северный Венец, 32; ул. Андрея Блаженного, 3
     </footer>
+</div>
+<div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
+    <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>
+                </div>
+                <div class="modal-body">
+                    <div class="text-center">
+                        <img id="image-preview" src="https://via.placeholder.com/200" class="rounded"
+                            alt="placeholder">
+                    </div>
+                    <input id="items-line-id" type="number" hidden>
+                    <div class="mb-2">
+                        <label for="date" class="form-label">Дата</label>
+                        <input id="date" class="form-control" name="date" type = "date" required>
+                    </div>
+                    <div class="mb-2">
+                        <label class="form-label" for="name">Название</label>
+                        <input id="name" name="name" class="form-control" type = "text"
+                            required>
+                    </div>
+                    <div class="mb-2">
+                        <label class="form-label" for="description">Описание</label>
+                        <input id="description" name="description" class="form-control" type="text"
+                            required>
+                    </div>
+                    <div class="mb-2">
+                        <label class="form-label" for="image">Изображение</label>
+                        <input id="image" type="file" name="image" class="form-control" accept="image/*">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
+                    <button type="submit" class="btn btn-primary">Сохранить</button>
+                </div>
+            </div>
+        </form>
+    </div>
 </div>
     <script type = "module">
-        import { UpdateNews } from "./js/lines";
+        import validation from "./js/validation";
+        import { UpdateNews, linesForm } from "./js/lines";
         document.addEventListener('DOMContentLoaded', () => {
+            validation();
+            linesForm();
             UpdateNews();
         });
     </script>

Lab3/js/lines-modal.js

@@ -29,6 +29,7 @@ function resetValues() {
 // перед показом происходит заполнение формы для редактирования
 // если объект item не пуст
 export function showUpdateModal(item) {
+    console.info(item, modalTitle.innerHTML);
     modalTitle.innerHTML = item === null ? "Добавить" : "Изменить";
     console.info(item);
 
@@ -45,7 +46,6 @@ export function showUpdateModal(item) {
     } else {
         resetValues();
     }
-
     myModal.show();
 }
 

Lab3/js/lines-ui.js

@@ -35,6 +35,8 @@ export function createItemsOption(name, value = "", isSelected = false) {
 // <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></td>
 function createTableAnchor(icon, callback) {
     const i = document.createElement("i");
+    console.info("icon", icon);
+    console.info("callback", callback);
     i.classList.add("fa-solid", icon);
 
     const a = document.createElement("a");
@@ -51,7 +53,25 @@ function createTableAnchor(icon, callback) {
     td.appendChild(a);
     return td;
 }
+export function createAnchor(icon, callback) {
+    const i = document.createElement("i");
+    console.info("icon", icon);
+    console.info("callback", callback);
+    i.classList.add("fa-solid", icon);
 
+    const a = document.createElement("a");
+    a.href = "#";
+    a.appendChild(i);
+    a.onclick = (event) => {
+        // чтобы в URL не добавлялась решетка
+        event.preventDefault();
+        event.stopPropagation();
+        callback(icon);
+    };
+    const div = document.createElement("div");
+    div.appendChild(a);
+    return a;
+}
 // функция создает колонку таблицы с текстом value
 // <td>value</td>
 function createTableColumn(value) {
@@ -71,7 +91,7 @@ function createTableColumn(value) {
 // <td><a href="#" onclick="editPageCallback()"><i class="fa-solid fa-pen-to-square"></i></a></td>
 // <td><a href="#" onclick="deleteCallback()"><i class="fa-solid fa-trash"></i></a></td>
 // </tr>
-export function createTableRow(item, index, editCallback, editPageCallback, deleteCallback) {
+export function createTableRow(item, index, editCallback, deleteCallback) {
     const rowNumber = document.createElement("th");
     rowNumber.scope = "row";
     rowNumber.textContent = index + 1;

Lab3/js/lines.js

@@ -7,7 +7,7 @@ import {
 } from "./lines-rest-api";
 import {
     // createItemsOption,
-    cntrls, createTableRow, imagePlaceholder,
+    cntrls, createTableRow, createAnchor, imagePlaceholder,
 } from "./lines-ui";
 
 // async function drawItemsSelect() {
@@ -64,6 +64,7 @@ async function addLine(item, itemName, description, image) {
     console.info(data);
     // загрузка и заполнение table
     drawLinesTable();
+    UpdateNews();
 }
 
 async function editLine(id, item, itemName, description, image) {
@@ -74,6 +75,7 @@ async function editLine(id, item, itemName, description, image) {
     console.info(data);
     // загрузка и заполнение table
     drawLinesTable();
+    UpdateNews();
 }
 
 async function removeLine(id) {
@@ -87,6 +89,7 @@ async function removeLine(id) {
     console.info(data);
     // загрузка и заполнение table
     drawLinesTable();
+    UpdateNews();
 }
 
 // функция для получения содержимого файла в виде base64 строки
@@ -254,12 +257,17 @@ export function linesForm() {
             <span class = "d-flex"><p></p></span>
         </div>
     </div> */
+
+function clearNews() {
+    const newsElements = document.querySelectorAll(".mainDiv");
+    newsElements.forEach((element) => element.remove());
+}
 async function UpdateNew(div1, item) {
     const div2 = document.createElement("div");
     div2.setAttribute("class", "col mt-4");
     const div3 = document.createElement("div");
     div3.setAttribute("class", "rectNews d-flex flex-column");
-    const image = document.createElement("image");
+    const image = document.createElement("img");
     image.setAttribute("src", item.image);
     image.setAttribute("width", "100%");
     image.setAttribute("alt", item.name);
@@ -269,21 +277,76 @@ async function UpdateNew(div1, item) {
     span1.setAttribute("class", "rectNewsText");
     span1.textContent = item.description;
     div1.appendChild(div2);
+    div4.appendChild(createAnchor("fa-pencil", () => showUpdateModal(item)));
+    div4.appendChild(createAnchor("fa-trash", () => removeLine(item.id)));
     div2.appendChild(div3);
     div3.appendChild(image);
     div3.appendChild(div4);
     div4.appendChild(span1);
 }
 export async function UpdateNews() {
+    clearNews();
+    console.info("linesForm");
+
     const data = await getAllLines();
     const div1 = document.createElement("div");
-    div1.setAttribute("class", "row");
+    div1.setAttribute("class", "mainDiv row");
+
     data.forEach((item, index) => {
         console.info(index);
-        UpdateNew(div1, item);
+        cntrls.form.addEventListener("submit", async (event) => {
-        if (index % 2 !== 0) {
+            console.info("Form on Submit231");
-            document.body.appendChild(div1);
+            event.preventDefault();
-        }
+            event.stopPropagation();
+            // drawLinesTable();
+            // if (!cntrls.form.checkValidity()) {
+            //     return;
+            // }
+            // linesForm();
+            // let imageBase64 = "";
+            // // Получение выбранного пользователем изображения в виде base64 строки
+            // // Если пользователь ничего не выбрал, то не нужно сохранять в БД
+            // // дефолтное изображение
+            // if (cntrls.imagePreview.src !== imagePlaceholder) {
+            //     // Загрузка содержимого атрибута src тэга img с id image-preview
+            //     // Здесь выполняется HTTP запрос с типом GET
+            //     console.info("imagePreview.src");
+            //     console.info(cntrls.imagePreview.src);
+            //     const result = await fetch(cntrls.imagePreview.src);
+            //     // Получение из HTTP-ответа бинарного содержимого
+            //     const blob = await result.blob();
+            //     // Получение base64 строки для файла
+            //     // Здесь выполняется Promise из функции readFile
+            //     // Promise позволяет писать линейный код для работы с асинхронными методами
+            //     // без использования обработчиков (callback) с помощью await
+            //     imageBase64 = await readFile(blob);
+            // }
+            // // получение id строки для редактирования
+            // // это значение содержится в скрытом input
+            // const currentId = cntrls.lineId.value;
+            // // если значение id не задано,
+            // // то необходимо выполнить добавление записи
+            // // иначе обновление записи
+            // if (!currentId) {
+            //     await addLine(
+            //         cntrls.itemDate.value,
+            //         cntrls.itemName.value,
+            //         cntrls.itemDescription.value,
+            //         imageBase64,
+            //     );
+            // } else {
+            //     await editLine(
+            //         currentId,
+            //         cntrls.itemDate.value,
+            //         cntrls.itemName.value,
+            //         cntrls.itemDescription.value,
+            //         imageBase64,
+            //     );
+            // }
+            // // после выполнения добавления/обновления модальное окно скрывается
+            // hideUpdateModal();
         });
+        UpdateNew(div1, item);
         document.body.appendChild(div1);
+});
 }

Lab3/style.css

@@ -37,6 +37,11 @@ header nav {
         height : 500px !important;
     }
 }
+@media(min-height: 740px){
+    body{
+        min-height: 1070px;
+    }
+}
 .headStyle{
     color: #FFFFFF
 }
@@ -46,6 +51,11 @@ header nav {
 .headStyleNavBar2{
     background-color: #575757
 }
+.body{
+    display: flex;
+    flex-direction: column;
+    min-height: 100hv;
+}
 .stsp{
     font-size: 30px;
     color: #333333;
@@ -97,6 +107,16 @@ header nav {
     margin-top: 9px;
     margin-bottom:25px;
 }
+.rectNewsInvisible{
+    width: 5px;
+    height: 50px;
+    border : 2px solid #2582A3;
+}
+.modal-dialog img{
+    max-width: 310px;
+    max-height: 200px;
+    object-fit: cover;
+}
 .stylePage2{
     float : center;
     margin-right: 7;
@@ -140,7 +160,7 @@ footer {
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 0;
+    z-index: 1;
     background-color: #9c9c9c;
     height: 32px;
     color: #ffffff;