278 lines
13 KiB
JavaScript
278 lines
13 KiB
JavaScript
// модуль с логикой
|
||
|
||
import { hideUpdateModal, showUpdateModal } from "./lines-modal";
|
||
import {
|
||
createLine, deleteLine, getAllItemTypes, getAllLines, updateLine, getAllProductTypes, getLine, getCatalogLines,
|
||
} from "./lines-rest-api";
|
||
import {
|
||
// eslint-disable-next-line max-len
|
||
cntrls, createItemsOption, createTableRow, imagePlaceholder, createProductOption, createCatalogItem,
|
||
} 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 drawProductSelect() {
|
||
// вызов метода REST API для получения списка типов товаров
|
||
const data = await getAllProductTypes();
|
||
// очистка содержимого select
|
||
// удаляется все, что находится между тегами <select></select>
|
||
// но не атрибуты
|
||
cntrls.productType.innerHTML = "";
|
||
// пустое значение
|
||
cntrls.productType.appendChild(createProductOption("Выберите значение", "", true));
|
||
// цикл по результату ответа от сервера
|
||
// используется лямбда-выражение
|
||
// (item) => {} аналогично function(item) {}
|
||
data.forEach((item) => {
|
||
cntrls.productType.appendChild(createProductOption(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),
|
||
() => removeLine(item.id),
|
||
),
|
||
);
|
||
});
|
||
}
|
||
|
||
async function drawCatalog(id) {
|
||
console.info("Try to load data");
|
||
// вызов метода REST API для получения всех записей
|
||
const data = await getCatalogLines(id);
|
||
|
||
// цикл по результату ответа от сервера
|
||
// используется лямбда-выражение
|
||
// (item, index) => {} аналогично function(item, index) {}
|
||
data.forEach((item) => {
|
||
const catalogItem = createCatalogItem({
|
||
image: item.image,
|
||
model: item.model,
|
||
price: item.price,
|
||
specific: item.specific,
|
||
id: item.id,
|
||
});
|
||
cntrls.catalogConteiner.innerHTML += catalogItem;
|
||
});
|
||
}
|
||
|
||
async function addLine(product, item, model, image, price, count, description, specific) {
|
||
console.info("Try to add item");
|
||
// вызов метода REST API для добавления записи
|
||
const data = await createLine(product, item, model, image, price, count, description, specific);
|
||
console.info("Added");
|
||
console.info(data);
|
||
// загрузка и заполнение table
|
||
drawLinesTable();
|
||
}
|
||
|
||
async function editLine(id, product, item, model, image, price, count, description, specific) {
|
||
console.info("Try to update item");
|
||
// вызов метода REST API для обновления записи
|
||
// eslint-disable-next-line max-len
|
||
const data = await updateLine(id, product, item, model, image, price, count, description, specific);
|
||
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();
|
||
drawProductSelect();
|
||
// загрузка и заполнение 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.productType.value,
|
||
cntrls.itemsType.value,
|
||
cntrls.model.value,
|
||
imageBase64,
|
||
cntrls.price.value,
|
||
cntrls.count.value,
|
||
cntrls.description.value,
|
||
cntrls.specific.value,
|
||
);
|
||
} else {
|
||
await editLine(
|
||
currentId,
|
||
cntrls.productType.value,
|
||
cntrls.itemsType.value,
|
||
cntrls.model.value,
|
||
imageBase64,
|
||
cntrls.price.value,
|
||
cntrls.count.value,
|
||
cntrls.description.value,
|
||
cntrls.specific.value,
|
||
);
|
||
}
|
||
|
||
// после выполнения добавления/обновления модальное окно скрывается
|
||
hideUpdateModal();
|
||
});
|
||
}
|
||
|
||
export async function linesPageForm(id) {
|
||
console.info("linesPageForm");
|
||
drawCatalog(id);
|
||
}
|
||
|
||
export async function productPage() {
|
||
console.info("productPage");
|
||
// получение параметров GET-запроса из URL
|
||
// параметры перечислены после символа ? (?id=1&color=black&...)
|
||
const urlParams = new URLSearchParams(location.search);
|
||
|
||
// получение значения конкретного параметра (id)
|
||
// указан только при редактировании
|
||
const currentId = urlParams.get("id")
|
||
const item = await getLine(currentId);
|
||
cntrls.imagePreview.src = item.image ? item.image : imagePlaceholder;
|
||
cntrls.model.innerText = item.model;
|
||
cntrls.price.innerText = item.price;
|
||
cntrls.description.innerText = item.description;
|
||
cntrls.specific.innerText = item.specific;
|
||
}
|