866 lines
43 KiB
JavaScript
866 lines
43 KiB
JavaScript
// модуль с логикой
|
||
|
||
import { hideUpdateModal, showUpdateModal } from "./lines-modal";
|
||
import {
|
||
// getAllItemTypes,
|
||
createLine, deleteLine, getAllLines, updateLine,
|
||
} from "./lines-rest-api";
|
||
import {
|
||
// createItemsOption,
|
||
cntrls, createTableRow, createAnchor, imagePlaceholder,
|
||
} from "./lines-ui";
|
||
|
||
|
||
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(itemName, description, image) { // + imageAvatar
|
||
console.info("Try to add item");
|
||
// вызов метода REST API для добавления записи
|
||
const data = await createLine(itemName, description, image);
|
||
console.info("Added");
|
||
console.info(data);
|
||
// загрузка и заполнение table
|
||
drawLinesTable();
|
||
console.info(window.location.pathname);
|
||
if (window.location.pathname === "/index.html") {
|
||
UpdateVideos();
|
||
}
|
||
}
|
||
|
||
async function editLine(id, itemName, description, image) { // imageAvatar
|
||
console.info("Try to update item");
|
||
// вызов метода REST API для обновления записи
|
||
const data = await updateLine(id, itemName, description, image);
|
||
console.info("Updated");
|
||
console.info(data);
|
||
// загрузка и заполнение table
|
||
drawLinesTable();
|
||
console.info(window.location.pathname);
|
||
if (window.location.pathname.toLowerCase() === "/index.html") {
|
||
UpdateVideos();
|
||
}
|
||
}
|
||
|
||
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();
|
||
console.info(window.location.pathname);
|
||
if (window.location.pathname === "/index.html") {
|
||
UpdateVideos();
|
||
}
|
||
}
|
||
|
||
// функция для получения содержимого файла в виде 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.itemImage.files[0];
|
||
// чтение содержимого файла в виде base64 строки
|
||
const fileContent = await readFile(file);
|
||
console.info("base64 ", fileContent);
|
||
// обновление атрибута src для тега img с id image-preview
|
||
cntrls.imagePreview.src = fileContent;
|
||
}
|
||
// // функция для обновления блока с превью выбранного изображения для аватара
|
||
// async function updateImageAvatarPreview() {
|
||
// // получение выбранного файла
|
||
// // возможен выбор нескольких файлов, поэтому необходимо получить только первый
|
||
// const file = cntrls.itemImageAvatar.files[0];
|
||
// // чтение содержимого файла в виде base64 строки
|
||
// const fileContent = await readFile(file);
|
||
// console.info("base64 ", fileContent);
|
||
// // обновление атрибута src для тега img с id image-preview
|
||
// cntrls.imageAvatar.src = fileContent;
|
||
// }
|
||
|
||
// Функция для обработки создания и редактирования элементов таблицы через модальное окно
|
||
// Если хотите делать через страницу, то удалите эту функцию
|
||
export function linesForm() {
|
||
console.info("linesForm");
|
||
|
||
// загрузка и заполнение select со списком товаров
|
||
// drawItemsSelect();
|
||
// загрузка и заполнение table
|
||
drawLinesTable();
|
||
|
||
// Вызов функции обновления превью изображения при возникновении
|
||
// события oncahnge в тэге input с id image
|
||
cntrls.itemImage.addEventListener("change", () => updateImagePreview());
|
||
// cntrls.itemImageAvatar.addEventListener("change", () => updateImageAvatarPreview());
|
||
|
||
// обработчик события нажатия на кнопку для показа модального окна
|
||
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
|
||
console.info("imagePreview.src");
|
||
console.info(cntrls.imagePreview.src);
|
||
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.itemName.value,
|
||
cntrls.itemDescription.value,
|
||
imageBase64,
|
||
);
|
||
} else {
|
||
await editLine(
|
||
currentId,
|
||
cntrls.itemName.value,
|
||
cntrls.itemDescription.value,
|
||
imageBase64,
|
||
);
|
||
}
|
||
|
||
// после выполнения добавления/обновления модальное окно скрывается
|
||
hideUpdateModal();
|
||
});
|
||
}
|
||
/* <div class = "row">
|
||
<div class = "col mt-4">
|
||
<div class = "rectNews d-flex flex-column">
|
||
<img class ="imageNew1" src = "./images/New1.png" alt = "New1" width = "100%">
|
||
<div class = "rectNewsTextBox">
|
||
<span class = "rectNewsText">
|
||
<b>УлГТУ вошёл в топ-250 лучших вузов</b>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class = "col mt-4">
|
||
<div class = "rectNews d-flex flex-column position-relative">
|
||
<img src = "./images/New2.png" alt = "New2" width="100%">
|
||
<div class = "rectNewsTextBox">
|
||
<span class = "rectNewsText">
|
||
<b>“Мосты в будущее” будут видны из УлГТУ</b>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class ="row">
|
||
<div class ="col mt-5">
|
||
<div class = "rectNews d-flex flex-column position-relative">
|
||
<img src = "./images/New3.png" alt = "New3" width="100%">
|
||
<div class = "rectNewsTextBox">
|
||
<span class = "rectNewsText">
|
||
<b>Поправки в системе работы приёмной комиссии</b>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class = "col mt-5">
|
||
<div class = "rectNews d-flex flex-column position-relative">
|
||
<img src = "./images/New4.png" alt = "New4" width="100%">
|
||
<div class = "rectNewsTextBox">
|
||
<span class = "rectNewsText">
|
||
<b>Студенты возвращаются к учёбе после зимней сессии позже, чем раньше</b>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<span class = "d-flex"><p></p></span>
|
||
</div>
|
||
</div> */
|
||
|
||
// <div class="full-page-div">
|
||
// <div class="p-5 text-center">
|
||
// <h1 class="display-4 fw-bold">Welcome to our streaming service</h1>
|
||
// <p class="fs-5">Explore the whole streaming world!</p>
|
||
// <a class="btn btn-outline-danger btn-lg" href="page1.html" role="button">Главная страница</a>
|
||
// </div>
|
||
|
||
// <div class="p-5 text-bg-dark rounded-3">
|
||
// <h2>Популярные трансляции</h2>
|
||
// <div class="row">
|
||
// <div class="col-md-4">
|
||
// <div class="card mb-4 shadow-sm">
|
||
// <img src="png/streamer1.png" class="card-img-top" alt="Video 1">
|
||
// <div class="card-body">
|
||
// <div class="container">
|
||
// <div class="row">
|
||
// <div class="col-md-6">
|
||
// <p class="h-4 m-0 text-nowrap font-italic font-weight-bold" href="page5channel.html">Streamer1</p>
|
||
// <p class="fs-5 text-nowrap text-secondary">CS-3</p>
|
||
// </div>
|
||
// <div class="col-md-6 p-3 text-nowrap align-items-end d-flex">
|
||
// <a class="btn btn-secondary ms-auto" href="page5channel.html">Subscribe</a>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
// </div>
|
||
|
||
function clearVideos() {
|
||
const newsElements = document.querySelectorAll(".mainRow"); //mainRow
|
||
newsElements.forEach((element) => element.remove());
|
||
}
|
||
async function UpdateNews(div1, item) {
|
||
// const main2 = document.createElement("main");
|
||
// main2.setAttribute("class", "col-md-9 ml-sm-auto col-lg-10 px-4");
|
||
// const div2 = document.createElement("div");
|
||
// div2.setAttribute("class", "container-fluid d-flex justify-content-center");
|
||
// const div3 = document.createElement("div");
|
||
// div3.setAttribute("class", "full-page-div");
|
||
// const div4 = document.createElement("div");
|
||
// div4.setAttribute("class", "p-5 text-bg-dark rounded-3");
|
||
// const div5 = document.createElement("div");
|
||
// div5.setAttribute("class", "row");
|
||
// const div6 = document.createElement("div");
|
||
// div6.setAttribute("class", "col-md-4");
|
||
// const div7 = document.createElement("div");
|
||
// div7.setAttribute("class", "card mb-4 shadow-sm");
|
||
|
||
// const div8 = document.createElement("div");
|
||
// div8.setAttribute("class", "card-body");
|
||
// const div9= document.createElement("div");
|
||
// div9.setAttribute("class", "container");
|
||
// const div10 = document.createElement("div");
|
||
// div10.setAttribute("class", "col-md-6");
|
||
|
||
// const image = document.createElement("img");
|
||
// image.setAttribute("class", "card-img-top");
|
||
// image.setAttribute("src", item.image);
|
||
// image.setAttribute("width", "100%");
|
||
// image.setAttribute("alt", item.name);
|
||
|
||
// const span1 = document.createElement("p1");
|
||
// p1.setAttribute("class", "h-4 m-0 text-nowrap font-italic font-weight-bold");
|
||
// p1.textContent = item.description;
|
||
// const span2 = document.createElement("p2");
|
||
// p2.setAttribute("class", "fs-5 text-nowrap text-secondary");
|
||
const div2 = document.createElement("div");
|
||
div2.setAttribute("class", "col mb-4");
|
||
const div21 = document.createElement("div");
|
||
div21.setAttribute("class", "card mb-4 shadow-sm");
|
||
|
||
const div3 = document.createElement("div");
|
||
div3.setAttribute("class", "rectNews d-flex flex-column");
|
||
|
||
const image = document.createElement("img");
|
||
image.setAttribute("class", "rectNew");
|
||
image.setAttribute("src", item.image);
|
||
image.setAttribute("width", "100%");
|
||
image.setAttribute("alt", item.name);
|
||
const div4 = document.createElement("div");
|
||
div4.setAttribute("class", "rectNewsTextBox text-center");
|
||
const span1 = document.createElement("span");
|
||
span1.setAttribute("class", "rectNewsText");
|
||
span1.textContent = item.description;
|
||
div1.appendChild(div2);
|
||
div2.appendChild(div21);
|
||
div4.appendChild(createAnchor("fa-pencil", () => showUpdateModal(item)));
|
||
div4.appendChild(createAnchor("fa-trash", () => removeLine(item.id)));
|
||
div21.appendChild(div3);
|
||
div3.appendChild(image);
|
||
div3.appendChild(div4);
|
||
div4.appendChild(span1);
|
||
|
||
|
||
|
||
// div1.appendChild(div6);
|
||
// div6.appendChild(div7);
|
||
// p2.appendChild(createAnchor("fa-pencil", () => showUpdateModal(item)));
|
||
// p2.appendChild(createAnchor("fa-trash", () => removeLine(item.id)));
|
||
//div6.appendChild(image);
|
||
//div6.appendChild(div8);
|
||
//div8.appendChild(div9);
|
||
//div9.appendChild(div10);
|
||
|
||
//div10.appendChild(p2);
|
||
//div10.appendChild(p1);
|
||
}
|
||
// async function UpdateNew(div1, item) {
|
||
// const div2 = document.createElement("div");
|
||
// div2.setAttribute("class", "col mb-4");
|
||
// const div3 = document.createElement("div");
|
||
// div3.setAttribute("class", "rectNews d-flex flex-column");
|
||
// const image = document.createElement("img");
|
||
// image.setAttribute("class", "rectNew");
|
||
// image.setAttribute("src", item.image);
|
||
// image.setAttribute("width", "100%");
|
||
// image.setAttribute("alt", item.name);
|
||
// const div4 = document.createElement("div");
|
||
// div4.setAttribute("class", "rectNewsTextBox text-center");
|
||
// const span1 = document.createElement("span");
|
||
// span1.setAttribute("class", "rectNewsText");
|
||
// span1.textContent = item.description;
|
||
// div1.appendChild(div2);
|
||
// div4.appendChild(createAnchor("fa-pencil", () => showUpdateModal(item)));
|
||
// div4.appendChild(createAnchor("fa-trash", () => removeLine(item.id)));
|
||
// div2.appendChild(div3);
|
||
// div3.appendChild(image);
|
||
// div3.appendChild(div4);
|
||
// div4.appendChild(span1);
|
||
// }
|
||
export async function UpdateVideos() {
|
||
clearVideos();
|
||
console.info("UpdateVideos");
|
||
|
||
const data = await getAllLines();
|
||
|
||
const main2 = document.querySelector("main"); // Get the main element
|
||
main2.setAttribute("class", "mainDiv col-md-9 ml-sm-auto col-lg-10 px-4");
|
||
// const main3 = document.querySelector("div");
|
||
// main3.setAttribute("class", "p-5 text-bg-dark rounded-3");
|
||
|
||
// Create a single row for all videos
|
||
const div10 = document.createElement("div");
|
||
div10.setAttribute("class", "mainRow row");
|
||
// main2.appendChild(main3);
|
||
data.forEach((item) => {
|
||
// Create new elements for each item
|
||
const div11 = document.createElement("div");
|
||
div11.setAttribute("class", "col-md-4 mb-4"); // Adjusted class for better spacing
|
||
|
||
const div21 = document.createElement("div");
|
||
div21.setAttribute("class", "card mb-4 shadow-sm");
|
||
|
||
const image = document.createElement("img");
|
||
image.setAttribute("class", "card-img-top");
|
||
image.setAttribute("src", item.image);
|
||
image.setAttribute("alt", item.name);
|
||
|
||
const div3 = document.createElement("div");
|
||
div3.setAttribute("class", "card-body");
|
||
|
||
const container = document.createElement("div");
|
||
container.setAttribute("class", "container");
|
||
|
||
const row = document.createElement("div");
|
||
row.setAttribute("class", "row");
|
||
// Создаем тег для аватарки
|
||
// const avatarImage = document.createElement("img");
|
||
// avatarImage.setAttribute("class", "avatar-img");
|
||
// avatarImage.setAttribute("src", item.imageAvatar);
|
||
// avatarImage.setAttribute("alt", item.name);
|
||
|
||
|
||
const colLeft = document.createElement("div");
|
||
colLeft.setAttribute("class", "col-md-4");
|
||
const colCenter = document.createElement("div");
|
||
colCenter.setAttribute("class", "col-md-4");
|
||
const colRight = document.createElement("div");
|
||
colRight.setAttribute("class", "col-md-4 p-3 text-nowrap align-items-end d-flex");
|
||
|
||
const streamerName = document.createElement("p");
|
||
streamerName.setAttribute("class", "h-4 m-0 text-nowrap font-italic font-weight-bold");
|
||
streamerName.textContent = item.name;
|
||
|
||
const streamerDetails = document.createElement("p");
|
||
streamerDetails.setAttribute("class", "fs-5 text-nowrap text-secondary");
|
||
streamerDetails.textContent = item.description;
|
||
|
||
const subscribeButton = document.createElement("a");
|
||
subscribeButton.setAttribute("class", "btn btn-secondary ms-auto");
|
||
subscribeButton.setAttribute("href", "page5channel.html");
|
||
subscribeButton.textContent = "Subscribe";
|
||
|
||
//colLeft.appendChild(avatarImage);
|
||
colLeft.appendChild(streamerName); // center с аватаром
|
||
colLeft.appendChild(streamerDetails);
|
||
colLeft.appendChild(createAnchor("fa-pencil", () => showUpdateModal(item)));
|
||
colLeft.appendChild(createAnchor("fa-trash", () => removeLine(item.id)));
|
||
|
||
colRight.appendChild(subscribeButton);
|
||
|
||
row.appendChild(colLeft);
|
||
row.appendChild(colLeft);
|
||
row.appendChild(colCenter);
|
||
row.appendChild(colRight);
|
||
container.appendChild(row);
|
||
|
||
div3.appendChild(image);
|
||
div3.appendChild(container);
|
||
div21.appendChild(div3);
|
||
div11.appendChild(div21);
|
||
|
||
// Append the new elements to the row
|
||
div10.appendChild(div11);
|
||
});
|
||
|
||
// Append the row to the main content area
|
||
main2.appendChild(div10);
|
||
//console.info("UpdatedVideosSUccsesful");
|
||
|
||
}
|
||
|
||
// export async function UpdateVideos() {
|
||
// clearVideos();
|
||
// console.info("UpdateVideos");
|
||
|
||
// const data = await getAllLines();
|
||
|
||
// const main2 = document.querySelector("main"); // Get the main element
|
||
// main2.setAttribute("class", "col-md-9 ml-sm-auto col-lg-10 px-4");
|
||
|
||
// const div13 = document.querySelector("div");
|
||
// div13.setAttribute("class", "container-fluid d-flex justify-content-center");
|
||
|
||
// const div12 = document.createElement("div");
|
||
// div12.setAttribute("class", "full-page-div");
|
||
// const div11 = document.createElement("div");
|
||
// div11.setAttribute("class", "p-5 text-bg-dark rounded-3");
|
||
// const div10 = document.createElement("div");
|
||
// div10.setAttribute("class", "row");
|
||
|
||
|
||
// data.forEach((item) => {
|
||
// const div13 = document.createElement("div");
|
||
// div13.setAttribute("class", "container-fluid d-flex justify-content-center");
|
||
|
||
// const div12 = document.createElement("div");
|
||
// div12.setAttribute("class", "full-page-div");
|
||
// const div11 = document.createElement("div");
|
||
// div11.setAttribute("class", "p-5 text-bg-dark rounded-3");
|
||
// const div10 = document.createElement("div");
|
||
// div10.setAttribute("class", "row");
|
||
|
||
// main2.appendChild(div13);
|
||
// div13.appendChild(div12);
|
||
// div12.appendChild(div11);
|
||
// //div11.appendChild(div10);
|
||
|
||
// cntrls.form.addEventListener("submit", async (event) => {
|
||
// event.preventDefault();
|
||
// event.stopPropagation();
|
||
// });
|
||
|
||
// UpdateNew(div10, item);
|
||
|
||
// // Append the new elements to the main content area
|
||
// div11.appendChild(div10);
|
||
// });
|
||
// }
|
||
|
||
// export async function UpdateVideos() {
|
||
// clearVideos();
|
||
// console.info("UpdateVideos");
|
||
|
||
// const data = await getAllLines();
|
||
|
||
// const main2 = document.createElement("main");
|
||
// main2.setAttribute("class", "mainDiv col-md-9 ml-sm-auto col-lg-10 px-4");
|
||
|
||
// const div13 = document.createElement("div");
|
||
// div13.setAttribute("class", "container-fluid d-flex justify-content-center");
|
||
|
||
// const div12 = document.createElement("div");
|
||
// div12.setAttribute("class", "full-page-div");
|
||
// const div11 = document.createElement("div");
|
||
// div11.setAttribute("class", "p-5 text-bg-dark rounded-3");
|
||
// const div10 = document.createElement("div");
|
||
// div10.setAttribute("class", "row");
|
||
|
||
// document.body.appendChild(main2);
|
||
// main2.appendChild(div13);
|
||
// div13.appendChild(div12);
|
||
// div12.appendChild(div11);
|
||
// //div11.appendChild(div10);
|
||
|
||
// data.forEach((item) => {
|
||
// cntrls.form.addEventListener("submit", async (event) => {
|
||
// event.preventDefault();
|
||
// event.stopPropagation();
|
||
// });
|
||
// UpdateNew(div10, item);
|
||
// div11.appendChild(div10);
|
||
// });
|
||
// }
|
||
|
||
|
||
// 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 addLine(item, price, views, image) {
|
||
// console.info("Try to add item");
|
||
// // вызов метода REST API для добавления записи
|
||
// const data = await createLine(item, price, views, image);
|
||
// console.info("Added");
|
||
// console.info(data);
|
||
// // загрузка и заполнение table
|
||
// drawLinesTable();
|
||
// }
|
||
|
||
// async function editLine(id, item, price, views, image) {
|
||
// console.info("Try to update item");
|
||
// // вызов метода REST API для обновления записи
|
||
// const data = await updateLine(id, item, price, views, 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() {
|
||
// 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.views.value,
|
||
// imageBase64,
|
||
// );
|
||
// } else {
|
||
// await editLine(
|
||
// currentId,
|
||
// cntrls.itemsType.value,
|
||
// cntrls.price.value,
|
||
// cntrls.views.value,
|
||
// imageBase64,
|
||
// );
|
||
// }
|
||
|
||
// // после выполнения добавления/обновления модальное окно скрывается
|
||
// hideUpdateModal();
|
||
// });
|
||
// }
|
||
|
||
// // Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
|
||
// // Если хотите делать через модальное окно, то удалите эту функцию
|
||
// export async function linesPageForm() {
|
||
// console.info("linesPageForm");
|
||
|
||
// // загрузка и заполнение select со списком товаров
|
||
// drawItemsSelect();
|
||
|
||
// // func1 = (id) => {} аналогично function func1(id) {}
|
||
// const goBack = () => location.assign("/page6admin.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.price.value = line.price;
|
||
// cntrls.views.value = line.views;
|
||
// // заполнение превью
|
||
// // Если пользователь выбрал изображение, то оно загружается
|
||
// // в тэг 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.price.value,
|
||
// cntrls.views.value,
|
||
// imageBase64,
|
||
// );
|
||
// } else {
|
||
// await editLine(
|
||
// currentId,
|
||
// cntrls.itemsType.value,
|
||
// cntrls.price.value,
|
||
// cntrls.views.value,
|
||
// imageBase64,
|
||
// );
|
||
// }
|
||
// // возврат к странице page4 (page6admin)
|
||
// goBack();
|
||
// });
|
||
// }
|