lab3_code
This commit is contained in:
Илья
parent
bbd1a705b9
commit
02ae977f7a
20
.eslintrc.json
Normal file
20
.eslintrc.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es2021": true
|
||||||
|
},
|
||||||
|
"extends": "airbnb-base",
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 12,
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"quotes": "off",
|
||||||
|
"indent": "off",
|
||||||
|
"no-console": "off",
|
||||||
|
"no-use-before-define": "off",
|
||||||
|
"no-alert": "off",
|
||||||
|
"no-restricted-globals": "off",
|
||||||
|
"quote-props": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
21
README.md
21
README.md
@ -1,2 +1,21 @@
|
|||||||
# Internet_Programming_PIbd-21_Rodionov_I_A
|
### Окружение
|
||||||
|
|
||||||
|
В VSCode необходимо установить плагин (расширение) ESLint:
|
||||||
|
|
||||||
|
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
|
||||||
|
|
||||||
|
ESLint уже настроен (см. конфиг .eslintrc.json), но для справки можно почитать материал по ссылке
|
||||||
|
|
||||||
|
https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code
|
||||||
|
|
||||||
|
### Установка зависимостей
|
||||||
|
|
||||||
|
npm install
|
||||||
|
|
||||||
|
### Запуск в режиме разработки
|
||||||
|
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
### Запуск продуктовой версии (production)
|
||||||
|
|
||||||
|
npm run prod
|
||||||
149
add-item.html
149
add-item.html
@ -2,7 +2,7 @@
|
|||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Добавление товара</title>
|
<title>Панель администратора</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
@ -10,7 +10,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="./style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||||
@ -65,78 +65,90 @@
|
|||||||
|
|
||||||
<main class="container-md d-flex flex-column flex-grow-1 my-0">
|
<main class="container-md d-flex flex-column flex-grow-1 my-0">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<form class="col-lg-8 col-xl-7 col-xxl-6" action="./add-item.html" method="get">
|
<div class="col-12 text-center">
|
||||||
<div class="mb-4 mt-5">
|
<img src="https://placehold.co/400x600/#DCDCDC/black" id="image-preview" class="mt-5 mb-4" alt="placeholder" width="400" height="600">
|
||||||
<label class="form-label" for="item-name">Название книги</label>
|
</div>
|
||||||
<input id="item-name" class="form-control" type="text" required>
|
<form id="items-form" class="needs-validation col-lg-8 col-xl-7 col-xxl-6" novalidate>
|
||||||
</div>
|
<div class="mb-4">
|
||||||
<div class="mb-4">
|
<label for="item-category" class="form-label">Категория каталога</label>
|
||||||
<label class="form-label" for="item-author">Автор</label>
|
<select id="item-category" class="form-select" name="selected" required>
|
||||||
<input id="item-author" class="form-control" type="text" required>
|
</select>
|
||||||
</div>
|
|
||||||
<div class="mb-4">
|
|
||||||
<label class="form-label" for="price">Цена</label>
|
|
||||||
<input id="price" class="form-control" type="number" required>
|
|
||||||
</div>
|
|
||||||
<div class="mb-4">
|
|
||||||
<label class="form-label" for="item-descrition">Описание книги</label>
|
|
||||||
<textarea class="form-control" id="item-descrition" rows="3"></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="mb-4">
|
|
||||||
<label class="form-label" for="item-annotation">Аннотация</label>
|
|
||||||
<textarea class="form-control" id="item-annotation" rows="3"></textarea>
|
|
||||||
</div>
|
|
||||||
<p class="mb-3">
|
|
||||||
Xарактеристики:
|
|
||||||
</p>
|
|
||||||
<div class="mb-4 border border-1 border-secondary p-2">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label class="form-label" for="item-id">ID товара</label>
|
|
||||||
<input id="item-id" class="form-control" type="number" required>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-4">
|
||||||
<label class="form-label" for="item-publisher">Издательство</label>
|
<label class="form-label" for="item-title">Название книги</label>
|
||||||
<input id="item-publisher" class="form-control" type="text">
|
<input id="item-title" class="form-control" type="text" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-4">
|
||||||
<label class="form-label" for="item-series">Серия</label>
|
<label class="form-label" for="item-author">Автор</label>
|
||||||
<input id="item-series" class="form-control" type="text">
|
<input id="item-author" class="form-control" type="text" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-4">
|
||||||
<label class="form-label" for="item-publication-year">Год издания</label>
|
<label class="form-label" for="item-price">Цена</label>
|
||||||
<input id="item-publication-year" class="form-control" type="number">
|
<input id="item-price" name="item-price" class="form-control" value="0.00" min="100.00" step="0.50" type="number" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-4">
|
||||||
<label class="form-label" for="item-pages-num">Количество страниц</label>
|
<label class="form-label" for="item-count">Количество</label>
|
||||||
<input id="item-pages-num" class="form-control" type="number">
|
<input id="item-count" name="item-count" class="form-control" type="number" value="0" min="1" step="1" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-4">
|
||||||
<label class="form-label" for="item-size">Размер</label>
|
<label class="form-label" for="item-descrition">Описание книги</label>
|
||||||
<input id="item-size" class="form-control" type="text">
|
<textarea class="form-control" id="item-descrition" rows="3"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-4">
|
||||||
<label class="form-label" for="item-cover-type">Тип обложки</label>
|
<label class="form-label" for="item-annotation">Аннотация</label>
|
||||||
<input id="item-cover-type" class="form-control" type="text">
|
<textarea class="form-control" id="item-annotation" rows="3"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<p class="mb-3">
|
||||||
<label class="form-label" for="item-circulation">Тираж</label>
|
Xарактеристики:
|
||||||
<input id="item-circulation" class="form-control" type="number">
|
</p>
|
||||||
|
<div class="mb-4 border border-1 border-secondary p-2">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label" for="item-id">ID товара</label>
|
||||||
|
<input id="item-id" class="form-control" type="number" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label" for="item-publisher">Издательство</label>
|
||||||
|
<input id="item-publisher" class="form-control" type="text">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label" for="item-series">Серия</label>
|
||||||
|
<input id="item-series" class="form-control" type="text">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label" for="item-publication-year">Год издания</label>
|
||||||
|
<input id="item-publication-year" class="form-control" type="number">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label" for="item-pages-num">Количество страниц</label>
|
||||||
|
<input id="item-pages-num" class="form-control" type="number">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label" for="item-size">Размер</label>
|
||||||
|
<input id="item-size" class="form-control" type="text">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label" for="item-cover-type">Тип обложки</label>
|
||||||
|
<input id="item-cover-type" class="form-control" type="text">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label" for="item-circulation">Тираж</label>
|
||||||
|
<input id="item-circulation" class="form-control" type="number">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="form-label" for="item-weight">Вес, г</label>
|
||||||
|
<input id="item-weight" class="form-control" type="number">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="mb-4">
|
||||||
<label class="form-label" for="item-weight">Вес, г</label>
|
<label class="form-label" for="image">Обложка книги</label>
|
||||||
<input id="item-weight" class="form-control" type="number">
|
<input id="image" type="file" name="image" class="form-control" accept="image/*">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<a href="/admin.html" class="btn btn-secondary">Назад</a>
|
||||||
<div class="mb-4">
|
<div class="text-center mb-5">
|
||||||
<label class="form-label" for="item-cover">Обложка книги</label>
|
<button type="submit" class="btn btn-primary w-50 rounded-5" id="add-btn">Сохранить</button>
|
||||||
<input type="file" class="form-control" id="item-cover">
|
</div>
|
||||||
</div>
|
</form>
|
||||||
<div class="text-center mb-5">
|
|
||||||
<button class="btn btn-primary w-50 rounded-5" type="submit" id="add-btn">Добавить товар</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="footer flex-shrink-0">
|
<footer class="footer flex-shrink-0">
|
||||||
@ -177,5 +189,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script type="module">
|
||||||
|
import validation from "./js/validation";
|
||||||
|
import { linesPageForm } from "./js/lines"
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
validation();
|
||||||
|
linesPageForm();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
43
admin.html
43
admin.html
@ -10,7 +10,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="./style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||||
@ -72,43 +72,21 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-12 px-0">
|
<div class="col-12 px-0">
|
||||||
<div class="block table-responsive">
|
<div class="block table-responsive">
|
||||||
<table class="table table-hover table-bordered align-middle">
|
<table id="items-table" class="table table-hover table-bordered align-middle">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">#</th>
|
<th scope="col">#</th>
|
||||||
<th scope="col">Название книги</th>
|
<th scope="col">Название книги</th>
|
||||||
<th scope="col">Автор</th>
|
<th scope="col">Автор</th>
|
||||||
<th scope="col">Цена</th>
|
<th scope="col">Цена</th>
|
||||||
|
<th scope="col">Количество</th>
|
||||||
|
<th scope="col">Сумма</th>
|
||||||
|
<th scope="col">Категория каталога</th>
|
||||||
<th scope="col"></th>
|
<th scope="col"></th>
|
||||||
<th scope="col"></th>
|
<th scope="col"></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="table-group-divider">
|
<tbody class="table-group-divider"></tbody>
|
||||||
<tr>
|
|
||||||
<th scope="row">1</th>
|
|
||||||
<td>Форсайт</td>
|
|
||||||
<td>Сергей Лукьяненко</td>
|
|
||||||
<td>775 ₽</td>
|
|
||||||
<td><a class="btn btn-primary w-100" href="add-item.html">Редактировать</a></td>
|
|
||||||
<td><a class="btn btn-primary w-100">Удалить</a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">2</th>
|
|
||||||
<td>Колесо времени. Книга 11. Нож сновидений</td>
|
|
||||||
<td>Роберт Джордан</td>
|
|
||||||
<td>977 ₽</td>
|
|
||||||
<td><a class="btn btn-primary w-100" href="add-item.html">Редактировать</a></td>
|
|
||||||
<td><a class="btn btn-primary w-100">Удалить</a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">3</th>
|
|
||||||
<td>Четвертое крыло</td>
|
|
||||||
<td>Яррос Ребекка</td>
|
|
||||||
<td>999 ₽</td>
|
|
||||||
<td><a class="btn btn-primary w-100" href="add-item.html">Редактировать</a></td>
|
|
||||||
<td><a class="btn btn-primary w-100">Удалить</a></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -158,5 +136,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script type="module">
|
||||||
|
import validation from "./js/validation";
|
||||||
|
import { linesPageForm } from "./js/lines";
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
validation();
|
||||||
|
linesPageForm();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -10,7 +10,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="./style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="./style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="d-flex flex-column min-vh-100">
|
<body class="d-flex flex-column min-vh-100">
|
||||||
|
|||||||
245
catalog.html
245
catalog.html
@ -7,10 +7,10 @@
|
|||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
<link rel="stylesheet" href="./style.css">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="d-flex flex-column min-vh-100 h-100">
|
<body class="d-flex flex-column min-vh-100 h-100">
|
||||||
@ -135,240 +135,10 @@
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
<div class="row gy-3" id="book-container">
|
||||||
<div class="block d-flex flex-column h-100">
|
|
||||||
<div class="d-flex justify-content-center mb-4">
|
|
||||||
<a href="/">
|
|
||||||
<img src="book_covers/catalog/1.png" class="catalog-book-cover" alt="book-cover-catalog-1" width="155" height="245">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-book-description d-flex flex-column align-items-start">
|
|
||||||
<p class="catalog-price mb-3">
|
|
||||||
593 ₽
|
|
||||||
</p>
|
|
||||||
<p class="catalog-book-title mb-3">
|
|
||||||
Граф Аверин. Колдун Российской империи
|
|
||||||
</p>
|
|
||||||
<p class="catalog-author mb-3">
|
|
||||||
Виктор Дашкевич
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow-1"></div>
|
|
||||||
<div class="catalog-btn-checkout-div d-flex justify-content-start">
|
|
||||||
<button class="catalog-bth-checkout btn rounded-5 px-3">
|
|
||||||
В корзину
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
|
||||||
<div class="block d-flex flex-column h-100">
|
|
||||||
<div class="d-flex justify-content-center mb-4">
|
|
||||||
<a href="/">
|
|
||||||
<img src="book_covers/catalog/2.png" class="catalog-book-cover" alt="book-cover-catalog-2" width="155" height="245">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-book-description d-flex flex-column align-items-start">
|
|
||||||
<p class="catalog-price mb-3">
|
|
||||||
977 ₽
|
|
||||||
</p>
|
|
||||||
<p class="catalog-book-title mb-3">
|
|
||||||
Колесо времени. Книга 11. Нож сновидений
|
|
||||||
</p>
|
|
||||||
<p class="catalog-author mb-3">
|
|
||||||
Роберт Джордан
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow-1"></div>
|
|
||||||
<div class="catalog-btn-checkout-div d-flex justify-content-start">
|
|
||||||
<button class="catalog-bth-checkout btn rounded-5 px-3">
|
|
||||||
В корзину
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
|
||||||
<div class="block d-flex flex-column h-100">
|
|
||||||
<div class="d-flex justify-content-center mb-4">
|
|
||||||
<a href="./product_card.html">
|
|
||||||
<img src="book_covers/catalog/3.png" class="catalog-book-cover" alt="book-cover-catalog-3" width="155" height="245">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-book-description d-flex flex-column align-items-start">
|
|
||||||
<p class="catalog-price mb-3">
|
|
||||||
775 ₽
|
|
||||||
</p>
|
|
||||||
<p class="catalog-book-title mb-3">
|
|
||||||
Форсайт
|
|
||||||
</p>
|
|
||||||
<p class="catalog-author mb-3">
|
|
||||||
Сергей Лукьяненко
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow-1"></div>
|
|
||||||
<div class="catalog-btn-checkout-div d-flex justify-content-start">
|
|
||||||
<button class="catalog-bth-checkout btn rounded-5 px-3">
|
|
||||||
В корзину
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
|
||||||
<div class="block d-flex flex-column h-100">
|
|
||||||
<div class="d-flex justify-content-center mb-4">
|
|
||||||
<a href="/">
|
|
||||||
<img src="book_covers/catalog/4.png" class="catalog-book-cover" alt="book-cover-catalog-4" width="155" height="245">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-book-description d-flex flex-column align-items-start">
|
|
||||||
<p class="catalog-price mb-3">
|
|
||||||
662 ₽
|
|
||||||
</p>
|
|
||||||
<p class="catalog-book-title mb-3">
|
|
||||||
Шолох. Долина Колокольчиков
|
|
||||||
</p>
|
|
||||||
<p class="catalog-author mb-3">
|
|
||||||
Антонина Крейн
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow-1"></div>
|
|
||||||
<div class="catalog-btn-checkout-div d-flex justify-content-start">
|
|
||||||
<button class="catalog-bth-checkout btn rounded-5 px-3">
|
|
||||||
В корзину
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
|
||||||
<div class="block d-flex flex-column h-100">
|
|
||||||
<div class="d-flex justify-content-center mb-4">
|
|
||||||
<a href="/">
|
|
||||||
<img src="book_covers/catalog/5.png" class="catalog-book-cover" alt="book-cover-catalog-5" width="155" height="245">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-book-description d-flex flex-column align-items-start">
|
|
||||||
<p class="catalog-price mb-3">
|
|
||||||
594 ₽
|
|
||||||
</p>
|
|
||||||
<p class="catalog-book-title mb-3">
|
|
||||||
Скрижаль Исет. Грешные души
|
|
||||||
</p>
|
|
||||||
<p class="catalog-author mb-3">
|
|
||||||
Мишина Влада
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow-1"></div>
|
|
||||||
<div class="catalog-btn-checkout-div d-flex justify-content-start">
|
|
||||||
<button class="catalog-bth-checkout btn rounded-5 px-3">
|
|
||||||
В корзину
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
|
||||||
<div class="block d-flex flex-column h-100">
|
|
||||||
<div class="d-flex justify-content-center mb-4">
|
|
||||||
<a href="/">
|
|
||||||
<img src="book_covers/catalog/6.png" class="catalog-book-cover" alt="book-cover-catalog-6" width="155" height="245">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-book-description d-flex flex-column align-items-start">
|
|
||||||
<p class="catalog-price mb-3">
|
|
||||||
2 112 ₽
|
|
||||||
</p>
|
|
||||||
<p class="catalog-book-title mb-3">
|
|
||||||
Мир игры Pathologic 2. Хроники второй эпидемии
|
|
||||||
</p>
|
|
||||||
<p class="catalog-author mb-3">
|
|
||||||
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow-1"></div>
|
|
||||||
<div class="catalog-btn-checkout-div d-flex justify-content-start">
|
|
||||||
<button class="catalog-bth-checkout btn rounded-5 px-3">
|
|
||||||
В корзину
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
|
||||||
<div class="block d-flex flex-column h-100">
|
|
||||||
<div class="d-flex justify-content-center mb-4">
|
|
||||||
<a href="/">
|
|
||||||
<img src="book_covers/catalog/7.png" class="catalog-book-cover" alt="book-cover-catalog-7" width="155" height="245">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-book-description d-flex flex-column align-items-start">
|
|
||||||
<p class="catalog-price mb-3">
|
|
||||||
1 250 ₽
|
|
||||||
</p>
|
|
||||||
<p class="catalog-book-title mb-3">
|
|
||||||
Благословение небожителей. Том 5
|
|
||||||
</p>
|
|
||||||
<p class="catalog-author mb-3">
|
|
||||||
Тунсю Мосян
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow-1"></div>
|
|
||||||
<div class="catalog-btn-checkout-div d-flex justify-content-start">
|
|
||||||
<button class="catalog-bth-checkout btn rounded-5 px-3">
|
|
||||||
В корзину
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
|
||||||
<div class="block d-flex flex-column h-100">
|
|
||||||
<div class="d-flex justify-content-center mb-4">
|
|
||||||
<a href="/">
|
|
||||||
<img src="book_covers/catalog/8.png" class="catalog-book-cover" alt="book-cover-catalog-8" width="155" height="245">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-book-description d-flex flex-column align-items-start">
|
|
||||||
<p class="catalog-price mb-3">
|
|
||||||
999 ₽
|
|
||||||
</p>
|
|
||||||
<p class="catalog-book-title mb-3">
|
|
||||||
Четвертое крыло
|
|
||||||
</p>
|
|
||||||
<p class="catalog-author mb-3">
|
|
||||||
Яррос Ребекка
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow-1"></div>
|
|
||||||
<div class="catalog-btn-checkout-div d-flex justify-content-start">
|
|
||||||
<button class="catalog-bth-checkout btn rounded-5 px-3">
|
|
||||||
В корзину
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4 d-none d-md-block d-lg-none">
|
|
||||||
<div class="block d-flex flex-column h-100">
|
|
||||||
<div class="d-flex justify-content-center mb-4">
|
|
||||||
<a href="/">
|
|
||||||
<img src="book_covers/catalog/9.png" class="catalog-book-cover" alt="book-cover-catalog-9" width="155" height="245">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="catalog-book-description d-flex flex-column align-items-start">
|
|
||||||
<p class="catalog-price mb-3">
|
|
||||||
519 ₽
|
|
||||||
</p>
|
|
||||||
<p class="catalog-book-title mb-3">
|
|
||||||
Волкодав
|
|
||||||
</p>
|
|
||||||
<p class="catalog-author mb-3">
|
|
||||||
Семенова М.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow-1"></div>
|
|
||||||
<div class="catalog-btn-checkout-div d-flex justify-content-start">
|
|
||||||
<button class="catalog-bth-checkout btn rounded-5 px-3">
|
|
||||||
В корзину
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 mt-5 mt-sm-4 mt-lg-5 mb-2 gx-0">
|
<div class="col-12 mt-5 mt-sm-4 mt-lg-5 mb-2 gx-0">
|
||||||
<div class="block d-flex">
|
<div class="block d-flex">
|
||||||
<div class="me-2" id="catalog-page-navigation">
|
<div class="me-2" id="catalog-page-navigation">
|
||||||
@ -426,5 +196,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script type="module">
|
||||||
|
import { linesPageForm } from "./js/lines";
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
linesPageForm();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -10,7 +10,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="./style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||||
|
|||||||
@ -594,6 +594,11 @@ footer {
|
|||||||
#catalog-categories-mobile-list {
|
#catalog-categories-mobile-list {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#image-preview {
|
||||||
|
width: 300px;
|
||||||
|
height: 450px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 400px) {
|
@media (max-width: 400px) {
|
||||||
@ -671,6 +676,11 @@ footer {
|
|||||||
height: 28px;
|
height: 28px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#image-preview {
|
||||||
|
width: 200px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 335px) {
|
@media (max-width: 335px) {
|
||||||
@ -824,6 +834,11 @@ footer {
|
|||||||
#catalog-categories-mobile-list {
|
#catalog-categories-mobile-list {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#image-preview {
|
||||||
|
width: 155px;
|
||||||
|
height: 235px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 204px) {
|
@media (max-width: 204px) {
|
||||||
BIN
icons/photo.png
Normal file
BIN
icons/photo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
@ -10,7 +10,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="./style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="d-flex flex-column min-vh-100">
|
<body class="d-flex flex-column min-vh-100">
|
||||||
|
|||||||
204
js/lines-rest-api.js
Normal file
204
js/lines-rest-api.js
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
// модуль для работы с REST API сервера
|
||||||
|
|
||||||
|
// адрес сервера
|
||||||
|
const serverUrl = "http://localhost:8081";
|
||||||
|
|
||||||
|
// функция возвращает объект нужной структуры для отправки на сервер
|
||||||
|
function createLineObject(
|
||||||
|
title,
|
||||||
|
author,
|
||||||
|
price,
|
||||||
|
count,
|
||||||
|
descrition,
|
||||||
|
annotation,
|
||||||
|
itemId,
|
||||||
|
publisher,
|
||||||
|
series,
|
||||||
|
publicationYear,
|
||||||
|
pagesNum,
|
||||||
|
size,
|
||||||
|
coverType,
|
||||||
|
circulation,
|
||||||
|
weight,
|
||||||
|
category,
|
||||||
|
image,
|
||||||
|
) {
|
||||||
|
return {
|
||||||
|
title,
|
||||||
|
author,
|
||||||
|
price: parseFloat(price).toFixed(2),
|
||||||
|
count,
|
||||||
|
sum: parseFloat(price * count).toFixed(2),
|
||||||
|
descrition,
|
||||||
|
annotation,
|
||||||
|
itemId,
|
||||||
|
publisher,
|
||||||
|
series,
|
||||||
|
publicationYear,
|
||||||
|
pagesNum,
|
||||||
|
size,
|
||||||
|
coverType,
|
||||||
|
circulation,
|
||||||
|
weight,
|
||||||
|
categoriesId: category,
|
||||||
|
image,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для получения всех категорий каталога (get)
|
||||||
|
export async function getAllCategoryTypes() {
|
||||||
|
const response = await fetch(`${serverUrl}/categories`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для получения всех записей (get)
|
||||||
|
export async function getAllLines() {
|
||||||
|
const response = await fetch(`${serverUrl}/lines?_expand=categories`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для получения записи по первичному ключу (id) (get)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function getLine(id) {
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}?_expand=categories`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для создания записи (post)
|
||||||
|
// объект отправляется в теле запроса (body)
|
||||||
|
export async function createLine(
|
||||||
|
title,
|
||||||
|
author,
|
||||||
|
price,
|
||||||
|
count,
|
||||||
|
descrition,
|
||||||
|
annotation,
|
||||||
|
itemId,
|
||||||
|
publisher,
|
||||||
|
series,
|
||||||
|
publicationYear,
|
||||||
|
pagesNum,
|
||||||
|
size,
|
||||||
|
coverType,
|
||||||
|
circulation,
|
||||||
|
weight,
|
||||||
|
category,
|
||||||
|
image,
|
||||||
|
) {
|
||||||
|
const itemObject = createLineObject(
|
||||||
|
title,
|
||||||
|
author,
|
||||||
|
price,
|
||||||
|
count,
|
||||||
|
descrition,
|
||||||
|
annotation,
|
||||||
|
itemId,
|
||||||
|
publisher,
|
||||||
|
series,
|
||||||
|
publicationYear,
|
||||||
|
pagesNum,
|
||||||
|
size,
|
||||||
|
coverType,
|
||||||
|
circulation,
|
||||||
|
weight,
|
||||||
|
category,
|
||||||
|
image,
|
||||||
|
);
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(itemObject),
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json",
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для обновления записи по id (put)
|
||||||
|
// объект отправляется в теле запроса (body)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function updateLine(
|
||||||
|
id,
|
||||||
|
title,
|
||||||
|
author,
|
||||||
|
price,
|
||||||
|
count,
|
||||||
|
descrition,
|
||||||
|
annotation,
|
||||||
|
itemId,
|
||||||
|
publisher,
|
||||||
|
series,
|
||||||
|
publicationYear,
|
||||||
|
pagesNum,
|
||||||
|
size,
|
||||||
|
coverType,
|
||||||
|
circulation,
|
||||||
|
weight,
|
||||||
|
category,
|
||||||
|
image,
|
||||||
|
) {
|
||||||
|
const itemObject = createLineObject(
|
||||||
|
title,
|
||||||
|
author,
|
||||||
|
price,
|
||||||
|
count,
|
||||||
|
descrition,
|
||||||
|
annotation,
|
||||||
|
itemId,
|
||||||
|
publisher,
|
||||||
|
series,
|
||||||
|
publicationYear,
|
||||||
|
pagesNum,
|
||||||
|
size,
|
||||||
|
coverType,
|
||||||
|
circulation,
|
||||||
|
weight,
|
||||||
|
category,
|
||||||
|
image,
|
||||||
|
);
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
method: "PUT",
|
||||||
|
body: JSON.stringify(itemObject),
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json",
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для удаления записи по id (delete)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function deleteLine(id) {
|
||||||
|
const options = {
|
||||||
|
method: "DELETE",
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
167
js/lines-ui.js
Normal file
167
js/lines-ui.js
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
// модуль для работы с элементами управления
|
||||||
|
|
||||||
|
// объект для удобного получения элементов
|
||||||
|
// при обращении к атрибуту объекта вызывается
|
||||||
|
// нужная функция для поиска элемента
|
||||||
|
export const cntrls = {
|
||||||
|
table: document.querySelector("#items-table tbody"),
|
||||||
|
form: document.getElementById("items-form"),
|
||||||
|
lineId: document.getElementById("items-line-id"),
|
||||||
|
title: document.getElementById("item-title"),
|
||||||
|
author: document.getElementById("item-author"),
|
||||||
|
price: document.getElementById("item-price"),
|
||||||
|
count: document.getElementById("item-count"),
|
||||||
|
descrition: document.getElementById("item-descrition"),
|
||||||
|
annotation: document.getElementById("item-annotation"),
|
||||||
|
itemId: document.getElementById("item-id"),
|
||||||
|
publisher: document.getElementById("item-publisher"),
|
||||||
|
series: document.getElementById("item-series"),
|
||||||
|
publicationYear: document.getElementById("item-publication-year"),
|
||||||
|
pagesNum: document.getElementById("item-pages-num"),
|
||||||
|
size: document.getElementById("item-size"),
|
||||||
|
coverType: document.getElementById("item-cover-type"),
|
||||||
|
circulation: document.getElementById("item-circulation"),
|
||||||
|
weight: document.getElementById("item-weight"),
|
||||||
|
сategoriesType: document.getElementById("item-category"),
|
||||||
|
image: document.getElementById("image"),
|
||||||
|
imagePreview: document.getElementById("image-preview"),
|
||||||
|
catalogBooks: document.getElementById("book-container"),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Дефолтное превью
|
||||||
|
export const imagePlaceholder = "https://placehold.co/400x600/#DCDCDC/black";
|
||||||
|
|
||||||
|
// функция создает тег option для select
|
||||||
|
// <option value="" selected>name</option>
|
||||||
|
export function createCategoriesOption(name, value = "", isSelected = false) {
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.value = value || "";
|
||||||
|
option.selected = isSelected;
|
||||||
|
option.text = name;
|
||||||
|
return option;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создает ссылку (a) для таблицы
|
||||||
|
// при нажатии вызывается callback
|
||||||
|
// ссылка "оборачивается" тегом td
|
||||||
|
function createTableAnchor(button, callback) {
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = "#";
|
||||||
|
a.appendChild(button);
|
||||||
|
a.onclick = (event) => {
|
||||||
|
// чтобы в URL не добавлялась решетка
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
callback();
|
||||||
|
};
|
||||||
|
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.appendChild(a);
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createCatalogAnchor(image, callback) {
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = "#";
|
||||||
|
a.appendChild(image);
|
||||||
|
a.onclick = (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
callback();
|
||||||
|
};
|
||||||
|
|
||||||
|
return a;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создает колонку таблицы с текстом value
|
||||||
|
// <td>value</td>
|
||||||
|
function createTableColumn(value) {
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.textContent = value;
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создает строку таблицы
|
||||||
|
export function createTableRow(item, 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.appendChild(rowNumber);
|
||||||
|
row.appendChild(createTableColumn(item.title));
|
||||||
|
row.appendChild(createTableColumn(item.author));
|
||||||
|
row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
|
||||||
|
row.appendChild(createTableColumn(item.count));
|
||||||
|
row.appendChild(createTableColumn(parseFloat(item.sum).toFixed(2)));
|
||||||
|
row.appendChild(createTableColumn(item.categories.name));
|
||||||
|
// редактировать на странице add-item
|
||||||
|
const btnEdit = document.createElement('button');
|
||||||
|
btnEdit.className = 'btn btn-primary w-100';
|
||||||
|
btnEdit.textContent = 'Редактировать';
|
||||||
|
row.appendChild(createTableAnchor(btnEdit, editPageCallback));
|
||||||
|
// удаление
|
||||||
|
const btnDelete = document.createElement('button');
|
||||||
|
btnDelete.className = 'btn btn-primary w-100';
|
||||||
|
btnDelete.textContent = 'Удалить';
|
||||||
|
row.appendChild(createTableAnchor(btnDelete, deleteCallback));
|
||||||
|
return row;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createCatalogItem(item, callback) {
|
||||||
|
const col = document.createElement("div");
|
||||||
|
col.className = 'col-sm-6 col-md-4 col-lg-3 mt-4';
|
||||||
|
|
||||||
|
const block = document.createElement("div");
|
||||||
|
block.className = 'block d-flex flex-column h-100';
|
||||||
|
|
||||||
|
const imgDiv = document.createElement("div");
|
||||||
|
imgDiv.className = 'd-flex justify-content-center mb-4';
|
||||||
|
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.src = item.image;
|
||||||
|
img.className = 'catalog-book-cover';
|
||||||
|
img.alt = 'book-cover-catalog-1';
|
||||||
|
img.width = '155';
|
||||||
|
img.height = '245';
|
||||||
|
imgDiv.appendChild(createCatalogAnchor(img, callback));
|
||||||
|
|
||||||
|
const bookDescription = document.createElement("div");
|
||||||
|
bookDescription.className = 'catalog-book-description d-flex flex-column align-items-start';
|
||||||
|
|
||||||
|
const price = document.createElement("p");
|
||||||
|
price.className = 'catalog-price mb-3';
|
||||||
|
const priceValue = parseInt(item.price, 10);
|
||||||
|
price.textContent = `${priceValue} ₽`;
|
||||||
|
const title = document.createElement("p");
|
||||||
|
title.className = 'catalog-book-title mb-3';
|
||||||
|
title.textContent = item.title;
|
||||||
|
const author = document.createElement("p");
|
||||||
|
author.className = 'catalog-author mb-3';
|
||||||
|
author.textContent = item.author;
|
||||||
|
|
||||||
|
bookDescription.appendChild(price);
|
||||||
|
bookDescription.appendChild(title);
|
||||||
|
bookDescription.appendChild(author);
|
||||||
|
|
||||||
|
const flexDiv = document.createElement("div");
|
||||||
|
flexDiv.className = 'flex-grow-1';
|
||||||
|
|
||||||
|
const btnDiv = document.createElement("div");
|
||||||
|
btnDiv.className = 'catalog-btn-checkout-div d-flex justify-content-start';
|
||||||
|
|
||||||
|
const btn = document.createElement("btn");
|
||||||
|
btn.className = 'catalog-bth-checkout btn rounded-5 px-3';
|
||||||
|
btn.textContent = 'В корзину';
|
||||||
|
btnDiv.appendChild(btn);
|
||||||
|
|
||||||
|
block.appendChild(imgDiv);
|
||||||
|
block.appendChild(bookDescription);
|
||||||
|
block.appendChild(flexDiv);
|
||||||
|
block.appendChild(btnDiv);
|
||||||
|
|
||||||
|
col.appendChild(block);
|
||||||
|
return col;
|
||||||
|
}
|
||||||
366
js/lines.js
Normal file
366
js/lines.js
Normal file
@ -0,0 +1,366 @@
|
|||||||
|
/* eslint-disable import/prefer-default-export */
|
||||||
|
// модуль с логикой
|
||||||
|
|
||||||
|
import {
|
||||||
|
createLine, deleteLine, getAllCategoryTypes, getAllLines, getLine, updateLine,
|
||||||
|
} from "./lines-rest-api";
|
||||||
|
import {
|
||||||
|
cntrls, createCategoriesOption, createTableRow, imagePlaceholder, createCatalogItem,
|
||||||
|
} from "./lines-ui";
|
||||||
|
|
||||||
|
async function drawCategoriesSelect() {
|
||||||
|
// вызов метода REST API для получения списка категорий каталога
|
||||||
|
const data = await getAllCategoryTypes();
|
||||||
|
// очистка содержимого select
|
||||||
|
// удаляется все, что находится между тегами <select></select>
|
||||||
|
// но не атрибуты
|
||||||
|
if (cntrls.сategoriesType) {
|
||||||
|
cntrls.сategoriesType.innerHTML = "";
|
||||||
|
// пустое значение
|
||||||
|
cntrls.сategoriesType.appendChild(createCategoriesOption("Выберите значение", "", true));
|
||||||
|
// цикл по результату ответа от сервера
|
||||||
|
data.forEach((category) => {
|
||||||
|
cntrls.сategoriesType.appendChild(createCategoriesOption(category.name, category.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,
|
||||||
|
// функции передаются в качестве параметра
|
||||||
|
// это очень удобно, так как аргументы функций доступны только
|
||||||
|
// в данном месте кода и не передаются в сервисные модули
|
||||||
|
() => location.assign(`add-item.html?id=${item.id}`),
|
||||||
|
() => removeLine(item.id),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addLine(
|
||||||
|
title,
|
||||||
|
author,
|
||||||
|
price,
|
||||||
|
count,
|
||||||
|
descrition,
|
||||||
|
annotation,
|
||||||
|
itemId,
|
||||||
|
publisher,
|
||||||
|
series,
|
||||||
|
publicationYear,
|
||||||
|
pagesNum,
|
||||||
|
size,
|
||||||
|
coverType,
|
||||||
|
circulation,
|
||||||
|
weight,
|
||||||
|
category,
|
||||||
|
image,
|
||||||
|
) {
|
||||||
|
console.info("Try to add item");
|
||||||
|
// вызов метода REST API для добавления записи
|
||||||
|
const data = await createLine(
|
||||||
|
title,
|
||||||
|
author,
|
||||||
|
price,
|
||||||
|
count,
|
||||||
|
descrition,
|
||||||
|
annotation,
|
||||||
|
itemId,
|
||||||
|
publisher,
|
||||||
|
series,
|
||||||
|
publicationYear,
|
||||||
|
pagesNum,
|
||||||
|
size,
|
||||||
|
coverType,
|
||||||
|
circulation,
|
||||||
|
weight,
|
||||||
|
category,
|
||||||
|
image,
|
||||||
|
);
|
||||||
|
console.info("Added");
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function editLine(
|
||||||
|
id,
|
||||||
|
title,
|
||||||
|
author,
|
||||||
|
price,
|
||||||
|
count,
|
||||||
|
descrition,
|
||||||
|
annotation,
|
||||||
|
itemId,
|
||||||
|
publisher,
|
||||||
|
series,
|
||||||
|
publicationYear,
|
||||||
|
pagesNum,
|
||||||
|
size,
|
||||||
|
coverType,
|
||||||
|
circulation,
|
||||||
|
weight,
|
||||||
|
category,
|
||||||
|
image,
|
||||||
|
) {
|
||||||
|
console.info("Try to update item");
|
||||||
|
// вызов метода REST API для обновления записи
|
||||||
|
const data = await updateLine(
|
||||||
|
id,
|
||||||
|
title,
|
||||||
|
author,
|
||||||
|
price,
|
||||||
|
count,
|
||||||
|
descrition,
|
||||||
|
annotation,
|
||||||
|
itemId,
|
||||||
|
publisher,
|
||||||
|
series,
|
||||||
|
publicationYear,
|
||||||
|
pagesNum,
|
||||||
|
size,
|
||||||
|
coverType,
|
||||||
|
circulation,
|
||||||
|
weight,
|
||||||
|
category,
|
||||||
|
image,
|
||||||
|
);
|
||||||
|
console.info("Updated");
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function removeLine(id) {
|
||||||
|
if (!confirm("Вы действительно хотите удалить этот товар?")) {
|
||||||
|
console.info("Отменено");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.info("Попытка удалить элемент");
|
||||||
|
// вызов метода 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 async function fillOutCatalog() {
|
||||||
|
console.info("Try to load catalog data");
|
||||||
|
const data = await getAllLines();
|
||||||
|
|
||||||
|
if (cntrls.catalogBooks) {
|
||||||
|
cntrls.catalogBooks.innerHTML = "";
|
||||||
|
|
||||||
|
data.forEach((item) => {
|
||||||
|
cntrls.catalogBooks.appendChild(
|
||||||
|
createCatalogItem(
|
||||||
|
item,
|
||||||
|
() => location.assign(`product_card.html`),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Функция для обработки создания и редактирования элементов таблицы через страницу add-item.html
|
||||||
|
export async function linesPageForm() {
|
||||||
|
console.info("linesPageForm");
|
||||||
|
|
||||||
|
// загрузка и заполнение select со списком товаров
|
||||||
|
drawCategoriesSelect();
|
||||||
|
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
|
||||||
|
// func1 = (id) => {} аналогично function func1(id) {}
|
||||||
|
const goBack = () => location.assign("/admin.html");
|
||||||
|
|
||||||
|
// Вызов функции обновления превью изображения при возникновении
|
||||||
|
// события onchange в тэге input с id image
|
||||||
|
if (cntrls.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.сategoriesType.value = line.categoriesId;
|
||||||
|
cntrls.title.value = line.title;
|
||||||
|
cntrls.author.value = line.author;
|
||||||
|
cntrls.price.value = line.price;
|
||||||
|
cntrls.count.value = line.count;
|
||||||
|
cntrls.descrition.value = line.descrition;
|
||||||
|
cntrls.annotation.value = line.annotation;
|
||||||
|
cntrls.itemId.value = line.itemId;
|
||||||
|
cntrls.publisher.value = line.publisher;
|
||||||
|
cntrls.series.value = line.series;
|
||||||
|
cntrls.publicationYear.value = line.publicationYear;
|
||||||
|
cntrls.pagesNum.value = line.pagesNum;
|
||||||
|
cntrls.size.value = line.size;
|
||||||
|
cntrls.coverType.value = line.coverType;
|
||||||
|
cntrls.circulation.value = line.circulation;
|
||||||
|
cntrls.weight.value = line.weight;
|
||||||
|
// заполнение превью
|
||||||
|
// Если пользователь выбрал изображение, то оно загружается
|
||||||
|
// в тэг image с id image - preview
|
||||||
|
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
||||||
|
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
|
||||||
|
} catch {
|
||||||
|
// в случае ошибки происходит возврат к admin
|
||||||
|
goBack();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// обработчик события отправки формы
|
||||||
|
// возникает при нажатии на кнопку (button) с типом submit
|
||||||
|
// кнопка должна находится внутри тега form
|
||||||
|
if (cntrls.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.title.value,
|
||||||
|
cntrls.author.value,
|
||||||
|
cntrls.price.value,
|
||||||
|
cntrls.count.value,
|
||||||
|
cntrls.descrition.value,
|
||||||
|
cntrls.annotation.value,
|
||||||
|
cntrls.itemId.value,
|
||||||
|
cntrls.publisher.value,
|
||||||
|
cntrls.series.value,
|
||||||
|
cntrls.publicationYear.value,
|
||||||
|
cntrls.pagesNum.value,
|
||||||
|
cntrls.size.value,
|
||||||
|
cntrls.coverType.value,
|
||||||
|
cntrls.circulation.value,
|
||||||
|
cntrls.weight.value,
|
||||||
|
cntrls.сategoriesType.value,
|
||||||
|
imageBase64,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
await editLine(
|
||||||
|
currentId,
|
||||||
|
cntrls.title.value,
|
||||||
|
cntrls.author.value,
|
||||||
|
cntrls.price.value,
|
||||||
|
cntrls.count.value,
|
||||||
|
cntrls.descrition.value,
|
||||||
|
cntrls.annotation.value,
|
||||||
|
cntrls.itemId.value,
|
||||||
|
cntrls.publisher.value,
|
||||||
|
cntrls.series.value,
|
||||||
|
cntrls.publicationYear.value,
|
||||||
|
cntrls.pagesNum.value,
|
||||||
|
cntrls.size.value,
|
||||||
|
cntrls.coverType.value,
|
||||||
|
cntrls.circulation.value,
|
||||||
|
cntrls.weight.value,
|
||||||
|
cntrls.сategoriesType.value,
|
||||||
|
imageBase64,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// возврат к странице admin
|
||||||
|
goBack();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
fillOutCatalog();
|
||||||
|
}
|
||||||
25
js/validation.js
Normal file
25
js/validation.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
// модуль используется для валидации форма на странице
|
||||||
|
|
||||||
|
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;
|
||||||
14
jsconfig.json
Normal file
14
jsconfig.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"target": "ES2020",
|
||||||
|
"jsx": "preserve",
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"strictFunctionTypes": true
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"**/node_modules/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -10,7 +10,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="./style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||||
|
|||||||
2460
package-lock.json
generated
2460
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
17
package.json
17
package.json
@ -1,22 +1,27 @@
|
|||||||
{
|
{
|
||||||
"name": "ip_rodionov",
|
"name": "ip_rodionov",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"main": "index.html",
|
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "vite",
|
"vite": "vite",
|
||||||
"serve": "http-server -p 3000 ./dist/",
|
"serve": "http-server -p 3000 ./dist/",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"prod": "npm-run-all build serve"
|
"rest": "json-server --watch data.json -p 8081",
|
||||||
|
"dev": "npm-run-all --parallel rest vite",
|
||||||
|
"prod": "npm-run-all build --parallel serve rest"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "5.3.2",
|
"bootstrap": "5.3.2",
|
||||||
"@fortawesome/fontawesome-free": "6.4.2"
|
"@fortawesome/fontawesome-free": "6.4.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"http-server": "14.1.1",
|
|
||||||
"vite": "4.4.9",
|
"vite": "4.4.9",
|
||||||
|
"eslint": "8.50.0",
|
||||||
|
"eslint-config-airbnb-base": "15.0.0",
|
||||||
|
"eslint-plugin-import": "2.28.1",
|
||||||
|
"http-server": "14.1.1",
|
||||||
|
"json-server": "0.17.4",
|
||||||
"npm-run-all": "4.1.5"
|
"npm-run-all": "4.1.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="./style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="./style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="d-flex flex-column min-vh-100 bg-white">
|
<body class="d-flex flex-column min-vh-100 bg-white">
|
||||||
|
|||||||
@ -1,14 +1,24 @@
|
|||||||
import { resolve } from 'path'
|
import { resolve } from "path";
|
||||||
import { defineConfig } from 'vite'
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
build: {
|
build: {
|
||||||
|
sourcemap: true,
|
||||||
|
emptyOutDir: true,
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
input: {
|
input: {
|
||||||
main: resolve(__dirname, 'index.html'),
|
main: resolve(__dirname, "index.html"),
|
||||||
page2: resolve(__dirname, 'page2.html'),
|
addItem: resolve(__dirname, "add-item.html"),
|
||||||
page3: resolve(__dirname, 'page3.html'),
|
admin: resolve(__dirname, "admin.html"),
|
||||||
|
cart: resolve(__dirname, "cart.html"),
|
||||||
|
catalogMobile: resolve(__dirname, "catalog-mobile.html"),
|
||||||
|
catalog: resolve(__dirname, "catalog.html"),
|
||||||
|
contacts: resolve(__dirname, "contacts.html"),
|
||||||
|
login: resolve(__dirname, "login.html"),
|
||||||
|
productCard: resolve(__dirname, "product-card.html"),
|
||||||
|
registration: resolve(__dirname, "registration.html"),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user