280 lines
11 KiB
JavaScript
280 lines
11 KiB
JavaScript
|
// модуль с логикой
|
|||
|
|
import {
|
|||
|
|
getAllLines, getLine, createLine, updateLine, deleteLine,
|
|||
|
|
} from "./posts-rest-api";
|
|||
|
|
import {
|
|||
|
|
cntrls, imagePlaceholder, createTableRow,
|
|||
|
|
} from "./posts-ui";
|
|||
|
|
|
|||
|
|
export 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 = "";
|
|||
|
|
data.forEach((item, index) => {
|
|||
|
|
cntrls.table.appendChild(
|
|||
|
|
createTableRow(
|
|||
|
|
item,
|
|||
|
|
index,
|
|||
|
|
() => location.assign(`add_news.html?id=${item.id}`),
|
|||
|
|
() => removeLine(item.id),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function addLine(title, date, text, tage, image) {
|
|||
|
|
console.info("Try to add item");
|
|||
|
|
// вызов метода REST API для добавления записи
|
|||
|
|
const data = await createLine(title, date, text, tage, image);
|
|||
|
|
console.info("Added");
|
|||
|
|
console.log(data);
|
|||
|
|
drawLinesTable();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function editLine(id, title, date, text, tage, image) {
|
|||
|
|
console.info("Try to update item");
|
|||
|
|
// вызов метода REST API для обновления записи
|
|||
|
|
const data = await updateLine(id, title, date, text, tage, image);
|
|||
|
|
console.info("Updated");
|
|||
|
|
console.log(data);
|
|||
|
|
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.log(data);
|
|||
|
|
// загрузка и заполнение table
|
|||
|
|
drawLinesTable();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function readFile(file) {
|
|||
|
|
const reader = new FileReader();
|
|||
|
|
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
|
|||
|
|
export async function linesPageForm() {
|
|||
|
|
console.info("linesPageForm");
|
|||
|
|
// func1 = (id) => {} аналогично function func1(id) {}
|
|||
|
|
const goBack = () => location.assign("/admin.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.title.value = line.title;
|
|||
|
|
cntrls.date.value = line.date;
|
|||
|
|
cntrls.text.value = line.text;
|
|||
|
|
cntrls.tage.value = line.tage;
|
|||
|
|
// заполнение превью
|
|||
|
|
// Если пользователь выбрал изображение, то оно загружается
|
|||
|
|
// в тэг image с id image - preview
|
|||
|
|
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
|||
|
|
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
|
|||
|
|
} catch {
|
|||
|
|
goBack();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// обработчик события отправки формы
|
|||
|
|
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.title.value,
|
|||
|
|
cntrls.date.value,
|
|||
|
|
cntrls.text.value,
|
|||
|
|
cntrls.tage.value,
|
|||
|
|
imageBase64,
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
await editLine(
|
|||
|
|
currentId,
|
|||
|
|
cntrls.title.value,
|
|||
|
|
cntrls.date.value,
|
|||
|
|
cntrls.text.value,
|
|||
|
|
cntrls.tage.value,
|
|||
|
|
imageBase64,
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
goBack();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export async function UpdateNews() {
|
|||
|
|
const data = await getAllLines();
|
|||
|
|
data.reverse();
|
|||
|
|
const div0 = document.createElement("div");
|
|||
|
|
div0.setAttribute("class", "row row-cols-1 row-cols-md-3 g-4");
|
|||
|
|
cntrls.list.appendChild(div0);
|
|||
|
|
|
|||
|
|
data.forEach((item) => {
|
|||
|
|
UpdateNew(div0, item);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* <div class="col">
|
|||
|
|
<div class="card h-100">
|
|||
|
|
<img src="${elem.image}" class="card-img-top" alt="">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<h5 class="card-title">${elem.title}</h5>
|
|||
|
|
<p class="card-text"><small class="text-body-secondary">${elem.date}</small></p>
|
|||
|
|
<p class="card-text">${elem.text}</p>
|
|||
|
|
<тег>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div> */
|
|||
|
|
|
|||
|
|
async function UpdateNew(div0, item) {
|
|||
|
|
console.info(item.id + " was created");
|
|||
|
|
|
|||
|
|
// колонка
|
|||
|
|
const div1 = document.createElement("div");
|
|||
|
|
div1.setAttribute("class", "col");
|
|||
|
|
|
|||
|
|
// пост
|
|||
|
|
const div2 = document.createElement("div");
|
|||
|
|
div2.setAttribute("class", "card h-100");
|
|||
|
|
|
|||
|
|
// картинка
|
|||
|
|
const image = document.createElement("img");
|
|||
|
|
image.setAttribute("src", item.image);
|
|||
|
|
image.setAttribute("width", "100%");
|
|||
|
|
image.setAttribute("height", "330px");
|
|||
|
|
image.setAttribute("alt", item.title);
|
|||
|
|
|
|||
|
|
// card-body
|
|||
|
|
const div3 = document.createElement("div");
|
|||
|
|
div3.setAttribute("class", "card-body");
|
|||
|
|
|
|||
|
|
// Заголовок
|
|||
|
|
const h5 = document.createElement("h5");
|
|||
|
|
h5.setAttribute("class", "card-title");
|
|||
|
|
h5.textContent = item.title;
|
|||
|
|
|
|||
|
|
// для даты
|
|||
|
|
const p1 = document.createElement("p");
|
|||
|
|
p1.setAttribute("class", "card-text");
|
|||
|
|
|
|||
|
|
const small1 = document.createElement("small");
|
|||
|
|
p1.setAttribute("class", "text-body-secondary");
|
|||
|
|
p1.textContent = item.date;
|
|||
|
|
|
|||
|
|
// для текста
|
|||
|
|
const p2 = document.createElement("p");
|
|||
|
|
p2.setAttribute("class", "card-text");
|
|||
|
|
p2.textContent = item.text;
|
|||
|
|
|
|||
|
|
// для тега
|
|||
|
|
const small2 = document.createElement("small");
|
|||
|
|
small2.setAttribute("class", "text-body-secondary");
|
|||
|
|
|
|||
|
|
// ссылка для тега
|
|||
|
|
let aTages = item.tage.split(" ");
|
|||
|
|
for (let i = 0; i < aTages.length; i++) {
|
|||
|
|
const element = aTages[i];
|
|||
|
|
const a1 = document.createElement("a");
|
|||
|
|
a1.setAttribute("href", "#");
|
|||
|
|
a1.textContent = "#" + element + " ";
|
|||
|
|
small2.appendChild(a1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
div0.appendChild(div1);
|
|||
|
|
div1.appendChild(div2);
|
|||
|
|
div2.appendChild(image);
|
|||
|
|
div2.appendChild(div3);
|
|||
|
|
div3.appendChild(h5);
|
|||
|
|
div3.appendChild(p1);
|
|||
|
|
p1.appendChild(small1);
|
|||
|
|
div3.appendChild(p2);
|
|||
|
|
div3.appendChild(small2);
|
|||
|
|
}
|