result
This commit is contained in:
Arkadiy Radaev
parent
494d122e1a
commit
a9301aa073
67
data.json
67
data.json
@ -1,19 +1,62 @@
|
||||
{
|
||||
"posts": [
|
||||
"items": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "json-server",
|
||||
"author": "typicode"
|
||||
}
|
||||
],
|
||||
"comments": [
|
||||
"name": "Vesta"
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"body": "some comment",
|
||||
"postId": 1
|
||||
"id": 2,
|
||||
"name": "Granta"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Largus"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Niva"
|
||||
}
|
||||
],
|
||||
"profile": {
|
||||
"name": "typicode"
|
||||
}
|
||||
"lines": [
|
||||
{
|
||||
"itemsId": "2",
|
||||
"color": "Синий",
|
||||
"price": "890000.00",
|
||||
"count": "2",
|
||||
"years": "2019",
|
||||
"sum": "1780000.00",
|
||||
"image": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAA1AFoDASIAAhEBAxEB/8QAHQAAAQQDAQEAAAAAAAAAAAAABgAFBwgCAwQJAf/EADoQAAEDAwMBBAcFBwUAAAAAAAECAwQABREGBxIhEzFBYQgUIjJRcYEVFiNikkJSVHKhscEXM0OR8P/EABgBAAMBAQAAAAAAAAAAAAAAAAABAgQD/8QAHxEAAwACAwADAQAAAAAAAAAAAAECAxESITETIkEy/9oADAMBAAIRAxEAPwCs0GMPVmhj9kf3rC4RilBOD1BrstF3tc23JkszmSylHtHkPZriOrbBNk+qC6MhziVZUQB/eufyMJxlt9PPmxbKQroG+0VEhqdCCPHlUaab351fqu6N2612CPLluDogA9O/qo5wPrWq037Wep127SCXY1ltK4uHVyME9iSDz7x1PTA86KzqLS21tjet9gS404Bh+5LaJekHxGe8J8qePdP0nIlKH1nUGp4GRf3rTbVgdWkoUsj4dUkimN3fOw2y9SDebigw2E/hLhtqTk+PLP1qJDusmdKllZcCACS4tBAA8hVc9ea9fuU99EVmQmLyIHJJ/FOe+t/CIW2YVzyP69F3JHpl7TQV8Vu3VXXhkY6/0rru/pcbcQWm1obubnNAUkDHJI8CelefGkYb2o76w06goZjntn1uDolKeo+vSpBVtXq653RV9YSr7OmDLQQv/jPd0+VYm2b5niXEiekrpKYwzJYVKRGWeXN8ZT8gQOn1ot0buhatXNyJEJKw3HXwX2nuqPl5daoTpbX8bbR+dp29NifCU5kMPdQjPfj4VLux+6tlj3+RpuG+fsy4EORVOKyppRPuE/Dp/Wue3+g3p70XLue4nr6IyQ20SwgIA+Iri+8sA9Tbmcnv/wDZqC9Z7p2vb2/NWm4w5DcxwgpSsFCVD95J8RXz/XbT474b+f5qaxy/RvLW/Bj2D9Bx7WliF71RqSPpfS03/bbPHtHD4oGfH61ajb70V/R+2wU29DtEW+3BIGZdwklYJH5DkVWP0grE9q/QW2ujNvNSJvDLkdyY3aGnFJdaWEq5LURjwT4moGuG3m5MTSirW1paUuUpwK+0GpquXT4Ar8anGt+nXekes9115o22JLq7ZZ0BCAntlx2yQkDAHd3YqHdSek7tuzKcaEGzynArASmKhSifyjHWvM21bSbp6iukm2lqew/GAU41LlEFIPjjl1FWy9HrYjV2j0R35gtCj7y25ywUcv3gT1zW2VD9MWR2n0GGp/S52/hInhrQq5642O1C7U20lPLOM48OlR7qndKRqaEl2PpuyWeG6jl2bUJtxfE93UpyDipQ15sDEVNfv91lNynH+K1tQ1ILJIzxzjr0qBt373aNr4LM2QEvvuAluCg+9joM1F1+Jjndf0gOvNjfv9umxrJFQJTowpTLQTkHvJIru0vsRc27ZGMy+zGi2hI4GWtIA8cDPcKE9Eeke9er8qBcrVGt7MkEMORcgtnHQHJo8+9aOz4O3PhxGCkZ5fKs72jspbFP0VZdNzW3XrUzczjKZDp7QLPnmjLTltZkymXHLbaYEcAKWtDaUOBP5cDvoFk6mhuM4S8+64O7mRiua4a0attmkOssgyUpCUKUo9Vk4HcaXYOdrTJ93g0ZpvWlksDarknt4aC5FnPgFSk9Mtkn6AVEB2lgqJP3iSnPXGB0oN271XqKTar3aNSyXXwl1t5ITj2Qok4FPnq8D4yv1CpeOq72VNRK00Me5c9jb7Uliv2k7s9puc2wphSlgr5Eg5GR4YNNR3p3ChNMyg9Zbg0s/huuo6q8veo51dpSBrC1CFPRyQOqHM4UFf4qKHNjp9qlNP2+5JmMML5txpIwgH4dauVxDkLWG6e5+pNZp1VIYai3EMJjn1X2W1NjGBjPkKwla73N1OptLwC1IBwEu8en/dPrmoNZxhwl2GI+37vJrGAPLpQ7J3OTbbmpqZYHWJB/aQ4U9Pliq9ANtuUbj2+fbpD1wMOCHcS2HZ6A0pvPfwJznFCm6l4d3H3XRDLyH2YxwAo+yqmW8bm2a4wpDZiyUyVpKUKU4fZPgaCtDaiZtGr4lwnZktoXyOV48va8qaSF2HW5OlI9kNmusJpDKxI9XWWUFIKgM5x9e+tbl0fccVzklKievIY6/Ote7G5DF9l29m2BKlMLL7jiTyRzIxxA+HdUezr7cbpkvOA+SU4FKkEOiWYVtck4Uu4MN57lF4H/ADQyvVj7Gr49pfWymG1IAU5jIV50ApbdUOri048UqrNMQOOBxSlqV35UeuaF0Xpssk7dLai9TXWJDQHFCSpJACiM1s+3438Q3+oVXNC3kgp7dzP81bMv/wAQ5+qqT0c3Bb5+OkcRk4riU0OzWMnv+NKlUkmpxjLYwtQFDWotI229FAmsdq4enaA8Vf0pUqbAjPVm2dvtiytl5wDwSQOlAz9pZZCh73zpUqk7SakxEI7hivvZJxSpUFCS0n4Uke8aVKgTMyMmsuNKlQI//9k=",
|
||||
"id": 8
|
||||
},
|
||||
{
|
||||
"itemsId": "3",
|
||||
"color": "Красный",
|
||||
"price": "1000000.00",
|
||||
"count": "4",
|
||||
"years": "2009",
|
||||
"sum": "4000000.00",
|
||||
"image": "data:image/jpeg;base64,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",
|
||||
"id": 9
|
||||
},
|
||||
{
|
||||
"itemsId": "1",
|
||||
"color": "Черный",
|
||||
"price": "1120000.00",
|
||||
"count": "2",
|
||||
"years": "2020",
|
||||
"sum": "2240000.00",
|
||||
"image": "data:image/jpeg;base64,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",
|
||||
"id": 10
|
||||
},
|
||||
{
|
||||
"itemsId": "4",
|
||||
"color": "Белый",
|
||||
"price": "1260000.00",
|
||||
"count": "2",
|
||||
"years": "2019",
|
||||
"sum": "2520000.00",
|
||||
"image": "data:image/jpeg;base64,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",
|
||||
"id": 11
|
||||
}
|
||||
]
|
||||
}
|
||||
181
index.html
181
index.html
@ -1,91 +1,108 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/style.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Page 1</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wraper">
|
||||
<header>
|
||||
<img src="/img/Lada_vesta_sport.jpg" alt="" class="header__image">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary bg-danger-subtle" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="/img/Logo_lada.png" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav fs-3">
|
||||
<li class="nav-item"><a class="nav-link" href="index2.html">Модельный ряд</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index3.html#32">Дилеры</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html">Покупателям</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html#42">Владельцам</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index5.html">Информация о компании</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="main">
|
||||
<h2 id="11" class="title text-uppercase text-center text-decoration-underline">Модельный ряд</h2>
|
||||
<div class="car bg-secondary mx-5 rounded-4 p-5 d-flex">
|
||||
<div class="left d-flex flex-column">
|
||||
<img src="/img/Vesta2.jpg" alt="" class="car__img">
|
||||
<h3 class="subtitle text-white">LADA Vesta 2023</h3>
|
||||
</div>
|
||||
<div class="right d-flex flex-column">
|
||||
<div class="car__txt">
|
||||
<ul class="car__text fs-4 text-white text-uppercase ps-0 lh-base">
|
||||
<li class="car__li">Подушка безопасности води теля и переднего пассажира</li>
|
||||
<li class="car__li">Электропривод и обогрев наружных зеркал</li>
|
||||
<li class="car__li">Аудиоподготовка</li>
|
||||
<li class="car__li">Кондиционер и охлаждающий вещевой ящик</li>
|
||||
</ul>
|
||||
<p class="text text-white fs-4 text-uppercase lh-base">
|
||||
Стильный, вместительный, комфортный универсал. Современное сочетание практичности и элегантности.</p>
|
||||
</div>
|
||||
<button type="button" class="text-uppercase text-black" data-bs-toggle="modal" data-bs-target="#exampleModal">подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="d-flex justify-content-between my-auto align-items-center p-3">
|
||||
<div class="foot__text text-uppercase text-white">Подписывайтесь на наши соц. сети</div>
|
||||
<div class="foot__link">
|
||||
<ul class="foot__list d-flex justify-content-between list-unstyled mb-0">
|
||||
<li><a href="https://vk.com/"><img class="foot__li" src="/img/vk.png" alt=""></a></li>
|
||||
<li><a href="https://web.telegram.org/k/"><img class="foot__li" src="/img/tg.png" alt=""></a></li>
|
||||
<li><a href="https://www.viber.com/ru/"><img class="foot__li" src="/img/vb.png" alt=""></a></li>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/style.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Page 1</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wraper">
|
||||
<header>
|
||||
<img src="/img/Lada_vesta_sport.jpg" alt="" class="header__image">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary bg-danger-subtle" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="/img/Logo_lada.png" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
|
||||
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav fs-4">
|
||||
<li class="nav-item"><a class="nav-link" href="index2.html">Модельный ряд</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index3.html#32">Дилеры</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html">Покупателям</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html#42">Владельцам</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index5.html">Информация о компании</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="table.html">Адмнистратор</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">Подробная информация о машине</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Лада Веста 2023 - это обновленная модель популярного автомобиля, сочетающая в себе современный дизайн, комфорт и надежность. Внешне Лада Веста 2023 имеет стильные и динамичные линии, которые придают ей современный и привлекательный вид.</p>
|
||||
<p>Салон Лады Весты 2023 обновлен и предлагает комфортабельное пространство для пассажиров. Интерьер выполнен с использованием качественных материалов, что создает приятную атмосферу в салоне. Кроме того, салон обладает хорошей шумоизоляцией, что позволяет пассажирам наслаждаться тихой и спокойной поездкой.</p>
|
||||
<p>Лада Веста 2023 оснащена современными технологиями, которые делают ее удобной и безопасной для водителя и пассажиров. Автомобиль оснащен системой информационно-развлекательного комплекса с сенсорным дисплеем, поддержкой Bluetooth и навигацией. Кроме того, Лада Веста 2023 предлагает различные опции связи, такие как поддержка Apple CarPlay и Android Auto.</p>
|
||||
<p>Что касается характеристик двигателя, Лада Веста 2023 предлагает различные варианты двигателей, включая бензиновые и дизельные варианты. Эти двигатели обладают достаточной мощностью для обеспечения комфортной и плавной поездки.</p>
|
||||
<p>В целом, Лада Веста 2023 - это надежный и современный автомобиль, который предлагает комфорт, безопасность и стильный дизайн. Она является отличным выбором для тех, кто ищет недорогой автомобиль с хорошими характеристиками.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="main">
|
||||
<h2 id="11" class="title text-uppercase text-center text-decoration-underline">Модельный ряд</h2>
|
||||
<div class="car bg-secondary mx-5 rounded-4 p-5 d-flex">
|
||||
<div class="left d-flex flex-column">
|
||||
<img src="/img/Vesta2.jpg" alt="" class="car__img">
|
||||
<h3 class="subtitle text-white">LADA Vesta 2023</h3>
|
||||
</div>
|
||||
<div class="right d-flex flex-column">
|
||||
<div class="car__txt">
|
||||
<ul class="car__text fs-4 text-white text-uppercase ps-0 lh-base">
|
||||
<li class="car__li">Подушка безопасности води теля и переднего пассажира</li>
|
||||
<li class="car__li">Электропривод и обогрев наружных зеркал</li>
|
||||
<li class="car__li">Аудиоподготовка</li>
|
||||
<li class="car__li">Кондиционер и охлаждающий вещевой ящик</li>
|
||||
</ul>
|
||||
<p class="text text-white fs-4 text-uppercase lh-base">
|
||||
Стильный, вместительный, комфортный универсал. Современное сочетание практичности и элегантности.</p>
|
||||
</div>
|
||||
<button type="button" class="text-uppercase text-black" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModal">подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<footer>
|
||||
<div class="d-flex justify-content-between my-auto align-items-center p-3">
|
||||
<div class="foot__text text-uppercase text-white">Подписывайтесь на наши соц. сети</div>
|
||||
<div class="foot__link">
|
||||
<ul class="foot__list d-flex justify-content-between list-unstyled mb-0">
|
||||
<li><a href="https://vk.com/"><img class="foot__li" src="/img/vk.png" alt=""></a></li>
|
||||
<li><a href="https://web.telegram.org/k/"><img class="foot__li" src="/img/tg.png" alt=""></a></li>
|
||||
<li><a href="https://www.viber.com/ru/"><img class="foot__li" src="/img/vb.png" alt=""></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">Подробная информация о машине</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Лада Веста 2023 - это обновленная модель популярного автомобиля, сочетающая в себе современный дизайн,
|
||||
комфорт и надежность. Внешне Лада Веста 2023 имеет стильные и динамичные линии, которые придают ей
|
||||
современный и привлекательный вид.</p>
|
||||
<p>Салон Лады Весты 2023 обновлен и предлагает комфортабельное пространство для пассажиров. Интерьер выполнен
|
||||
с использованием качественных материалов, что создает приятную атмосферу в салоне. Кроме того, салон
|
||||
обладает хорошей шумоизоляцией, что позволяет пассажирам наслаждаться тихой и спокойной поездкой.</p>
|
||||
<p>Лада Веста 2023 оснащена современными технологиями, которые делают ее удобной и безопасной для водителя и
|
||||
пассажиров. Автомобиль оснащен системой информационно-развлекательного комплекса с сенсорным дисплеем,
|
||||
поддержкой Bluetooth и навигацией. Кроме того, Лада Веста 2023 предлагает различные опции связи, такие как
|
||||
поддержка Apple CarPlay и Android Auto.</p>
|
||||
<p>Что касается характеристик двигателя, Лада Веста 2023 предлагает различные варианты двигателей, включая
|
||||
бензиновые и дизельные варианты. Эти двигатели обладают достаточной мощностью для обеспечения комфортной и
|
||||
плавной поездки.</p>
|
||||
<p>В целом, Лада Веста 2023 - это надежный и современный автомобиль, который предлагает комфорт, безопасность
|
||||
и стильный дизайн. Она является отличным выбором для тех, кто ищет недорогой автомобиль с хорошими
|
||||
характеристиками.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -17,13 +17,14 @@
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav fs-3">
|
||||
<ul class="navbar-nav fs-4">
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#11">Модельный ряд</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index3.html#32">Дилеры</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html">Покупателям</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html#42">Владельцам</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index5.html">Информация о компании</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="table.html">Адмнистратор</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,13 +17,14 @@
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav fs-3">
|
||||
<ul class="navbar-nav fs-4">
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#11">Модельный ряд</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index3.html#32">Дилеры</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html">Покупателям</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html#42">Владельцам</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index5.html">Информация о компании</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="table.html">Адмнистратор</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,13 +17,14 @@
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav fs-3">
|
||||
<ul class="navbar-nav fs-4">
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#11">Модельный ряд</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index3.html#32">Дилеры</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html">Покупателям</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html#42">Владельцам</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index5.html">Информация о компании</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="table.html">Адмнистратор</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,13 +17,14 @@
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav fs-3">
|
||||
<ul class="navbar-nav fs-4">
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#11">Модельный ряд</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index3.html#32">Дилеры</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html">Покупателям</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html#42">Владельцам</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index5.html">Информация о компании</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="table.html">Адмнистратор</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
46
js/banner.js
Normal file
46
js/banner.js
Normal file
@ -0,0 +1,46 @@
|
||||
// модуль для смены изображения в баннере по таймеру
|
||||
|
||||
import "../css/banner.css";
|
||||
|
||||
// указывается блок, в котором будет баннер
|
||||
// блок должен содержать изображения
|
||||
function myBanner(root) {
|
||||
console.info("Loaded");
|
||||
|
||||
// получение всех изображений внутри баннера
|
||||
const banners = document.querySelectorAll(`${root} img`);
|
||||
|
||||
// всем изображениям устанавливается класс banner-hide
|
||||
// если были другие классы, то они будут удалены
|
||||
for (let i = 0; i < banners.length; i += 1) {
|
||||
banners[i].setAttribute("class", "banner-hide");
|
||||
}
|
||||
|
||||
let old = banners.length - 1;
|
||||
let current = 0;
|
||||
|
||||
// функция меняет изображения в цикле
|
||||
// изображение с классом banner-show будет показано
|
||||
// изображение с классом banner-hide будет скрыто
|
||||
// функция запускает таймер, который через 5 секунд
|
||||
// запускает функцию, снова создается таймер и т. д.
|
||||
function loop() {
|
||||
banners[current].setAttribute("class", "banner-show");
|
||||
banners[old].setAttribute("class", "banner-hide");
|
||||
|
||||
console.info("Banner changed");
|
||||
|
||||
old = current;
|
||||
current += 1;
|
||||
|
||||
if (current === banners.length) {
|
||||
current = 0;
|
||||
}
|
||||
|
||||
setTimeout(loop, 5000);
|
||||
}
|
||||
|
||||
loop();
|
||||
}
|
||||
|
||||
export default myBanner;
|
||||
63
js/lines-modal.js
Normal file
63
js/lines-modal.js
Normal file
@ -0,0 +1,63 @@
|
||||
// Модуль для работы с модальным окном
|
||||
|
||||
// импорт компонента Modal из bootstrap
|
||||
import { Modal } from "bootstrap";
|
||||
import { cntrls, imagePlaceholder } from "./lines-ui";
|
||||
|
||||
// поиск модального окна на странице
|
||||
const modal = document.getElementById("items-update");
|
||||
// если он найден, то создается экземпляр компонента Modal
|
||||
// для программного управления модальным окном
|
||||
const myModal = modal ? new Modal(modal, {}) : null;
|
||||
|
||||
// поиск тега с заголовком модального кона для его смены
|
||||
const modalTitle = document.getElementById("items-update-title");
|
||||
|
||||
// обнуление значений модального окна, т. к.
|
||||
// используется одно окно для всех операций
|
||||
function resetValues() {
|
||||
cntrls.lineId.value = "";
|
||||
cntrls.itemsType.value = "";
|
||||
cntrls.color.value = "";
|
||||
cntrls.price.value = parseFloat(1000000).toFixed(2);
|
||||
cntrls.count.value = 1;
|
||||
cntrls.years.value = 2013;
|
||||
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.itemsType.value = item.itemsId;
|
||||
cntrls.color.value = item.color,
|
||||
cntrls.price.value = item.price;
|
||||
cntrls.count.value = item.count;
|
||||
cntrls.years.value = item.years;
|
||||
// заполнение превью
|
||||
// Если пользователь выбрал изображение, то оно загружается
|
||||
// в тэг image с id image - preview
|
||||
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
||||
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();
|
||||
}
|
||||
102
js/lines-rest-api.js
Normal file
102
js/lines-rest-api.js
Normal file
@ -0,0 +1,102 @@
|
||||
// модуль для работы с REST API сервера
|
||||
|
||||
// адрес сервера
|
||||
const serverUrl = "http://localhost:8081";
|
||||
|
||||
// функция возвращает объект нужной структуры для отправки на сервер
|
||||
function createLineObject(item, color, price, count, years, image) {
|
||||
return {
|
||||
itemsId: item,
|
||||
color,
|
||||
price: parseFloat(price).toFixed(2),
|
||||
count,
|
||||
years,
|
||||
sum: parseFloat(price * count).toFixed(2),
|
||||
image,
|
||||
};
|
||||
}
|
||||
|
||||
// обращение к серверу для получения всех типов товара (get)
|
||||
export async function getAllItemTypes() {
|
||||
const response = await fetch(`${serverUrl}/items`);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для получения всех записей (get)
|
||||
export async function getAllLines() {
|
||||
const response = await fetch(`${serverUrl}/lines?_expand=items`);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для получения записи по первичному ключу (id) (get)
|
||||
// id передается в качестве части пути URL get-запроса
|
||||
export async function getLine(id) {
|
||||
const response = await fetch(`${serverUrl}/lines/${id}?_expand=items`);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// обращение к серверу для создания записи (post)
|
||||
// объект отправляется в теле запроса (body)
|
||||
export async function createLine(item, color, price, count, years, image) {
|
||||
const itemObject = createLineObject(item, color, price, count, years, 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, item, color, price, count, years, image) {
|
||||
const itemObject = createLineObject(item, color, price, count, years, 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();
|
||||
}
|
||||
107
js/lines-ui.js
Normal file
107
js/lines-ui.js
Normal file
@ -0,0 +1,107 @@
|
||||
// модуль для работы с элементами управления
|
||||
|
||||
// объект для удобного получения элементов
|
||||
// при обращении к атрибуту объекта вызывается
|
||||
// нужная функция для поиска элемента
|
||||
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"),
|
||||
itemsType: document.getElementById("item"),
|
||||
color: document.getElementById("color"),
|
||||
price: document.getElementById("price"),
|
||||
count: document.getElementById("count"),
|
||||
years: document.getElementById("years"),
|
||||
image: document.getElementById("image"),
|
||||
imagePreview: document.getElementById("image-preview"),
|
||||
};
|
||||
|
||||
// Дефолтное превью
|
||||
export const imagePlaceholder = "https://via.placeholder.com/200";
|
||||
|
||||
// функция создает тег option для select
|
||||
// <option value="" selected>name</option>
|
||||
export function createItemsOption(name, value = "", isSelected = false) {
|
||||
const option = document.createElement("option");
|
||||
option.value = value || "";
|
||||
option.selected = isSelected;
|
||||
option.text = name;
|
||||
return option;
|
||||
}
|
||||
|
||||
// функция создает ссылку (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;
|
||||
}
|
||||
|
||||
// функция создает колонку таблицы с текстом value
|
||||
// <td>value</td>
|
||||
function createTableColumn(value) {
|
||||
const td = document.createElement("td");
|
||||
td.innerHTML = value;
|
||||
return td;
|
||||
}
|
||||
function createImageColumn(src) {
|
||||
const img = document.createElement("img");
|
||||
img.src = src;
|
||||
|
||||
const td = document.createElement("td");
|
||||
td.appendChild(img);
|
||||
|
||||
return td;
|
||||
}
|
||||
// функция создает строку таблицы
|
||||
// <tr>
|
||||
// <th scope="row">index + 1</th>
|
||||
// <td>item.items.name</td>
|
||||
// <td>parseFloat(item.price).toFixed(2))</td>
|
||||
// <td>item.count</td>
|
||||
// <td>item.years</td>
|
||||
// <td>parseFloat(item.sum).toFixed(2))</td>
|
||||
// <td><a href="#" onclick="editCallback()"><i class="fa-solid fa-pencil"></i></a></td>
|
||||
// <td><a href="#" onclick="editPageCallback()"><i class="fa-solid fa-pen-to-square"></i></a></td>
|
||||
// <td><a href="#" onclick="deleteCallback()"><i class="fa-solid fa-trash"></i></a></td>
|
||||
// </tr>
|
||||
export function createTableRow(item, index, editCallback, editPageCallback, deleteCallback) {
|
||||
const rowNumber = document.createElement("th");
|
||||
rowNumber.scope = "row";
|
||||
rowNumber.textContent = index + 1;
|
||||
|
||||
const row = document.createElement("tr");
|
||||
row.id = `line-${item.id}`;
|
||||
|
||||
row.appendChild(rowNumber);
|
||||
row.appendChild(createTableColumn(item.items.name));
|
||||
row.appendChild(createTableColumn(item.color));
|
||||
row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
|
||||
row.appendChild(createTableColumn(item.count));
|
||||
row.appendChild(createTableColumn(item.years));
|
||||
row.appendChild(createTableColumn(parseFloat(item.sum).toFixed(2)));
|
||||
row.appendChild(createImageColumn(item.image));
|
||||
|
||||
// редактировать
|
||||
row.appendChild(createTableAnchor("fa-pencil", editCallback));
|
||||
// удаление
|
||||
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
|
||||
return row;
|
||||
}
|
||||
318
js/lines.js
Normal file
318
js/lines.js
Normal file
@ -0,0 +1,318 @@
|
||||
// модуль с логикой
|
||||
|
||||
import { hideUpdateModal, showUpdateModal } from "./lines-modal";
|
||||
import {
|
||||
createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
|
||||
} from "./lines-rest-api";
|
||||
import {
|
||||
cntrls, createItemsOption, createTableRow, imagePlaceholder,
|
||||
} from "./lines-ui";
|
||||
|
||||
async function drawItemsSelect() {
|
||||
// вызов метода REST API для получения списка типов товаров
|
||||
const data = await getAllItemTypes();
|
||||
// очистка содержимого select
|
||||
// удаляется все, что находится между тегами <select></select>
|
||||
// но не атрибуты
|
||||
cntrls.itemsType.innerHTML = "";
|
||||
// пустое значение
|
||||
cntrls.itemsType.appendChild(createItemsOption("Выберите значение", "", true));
|
||||
|
||||
|
||||
// цикл по результату ответа от сервера
|
||||
// используется лямбда-выражение
|
||||
// (item) => {} аналогично function(item) {}
|
||||
data.forEach((item) => {
|
||||
cntrls.itemsType.appendChild(createItemsOption(item.name, item.id));
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
async function drawLinesTable() {
|
||||
console.info("Try to load data");
|
||||
if (!cntrls.table) {
|
||||
return;
|
||||
}
|
||||
// вызов метода REST API для получения всех записей
|
||||
const data = await getAllLines();
|
||||
// очистка содержимого table
|
||||
// удаляется все, что находится между тегами <table></table>
|
||||
// но не атрибуты
|
||||
cntrls.table.innerHTML = "";
|
||||
// цикл по результату ответа от сервера
|
||||
// используется лямбда-выражение
|
||||
// (item, index) => {} аналогично function(item, index) {}
|
||||
data.forEach((item, index) => {
|
||||
cntrls.table.appendChild(
|
||||
createTableRow(
|
||||
item,
|
||||
index,
|
||||
// функции передаются в качестве параметра
|
||||
// это очень удобно, так как аргументы функций доступны только
|
||||
// в данном месте кода и не передаются в сервисные модули
|
||||
() => showUpdateModal(item),
|
||||
() => location.assign(`page-edit.html?id=${item.id}`),
|
||||
() => removeLine(item.id),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
async function addLine(item, color, price, count, years, image) {
|
||||
console.info("Try to add item");
|
||||
// вызов метода REST API для добавления записи
|
||||
const data = await createLine(item, color, price, count, years, image);
|
||||
console.info("Added");
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
}
|
||||
|
||||
async function editLine(id, item, color, price, count, years, image) {
|
||||
console.info("Try to update item");
|
||||
// вызов метода REST API для обновления записи
|
||||
const data = await updateLine(id, item, color, price, count, years, image);
|
||||
console.info("Updated");
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
}
|
||||
|
||||
async function removeLine(id) {
|
||||
if (!confirm("Do you really want to remove this item?")) {
|
||||
console.info("Canceled");
|
||||
return;
|
||||
}
|
||||
console.info("Try to remove item");
|
||||
// вызов метода REST API для удаления записи
|
||||
const data = await deleteLine(id);
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
}
|
||||
|
||||
// функция для получения содержимого файла в виде base64 строки
|
||||
// https://ru.wikipedia.org/wiki/Base64
|
||||
async function readFile(file) {
|
||||
const reader = new FileReader();
|
||||
|
||||
// создание Promise-объекта для использования функции
|
||||
// с помощью await (асинхронно) без коллбэков (callback)
|
||||
// https://learn.javascript.ru/promise
|
||||
return new Promise((resolve, reject) => {
|
||||
// 2. "Возвращаем" содержимое когда файл прочитан
|
||||
// через вызов resolve
|
||||
// Если не использовать Promise, то всю работу по взаимодействию
|
||||
// с REST API пришлось бы делать в обработчике (callback) функции
|
||||
// onloadend
|
||||
reader.onloadend = () => {
|
||||
const fileContent = reader.result;
|
||||
// Здесь могла бы быть работа с REST API
|
||||
// Чтение заканчивает выполняться здесь
|
||||
resolve(fileContent);
|
||||
};
|
||||
// 3. Возвращаем ошибку
|
||||
reader.onerror = () => {
|
||||
// Или здесь в случае ошибки
|
||||
reject(new Error("oops, something went wrong with the file reader."));
|
||||
};
|
||||
// Шаг 1. Сначала читаем файл
|
||||
// Чтение начинает выполняться здесь
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
// функция для обновления блока с превью выбранного изображения
|
||||
async function updateImagePreview() {
|
||||
// получение выбранного файла
|
||||
// возможен выбор нескольких файлов, поэтому необходимо получить только первый
|
||||
const file = cntrls.image.files[0];
|
||||
// чтение содержимого файла в виде base64 строки
|
||||
const fileContent = await readFile(file);
|
||||
console.info("base64 ", fileContent);
|
||||
// обновление атрибута src для тега img с id image-preview
|
||||
cntrls.imagePreview.src = fileContent;
|
||||
}
|
||||
|
||||
// Функция для обработки создания и редактирования элементов таблицы через модальное окно
|
||||
// Если хотите делать через страницу, то удалите эту функцию
|
||||
export function linesForm() {
|
||||
console.info("linesForm");
|
||||
|
||||
// загрузка и заполнение select со списком товаров
|
||||
drawItemsSelect();
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
|
||||
// Вызов функции обновления превью изображения при возникновении
|
||||
// события oncahnge в тэге input с id image
|
||||
cntrls.image.addEventListener("change", () => updateImagePreview());
|
||||
|
||||
// обработчик события нажатия на кнопку для показа модального окна
|
||||
cntrls.button.addEventListener("click", () => showUpdateModal(null));
|
||||
|
||||
// обработчик события отправки формы
|
||||
// возникает при нажатии на кнопку (button) с типом submit
|
||||
// кнопка должна находится внутри тега form
|
||||
cntrls.form.addEventListener("submit", async (event) => {
|
||||
console.info("Form onSubmit");
|
||||
// отключение стандартного поведения формы при отправке
|
||||
// при отправке страница обновляется и JS перестает работать
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
// если форма не прошла валидацию, то ничего делать не нужно
|
||||
if (!cntrls.form.checkValidity()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let imageBase64 = "";
|
||||
// Получение выбранного пользователем изображения в виде base64 строки
|
||||
// Если пользователь ничего не выбрал, то не нужно сохранять в БД
|
||||
// дефолтное изображение
|
||||
if (cntrls.imagePreview.src !== imagePlaceholder) {
|
||||
// Загрузка содержимого атрибута src тэга img с id image-preview
|
||||
// Здесь выполняется HTTP запрос с типом GET
|
||||
const result = await fetch(cntrls.imagePreview.src);
|
||||
// Получение из HTTP-ответа бинарного содержимого
|
||||
const blob = await result.blob();
|
||||
// Получение base64 строки для файла
|
||||
// Здесь выполняется Promise из функции readFile
|
||||
// Promise позволяет писать линейный код для работы с асинхронными методами
|
||||
// без использования обработчиков (callback) с помощью await
|
||||
imageBase64 = await readFile(blob);
|
||||
}
|
||||
|
||||
// получение id строки для редактирования
|
||||
// это значение содержится в скрытом input
|
||||
const currentId = cntrls.lineId.value;
|
||||
// если значение id не задано,
|
||||
// то необходимо выполнить добавление записи
|
||||
// иначе обновление записи
|
||||
if (!currentId) {
|
||||
await addLine(
|
||||
cntrls.itemsType.value,
|
||||
cntrls.color.value,
|
||||
cntrls.price.value,
|
||||
cntrls.count.value,
|
||||
cntrls.years.value,
|
||||
imageBase64,
|
||||
);
|
||||
} else {
|
||||
await editLine(
|
||||
currentId,
|
||||
cntrls.itemsType.value,
|
||||
cntrls.color.value,
|
||||
cntrls.price.value,
|
||||
cntrls.count.value,
|
||||
cntrls.years.value,
|
||||
imageBase64,
|
||||
);
|
||||
}
|
||||
|
||||
// после выполнения добавления/обновления модальное окно скрывается
|
||||
hideUpdateModal();
|
||||
});
|
||||
}
|
||||
|
||||
// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
|
||||
// Если хотите делать через модальное окно, то удалите эту функцию
|
||||
export async function linesPageForm() {
|
||||
console.info("linesPageForm");
|
||||
|
||||
// загрузка и заполнение select со списком товаров
|
||||
drawItemsSelect();
|
||||
|
||||
// func1 = (id) => {} аналогично function func1(id) {}
|
||||
const goBack = () => location.assign("table.html");
|
||||
|
||||
// Вызов функции обновления превью изображения при возникновении
|
||||
// события onchange в тэге input с id image
|
||||
cntrls.image.addEventListener("change", () => updateImagePreview());
|
||||
|
||||
// получение параметров GET-запроса из URL
|
||||
// параметры перечислены после символа ? (?id=1&color=black&...)
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
|
||||
// получение значения конкретного параметра (id)
|
||||
// указан только при редактировании
|
||||
const currentId = urlParams.get("id");
|
||||
// если id задан
|
||||
if (currentId) {
|
||||
try {
|
||||
// вызов метода REST API для получения записи по первичному ключу(id)
|
||||
const line = await getLine(currentId);
|
||||
// заполнение формы для редактирования
|
||||
cntrls.itemsType.value = line.itemsId;
|
||||
cntrls.color.value = line.color;
|
||||
cntrls.price.value = line.price;
|
||||
cntrls.count.value = line.count;
|
||||
cntrls.years.value = line.years;
|
||||
// заполнение превью
|
||||
// Если пользователь выбрал изображение, то оно загружается
|
||||
// в тэг image с id image - preview
|
||||
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
||||
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
|
||||
} catch {
|
||||
// в случае ошибки происходит возврат к page4
|
||||
goBack();
|
||||
}
|
||||
}
|
||||
|
||||
// обработчик события отправки формы
|
||||
// возникает при нажатии на кнопку (button) с типом submit
|
||||
// кнопка должна находится внутри тега form
|
||||
cntrls.form.addEventListener("submit", async (event) => {
|
||||
console.info("Form onSubmit");
|
||||
// отключение стандартного поведения формы при отправке
|
||||
// при отправке страница обновляется и JS перестает работать
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
// если форма не прошла валидацию, то ничего делать не нужно
|
||||
if (!cntrls.form.checkValidity()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let imageBase64 = "";
|
||||
// Получение выбранного пользователем изображения в виде base64 строки
|
||||
// Если пользователь ничего не выбрал, то не нужно сохранять в БД
|
||||
// дефолтное изображение
|
||||
if (cntrls.imagePreview.src !== imagePlaceholder) {
|
||||
// Загрузка содержимого атрибута src тэга img с id image-preview
|
||||
// Здесь выполняется HTTP запрос с типом GET
|
||||
const result = await fetch(cntrls.imagePreview.src);
|
||||
// Получение из HTTP-ответа бинарного содержимого
|
||||
const blob = await result.blob();
|
||||
// Получение base64 строки для файла
|
||||
// Здесь выполняется Promise из функции readFile
|
||||
// Promise позволяет писать линейный код для работы с асинхронными методами
|
||||
// без использования обработчиков (callback) с помощью await
|
||||
imageBase64 = await readFile(blob);
|
||||
}
|
||||
|
||||
// если значение параметра запроса не задано,
|
||||
// то необходимо выполнить добавление записи
|
||||
// иначе обновление записи
|
||||
if (!currentId) {
|
||||
await addLine(
|
||||
cntrls.itemsType.value,
|
||||
cntrls.color.value,
|
||||
cntrls.price.value,
|
||||
cntrls.count.value,
|
||||
cntrls.years.value,
|
||||
imageBase64,
|
||||
);
|
||||
} else {
|
||||
await editLine(
|
||||
currentId,
|
||||
cntrls.itemsType.value,
|
||||
cntrls.color.value,
|
||||
cntrls.price.value,
|
||||
cntrls.count.value,
|
||||
cntrls.years.value,
|
||||
imageBase64,
|
||||
);
|
||||
}
|
||||
// возврат к странице page4
|
||||
goBack();
|
||||
});
|
||||
}
|
||||
25
js/validation.js
Normal file
25
js/validation.js
Normal file
@ -0,0 +1,25 @@
|
||||
// модуль используется для валидации форма на странице
|
||||
|
||||
function validation() {
|
||||
// поиск всех форма с классом .needs-validation
|
||||
const forms = document.querySelectorAll("form.needs-validation");
|
||||
|
||||
for (let i = 0; i < forms.length; i += 1) {
|
||||
const form = forms[i];
|
||||
// для каждой формы добавляется обработчик события отправки
|
||||
form.addEventListener("submit", (event) => {
|
||||
// если форма не прошла валидацию
|
||||
// то выключить стандартное действие
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
// предотвращает распространение preventDefault
|
||||
// на другие объекты
|
||||
event.stopPropagation();
|
||||
}
|
||||
// добавляет к форме класс was-validated
|
||||
form.classList.add("was-validated");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default validation;
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "lab2",
|
||||
"name": "lab3",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
|
||||
BIN
public/img/Granta_min.jpg
Normal file
BIN
public/img/Granta_min.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
public/img/Largus_min.jpeg
Normal file
BIN
public/img/Largus_min.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
BIN
public/img/min/Granta_min.jpg
Normal file
BIN
public/img/min/Granta_min.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
public/img/min/Largus_min.jpg
Normal file
BIN
public/img/min/Largus_min.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
public/img/min/Niva1.jpg
Normal file
BIN
public/img/min/Niva1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
public/img/min/Vesta2.jpg
Normal file
BIN
public/img/min/Vesta2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
139
table.html
Normal file
139
table.html
Normal file
@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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="/styles/style.css">
|
||||
<title>Table</title>
|
||||
</head>
|
||||
|
||||
<body class="h-100 d-flex flex-column">
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary bg-danger-subtle" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="/img/Logo_lada.png" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav fs-4">
|
||||
<li class="nav-item"><a class="nav-link" href="index2.html">Модельный ряд</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index3.html#32">Дилеры</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html">Покупателям</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html#42">Владельцам</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index5.html">Информация о компании</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="table.html">Адмнистратор</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="container-fluid p-2">
|
||||
<div class="btn-group mb-2" role="group">
|
||||
<button id="items-add" class="btn btn-info bg-warning">Добавить авто</button>
|
||||
</div>
|
||||
<div>
|
||||
<table id="items-table" class="table table-primary">
|
||||
<thead>
|
||||
<th scope="col">№ заказа</th>
|
||||
<th scope="col" class=" ">Модель</th>
|
||||
<th scope="col" class="">Цвет</th>
|
||||
<th scope="col" class="">Цена</th>
|
||||
<th scope="col" class=" ">Количество</th>
|
||||
<th scope="col" class=" ">Год выпуска</th>
|
||||
<th scope="col" class=" ">Сумма</th>
|
||||
<th scope="col" class=" ">Изображение</th>
|
||||
<th scope="col">Ред.</th>
|
||||
<th scope="col">Удалить</th>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="footer mt-auto">
|
||||
<div class="d-flex justify-content-between my-auto align-items-center p-3">
|
||||
<div class="foot__text text-uppercase text-white">Подписывайтесь на наши соц. сети</div>
|
||||
<div class="foot__link">
|
||||
<ul class="foot__list d-flex justify-content-between list-unstyled mb-0">
|
||||
<li><a href="https://vk.com/"><img class="foot__li" src="/img/vk.png" alt=""></a></li>
|
||||
<li><a href="https://web.telegram.org/k/"><img class="foot__li" src="/img/tg.png" alt=""></a></li>
|
||||
<li><a href="https://www.viber.com/ru/"><img class="foot__li" src="/img/vb.png" alt=""></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
|
||||
<div class="modal-dialog modal-dialog-scrollable">
|
||||
<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">
|
||||
<form id="items-form" class="needs-validation" novalidate>
|
||||
<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="item" class="form-label">Модель</label>
|
||||
<select id="item" class="form-select" name="selected" required>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="color" class="form-label">Цвет</label>
|
||||
<select id="color" class="form-select" name="selected" required>
|
||||
<option value="Красный">Красный</option>
|
||||
<option value="Черный">Черный</option>
|
||||
<option value="Синий">Синий</option>
|
||||
<option value="Белый">Белый</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="price">Цена</label>
|
||||
<input id="price" name="price" class="form-control" type="number" value="100000.00"
|
||||
min="100000.00" step="100000.0" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="count">Количество</label>
|
||||
<input id="count" name="count" class="form-control" type="number" value="1" min="1" step="1"
|
||||
required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="years">Год выпуска</label>
|
||||
<input id="years" name="years" class="form-control" type="number" value="2013" min="1"
|
||||
step="1" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="image">Изображение</label>
|
||||
<input id="image" type="file" name="image" class="form-control" accept="image/*">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||||
<button type="submit" class="btn btn-primary bg-warning text-black">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module">
|
||||
import validation from "/js/validation";
|
||||
import { linesForm } from "/js/lines";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
validation();
|
||||
linesForm();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user