309 lines
12 KiB
JavaScript
309 lines
12 KiB
JavaScript
|
// модуль с логикой
|
|||
|
|
|
|||
|
|
import { hideUpdateModal, showUpdateModal } from "./lines-modal";
|
|||
|
|
import {
|
|||
|
|
createLine,
|
|||
|
|
deleteLine,
|
|||
|
|
getAllDiscountsTypes,
|
|||
|
|
getAllItemTypes,
|
|||
|
|
getAllLines,
|
|||
|
|
getLine,
|
|||
|
|
updateLine,
|
|||
|
|
} from "./lines-rest-api";
|
|||
|
|
import {
|
|||
|
|
cntrls,
|
|||
|
|
createItemsOption,
|
|||
|
|
createTableRow,
|
|||
|
|
imagePlaceholder,
|
|||
|
|
// createTableAnchor,
|
|||
|
|
} from "./lines-ui";
|
|||
|
|
|
|||
|
|
async function drawItemsSelect() {
|
|||
|
|
console.log(111);
|
|||
|
|
// вызов метода REST API для получения списка типов товаров
|
|||
|
|
const data = await getAllItemTypes();
|
|||
|
|
const data2 = await getAllDiscountsTypes();
|
|||
|
|
// очистка содержимого select
|
|||
|
|
// удаляется все, что находится между тегами <select></select>
|
|||
|
|
// но не атрибуты
|
|||
|
|
cntrls.itemsType.innerHTML = "";
|
|||
|
|
cntrls.discountsType.innerHTML = "";
|
|||
|
|
// пустое значение
|
|||
|
|
cntrls.itemsType.appendChild(
|
|||
|
|
createItemsOption("Выберите значение", "", true)
|
|||
|
|
);
|
|||
|
|
// цикл по результату ответа от сервера
|
|||
|
|
// используется лямбда-выражение
|
|||
|
|
// (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
|
|||
|
|
// удаляется все, что находится между тегами <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(item, title, price, description, discounts, image) {
|
|||
|
|
console.info("Try to add item");
|
|||
|
|
// вызов метода REST API для добавления записи
|
|||
|
|
const data = await createLine(
|
|||
|
|
item,
|
|||
|
|
title,
|
|||
|
|
price,
|
|||
|
|
description,
|
|||
|
|
discounts,
|
|||
|
|
image
|
|||
|
|
);
|
|||
|
|
console.info("Added");
|
|||
|
|
console.info(data);
|
|||
|
|
// загрузка и заполнение table
|
|||
|
|
drawLinesTable();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function editLine(id, item, title, price, description, discounts, image) {
|
|||
|
|
console.info("Try to update item");
|
|||
|
|
// вызов метода REST API для обновления записи
|
|||
|
|
const data = await updateLine(
|
|||
|
|
id,
|
|||
|
|
item,
|
|||
|
|
title,
|
|||
|
|
price,
|
|||
|
|
description,
|
|||
|
|
discounts,
|
|||
|
|
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 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,
|
|||
|
|
cntrls.discountsType.value,
|
|||
|
|
imageBase64
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
await editLine(
|
|||
|
|
currentId,
|
|||
|
|
cntrls.itemsType.value,
|
|||
|
|
cntrls.title.value,
|
|||
|
|
cntrls.price.value,
|
|||
|
|
cntrls.description.value,
|
|||
|
|
cntrls.discountsType.value,
|
|||
|
|
imageBase64
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// после выполнения добавления/обновления модальное окно скрывается
|
|||
|
|
hideUpdateModal();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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("K", 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/centerpicture.jpg";
|
|||
|
|
img.className = "rounded-img";
|
|||
|
|
img.alt = "";
|
|||
|
|
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("h5");
|
|||
|
|
price.className = "card-title";
|
|||
|
|
price.textContent = "Старая цена: " + line.price;
|
|||
|
|
|
|||
|
|
const discounts = document.createElement("h6");
|
|||
|
|
discounts.classList.add("card-text");
|
|||
|
|
discounts.innerText = "Скидка: " + line.discounts.name + "%";
|
|||
|
|
|
|||
|
|
const newPrice = document.createElement("h5");
|
|||
|
|
newPrice.className = "card-title";
|
|||
|
|
newPrice.textContent = "Новая цена: " + line.newPrice;
|
|||
|
|
newPrice.style.color = "red";
|
|||
|
|
|
|||
|
|
const description = document.createElement("p");
|
|||
|
|
description.className = "card-text";
|
|||
|
|
description.innerHTML = line.description;
|
|||
|
|
|
|||
|
|
cardBody.appendChild(title);
|
|||
|
|
cardBody.appendChild(price);
|
|||
|
|
cardBody.appendChild(discounts);
|
|||
|
|
cardBody.appendChild(newPrice);
|
|||
|
|
cardBody.appendChild(description);
|
|||
|
|
|
|||
|
|
card.appendChild(img);
|
|||
|
|
card.appendChild(cardBody);
|
|||
|
|
|
|||
|
|
cardDiv.appendChild(card);
|
|||
|
|
|
|||
|
|
container.appendChild(cardDiv);
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("Error fetching data:", error);
|
|||
|
|
}
|
|||
|
|
}
|