PIbd-22_Kaznacheeva.E.K_Internet_Programming/lab3/js/lines.js

// модуль с логикой

import { hideUpdateModal, showUpdateModal } from "./lines-modal";
import {
    createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
} from "./lines-rest-api";
import {
    cntrls, createItemsOption, createTableRow, imagePlaceholder,
    // createTableAnchor,
} 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 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 drawLinesTableOnIndex() {
//     console.info("Try to load data On Index");
//     if (!cntrls.container) {
//       return;
//     }
//     // вызов метода REST API для получения всех записей
//     const data = await getAllLines();
//     // очистка содержимого table
//     // удаляется все, что находится между тегами <table></table>
//     // но не атрибуты
//     cntrls.container.innerHTML = "";
//     // цикл по результату ответа от сервера
//     // используется лямбда-выражение
//     // (item, index) => {} аналогично function(item, index) {}
//     data.forEach((item, index) => {
//       cntrls.container.appendChild(
//         createCards(
//           item,
//           index,
//           // функции передаются в качестве параметра
//           // это очень удобно, так как аргументы функций доступны только
//           // в данном месте кода и не передаются в сервисные модули
//           () => showUpdateModal(item),
//           () => location.assign(`master.html?id=${item.id}`),
//           () => removeLine(item.id),
//         ),
//       );
//     });
//   }
async function addLine(item, title, price, description, image) {
    console.info("Try to add item");
    // вызов метода REST API для добавления записи
    const data = await createLine(item, title, price, description, image);
    console.info("Added");
    console.info(data);
    // загрузка и заполнение table
    drawLinesTable();
}

async function editLine(id, item, title, price, description, image) {
    console.info("Try to update item");
    // вызов метода REST API для обновления записи
    const data = await updateLine(id, item, title, price, description, 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 async function createCards() {
    console.info("createCards");
    try {
    const container = document.getElementById("cards-container");

       const data = await getAllLines();
       console.log("data", data);

        data.forEach((line, index) => {
            console.log("line", line, index);
            const cardDiv = document.createElement("div");
            cardDiv.className = "col";

            const card = document.createElement("div");
            card.className = "card";

            const img = document.createElement("img");
            img.src = line.image !== "" ? line.image : "images/alone.jpg";
            img.className = "rounded-img";
            img.alt = "KITTI";
            img.style.maxHeight = "500px";

            const cardBody = document.createElement("div");
            cardBody.className = "card-body";

            const title = document.createElement("h5");
            title.className = "card-title";
            title.textContent = line.title;

            const price = document.createElement("h6");
            price.className = "card-title";
            price.textContent = line.price;

            const description = document.createElement("p");
            description.className = "card-text";
            description.innerHTML = line.description;

            cardBody.appendChild(title);
            cardBody.appendChild(price);
            cardBody.appendChild(description);

            card.appendChild(img);
            card.appendChild(cardBody);

            cardDiv.appendChild(card);
            // cardDiv.appendChild(createTableAnchor("bi-file-plus", () => showUpdateModal(line)));
            // cardDiv.appendChild(createTableAnchor("bi-trash", () => removeLine(line.id)));

            container.appendChild(cardDiv);
        });
    } catch (error) {
        console.error("Error fetching data:", error);
    }
}

// Функция для обработки создания и редактирования элементов таблицы через модальное окно
// Если хотите делать через страницу, то удалите эту функцию
export function linesForm(isCheckEvent = true) {
    console.info("linesForm");

    // загрузка и заполнение select со списком товаров
    drawItemsSelect();
    // // загрузка и заполнение table
    drawLinesTable();

    if (isCheckEvent === true) {
        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()) {
            console.log("MYsubmit", cntrls);
            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 не задано,
        // то необходимо выполнить добавление записи
        // иначе обновление записи
        console.log("MYsubmit", cntrls);
        if (!currentId) {
            await addLine(
                cntrls.itemsType.value,
                cntrls.title.value,
                cntrls.price.value,
                cntrls.description.value,
                imageBase64,
            );
        } else {
            await editLine(
                currentId,
                cntrls.itemsType.value,
                cntrls.title.value,
                cntrls.price.value,
                cntrls.description.value,
                imageBase64,
            );
        }

        // после выполнения добавления/обновления модальное окно скрывается
        hideUpdateModal();
    });
}
// export async function linesFormOnIndex() {
//     console.info("linesFormOnIndex");

//     await drawItemsSelect();
//     await drawLinesTableOnIndex();

//     // обработчик события отправки формы
//     // возникает при нажатии на кнопку (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.itemsType.value,
//           cntrls.title.value,
//           cntrls.price.value,
//           cntrls.description.value,
//           imageBase64,
//         );
//       } else {
//         await editLine(
//             currentId,
//             cntrls.itemsType.value,
//             cntrls.title.value,
//             cntrls.price.value,
//             cntrls.description.value,
//           imageBase64,
//         );
//       }
//       // после выполнения добавления/обновления модальное окно скрывается
//       hideUpdateModal();
//     });
//   }

// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
// Если хотите делать через модальное окно, то удалите эту функцию
export async function linesPageForm() {
    console.info("linesPageForm");

    // загрузка и заполнение select со списком товаров
    drawItemsSelect();

    // func1 = (id) => {} аналогично function func1(id) {}
    const goBack = () => location.assign("/page4.html");

    // Вызов функции обновления превью изображения при возникновении
    // события onchange в тэге input с id image
    cntrls.image.addEventListener("change", () => updateImagePreview());

    // получение параметров GET-запроса из URL
    // параметры перечислены после символа ? (?id=1&color=black&...)
    const urlParams = new URLSearchParams(location.search);

    // получение значения конкретного параметра (id)
    // указан только при редактировании
    const currentId = urlParams.get("id");
    // если id задан
    if (currentId) {
        try {
            // вызов метода REST API для получения записи по первичному ключу(id)
            const line = await getLine(currentId);
            // заполнение формы для редактирования
            cntrls.itemsType.value = line.itemsId;
            cntrls.title.value = line.title;
            cntrls.price.value = line.price;
            cntrls.description.value = line.description;
            // заполнение превью
            // Если пользователь выбрал изображение, то оно загружается
            // в тэг image с id image - preview
            // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
            cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
        } catch {
            // в случае ошибки происходит возврат к page4
            goBack();
        }
    }

    // обработчик события отправки формы
    // возникает при нажатии на кнопку (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);
        }

        // если значение параметра запроса не задано,
        // то необходимо выполнить добавление записи
        // иначе обновление записи
        if (!currentId) {
            await addLine(
                cntrls.itemsType.value,
                cntrls.title.value,
                cntrls.price.value,
                cntrls.description.value,
                imageBase64,
            );
        } else {
            await editLine(
                currentId,
                cntrls.itemsType.value,
                cntrls.title.value,
                cntrls.price.value,
                cntrls.description.value,
                imageBase64,
            );
        }
        // возврат к странице page4
        goBack();
    });
}