From dbddd39349bf00a6baed692433b03824511cbb06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D1=8F=D1=87=D0=B5=D1=81=D0=BB=D0=B0=D0=B2=20=D0=98?= =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=BE=D0=B2?= Date: Fri, 3 Nov 2023 11:28:48 +0400 Subject: [PATCH] fix --- lab2/Administrator.html | 184 +- lab2/data.json | 19 - lab2/index.html | 20 - lab2/js/lines-modal.js | 24 +- lab2/js/lines-rest-api.js | 17 +- lab2/js/lines-ui.js | 35 - lab2/js/lines.js | 135 +- lab2/js/validation.js | 11 +- lab2/style.css | 9 +- lab3/Administrator.html | 189 +-- lab3/data.json | 35 +- lab3/index.html | 20 - lab3/js/lines-modal.js | 37 + lab3/js/lines-rest-api.js | 85 + lab3/js/lines-ui.js | 59 + lab3/js/lines.js | 176 ++ lab3/js/validation.js | 16 + .../deps_temp_179d833d/@popperjs_core.js | 1505 ----------------- .../deps_temp_179d833d/@popperjs_core.js.map | 7 - .../.vite/deps_temp_179d833d/package.json | 3 - lab3/page-edit.html | 84 + lab3/style.css | 7 +- 22 files changed, 635 insertions(+), 2042 deletions(-) delete mode 100644 lab2/data.json create mode 100644 lab3/js/lines-modal.js create mode 100644 lab3/js/lines-rest-api.js create mode 100644 lab3/js/lines-ui.js create mode 100644 lab3/js/lines.js create mode 100644 lab3/js/validation.js delete mode 100644 lab3/node_modules/.vite/deps_temp_179d833d/@popperjs_core.js delete mode 100644 lab3/node_modules/.vite/deps_temp_179d833d/@popperjs_core.js.map delete mode 100644 lab3/node_modules/.vite/deps_temp_179d833d/package.json create mode 100644 lab3/page-edit.html diff --git a/lab2/Administrator.html b/lab2/Administrator.html index e6bcef2..c63b571 100644 --- a/lab2/Administrator.html +++ b/lab2/Administrator.html @@ -37,127 +37,73 @@ -
-
-
-
-
-
-

Панель администратора

-
-
-

Добавление товара

-
- placeholder -
-
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- -
- -
-
+
+

Панель администратора

+
+ + Добавить товар (страница) +
+
+

Таблица данных

+ + + + + + + + + + + + +
№ТоварЦенаКоличествоОписание
+
+
+
+ Все права защищены © 2023-2024 +
+
-
- - + + + - + \ No newline at end of file diff --git a/lab2/data.json b/lab2/data.json deleted file mode 100644 index f2ae48d..0000000 --- a/lab2/data.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "posts": [ - { - "id": 1, - "title": "json-server", - "author": "typicode" - } - ], - "comments": [ - { - "id": 1, - "body": "some comment", - "postId": 1 - } - ], - "profile": { - "name": "typicode" - } -} \ No newline at end of file diff --git a/lab2/index.html b/lab2/index.html index 3b9f9b9..3694514 100644 --- a/lab2/index.html +++ b/lab2/index.html @@ -47,7 +47,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -60,7 +59,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -73,7 +71,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -86,7 +83,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -99,7 +95,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -112,7 +107,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -125,7 +119,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -138,7 +131,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -151,7 +143,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -164,7 +155,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -177,7 +167,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -190,7 +179,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -203,7 +191,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -216,7 +203,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -229,7 +215,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -242,7 +227,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -255,7 +239,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -268,7 +251,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -281,7 +263,6 @@ Product Image
Название
-

Описание

Цена ₽
@@ -294,7 +275,6 @@ Product Image
Название
-

Описание

