Compare commits
2 Commits
7b1c89fa53
...
bf0f14bdb7
| Author | SHA1 | Date | |
|---|---|---|---|
| bf0f14bdb7 | |||
| 738ad9d753 |
25
.eslintrc.cjs
Normal file
25
.eslintrc.cjs
Normal file
@ -0,0 +1,25 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'airbnb-base',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 12, sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
'indent': 'off',
|
||||
'no-console': 'off',
|
||||
'arrow-body-style': 'off',
|
||||
'implicit-arrow-linebreak': 'off',
|
||||
"linebreak-style": 0
|
||||
},
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
{
|
||||
"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",
|
||||
"linebreak-style": 0
|
||||
}
|
||||
}
|
||||
122
admin.html
122
admin.html
@ -1,122 +0,0 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Администрация - Маркетплейс</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header class="border-bottom ps-5 pe-5" style="background-color: #6376D7;">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand fs-3" href="/index.html" style="color: #ffffff;">Маркетплейс</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" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a href="/catalog.html" type="button" class="btn btn-main fs-5">Каталог</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex form-horizontal">
|
||||
<input class="form-control me-2" type="search" placeholder="Поиск..." aria-label="Search" style="width: 40vw;">
|
||||
<button class="btn btn-main me-2 fs-5" type="submit">Поиск</button>
|
||||
</form>
|
||||
<a href="/login.html" class="nav-link link-light">
|
||||
<span class="fs-5" style="color: #ffffff;">Войти</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="container-fluid">
|
||||
<div class="table-responsive">
|
||||
<h1 class="p-3">Товары</h1>
|
||||
<table id="items-table" class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Название</th>
|
||||
<th scope="col">Цена</th>
|
||||
<th scope="col">Количество в магазинах</th>
|
||||
<th scope="col">Изображение</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<button id="items-add" class="btn btn-main mb-5">Добавить</button>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container-fluid py-5" style="background-color: #6376D7;">
|
||||
<div class="row">
|
||||
<div class="col-2 offset-1">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light ">Контакты</a></li>
|
||||
<li class="nav-item mb-2"><a href="./termsofuse.html" class="nav-link p-0 link-light">Пользовательское соглашение</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light" >ЧаВо</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light">О нас</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 offset-3" style="text-align: center; color: #ffffff;">
|
||||
<p>© Маркетплейс,<br/> 2023 <br/> Все права защищены.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
|
||||
<div class="modal-dialog">
|
||||
<form id="items-form" class="needs-validation" novalidate>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="items-update-title"></h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="text-center">
|
||||
<img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-circle"
|
||||
alt="placeholder">
|
||||
</div>
|
||||
<input id="items-line-id" type="number" hidden>
|
||||
<div class="mb-2">
|
||||
<label for="name" class="form-label">Название</label>
|
||||
<input id="name" class="form-control" name="selected" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="price">Цена</label>
|
||||
<input id="price" name="price" class="form-control" type="number" value="0.00" min="0.00"
|
||||
step="0.50" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="count">Количество</label>
|
||||
<input id="count" name="count" class="form-control" type="number" value="0" min="1" step="1"
|
||||
required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="image">Изображение</label>
|
||||
<input id="image" name="image" type="file" class="form-control" accept="image/*" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||||
<button type="submit" class="btn btn-primary">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module">
|
||||
import validation from "./js/validation";
|
||||
import { linesForm } from "./js/lines";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
validation();
|
||||
linesForm();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
231
catalog.html
231
catalog.html
@ -1,231 +0,0 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Каталог - Маркетплейс</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<!--- https://stackoverflow.com/questions/9456289/how-to-make-a-div-visible-and-invisible-with-javascript --->
|
||||
</head>
|
||||
<body>
|
||||
<header class="border-bottom ps-5 pe-5 sticky-top" style="background-color: #6376D7;">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container-fluid">
|
||||
<button class="btn btn-main d-block d-sm-block d-md-none"
|
||||
type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
|
||||
</button>
|
||||
<a class="navbar-brand fs-3" href="/index.html" style="color: #ffffff;">Маркетплейс</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" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a href="/catalog.html" type="button" class="btn btn-main fs-5">Каталог</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex form-horizontal">
|
||||
<input class="form-control me-2" type="search" placeholder="Поиск..." aria-label="Search" style="width: 40vw;">
|
||||
<button class="btn btn-main me-2 fs-5" type="submit">Поиск</button>
|
||||
</form>
|
||||
<a href="/login.html" class="nav-link link-light">
|
||||
<span class="fs-5" style="color: #ffffff;">Войти</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="container-fluid d-flex justify-content-center mt-5 mb-5">
|
||||
<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel"
|
||||
style="max-width: 65%; background: #D1D9FF ">
|
||||
<div class="offcanvas-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body me-3 d-flex flex-column">
|
||||
<div id="innerbox" class="catalog box ms-3 me-3 mt-3 d-flex flex-column">
|
||||
<p class="mt-3 mb-3 text-center fs-4" style="color: white;">Категория</p>
|
||||
<p class="ms-3 mt-auto mb-3" style="color: white;">Все категории</p>
|
||||
</div>
|
||||
<div id="innerbox" class="catalog box ms-3 me-3 mt-3 d-flex flex-column">
|
||||
<p class="mt-3 mb-3 text-center fs-5" style="color: white;">Цена (руб.):</p>
|
||||
<div class="d-flex mb-3">
|
||||
<div id="min-price" class="ms-3 me-2">
|
||||
<input type="text" class="form-control" placeholder="от"></input>
|
||||
</div>
|
||||
<div id="max-price" class="me-3">
|
||||
<input type="text" class="form-control" placeholder="до"></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="innerbox" class="catalog box ms-3 me-3 mt-3 mb-3">
|
||||
<div id="delivery-available" class="mt-3 ms-3">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
|
||||
<label class="form-check-label" for="flexCheckDefault" style="color: white;">
|
||||
Есть доставка
|
||||
</label>
|
||||
</div>
|
||||
<div id="in-stock" class="mt-1 ms-3">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
|
||||
<label class="form-check-label" for="flexCheckDefault" style="color: white;">
|
||||
В начиличии
|
||||
</label>
|
||||
</div>
|
||||
<div id="credit-available" class="mt-1 ms-3 mb-3">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
|
||||
<label class="form-check-label" for="flexCheckDefault" style="color: white;">
|
||||
Доступно в кредит
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="catalog-menu box me-3 d-flex flex-column xl-only">
|
||||
<div id="innerbox" class="catalog box ms-3 me-3 mt-3 d-flex flex-column xl-only">
|
||||
<p class="mt-3 mb-3 text-center fs-4 xl-only" style="color: white;">Категория</p>
|
||||
<p class="ms-3 mt-auto mb-3 xl-only" style="color: white;">Все категории</p>
|
||||
</div>
|
||||
<div id="innerbox" class="catalog box ms-3 me-3 mt-3 d-flex flex-column xl-only">
|
||||
<p class="mt-3 mb-3 text-center fs-5 xl-only" style="color: white;">Цена (руб.):</p>
|
||||
<div class="d-flex mb-3 xl-only">
|
||||
<div id="min-price" class="ms-3 me-2 xl-only">
|
||||
<input type="text" class="form-control xl-only" placeholder="от"></input>
|
||||
</div>
|
||||
<div id="max-price" class="me-3 xl-only">
|
||||
<input type="text" class="form-control" placeholder="до"></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="innerbox" class="catalog box ms-3 me-3 mt-3 mb-3 xl-only">
|
||||
<div id="delivery-available" class="mt-3 ms-3 xl-only">
|
||||
<input class="form-check-input xl-only" type="checkbox" value="" id="flexCheckDefault">
|
||||
<label class="form-check-label xl-only" for="flexCheckDefault" style="color: white;">
|
||||
Есть доставка
|
||||
</label>
|
||||
</div>
|
||||
<div id="in-stock" class="mt-1 ms-3 xl-only">
|
||||
<input class="form-check-input xl-only" type="checkbox" value="" id="flexCheckDefault">
|
||||
<label class="form-check-label xl-only" for="flexCheckDefault" style="color: white;">
|
||||
В начиличии
|
||||
</label>
|
||||
</div>
|
||||
<div id="credit-available" class="mt-1 ms-3 mb-3 xl-only">
|
||||
<input class="form-check-input xl-only" type="checkbox" value="" id="flexCheckDefault">
|
||||
<label class="form-check-label xl-only" for="flexCheckDefault" style="color: white;">
|
||||
Доступно в кредит
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="catalog" class="box d-flex flex-wrap justify-content-center align-items-md-center">
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/Kingston A400.jpg">
|
||||
<p class="mb-3 ms-3 me-auto"> SSD-накопитель Kingston A400</p>
|
||||
<p class="ms-3 me-auto fs-4">5 400 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/Samsung A54.jpg">
|
||||
<p class="mb-3 ms-3 me-auto"> Смартфон Samsung A54 6/128GB</p>
|
||||
<p class="ms-3 me-auto fs-4">35 750 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/Samsung S23+.jpg">
|
||||
<p class="mb-3 ms-3 me-auto"> Смартфон Samsung S23+ 8/256GB</p>
|
||||
<p class="ms-3 me-auto fs-4">110 990 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/POCO X5 Pro.jpg">
|
||||
<p class="mb-3 ms-3 me-auto"> Смартфон POCO X5 Pro 5G 8/256GB</p>
|
||||
<p class="ms-3 me-auto fs-4">39 990 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/Steelseries Aerox 3 Wireless.jpg">
|
||||
<p class="mb-3 ms-3 me-auto"> Беспроводная игровая мышь SteelSeries AEROX 3</p>
|
||||
<p class="ms-3 me-auto fs-4">9 490 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/XBOX Series X.jpg">
|
||||
<p class="mb-3 ms-3 me-auto">Консоль Microsoft XBOX Series X</p>
|
||||
<p class="ms-3 me-auto fs-4">82 000 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/GeForce RTX 4070.jpg">
|
||||
<p class="mb-3 ms-3 me-auto">Видеокарта ASUS NVIDIA DUAL RTX4070</p>
|
||||
<p class="ms-3 me-auto fs-4">76 000 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/PS5.jpg">
|
||||
<p class="mb-3 ms-3 me-auto">Игровая приставка Sony PlayStation 5</p>
|
||||
<p class="ms-3 me-auto fs-4">58 990 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/Ryzen 7 5800X3D.jpg">
|
||||
<p class="mb-3 ms-3 me-auto">Процессор AMD Ryzen 7 5800X3D OEM</p>
|
||||
<p class="ms-3 me-auto fs-4">44 290 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/Ryzen 5 5600G.jpg">
|
||||
<p class="mb-3 ms-3 me-auto">Процессор AMD Ryzen 5 5600G OEM</p>
|
||||
<p class="ms-3 me-auto fs-4">14 590 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/Ryzen 5 7600X.jpg">
|
||||
<p class="mb-3 ms-3 me-auto">Процессор AMD Ryzen 5 7600X OEM</p>
|
||||
<p class="ms-3 me-auto fs-4">29 590 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/DEEPCOOL AG200.jpg">
|
||||
<p class="mb-3 ms-3 me-auto">Кулер для процессора DEEPCOOL AG200</p>
|
||||
<p class="ms-3 me-auto fs-4">1 590 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/Kingston 16GB DDR4 3200MHz.jpg">
|
||||
<p class="mb-3 ms-3 me-auto">Оперативная память Kingston 16Gb DDR4</p>
|
||||
<p class="ms-3 me-auto fs-4">5 190 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/Samsung 980 PRO.jpg">
|
||||
<p class="mb-3 ms-3 me-auto">SSD накопитель Samsung 980 PRO 1TB M.2</p>
|
||||
<p class="ms-3 me-auto fs-4">15 190 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" class="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img class="mt-2 item-img align-self-center" src="/content/catalog/Intel Core i5 13600KF.jpg">
|
||||
<p class="mb-3 ms-3 me-auto">Процессор Intel Core i5 13600KF OEM</p>
|
||||
<p class="ms-3 me-auto fs-4">42 613 ₽</p>
|
||||
<button type="button" class="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container-fluid py-5" style="background-color: #6376D7;">
|
||||
<div class="row">
|
||||
<div class="col-2 offset-1">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light ">Контакты</a></li>
|
||||
<li class="nav-item mb-2"><a href="./termsofuse.html" class="nav-link p-0 link-light">Пользовательское соглашение</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light" >ЧаВо</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light">О нас</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 offset-3" style="text-align: center; color: #ffffff;">
|
||||
<p>© Маркетплейс,<br/> 2023 <br/> Все права защищены.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
73
index.html
73
index.html
@ -2,76 +2,11 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Главная - Маркетплейс</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<title>Маркетплейс</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="border-bottom ps-5 pe-5 sticky-top" style="background-color: #6376D7;">
|
||||
<nav class="navbar navbar-expand-lg sticky-top">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand fs-3" href="/index.html" style="color: #ffffff;">Маркетплейс</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" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a href="/catalog.html" type="button" class="btn btn-main fs-5">Каталог</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex form-horizontal">
|
||||
<input class="form-control me-2" type="search" placeholder="Поиск..." aria-label="Search" style="width: 40vw;">
|
||||
<button class="btn btn-main me-2 fs-5" type="submit">Поиск</button>
|
||||
</form>
|
||||
<a href="/login.html" class="nav-link link-light">
|
||||
<span class="fs-5" style="color: #ffffff;">Войти</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="container-fluid">
|
||||
<a role="button" class="btn btn-main mt-2 me-2" href="./login.html">
|
||||
Вход
|
||||
</a>
|
||||
<a role="button" class="btn btn-main mt-2 me-2" href="./register.html">
|
||||
Регистрация
|
||||
</a>
|
||||
<a role="button" class="btn btn-main mt-2 me-2" href="./profile.html">
|
||||
Личный кабинет
|
||||
</a>
|
||||
<a role="button" class="btn btn-main mt-2 me-2" href="./settings.html">
|
||||
Настройки
|
||||
</a>
|
||||
<a role="button" class="btn btn-main mt-2 me-2" href="./catalog.html">
|
||||
Перечень товаров
|
||||
</a>
|
||||
<a role="button" class="btn btn-main mt-2 me-2" href="./product.html">
|
||||
Товар
|
||||
</a>
|
||||
<a role="button" class="btn btn-main mt-2 me-2" href="./admin.html">
|
||||
Администрация
|
||||
</a>
|
||||
</main>
|
||||
<footer class="container-fluid py-5" style="background-color: #6376D7;">
|
||||
<div class="row">
|
||||
<div class="col-2 offset-1">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light ">Контакты</a></li>
|
||||
<li class="nav-item mb-2"><a href="./termsofuse.html" class="nav-link p-0 link-light">Пользовательское соглашение</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light" >ЧаВо</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light">О нас</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 offset-3" style="text-align: center; color: #ffffff;">
|
||||
<p>© Маркетплейс,<br/> 2023 <br/> Все права защищены.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
// Модуль для работы с модальным окном
|
||||
|
||||
// импорт компонента 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.name.value = "";
|
||||
cntrls.price.value = parseFloat(0).toFixed(2);
|
||||
cntrls.count.value = 0;
|
||||
cntrls.image.value = "";
|
||||
cntrls.imagePreview.src = imagePlaceholder;
|
||||
}
|
||||
|
||||
// функция для показа модального окна
|
||||
// перед показом происходит заполнение формы для редактирования
|
||||
// если объект item не пуст
|
||||
export function showUpdateModal(item) {
|
||||
modalTitle.innerHTML = item === null ? "Добавить" : "Изменить";
|
||||
console.info(item);
|
||||
|
||||
if (item) {
|
||||
cntrls.lineId.value = item.id;
|
||||
cntrls.name.value = item.name;
|
||||
cntrls.price.value = item.price;
|
||||
cntrls.count.value = item.count;
|
||||
cntrls.count.value = item.count;
|
||||
cntrls.imagePreview.src = item.image ? item.image : imagePlaceholder;
|
||||
} else {
|
||||
resetValues();
|
||||
}
|
||||
|
||||
myModal.show();
|
||||
}
|
||||
|
||||
// функция для скрытия модального окна
|
||||
export function hideUpdateModal() {
|
||||
resetValues();
|
||||
|
||||
// удаление класса was-validated для скрытия результатов валидации
|
||||
cntrls.form.classList.remove("was-validated");
|
||||
myModal.hide();
|
||||
}
|
||||
@ -1,80 +0,0 @@
|
||||
// модуль для работы с REST API сервера
|
||||
|
||||
// адрес сервера
|
||||
const serverUrl = "http://localhost:8082";
|
||||
|
||||
// функция возвращает объект нужной структуры для отправки на сервер
|
||||
function createLineObject(name, price, count, image) {
|
||||
return {
|
||||
name,
|
||||
price: parseFloat(price).toFixed(2),
|
||||
count,
|
||||
image,
|
||||
};
|
||||
}
|
||||
|
||||
// обращение к серверу для получения всех записей (get)
|
||||
export async function getAllLines() {
|
||||
const response = await fetch(`${serverUrl}/lines`);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для создания записи (post)
|
||||
// объект отправляется в теле запроса (body)
|
||||
export async function createLine(name, price, count, image) {
|
||||
const itemObject = createLineObject(name, price, count, 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, name, price, count, image) {
|
||||
const itemObject = createLineObject(name, price, count, 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();
|
||||
}
|
||||
@ -1,85 +0,0 @@
|
||||
// модуль для работы с элементами управления
|
||||
|
||||
// объект для удобного получения элементов
|
||||
// при обращении к атрибуту объекта вызывается
|
||||
// нужная функция для поиска элемента
|
||||
export const cntrls = {
|
||||
button: document.getElementById("items-add"),
|
||||
table: document.querySelector("#items-table tbody"),
|
||||
form: document.getElementById("items-form"),
|
||||
lineId: document.getElementById("items-line-id"),
|
||||
name: document.getElementById("name"),
|
||||
price: document.getElementById("price"),
|
||||
count: document.getElementById("count"),
|
||||
image: document.getElementById("image"),
|
||||
imagePreview: document.getElementById("image-preview"),
|
||||
};
|
||||
|
||||
export const imagePlaceholder = "https://via.placeholder.com/200";
|
||||
|
||||
// функция создает ссылку (a) для таблицы
|
||||
// содержимое тега a заполняется необходимой иконкой (icon)
|
||||
// при нажатии вызывается callback
|
||||
// ссылка "оборачивается" тегом td
|
||||
// <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></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;
|
||||
}
|
||||
|
||||
function createTableColumn(value) {
|
||||
const td = document.createElement("td");
|
||||
td.textContent = value;
|
||||
return td;
|
||||
}
|
||||
|
||||
function createImgColumn(value) {
|
||||
const td = document.createElement("td");
|
||||
td.appendChild(value);
|
||||
return td;
|
||||
}
|
||||
|
||||
export function createTableRow(item, index, editCallback, deleteCallback) {
|
||||
const rowNumber = document.createElement("th");
|
||||
rowNumber.scope = "row";
|
||||
rowNumber.textContent = index + 1;
|
||||
|
||||
const row = document.createElement("tr");
|
||||
row.id = `line-${item.id}`;
|
||||
|
||||
const img = document.createElement("img");
|
||||
if (item.image === undefined) {
|
||||
img.src = imagePlaceholder;
|
||||
}
|
||||
else {
|
||||
img.src = item.image;
|
||||
}
|
||||
img.style.width = "70px";
|
||||
img.style.height = "70px";
|
||||
|
||||
|
||||
row.appendChild(rowNumber);
|
||||
row.appendChild(createTableColumn(item.name));
|
||||
row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
|
||||
row.appendChild(createTableColumn(item.count));
|
||||
row.appendChild(createImgColumn(img));
|
||||
// редактировать в модальном окне
|
||||
row.appendChild(createTableAnchor("fa-pencil", editCallback));
|
||||
// удаление
|
||||
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
|
||||
return row;
|
||||
}
|
||||
183
js/lines.js
183
js/lines.js
@ -1,183 +0,0 @@
|
||||
// модуль с логикой
|
||||
|
||||
import { hideUpdateModal, showUpdateModal } from "./lines-modal";
|
||||
import {
|
||||
createLine, deleteLine, getAllLines, updateLine,
|
||||
} from "./lines-rest-api";
|
||||
import {
|
||||
cntrls, createTableRow, imagePlaceholder,
|
||||
} from "./lines-ui";
|
||||
|
||||
async function drawLinesTable() {
|
||||
console.info("Try to load data");
|
||||
console.log(cntrls);
|
||||
if (!cntrls.table) {
|
||||
console.info("No table!");
|
||||
return;
|
||||
}
|
||||
// вызов метода REST API для получения всех записей
|
||||
const data = await getAllLines();
|
||||
cntrls.table.innerHTML = "";
|
||||
// цикл по результату ответа от сервера
|
||||
// используется лямбда-выражение
|
||||
// (item, index) => {} аналогично function(item, index) {}
|
||||
data.forEach((item, index) => {
|
||||
cntrls.table.appendChild(
|
||||
createTableRow(
|
||||
item,
|
||||
index,
|
||||
() => showUpdateModal(item),
|
||||
() => removeLine(item.id),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
async function addLine(name, price, count, image) {
|
||||
console.info("Try to add item");
|
||||
// вызов метода REST API для добавления записи
|
||||
const data = await createLine(name, price, count, image);
|
||||
console.info("Added");
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
}
|
||||
|
||||
async function editLine(id, name, price, count, image) {
|
||||
console.info("Try to update item");
|
||||
// вызов метода REST API для обновления записи
|
||||
const data = await updateLine(id, name, price, count, image);
|
||||
console.info("Updated");
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
}
|
||||
|
||||
async function removeLine(id) {
|
||||
if (!confirm("Вы уверены, что вы хотите удалить объект?")) {
|
||||
console.info("Canceled");
|
||||
return;
|
||||
}
|
||||
console.info("Try to remove item");
|
||||
// вызов метода REST API для удаления записи
|
||||
const data = await deleteLine(id);
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
}
|
||||
|
||||
// Функция для обработки создания и редактирования элементов таблицы через модальное окно
|
||||
// Если хотите делать через страницу, то удалите эту функцию
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
export function linesForm() {
|
||||
console.info("linesForm");
|
||||
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
|
||||
// обработчик события нажатия на кнопку для показа модального окна
|
||||
cntrls.button.addEventListener("click", () => showUpdateModal(null));
|
||||
|
||||
cntrls.image.addEventListener("change", () => updateImagePreview());
|
||||
|
||||
// обработчик события отправки формы
|
||||
// возникает при нажатии на кнопку (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.name.value,
|
||||
cntrls.price.value,
|
||||
cntrls.count.value,
|
||||
imageBase64,
|
||||
);
|
||||
} else {
|
||||
await editLine(
|
||||
currentId,
|
||||
cntrls.name.value,
|
||||
cntrls.price.value,
|
||||
cntrls.count.value,
|
||||
imageBase64,
|
||||
);
|
||||
}
|
||||
|
||||
// после выполнения добавления/обновления модальное окно скрывается
|
||||
hideUpdateModal();
|
||||
});
|
||||
}
|
||||
|
||||
// функция для получения содержимого файла в виде 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;
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
// модуль используется для валидации форма на странице
|
||||
|
||||
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;
|
||||
@ -3,7 +3,7 @@
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"target": "ES2020",
|
||||
"jsx": "preserve",
|
||||
"jsx": "react",
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true
|
||||
},
|
||||
|
||||
5
json-server.json
Normal file
5
json-server.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"static": "./node_modules/json-server/public",
|
||||
"port": 8082,
|
||||
"watch": "true"
|
||||
}
|
||||
39
login.html
39
login.html
@ -1,39 +0,0 @@
|
||||
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Войти в аккаунт - Маркетплейс</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<main class="container-fluid d-flex justify-content-center align-items-center">
|
||||
<div class="registerbox">
|
||||
<form class="d-flex flex-column align-items-center">
|
||||
<p class="fs-2 mt-5">Вход в аккаунт</p>
|
||||
<div class="login w-75 mt-2">
|
||||
<label for="login_inputbox" class="form-label" style=" font-size: 18px;">Логин</label>
|
||||
<input type="login" required id="login_inputbox" class="form-control inputbox" placeholder="Введите логин..."></input>
|
||||
</div>
|
||||
<div class="password w-75 mt-2">
|
||||
<label for="password_inputbox" class="form-label" style="font-size: 18px;">Пароль</label>
|
||||
<input type="password" required id="password_inputbox" type="password" class="form-control inputbox" placeholder="Пароль..."></input>
|
||||
</div>
|
||||
<div class="d-flex mt-5 mb-5 flex-wrap justify-content-center align-content-center">
|
||||
<button type="submit" class="btn btn-primary mb-3 me-3"
|
||||
style="width: 197px; height: 62px;">Вход</button>
|
||||
<a role="button" class="btn btn-primary mb-3 me-3 d-flex justify-content-center align-items-center"
|
||||
style="width: 197px; height: 62px;"
|
||||
href="./register.html">Регистрация</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
1643
package-lock.json
generated
1643
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
34
package.json
34
package.json
@ -4,26 +4,40 @@
|
||||
"description": "",
|
||||
"main": "login.html",
|
||||
"scripts": {
|
||||
"rest": "json-server data.json",
|
||||
"vite": "vite",
|
||||
"serve": "http-server -p 3000 ./",
|
||||
"build": "vite build",
|
||||
"rest": "json-server --watch data.json -p 8082",
|
||||
"dev": "npm-run-all --parallel rest vite",
|
||||
"prod": "npm-run-all build --parallel serve rest"
|
||||
"build": "vite build",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "6.4.2",
|
||||
"@popperjs/core": "2.11.8",
|
||||
"bootstrap": "5.3.2"
|
||||
"axios": "^1.6.2",
|
||||
"bootstrap": "5.3.2",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.9.1",
|
||||
"react-bootstrap-icons": "^1.10.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
"react-router-dom": "^6.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"eslint": "8.50.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-plugin-import": "^2.29.0",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"http-server": "14.1.1",
|
||||
"json-server": "0.17.4",
|
||||
"npm-run-all": "4.1.5",
|
||||
"eslint": "8.50.0",
|
||||
"eslint-config-airbnb-base": "15.0.0",
|
||||
"eslint-plugin-import": "2.28.1",
|
||||
"sass": "1.69.5",
|
||||
"vite": "4.4.9"
|
||||
"vite": "^4.5.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
117
product.html
117
product.html
@ -1,117 +0,0 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Товар - Маркетплейс</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<!--- https://stackoverflow.com/questions/9456289/how-to-make-a-div-visible-and-invisible-with-javascript --->
|
||||
</head>
|
||||
<body>
|
||||
<header class="border-bottom ps-5 pe-5 sticky-top" style="background-color: #6376D7;">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container-fluid">
|
||||
<button class="btn btn-main d-block d-sm-block d-md-none"
|
||||
type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
|
||||
</button>
|
||||
<a class="navbar-brand fs-3" href="/index.html" style="color: #ffffff;">Маркетплейс</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" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a href="/catalog.html" type="button" class="btn btn-main fs-5">Каталог</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex form-horizontal">
|
||||
<input class="form-control me-2" type="search" placeholder="Поиск..." aria-label="Search" style="width: 40vw;">
|
||||
<button class="btn btn-main me-2 fs-5" type="submit">Поиск</button>
|
||||
</form>
|
||||
<a href="/login.html" class="nav-link link-light">
|
||||
<span class="fs-5" style="color: #ffffff;">Войти</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="container-fluid d-flex justify-content-center mt-5 mb-5">
|
||||
<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel"
|
||||
style="max-width: 65%; background: #D1D9FF ">
|
||||
<div class="offcanvas-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body me-3 d-flex flex-column">
|
||||
<button type="button" class="btn btn-main mt-3 me-3 ms-3 mb-3" style="font-size: 20; height: 60px">Товар</button>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-3" style="font-size: 20; height: 60px">Характеристики</button>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-3" style="font-size: 20; height: 60px">Магазины</button>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-3" style="font-size: 20; height: 60px">Отзывы</button>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-3" style="font-size: 20; height: 60px">Вопросы</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-menu box me-3 d-flex flex-column">
|
||||
<button type="button" class="pr-menu-btn btn btn-main mt-3 me-3 ms-3 mb-3" style="font-size: 20; height: 60px">Товар</button>
|
||||
<button type="button" class="pr-menu-btn btn btn-main me-3 ms-3 mb-3" style="font-size: 20; height: 60px">Характеристики</button>
|
||||
<button type="button" class="pr-menu-btn btn btn-main me-3 ms-3 mb-3" style="font-size: 20; height: 60px">Магазины</button>
|
||||
<button type="button" class="pr-menu-btn btn btn-main me-3 ms-3 mb-3" style="font-size: 20; height: 60px">Отзывы</button>
|
||||
<button type="button" class="pr-menu-btn btn btn-main me-3 ms-3 mb-3" style="font-size: 20; height: 60px">Вопросы</button>
|
||||
</div>
|
||||
<div id="product-box" class="box d-flex flex-column flex-wrap">
|
||||
<div id="product-name" class="ms-4 mt-4">
|
||||
<p style="font-size: 28px;">Видеокарта ASUS NVIDIA DUAL-RTX4070-O12G</p>
|
||||
</div>
|
||||
<div id="mid-product-box" class="d-flex flex-wrap">
|
||||
<div class="d-flex ms-4 mt-4 me-3">
|
||||
<div class="d-sm-flex d-md-flex d-flex flex-column me-3">
|
||||
<img src="/content/product/600012638453b0.jpg" class="picmin box mb-3"> </img>
|
||||
<img src="/content/product/600012638453b1.jpg" class="picmin box mb-3"> </img>
|
||||
<img src="/content/product/600012638453b2.jpg" class="picmin box mb-3"> </img>
|
||||
<img src="/content/product/600012638453b3.jpg" class="picmin box mb-3"> </img>
|
||||
</div>
|
||||
<div id="pictures-preview">
|
||||
<img src="/content/product/600012638453b0.jpg" class="picture-preview box"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div id="order-box" class="box ms-auto me-auto mt-4 d-flex flex-column">
|
||||
<div class="mt-3">
|
||||
<p class="text-center">Завтра или позже </p>
|
||||
<p class="mt-3 ms-5 text-left fs-3">76 164 ₽ </p>
|
||||
</div>
|
||||
<div class="mt-3 ms-5 me-5">
|
||||
<p class="text-left fs-5 mb-0">Доставка — 0 ₽</p>
|
||||
<p class="fs-6">c 16 ноября </p>
|
||||
</div>
|
||||
<div class="mt-0 ms-5 me-5">
|
||||
<p class="text-left fs-5 mb-0">Самовывоз — 0 ₽</p>
|
||||
<p class="fs-6">c 15 ноября </p>
|
||||
</div>
|
||||
<button type="button" class="btn btn-main ms-5 me-5 mt-auto mb-3" style="font-size: 20; height: 60px">Купить</button>
|
||||
<p class="mb-3 text-center">В наличии: <a href="#">в 3 магазинах</a> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="product-box-description" style="min-height: 400px;">
|
||||
<p style="font-size: 28px;" class="ms-5 mt-3">Краткое описание товара:</p>
|
||||
<p class="ms-5 me-5"> Видеокарта ASUS Dual GeForce RTX 4070 OC Edition 12GB GDDR6X – мощное охлаждение (два вентилятора Axial-tech) и широкая совместимость (форм-фактор 2,56 слота). Энергоэффективная архитектура Ada Lovelace, технология DLSS 3, аппаратная поддержка трассировки лучей. Тензорные ядра четвертого поколения: DLSS 3 повышает скорость рендеринга четырехкратно по сравнению с методом «грубой силы». RT-ядра третьего поколения: двукратное повышение производительности при трассировке лучей. Повышенная Boost-частота графического процессора: 2550 МГц в режиме разгона и 2520 МГц в режиме по умолчанию. Вентиляторы Axial-tech: удлиненные лопасти и кольцо-ограничитель для увеличения воздушного давления. Форм-фактор 2,56 слота: широкая совместимость и отличное охлаждение в компактных корпусах. Бесшумный режим работы кулера под низкими нагрузками. Двойные шарикоподшипники в вентиляторах обладают вдвое большим сроком службы, чем традиционные подшипники скольжения.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container-fluid py-5" style="background-color: #6376D7;">
|
||||
<div class="row">
|
||||
<div class="col-2 offset-1">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light ">Контакты</a></li>
|
||||
<li class="nav-item mb-2"><a href="./termsofuse.html" class="nav-link p-0 link-light">Пользовательское соглашение</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light" >ЧаВо</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light">О нас</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 offset-3" style="text-align: center; color: #ffffff;">
|
||||
<p>© Маркетплейс,<br/> 2023 <br/> Все права защищены.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
92
profile.html
92
profile.html
@ -1,92 +0,0 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Личный кабинет - Маркетплейс</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<!--- https://stackoverflow.com/questions/9456289/how-to-make-a-div-visible-and-invisible-with-javascript --->
|
||||
</head>
|
||||
<body>
|
||||
<header class="border-bottom ps-5 pe-5 sticky-top" style="background-color: #6376D7;">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand fs-3" href="/index.html" style="color: #ffffff;">Маркетплейс</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" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a href="/catalog.html" type="button" class="btn btn-main fs-5">Каталог</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex form-horizontal">
|
||||
<input class="form-control me-2" type="search" placeholder="Поиск..." aria-label="Search" style="width: 40vw;">
|
||||
<button class="btn btn-main me-2 fs-5" type="submit">Поиск</button>
|
||||
</form>
|
||||
<a href="/login.html" class="nav-link link-light">
|
||||
<span class="fs-5" style="color: #ffffff;">Войти</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="container-fluid d-flex justify-content-center mt-5 mb-5 flex-wrap">
|
||||
<div id="menu" class="box d-flex flex-column me-3 mb-3">
|
||||
<p class="mt-3 me-auto ms-auto mb-3" style="font-size: 22; text-align: center;"> Здравствуйте, Имя!</p>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-2" sstyle="font-size: 20; height: 50px">Корзина</button>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-2" style="font-size: 20; height: 50px">Заказы</button>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-2" style="font-size: 20; height: 50px">Избранное</button>
|
||||
</div>
|
||||
<div id="cart" class="box">
|
||||
<p class="mt-3 me-auto ms-5 mb-3" style="font-size: 22; text-align: left;">Корзина</p>
|
||||
<div class="d-flex flex-wrap">
|
||||
<div id="cart-box" class="innerbox ms-4 me-3 w-75 mb-3 d-flex flex-column" style="min-width: 300px ;">
|
||||
<div class="d-flex mt-3">
|
||||
<img src="/content/catalog/GeForce RTX 4070.jpg" id="cart-pic" class="ms-3 box picmin"></img>
|
||||
<p class="align-self-center">Видеокарта ASUS NVIDIA DUAL RTX4070</p>
|
||||
<p class="align-self-center ms-auto me-4 fs-4">76 000 ₽</p>
|
||||
</div>
|
||||
<div class="d-flex mt-3">
|
||||
<img src="/content/catalog/Ryzen 7 5800X3D.jpg" id="cart-pic" class="ms-3 box picmin"></img>
|
||||
<p class="align-self-center">Процессор AMD Ryzen 7 5800X3D OEM</p>
|
||||
<p class="align-self-center ms-auto me-4 fs-4">44 290 ₽</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="order-cart-box" class="innerbox ms-4 me-4 mb-3 d-flex flex-column">
|
||||
<div id="total-sum" class="d-flex flex-row mt-4">
|
||||
<p class="ms-4 me-auto" style="font-size: 22; text-align: left">Итого</p>
|
||||
<p class="ms-auto me-4" style="font-size: 22; text-align: right">120 290 ₽</p>
|
||||
</div>
|
||||
<div id="total-itemsincart" class="d-flex flex-row mb-3">
|
||||
<p class="ms-4 me-auto" style="font-size: 16; color: #7e7e7e; text-align: left">Товаров</p>
|
||||
<p class="ms-auto me-4" style="font-size: 16; color: #7e7e7e; text-align: right">2 шт.</p>
|
||||
</div>
|
||||
<button type="button" class="btn btn-main mt-auto me-5 ms-5 mb-3" style="min-height: 55px">Оформить заказ</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="container-fluid" style="background-color: #6376D7;">
|
||||
<footer class="py-5">
|
||||
<div class="row">
|
||||
<div class="col-2 offset-1">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light ">Контакты</a></li>
|
||||
<li class="nav-item mb-2"><a href="./termsofuse.html" class="nav-link p-0 link-light">Пользовательское соглашение</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light" >ЧаВо</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light">О нас</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 offset-3" style="text-align: center; color: #ffffff;">
|
||||
<p>© Маркетплейс,<br/> 2023 <br/> Все права защищены.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
3
public/favicon.svg
Normal file
3
public/favicon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
|
||||
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 463 B |
@ -1,55 +0,0 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Регистрация - Маркетплейс</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<main class="container-fluid d-flex align-items-center justify-content-center">
|
||||
<div class="registerbox">
|
||||
<form class="d-flex flex-column align-items-center">
|
||||
<p class="text-center fs-1 mt-5">Регистрация</p>
|
||||
<div class="login w-75 mb-2">
|
||||
<label for="login_inputbox" class="form-label" style=" font-size: 18px;">Логин</label>
|
||||
<input type="text" required id="login_inputbox" class="form-control inputbox" placeholder="Введите логин..."></input>
|
||||
</div>
|
||||
<div class="password w-75 mb-2">
|
||||
<label for="password_inputbox" class="form-label" style="font-size: 18px;">Пароль</label>
|
||||
<input type="password" required id="password_inputbox" class="form-control inputbox" placeholder="Пароль..."></input>
|
||||
</div>
|
||||
<div class="d-flex align-items-center w-75 mb-2">
|
||||
<div class="firstname me-3">
|
||||
<label for="firstname_inputbox" class="form-label" style="font-size: 18px;">Имя</label>
|
||||
<input type="text" required id="firstname_inputbox" class="form-control inputbox" placeholder="Введите имя..."></input>
|
||||
</div>
|
||||
<div class="lastname">
|
||||
<label for="lastname_inputbox" class="form-label" style="font-size: 18px;">Фамилия</label>
|
||||
<input type="text" required id="lastname_inputbox" class="form-control inputbox" placeholder="Введите фамилию..."></input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email w-75 mb-2">
|
||||
<label for="email_inputbox" class="form-label" style="font-size: 18px;">Почта</label>
|
||||
<input type="email" required id="email_inputbox" class="form-control inputbox" placeholder="example@example.com" ></input>
|
||||
</div>
|
||||
<div class="phone w-75 mb-2">
|
||||
<label for="phone_inputbox" class="form-label" style="font-size: 18px;">Номер телефона</label>
|
||||
<input id="phone_inputbox" type="tel" required class="form-control inputbox" placeholder="+7 (999) 999 99-99" ></input>
|
||||
</div>
|
||||
<div class="form-check mb-2 mt-2">
|
||||
<input class="form-check-input" type="checkbox" required value="" id="flexCheckDefault">
|
||||
<label class="form-check-label" for="flexCheckDefault">
|
||||
Я принимаю <a href="./termsofuse.html"> пользовательское соглашение</a>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary mt-3 mb-3 fs-3 ps-5 pe-5">Регистрация</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
119
settings.html
119
settings.html
@ -1,119 +0,0 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Настройки - Маркетплейс</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<!--- https://stackoverflow.com/questions/9456289/how-to-make-a-div-visible-and-invisible-with-javascript --->
|
||||
</head>
|
||||
<body>
|
||||
<header class="border-bottom ps-5 pe-5 sticky-top" style="background-color: #6376D7;">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container-fluid">
|
||||
<button class="btn btn-main d-block d-sm-block d-md-none"
|
||||
type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
|
||||
</button>
|
||||
<a class="navbar-brand fs-3" href="/index.html" style="color: #ffffff;">Маркетплейс</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" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a href="/catalog.html" type="button" class="btn btn-main fs-5">Каталог</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex form-horizontal">
|
||||
<input class="form-control me-2" type="search" placeholder="Поиск..." aria-label="Search" style="width: 40vw;">
|
||||
<button class="btn btn-main me-2 fs-5" type="submit">Поиск</button>
|
||||
</form>
|
||||
<a href="/login.html" class="nav-link link-light">
|
||||
<span class="fs-5" style="color: #ffffff;">Войти</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="container-fluid d-flex justify-content-center mt-5 mb-5">
|
||||
<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel"
|
||||
style="max-width: 65%; background: #D1D9FF ">
|
||||
<div class="offcanvas-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body me-3 d-flex flex-column">
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-2" style="font-size: 20; min-height: 50px">Личные данные</button>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-2" style="font-size: 20; min-height: 50px">Безопасность</button>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-2" style="font-size: 20; min-height: 50px">Интерфейс</button>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-2" style="font-size: 20; min-height: 50px">Помощь</button>
|
||||
<button type="button" class="btn btn-quit mt-auto me-3 ms-3 mb-3" style="min-height: 65px; font-size: 20px; border-radius: 12px;">Выйти из аккаунта</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settings-menu" class="d-flex flex-column box me-3 xl-only">
|
||||
<p class="mt-3 me-auto ms-auto mb-3 xl-only" style="font-size: 22; text-align: center;"> Настройки</p>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-2 xl-only" style="font-size: 20; min-height: 50px">Личные данные</button>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-2 xl-only" style="font-size: 20; min-height: 50px">Безопасность</button>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-2 xl-only" style="font-size: 20; min-height: 50px">Интерфейс</button>
|
||||
<button type="button" class="btn btn-main me-3 ms-3 mb-2 xl-only" style="font-size: 20; min-height: 50px">Помощь</button>
|
||||
<button type="button" class="btn btn-quit mt-auto me-3 ms-3 mb-3 xl-only" style="min-height: 65px; font-size: 22px; border-radius: 12px;">Выйти из аккаунта</button>
|
||||
</div>
|
||||
<div id="personal-info" class="box d-flex flex-column">
|
||||
<div>
|
||||
<p class="mt-3 me-auto ms-5 mb-3" style="font-size: 22; text-align: left;">Личные данные</p>
|
||||
</div>
|
||||
<div class="d-flex flex-row flex-wrap">
|
||||
<div class="ms-4 me-3">
|
||||
<div class="mb-2 justify-content-center">
|
||||
<label for="firstname" class="form-label">Имя</label>
|
||||
<input id="firstname" class="form-control inputbox" placeholder="Имя" disabled> </input>
|
||||
</div>
|
||||
<div class="mb-2 justify-content-center">
|
||||
<label for="lastname" class="form-label">Фамилия</label>
|
||||
<input id="lastname" class="form-control inputbox" placeholder="Фамилия" disabled> </input>
|
||||
</div>
|
||||
<div class="mb-2 justify-content-center">
|
||||
<label for="adress" class="form-label">Адрес доставки</label>
|
||||
<input id="adress" class="form-control inputbox" placeholder="ул. ааа, 1" disabled> </input>
|
||||
</div>
|
||||
<div class="mb-2 justify-content-center">
|
||||
<label for="telephone" class="form-label">Телефон</label>
|
||||
<input id="telephone" class="form-control inputbox" placeholder="+7 (999) 999 99-99" disabled> </input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-4 me-4">
|
||||
<div class="mb-2 justify-content-center">
|
||||
<label for="email" class="form-label">Почта</label>
|
||||
<input id="email" class="form-control inputbox" placeholder="Почта" disabled> </input>
|
||||
</div>
|
||||
<div class="mb-2 justify-content-center">
|
||||
<label for="card" class="form-label">Выбранная карта</label>
|
||||
<input id="card" class="form-control inputbox" placeholder="** 9999" disabled> </input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-4 mt-auto mb-3 d-flex align-items-end">
|
||||
<button type="button" class="btn btn-main mt-4 me-5 ms-auto ps-5 pe-5" style="font-size: 20; height: 50px;">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="container-fluid py-5" style="background-color: #6376D7;">
|
||||
<div class="row">
|
||||
<div class="col-2 offset-1">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light ">Контакты</a></li>
|
||||
<li class="nav-item mb-2"><a href="./termsofuse.html" class="nav-link p-0 link-light">Пользовательское соглашение</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light" >ЧаВо</a></li>
|
||||
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 link-light">О нас</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 offset-3" style="text-align: center; color: #ffffff;">
|
||||
<p>© Маркетплейс,<br/> 2023 <br/> Все права защищены.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,17 +1,7 @@
|
||||
main, body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.form-horizontal{
|
||||
display:block;
|
||||
height:50%;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.picmin.box {
|
||||
display: none;
|
||||
@ -33,10 +23,21 @@ form {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.catalog.white-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
#cart-pic.picmin.box {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.form-horizontal{
|
||||
display:block;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
.registerbox {
|
||||
max-width: 725px;
|
||||
width: 100%;
|
||||
@ -46,45 +47,11 @@ form {
|
||||
}
|
||||
|
||||
.inputbox {
|
||||
height: 52px;
|
||||
height: 42px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
border: 0px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
border-radius: 12px;
|
||||
border: 0px;
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.btn.btn-main {
|
||||
border-radius: 12px;
|
||||
border: 0px;
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.btn.btn-light {
|
||||
width: 197px;
|
||||
height: 62px;
|
||||
border-radius: 12px;
|
||||
border: 0px;
|
||||
color: #000000;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
padding-left: 5%;
|
||||
|
||||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.box {
|
||||
@ -93,11 +60,6 @@ form {
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.inputbox {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#menu.box {
|
||||
width: 250px;
|
||||
max-height: 250px;
|
||||
@ -197,6 +159,39 @@ form {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
border-radius: 12px;
|
||||
border: 0px;
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.btn.btn-main {
|
||||
border-radius: 12px;
|
||||
border: 0px;
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.btn.btn-light {
|
||||
width: 197px;
|
||||
height: 62px;
|
||||
border-radius: 12px;
|
||||
border: 0px;
|
||||
color: #000000;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
padding-left: 5%;
|
||||
|
||||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
--bs-btn-bg: #4156C2 !important;
|
||||
26
src/App.jsx
Normal file
26
src/App.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container } from 'react-bootstrap';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import './App.css';
|
||||
// eslint-disable-next-line import/no-unresolved, import/no-absolute-path, import/extensions
|
||||
import '/node_modules/bootstrap/dist/js/bootstrap.min.js';
|
||||
import Footer from './components/footer/Footer.jsx';
|
||||
import Header from './components/header/Header.jsx';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<>
|
||||
<Header></Header>
|
||||
<Container className='p-2' as="main" fluid>
|
||||
<Outlet/>
|
||||
</Container>
|
||||
<Footer/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
App.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default App;
|
||||
40
src/components/api/ApiClient.js
Normal file
40
src/components/api/ApiClient.js
Normal file
@ -0,0 +1,40 @@
|
||||
import axios from 'axios';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export class HttpError extends Error {
|
||||
constructor(message = '') {
|
||||
super(message);
|
||||
this.name = 'HttpError';
|
||||
Object.setPrototypeOf(this, new.target.prototype);
|
||||
toast.error(message, { id: 'HttpError' });
|
||||
}
|
||||
}
|
||||
|
||||
function responseHandler(response) {
|
||||
if (response.status === 200 || response.status === 201) {
|
||||
const data = response?.data;
|
||||
if (!data) {
|
||||
throw new HttpError('API Error. No data!');
|
||||
}
|
||||
return data;
|
||||
}
|
||||
throw new HttpError(`API Error! Invalid status code ${response.status}!`);
|
||||
}
|
||||
|
||||
function responseErrorHandler(error) {
|
||||
if (error === null) {
|
||||
throw new Error('Unrecoverable error!! Error is null!');
|
||||
}
|
||||
toast.error(error.message, { id: 'AxiosError' });
|
||||
return Promise.reject(error.message);
|
||||
}
|
||||
|
||||
export const ApiClient = axios.create({
|
||||
baseURL: 'http://localhost:8082/',
|
||||
timeout: '3000',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
ApiClient.interceptors.response.use(responseHandler, responseErrorHandler);
|
||||
29
src/components/api/ApiService.js
Normal file
29
src/components/api/ApiService.js
Normal file
@ -0,0 +1,29 @@
|
||||
import { ApiClient } from './ApiClient';
|
||||
|
||||
class ApiService {
|
||||
constructor(url) {
|
||||
this.url = url;
|
||||
}
|
||||
|
||||
async getAll(expand) {
|
||||
return ApiClient.get(`${this.url}${expand || ''}`);
|
||||
}
|
||||
|
||||
async get(id, expand) {
|
||||
return ApiClient.get(`${this.url}/${id}${expand || ''}`);
|
||||
}
|
||||
|
||||
async create(body) {
|
||||
return ApiClient.post(this.url, body);
|
||||
}
|
||||
|
||||
async update(id, body) {
|
||||
return ApiClient.put(`${this.url}/${id}`, body);
|
||||
}
|
||||
|
||||
async delete(id) {
|
||||
return ApiClient.delete(`${this.url}/${id}`);
|
||||
}
|
||||
}
|
||||
|
||||
export default ApiService;
|
||||
BIN
src/components/content/200.jpg
Normal file
BIN
src/components/content/200.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
8
src/components/footer/Footer.css
Normal file
8
src/components/footer/Footer.css
Normal file
@ -0,0 +1,8 @@
|
||||
.site-footer {
|
||||
background-color: #6376D7;
|
||||
}
|
||||
|
||||
.site-footer-text {
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
26
src/components/footer/Footer.jsx
Normal file
26
src/components/footer/Footer.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import './Footer.css';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Footer = () => {
|
||||
const year = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="site-footer container-fluid py-5 mt-auto flex-shrink-0">
|
||||
<div className="row">
|
||||
<div className="col-2 offset-1">
|
||||
<ul className="nav flex-column">
|
||||
<li className="nav-item mb-2"><Link to="#" className="nav-link p-0 link-light ">Контакты</Link></li>
|
||||
<li className="nav-item mb-2"><Link to="./termsofuse.html" className="nav-link p-0 link-light">Пользовательское соглашение</Link></li>
|
||||
<li className="nav-item mb-2"><Link to="#" className="nav-link p-0 link-light" >ЧаВо</Link></li>
|
||||
<li className="nav-item mb-2"><Link to="#" className="nav-link p-0 link-light">О нас</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="site-footer-text col-6 offset-3">
|
||||
<p>© Маркетплейс,<br/> {year} <br/> Все права защищены.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
11
src/components/header/Header.css
Normal file
11
src/components/header/Header.css
Normal file
@ -0,0 +1,11 @@
|
||||
.site-header {
|
||||
background-color: #6376D7;
|
||||
}
|
||||
|
||||
.site-header-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.site-header-search {
|
||||
width: 40vw;
|
||||
}
|
||||
37
src/components/header/Header.jsx
Normal file
37
src/components/header/Header.jsx
Normal file
@ -0,0 +1,37 @@
|
||||
import './Header.css';
|
||||
import { Form } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="site-header border-bottom ps-5 pe-5 sticky-top">
|
||||
<nav className="navbar navbar-expand-lg sticky-top">
|
||||
<div className="container-fluid">
|
||||
<Link className="site-header-text navbar-brand fs-3" to="/">Маркетплейс</Link>
|
||||
<button className="btn btn-main d-block d-sm-block d-md-none"
|
||||
type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
|
||||
</button>
|
||||
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li className="nav-item">
|
||||
<Link to="/catalog" type="button" className="site-header-text btn btn-main fs-5">Каталог</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<Form className="d-flex form-horizontal">
|
||||
<input className="site-header-search form-control me-2" type="search" placeholder="Поиск..." aria-label="Search"></input>
|
||||
<button className="site-header-text btn btn-main me-2 fs-5" type="submit">Поиск</button>
|
||||
</Form>
|
||||
<Link to="/login" className="nav-link link-light">
|
||||
<span className="fs-5 site-header-text">Войти</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
23
src/components/input/Input.jsx
Normal file
23
src/components/input/Input.jsx
Normal file
@ -0,0 +1,23 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Form } from 'react-bootstrap';
|
||||
|
||||
const Input = ({
|
||||
name, label, value, onChange, className, ...rest
|
||||
}) => {
|
||||
return (
|
||||
<Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
|
||||
<Form.Label>{label}</Form.Label>
|
||||
<Form.Control name={name || ''} value={value || ''} onChange={onChange} {...rest} />
|
||||
</Form.Group>
|
||||
);
|
||||
};
|
||||
|
||||
Input.propTypes = {
|
||||
name: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Input;
|
||||
48
src/components/lines/form/LinesForm.jsx
Normal file
48
src/components/lines/form/LinesForm.jsx
Normal file
@ -0,0 +1,48 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Form } from 'react-bootstrap';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import useLinesItemForm from '../hooks/LinesItemFormHook';
|
||||
import LinesItemForm from './LinesItemForm.jsx';
|
||||
|
||||
const LinesForm = ({ id }) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const {
|
||||
item,
|
||||
validated,
|
||||
handleSubmit,
|
||||
handleChange,
|
||||
} = useLinesItemForm(id);
|
||||
|
||||
const onBack = () => {
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
if (await handleSubmit(event)) {
|
||||
onBack();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form className='m-0 p-2' noValidate validated={validated} onSubmit={onSubmit}>
|
||||
<LinesItemForm item={item} handleChange={handleChange} />
|
||||
<Form.Group className='row justify-content-center m-0 mt-3'>
|
||||
<Button className='col-5 col-lg-2 m-0 me-2' variant='secondary' onClick={() => onBack()}>
|
||||
Назад
|
||||
</Button>
|
||||
<Button className='col-5 col-lg-2 m-0 ms-2' type='submit' variant='primary'>
|
||||
Сохранить
|
||||
</Button>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
LinesForm.propTypes = {
|
||||
id: PropTypes.string,
|
||||
};
|
||||
|
||||
export default LinesForm;
|
||||
3
src/components/lines/form/LinesItemForm.css
Normal file
3
src/components/lines/form/LinesItemForm.css
Normal file
@ -0,0 +1,3 @@
|
||||
#image-preview {
|
||||
width: 200px;
|
||||
}
|
||||
30
src/components/lines/form/LinesItemForm.jsx
Normal file
30
src/components/lines/form/LinesItemForm.jsx
Normal file
@ -0,0 +1,30 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import imgPlaceholder from '../../content/200.jpg';
|
||||
import Input from '../../input/Input.jsx';
|
||||
import './LinesItemForm.css';
|
||||
|
||||
const LinesItemForm = ({ item, handleChange }) => {
|
||||
return (
|
||||
<>
|
||||
<div className='text-center'>
|
||||
<img id='image-preview' className='rounded' alt='placeholder'
|
||||
src={item.image || imgPlaceholder} />
|
||||
</div>
|
||||
<Input name='name' label='Название' value={item.name} onChange={handleChange}
|
||||
required />
|
||||
<Input name='price' label='Цена' value={item.price} onChange={handleChange}
|
||||
type='number' min='0.00' step='0.50' required />
|
||||
<Input name='count' label='Количество' value={item.count} onChange={handleChange}
|
||||
type='number' min='1' step='1' required />
|
||||
<Input name='image' label='Изображение' onChange={handleChange}
|
||||
type='file' accept='image/*' />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
LinesItemForm.propTypes = {
|
||||
item: PropTypes.object,
|
||||
handleChange: PropTypes.func,
|
||||
};
|
||||
|
||||
export default LinesItemForm;
|
||||
34
src/components/lines/hooks/LinesDeleteModalHook.js
Normal file
34
src/components/lines/hooks/LinesDeleteModalHook.js
Normal file
@ -0,0 +1,34 @@
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import useModal from '../../modal/ModalHook';
|
||||
import LinesApiService from '../service/LinesApiService';
|
||||
|
||||
const useLinesDeleteModal = (linesChangeHandle) => {
|
||||
const { isModalShow, showModal, hideModal } = useModal();
|
||||
const [currentId, setCurrentId] = useState(0);
|
||||
|
||||
const showModalDialog = (id) => {
|
||||
showModal();
|
||||
setCurrentId(id);
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
hideModal();
|
||||
};
|
||||
|
||||
const onDelete = async () => {
|
||||
await LinesApiService.delete(currentId);
|
||||
linesChangeHandle();
|
||||
toast.success('Элемент успешно удален', { id: 'LinesTable' });
|
||||
onClose();
|
||||
};
|
||||
|
||||
return {
|
||||
isDeleteModalShow: isModalShow,
|
||||
showDeleteModal: showModalDialog,
|
||||
handleDeleteConfirm: onDelete,
|
||||
handleDeleteCancel: onClose,
|
||||
};
|
||||
};
|
||||
|
||||
export default useLinesDeleteModal;
|
||||
45
src/components/lines/hooks/LinesFormModalHook.js
Normal file
45
src/components/lines/hooks/LinesFormModalHook.js
Normal file
@ -0,0 +1,45 @@
|
||||
import { useState } from 'react';
|
||||
import useModal from '../../modal/ModalHook';
|
||||
import useLinesItemForm from './LinesItemFormHook';
|
||||
|
||||
const useLinesFormModal = (linesChangeHandle) => {
|
||||
const { isModalShow, showModal, hideModal } = useModal();
|
||||
const [currentId, setCurrentId] = useState(0);
|
||||
|
||||
const {
|
||||
item,
|
||||
validated,
|
||||
handleSubmit,
|
||||
handleChange,
|
||||
resetValidity,
|
||||
} = useLinesItemForm(currentId, linesChangeHandle);
|
||||
|
||||
const showModalDialog = (id) => {
|
||||
setCurrentId(id);
|
||||
resetValidity();
|
||||
showModal();
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
setCurrentId(-1);
|
||||
hideModal();
|
||||
};
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
if (await handleSubmit(event)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
isFormModalShow: isModalShow,
|
||||
isFormValidated: validated,
|
||||
showFormModal: showModalDialog,
|
||||
currentItem: item,
|
||||
handleItemChange: handleChange,
|
||||
handleFormSubmit: onSubmit,
|
||||
handleFormClose: onClose,
|
||||
};
|
||||
};
|
||||
|
||||
export default useLinesFormModal;
|
||||
26
src/components/lines/hooks/LinesHook.js
Normal file
26
src/components/lines/hooks/LinesHook.js
Normal file
@ -0,0 +1,26 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import LinesApiService from '../service/LinesApiService';
|
||||
|
||||
const useLines = () => {
|
||||
const [linesRefresh, setLinesRefresh] = useState(false);
|
||||
const [lines, setLines] = useState([]);
|
||||
const handleLinesChange = () => setLinesRefresh(!linesRefresh);
|
||||
|
||||
const getLines = async () => {
|
||||
const expand = '?_expand=type';
|
||||
const data = await LinesApiService.getAll(expand);
|
||||
setLines(data ?? []);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getLines();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [linesRefresh]);
|
||||
|
||||
return {
|
||||
lines,
|
||||
handleLinesChange,
|
||||
};
|
||||
};
|
||||
|
||||
export default useLines;
|
||||
79
src/components/lines/hooks/LinesItemFormHook.js
Normal file
79
src/components/lines/hooks/LinesItemFormHook.js
Normal file
@ -0,0 +1,79 @@
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import getBase64FromFile from '../../utils/Base64';
|
||||
import LinesApiService from '../service/LinesApiService';
|
||||
import useLinesItem from './LinesItemHook';
|
||||
|
||||
const useLinesItemForm = (id, linesChangeHandle) => {
|
||||
const { item, setItem } = useLinesItem(id);
|
||||
|
||||
const [validated, setValidated] = useState(false);
|
||||
|
||||
const resetValidity = () => {
|
||||
setValidated(false);
|
||||
};
|
||||
|
||||
const getLineObject = (formData) => {
|
||||
const { name } = formData;
|
||||
const price = parseFloat(formData.price).toFixed(2);
|
||||
const count = parseInt(formData.count, 10);
|
||||
const image = formData.image.startsWith('data:image') ? formData.image : formData.image;
|
||||
return {
|
||||
name: name.toString(),
|
||||
price: price.toString(),
|
||||
count: count.toString(),
|
||||
image,
|
||||
};
|
||||
};
|
||||
|
||||
const handleImageChange = async (event) => {
|
||||
const { files } = event.target;
|
||||
const file = await getBase64FromFile(files.item(0));
|
||||
setItem({
|
||||
...item,
|
||||
image: file,
|
||||
});
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
if (event.target.type === 'file') {
|
||||
handleImageChange(event);
|
||||
return;
|
||||
}
|
||||
const inputName = event.target.name;
|
||||
const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
|
||||
setItem({
|
||||
...item,
|
||||
[inputName]: inputValue,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
const form = event.currentTarget;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const body = getLineObject(item);
|
||||
if (form.checkValidity()) {
|
||||
if (id === undefined) {
|
||||
await LinesApiService.create(body);
|
||||
} else {
|
||||
await LinesApiService.update(id, body);
|
||||
}
|
||||
if (linesChangeHandle) linesChangeHandle();
|
||||
toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
|
||||
return true;
|
||||
}
|
||||
setValidated(true);
|
||||
return false;
|
||||
};
|
||||
|
||||
return {
|
||||
item,
|
||||
validated,
|
||||
handleSubmit,
|
||||
handleChange,
|
||||
resetValidity,
|
||||
};
|
||||
};
|
||||
|
||||
export default useLinesItemForm;
|
||||
34
src/components/lines/hooks/LinesItemHook.js
Normal file
34
src/components/lines/hooks/LinesItemHook.js
Normal file
@ -0,0 +1,34 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import LinesApiService from '../service/LinesApiService';
|
||||
|
||||
const useLinesItem = (id) => {
|
||||
const emptyItem = {
|
||||
id: '',
|
||||
name: '',
|
||||
price: '0',
|
||||
count: '0',
|
||||
image: '',
|
||||
};
|
||||
const [item, setItem] = useState({ ...emptyItem });
|
||||
|
||||
const getItem = async (itemId = undefined) => {
|
||||
if (itemId && itemId > 0) {
|
||||
const data = await LinesApiService.get(itemId);
|
||||
setItem(data);
|
||||
} else {
|
||||
setItem({ ...emptyItem });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getItem(id);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [id]);
|
||||
|
||||
return {
|
||||
item,
|
||||
setItem,
|
||||
};
|
||||
};
|
||||
|
||||
export default useLinesItem;
|
||||
5
src/components/lines/service/LinesApiService.js
Normal file
5
src/components/lines/service/LinesApiService.js
Normal file
@ -0,0 +1,5 @@
|
||||
import ApiService from '../../api/ApiService';
|
||||
|
||||
const LinesApiService = new ApiService('lines');
|
||||
|
||||
export default LinesApiService;
|
||||
58
src/components/lines/table/Lines.jsx
Normal file
58
src/components/lines/table/Lines.jsx
Normal file
@ -0,0 +1,58 @@
|
||||
import { Button } from 'react-bootstrap';
|
||||
import ModalConfirm from '../../modal/ModalConfirm.jsx';
|
||||
import ModalForm from '../../modal/ModalForm.jsx';
|
||||
import LinesItemForm from '../form/LinesItemForm.jsx';
|
||||
import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
|
||||
import useLinesFormModal from '../hooks/LinesFormModalHook';
|
||||
import useLines from '../hooks/LinesHook';
|
||||
import LinesTable from './LinesTable.jsx';
|
||||
import LinesTableRow from './LinesTableRow.jsx';
|
||||
|
||||
const Lines = () => {
|
||||
const { lines, handleLinesChange } = useLines();
|
||||
|
||||
const {
|
||||
isDeleteModalShow,
|
||||
showDeleteModal,
|
||||
handleDeleteConfirm,
|
||||
handleDeleteCancel,
|
||||
} = useLinesDeleteModal(handleLinesChange);
|
||||
|
||||
const {
|
||||
isFormModalShow,
|
||||
isFormValidated,
|
||||
showFormModal,
|
||||
currentItem,
|
||||
handleItemChange,
|
||||
handleFormSubmit,
|
||||
handleFormClose,
|
||||
} = useLinesFormModal(handleLinesChange);
|
||||
|
||||
return (
|
||||
<>
|
||||
<LinesTable>
|
||||
{
|
||||
lines.map((line, index) =>
|
||||
<LinesTableRow key={line.id}
|
||||
index={index} line={line}
|
||||
onDelete={() => showDeleteModal(line.id)}
|
||||
onEdit={() => showFormModal(line.id)}
|
||||
/>)
|
||||
}
|
||||
</LinesTable>
|
||||
<ModalConfirm show={isDeleteModalShow}
|
||||
onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
|
||||
title='Удаление' message='Удалить элемент?' />
|
||||
<ModalForm show={isFormModalShow} validated={isFormValidated}
|
||||
onSubmit={handleFormSubmit} onClose={handleFormClose}
|
||||
title='Редактирование'>
|
||||
<LinesItemForm item={currentItem} handleChange={handleItemChange} />
|
||||
</ModalForm>
|
||||
<Button variant='info' onClick={() => showFormModal()}>
|
||||
Добавить товар
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Lines;
|
||||
29
src/components/lines/table/LinesTable.jsx
Normal file
29
src/components/lines/table/LinesTable.jsx
Normal file
@ -0,0 +1,29 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Table } from 'react-bootstrap';
|
||||
|
||||
const LinesTable = ({ children }) => {
|
||||
return (
|
||||
<Table className='mt-2' striped responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope='col'>№</th>
|
||||
<th scope='col' className='w-25'>Товар</th>
|
||||
<th scope='col' className='w-25'>Цена</th>
|
||||
<th scope='col' className='w-25'>Колич.</th>
|
||||
<th scope='col' className='w-25'>Изображение</th>
|
||||
<th scope='col'></th>
|
||||
<th scope='col'></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{children}
|
||||
</tbody >
|
||||
</Table >
|
||||
);
|
||||
};
|
||||
|
||||
LinesTable.propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export default LinesTable;
|
||||
45
src/components/lines/table/LinesTableRow.jsx
Normal file
45
src/components/lines/table/LinesTableRow.jsx
Normal file
@ -0,0 +1,45 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { PencilFill, Trash3 } from 'react-bootstrap-icons';
|
||||
|
||||
const LinesTableRow = ({
|
||||
index, line, onDelete, onEdit,
|
||||
}) => {
|
||||
const handleAnchorClick = (event, action) => {
|
||||
event.preventDefault();
|
||||
action();
|
||||
};
|
||||
const imgStyle = {
|
||||
width: '70px',
|
||||
height: '70px',
|
||||
};
|
||||
const Img = (image) => {
|
||||
if (image === undefined) {
|
||||
return (
|
||||
<td><img src="src/components/content/200.jpg" style={imgStyle}></img></td>
|
||||
);
|
||||
}
|
||||
return (<td><img src={image} style={imgStyle}></img></td>);
|
||||
};
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<th scope="row">{index + 1}</th>
|
||||
<td>{line.name}</td>
|
||||
<td>{parseFloat(line.price).toFixed(2)}</td>
|
||||
<td>{line.count}</td>
|
||||
{Img(line.image)}
|
||||
<td><a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a></td>
|
||||
<td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a></td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
LinesTableRow.propTypes = {
|
||||
index: PropTypes.number,
|
||||
line: PropTypes.object,
|
||||
onDelete: PropTypes.func,
|
||||
onEdit: PropTypes.func,
|
||||
onEditInPage: PropTypes.func,
|
||||
};
|
||||
|
||||
export default LinesTableRow;
|
||||
3
src/components/modal/Modal.css
Normal file
3
src/components/modal/Modal.css
Normal file
@ -0,0 +1,3 @@
|
||||
.modal-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
42
src/components/modal/ModalConfirm.jsx
Normal file
42
src/components/modal/ModalConfirm.jsx
Normal file
@ -0,0 +1,42 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Modal } from 'react-bootstrap';
|
||||
import { createPortal } from 'react-dom';
|
||||
import './Modal.css';
|
||||
|
||||
const ModalConfirm = ({
|
||||
show, title, message, onConfirm, onClose,
|
||||
}) => {
|
||||
return createPortal(
|
||||
<Modal show={show} backdrop='static' onHide={() => onClose()}>
|
||||
<Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
|
||||
<Modal.Title>{title}</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>
|
||||
{message}
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
|
||||
<Button variant='secondary' className='col-5 m-0 me-2'
|
||||
onClick={() => onClose()}>
|
||||
Нет
|
||||
</Button>
|
||||
<Button variant='primary' className='col-5 m-0 ms-2'
|
||||
onClick={() => onConfirm()}>
|
||||
Да
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>,
|
||||
document.body,
|
||||
);
|
||||
};
|
||||
|
||||
ModalConfirm.propTypes = {
|
||||
show: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
message: PropTypes.string,
|
||||
onConfirm: PropTypes.func,
|
||||
onClose: PropTypes.func,
|
||||
};
|
||||
|
||||
export default ModalConfirm;
|
||||
43
src/components/modal/ModalForm.jsx
Normal file
43
src/components/modal/ModalForm.jsx
Normal file
@ -0,0 +1,43 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Form, Modal } from 'react-bootstrap';
|
||||
import { createPortal } from 'react-dom';
|
||||
import './Modal.css';
|
||||
|
||||
const ModalForm = ({
|
||||
show, title, validated, onSubmit, onClose, children,
|
||||
}) => {
|
||||
return createPortal(
|
||||
<Modal show={show} backdrop='static' onHide={() => onClose()}>
|
||||
<Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
|
||||
<Modal.Title>{title}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Form className='m-0' noValidate validated={validated} onSubmit={onSubmit}>
|
||||
<Modal.Body>
|
||||
{children}
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
|
||||
<Button variant='secondary' className='col-5 m-0 me-2'
|
||||
onClick={() => onClose()}>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button variant='primary' className='col-5 m-0 ms-2' type='submit'>
|
||||
Сохранить
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Form>
|
||||
</Modal>,
|
||||
document.body,
|
||||
);
|
||||
};
|
||||
|
||||
ModalForm.propTypes = {
|
||||
show: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
validated: PropTypes.bool,
|
||||
onSubmit: PropTypes.func,
|
||||
onClose: PropTypes.func,
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export default ModalForm;
|
||||
21
src/components/modal/ModalHook.js
Normal file
21
src/components/modal/ModalHook.js
Normal file
@ -0,0 +1,21 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
const useModal = () => {
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
const showModalDialog = () => {
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const hideModalDialog = () => {
|
||||
setShowModal(false);
|
||||
};
|
||||
|
||||
return {
|
||||
isModalShow: showModal,
|
||||
showModal: showModalDialog,
|
||||
hideModal: hideModalDialog,
|
||||
};
|
||||
};
|
||||
|
||||
export default useModal;
|
||||
78
src/components/product/Prod.jsx
Normal file
78
src/components/product/Prod.jsx
Normal file
@ -0,0 +1,78 @@
|
||||
import './Product.css';
|
||||
import PropTypes from 'prop-types';
|
||||
import useLinesItem from './hooks/GetItemById';
|
||||
import { getId } from './hooks/GetUrlParameter';
|
||||
|
||||
const product = () => {
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
let item = useLinesItem(getId());
|
||||
item = item.item;
|
||||
console.info(item);
|
||||
return (
|
||||
<main className="container-fluid d-flex justify-content-center mt-5 mb-5">
|
||||
<div className="offcanvas offcanvas-start" data-bs-backdrop="static" tabIndex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel" >
|
||||
<div className="offcanvas-header">
|
||||
<button type="button" className="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
|
||||
</div>
|
||||
<div className="offcanvas-body me-3 d-flex flex-column">
|
||||
<button type="button" className="btn menu-btn btn-main mt-3 me-3 ms-3 mb-3">Товар</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-3">Характеристики</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-3">Магазины</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-3">Отзывы</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-3">Вопросы</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="product-menu box me-3 d-flex flex-column">
|
||||
<button type="button" className="pr-menu-btn btn btn-main mt-3 me-3 ms-3 mb-3">Товар</button>
|
||||
<button type="button" className="pr-menu-btn btn btn-main me-3 ms-3 mb-3">Характеристики</button>
|
||||
<button type="button" className="pr-menu-btn btn btn-main me-3 ms-3 mb-3">Магазины</button>
|
||||
<button type="button" className="pr-menu-btn btn btn-main me-3 ms-3 mb-3">Отзывы</button>
|
||||
<button type="button" className="pr-menu-btn btn btn-main me-3 ms-3 mb-3">Вопросы</button>
|
||||
</div>
|
||||
<div id="product-box" className="box d-flex flex-column flex-wrap">
|
||||
<div id="product-name" className="ms-4 mt-4">
|
||||
<p style={{ fontSize: '28px' }}>{item.name}</p>
|
||||
</div>
|
||||
<div id="mid-product-box" className="d-flex flex-wrap">
|
||||
<div className="d-flex ms-4 mt-4 me-3">
|
||||
<div className="d-sm-flex d-md-flex d-flex flex-column me-3">
|
||||
<img src="src/components/content/product/600012638453b0.jpg" className="picmin box mb-3"/>
|
||||
<img src="src/components/content/product/600012638453b1.jpg" className="picmin box mb-3"/>
|
||||
<img src="src/components/content/product/600012638453b2.jpg" className="picmin box mb-3"/>
|
||||
<img src="src/components/content/product/600012638453b3.jpg" className="picmin box mb-3"/>
|
||||
</div>
|
||||
<div id="pictures-preview">
|
||||
<img src={item.image} className="picture-preview box"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="order-box" className="box ms-auto me-auto mt-4 d-flex flex-column">
|
||||
<div className="mt-3">
|
||||
<p className="text-center">Завтра или позже </p>
|
||||
<p className="mt-3 ms-5 text-left fs-3">{item.price} ₽</p>
|
||||
</div>
|
||||
<div className="mt-3 ms-5 me-5">
|
||||
<p className="text-left fs-5 mb-0">Доставка — 0 ₽</p>
|
||||
<p className="fs-6">c 16 ноября </p>
|
||||
</div>
|
||||
<div className="mt-0 ms-5 me-5">
|
||||
<p className="text-left fs-5 mb-0">Самовывоз — 0 ₽</p>
|
||||
<p className="fs-6">c 15 ноября </p>
|
||||
</div>
|
||||
<button type="button" className="btn menu-btn btn-main ms-5 me-5 mt-auto mb-3">Купить</button>
|
||||
<p className="mb-3 text-center">В наличии: {item.count} </p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="product-box-description" style={{ minHeight: '400px' }}>
|
||||
<p style={{ fontSize: '28px' }} className="ms-5 mt-3">Краткое описание товара:</p>
|
||||
<p className="ms-5 me-5"> Видеокарта ASUS Dual GeForce RTX 4070 OC Edition 12GB GDDR6X – мощное охлаждение (два вентилятора Axial-tech) и широкая совместимость (форм-фактор 2,56 слота). Энергоэффективная архитектура Ada Lovelace, технология DLSS 3, аппаратная поддержка трассировки лучей. Тензорные ядра четвертого поколения: DLSS 3 повышает скорость рендеринга четырехкратно по сравнению с методом «грубой силы». RT-ядра третьего поколения: двукратное повышение производительности при трассировке лучей. Повышенная Boost-частота графического процессора: 2550 МГц в режиме разгона и 2520 МГц в режиме по умолчанию. Вентиляторы Axial-tech: удлиненные лопасти и кольцо-ограничитель для увеличения воздушного давления. Форм-фактор 2,56 слота: широкая совместимость и отличное охлаждение в компактных корпусах. Бесшумный режим работы кулера под низкими нагрузками. Двойные шарикоподшипники в вентиляторах обладают вдвое большим сроком службы, чем традиционные подшипники скольжения.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
product.propTypes = {
|
||||
item: PropTypes.object,
|
||||
};
|
||||
|
||||
export default product;
|
||||
14
src/components/product/Product.css
Normal file
14
src/components/product/Product.css
Normal file
@ -0,0 +1,14 @@
|
||||
.menu-btn {
|
||||
font-size: 20;
|
||||
height: 60px
|
||||
}
|
||||
|
||||
.pr-menu-btn {
|
||||
font-size: 20;
|
||||
height: 60px
|
||||
}
|
||||
|
||||
.offcanvas {
|
||||
max-width: 65%;
|
||||
background: #D1D9FF;
|
||||
}
|
||||
34
src/components/product/hooks/GetItemById.js
Normal file
34
src/components/product/hooks/GetItemById.js
Normal file
@ -0,0 +1,34 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import LinesApiService from '../service/ProductApiService';
|
||||
|
||||
const useLinesItem = (id) => {
|
||||
const emptyItem = {
|
||||
id: '',
|
||||
name: '',
|
||||
price: '0',
|
||||
count: '0',
|
||||
image: '',
|
||||
};
|
||||
const [item, setItem] = useState({ ...emptyItem });
|
||||
|
||||
const getItem = async (itemId = undefined) => {
|
||||
if (itemId && itemId > 0) {
|
||||
const data = await LinesApiService.get(itemId);
|
||||
setItem(data);
|
||||
} else {
|
||||
setItem({ ...emptyItem });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getItem(id);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [id]);
|
||||
|
||||
return {
|
||||
item,
|
||||
setItem,
|
||||
};
|
||||
};
|
||||
|
||||
export default useLinesItem;
|
||||
6
src/components/product/hooks/GetUrlParameter.js
Normal file
6
src/components/product/hooks/GetUrlParameter.js
Normal file
@ -0,0 +1,6 @@
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
export function getId() {
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
return urlParams.get('id');
|
||||
}
|
||||
79
src/components/product/hooks/LinesItemFormHook.js
Normal file
79
src/components/product/hooks/LinesItemFormHook.js
Normal file
@ -0,0 +1,79 @@
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import getBase64FromFile from '../../utils/Base64';
|
||||
import ProductApiService from '../service/ProductApiService';
|
||||
import useLinesItem from './GetItemById';
|
||||
|
||||
const useLinesItemForm = (id, linesChangeHandle) => {
|
||||
const { item, setItem } = useLinesItem(id);
|
||||
|
||||
const [validated, setValidated] = useState(false);
|
||||
|
||||
const resetValidity = () => {
|
||||
setValidated(false);
|
||||
};
|
||||
|
||||
const getLineObject = (formData) => {
|
||||
const { name } = formData;
|
||||
const price = parseFloat(formData.price).toFixed(2);
|
||||
const count = parseInt(formData.count, 10);
|
||||
const image = formData.image.startsWith('data:image') ? formData.image : formData.image;
|
||||
return {
|
||||
name: name.toString(),
|
||||
price: price.toString(),
|
||||
count: count.toString(),
|
||||
image,
|
||||
};
|
||||
};
|
||||
|
||||
const handleImageChange = async (event) => {
|
||||
const { files } = event.target;
|
||||
const file = await getBase64FromFile(files.item(0));
|
||||
setItem({
|
||||
...item,
|
||||
image: file,
|
||||
});
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
if (event.target.type === 'file') {
|
||||
handleImageChange(event);
|
||||
return;
|
||||
}
|
||||
const inputName = event.target.name;
|
||||
const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
|
||||
setItem({
|
||||
...item,
|
||||
[inputName]: inputValue,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
const form = event.currentTarget;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const body = getLineObject(item);
|
||||
if (form.checkValidity()) {
|
||||
if (id === undefined) {
|
||||
await ProductApiService.create(body);
|
||||
} else {
|
||||
await ProductApiService.update(id, body);
|
||||
}
|
||||
if (linesChangeHandle) linesChangeHandle();
|
||||
toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
|
||||
return true;
|
||||
}
|
||||
setValidated(true);
|
||||
return false;
|
||||
};
|
||||
|
||||
return {
|
||||
item,
|
||||
validated,
|
||||
handleSubmit,
|
||||
handleChange,
|
||||
resetValidity,
|
||||
};
|
||||
};
|
||||
|
||||
export default useLinesItemForm;
|
||||
5
src/components/product/service/ProductApiService.js
Normal file
5
src/components/product/service/ProductApiService.js
Normal file
@ -0,0 +1,5 @@
|
||||
import ApiService from '../../api/ApiService';
|
||||
|
||||
const LinesApiService = new ApiService('lines');
|
||||
|
||||
export default LinesApiService;
|
||||
15
src/components/utils/Base64.js
Normal file
15
src/components/utils/Base64.js
Normal file
@ -0,0 +1,15 @@
|
||||
const getBase64FromFile = async (file) => {
|
||||
const reader = new FileReader();
|
||||
return new Promise((resolve, reject) => {
|
||||
reader.onloadend = () => {
|
||||
const fileContent = reader.result;
|
||||
resolve(fileContent);
|
||||
};
|
||||
reader.onerror = () => {
|
||||
reject(new Error('Oops, something went wrong with the file reader.'));
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
};
|
||||
|
||||
export default getBase64FromFile;
|
||||
0
src/index.css
Normal file
0
src/index.css
Normal file
74
src/main.jsx
Normal file
74
src/main.jsx
Normal file
@ -0,0 +1,74 @@
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
|
||||
import App from './App.jsx';
|
||||
import './index.css';
|
||||
import ErrorPage from './pages/ErrorPage.jsx';
|
||||
import MainPage from './pages/MainPage.jsx';
|
||||
import Login from './pages/Login.jsx';
|
||||
import Register from './pages/Register.jsx';
|
||||
import Product from './pages/Product.jsx';
|
||||
import Settings from './pages/Settings.jsx';
|
||||
import Profile from './pages/Profile.jsx';
|
||||
import Admin from './pages/Admin.jsx';
|
||||
import Catalog from './pages/Catalog.jsx';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
index: true,
|
||||
path: '/',
|
||||
element: <MainPage/>,
|
||||
title: 'Главная страница',
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
element: <Login/>,
|
||||
title: 'Войти в аккаунт',
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
element: <Register/>,
|
||||
title: 'Регистрация',
|
||||
},
|
||||
{
|
||||
path: '/product',
|
||||
element: <Product/>,
|
||||
title: 'Купить',
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
element: <Settings />,
|
||||
title: 'Настройки',
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
element: <Profile />,
|
||||
title: 'Профиль',
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
element: <Admin />,
|
||||
title: 'Администратор',
|
||||
},
|
||||
{
|
||||
path: '/catalog',
|
||||
element: <Catalog />,
|
||||
title: 'Каталог',
|
||||
},
|
||||
];
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <App routes={routes} />,
|
||||
children: routes,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
]);
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
9
src/pages/Admin.jsx
Normal file
9
src/pages/Admin.jsx
Normal file
@ -0,0 +1,9 @@
|
||||
import Lines from '../components/lines/table/Lines.jsx';
|
||||
|
||||
const Admin = () => {
|
||||
return (
|
||||
<Lines />
|
||||
);
|
||||
};
|
||||
|
||||
export default Admin;
|
||||
183
src/pages/Catalog.jsx
Normal file
183
src/pages/Catalog.jsx
Normal file
@ -0,0 +1,183 @@
|
||||
import { Form } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Catalog = () => {
|
||||
return (
|
||||
<main className="container-fluid d-flex justify-content-center mt-5 mb-5">
|
||||
<div className="offcanvas offcanvas-start" data-bs-backdrop="static" tabIndex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel"
|
||||
>
|
||||
<div className="offcanvas-header">
|
||||
<button type="button" className="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
|
||||
</div>
|
||||
<div className="offcanvas-body me-3 d-flex flex-column">
|
||||
<div id="innerbox" className="catalog box ms-3 me-3 mt-3 d-flex flex-column">
|
||||
<p className="mt-3 mb-3 text-center fs-4 catalog white-text" >Категория</p>
|
||||
<p className="ms-3 mt-auto mb-3 catalog white-text" >Все категории</p>
|
||||
</div>
|
||||
<div id="innerbox" className="catalog box ms-3 me-3 mt-3 d-flex flex-column">
|
||||
<p className="mt-3 mb-3 text-center fs-5 catalog white-text">Цена (руб.):</p>
|
||||
<div className="d-flex mb-3">
|
||||
<div id="min-price" className="ms-3 me-2">
|
||||
<Form.Control type="text" className="form-control" placeholder="от"/>
|
||||
</div>
|
||||
<div id="max-price" className="me-3">
|
||||
<Form.Control type="text" className="form-control" placeholder="до"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="innerbox" className="catalog box ms-3 me-3 mt-3 mb-3">
|
||||
<div id="delivery-available" className="mt-3 ms-3">
|
||||
<Form.Check value="" id="flexCheckDefault"/>
|
||||
<Form.Label className="form-check-label catalog white-text" htmlFor="flexCheckDefault" >
|
||||
Есть доставка
|
||||
</Form.Label>
|
||||
</div>
|
||||
<div id="in-stock" className="mt-1 ms-3">
|
||||
<Form.Check value="" id="flexCheckDefault"/>
|
||||
<Form.Label className="form-check-label catalog white-text" htmlFor="flexCheckDefault" >
|
||||
В наличии
|
||||
</Form.Label>
|
||||
</div>
|
||||
<div id="credit-available" className="mt-1 ms-3 mb-3">
|
||||
<Form.Check value="" id="flexCheckDefault"/>
|
||||
<Form.Label className="form-check-label catalog white-text" htmlFor="flexCheckDefault" >
|
||||
Доступно в кредит
|
||||
</Form.Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="catalog-menu box me-3 d-flex flex-column xl-only">
|
||||
<div id="innerbox" className="catalog box ms-3 me-3 mt-3 d-flex flex-column xl-only">
|
||||
<p className="mt-3 mb-3 text-center fs-4 xl-only catalog white-text" >Категория</p>
|
||||
<p className="ms-3 mt-auto mb-3 xl-only catalog white-text" >Все категории</p>
|
||||
</div>
|
||||
<div id="innerbox" className="catalog box ms-3 me-3 mt-3 d-flex flex-column xl-only">
|
||||
<p className="mt-3 mb-3 text-center fs-5 xl-only catalog white-text" >Цена (руб.):</p>
|
||||
<div className="d-flex mb-3 xl-only">
|
||||
<div id="min-price" className="ms-3 me-2 xl-only">
|
||||
<Form.Control type="text" className="form-control xl-only" placeholder="от"/>
|
||||
</div>
|
||||
<div id="max-price" className="me-3 xl-only">
|
||||
<Form.Control type="text" className="form-control" placeholder="до"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="innerbox" className="catalog box ms-3 me-3 mt-3 mb-3 xl-only">
|
||||
<div id="delivery-available" className="mt-3 ms-3 xl-only">
|
||||
<Form.Check value="" id="flexCheckDefault"/>
|
||||
<Form.Label className="catalog white-text xl-only" htmlFor="flexCheckDefault" >
|
||||
Есть доставка
|
||||
</Form.Label>
|
||||
</div>
|
||||
<div id="in-stock" className="mt-1 ms-3 xl-only">
|
||||
<Form.Check value="" id="flexCheckDefault"/>
|
||||
<Form.Label className="catalog white-text xl-only" htmlFor="flexCheckDefault" >
|
||||
В наличии
|
||||
</Form.Label>
|
||||
</div>
|
||||
<div id="credit-available" className="mt-1 ms-3 mb-3 xl-only">
|
||||
<Form.Check value="" id="flexCheckDefault"/>
|
||||
<Form.Label className="catalog white-text xl-only" htmlFor="flexCheckDefault" >
|
||||
Доступно в кредит
|
||||
</Form.Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="catalog" className="box d-flex flex-wrap justify-content-center align-items-md-center">
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/Kingston A400.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto"> SSD-накопитель Kingston A400</p>
|
||||
<p className="ms-3 me-auto fs-4">5 400 ₽</p>
|
||||
<Link to="../product?id=1" type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</Link>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/Samsung A54.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto"> Смартфон Samsung A54 6/128GB</p>
|
||||
<p className="ms-3 me-auto fs-4">35 750 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/Samsung S23+.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto"> Смартфон Samsung S23+ 8/256GB</p>
|
||||
<p className="ms-3 me-auto fs-4">110 990 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/POCO X5 Pro.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto"> Смартфон POCO X5 Pro 5G 8/256GB</p>
|
||||
<p className="ms-3 me-auto fs-4">39 990 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/Steelseries Aerox 3 Wireless.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto"> Беспроводная игровая мышь SteelSeries AEROX 3</p>
|
||||
<p className="ms-3 me-auto fs-4">9 490 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/XBOX Series X.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto">Консоль Microsoft XBOX Series X</p>
|
||||
<p className="ms-3 me-auto fs-4">82 000 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/GeForce RTX 4070.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto">Видеокарта ASUS NVIDIA DUAL RTX4070</p>
|
||||
<p className="ms-3 me-auto fs-4">76 000 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/PS5.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto">Игровая приставка Sony PlayStation 5</p>
|
||||
<p className="ms-3 me-auto fs-4">58 990 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/Ryzen 7 5800X3D.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto">Процессор AMD Ryzen 7 5800X3D OEM</p>
|
||||
<p className="ms-3 me-auto fs-4">44 290 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/Ryzen 5 5600G.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto">Процессор AMD Ryzen 5 5600G OEM</p>
|
||||
<p className="ms-3 me-auto fs-4">14 590 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/Ryzen 5 7600X.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto">Процессор AMD Ryzen 5 7600X OEM</p>
|
||||
<p className="ms-3 me-auto fs-4">29 590 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/DEEPCOOL AG200.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto">Кулер для процессора DEEPCOOL AG200</p>
|
||||
<p className="ms-3 me-auto fs-4">1 590 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/Kingston 16GB DDR4 3200MHz.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto">Оперативная память Kingston 16Gb DDR4</p>
|
||||
<p className="ms-3 me-auto fs-4">5 190 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/Samsung 980 PRO.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto">SSD накопитель Samsung 980 PRO 1TB M.2</p>
|
||||
<p className="ms-3 me-auto fs-4">15 190 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
<div id="item" className="catalog box m-auto mb-3 mt-3 d-flex flex-column">
|
||||
<img className="mt-2 item-img align-self-center" src="src/components/content/catalog/Intel Core i5 13600KF.jpg"/>
|
||||
<p className="mb-3 ms-3 me-auto">Процессор Intel Core i5 13600KF OEM</p>
|
||||
<p className="ms-3 me-auto fs-4">42 613 ₽</p>
|
||||
<button type="button" className="btn btn-main mb-3 me-3 ms-auto mt-auto">Купить</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default Catalog;
|
||||
20
src/pages/ErrorPage.jsx
Normal file
20
src/pages/ErrorPage.jsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { Alert, Button, Container } from 'react-bootstrap';
|
||||
import { useNavigate, useRouteError } from 'react-router-dom';
|
||||
|
||||
const ErrorPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const error = useRouteError();
|
||||
|
||||
return (
|
||||
<Container fluid className='m-0 p-3 row justify-content-center'>
|
||||
<Alert className='col-12 col-lg-6' variant='danger'>
|
||||
{error?.message ?? 'Страница не найдена'}
|
||||
</Alert>
|
||||
<div className='w-100'></div>
|
||||
<Button className='col-12 col-lg-6' variant='primary'
|
||||
onClick={() => navigate(-1)}>Назад</Button>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorPage;
|
||||
8
src/pages/Login.css
Normal file
8
src/pages/Login.css
Normal file
@ -0,0 +1,8 @@
|
||||
.label-text {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn-size {
|
||||
width: 197px;
|
||||
height: 62px;
|
||||
}
|
||||
29
src/pages/Login.jsx
Normal file
29
src/pages/Login.jsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { Form } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Login.css';
|
||||
|
||||
const Login = () => {
|
||||
return (
|
||||
<main className="container-fluid d-flex justify-content-center align-items-center mt-5">
|
||||
<div className="registerbox">
|
||||
<Form className="d-flex flex-column align-items-center">
|
||||
<p className="fs-2 mt-5">Вход в аккаунт</p>
|
||||
<Form.Group className="login w-75 mt-2">
|
||||
<Form.Label className="login-text">Логин</Form.Label>
|
||||
<Form.Control type="login" required id="login_inputbox" className="form-control inputbox" placeholder="Введите логин..."/>
|
||||
</Form.Group>
|
||||
<Form.Group className="password w-75 mt-2">
|
||||
<Form.Label className="login-text">Пароль</Form.Label>
|
||||
<Form.Control type="password" required id="password_inputbox" className="form-control inputbox" placeholder="Пароль..."/>
|
||||
</Form.Group>
|
||||
<Form.Group className="d-flex mt-5 mb-5 flex-wrap justify-content-center align-content-center">
|
||||
<button type="submit" className="btn btn-main btn-size mb-3 me-3">Вход</button>
|
||||
<Link to="../register" role="button" className="btn btn-main btn-size mb-3 me-3 d-flex justify-content-center align-items-center">Регистрация</Link>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
19
src/pages/MainPage.jsx
Normal file
19
src/pages/MainPage.jsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const MainPage = () => {
|
||||
return (
|
||||
<main className="container-fluid d-flex justify-content-center align-items-center">
|
||||
<div className="box d-flex flex-column justify-content-center align-items-center mt-5">
|
||||
<p className="fs-3 ms-5 me-5 mt-3">Добро пожаловать на сайт Маркетплейс!</p>
|
||||
<p className='ms-3 me-3'>На нашем сайте вы сможете приобрести, а также заказать многие технические товары!</p>
|
||||
<Link to='/catalog' role='button' className='btn btn-main w-50 mb-2'>Открыть каталог</Link>
|
||||
<Link to='/product' role='button' className='btn btn-main w-50 mb-2'>Открыть пример товара</Link>
|
||||
<Link to='/profile' role='button' className='btn btn-main w-50 mb-2'>Открыть профиль</Link>
|
||||
<Link to='/settings' role='button' className='btn btn-main w-50 mb-2'>Открыть настройки</Link>
|
||||
<Link to='/admin' role='button' className='btn btn-main w-50 mb-3'>Открыть панель администратора</Link>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainPage;
|
||||
14
src/pages/Product.css
Normal file
14
src/pages/Product.css
Normal file
@ -0,0 +1,14 @@
|
||||
.menu-btn {
|
||||
font-size: 20;
|
||||
height: 60px
|
||||
}
|
||||
|
||||
.pr-menu-btn {
|
||||
font-size: 20;
|
||||
height: 60px
|
||||
}
|
||||
|
||||
.offcanvas {
|
||||
max-width: 65%;
|
||||
background: #D1D9FF;
|
||||
}
|
||||
74
src/pages/Product.jsx
Normal file
74
src/pages/Product.jsx
Normal file
@ -0,0 +1,74 @@
|
||||
import './Product.css';
|
||||
// import Prod from '../components/product/Prod';
|
||||
//
|
||||
// const Product = () => {
|
||||
// return (
|
||||
// <Prod/>
|
||||
// );
|
||||
// };
|
||||
|
||||
const Product = () => {
|
||||
return (
|
||||
<main className="container-fluid d-flex justify-content-center mt-5 mb-5">
|
||||
<div className="offcanvas offcanvas-start" data-bs-backdrop="static" tabIndex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel" >
|
||||
<div className="offcanvas-header">
|
||||
<button type="button" className="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
|
||||
</div>
|
||||
<div className="offcanvas-body me-3 d-flex flex-column">
|
||||
<button type="button" className="btn menu-btn btn-main mt-3 me-3 ms-3 mb-3">Товар</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-3">Характеристики</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-3">Магазины</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-3">Отзывы</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-3">Вопросы</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="product-menu box me-3 d-flex flex-column">
|
||||
<button type="button" className="pr-menu-btn btn btn-main mt-3 me-3 ms-3 mb-3">Товар</button>
|
||||
<button type="button" className="pr-menu-btn btn btn-main me-3 ms-3 mb-3">Характеристики</button>
|
||||
<button type="button" className="pr-menu-btn btn btn-main me-3 ms-3 mb-3">Магазины</button>
|
||||
<button type="button" className="pr-menu-btn btn btn-main me-3 ms-3 mb-3">Отзывы</button>
|
||||
<button type="button" className="pr-menu-btn btn btn-main me-3 ms-3 mb-3">Вопросы</button>
|
||||
</div>
|
||||
<div id="product-box" className="box d-flex flex-column flex-wrap">
|
||||
<div id="product-name" className="ms-4 mt-4">
|
||||
<p style={{ fontSize: '28px' }}>Видеокарта ASUS NVIDIA DUAL RTX4070</p>
|
||||
</div>
|
||||
<div id="mid-product-box" className="d-flex flex-wrap">
|
||||
<div className="d-flex ms-4 mt-4 me-3">
|
||||
<div className="d-sm-flex d-md-flex d-flex flex-column me-3">
|
||||
<img src="src/components/content/product/600012638453b0.jpg" className="picmin box mb-3"/>
|
||||
<img src="src/components/content/product/600012638453b1.jpg" className="picmin box mb-3"/>
|
||||
<img src="src/components/content/product/600012638453b2.jpg" className="picmin box mb-3"/>
|
||||
<img src="src/components/content/product/600012638453b3.jpg" className="picmin box mb-3"/>
|
||||
</div>
|
||||
<div id="pictures-preview">
|
||||
<img src="src/components/content/catalog/Geforce RTX 4070.jpg" className="picture-preview box"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="order-box" className="box ms-auto me-auto mt-4 d-flex flex-column">
|
||||
<div className="mt-3">
|
||||
<p className="text-center">Завтра или позже </p>
|
||||
<p className="mt-3 ms-5 text-left fs-3">76 000 ₽</p>
|
||||
</div>
|
||||
<div className="mt-3 ms-5 me-5">
|
||||
<p className="text-left fs-5 mb-0">Доставка — 0 ₽</p>
|
||||
<p className="fs-6">c 16 ноября </p>
|
||||
</div>
|
||||
<div className="mt-0 ms-5 me-5">
|
||||
<p className="text-left fs-5 mb-0">Самовывоз — 0 ₽</p>
|
||||
<p className="fs-6">c 15 ноября </p>
|
||||
</div>
|
||||
<button type="button" className="btn menu-btn btn-main ms-5 me-5 mt-auto mb-3">Купить</button>
|
||||
<p className="mb-3 text-center">В наличии: 2 </p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="product-box-description" style={{ minHeight: '400px' }}>
|
||||
<p style={{ fontSize: '28px' }} className="ms-5 mt-3">Краткое описание товара:</p>
|
||||
<p className="ms-5 me-5"> Видеокарта ASUS Dual GeForce RTX 4070 OC Edition 12GB GDDR6X – мощное охлаждение (два вентилятора Axial-tech) и широкая совместимость (форм-фактор 2,56 слота). Энергоэффективная архитектура Ada Lovelace, технология DLSS 3, аппаратная поддержка трассировки лучей. Тензорные ядра четвертого поколения: DLSS 3 повышает скорость рендеринга четырехкратно по сравнению с методом «грубой силы». RT-ядра третьего поколения: двукратное повышение производительности при трассировке лучей. Повышенная Boost-частота графического процессора: 2550 МГц в режиме разгона и 2520 МГц в режиме по умолчанию. Вентиляторы Axial-tech: удлиненные лопасти и кольцо-ограничитель для увеличения воздушного давления. Форм-фактор 2,56 слота: широкая совместимость и отличное охлаждение в компактных корпусах. Бесшумный режим работы кулера под низкими нагрузками. Двойные шарикоподшипники в вентиляторах обладают вдвое большим сроком службы, чем традиционные подшипники скольжения.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default Product;
|
||||
42
src/pages/Profile.jsx
Normal file
42
src/pages/Profile.jsx
Normal file
@ -0,0 +1,42 @@
|
||||
const Profile = () => {
|
||||
return (
|
||||
<main className="container-fluid d-flex justify-content-center mt-5 mb-5 flex-wrap">
|
||||
<div id="menu" className="box d-flex flex-column me-3 mb-3">
|
||||
<p className="mt-3 me-auto ms-auto mb-3" style={{ fontSize: 22, textAlign: 'center' }}> Здравствуйте, Имя!</p>
|
||||
<button type="button" className="btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Корзина</button>
|
||||
<button type="button" className="btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Заказы</button>
|
||||
<button type="button" className="btn btn-main me-3 ms-3 mb-2" style={{ fontSize: 20, height: '50px' }}>Избранное</button>
|
||||
</div>
|
||||
<div id="cart" className="box">
|
||||
<p className="mt-3 me-auto ms-5 mb-3" style={{ fontSize: 22, textAlign: 'left' }}>Корзина</p>
|
||||
<div className="d-flex flex-wrap">
|
||||
<div id="cart-box" className="innerbox ms-4 me-3 w-75 mb-3 d-flex flex-column" style={{ minWidth: '300px' }}>
|
||||
<div className="d-flex mt-3">
|
||||
<img src="src/components/content/catalog/GeForce RTX 4070.jpg" id="cart-pic" className="ms-3 box picmin"></img>
|
||||
<p className="align-self-center">Видеокарта ASUS NVIDIA DUAL RTX4070</p>
|
||||
<p className="align-self-center ms-auto me-4 fs-4">76 000 ₽</p>
|
||||
</div>
|
||||
<div className="d-flex mt-3">
|
||||
<img src="src/components/content/catalog/Ryzen 7 5800X3D.jpg" id="cart-pic" className="ms-3 box picmin"></img>
|
||||
<p className="align-self-center">Процессор AMD Ryzen 7 5800X3D OEM</p>
|
||||
<p className="align-self-center ms-auto me-4 fs-4">44 290 ₽</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="order-cart-box" className="innerbox ms-4 me-4 mb-3 d-flex flex-column">
|
||||
<div id="total-sum" className="d-flex flex-row mt-4">
|
||||
<p className="ms-4 me-auto" style={{ fontSize: 22, textAlign: 'left' }}>Итого</p>
|
||||
<p className="ms-auto me-4" style={{ fontSize: 22, textAlign: 'right' }}>120 290 ₽</p>
|
||||
</div>
|
||||
<div id="total-itemsincart" className="d-flex flex-row mb-3">
|
||||
<p className="ms-4 me-auto" style={{ fontSize: 16, color: '#7e7e7e', textAlign: 'left' }}>Товаров</p>
|
||||
<p className="ms-auto me-4" style={{ fontSize: 16, color: '#7e7e7e', textAlign: 'right' }}>2 шт.</p>
|
||||
</div>
|
||||
<button type="button" className="btn btn-main mt-auto me-5 ms-5 mb-3" style={{ minHeight: '55px' }}>Оформить заказ</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
50
src/pages/Register.jsx
Normal file
50
src/pages/Register.jsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { Form } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Login.css';
|
||||
|
||||
const Register = () => {
|
||||
return (
|
||||
<main className="container-fluid d-flex align-items-center justify-content-center mt-5 mb-5">
|
||||
<div className="registerbox">
|
||||
<Form className="d-flex flex-column align-items-center">
|
||||
<p className="text-center fs-1 mt-5">Регистрация</p>
|
||||
<Form.Group className="login w-75 mb-2">
|
||||
<Form.Label className="label-text">Логин</Form.Label>
|
||||
<Form.Control type="text" required id="login_inputbox" className="form-control inputbox" placeholder="Введите логин..."/>
|
||||
</Form.Group>
|
||||
<Form.Group className="password w-75 mb-2">
|
||||
<Form.Label className="label-text">Пароль</Form.Label>
|
||||
<Form.Control type="password" required id="password_inputbox" className="form-control inputbox" placeholder="Пароль..."/>
|
||||
</Form.Group>
|
||||
<Form.Group className="d-flex align-items-center w-75 mb-2">
|
||||
<div className="firstname">
|
||||
<Form.Label className="label-text">Имя</Form.Label>
|
||||
<Form.Control type="text" required id="firstname_inputbox" className="form-control inputbox" placeholder="Введите имя..."/>
|
||||
</div>
|
||||
<div className="lastname ms-auto">
|
||||
<Form.Label className="label-text">Фамилия</Form.Label>
|
||||
<Form.Control type="text" required id="lastname_inputbox" className="form-control inputbox" placeholder="Введите фамилию..."/>
|
||||
</div>
|
||||
</Form.Group>
|
||||
<Form.Group className="email w-75 mb-2">
|
||||
<Form.Label className="label-text">Почта</Form.Label>
|
||||
<Form.Control type="email" required id="email_inputbox" className="form-control inputbox" placeholder="example@example.com" />
|
||||
</Form.Group>
|
||||
<Form.Group className="phone w-75 mb-2">
|
||||
<Form.Label className="label-text">Номер телефона</Form.Label>
|
||||
<Form.Control id="phone_inputbox" type="tel" required className="form-control inputbox" placeholder="+7 (999) 999 99-99" />
|
||||
</Form.Group>
|
||||
<Form.Group className="form-check mb-2 mt-2">
|
||||
<Form.Check required value="" id="flexCheckDefault"/>
|
||||
<Form.Label className="label-text form-check-label">
|
||||
Я принимаю <Link to="../termsofuse.html"> пользовательское соглашение</Link>
|
||||
</Form.Label>
|
||||
</Form.Group>
|
||||
<button type="submit" className="btn btn-main mt-3 mb-3 fs-3 ps-5 pe-5">Регистрация</button>
|
||||
</Form>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default Register;
|
||||
25
src/pages/Settings.css
Normal file
25
src/pages/Settings.css
Normal file
@ -0,0 +1,25 @@
|
||||
.btn.menu-btn {
|
||||
font-size: 20;
|
||||
min-height: 50px
|
||||
}
|
||||
|
||||
.btn.btn-quit {
|
||||
min-height: 65px;
|
||||
font-size: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.menu-text{
|
||||
font-size: 22;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.offcanvas {
|
||||
max-width: 65%;
|
||||
background: #D1D9FF;
|
||||
}
|
||||
|
||||
.personal-info-text {
|
||||
font-size: 22;
|
||||
text-align: left;
|
||||
}
|
||||
69
src/pages/Settings.jsx
Normal file
69
src/pages/Settings.jsx
Normal file
@ -0,0 +1,69 @@
|
||||
import './Settings.css';
|
||||
import { Form } from 'react-bootstrap';
|
||||
|
||||
const Settings = () => {
|
||||
return (
|
||||
<main className="container-fluid d-flex justify-content-center mt-5 mb-5">
|
||||
<div className="offcanvas offcanvas-start" data-bs-backdrop="static" tabIndex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
|
||||
<div className="offcanvas-header">
|
||||
<button type="button" className="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
|
||||
</div>
|
||||
<div className="offcanvas-body me-3 d-flex flex-column">
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-2">Личные данные</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-2">Безопасность</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-2">Интерфейс</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-2">Помощь</button>
|
||||
<button type="button" className="btn menu-btn btn-quit mt-auto me-3 ms-3 mb-3">Выйти из аккаунта</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settings-menu" className="d-flex flex-column box me-3 xl-only">
|
||||
<p className="menu-text mt-3 me-auto ms-auto mb-3 xl-only"> Настройки</p>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-2 xl-only">Личные данные</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-2 xl-only">Безопасность</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-2 xl-only">Интерфейс</button>
|
||||
<button type="button" className="btn menu-btn btn-main me-3 ms-3 mb-2 xl-only">Помощь</button>
|
||||
<button type="button" className="btn menu-btn btn-quit mt-auto me-3 ms-3 mb-3 xl-only">Выйти из аккаунта</button>
|
||||
</div>
|
||||
<div id="personal-info" className="box d-flex flex-column">
|
||||
<div>
|
||||
<p className="personal-info-text mt-3 me-auto ms-5 mb-3">Личные данные</p>
|
||||
</div>
|
||||
<div className="d-flex flex-row flex-wrap">
|
||||
<div className="ms-4 me-3">
|
||||
<Form.Group className="mb-2 justify-content-center">
|
||||
<Form.Label>Имя</Form.Label>
|
||||
<Form.Control type="text" id="firstname" className="form-control inputbox" value="Имя" disabled/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2 justify-content-center">
|
||||
<Form.Label>Фамилия</Form.Label>
|
||||
<Form.Control type="text" id="lastname" className="form-control inputbox" value="Фамилия" disabled/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2 justify-content-center">
|
||||
<Form.Label>Адрес доставки</Form.Label>
|
||||
<Form.Control type="text" id="adress" className="form-control inputbox" value="ул. ааа, 1" disabled/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2 justify-content-center">
|
||||
<Form.Label >Телефон</Form.Label>
|
||||
<Form.Control type="tel" id="telephone" className="form-control inputbox" value="+7 (999) 999 99-99" disabled/>
|
||||
</Form.Group>
|
||||
</div>
|
||||
<div className="ms-4 me-4">
|
||||
<Form.Group className="mb-2 justify-content-center">
|
||||
<Form.Label>Почта</Form.Label>
|
||||
<Form.Control type="email" id="email" className="form-control inputbox" value="Почта" disabled/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2 justify-content-center">
|
||||
<Form.Label>Выбранная карта</Form.Label>
|
||||
<Form.Control type="text" id="card" className="form-control inputbox" value="** 9999" disabled/>
|
||||
</Form.Group>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ms-4 mt-auto mb-3 d-flex align-items-end">
|
||||
<button type="button" className="btn menu-btn btn-main mt-4 me-5 ms-auto ps-5 pe-5">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@ -1,22 +1,13 @@
|
||||
import { resolve } from "path";
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { defineConfig } from "vite";
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
build: {
|
||||
sourcemap: true,
|
||||
emptyOutDir: true,
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, "index.html"),
|
||||
login: resolve(__dirname, "login.html"),
|
||||
register: resolve(__dirname, "register.html"),
|
||||
profile: resolve(__dirname, "profile.html"),
|
||||
catalog: resolve(__dirname, "catalog.html"),
|
||||
admin: resolve(__dirname, "admin.html"),
|
||||
product: resolve(__dirname, "product.html"),
|
||||
settings: resolve(__dirname, "settings.html"),
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [react()],
|
||||
build: {
|
||||
sourcemap: true,
|
||||
chunkSizeWarningLimit: 1024,
|
||||
emptyOutDir: true,
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user