lab 3 x
This commit is contained in:
GokaPek
parent
060d8225b8
commit
ad67a856ae
@ -57,11 +57,7 @@
|
||||
<button id="items-add" class="btn btn-info">Add-Dialog</button>
|
||||
<a class="btn btn-success" href="/page-edit.html">Add-Page</a>
|
||||
</div>
|
||||
<form class="form-inlinecustom-search mx-auto mt-2" >
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
|
||||
<div class="form-group col-md-6">
|
||||
<input type="text" class="form-control mt-2" id="keyword" placeholder="Keyword" />
|
||||
</div>
|
||||
<form class="form-inlinecustom-search mx-auto mt-2">
|
||||
<div class="scroll-panel-favour">
|
||||
<main class="container-fluid p-2">
|
||||
<div>
|
||||
@ -70,6 +66,7 @@
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Category</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Author</th>
|
||||
<th scope="col">ISBN</th>
|
||||
<th scope="col">Price</th>
|
||||
@ -109,21 +106,21 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input id="name" name="name" class="form-control" type="text" placeholder="Name"
|
||||
required />
|
||||
<input id="name_book" name="name_book" class="form-control" type="text"
|
||||
placeholder="Name" required />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input id="author" name="author" class="form-control" type="text" placeholder="Author"
|
||||
required />
|
||||
<input id="author" name="author" class="form-control" type="text"
|
||||
placeholder="Author" required />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="price">Price</label>
|
||||
<input id="price" name="price" class="form-control" type="number" value="0.00"
|
||||
min="1000.00" step="0.50" required>
|
||||
min="100.00" step="0.50" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="count">ISBN</label>
|
||||
<input id="count" name="count" class="form-control" type="number" value="0" min="1"
|
||||
<input id="isbn" name="count" class="form-control" type="isbn" value="0" min="100"
|
||||
step="1" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
@ -132,7 +129,7 @@
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="file">File</label>
|
||||
<input id="pdf" type="file" name="file" class="form-control" accept="file/*">
|
||||
<input id="text" type="file" name="file" class="form-control" accept="file/*">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@ -144,9 +141,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="row">
|
||||
<footer class="footer fixed-bottom w-100">
|
||||
<div class="container">
|
||||
@ -155,6 +149,7 @@
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module">
|
||||
import validation from "./js/validation";
|
||||
import { linesForm } from "./js/lines";
|
||||
@ -164,6 +159,7 @@
|
||||
linesForm();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -19,11 +19,12 @@ const modalTitle = document.getElementById('items-update-title');
|
||||
function resetValues() {
|
||||
cntrls.lineId.value = '';
|
||||
cntrls.itemsType.value = '';
|
||||
cntrls.name_book.value = '';
|
||||
cntrls.author.value = '';
|
||||
cntrls.name.value = '';
|
||||
cntrls.price.value = parseFloat(0).toFixed(2);
|
||||
cntrls.count.value = 0;
|
||||
cntrls.isbn.value = 0;
|
||||
cntrls.image.value = '';
|
||||
cntrls.text.value = '';
|
||||
cntrls.imagePreview.src = imagePlaceholder;
|
||||
}
|
||||
|
||||
@ -38,9 +39,10 @@ export function showUpdateModal(item) {
|
||||
if (item) {
|
||||
cntrls.lineId.value = item.id;
|
||||
cntrls.itemsType.value = item.itemsId;
|
||||
cntrls.name_book.value = item.name_book;
|
||||
cntrls.author.value = item.author;
|
||||
cntrls.price.value = item.price;
|
||||
cntrls.count.value = item.count;
|
||||
cntrls.isbn.value = item.isbn;
|
||||
// заполнение превью
|
||||
// Если пользователь выбрал изображение, то оно загружается
|
||||
// в тэг image с id image - preview
|
||||
|
||||
@ -5,14 +5,15 @@ const serverUrl = 'http://localhost:8081';
|
||||
|
||||
// функция возвращает объект нужной структуры для отправки на сервер
|
||||
// eslint-disable-next-line require-jsdoc
|
||||
function createLineObject(item, author, price, count, image) {
|
||||
function createLineObject(item, name_book, author, price, isbn, image, text) {
|
||||
return {
|
||||
itemsId: item,
|
||||
name_book,
|
||||
author,
|
||||
count,
|
||||
sum: parseFloat(price * count).toFixed(2),
|
||||
isbn,
|
||||
price: parseFloat(price).toFixed(2),
|
||||
image,
|
||||
text,
|
||||
};
|
||||
}
|
||||
|
||||
@ -50,8 +51,8 @@ export async function getLine(id) {
|
||||
// обращение к серверу для создания записи (post)
|
||||
// объект отправляется в теле запроса (body)
|
||||
// eslint-disable-next-line require-jsdoc
|
||||
export async function createLine(item, author, price, count, image) {
|
||||
const itemObject = createLineObject(item, author, price, count, image);
|
||||
export async function createLine(item, name_book, author, price, isbn, image, text) {
|
||||
const itemObject = createLineObject(item, name_book, author, price, isbn, image, text);
|
||||
|
||||
const options = {
|
||||
method: 'POST',
|
||||
@ -73,8 +74,8 @@ export async function createLine(item, author, price, count, image) {
|
||||
// объект отправляется в теле запроса (body)
|
||||
// id передается в качестве части пути URL get-запроса
|
||||
// eslint-disable-next-line require-jsdoc
|
||||
export async function updateLine(id, item, price, count, image) {
|
||||
const itemObject = createLineObject(item, price, count, image);
|
||||
export async function updateLine(id, item, name_book, author, price, isbn, image, text) {
|
||||
const itemObject = createLineObject(item, name_book, author, price, isbn, image, text);
|
||||
|
||||
const options = {
|
||||
method: 'PUT',
|
||||
|
||||
@ -11,9 +11,11 @@ export const cntrls = {
|
||||
itemsType: document.getElementById('item'),
|
||||
author: document.getElementById('author'),
|
||||
name: document.getElementById('name'),
|
||||
name_book: document.getElementById('name_book'),
|
||||
price: document.getElementById('price'),
|
||||
count: document.getElementById('count'),
|
||||
isbn: document.getElementById('isbn'),
|
||||
image: document.getElementById('image'),
|
||||
text: document.getElementById('text'),
|
||||
imagePreview: document.getElementById('image-preview'),
|
||||
};
|
||||
|
||||
@ -90,8 +92,9 @@ export function createTableRow(item, index, editCallback, editPageCallback, dele
|
||||
|
||||
row.appendChild(rowNumber);
|
||||
row.appendChild(createTableColumn(item.items.name));
|
||||
row.appendChild(createTableColumn(item.name_book));
|
||||
row.appendChild(createTableColumn(item.author));
|
||||
row.appendChild(createTableColumn(item.count));
|
||||
row.appendChild(createTableColumn(item.isbn));
|
||||
row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
|
||||
// редактировать в модальном окне
|
||||
row.appendChild(createTableAnchor('fa-pencil', editCallback));
|
||||
|
||||
@ -59,10 +59,10 @@ async function drawLinesTable() {
|
||||
}
|
||||
|
||||
// eslint-disable-next-line require-jsdoc
|
||||
async function addLine(item, author, price, count, image) {
|
||||
async function addLine(item, name_book, author, price, isbn, image, text) {
|
||||
console.info('Try to add item');
|
||||
// вызов метода REST API для добавления записи
|
||||
const data = await createLine(item, author, price, count, image);
|
||||
const data = await createLine(item, name_book, author, price, isbn, image, text);
|
||||
console.info('Added');
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
@ -70,10 +70,10 @@ async function addLine(item, author, price, count, image) {
|
||||
}
|
||||
|
||||
// eslint-disable-next-line require-jsdoc
|
||||
async function editLine(id, item, author, price, count, image) {
|
||||
async function editLine(id, item, name_book, author, price, isbn, image, text) {
|
||||
console.info('Try to update item');
|
||||
// вызов метода REST API для обновления записи
|
||||
const data = await updateLine(id, item, author, price, count, image);
|
||||
const data = await updateLine(id, item, name_book, author, price, isbn, image, text);
|
||||
console.info('Updated');
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
@ -189,6 +189,12 @@ export function linesForm() {
|
||||
// без использования обработчиков (callback) с помощью await
|
||||
imageBase64 = await readFile(blob);
|
||||
}
|
||||
//TEXT
|
||||
let textBase64 = '';
|
||||
const result = await fetch(cntrls.text.src);
|
||||
const blob = await result.blob();
|
||||
textBase64 = await readFile(blob);
|
||||
|
||||
|
||||
// получение id строки для редактирования
|
||||
// это значение содержится в скрытом input
|
||||
@ -199,19 +205,23 @@ export function linesForm() {
|
||||
if (!currentId) {
|
||||
await addLine(
|
||||
cntrls.itemsType.value,
|
||||
cntrls.name_book.value,
|
||||
cntrls.author.value,
|
||||
cntrls.price.value,
|
||||
cntrls.count.value,
|
||||
cntrls.isbn.value,
|
||||
imageBase64,
|
||||
textBase64,
|
||||
);
|
||||
} else {
|
||||
await editLine(
|
||||
currentId,
|
||||
cntrls.itemsType.value,
|
||||
cntrls.name_book.value,
|
||||
cntrls.author.value,
|
||||
cntrls.price.value,
|
||||
cntrls.count.value,
|
||||
cntrls.isbn.value,
|
||||
imageBase64,
|
||||
textBase64,
|
||||
);
|
||||
}
|
||||
|
||||
@ -251,9 +261,10 @@ export async function linesPageForm() {
|
||||
const line = await getLine(currentId);
|
||||
// заполнение формы для редактирования
|
||||
cntrls.itemsType.value = line.itemsId;
|
||||
cntrls.name_book.value = line.name_book;
|
||||
cntrls.author.value = line.author;
|
||||
cntrls.price.value = line.price;
|
||||
cntrls.count.value = line.count;
|
||||
cntrls.isbn.value = line.isbn;
|
||||
// заполнение превью
|
||||
// Если пользователь выбрал изображение, то оно загружается
|
||||
// в тэг image с id image - preview
|
||||
@ -296,6 +307,11 @@ export async function linesPageForm() {
|
||||
// без использования обработчиков (callback) с помощью await
|
||||
imageBase64 = await readFile(blob);
|
||||
}
|
||||
//TEXT
|
||||
let textBase64 = '';
|
||||
const result = await fetch(cntrls.text.src);
|
||||
const blob = await result.blob();
|
||||
textBase64 = await readFile(blob);
|
||||
|
||||
// если значение параметра запроса не задано,
|
||||
// то необходимо выполнить добавление записи
|
||||
@ -303,19 +319,24 @@ export async function linesPageForm() {
|
||||
if (!currentId) {
|
||||
await addLine(
|
||||
cntrls.itemsType.value,
|
||||
cntrls.name_book.value,
|
||||
cntrls.author.value,
|
||||
cntrls.price.value,
|
||||
cntrls.count.value,
|
||||
cntrls.isbn.value,
|
||||
imageBase64,
|
||||
textBase64,
|
||||
);
|
||||
} else {
|
||||
await editLine(
|
||||
currentId,
|
||||
cntrls.itemsType.value,
|
||||
cntrls.name_book.value,
|
||||
cntrls.author.value,
|
||||
cntrls.price.value,
|
||||
cntrls.count.value,
|
||||
cntrls.isbn.value,
|
||||
imageBase64,
|
||||
textBase64,
|
||||
|
||||
);
|
||||
}
|
||||
// возврат к странице page4
|
||||
|
||||
121
Lab3/PrBookfill/page-edit.html
Normal file
121
Lab3/PrBookfill/page-edit.html
Normal file
@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Boolfill</title>
|
||||
|
||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" />
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
|
||||
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid px-4">
|
||||
<div class="row">
|
||||
<header class="col-12">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent py-0">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<img class="logo mb-2" src="png/logo.png" alt="Логотип">
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse me-5" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mt-2">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="button"
|
||||
onclick="location.href='search.html';"><i class="fas fa-search"></i></button>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link h5 h-sm-4" href="favour.html">Favourite</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link h5 h-sm-4" href="audio.html">Audio</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link h5 h-sm-4" href="comics.html">Comics</a>
|
||||
</li>
|
||||
<a class="nav-item mb-3" href="login.html">
|
||||
<img id="profile" class="user-photo mt-1 ml-4 mr-3">
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="row mb-5">
|
||||
<main class="container-fluid p-3 mb-5">
|
||||
<div class="text-center">
|
||||
<img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-square"
|
||||
alt="placeholder">
|
||||
</div>
|
||||
<form id="items-form" class="needs-validation" novalidate>
|
||||
<input id="items-line-id" type="number" hidden>
|
||||
<div class="mb-2">
|
||||
<label for="item" class="form-label">Category</label>
|
||||
<select id="item" class="form-select" name="selected" required>
|
||||
<option>Book</option>
|
||||
<option>Audio</option>
|
||||
<option>Comics</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input id="name_book" name="name_book" class="form-control" type="text" placeholder="Name"
|
||||
required />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input id="author" name="author" class="form-control" type="text" placeholder="Author"
|
||||
required />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="price">Price</label>
|
||||
<input id="price" name="price" class="form-control" type="number" value="0.00" min="100.00"
|
||||
step="0.50" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="count">ISBN</label>
|
||||
<input id="isbn" name="count" class="form-control" type="isbn" value="0" min="100" step="1"
|
||||
required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="image">Image</label>
|
||||
<input id="image" type="file" name="image" class="form-control" accept="image/*">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="file">File</label>
|
||||
<input id="text" type="file" name="file" class="form-control" accept="file/*">
|
||||
</div>
|
||||
<a href="/admin.html" class="btn btn-secondary">Back</a>
|
||||
<button type="submit" class="btn btn-primary but-cust">Save</button>
|
||||
</form>
|
||||
</main>
|
||||
</div>
|
||||
<div class="row">
|
||||
<footer class="footer fixed-bottom w-100">
|
||||
<div class="container">
|
||||
<img class="logos ml-0" src="png/logos.png" alt="Логотип" />
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import validation from "./js/validation";
|
||||
import { linesPageForm } from "./js/lines"
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
validation();
|
||||
linesPageForm();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user