/* eslint-disable linebreak-style */ // eslint-disable-next-line linebreak-style /* eslint-disable spaced-comment */ /* eslint-disable linebreak-style */ /* eslint-disable comma-dangle */ /* eslint-disable linebreak-style */ /* eslint-disable no-trailing-spaces */ /* eslint-disable linebreak-style */ // модуль с логикой import { hideUpdateModal, showUpdateModal } from "./lines-modal"; import { createLine, deleteLine, getAllGengeTypes, getAllAuthorTypes, getAllLines, getLine, updateLine, } from "./lines-rest-api"; import { cntrls, createTableRow, imagePlaceholder, createGenresOption, createAuthorsOption, createTableRowOnIndex } from "./lines-ui"; async function drawGenreSelect() { // вызов метода REST API для получения списка типов товаров const data = await getAllGengeTypes(); const data2 = await getAllAuthorTypes(); // очистка содержимого select // удаляется все, что находится между тегами // но не атрибуты cntrls.genresType.innerHTML = ""; cntrls.authorsType.innerHTML = ""; // пустое значение cntrls.genresType.appendChild(createGenresOption("Выберите значение", "", true)); cntrls.authorsType.appendChild(createGenresOption("Выберите значение", "", true)); // цикл по результату ответа от сервера // используется лямбда-выражение // (item) => {} аналогично function(item) {} data.forEach((genre) => { cntrls.genresType.appendChild(createGenresOption(genre.name, genre.id)); }); data2.forEach((author) => { cntrls.authorsType.appendChild(createAuthorsOption(author.name, author.id)); }); } async function drawLinesTable() { console.info("Try to load data"); if (!cntrls.table) { return; } // вызов метода REST API для получения всех записей const data = await getAllLines(); // очистка содержимого 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 drawLinesTableOnIndex() { console.info("Try to load data On Index"); if (!cntrls.container) { return; } // вызов метода REST API для получения всех записей const data = await getAllLines(); // очистка содержимого table // удаляется все, что находится между тегами
// но не атрибуты cntrls.container.innerHTML = ""; // цикл по результату ответа от сервера // используется лямбда-выражение // (item, index) => {} аналогично function(item, index) {} data.forEach((item, index) => { cntrls.container.appendChild( createTableRowOnIndex( item, index, // функции передаются в качестве параметра // это очень удобно, так как аргументы функций доступны только // в данном месте кода и не передаются в сервисные модули () => showUpdateModal(item), () => location.assign(`page3.html?id=${item.id}`), () => removeLine(item.id), ), ); }); } async function addLine(nameBook, authorsType, genresType, year, description, count, image) { console.info("Try to add item"); // вызов метода REST API для добавления записи const data = await createLine(nameBook, authorsType, genresType, year, description, count, image); console.info("Added"); console.info(data); // загрузка и заполнение table drawLinesTable(); } async function editLine(id, nameBook, authorsType, genresType, year, description, count, image) { console.info("Try to update item"); console.log(id, nameBook, authorsType, genresType, description, count, image); // вызов метода REST API для обновления записи // eslint-disable-next-line max-len const data = await updateLine(id, nameBook, authorsType, genresType, year, description, count, image); console.info("Updated"); console.info(data); // загрузка и заполнение table drawLinesTable(); } async function removeLine(id) { if (!confirm("Вы точно хотите удалить этот товар?")) { 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 со списком товаров drawGenreSelect(); //drawAuthorSelect(); // загрузка и заполнение 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.nameBook.value, cntrls.authorsType.value, cntrls.genresType.value, cntrls.year.value, cntrls.description.value, cntrls.count.value, imageBase64, ); } else { await editLine( currentId, cntrls.nameBook.value, cntrls.authorsType.value, cntrls.genresType.value, cntrls.year.value, cntrls.description.value, cntrls.count.value, imageBase64, ); } // после выполнения добавления/обновления модальное окно скрывается hideUpdateModal(); }); } export async function linesFormOnIndex() { console.info("linesFormOnIndex"); // await drawGenreSelect(); 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.nameBook.value, cntrls.authorsType.value, cntrls.genresType.value, cntrls.year.value, cntrls.description.value, cntrls.count.value, imageBase64, ); } else { await editLine( currentId, cntrls.nameBook.value, cntrls.authorsType.value, cntrls.genresType.value, cntrls.year.value, cntrls.description.value, cntrls.count.value, imageBase64, ); } // после выполнения добавления/обновления модальное окно скрывается hideUpdateModal(); }); } // Функция для обработки создания и редактирования элементов таблицы через страницу page-admin.html // Если хотите делать через модальное окно, то удалите эту функцию export async function linesPageForm() { console.info("linesPageForm"); // загрузка и заполнение select со списком товаров // drawGenreSelect(); // func1 = (id) => {} аналогично function func1(id) {} const goBack = () => location.assign("/Catalog.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.nameBook.value = line.nameBook; cntrls.authorsType.value = line.authorsType; cntrls.genresType.value = line.genresType; cntrls.year.value = line.year; cntrls.description.value = line.description; cntrls.count.value = line.count; // заполнение превью // Если пользователь выбрал изображение, то оно загружается // в тэг image с id image - preview // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder; } catch { // в случае ошибки происходит возврат к index 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.nameBook.value, cntrls.authorsType.value, cntrls.genresType.value, cntrls.year.value, cntrls.description.value, cntrls.count.value, imageBase64, ); } else { await editLine( currentId, cntrls.nameBook.value, cntrls.authorsType.value, cntrls.genresType.value, cntrls.year.value, cntrls.description.value, cntrls.count.value, imageBase64, ); } // возврат к странице index goBack(); }); }