PIbd-22_Kaznacheeva.E.K_Int.../lab3/js/lines.js

459 lines
22 KiB
JavaScript
Raw Normal View History

2023-12-15 15:57:59 +04:00
// модуль с логикой
import { hideUpdateModal, showUpdateModal } from "./lines-modal";
import {
createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
} from "./lines-rest-api";
import {
cntrls, createItemsOption, createTableRow, imagePlaceholder,
// createTableAnchor,
} 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 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),
() => location.assign(`page-edit.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
// // удаляется все, что находится между тегами <table></table>
// // но не атрибуты
// cntrls.container.innerHTML = "";
// // цикл по результату ответа от сервера
// // используется лямбда-выражение
// // (item, index) => {} аналогично function(item, index) {}
// data.forEach((item, index) => {
// cntrls.container.appendChild(
// createCards(
// item,
// index,
// // функции передаются в качестве параметра
// // это очень удобно, так как аргументы функций доступны только
// // в данном месте кода и не передаются в сервисные модули
// () => showUpdateModal(item),
// () => location.assign(`master.html?id=${item.id}`),
// () => removeLine(item.id),
// ),
// );
// });
// }
async function addLine(item, title, price, description, image) {
console.info("Try to add item");
// вызов метода REST API для добавления записи
const data = await createLine(item, title, price, description, image);
console.info("Added");
console.info(data);
// загрузка и заполнение table
drawLinesTable();
}
async function editLine(id, item, title, price, description, image) {
console.info("Try to update item");
// вызов метода REST API для обновления записи
const data = await updateLine(id, item, title, price, description, 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 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("line", 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/alone.jpg";
img.className = "rounded-img";
img.alt = "KITTI";
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("h6");
price.className = "card-title";
price.textContent = line.price;
const description = document.createElement("p");
description.className = "card-text";
description.innerHTML = line.description;
cardBody.appendChild(title);
cardBody.appendChild(price);
cardBody.appendChild(description);
card.appendChild(img);
card.appendChild(cardBody);
cardDiv.appendChild(card);
// cardDiv.appendChild(createTableAnchor("bi-file-plus", () => showUpdateModal(line)));
// cardDiv.appendChild(createTableAnchor("bi-trash", () => removeLine(line.id)));
container.appendChild(cardDiv);
});
} catch (error) {
console.error("Error fetching data:", error);
}
}
// Функция для обработки создания и редактирования элементов таблицы через модальное окно
// Если хотите делать через страницу, то удалите эту функцию
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,
imageBase64,
);
} else {
await editLine(
currentId,
cntrls.itemsType.value,
cntrls.title.value,
cntrls.price.value,
cntrls.description.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.title.value,
// cntrls.price.value,
// cntrls.description.value,
// imageBase64,
// );
// } else {
// await editLine(
// currentId,
// cntrls.itemsType.value,
// cntrls.title.value,
// cntrls.price.value,
// cntrls.description.value,
// imageBase64,
// );
// }
// // после выполнения добавления/обновления модальное окно скрывается
// hideUpdateModal();
// });
// }
// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
// Если хотите делать через модальное окно, то удалите эту функцию
export async function linesPageForm() {
console.info("linesPageForm");
// загрузка и заполнение select со списком товаров
drawItemsSelect();
// func1 = (id) => {} аналогично function func1(id) {}
const goBack = () => location.assign("/page4.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.itemsType.value = line.itemsId;
cntrls.title.value = line.title;
cntrls.price.value = line.price;
cntrls.description.value = line.description;
// заполнение превью
// Если пользователь выбрал изображение, то оно загружается
// в тэг image с id image - preview
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
} catch {
// в случае ошибки происходит возврат к page4
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.title.value,
cntrls.price.value,
cntrls.description.value,
imageBase64,
);
} else {
await editLine(
currentId,
cntrls.itemsType.value,
cntrls.title.value,
cntrls.price.value,
cntrls.description.value,
imageBase64,
);
}
// возврат к странице page4
goBack();
});
}