Lab4
This commit is contained in:
parent
73fdc92ab3
commit
cdc58ce5cc
24
Lab4/web-site vite/.gitignore
vendored
Normal file
24
Lab4/web-site vite/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
53
Lab4/web-site vite/Old_HTMLs/Courses.css
Normal file
53
Lab4/web-site vite/Old_HTMLs/Courses.css
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
.modal-dialog-style{
|
||||||
|
height: fit-content !important;
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
.modalStyle{
|
||||||
|
background-color: #9b9b9b !important;
|
||||||
|
border: 7px solid #424242 !important
|
||||||
|
}
|
||||||
|
.purple{
|
||||||
|
background-color: #8c00e2 !important;
|
||||||
|
}
|
||||||
|
.dark-grey{
|
||||||
|
background-color: #424242 !important;
|
||||||
|
}
|
||||||
|
.light-grey{
|
||||||
|
background-color: #d9d9d9 !important;
|
||||||
|
}
|
||||||
|
.formStyle{
|
||||||
|
background-color: rgba(155,155,155,0.8) !important;
|
||||||
|
border: 7px solid #424242 !important
|
||||||
|
}
|
||||||
|
.formSizeStyle{
|
||||||
|
width: 70% !important;
|
||||||
|
min-width: 320px!important;
|
||||||
|
}
|
||||||
|
.accauntPanel{
|
||||||
|
height: 100px !important;
|
||||||
|
width: 290px !important;
|
||||||
|
}
|
||||||
|
.wfitcon{
|
||||||
|
width: fit-content !important;
|
||||||
|
}
|
||||||
|
.hfitcon{
|
||||||
|
height: fit-content !important;
|
||||||
|
}
|
||||||
|
.minH-500{
|
||||||
|
min-height: 500px !important;
|
||||||
|
}
|
||||||
|
.minW-160{
|
||||||
|
min-width: 160px !important;
|
||||||
|
}
|
||||||
|
.width-100{
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.height-200{
|
||||||
|
height: 200px !important;
|
||||||
|
}
|
||||||
|
.height-300{
|
||||||
|
height: 300px !important;
|
||||||
|
}
|
||||||
|
.height-500{
|
||||||
|
height: 500px !important;
|
||||||
|
}
|
||||||
129
Lab4/web-site vite/Old_HTMLs/Courses.html
Normal file
129
Lab4/web-site vite/Old_HTMLs/Courses.html
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Courses</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<link rel="stylesheet" href="../src/myStyle.css">
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" >
|
||||||
|
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css_mdb/mdb.min.css" />
|
||||||
|
<!-- Bootstrap JS -->
|
||||||
|
<script defer src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-image overflow-visible pageBackground">
|
||||||
|
<!--Шапка-->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light navbar-style">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand btn btn-outline-dark" href="index1.html" >
|
||||||
|
<img src="../img/lable.png" alt="Logo" height="60" class="align-text-top">
|
||||||
|
</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">
|
||||||
|
<img src="../img/togglerIcon.png" alt="Toggler" height="40">
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse " id="navbarSupportedContent">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="index1.html">Главная</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="Galery.html" >Галерея</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link active me-3 ms-3 fs-3 fw-bold" aria-current="page" href="./Courses.html">Курсы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="Contacts.html" >Контакты</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="Reviews.html" >Отзывы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="Admin.html" >Админ</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!--Шапка-->
|
||||||
|
<!--Курсы-->
|
||||||
|
<div class="container mx-auto my-5 formSizeStyle">
|
||||||
|
<div class="row row-cols-xl-3 row-cols-md-2 row-cols-1 pd-3 text-center text-secondary-emphasis">
|
||||||
|
<div class="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon" >
|
||||||
|
<img src="../img/CourseImage1.jpg" class="my-3 rounded-9" alt="image" height="150">
|
||||||
|
<div class="my-3 fs-3 fw-bold">
|
||||||
|
1 занятие <br>
|
||||||
|
2500 рублей
|
||||||
|
</div>
|
||||||
|
<button class="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
|
||||||
|
Записаться
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon">
|
||||||
|
<img src="../img/CourseImage2.jpg" class="my-3 rounded-9" alt="image" height="150">
|
||||||
|
<div class="my-3 fs-3 fw-bold">
|
||||||
|
5 занятий <br>
|
||||||
|
10000 рублей
|
||||||
|
</div>
|
||||||
|
<button class="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
|
||||||
|
Записаться
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon">
|
||||||
|
<img src="../img/CourseImage3.jpg" class="my-3 rounded-9" alt="image" height="150">
|
||||||
|
<div class="my-3 fs-3 fw-bold">
|
||||||
|
11 занятий <br>
|
||||||
|
20000 рублей
|
||||||
|
</div>
|
||||||
|
<button class="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
|
||||||
|
Записаться
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Модальное окно-->
|
||||||
|
<div class="modal fade" id="signUp" tabindex="-1" aria-labelledby="signUp" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content rounded-8 modalStyle">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title fw-bold fs-3 text-secondary-emphasis" id="signUpLabel">Запись на курс</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="recipient-name" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Ваше имя:</label>
|
||||||
|
<input type="text" class="form-control rounded-8 light-grey" id="recipient-name">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="signUpText" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Ваш номер телефона +7-...:</label>
|
||||||
|
<input type="tel" class="form-control rounded-8 light-grey" id="signUpText">
|
||||||
|
</div>
|
||||||
|
<p class="fw-bold fw-5 text-secondary-emphasis">С вами свяжется наш оператор для уточнения деталей</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn rounded-pill text-light fw-normal fs-6 purple">Ввод</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Подвал-->
|
||||||
|
<footer class="position-sticky top-100 footer-style">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm text-center text-sm-start text-light fw-bold fs-5">
|
||||||
|
Техническая поддержка <br>
|
||||||
|
8-800-555-3535 <br>
|
||||||
|
valitzhoska73@gmail.com
|
||||||
|
</div>
|
||||||
|
<div class="col-sm text-center text-sm-end text-light fw-bold fs-5">
|
||||||
|
Работаем без выходных с 8:00 до 21:30
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!--Подвал-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
36
Lab4/web-site vite/Old_HTMLs/Galery.css
Normal file
36
Lab4/web-site vite/Old_HTMLs/Galery.css
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
.modal-dialog-style{
|
||||||
|
height: fit-content !important;
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
.modalStyle{
|
||||||
|
background-color: #9b9b9b !important;
|
||||||
|
border: 7px solid #424242 !important
|
||||||
|
}
|
||||||
|
.PictureButton{
|
||||||
|
height: 200px !important;
|
||||||
|
width: 300px !important;
|
||||||
|
}
|
||||||
|
.wfitcon{
|
||||||
|
width: fit-content !important;
|
||||||
|
}
|
||||||
|
.hfitcon{
|
||||||
|
height: fit-content !important;
|
||||||
|
}
|
||||||
|
.minH-500{
|
||||||
|
min-height: 500px !important;
|
||||||
|
}
|
||||||
|
.minW-160{
|
||||||
|
min-width: 160px !important;
|
||||||
|
}
|
||||||
|
.width-100{
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.height-200{
|
||||||
|
height: 200px !important;
|
||||||
|
}
|
||||||
|
.height-300{
|
||||||
|
height: 300px !important;
|
||||||
|
}
|
||||||
|
.height-500{
|
||||||
|
height: 500px !important;
|
||||||
|
}
|
||||||
8
Lab4/web-site vite/Old_HTMLs/MainPage.css
Normal file
8
Lab4/web-site vite/Old_HTMLs/MainPage.css
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.mainPageInf{
|
||||||
|
width: 70% !important;
|
||||||
|
min-width: 320px !important;
|
||||||
|
height: fit-content !important;
|
||||||
|
background-color: rgba(66,66,66,0.8) !important;
|
||||||
|
padding:2% !important;
|
||||||
|
border-radius: 20px !important;
|
||||||
|
}
|
||||||
9
Lab4/web-site vite/counter.js
Normal file
9
Lab4/web-site vite/counter.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export function setupCounter(element) {
|
||||||
|
let counter = 0
|
||||||
|
const setCounter = (count) => {
|
||||||
|
counter = count
|
||||||
|
element.innerHTML = `count is ${counter}`
|
||||||
|
}
|
||||||
|
element.addEventListener('click', () => setCounter(counter + 1))
|
||||||
|
setCounter(0)
|
||||||
|
}
|
||||||
120
Lab4/web-site vite/data.json
Normal file
120
Lab4/web-site vite/data.json
Normal file
File diff suppressed because one or more lines are too long
3
Lab4/web-site vite/imgs.txt
Normal file
3
Lab4/web-site vite/imgs.txt
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
img/image 4.jpg
|
||||||
|
img/image 5.jpg
|
||||||
|
img/image 3.jpg
|
||||||
14
Lab4/web-site vite/index.html
Normal file
14
Lab4/web-site vite/index.html
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Extremal Driving</title>
|
||||||
|
<link rel="stylesheet" href="src/myStyle.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bg-image overflow-visible pageBackground">
|
||||||
|
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||||
|
<script type="module" src="./src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
Lab4/web-site vite/javascript.svg
Normal file
1
Lab4/web-site vite/javascript.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
|
||||||
|
After Width: | Height: | Size: 995 B |
31
Lab4/web-site vite/js/GaleryFilling.js
Normal file
31
Lab4/web-site vite/js/GaleryFilling.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
var imgContainer = document.getElementById('response-container')
|
||||||
|
function filling(line){
|
||||||
|
const Container =
|
||||||
|
`<button class="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
|
||||||
|
<img src="` + line + `" class="rounded-8 width-100" alt="image">
|
||||||
|
</button>`
|
||||||
|
imgContainer.innerHTML += Container
|
||||||
|
}
|
||||||
|
function Fill(){
|
||||||
|
fetch('imgs.txt')
|
||||||
|
.then(response => response.text())
|
||||||
|
.then(data => {
|
||||||
|
readFile(data)
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Ошибка:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function readFile(file) {
|
||||||
|
console.log(file);
|
||||||
|
const arr = file.split(/\r?\n/gm)
|
||||||
|
arr.map(line => filling(line))
|
||||||
|
console.log('done')
|
||||||
|
imgContainer.innerHTML += `
|
||||||
|
<button onclick="file.click()" type="button" class="col-xxl-4 col-lg-6 col-12 p-0 btn btn-dark mx-auto my-4 rounded-8 fw-bold fs-1 PictureButton">
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
<input id="file" type="file" hidden`
|
||||||
|
}
|
||||||
0
Lab4/web-site vite/js/ModalWindowImg.js
Normal file
0
Lab4/web-site vite/js/ModalWindowImg.js
Normal file
59
Lab4/web-site vite/js/lines-modal.js
Normal file
59
Lab4/web-site vite/js/lines-modal.js
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
// Модуль для работы с модальным окном
|
||||||
|
|
||||||
|
// импорт компонента 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.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.itemsType.value = item.itemsId;
|
||||||
|
cntrls.price.value = item.price;
|
||||||
|
cntrls.count.value = item.count;
|
||||||
|
// заполнение превью
|
||||||
|
// Если пользователь выбрал изображение, то оно загружается
|
||||||
|
// в тэг image с id image - preview
|
||||||
|
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
||||||
|
cntrls.imagePreview.src = item.image ? item.image : imagePlaceholder;
|
||||||
|
} else {
|
||||||
|
resetValues();
|
||||||
|
}
|
||||||
|
|
||||||
|
myModal.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция для скрытия модального окна
|
||||||
|
export function hideUpdateModal() {
|
||||||
|
resetValues();
|
||||||
|
|
||||||
|
// удаление класса was-validated для скрытия результатов валидации
|
||||||
|
cntrls.form.classList.remove("was-validated");
|
||||||
|
|
||||||
|
myModal.hide();
|
||||||
|
}
|
||||||
101
Lab4/web-site vite/js/lines-rest-api.js
Normal file
101
Lab4/web-site vite/js/lines-rest-api.js
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
// модуль для работы с REST API сервера
|
||||||
|
|
||||||
|
// адрес сервера
|
||||||
|
const serverUrl = "http://localhost:8081";
|
||||||
|
|
||||||
|
// функция возвращает объект нужной структуры для отправки на сервер
|
||||||
|
function createLineObject(item, price, count, image, basePrice) {
|
||||||
|
return {
|
||||||
|
itemsId: item,
|
||||||
|
price: parseFloat(price).toFixed(2),
|
||||||
|
count,
|
||||||
|
sum: parseFloat(price * count).toFixed(2),
|
||||||
|
benefit: parseFloat((basePrice-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, price, count, image, basePrice) {
|
||||||
|
const itemObject = createLineObject(item, price, count, image, basePrice);
|
||||||
|
|
||||||
|
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, price, count, image, basePrice) {
|
||||||
|
const itemObject = createLineObject(item, price, count, image, basePrice);
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
102
Lab4/web-site vite/js/lines-ui.js
Normal file
102
Lab4/web-site vite/js/lines-ui.js
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
// модуль для работы с элементами управления
|
||||||
|
|
||||||
|
// объект для удобного получения элементов
|
||||||
|
// при обращении к атрибуту объекта вызывается
|
||||||
|
// нужная функция для поиска элемента
|
||||||
|
export const cntrls = {
|
||||||
|
table: document.querySelector("#items-table tbody"),
|
||||||
|
form: document.getElementById("items-form"),
|
||||||
|
lineId: document.getElementById("items-line-id"),
|
||||||
|
itemsType: document.getElementById("item"),
|
||||||
|
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";
|
||||||
|
|
||||||
|
// функция создает тег option для select
|
||||||
|
// <option value="" selected>name</option>
|
||||||
|
export function createItemsOption(name, value = "", basePriceIn = "", isSelected = false) {
|
||||||
|
var basePrice = "";
|
||||||
|
if(basePriceIn != "")
|
||||||
|
basePrice = basePriceIn + " рублей";
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.value = value || "";
|
||||||
|
option.selected = isSelected;
|
||||||
|
option.text = name + " " + basePrice;
|
||||||
|
option.setAttribute('basePrice', basePriceIn);
|
||||||
|
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 img = document.createElement("img");
|
||||||
|
img.src = "./img/" + icon + ".png";
|
||||||
|
img.height = 20;
|
||||||
|
img.alt = "img";
|
||||||
|
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = "#";
|
||||||
|
a.appendChild(img);
|
||||||
|
a.onclick = (event) => {
|
||||||
|
// чтобы в URL не добавлялась решетка
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
callback();
|
||||||
|
};
|
||||||
|
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.setAttribute('class', 'align-middle text-center');
|
||||||
|
td.appendChild(a);
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создает колонку таблицы с текстом value
|
||||||
|
// <td>value</td>
|
||||||
|
function createTableColumn(value) {
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.setAttribute('class', 'align-middle text-center');
|
||||||
|
td.textContent = value;
|
||||||
|
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>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, editPageCallback, deleteCallback) {
|
||||||
|
const rowNumber = document.createElement("th");
|
||||||
|
rowNumber.scope = "row";
|
||||||
|
rowNumber.textContent = index + 1;
|
||||||
|
rowNumber.setAttribute('class', 'fw-bold align-middle text-center')
|
||||||
|
|
||||||
|
const row = document.createElement("tr");
|
||||||
|
row.id = `line-${item.id}`;
|
||||||
|
|
||||||
|
row.appendChild(rowNumber);
|
||||||
|
row.appendChild(createTableColumn(item.items.name ));
|
||||||
|
row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
|
||||||
|
row.appendChild(createTableColumn(item.count));
|
||||||
|
row.appendChild(createTableColumn(parseFloat(item.sum).toFixed(2)));
|
||||||
|
row.appendChild(createTableColumn(item.benefit));
|
||||||
|
|
||||||
|
// редактировать на странице page-edit
|
||||||
|
row.appendChild(createTableAnchor("pen-to-square", editPageCallback));
|
||||||
|
// удаление
|
||||||
|
row.appendChild(createTableAnchor("trash", deleteCallback));
|
||||||
|
return row;
|
||||||
|
}
|
||||||
233
Lab4/web-site vite/js/lines.js
Normal file
233
Lab4/web-site vite/js/lines.js
Normal file
@ -0,0 +1,233 @@
|
|||||||
|
// модуль с логикой
|
||||||
|
|
||||||
|
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, item.basePrice));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function drawLinesTable() {
|
||||||
|
console.info("Try to load data");
|
||||||
|
if (!cntrls.table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// вызов метода REST API для получения всех записей
|
||||||
|
const data = await getAllLines();
|
||||||
|
// очистка содержимого table
|
||||||
|
// удаляется все, что находится между тегами <table></table>
|
||||||
|
// но не атрибуты
|
||||||
|
cntrls.table.innerHTML = "";
|
||||||
|
// цикл по результату ответа от сервера
|
||||||
|
// используется лямбда-выражение
|
||||||
|
// (item, index) => {} аналогично function(item, index) {}
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
cntrls.table.appendChild(
|
||||||
|
createTableRow(
|
||||||
|
item,
|
||||||
|
index,
|
||||||
|
// функции передаются в качестве параметра
|
||||||
|
// это очень удобно, так как аргументы функций доступны только
|
||||||
|
// в данном месте кода и не передаются в сервисные модули
|
||||||
|
() => location.assign(`page-edit.html?id=${item.id}`),
|
||||||
|
() => removeLine(item.id),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addLine(item, price, count, image, basePrice) {
|
||||||
|
console.info("Try to add item");
|
||||||
|
// вызов метода REST API для добавления записи
|
||||||
|
const data = await createLine(item, price, count, image, basePrice);
|
||||||
|
console.info("Added");
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function editLine(id, item, price, count, image, basePrice) {
|
||||||
|
console.info("Try to update item");
|
||||||
|
// вызов метода REST API для обновления записи
|
||||||
|
const data = await updateLine(id, item, price, count, image, basePrice);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
|
||||||
|
// Если хотите делать через модальное окно, то удалите эту функцию
|
||||||
|
export async function linesPageForm() {
|
||||||
|
console.info("linesPageForm");
|
||||||
|
|
||||||
|
// загрузка и заполнение select со списком товаров
|
||||||
|
drawItemsSelect();
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
|
||||||
|
// func1 = (id) => {} аналогично function func1(id) {}
|
||||||
|
const goBack = () => location.assign("./Admin.html");
|
||||||
|
|
||||||
|
// Вызов функции обновления превью изображения при возникновении
|
||||||
|
// события onchange в тэге input с id image
|
||||||
|
cntrls.image.addEventListener("change", () => updateImagePreview());
|
||||||
|
cntrls.itemsType.addEventListener("change", () => cntrls.price.value = parseInt(cntrls.itemsType.options[cntrls.itemsType.selectedIndex].getAttribute('basePrice')))
|
||||||
|
|
||||||
|
// получение параметров GET-запроса из URL
|
||||||
|
// параметры перечислены после символа ? (?id=1&color=black&...)
|
||||||
|
const urlParams = new URLSearchParams(location.search);
|
||||||
|
|
||||||
|
// получение значения конкретного параметра (id)
|
||||||
|
// указан только при редактировании
|
||||||
|
const currentId = urlParams.get("id");
|
||||||
|
// если id задан
|
||||||
|
if (currentId) {
|
||||||
|
try {
|
||||||
|
// вызов метода REST API для получения записи по первичному ключу(id)
|
||||||
|
const line = await getLine(currentId);
|
||||||
|
// заполнение формы для редактирования
|
||||||
|
cntrls.itemsType.value = line.itemsId;
|
||||||
|
cntrls.price.value = line.price;
|
||||||
|
cntrls.count.value = line.count;
|
||||||
|
// заполнение превью
|
||||||
|
// Если пользователь выбрал изображение, то оно загружается
|
||||||
|
// в тэг image с id image - preview
|
||||||
|
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
||||||
|
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
|
||||||
|
} catch {
|
||||||
|
// в случае ошибки происходит возврат к page4
|
||||||
|
goBack();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// обработчик события отправки формы
|
||||||
|
// возникает при нажатии на кнопку (button) с типом submit
|
||||||
|
// кнопка должна находится внутри тега form
|
||||||
|
cntrls.form.addEventListener("submit", async (event) => {
|
||||||
|
console.info("Form onSubmit");
|
||||||
|
// отключение стандартного поведения формы при отправке
|
||||||
|
// при отправке страница обновляется и JS перестает работать
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
// если форма не прошла валидацию, то ничего делать не нужно
|
||||||
|
if (!cntrls.form.checkValidity()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let imageBase64 = "";
|
||||||
|
// Получение выбранного пользователем изображения в виде base64 строки
|
||||||
|
// Если пользователь ничего не выбрал, то не нужно сохранять в БД
|
||||||
|
// дефолтное изображение
|
||||||
|
if (cntrls.imagePreview.src !== imagePlaceholder) {
|
||||||
|
// Загрузка содержимого атрибута src тэга img с id image-preview
|
||||||
|
// Здесь выполняется HTTP запрос с типом GET
|
||||||
|
const result = await fetch(cntrls.imagePreview.src);
|
||||||
|
// Получение из HTTP-ответа бинарного содержимого
|
||||||
|
const blob = await result.blob();
|
||||||
|
// Получение base64 строки для файла
|
||||||
|
// Здесь выполняется Promise из функции readFile
|
||||||
|
// Promise позволяет писать линейный код для работы с асинхронными методами
|
||||||
|
// без использования обработчиков (callback) с помощью await
|
||||||
|
imageBase64 = await readFile(blob);
|
||||||
|
}
|
||||||
|
|
||||||
|
// если значение параметра запроса не задано,
|
||||||
|
// то необходимо выполнить добавление записи
|
||||||
|
// иначе обновление записи
|
||||||
|
if (!currentId) {
|
||||||
|
await addLine(
|
||||||
|
cntrls.itemsType.value,
|
||||||
|
cntrls.price.value,
|
||||||
|
cntrls.count.value,
|
||||||
|
imageBase64,
|
||||||
|
parseInt(cntrls.itemsType.options[cntrls.itemsType.selectedIndex].getAttribute('basePrice')),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
await editLine(
|
||||||
|
currentId,
|
||||||
|
cntrls.itemsType.value,
|
||||||
|
cntrls.price.value,
|
||||||
|
cntrls.count.value,
|
||||||
|
imageBase64,
|
||||||
|
parseInt(cntrls.itemsType.options[cntrls.itemsType.selectedIndex].getAttribute('basePrice')),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// возврат к странице page4
|
||||||
|
goBack();
|
||||||
|
});
|
||||||
|
}
|
||||||
25
Lab4/web-site vite/js/validation.js
Normal file
25
Lab4/web-site vite/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;
|
||||||
24
Lab4/web-site vite/main.js
Normal file
24
Lab4/web-site vite/main.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import './style.css'
|
||||||
|
import javascriptLogo from './javascript.svg'
|
||||||
|
import viteLogo from '/vite.svg'
|
||||||
|
import { setupCounter } from './counter.js'
|
||||||
|
|
||||||
|
document.querySelector('#app').innerHTML = `
|
||||||
|
<div>
|
||||||
|
<a href="https://vitejs.dev" target="_blank">
|
||||||
|
<img src="${viteLogo}" class="logo" alt="Vite logo" />
|
||||||
|
</a>
|
||||||
|
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
|
||||||
|
<img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
|
||||||
|
</a>
|
||||||
|
<h1>Hello Vite!</h1>
|
||||||
|
<div class="card">
|
||||||
|
<button id="counter" type="button"></button>
|
||||||
|
</div>
|
||||||
|
<p class="read-the-docs">
|
||||||
|
Click on the Vite logo to learn more
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
|
||||||
|
setupCounter(document.querySelector('#counter'))
|
||||||
6083
Lab4/web-site vite/package-lock.json
generated
Normal file
6083
Lab4/web-site vite/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
38
Lab4/web-site vite/package.json
Normal file
38
Lab4/web-site vite/package.json
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "web-site-vite",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"vite": "vite",
|
||||||
|
"serve": "http-server -p 3000 ./dist/",
|
||||||
|
"build": "vite build",
|
||||||
|
"rest": "json-server --watch data.json -p 8081",
|
||||||
|
"dev": "npm-run-all --parallel rest vite",
|
||||||
|
"prod": "npm-run-all build --parallel serve rest"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap": "5.2.1",
|
||||||
|
"@fortawesome/fontawesome-free": "6.4.2",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.18.0",
|
||||||
|
"react-bootstrap": "^2.9.1",
|
||||||
|
"react-bootstrap-icons": "^1.10.3",
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"vite": "4.4.9",
|
||||||
|
"eslint": "8.50.0",
|
||||||
|
"eslint-config-airbnb-base": "15.0.0",
|
||||||
|
"eslint-plugin-import": "2.28.1",
|
||||||
|
"http-server": "14.1.1",
|
||||||
|
"json-server": "0.17.4",
|
||||||
|
"npm-run-all": "4.1.5",
|
||||||
|
"@types/react": "^18.2.15",
|
||||||
|
"@types/react-dom": "^18.2.7",
|
||||||
|
"@vitejs/plugin-react": "^4.0.3",
|
||||||
|
"eslint-plugin-react": "^7.32.2",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
Lab4/web-site vite/public/vite.svg
Normal file
1
Lab4/web-site vite/public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
0
Lab4/web-site vite/src/App.css
Normal file
0
Lab4/web-site vite/src/App.css
Normal file
24
Lab4/web-site vite/src/App.jsx
Normal file
24
Lab4/web-site vite/src/App.jsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Container } from 'react-bootstrap';
|
||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import './App.css';
|
||||||
|
import Footer from './components/footer/footer.jsx';
|
||||||
|
import Navigation from './components/navigation/nav-bar.jsx';
|
||||||
|
|
||||||
|
const App = ({ routes }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Navigation routes={routes}></Navigation>
|
||||||
|
<Container className='p-2' as="main" fluid>
|
||||||
|
<Outlet />
|
||||||
|
</Container>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
App.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
Lab4/web-site vite/src/assets/placeHolder.png
Normal file
BIN
Lab4/web-site vite/src/assets/placeHolder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
4
Lab4/web-site vite/src/components/footer/footer.css
Normal file
4
Lab4/web-site vite/src/components/footer/footer.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.footer-style{
|
||||||
|
background-color: rgba(249,134,23,0.8) !important;
|
||||||
|
border-top: 7px solid #7c2d00 !important;
|
||||||
|
}
|
||||||
22
Lab4/web-site vite/src/components/footer/footer.jsx
Normal file
22
Lab4/web-site vite/src/components/footer/footer.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import './footer.css'
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<footer className="position-sticky top-100 footer-style">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-sm text-center text-sm-start text-light fw-bold fs-5">
|
||||||
|
Техническая поддержка <br/>
|
||||||
|
8-800-555-3535 <br/>
|
||||||
|
valitzhoska73@gmail.com
|
||||||
|
</div>
|
||||||
|
<div className="col-sm text-center text-sm-end text-light fw-bold fs-5">
|
||||||
|
Работаем без выходных с 8:00 до 21:30
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
4
Lab4/web-site vite/src/components/navigation/nav-bar.css
Normal file
4
Lab4/web-site vite/src/components/navigation/nav-bar.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.navbar-style{
|
||||||
|
background-color: rgba(249,134,23,0.8) !important;
|
||||||
|
border-bottom: 7px solid #7c2d00 !important;
|
||||||
|
}
|
||||||
42
Lab4/web-site vite/src/components/navigation/nav-bar.jsx
Normal file
42
Lab4/web-site vite/src/components/navigation/nav-bar.jsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Container, Nav, Navbar } from 'react-bootstrap';
|
||||||
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
|
import './nav-bar.css';
|
||||||
|
import label from '../../assets/lable.png';
|
||||||
|
|
||||||
|
const Navigation = ({ routes }) => {
|
||||||
|
const location = useLocation();
|
||||||
|
const indexPageLink = routes.filter((route) => route.index === false).shift();
|
||||||
|
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<Navbar expand='xl' bg='light' data-bs-theme='light' className='navbar-style'>
|
||||||
|
<Container fluid>
|
||||||
|
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
|
||||||
|
<button className="btn btn-outline-dark">
|
||||||
|
<img src={label} alt="Logo" height="60" className="align-text-top"></img>
|
||||||
|
</button>
|
||||||
|
</Navbar.Brand>
|
||||||
|
<Navbar.Toggle aria-controls='main-navbar' />
|
||||||
|
<Navbar.Collapse id='main-navbar'>
|
||||||
|
<Nav className='me-auto link' activeKey={location.pathname}>
|
||||||
|
{
|
||||||
|
pages.map((page) =>
|
||||||
|
<Nav.Link as={Link} className="fw-bold fs-3 mx-3" key={page.path} eventKey={page.path} to={page.path ?? '/'}>
|
||||||
|
{page.title}
|
||||||
|
</Nav.Link>)
|
||||||
|
}
|
||||||
|
</Nav>
|
||||||
|
</Navbar.Collapse>
|
||||||
|
</Container>
|
||||||
|
</Navbar >
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Navigation.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
67
Lab4/web-site vite/src/main.jsx
Normal file
67
Lab4/web-site vite/src/main.jsx
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import '../node_modules/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 './myStyle.css'
|
||||||
|
import ErrorPage from './pages/ErrorPage.jsx';
|
||||||
|
import MainPage from './pages/MainPage.jsx';
|
||||||
|
import Galery from './pages/Galery.jsx';
|
||||||
|
import Courses from './pages/Courses.jsx';
|
||||||
|
import Contacts from './pages/Contacts.jsx';
|
||||||
|
import Reviews from './pages/Reviews.jsx';
|
||||||
|
import Admin from './pages/Admin.jsx';
|
||||||
|
import PageEdit from './pages/page-edit.jsx';
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
index: true,
|
||||||
|
path: '/',
|
||||||
|
element: <MainPage />,
|
||||||
|
title: 'Главная',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Galery',
|
||||||
|
element: <Galery />,
|
||||||
|
title: 'Галерея',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Courses',
|
||||||
|
element: <Courses />,
|
||||||
|
title: 'Курсы',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Contacts',
|
||||||
|
element: <Contacts />,
|
||||||
|
title: 'Контакты',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Reviews',
|
||||||
|
element: <Reviews />,
|
||||||
|
title: 'Отзывы',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Admin',
|
||||||
|
element: <Admin />,
|
||||||
|
title: 'Админ',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/page-edit',
|
||||||
|
element: <PageEdit />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
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>,
|
||||||
|
);
|
||||||
80
Lab4/web-site vite/src/myStyle.css
Normal file
80
Lab4/web-site vite/src/myStyle.css
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
.pageBackground{
|
||||||
|
background-image: url('./assets/MainBackGround.jpg') !important;
|
||||||
|
background-attachment: fixed !important;
|
||||||
|
height: auto !important; min-height: 100vh !important;
|
||||||
|
}
|
||||||
|
.mainPageInf{
|
||||||
|
width: 70% !important;
|
||||||
|
min-width: 320px !important;
|
||||||
|
height: fit-content !important;
|
||||||
|
background-color: rgba(66,66,66,0.8) !important;
|
||||||
|
padding:2% !important;
|
||||||
|
border-radius: 20px !important;
|
||||||
|
}
|
||||||
|
.rounded-8{
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
.modal-dialog-style{
|
||||||
|
height: fit-content !important;
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
.modalStyle{
|
||||||
|
background-color: #9b9b9b !important;
|
||||||
|
border: 7px solid #424242 !important
|
||||||
|
}
|
||||||
|
.PictureButton{
|
||||||
|
height: 200px !important;
|
||||||
|
width: 300px !important;
|
||||||
|
}
|
||||||
|
.purple{
|
||||||
|
background-color: #8c00e2 !important;
|
||||||
|
}
|
||||||
|
.dark-grey{
|
||||||
|
background-color: #424242 !important;
|
||||||
|
}
|
||||||
|
.light-grey{
|
||||||
|
background-color: #d9d9d9 !important;
|
||||||
|
}
|
||||||
|
.no-color{
|
||||||
|
background-color: rgba(155,155,155,0) !important;
|
||||||
|
}
|
||||||
|
.formStyle{
|
||||||
|
background-color: rgba(155,155,155,0.8) !important;
|
||||||
|
border: 7px solid #424242 !important
|
||||||
|
}
|
||||||
|
.formSizeStyle{
|
||||||
|
width: 70% !important;
|
||||||
|
min-width: 320px!important;
|
||||||
|
}
|
||||||
|
.accauntPanel{
|
||||||
|
height: 100px !important;
|
||||||
|
width: 290px !important;
|
||||||
|
}
|
||||||
|
.wfitcon{
|
||||||
|
width: fit-content !important;
|
||||||
|
}
|
||||||
|
.hfitcon{
|
||||||
|
height: fit-content !important;
|
||||||
|
}
|
||||||
|
.minH-500{
|
||||||
|
min-height: 500px !important;
|
||||||
|
}
|
||||||
|
.minW-160{
|
||||||
|
min-width: 160px !important;
|
||||||
|
}
|
||||||
|
.width-100{
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.height-200{
|
||||||
|
height: 200px !important;
|
||||||
|
}
|
||||||
|
.height-300{
|
||||||
|
height: 300px !important;
|
||||||
|
}
|
||||||
|
.height-450{
|
||||||
|
height: 450px !important;
|
||||||
|
}
|
||||||
|
.height-500{
|
||||||
|
height: 500px !important;
|
||||||
|
}
|
||||||
|
.bg-image{position:relative;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:50%}
|
||||||
32
Lab4/web-site vite/src/pages/Admin.jsx
Normal file
32
Lab4/web-site vite/src/pages/Admin.jsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import {Button, Table} from "react-bootstrap";
|
||||||
|
import {Link} from "react-router-dom";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Admin = () => {
|
||||||
|
return(
|
||||||
|
<>
|
||||||
|
<main className="container p-2 formStyle formSizeStyle rounded-8 my-4">
|
||||||
|
<Button as={Link} to={'/page-edit'} variant="dark" className="btn purple text-light rounded-pill mb-3">Добавить курс</Button>
|
||||||
|
<div className="overflow-x-auto height-500 p-0">
|
||||||
|
<Table id="items-table" className="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col" className="fw-bold text-center no-color">№</th>
|
||||||
|
<th scope="col" className="w-25 fw-bold text-center no-color">Курс</th>
|
||||||
|
<th scope="col" className="w-25 fw-bold text-center no-color">Цена</th>
|
||||||
|
<th scope="col" className=" fw-bold minW-160 text-center no-color">Кол-во занятий</th>
|
||||||
|
<th scope="col" className="w-25 fw-bold text-center no-color">Сумма</th>
|
||||||
|
<th scope="col" className="w-25 fw-bold text-center no-color">Выгода</th>
|
||||||
|
<th scope="col" className="no-color"></th>
|
||||||
|
<th scope="col" className="no-color"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="fw-bold overflow-y-scroll"></tbody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Admin;
|
||||||
24
Lab4/web-site vite/src/pages/Contacts.jsx
Normal file
24
Lab4/web-site vite/src/pages/Contacts.jsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
const Contacts = () => {
|
||||||
|
return(
|
||||||
|
<div className="container mx-auto my-5 p-2 rounded-8 fw-bold formStyle formSizeStyle minH-500 hfitcon">
|
||||||
|
<div className="text-dark mx-auto fw-bold fs-3 mb-3 wfitcon">
|
||||||
|
Контактная информация
|
||||||
|
</div>
|
||||||
|
<div className="row row-cols-1 row-cols-xl-2">
|
||||||
|
<div className="col col-12 col-xl-7">
|
||||||
|
<script type="text/javascript" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Aa04c81f9d2fb99b1196ebaa14018b658af59476c09548a9d1ed257c055abf2c1&width=100%&height=400px&lang=ru_RU&scroll=true"></script>
|
||||||
|
</div>
|
||||||
|
<div className="col col-12 col-xl-5 text-dark fs-4 fw-bold text-center text-xl-start mt-4 mt-xl-0">
|
||||||
|
Группа в ВКонтакте <br/>
|
||||||
|
<a className="text-reset" href="https://vk.com/mackmaffin">@NaStolb73</a> <br/>
|
||||||
|
Телефон для связи <br/>
|
||||||
|
8-800-555-35-35 <br/>
|
||||||
|
Адрес электронной почты<br/>
|
||||||
|
valitzhoska73@gmail.com
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Contacts;
|
||||||
72
Lab4/web-site vite/src/pages/Courses.jsx
Normal file
72
Lab4/web-site vite/src/pages/Courses.jsx
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
import img1 from '../assets/CourseImage1.jpg'
|
||||||
|
import img2 from '../assets/CourseImage2.jpg'
|
||||||
|
import img3 from '../assets/CourseImage3.jpg'
|
||||||
|
|
||||||
|
const Courses = () => {
|
||||||
|
return(
|
||||||
|
<>
|
||||||
|
<div className="container mx-auto my-5 formSizeStyle">
|
||||||
|
<div className="row row-cols-xl-3 row-cols-md-2 row-cols-1 pd-3 text-center text-secondary-emphasis">
|
||||||
|
<div className="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon" >
|
||||||
|
<img src={img1} className="my-3 rounded-8" alt="image" height="150"></img>
|
||||||
|
<div className="my-3 fs-3 fw-bold">
|
||||||
|
1 занятие <br/>
|
||||||
|
2500 рублей
|
||||||
|
</div>
|
||||||
|
<button className="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
|
||||||
|
Записаться
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon">
|
||||||
|
<img src={img2} className="my-3 rounded-8" alt="image" height="150"/>
|
||||||
|
<div className="my-3 fs-3 fw-bold">
|
||||||
|
5 занятий <br/>
|
||||||
|
10000 рублей
|
||||||
|
</div>
|
||||||
|
<button className="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
|
||||||
|
Записаться
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon">
|
||||||
|
<img src={img3} className="my-3 rounded-8" alt="image" height="150"/>
|
||||||
|
<div className="my-3 fs-3 fw-bold">
|
||||||
|
11 занятий <br/>
|
||||||
|
20000 рублей
|
||||||
|
</div>
|
||||||
|
<button className="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
|
||||||
|
Записаться
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal fade" id="signUp" tabIndex="-1" aria-labelledby="signUp" aria-hidden="true">
|
||||||
|
<div className="modal-dialog modal-dialog-centered">
|
||||||
|
<div className="modal-content rounded-8 modalStyle">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h5 className="modal-title fw-bold fs-3 text-secondary-emphasis" id="signUpLabel">Запись на курс</h5>
|
||||||
|
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<form>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="recipient-name" className="col-form-label fw-bold fw-5 text-secondary-emphasis">Ваше имя:</label>
|
||||||
|
<input type="text" className="form-control rounded-8 light-grey" id="recipient-name"></input>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="signUpText" className="col-form-label fw-bold fw-5 text-secondary-emphasis">Ваш номер телефона +7-...:</label>
|
||||||
|
<input type="tel" className="form-control rounded-8 light-grey" id="signUpText"></input>
|
||||||
|
</div>
|
||||||
|
<p className="fw-bold fw-5 text-secondary-emphasis">С вами свяжется наш оператор для уточнения деталей</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div className="modal-footer">
|
||||||
|
<button type="button" className="btn rounded-pill text-light fw-normal fs-6 purple">Ввод</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Courses;
|
||||||
19
Lab4/web-site vite/src/pages/ErrorPage.jsx
Normal file
19
Lab4/web-site vite/src/pages/ErrorPage.jsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { Alert, Button, Container } from 'react-bootstrap';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
const ErrorPage = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container fluid className="p-2 row justify-content-center">
|
||||||
|
<Container className='col-md-6'>
|
||||||
|
<Alert variant="danger">
|
||||||
|
Страница не найдена
|
||||||
|
</Alert>
|
||||||
|
<Button className="w-25 mt-2 dark-grey" onClick={() => navigate(-1)}>Назад</Button>
|
||||||
|
</Container>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ErrorPage;
|
||||||
49
Lab4/web-site vite/src/pages/Galery.jsx
Normal file
49
Lab4/web-site vite/src/pages/Galery.jsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import img3 from '../assets/image 3.jpg';
|
||||||
|
import img4 from '../assets/image 4.jpg';
|
||||||
|
import img5 from '../assets/image 5.jpg';
|
||||||
|
|
||||||
|
const Galery = () => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="container mx-auto my-5 p-2 fw-bold rounded-8 formStyle formSizeStyle hfitcon">
|
||||||
|
<div className="row row-cols-1 row-cols-lg-2 row-cols-xxl-3 pb-3 text-center response-container" id="response-container">
|
||||||
|
<button className="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
|
||||||
|
<img src={img3} className="rounded-8 width-100" alt="image"/>
|
||||||
|
</button>
|
||||||
|
<button className="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
|
||||||
|
<img src={img4} className="rounded-8 width-100" alt="image"/>
|
||||||
|
</button>
|
||||||
|
<button className="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
|
||||||
|
<img src={img5} className="rounded-8 width-100" alt="image"/>
|
||||||
|
</button>
|
||||||
|
<button className="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
|
||||||
|
<img src={img3} className="rounded-8 width-100" alt="image"/>
|
||||||
|
</button>
|
||||||
|
<button className="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
|
||||||
|
<img src={img4} className="rounded-8 width-100" alt="image"/>
|
||||||
|
</button>
|
||||||
|
<button className="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
|
||||||
|
<img src={img5} className="rounded-8 width-100" alt="image"/>
|
||||||
|
</button>
|
||||||
|
<button type="button" className="col-xxl-4 col-lg-6 col-12 p-0 btn btn-dark mx-auto my-4 rounded-8 fw-bold fs-1 PictureButton">
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
<input id="file" type="file" hidden/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal fade " id="imageModal" tabIndex="-1" aria-labelledby="imageModalLabel">
|
||||||
|
<div className="modal-dialog modal-dialog-centered modal-fullscreen mx-auto modal-dialog-style">
|
||||||
|
<div className="modal-content rounded-8">
|
||||||
|
<div className="modal-body text-center rounded-8 modalStyle hfitcon width-100">
|
||||||
|
<button type="button" className="btn-close position-absolute top-0 end-0 me-1" data-bs-dismiss="modal" aria-label="Закрыть"></button>
|
||||||
|
<img id="image" className="mx-auto width-100" src="" alt="image"></img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Galery;
|
||||||
16
Lab4/web-site vite/src/pages/MainPage.jsx
Normal file
16
Lab4/web-site vite/src/pages/MainPage.jsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
|
||||||
|
const MainPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="text-light mx-auto mt-5 mb-5 fw-bold p-4 mainPageInf">
|
||||||
|
<h2>Рад приветствовать вас на моем сайте!</h2>
|
||||||
|
<h4 className="mt-4">Меня зовут Илья, я иструктор по экстремальному вождению с 15-летним стажем. В течение многих лет я участвовал и
|
||||||
|
побеждал во многих ралли заездах, таких как
|
||||||
|
"Париж-Дакар", "Симбирский тракт" и др.
|
||||||
|
</h4>
|
||||||
|
<h4 className="mt-4">Обучение экстримальному вождению добавит вам уверенности при езде не только по грунтовым дорогам, но и по асфальту,
|
||||||
|
а также в условиях снега, дождя и при других экстримальных ситуациях. Помните, что ваша безопасность на дороге зависит от ваших навыков вождения!</h4>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MainPage;
|
||||||
48
Lab4/web-site vite/src/pages/Reviews.jsx
Normal file
48
Lab4/web-site vite/src/pages/Reviews.jsx
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import AccountImg from '../assets/AccountIcon.png'
|
||||||
|
|
||||||
|
const Reviews = () => {
|
||||||
|
return(
|
||||||
|
<>
|
||||||
|
<div className="container mx-auto my-5 p-2 rounded-8 fw-bold formStyle formStyle height-450">
|
||||||
|
<div className="row row-cols-2 text-dark float-md-end mx-auto fs-5 fw-medium rounded-8 light-grey accauntPanel">
|
||||||
|
<div className="col col-8 text-center my-auto lh-1">
|
||||||
|
<a type="button" className="text-decoration-underline" data-bs-toggle="modal" data-bs-target="#LogIn">Войдите</a> в аккаунт или
|
||||||
|
<a type="button" className="text-decoration-underline" data-bs-toggle="modal" data-bs-target="#Register">зарегистрируйтесь</a>
|
||||||
|
</div>
|
||||||
|
<div className="col col-4 mx-auto my-auto">
|
||||||
|
<img src={AccountImg} alt="Icon" width="80"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-md-start text-center">
|
||||||
|
<button type="button" id="reviewBtn" className="btn rounded-pill btn-lg text-light my-2 mt-md-4 mb-md-5 ms-sm-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#review">
|
||||||
|
Написать отзыв
|
||||||
|
</button>
|
||||||
|
<div className="container overflow-y-auto height-300" >
|
||||||
|
<div className="text-start p-2 rounded-8 my-2 light-grey hfitcon wfitcon">
|
||||||
|
<h5 className="fw-normal text-dark">Михаил</h5>
|
||||||
|
<h6>Разбил аппарат, рекомендую</h6>
|
||||||
|
</div>
|
||||||
|
<div className="text-start p-2 rounded-8 my-2 light-grey hfitcon wfitcon">
|
||||||
|
<h5 className="fw-normal text-dark">Леша</h5>
|
||||||
|
<h6>Марк 2 лучше</h6>
|
||||||
|
</div>
|
||||||
|
<div className="text-start p-2 rounded-8 my-2 light-grey hfitcon wfitcon">
|
||||||
|
<h5 className="fw-normal text-dark">Женя</h5>
|
||||||
|
<h6>Приехал с сыном на выходных покататься, а заодно и новому научиться,
|
||||||
|
все таки дело полезное. Отлично провели время, инструктор объяснил что и как
|
||||||
|
теперь я действительно чувствую себя увереннее за рулем</h6>
|
||||||
|
</div>
|
||||||
|
<div className="text-start p-2 rounded-8 my-2 light-grey hfitcon wfitcon">
|
||||||
|
<h5 className="fw-normal text-dark">Женя</h5>
|
||||||
|
<h6>Приехал с сыном на выходных покататься, а заодно и новому научиться,
|
||||||
|
все таки дело полезное. Отлично провели время, инструктор объяснил что и как
|
||||||
|
теперь я действительно чувствую себя увереннее за рулем</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Reviews;
|
||||||
40
Lab4/web-site vite/src/pages/page-edit.jsx
Normal file
40
Lab4/web-site vite/src/pages/page-edit.jsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import placeHolder from '../assets/placeHolder.png';
|
||||||
|
import {Button} from "react-bootstrap";
|
||||||
|
import {Link} from "react-router-dom";
|
||||||
|
|
||||||
|
const pageEdit = () => {
|
||||||
|
return(
|
||||||
|
<>
|
||||||
|
<main className="container-fluid p-2 formStyle formSizeStyle rounded-8 my-4">
|
||||||
|
<div className="text-center">
|
||||||
|
<img id="image-preview" src={placeHolder} className="rounded-8 height-200"
|
||||||
|
alt="placeholder"/>
|
||||||
|
</div>
|
||||||
|
<form id="items-form" className="needs-validation" noValidate>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label htmlFor="item" className="form-label">Курсы</label>
|
||||||
|
<select id="item" className="form-select light-grey rounded-8" name="selected" required>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label" htmlFor="price">Цена за занятие</label>
|
||||||
|
<input id="price" name="price" className="form-control light-grey rounded-8" type="number" value="0.00" min="1000.00" step="10"
|
||||||
|
required/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label" htmlFor="count">Количество занятий</label>
|
||||||
|
<input id="count" name="count" className="form-control light-grey rounded-8" type="number" value="0" min="1" step="1" required/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-2">
|
||||||
|
<label className="form-label" htmlFor="image">Изображение</label>
|
||||||
|
<input id="image" type="file" name="image" className="form-control light-grey rounded-8" accept="image/*"/>
|
||||||
|
</div>
|
||||||
|
<Button as={Link} to={'/Admin'} variant={'dark'} className="btn dark-grey text-light rounded-pill me-2">Назад</Button>
|
||||||
|
<button type="submit" className="btn purple text-light rounded-pill">Сохранить</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default pageEdit;
|
||||||
97
Lab4/web-site vite/style.css
Normal file
97
Lab4/web-site vite/style.css
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 6em;
|
||||||
|
padding: 1.5em;
|
||||||
|
will-change: filter;
|
||||||
|
transition: filter 300ms;
|
||||||
|
}
|
||||||
|
.logo:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #646cffaa);
|
||||||
|
}
|
||||||
|
.logo.vanilla:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #f7df1eaa);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-the-docs {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
13
Lab4/web-site vite/vite.config.js
Normal file
13
Lab4/web-site vite/vite.config.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
/* eslint-disable import/no-extraneous-dependencies */
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
build: {
|
||||||
|
sourcemap: true,
|
||||||
|
chunkSizeWarningLimit: 1024,
|
||||||
|
emptyOutDir: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user