// модуль с логикой import {hideUpdateModal, showUpdateModal} from "./lines-modal"; import { createLine, deleteLine, getAllDisountsTypes, getAllItemTypes, getAllLines, getLine, updateLine, } from "./lines-rest-api"; import {cntrls, createItemsOption, createTableRow, createTableRowOnIndex, imagePlaceholder,} from "./lines-ui"; async function drawItemsSelect() { // вызов метода REST API для получения списка типов товаров const data = await getAllItemTypes(); const data2 = await getAllDisountsTypes(); // очистка содержимого select // удаляется все, что находится между тегами // но не атрибуты cntrls.itemsType.innerHTML = ""; cntrls.discountsType.innerHTML = ""; // пустое значение // цикл по результату ответа от сервера // используется лямбда-выражение // (item) => {} аналогично function(item) {} data.forEach((item) => { cntrls.itemsType.appendChild(createItemsOption(item.name, item.id)); }); data2.forEach((item) => { cntrls.discountsType.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 // удаляется все, что находится между тегами
// но не атрибуты cntrls.table.innerHTML = ""; // цикл по результату ответа от сервера // используется лямбда-выражение // (item, index) => {} аналогично function(item, index) {} data.forEach((item, index) => { cntrls.table.appendChild( createTableRow( item, index, // функции передаются в качестве параметра // это очень удобно, так как аргументы функций доступны только // в данном месте кода и не передаются в сервисные модули () => showUpdateModal(item), () => location.assign(`page-admin.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 // удаляется все, что находится между тегами
// но не атрибуты cntrls.container.innerHTML = ""; // цикл по результату ответа от сервера // используется лямбда-выражение // (item, index) => {} аналогично function(item, index) {} data.forEach((item, index) => { cntrls.container.appendChild( createTableRowOnIndex( item, index, // функции передаются в качестве параметра // это очень удобно, так как аргументы функций доступны только // в данном месте кода и не передаются в сервисные модули () => showUpdateModal(item), () => location.assign(`index.html?id=${item.id}`), () => removeLine(item.id), ), ); }); } async function addLine(item, price, count,discounts, image) { console.info("Try to add item"); // вызов метода REST API для добавления записи const data = await createLine(item, price, count,discounts, image); console.info("Added"); console.info(data); // загрузка и заполнение table drawLinesTable(); } async function editLine(id, item, price, count, discounts,image) { console.info("Try to update item"); // вызов метода REST API для обновления записи const data = await updateLine(id, item, price, count, discounts,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 со списком товаров drawItemsSelect(); // загрузка и заполнение 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.itemsType.value, cntrls.price.value, cntrls.count.value, cntrls.discountsType.value, imageBase64, ); } else { await editLine( currentId, cntrls.itemsType.value, cntrls.price.value, cntrls.count.value, cntrls.discountsType.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.price.value, cntrls.count.value, cntrls.discountsType.value, imageBase64, ); } else { await editLine( currentId, cntrls.itemsType.value, cntrls.price.value, cntrls.count.value, cntrls.discountsType.value, imageBase64, ); } // после выполнения добавления/обновления модальное окно скрывается hideUpdateModal(); }); } // Функция для обработки создания и редактирования элементов таблицы через страницу page-admin.html // Если хотите делать через модальное окно, то удалите эту функцию export async function linesPageForm() { console.info("linesPageForm"); // загрузка и заполнение select со списком товаров drawItemsSelect(); // func1 = (id) => {} аналогично function func1(id) {} const goBack = () => location.assign("/index.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.price.value = line.price; cntrls.count.value = line.count; cntrls.discountsType.value = line.discounts2Type; // заполнение превью // Если пользователь выбрал изображение, то оно загружается // в тэг 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.itemsType.value, cntrls.price.value, cntrls.count.value, cntrls.discountsType.value, imageBase64, ); } else { await editLine( currentId, cntrls.itemsType.value, cntrls.price.value, cntrls.count.value, cntrls.discountsType.value, imageBase64, ); } // возврат к странице index goBack(); }); }