diff --git a/Library/admin-page.html b/Library/admin-page.html index 2872d05..effac67 100644 --- a/Library/admin-page.html +++ b/Library/admin-page.html @@ -67,7 +67,6 @@ import validation from "./js/validation"; import { linesPageForm } from "./js/lines"; document.addEventListener('DOMContentLoaded', () => { - validation(); linesPageForm(); }); diff --git a/Library/data.json b/Library/data.json index 1718777..c14c204 100644 --- a/Library/data.json +++ b/Library/data.json @@ -1,5 +1,5 @@ { - "items": [ + "categories": [ { "id": 1, "name": "Ода" @@ -13,35 +13,35 @@ "name": "Лирическое стихотворение" } ], - "lines": [ + "books": [ { - "itemsId": "3", + "categoriesId": "3", + "authorsId": "1", "name": "Зимний вечер", - "authorId": "1", "year": "1830", "image": "", "id": 2 }, { - "itemsId": "1", + "categoriesId": "1", + "authorsId": "2", "name": "Властителям и судиям", - "authorId": "2", "year": "1780", "image": "", "id": 3 }, { - "itemsId": "1", + "categoriesId": "1", + "authorsId": "3", "name": "Exegi monumentum", - "authorId": "3", "year": "23 до н. э.", "image": "", "id": 4 }, { - "itemsId": "2", + "categoriesId": "2", + "authorsId": "4", "name": "К бедному поэту", - "authorId": "4", "year": "1796", "image": "", "id": 5 diff --git a/Library/js/lines-rest-api.js b/Library/js/lines-rest-api.js index d733f4a..60d0e64 100644 --- a/Library/js/lines-rest-api.js +++ b/Library/js/lines-rest-api.js @@ -3,19 +3,8 @@ // адрес сервера const serverUrl = "http://localhost:8081"; -// функция возвращает объект нужной структуры для отправки на сервер -function createLineObject(item, name, authorId, year, image) { - return { - itemsId: item, - name, - authorId, - year, - image, - }; -} - -// обращение к серверу для получения всех типов товара (get) -export async function getAllAuthorsTypes() { +// обращение к серверу для получения всех типов авторов (get) +export async function getAllAuthors() { const response = await fetch(`${serverUrl}/authors`); if (!response.ok) { throw response.statusText; @@ -23,9 +12,9 @@ export async function getAllAuthorsTypes() { return response.json(); } -// обращение к серверу для получения всех типов товара (get) -export async function getAllItemTypes() { - const response = await fetch(`${serverUrl}/items`); +// обращение к серверу для получения всех категорий книг (get) +export async function getAllCategories() { + const response = await fetch(`${serverUrl}/categories`); if (!response.ok) { throw response.statusText; } @@ -33,8 +22,8 @@ export async function getAllItemTypes() { } // обращение к серверу для получения всех записей (get) -export async function getAllLines() { - const response = await fetch(`${serverUrl}/lines?_expand=items`); +export async function getAllBooks() { + const response = await fetch(`${serverUrl}/books?_expand=categories&_expand=authors`); if (!response.ok) { throw response.statusText; } @@ -43,8 +32,8 @@ export async function getAllLines() { // обращение к серверу для получения записи по первичному ключу (id) (get) // id передается в качестве части пути URL get-запроса -export async function getLine(id) { - const response = await fetch(`${serverUrl}/lines/${id}?_expand=items`); +export async function getBook(id) { + const response = await fetch(`${serverUrl}/books/${id}?_expand=categories&_expand=authors`); if (!response.ok) { throw response.statusText; } @@ -107,3 +96,14 @@ export async function deleteLine(id) { } return response.json(); } + +// функция возвращает объект нужной структуры для отправки на сервер +function createLineObject(item, name, authorId, year, image) { + return { + itemsId: item, + name, + authorId, + year, + image, + }; +} diff --git a/Library/js/lines-ui.js b/Library/js/lines-ui.js index 6436fc4..c9f7060 100644 --- a/Library/js/lines-ui.js +++ b/Library/js/lines-ui.js @@ -72,23 +72,18 @@ function createTableColumn(value) { // // // -export function createTableRow(item, author, index, editPageCallback, deleteCallback) { +export function createTableRow(book, index, editPageCallback, deleteCallback) { const rowNumber = document.createElement("th"); rowNumber.scope = "row"; rowNumber.textContent = index + 1; - const row = document.createElement("tr"); - row.id = `line-${item.id}`; - + row.id = `line-${book.id}`; row.appendChild(rowNumber); - row.appendChild(createTableColumn(item.items.name)); - row.appendChild(createTableColumn(item.name)); - // row.appendChild(createTableColumn(item.authors.name)); - row.appendChild(createTableColumn("item.authors.name")); - row.appendChild(createTableColumn(item.year)); - // редактировать на странице page-edit + row.appendChild(createTableColumn(book.categories.name)); + row.appendChild(createTableColumn(book.name)); + row.appendChild(createTableColumn(book.authors.name)); + row.appendChild(createTableColumn(book.year)); row.appendChild(createTableAnchor("fa-pen-to-square", editPageCallback)); - // удаление row.appendChild(createTableAnchor("fa-trash", deleteCallback)); return row; } diff --git a/Library/js/lines.js b/Library/js/lines.js index bf4a90f..2f574a9 100644 --- a/Library/js/lines.js +++ b/Library/js/lines.js @@ -1,28 +1,21 @@ +/* eslint-disable import/prefer-default-export */ // модуль с логикой import { - createLine, deleteLine, getAllItemTypes, getAllAuthorsTypes, getAllLines, getLine, updateLine, + createLine, deleteLine, getAllCategories, getAllAuthors, getAllBooks, getBook, updateLine, } from "./lines-rest-api"; import { cntrls, createItemsOption, createTableRow, imagePlaceholder, } from "./lines-ui"; -async function drawItemsSelect() { - // вызов метода REST API для получения списка типов товаров - const data = await getAllItemTypes(); - // вызов метода REST API для получения списка авторов - const authors = await getAllAuthorsTypes(); - // очистка содержимого select - // удаляется все, что находится между тегами - // но не атрибуты +// функция для заполнения списков авторов и категорий книг +async function drawLists() { + const data = await getAllCategories(); + const authors = await getAllAuthors(); cntrls.itemsType.innerHTML = ""; cntrls.authorType.innerHTML = ""; - // пустое значение cntrls.itemsType.appendChild(createItemsOption("Выберите значение", "", true)); cntrls.authorType.appendChild(createItemsOption("Выберите значение", "", true)); - // цикл по результату ответа от сервера - // используется лямбда-выражение - // (item) => {} аналогично function(item) {} data.forEach((item) => { cntrls.itemsType.appendChild(createItemsOption(item.name, item.id)); }); @@ -31,31 +24,21 @@ async function drawItemsSelect() { }); } -async function drawLinesTable() { +// функция отрисовки таблицы +async function drawTable() { console.info("Try to load data"); if (!cntrls.table) { return; } - // вызов метода REST API для получения всех записей - const data = await getAllLines(); - // очистка содержимого table - // удаляется все, что находится между тегами
- // но не атрибуты + const data = await getAllBooks(); cntrls.table.innerHTML = ""; - // цикл по результату ответа от сервера - // используется лямбда-выражение - // (item, index) => {} аналогично function(item, index) {} - data.forEach((item, author, index) => { + data.forEach((book, index) => { cntrls.table.appendChild( createTableRow( - item, - author, + book, index, - // функции передаются в качестве параметра - // это очень удобно, так как аргументы функций доступны только - // в данном месте кода и не передаются в сервисные модули - () => location.assign(`page-edit.html?id=${item.id}`), - () => removeLine(item.id), + () => location.assign(`page-edit.html?id=${book.id}`), + () => removeLine(book.id), ), ); }); @@ -68,7 +51,7 @@ async function addLine(item, name, authorId, year, image) { console.info("Added"); console.info(data); // загрузка и заполнение table - drawLinesTable(); + drawTable(); } async function editLine(id, item, name, authorId, year, image) { @@ -78,7 +61,7 @@ async function editLine(id, item, name, authorId, year, image) { console.info("Updated"); console.info(data); // загрузка и заполнение table - drawLinesTable(); + drawTable(); } async function removeLine(id) { @@ -91,7 +74,7 @@ async function removeLine(id) { const data = await deleteLine(id); console.info(data); // загрузка и заполнение table - drawLinesTable(); + drawTable(); } // функция для получения содержимого файла в виде base64 строки @@ -142,9 +125,9 @@ export async function linesPageForm() { console.info("linesPageForm"); // загрузка и заполнение select со списком товаров - drawItemsSelect(); + drawLists(); // загрузка и заполнение table - drawLinesTable(); + drawTable(); // func1 = (id) => {} аналогично function func1(id) {} const goBack = () => location.assign("./admin-page.html"); @@ -164,107 +147,7 @@ export async function linesPageForm() { if (currentId) { try { // вызов метода REST API для получения записи по первичному ключу(id) - const line = await getLine(currentId); - // заполнение формы для редактирования - cntrls.itemsType.value = line.itemsId; - cntrls.name.value = line.name; - cntrls.authorType.value = line.authorId; - cntrls.year.value = line.year; - // заполнение превью - // Если пользователь выбрал изображение, то оно загружается - // в тэг image с id image - preview - // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder - cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder; - } catch { - // в случае ошибки происходит возврат к admin-page - 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.name.value, - cntrls.authorType.value, - cntrls.year.value, - imageBase64, - ); - } else { - await editLine( - currentId, - cntrls.itemsType.value, - cntrls.name.value, - cntrls.authorType.value, - cntrls.year.value, - imageBase64, - ); - } - // возврат к странице admin-page - goBack(); - }); -} - -export async function linesUserForm() { - console.info("linesPageForm"); - - // загрузка и заполнение select со списком товаров - drawItemsSelect(); - // загрузка и заполнение table - drawLinesTable(); - - // func1 = (id) => {} аналогично function func1(id) {} - const goBack = () => location.assign("./admin-page.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); + const line = await getBook(currentId); // заполнение формы для редактирования cntrls.itemsType.value = line.itemsId; cntrls.name.value = line.name;