lab_3(+catalog)

js/js/collection.js

@@ -0,0 +1,75 @@
+
+import {
+    getAllLines,
+} from "./lines-rest-api";
+
+// Создаем функцию, которая отрисовывает контейнеры с товарами
+async function drawProductContainers() {
+    console.info("Попытка загрузить данные");
+  
+    // Проверяем наличие элемента-контейнера для товаров
+    if (!cntrls.productContainer) {
+      return;
+    }
+  
+    // Вызываем метод REST API для получения всех записей
+    const data = await getAllLines();
+  
+    // Очищаем содержимое контейнера
+    cntrls.productContainer.innerHTML = "";
+  
+    // Цикл по каждой записи в полученных данных
+    data.forEach((item, index) => {
+      
+      // Создаем контейнер для товара
+      const productContainer = document.createElement("div");
+      productContainer.classList.add("product-container col-md-3 product mb-3");
+  
+      // Создаем контейнер для изображения товара
+      const productImage = document.createElement("div");
+      productImage.classList.add("product-img");
+  
+      // Создаем изображение товара
+      const image = document.createElement("img");
+      image.src = item.image;
+      productImage.appendChild(image);
+  
+      // Создаем контейнер для информации о товаре
+      const productInfo = document.createElement("div");
+      productInfo.classList.add("product-info");
+  
+      // Создаем заголовок товара
+      const productTitle = document.createElement("h2");
+      productTitle.classList.add("product-title");
+      productTitle.textContent = item.ItName;
+      productInfo.appendChild(productTitle);
+  
+      // Создаем описание товара
+      const productDate = document.createElement("p");
+      productDate.classList.add("product-date");
+      productDate.textContent = item.data;
+      productInfo.appendChild(productDate);
+  
+      // Создаем описание товара
+      const productPrice = document.createElement("p");
+      productPrice.classList.add("product-price");
+      productPrice.textContent = item.price;
+      productInfo.appendChild(productPrice);
+  
+      // Создаем описание товара
+      const productPlace = document.createElement("p");
+      productPlace.classList.add("product-place");
+      productPlace.textContent = item.placesId;
+      productInfo.appendChild(productPlace);
+  
+      // Создаем описание товара
+      const productButton = document.createElement("button");
+      productButton.classList.add("btn btn-primary");
+      productInfo.appendChild(productButton);
+  
+      // Добавляем контейнеры на страницу
+      productContainer.appendChild(productImage);
+      productContainer.appendChild(productInfo);
+      cntrls.productContainer.appendChild(productContainer);
+    });
+  }

js/js/detailPage.js

@@ -0,0 +1,18 @@
+const express = require('express');
+const fs = require('fs');
+const app = express();
+
+app.get('/artist/:name', (req, res) => {
+    const artistName = req.params.name;
+    fs.readFile(`artists/${artistName}.txt`, 'utf8', (err, data) => {
+        if (err) {
+            res.status(404).send('File Not Found');
+        } else {
+            res.send(data);
+        }
+    });
+});
+
+app.listen(5500, () => {
+    console.log('Server is running on port 5500');
+});

js/js/lines-modal.js

@@ -0,0 +1,63 @@
+// Модуль для работы с модальным окном
+
+// импорт компонента Modal из bootstrap
+import { Modal } from "bootstrap";
+import { cntrls, imagePlaceholder } from "./lines-ui";
+
+// поиск модального окна на странице
+const modal = document.getElementById("items-update");
+// если он найден, то создается экземпляр компонента Modal
+// для программного управления модальным окном
+const myModal = modal ? new Modal(modal, {}) : null;
+
+// поиск тега с заголовком модального кона для его смены
+const modalTitle = document.getElementById("items-update-title");
+
+// обнуление значений модального окна, т. к.
+// используется одно окно для всех операций
+function resetValues() {
+    cntrls.lineId.value = "";
+    cntrls.ItName.value = "";
+    cntrls.itemsType.value = "";
+    cntrls.date.value = "";
+    cntrls.price.value = parseFloat(0).toFixed(2);
+    cntrls.place.value = "";
+    cntrls.image.value = "";
+    cntrls.imagePreview.src = imagePlaceholder;
+}
+
+// функция для показа модального окна
+// перед показом происходит заполнение формы для редактирования
+// если объект item не пуст
+export function showUpdateModal(item) {
+    modalTitle.innerHTML = item === null ? "Добавить" : "Изменить";
+    console.info(item);
+
+    if (item) {
+        cntrls.lineId.value = item.id;
+        cntrls.ItName.value = item.ItName;
+        cntrls.itemsType.value = item.itemsId;
+        cntrls.date.value = item.date;
+        cntrls.price.value = item.price;
+        cntrls.place.value = item.placesId;
+        // заполнение превью
+        // Если пользователь выбрал изображение, то оно загружается
+        // в тэг image с id image - preview
+        // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
+        cntrls.imagePreview.src = item.image ? item.image : imagePlaceholder;
+    } else {
+        resetValues();
+    }
+
+    myModal.show();
+}
+
+// функция для скрытия модального окна
+export function hideUpdateModal() {
+    resetValues();
+
+    // удаление класса was-validated для скрытия результатов валидации
+    cntrls.form.classList.remove("was-validated");
+
+    myModal.hide();
+}