Цена ₽
diff --git a/lab2/js/lines-modal.js b/lab2/js/lines-modal.js index f4e4efb..957c267 100644 --- a/lab2/js/lines-modal.js +++ b/lab2/js/lines-modal.js @@ -1,20 +1,10 @@ -// Модуль для работы с модальным окном - -// импорт компонента Modal из bootstrap import { Modal } from "bootstrap"; import { cntrls, imagePlaceholder } from "./lines-ui"; -// поиск модального окна на странице const modal = document.getElementById("items-update"); -// если он найден, то создается экземпляр компонента Modal -// для программного управления модальным окном const myModal = modal ? new Modal(modal, {}) : null; - -// поиск тега с заголовком модального кона для его смены const modalTitle = document.getElementById("items-update-title"); -// обнуление значений модального окна, т. к. -// используется одно окно для всех операций function resetValues() { cntrls.lineId.value = ""; cntrls.itemsType.value = ""; @@ -23,10 +13,6 @@ function resetValues() { cntrls.image.value = ""; cntrls.imagePreview.src = imagePlaceholder; } - -// функция для показа модального окна -// перед показом происходит заполнение формы для редактирования -// если объект item не пуст export function showUpdateModal(item) { modalTitle.innerHTML = item === null ? "Добавить" : "Изменить"; console.info(item); @@ -36,10 +22,6 @@ export function showUpdateModal(item) { cntrls.itemsType.value = item.itemsId; cntrls.price.value = item.price; cntrls.count.value = item.count; - // заполнение превью - // Если пользователь выбрал изображение, то оно загружается - // в тэг image с id image - preview - // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder cntrls.imagePreview.src = item.image ? item.image : imagePlaceholder; } else { resetValues(); @@ -48,12 +30,8 @@ export function showUpdateModal(item) { myModal.show(); } -// функция для скрытия модального окна export function hideUpdateModal() { resetValues(); - - // удаление класса was-validated для скрытия результатов валидации cntrls.form.classList.remove("was-validated"); - myModal.hide(); -} +} \ No newline at end of file diff --git a/lab2/js/lines-rest-api.js b/lab2/js/lines-rest-api.js index d5f21ac..4140ed0 100644 --- a/lab2/js/lines-rest-api.js +++ b/lab2/js/lines-rest-api.js @@ -1,9 +1,5 @@ -// модуль для работы с REST API сервера - -// адрес сервера const serverUrl = "http://localhost:8081"; -// функция возвращает объект нужной структуры для отправки на сервер function createLineObject(item, price, count, image) { return { itemsId: item, @@ -14,7 +10,6 @@ function createLineObject(item, price, count, image) { }; } -// обращение к серверу для получения всех типов товара (get) export async function getAllItemTypes() { const response = await fetch(`${serverUrl}/items`); if (!response.ok) { @@ -23,7 +18,6 @@ export async function getAllItemTypes() { return response.json(); } -// обращение к серверу для получения всех записей (get) export async function getAllLines() { const response = await fetch(`${serverUrl}/lines?_expand=items`); if (!response.ok) { @@ -32,8 +26,6 @@ export async function getAllLines() { return response.json(); } -// обращение к серверу для получения записи по первичному ключу (id) (get) -// id передается в качестве части пути URL get-запроса export async function getLine(id) { const response = await fetch(`${serverUrl}/lines/${id}?_expand=items`); if (!response.ok) { @@ -42,8 +34,6 @@ export async function getLine(id) { return response.json(); } -// обращение к серверу для создания записи (post) -// объект отправляется в теле запроса (body) export async function createLine(item, price, count, image) { const itemObject = createLineObject(item, price, count, image); @@ -63,9 +53,6 @@ export async function createLine(item, price, count, image) { return response.json(); } -// обращение к серверу для обновления записи по id (put) -// объект отправляется в теле запроса (body) -// id передается в качестве части пути URL get-запроса export async function updateLine(id, item, price, count, image) { const itemObject = createLineObject(item, price, count, image); @@ -85,8 +72,6 @@ export async function updateLine(id, item, price, count, image) { return response.json(); } -// обращение к серверу для удаления записи по id (delete) -// id передается в качестве части пути URL get-запроса export async function deleteLine(id) { const options = { method: "DELETE", @@ -97,4 +82,4 @@ export async function deleteLine(id) { throw response.statusText; } return response.json(); -} +} \ No newline at end of file diff --git a/lab2/js/lines-ui.js b/lab2/js/lines-ui.js index 1b87051..83ae6e7 100644 --- a/lab2/js/lines-ui.js +++ b/lab2/js/lines-ui.js @@ -1,8 +1,3 @@ -// модуль для работы с элементами управления - -// объект для удобного получения элементов -// при обращении к атрибуту объекта вызывается -// нужная функция для поиска элемента export const cntrls = { button: document.getElementById("items-add"), table: document.querySelector("#items-table tbody"), @@ -15,11 +10,8 @@ export const cntrls = { imagePreview: document.getElementById("image-preview"), }; -// Дефолтное превью export const imagePlaceholder = "https://via.placeholder.com/200"; -// функция создает тег option для select -// export function createItemsOption(name, value = "", isSelected = false) { const option = document.createElement("option"); option.value = value || ""; @@ -28,67 +20,40 @@ export function createItemsOption(name, value = "", isSelected = false) { return option; } -// функция создает ссылку (a) для таблицы -// содержимое тега a заполняется необходимой иконкой (icon) -// при нажатии вызывается callback -// ссылка "оборачивается" тегом td -// function createTableAnchor(icon, callback) { const i = document.createElement("i"); i.classList.add("fa-solid", icon); - const a = document.createElement("a"); a.href = "#"; a.appendChild(i); a.onclick = (event) => { - // чтобы в URL не добавлялась решетка event.preventDefault(); event.stopPropagation(); callback(); }; - const td = document.createElement("td"); td.appendChild(a); return td; } - -// функция создает колонку таблицы с текстом value -// value function createTableColumn(value) { const td = document.createElement("td"); td.textContent = value; return td; } -// функция создает строку таблицы -// -// index + 1 -// item.items.name -// parseFloat(item.price).toFixed(2)) -// item.count -// parseFloat(item.sum).toFixed(2)) -// -// -// -// export function createTableRow(item, index, editCallback, 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.appendChild(rowNumber); row.appendChild(createTableColumn(item.items.name)); row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2))); row.appendChild(createTableColumn(item.count)); row.appendChild(createTableColumn(parseFloat(item.sum).toFixed(2))); - // редактировать в модальном окне row.appendChild(createTableAnchor("fa-pencil", editCallback)); - // редактировать на странице page-edit row.appendChild(createTableAnchor("fa-pen-to-square", editPageCallback)); - // удаление row.appendChild(createTableAnchor("fa-trash", deleteCallback)); return row; } diff --git a/lab2/js/lines.js b/lab2/js/lines.js index 1da8f63..dbd682a 100644 --- a/lab2/js/lines.js +++ b/lab2/js/lines.js @@ -1,5 +1,3 @@ -// модуль с логикой - import { hideUpdateModal, showUpdateModal } from "./lines-modal"; import { createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine, @@ -9,17 +7,9 @@ import { } from "./lines-ui"; async function drawItemsSelect() { - // вызов метода REST API для получения списка типов товаров const data = await getAllItemTypes(); - // очистка содержимого select - // удаляется все, что находится между тегами - // но не атрибуты cntrls.itemsType.innerHTML = ""; - // пустое значение cntrls.itemsType.appendChild(createItemsOption("Выберите значение", "", true)); - // цикл по результату ответа от сервера - // используется лямбда-выражение - // (item) => {} аналогично function(item) {} data.forEach((item) => { cntrls.itemsType.appendChild(createItemsOption(item.name, item.id)); }); @@ -30,23 +20,13 @@ async function drawLinesTable() { if (!cntrls.table) { return; } - // вызов метода REST API для получения всех записей const data = await getAllLines(); - // очистка содержимого 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), @@ -57,21 +37,17 @@ async function drawLinesTable() { async function addLine(item, price, count, image) { console.info("Try to add item"); - // вызов метода REST API для добавления записи const data = await createLine(item, price, count, image); console.info("Added"); console.info(data); - // загрузка и заполнение table drawLinesTable(); } async function editLine(id, item, price, count, image) { console.info("Try to update item"); - // вызов метода REST API для обновления записи const data = await updateLine(id, item, price, count, image); console.info("Updated"); console.info(data); - // загрузка и заполнение table drawLinesTable(); } @@ -81,110 +57,52 @@ async function removeLine(id) { 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, @@ -201,88 +119,42 @@ export function linesForm() { 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.price.value = line.price; cntrls.count.value = line.count; - // заполнение превью - // Если пользователь выбрал изображение, то оно загружается - // в тэг 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, @@ -299,7 +171,6 @@ export async function linesPageForm() { imageBase64, ); } - // возврат к странице page4 goBack(); }); -} +} \ No newline at end of file diff --git a/lab2/js/validation.js b/lab2/js/validation.js index e5641b6..7c01f13 100644 --- a/lab2/js/validation.js +++ b/lab2/js/validation.js @@ -1,25 +1,16 @@ -// модуль используется для валидации форма на странице - function validation() { - // поиск всех форма с классом .needs-validation const forms = document.querySelectorAll("form.needs-validation"); for (let i = 0; i < forms.length; i += 1) { const form = forms[i]; - // для каждой формы добавляется обработчик события отправки form.addEventListener("submit", (event) => { - // если форма не прошла валидацию - // то выключить стандартное действие if (!form.checkValidity()) { event.preventDefault(); - // предотвращает распространение preventDefault - // на другие объекты event.stopPropagation(); } - // добавляет к форме класс was-validated form.classList.add("was-validated"); }); } } -export default validation; +export default validation; \ No newline at end of file diff --git a/lab2/style.css b/lab2/style.css index f684a70..06b810b 100644 --- a/lab2/style.css +++ b/lab2/style.css @@ -19,7 +19,7 @@ header nav a:hover { @media (max-width: 576px) { .navbar-brand img { - margin-left: 25px; + margin-left: 0px; } } @@ -41,7 +41,7 @@ header nav a:hover { } } -.btn { +.btn-warning { height: 35px; width: 176px; border-radius: 8px; @@ -50,6 +50,11 @@ header nav a:hover { } .custom-btn { + height: 35px; + width: 176px; + border-radius: 8px; + margin-right: 10px; + margin-top: 10px; background-color: #FFA800; } diff --git a/lab3/Administrator.html b/lab3/Administrator.html index e6bcef2..174c395 100644 --- a/lab3/Administrator.html +++ b/lab3/Administrator.html @@ -38,126 +38,81 @@
-
-
-
-
-
-

Панель администратора

-
-
-

Добавление товара

-
- placeholder -
-
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- -
- -
-
+

Панель администратора

+
+ + Добавить товар (страница) +
+
+

Таблица данных

+ + + + + + + + + + + + +
№ТоварЦенаКоличествоСумма
+
+
+
+ Все права защищены © 2023-2024 +
+