PIbd-22.-Stroev-V.M.-Internet-Programm/Lab3/js/lines.js

import { hideUpdateModal, showUpdateModal } from "./lines-modal";
import {
    // getAllItemTypes,
    createLine, deleteLine, getAllLines, updateLine,
} from "./lines-rest-api";
import {
    // createItemsOption,
    cntrls, createTableRow, createAnchor, imagePlaceholder,
} from "./lines-ui";

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),
                () => removeLine(item.id),
            ),
        );
    });
}

async function addLine(itemName, description, image) {
    console.info("Try to add item");
    // вызов метода REST API для добавления записи
    const data = await createLine(itemName, description, image);
    console.info("Added");
    console.info(data);
    // загрузка и заполнение table
    drawLinesTable();
    console.info(window.location.pathname);
    if (window.location.pathname === "/index.html") {
        UpdateNews();
    }
}

async function editLine(id, itemName, description, image) {
    console.info("Try to update item");
    // вызов метода REST API для обновления записи
    const data = await updateLine(id, itemName, description, image);
    console.info("Updated");
    console.info(data);
    // загрузка и заполнение table
    drawLinesTable();
    console.info(window.location.pathname);
    if (window.location.pathname.toLowerCase() === "/index.html") {
        UpdateNews();
    }
}

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();
    console.info(window.location.pathname);
    if (window.location.pathname === "/index.html") {
        UpdateNews();
    }
}

// функция для получения содержимого файла в виде 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.itemImage.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();
    // загрузка и заполнение table
    drawLinesTable();

    // Вызов функции обновления превью изображения при возникновении
    // события oncahnge в тэге input с id image
    cntrls.itemImage.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
            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.itemName.value,
                cntrls.itemDescription.value,
                imageBase64,
            );
        } else {
            await editLine(
                currentId,
                cntrls.itemName.value,
                cntrls.itemDescription.value,
                imageBase64,
            );
        }

        // после выполнения добавления/обновления модальное окно скрывается
        hideUpdateModal();
    });
}
/* <div class = "row">
        <div class = "col mt-4">
            <div class = "rectNews d-flex flex-column">
                <img class ="imageNew1" src = "./images/New1.png" alt = "New1" width = "100%">
                <div class = "rectNewsTextBox">
                <span class = "rectNewsText">
                    <b>УлГТУ вошёл в топ-250 лучших вузов</b>
                </span>
            </div>
            </div>
        </div>
        <div class = "col mt-4">
            <div class = "rectNews d-flex flex-column position-relative">
                <img src = "./images/New2.png" alt = "New2" width="100%">
                <div class = "rectNewsTextBox">
                <span class = "rectNewsText">
                    <b>“Мосты в будущее” будут видны из УлГТУ</b>
                </span>
            </div>
            </div>
        </div>
    </div>
    <div class ="row">
        <div class ="col mt-5">
            <div class = "rectNews d-flex flex-column position-relative">
                <img src = "./images/New3.png" alt = "New3" width="100%">
                <div class = "rectNewsTextBox">
                <span class = "rectNewsText">
                    <b>Поправки в системе работы приёмной комиссии</b>
                </span>
            </div>
            </div>
        </div>
        <div class = "col mt-5">
            <div class = "rectNews d-flex flex-column position-relative">
                <img src = "./images/New4.png" alt = "New4" width="100%">
                <div class = "rectNewsTextBox">
                <span class = "rectNewsText">
                    <b>Студенты возвращаются к учёбе после зимней сессии позже, чем раньше</b>
                </span>
            </div>
            </div>
            <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 mb-4");
    const div3 = document.createElement("div");
    div3.setAttribute("class", "rectNews d-flex flex-column");
    const image = document.createElement("img");
    image.setAttribute("class", "rectNew");
    image.setAttribute("src", item.image);
    image.setAttribute("width", "100%");
    image.setAttribute("alt", item.name);
    const div4 = document.createElement("div");
    div4.setAttribute("class", "rectNewsTextBox text-center");
    const span1 = document.createElement("span");
    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("UpdateNews");

    const data = await getAllLines();
    const div1 = document.createElement("div");
    div1.setAttribute("class", "mainDiv row");

    data.forEach((item) => {
        cntrls.form.addEventListener("submit", async (event) => {
            event.preventDefault();
            event.stopPropagation();
        });
        UpdateNew(div1, item);
        document.body.appendChild(div1);
});
}