js/js/lines-rest-api.js

@@ -0,0 +1,110 @@
+// модуль для работы с REST API сервера
+
+// адрес сервера
+const serverUrl = "http://localhost:8081";
+
+// функция возвращает объект нужной структуры для отправки на сервер
+function createLineObject(ItName, item, date, price, place, image) {
+    return {
+        ItName: ItName,
+        itemsId: item,
+        date: date,
+        price: parseFloat(price).toFixed(2),
+        placesId: place,
+        image,
+    };
+}
+
+// обращение к серверу для получения всех типов товара (get)
+export async function getAllItemTypes() {
+    const response = await fetch(`${serverUrl}/items`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для получения всех типов товара (get)
+export async function getAllItemPlaces() {
+    const response = await fetch(`${serverUrl}/places`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для получения всех записей (get)
+export async function getAllLines() {
+    const response = await fetch(`${serverUrl}/lines?_expand=items&_expand=places`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для получения записи по первичному ключу (id) (get)
+// id передается в качестве части пути URL get-запроса
+export async function getLine(id) {
+    const response = await fetch(`${serverUrl}/lines/${id}?_expand=items&_expand=places`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для создания записи (post)
+// объект отправляется в теле запроса (body)
+export async function createLine(ItName, item, date, price, place, image) {
+    const itemObject = createLineObject(ItName, item, date, price, place, image);
+
+    const options = {
+        method: "POST",
+        body: JSON.stringify(itemObject),
+        headers: {
+            "Accept": "application/json",
+            "Content-Type": "application/json",
+        },
+    };
+
+    const response = await fetch(`${serverUrl}/lines`, options);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для обновления записи по id (put)
+// объект отправляется в теле запроса (body)
+// id передается в качестве части пути URL get-запроса
+export async function updateLine(id, ItName, item, date, price, place, image) {
+    const itemObject = createLineObject(ItName, item, date, price, place, image);
+
+    const options = {
+        method: "PUT",
+        body: JSON.stringify(itemObject),
+        headers: {
+            "Accept": "application/json",
+            "Content-Type": "application/json",
+        },
+    };
+
+    const response = await fetch(`${serverUrl}/lines/${id}`, options);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для удаления записи по id (delete)
+// id передается в качестве части пути URL get-запроса
+export async function deleteLine(id) {
+    const options = {
+        method: "DELETE",
+    };
+
+    const response = await fetch(`${serverUrl}/lines/${id}`, options);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}

js/js/lines-ui.js

@@ -0,0 +1,114 @@
+// модуль для работы с элементами управления
+
+// объект для удобного получения элементов
+// при обращении к атрибуту объекта вызывается
+// нужная функция для поиска элемента
+export const cntrls = {
+    productContainer: document.getElementById("productСontainer"),
+    button: document.getElementById("items-add"),
+    table: document.querySelector("#items-table tbody"),
+    form: document.getElementById("items-form"),
+    lineId: document.getElementById("items-line-id"),
+    ItName: document.getElementById("ItName"),
+    itemsType: document.getElementById("item"),
+    date: document.getElementById("date"),
+    price: document.getElementById("price"),
+    place: document.getElementById("place"),
+    image: document.getElementById("image"),
+    imagePreview: document.getElementById("image-preview"),
+};
+
+// Дефолтное превью
+export const imagePlaceholder = "https://via.placeholder.com/200";
+
+// функция создает тег option для select
+// <option value="" selected>name</option>
+export function createItemsOption(name, value = "", isSelected = false) {
+    const option = document.createElement("option");
+    option.value = value || "";
+    option.selected = isSelected;
+    option.text = name;
+    return option;
+}
+
+// функция создает ссылку (a) для таблицы
+// содержимое тега a заполняется необходимой иконкой (icon)
+// при нажатии вызывается callback
+// ссылка "оборачивается" тегом td
+// <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></td>
+function createTableAnchor(icon, callback) {
+    const i = document.createElement("i");
+    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();
+    };
+
+    const td = document.createElement("td");
+    td.appendChild(a);
+    return td;
+}
+
+export function createAnchor(icon, callback) {
+    const i = document.createElement("i");
+    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) {
+    const td = document.createElement("td");
+    td.textContent = value;
+    return td;
+}
+
+// функция создает строку таблицы
+// <tr>
+// <th scope="row">index + 1</th>
+// <td>item.items.name</td>
+// <td>parseFloat(item.price).toFixed(2))</td>
+// <td>item.count</td>
+// <td>parseFloat(item.sum).toFixed(2))</td>
+// <td><a href="#" onclick="editCallback()"><i class="fa-solid fa-pencil"></i></a></td>
+// <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) {
+    const rowNumber = document.createElement("th");
+    rowNumber.scope = "row";
+    rowNumber.textContent = index + 1;
+
+    const row = document.createElement("tr");
+    row.id = `line-${item.id}`;
+
+    row.appendChild(rowNumber);
+    row.appendChild(createTableColumn(item.ItName));
+    row.appendChild(createTableColumn(item.items.name));
+    row.appendChild(createTableColumn(item.date));
+    row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
+    row.appendChild(createTableColumn(item.places.name));
+    // редактировать в модальном окне
+    row.appendChild(createTableAnchor("fa-pencil", editCallback));
+    // удаление
+    row.appendChild(createTableAnchor("fa-trash", deleteCallback));
+    return row;
+}

js/js/lines.js

@@ -0,0 +1,284 @@
+// модуль с логикой
+
+import { hideUpdateModal, showUpdateModal } from "./lines-modal";
+import {
+    createLine, deleteLine, getAllItemTypes, getAllItemPlaces, getAllLines, getLine, updateLine,
+} from "./lines-rest-api";
+import {
+    cntrls, createItemsOption, createTableRow, imagePlaceholder,
+} from "./lines-ui";
+
+async function drawItemsSelect() {
+    // вызов метода REST API для получения списка типов товаров
+    const data = await getAllItemTypes();
+    // очистка содержимого select
+    // удаляется все, что находится между тегами <select></select>
+    // но не атрибуты
+    cntrls.itemsType.innerHTML = "";
+    // пустое значение
+    cntrls.itemsType.appendChild(createItemsOption("Выберите значение", "", true));
+    // цикл по результату ответа от сервера
+    // используется лямбда-выражение
+    // (item) => {} аналогично function(item) {}
+    data.forEach((item) => {
+        cntrls.itemsType.appendChild(createItemsOption(item.name, item.id));
+    });
+}
+
+async function drawPlacesSelect() {
+    // вызов метода REST API для получения списка типов товаров
+    const data = await getAllItemPlaces();
+    // очистка содержимого select
+    // удаляется все, что находится между тегами <select></select>
+    // но не атрибуты
+    cntrls.place.innerHTML = "";
+    // пустое значение
+    cntrls.place.appendChild(createItemsOption("Выберите значение", "", true));
+    // цикл по результату ответа от сервера
+    // используется лямбда-выражение
+    // (item) => {} аналогично function(item) {}
+    data.forEach((item) => {
+        cntrls.place.appendChild(createItemsOption(item.name, item.id));
+    });
+}
+
+async function drawLinesTable() {
+    console.info("Try to load data");
+    if (!cntrls.table) {
+        return;
+    }
+    // вызов метода REST API для получения всех записей
+    const data = await getAllLines();
+    // очистка содержимого table
+    // удаляется все, что находится между тегами <table></table>
+    // но не атрибуты
+    cntrls.table.innerHTML = "";
+    // цикл по результату ответа от сервера
+    // используется лямбда-выражение
+    // (item, index) => {} аналогично function(item, index) {}
+    data.forEach((item, index) => {
+        cntrls.table.appendChild(
+            createTableRow(
+                item,
+                index,
+                // функции передаются в качестве параметра
+                // это очень удобно, так как аргументы функций доступны только
+                // в данном месте кода и не передаются в сервисные модули
+                () => showUpdateModal(item),
+                () => location.assign(`page-edit.html?id=${item.id}`),
+                () => removeLine(item.id),
+            ),
+        );
+    });
+}
+
+async function addLine(ItName, item, date, price, place, image) {
+    console.info("Try to add item");
+    // вызов метода REST API для добавления записи
+    const data = await createLine(ItName, item, date, price, place, image);
+    console.info("Added");
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+async function editLine(id, ItName, item, date, price, place, image) {
+    console.info("Try to update item");
+    // вызов метода REST API для обновления записи
+    const data = await updateLine(id, ItName, item, date, price, place, image);
+    console.info("Updated");
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+async function removeLine(id) {
+    if (!confirm("Do you really want to remove this item?")) {
+        console.info("Canceled");
+        return;
+    }
+    console.info("Try to remove item");
+    // вызов метода REST API для удаления записи
+    const data = await deleteLine(id);
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+// функция для получения содержимого файла в виде base64 строки
+// https://ru.wikipedia.org/wiki/Base64
+async function readFile(file) {
+    const reader = new FileReader();
+
+    // создание Promise-объекта для использования функции
+    // с помощью await (асинхронно) без коллбэков (callback)
+    // https://learn.javascript.ru/promise
+    return new Promise((resolve, reject) => {
+        // 2. "Возвращаем" содержимое когда файл прочитан
+        // через вызов resolve
+        // Если не использовать Promise, то всю работу по взаимодействию
+        // с REST API пришлось бы делать в обработчике (callback) функции
+        // onloadend
+        reader.onloadend = () => {
+            const fileContent = reader.result;
+            // Здесь могла бы быть работа с REST API
+            // Чтение заканчивает выполняться здесь
+            resolve(fileContent);
+        };
+        // 3. Возвращаем ошибку
+        reader.onerror = () => {
+            // Или здесь в случае ошибки
+            reject(new Error("oops, something went wrong with the file reader."));
+        };
+        // Шаг 1. Сначала читаем файл
+        // Чтение начинает выполняться здесь
+        reader.readAsDataURL(file);
+    });
+}
+
+// функция для обновления блока с превью выбранного изображения
+async function updateImagePreview() {
+    // получение выбранного файла
+    // возможен выбор нескольких файлов, поэтому необходимо получить только первый
+    const file = cntrls.image.files[0];
+    // чтение содержимого файла в виде base64 строки
+    const fileContent = await readFile(file);
+    console.info("base64 ", fileContent);
+    // обновление атрибута src для тега img с id image-preview
+    cntrls.imagePreview.src = fileContent;
+}
+
+// Функция для обработки создания и редактирования элементов таблицы через модальное окно
+// Если хотите делать через страницу, то удалите эту функцию
+export function linesForm() {
+    console.info("linesForm");
+
+    // загрузка и заполнение select со списком товаров
+    drawItemsSelect();
+    drawPlacesSelect();
+    // загрузка и заполнение table
+    drawLinesTable();
+
+    // Вызов функции обновления превью изображения при возникновении
+    // события oncahnge в тэге input с id image
+    cntrls.image.addEventListener("change", () => updateImagePreview());
+
+    //  обработчик события нажатия на кнопку для показа модального окна
+    cntrls.button.addEventListener("click", () => showUpdateModal(null));
+
+    // обработчик события отправки формы
+    // возникает при нажатии на кнопку (button) с типом submit
+    // кнопка должна находится внутри тега form
+    cntrls.form.addEventListener("submit", async (event) => {
+        console.info("Form onSubmit");
+        // отключение стандартного поведения формы при отправке
+        // при отправке страница обновляется и JS перестает работать
+        event.preventDefault();
+        event.stopPropagation();
+        // если форма не прошла валидацию, то ничего делать не нужно
+        if (!cntrls.form.checkValidity()) {
+            return;
+        }
+
+        let imageBase64 = "";
+        // Получение выбранного пользователем изображения в виде base64 строки
+        // Если пользователь ничего не выбрал, то не нужно сохранять в БД
+        // дефолтное изображение
+        if (cntrls.imagePreview.src !== imagePlaceholder) {
+            // Загрузка содержимого атрибута src тэга img с id image-preview
+            // Здесь выполняется HTTP запрос с типом GET
+            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.ItName.value,
+                cntrls.itemsType.value,
+                cntrls.date.value,
+                cntrls.price.value,
+                cntrls.place.value,
+                imageBase64,
+            );
+        } else {
+            await editLine(
+                currentId,
+                cntrls.ItName.value,
+                cntrls.itemsType.value,
+                cntrls.date.value,
+                cntrls.price.value,
+                cntrls.place.value,
+                imageBase64,
+            );
+        }
+
+        // после выполнения добавления/обновления модальное окно скрывается
+        hideUpdateModal();
+    });
+}
+
+
+function clearCollection() {
+    const newsElements = document.querySelectorAll(".mainDiv");
+    newsElements.forEach((element) => element.remove());
+}
+export async function UpdateCollection() {
+    clearCollection();
+    console.info("UpdateNews");
+
+    const data = await getAllLines();
+
+    data.forEach((item) => {
+        document.addEventListener("DOMContentLoaded", async (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        });   
+
+    const div0 = document.createElement("div");
+    div0.setAttribute("class", "col-md-3 product my-2");
+
+    const div2 = document.createElement("div");
+    div2.setAttribute("class", "product-img")
+
+    const image = document.createElement("img");
+    image.setAttribute("class", "img-fluid");
+    image.setAttribute("src", item.image);
+    image.setAttribute("width", "100%");
+    image.setAttribute("alt", item.ItName);
+    image.setAttribute("onclick", "location.href='./detail_page.html?name=" + item.ItName +"'");
+    div2.appendChild(image);
+
+    const div3 = document.createElement("div");
+    div3.setAttribute("class", "product-info");
+
+    const h2 = document.createElement("h2");
+    h2.textContent = item.ItName;
+    div3.appendChild(h2);
+
+    const p1 = document.createElement("p");
+    p1.textContent = item.data;
+    div3.appendChild(p1);
+
+    const p2 = document.createElement("p");
+    p1.textContent = item.price + "$";
+    div3.appendChild(p2);
+
+    div0.appendChild(div2);
+    div0.appendChild(div3);
+
+    const collectionContainer = document.getElementById("collectionContainer");
+    collectionContainer.appendChild(div0);
+});
+}

js/js/script.js

@@ -0,0 +1,33 @@
+    document.addEventListener("DOMContentLoaded", function() {
+    const eventName = ''; // Получаем название мероприятия из предыдущей страницы
+    const urlParams = new URLSearchParams(window.location.search);
+    const artistName = urlParams.get('name');
+    document.getElementById('artistName').textContent = artistName;
+
+    const heroSection = document.getElementById('heroSection');
+    const eventDescription = document.getElementById('eventDescription');
+    const eventDates = document.getElementById('eventDates');
+    const eventPerformers = document.getElementById('eventPerformers');
+  
+    // Загрузка изображения мероприятия
+    heroSection.style.background = `url('pictures/${eventName}.jpg') center/cover no-repeat`;
+  
+    // Загрузка информации из .txt файлов с помощью JavaScript
+    fetch(`artists/${eventName}-description.txt`)
+      .then(response => response.text())
+      .then(data => {
+        eventDescription.textContent = data;
+      });
+  
+    fetch(`artists/${eventName}-dates.txt`)
+      .then(response => response.text())
+      .then(data => {
+        eventDates.textContent = data;
+      });
+  
+    fetch(`artists/${eventName}-performers.txt`)
+      .then(response => response.text())
+      .then(data => {
+        eventPerformers.textContent = data;
+      });
+  });

js/js/validation.js

@@ -0,0 +1,25 @@
+// модуль используется для валидации форма на странице
+
+function validation() {
+    // поиск всех форма с классом .needs-validation
+    const forms = document.querySelectorAll("form.needs-validation");
+
+    for (let i = 0; i < forms.length; i += 1) {
+        const form = forms[i];
+        // для каждой формы добавляется обработчик события отправки
+        form.addEventListener("submit", (event) => {
+            // если форма не прошла валидацию
+            // то выключить стандартное действие
+            if (!form.checkValidity()) {
+                event.preventDefault();
+                // предотвращает распространение preventDefault
+                // на другие объекты
+                event.stopPropagation();
+            }
+            // добавляет к форме класс was-validated
+            form.classList.add("was-validated");
+        });
+    }
+}
+
+export default validation;

js/lines-ui.js

@@ -4,6 +4,7 @@
 // при обращении к атрибуту объекта вызывается
 // нужная функция для поиска элемента
 export const cntrls = {
+    productContainer: document.getElementById("productСontainer"),
     button: document.getElementById("items-add"),
     table: document.querySelector("#items-table tbody"),
     form: document.getElementById("items-form"),
@@ -54,6 +55,24 @@ function createTableAnchor(icon, callback) {
     return td;
 }
 
+export function createAnchor(icon, callback) {
+    const i = document.createElement("i");
+    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) {

js/lines.js

@@ -229,106 +229,56 @@ export function linesForm() {
     });
 }
 
-// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
-// Если хотите делать через модальное окно, то удалите эту функцию
-export async function linesPageForm() {
-    console.info("linesPageForm");
 
-    // загрузка и заполнение select со списком товаров
+function clearCollection() {
-    drawItemsSelect();
+    const newsElements = document.querySelectorAll(".mainDiv");
-    drawPlacesSelect();
+    newsElements.forEach((element) => element.remove());
-
+}
-    // func1 = (id) => {} аналогично function func1(id) {}
+export async function UpdateCollection() {
-    const goBack = () => location.assign("/lkAdmin.html");
+    clearCollection();
-
+    console.info("UpdateNews");
-    // Вызов функции обновления превью изображения при возникновении
+
-    // события onchange в тэге input с id image
+    const data = await getAllLines();
-    cntrls.image.addEventListener("change", () => updateImagePreview());
+
-
+    data.forEach((item) => {
-    // получение параметров GET-запроса из URL
+        document.addEventListener("DOMContentLoaded", async (event) => {
-    // параметры перечислены после символа ? (?id=1&color=black&...)
+            event.preventDefault();
-    const urlParams = new URLSearchParams(location.search);
+            event.stopPropagation();
-
+        });   
-    // получение значения конкретного параметра (id)
+
-    // указан только при редактировании
+    const div0 = document.createElement("div");
-    const currentId = urlParams.get("id");
+    div0.setAttribute("class", "col-md-3 product my-2");
-    // если id задан
+
-    if (currentId) {
+    const div2 = document.createElement("div");
-        try {
+    div2.setAttribute("class", "product-img")
-            // вызов метода REST API для получения записи по первичному ключу(id)
+
-            const line = await getLine(currentId);
+    const image = document.createElement("img");
-            // заполнение формы для редактирования
+    image.setAttribute("class", "img-fluid");
-            cntrls.ItName.value = line.ItName;
+    image.setAttribute("src", item.image);
-            cntrls.itemsType.value = line.itemsId;
+    image.setAttribute("width", "100%");
-            cntrls.date.value = line.date;
+    image.setAttribute("alt", item.ItName);
-            cntrls.price.value = line.price;
+    image.setAttribute("onclick", "location.href='./detail_page.html?name=" + item.ItName +"'");
-            cntrls.place.value = line.placesId;
+    div2.appendChild(image);
-            // заполнение превью
+
-            // Если пользователь выбрал изображение, то оно загружается
+    const div3 = document.createElement("div");
-            // в тэг image с id image - preview
+    div3.setAttribute("class", "product-info");
-            // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
+
-            cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
+    const h2 = document.createElement("h2");
-        } catch {
+    h2.textContent = item.ItName;
-            // в случае ошибки происходит возврат к page4
+    div3.appendChild(h2);
-            goBack();
+
-        }
+    const p1 = document.createElement("p");
-    }
+    p1.textContent = item.data;
-
+    div3.appendChild(p1);
-    // обработчик события отправки формы
+
-    // возникает при нажатии на кнопку (button) с типом submit
+    const p2 = document.createElement("p");
-    // кнопка должна находится внутри тега form
+    p1.textContent = item.price + "$";
-    cntrls.form.addEventListener("submit", async (event) => {
+    div3.appendChild(p2);
-        console.info("Form onSubmit");
+
-        // отключение стандартного поведения формы при отправке
+    div0.appendChild(div2);
-        // при отправке страница обновляется и JS перестает работать
+    div0.appendChild(div3);
-        event.preventDefault();
+
-        event.stopPropagation();
+    const collectionContainer = document.getElementById("collectionContainer");
-        // если форма не прошла валидацию, то ничего делать не нужно
+    collectionContainer.appendChild(div0);
-        if (!cntrls.form.checkValidity()) {
+});
-            return;
-        }
-
-        let imageBase64 = "";
-        // Получение выбранного пользователем изображения в виде base64 строки
-        // Если пользователь ничего не выбрал, то не нужно сохранять в БД
-        // дефолтное изображение
-        if (cntrls.imagePreview.src !== imagePlaceholder) {
-            // Загрузка содержимого атрибута src тэга img с id image-preview
-            // Здесь выполняется HTTP запрос с типом GET
-            const result = await fetch(cntrls.imagePreview.src);
-            // Получение из HTTP-ответа бинарного содержимого
-            const blob = await result.blob();
-            // Получение base64 строки для файла
-            // Здесь выполняется Promise из функции readFile
-            // Promise позволяет писать линейный код для работы с асинхронными методами
-            // без использования обработчиков (callback) с помощью await
-            imageBase64 = await readFile(blob);
-        }
-
-        // если значение параметра запроса не задано,
-        // то необходимо выполнить добавление записи
-        // иначе обновление записи
-        if (!currentId) {
-            await addLine(
-                cntrls.ItName.value,
-                cntrls.itemsType.value,
-                cntrls.date.value,
-                cntrls.price.value,
-                cntrls.place.value,
-                imageBase64,
-            );
-        } else {
-            await editLine(
-                currentId,
-                cntrls.ItName.value,
-                cntrls.itemsType.value,
-                cntrls.date.value,
-                cntrls.price.value,
-                cntrls.place.value,
-                imageBase64,
-            );
-        }
-        // возврат к странице page4
-        goBack();
-    });
 }

lkAdmin.html

@@ -54,14 +54,14 @@
         <div>
             <table id="items-table" class="table table-striped">
                 <thead>
-                    <th scope="col">№</th>
+                    <th scope="col" style="background-color:#2F2727; color:white;">№</th>
-                    <th scope="col">Название</th>
+                    <th scope="col" style="background-color:#2F2727; color:white;">Название</th>
-                    <th scope="col">Тип события</th>
+                    <th scope="col" style="background-color:#2F2727; color:white;">Тип события</th>
-                    <th scope="col">Дата проведения</th>
+                    <th scope="col" style="background-color:#2F2727; color:white;">Дата проведения</th>
-                    <th scope="col">Стоимость</th>
+                    <th scope="col" style="background-color:#2F2727; color:white;">Стоимость</th>
-                    <th scope="col">Место проведения</th>
+                    <th scope="col" style="background-color:#2F2727; color:white;">Место проведения</th>
-                    <th scope="col"></th>
+                    <th scope="col" style="background-color:#2F2727; color:white;"></th>
-                    <th scope="col"></th>
+                    <th scope="col" style="background-color:#2F2727; color:white;"></th>
                 </thead>
                 <tbody></tbody>
             </table>

page2(concerts).html

@@ -18,7 +18,7 @@
     </script>
 
 </head>
-<body class="h-100 d-flex flex-column">
+<body class="h-100 d-flex flex-column" style="overflow-x: hidden;">
     <div id="menu-wrapper">
         <div id="menu">
             <ul>
@@ -52,131 +52,22 @@
         </div>
     </nav>
 </header>
-<main class="container-fluid p-2">
+<main>
     <div class="container">
-        <div class="row">
+        <div class="row" id="collectionContainer">
-            <div class="col-md-3 product mb-3"><!--col-md-3 - ширина элемента, col-md-* - 992px mb-3 - отступы по вертикали-->
-                <div class="product-img">
-                    <img src="pictures/ac_dc.jpg" alt="AC/DC" class="img-fluid" onclick="location.href='./detail_page.html?name=ac_dc'">
-                </div>
-                <div class="product-info">
-                    <h2 onclick="location.href='./detail_page.html?name=ac_dc'">AC/DC</h2>
-                    <p>08.12.23</p>
-                    <p>Price: $10</p>
-                    <p>Place: Russia, Moscow</p>
-                    <div class="button-overlayAdd">
-                        <button class="btn btn-primary" onclick="">add to cart</button>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-3 product mb-3">
-                <div class="product-img">
-                    <img src="pictures/deftones.jpg" alt="Deftones" class="img-fluid" onclick="location.href='./detail_page.html?name=deftones'">
-                </div>
-                <div class="product-info">
-                    <h2 onclick="location.href='./detail_page.html?name=deftones'">Deftones</h2>
-                    <p>03.07.24</p>
-                    <p>Price: $15</p>
-                    <p>Place: USA, California</p>
-                    <div class="button-overlayAdd">
-                        <button class="btn btn-primary" onclick="">add to cart</button>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-3 product mb-3">
-                <div class="product-img">
-                    <img src="pictures/placebo.jpg" alt="Placebo" class="img-fluid" onclick="location.href='./detail_page.html?name=placebo'">
-                </div>
-                <div class="product-info">
-                    <h2 onclick="location.href='./detail_page.html?name=placebo'">Placebo</h2>
-                    <p>04.05.24</p>
-                    <p>Price: $20</p>
-                    <p>Place: Canada, Ottawa</p>
-                    <div class="button-overlayAdd">
-                        <button class="btn btn-primary" onclick="">add to cart</button>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-3 product mb-3">
-                <div class="product-img">
-                    <img src="pictures/slipknot.jpg" alt="Slipknot" class="img-fluid" onclick="location.href='./detail_page.html?name=slipknot'">
-                </div>
-                <div class="product-info">
-                    <h2 onclick="location.href='./detail_page.html?name=slipknot'">Slipknot</h2>
-                    <p>09.02.24</p>
-                    <p>Price: $20</p>
-                    <p>Place: Germany, Berlin</p>
-                    <div class="button-overlayAdd">
-                        <button class="btn btn-primary" onclick="">add to cart</button>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-3 product mb-3">
-                <div class="product-img">
-                    <img src="pictures/the_cure.jpg" alt="The Cure" class="img-fluid" onclick="location.href='./detail_page.html?name=the_cure'">
-                </div>
-                <div class="product-info">
-                    <h2 onclick="location.href='./detail_page.html?name=the_cure'">The Cure</h2>
-                    <p>25.07.25</p>
-                    <p>Price: $20</p>
-                    <p>Place: Germany, Berlin</p>
-                    <div class="button-overlayAdd">
-                        <button class="btn btn-primary" onclick="">add to cart</button>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-3 product mb-3">
-                <div class="product-img">
-                    <img src="pictures/weezer.jpg" alt="Weezer" class="img-fluid" onclick="location.href='./detail_page.html?name=weezer'">
-                </div>
-                <div class="product-info">
-                    <h2 onclick="location.href='./detail_page.html?name=weezer'">Weezer</h2>
-                    <p>19.08.23</p>
-                    <p>Price: $20</p>
-                    <p>Place: Germany, Berlin</p>
-                    <div class="button-overlayAdd">
-                        <button class="btn btn-primary" onclick="">add to cart</button>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 </main>
+
 <footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
     Иевлева Милана, 2023
 </footer>
+<script type = "module">
+    import { UpdateCollection,  } from "./js/lines";
+    document.addEventListener('DOMContentLoaded', () => {
+
+        UpdateCollection();
+    });
+</script>
 </body>
 </html>
-
-<!--<p class="text-center">
-        Вторая страница содержит пример рисунка (рис. 1) и таблицы (таб. 1).
-    </p>
-    <div class="text-center">
-        <img src="./logo.png" alt="logo" width="128">
-        <br>
-        Рис. 1. Пример рисунка.
-    </div>
-    <div class="mt-3 row justify-content-center">
-        <table class="table table-bordered w-50">
-            <caption>Таблица 1. Пример таблицы.</caption>
-            <thead>
-            <tr>
-                <th class="w-25">Номер</th>
-                <th>ФИО</th>
-                <th class="w-25">Телефон</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-                <td>1</td>
-                <td>Иванов</td>
-                <td>89999999999</td>
-            </tr>
-            <tr>
-                <td>2</td>
-                <td>Петров</td>
-                <td>89999999991</td>
-            </tr>
-            </tbody>
-        </table>
-    </div>-->

style.css

@@ -13,6 +13,7 @@ head{
 header nav {
     font-family: 'Correction Tape', sans-serif;
     background-color:#2F2727;
+    color:#fafafa;
 }
 
 @media (min-width: 768px) {
@@ -209,6 +210,7 @@ h4 {
       border: 5px solid #1b1818;
       border-radius: 5px;
       text-align: center;
+      color:#fafafa;
 }
 
 .product img {
@@ -267,6 +269,7 @@ h4 {
   grid-auto-flow: row dense;
   /* Отступы между ячейками */
   gap: 2%;
+  color:#fafafa;
   }
 
 .row1 {