Artyom_Yashin/Internt_Programmirovanie_PIbd23_Yashin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lab3

Browse Source
This commit is contained in:
Artyom_Yashin 2023-11-07 14:03:57 +04:00
parent 517f052e4b
commit 7881e2c55b
36 changed files with 6370 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
Lab2/vite-project/package.json
View File

@ -1,14 +1,17 @@
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"name": "web-site",
"version": "1 .0.0",
"main": "index.html",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
"start": "http-server -p 3000 ./",
"test": "echo \"Error: no test specified\" && exit 1 "
},
"dependencies": {
"bootstrap": "5.2.1",
"@fortawesome/fontawesome-free": "6.2.0"
},
"devDependencies": {
"vite": "^4.4.5"
"http-server": "14.1 .1 "
}
}

24
Lab3/.gitignore vendored Normal file
View 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?

95
Lab3/Admin.html Normal file
View File

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- My css -->
<link rel="stylesheet" href="./myStyle.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" />
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<!-- 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-xl navbar-light navbar-style">
<div class="container-fluid">
<a class="navbar-brand btn btn-outline-dark" href="./index.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" aria-current="page" href="./index.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 me-3 ms-3 fs-4 fw-bold" 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 active me-3 ms-3 fs-3 fw-bold" href="./Admin.html" >Админ</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container p-2 formStyle formSizeStyle rounded-8 my-4">
<a class="btn purple text-light rounded-pill" href="./page-edit.html">Добавить курс</a>
<div class="overflow-x-auto height-500 p-0">
<table id="items-table" class="table">
<thead>
<th scope="col" class="fw-bold text-center">№</th>
<th scope="col" class="w-25 fw-bold text-center">Курс</th>
<th scope="col" class="w-25 fw-bold text-center">Цена</th>
<th scope="col" class=" fw-bold minW-160 text-center ">Кол-во занятий</th>
<th scope="col" class="w-25 fw-bold text-center">Сумма</th>
<th scope="col" class="w-25 fw-bold text-center">Выгода</th>
<th scope="col"></th>
<th scope="col"></th>
</thead>
<tbody class="fw-bold overflow-y-scroll"></tbody>
</table>
</div>
</main>
<!--Подвал-->
<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>
<!--Подвал-->
<script type="module">
import validation from "./js/validation";
import { linesPageForm } from "./js/lines";
document.addEventListener('DOMContentLoaded', () => {
validation();
linesPageForm();
});
</script>
</body>
</html>

88
Lab3/Contacts.html Normal file
View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Contacts</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="./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="./index.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="./index.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 me-3 ms-3 fs-4 fw-bold" href="./Courses.html">Курсы</a>
</li>
<li class="nav-item " >
<a class="nav-link active me-3 ms-3 fs-3 fw-bold" aria-current="page" 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 p-2 rounded-8 fw-bold formStyle formSizeStyle minH-500 hfitcon">
<div class="text-dark mx-auto fw-bold fs-3 mb-3 wfitcon">
Контактная информация
</div>
<div class="row row-cols-1 row-cols-xl-2">
<div class="col col-12 col-xl-7">
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Aa04c81f9d2fb99b1196ebaa14018b658af59476c09548a9d1ed257c055abf2c1&amp;width=100%&amp;height=400px&amp;lang=ru_RU&amp;scroll=true"></script>
</div>
<div class="col col-12 col-xl-5 text-dark fs-4 fw-bold text-center text-xl-start mt-4 mt-xl-0">
Группа в ВКонтакте <br>
<a class="text-reset" href="https://vk.com/mackmaffin">@NaStolb73</a> <br>
Телефон для связи <br>
8-800-555-35-35 <br>
Адрес электронной почты<br>
valitzhoska73@gmail.com
</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>

129
Lab3/Courses.html Normal file
View 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="./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="./index.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="./index.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>

121
Lab3/Galery.html Normal file
View File

@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Galery</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="./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="./index.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="./index.html">Главная</a>
</li>
<li class="nav-item ">
<a class="nav-link active me-3 ms-3 fs-3 fw-bold" aria-current="page" href="./Galery.html" >Галерея</a>
</li>
<li class="nav-item " >
<a class="nav-link me-3 ms-3 fs-4 fw-bold" 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 p-2 fw-bold rounded-8 formStyle formSizeStyle hfitcon">
<div class="row row-cols-1 row-cols-lg-2 row-cols-xxl-3 pb-3 text-center response-container" id="response-container">
</div>
</div>
<!--Галерея-->
<!-- Модальное окно -->
<div class="modal fade " id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel">
<div class="modal-dialog modal-dialog-centered modal-fullscreen mx-auto modal-dialog-style">
<div class="modal-content rounded-8">
<div class="modal-body text-center rounded-8 modalStyle hfitcon width-100">
<button type="button" class="btn-close position-absolute top-0 end-0 me-1" data-bs-dismiss="modal" aria-label="Закрыть"></button>
<img id="image" class="mx-auto width-100" src="" alt="image">
</div>
</div>
</div>
</div>
<script>
var exampleModal = document.getElementById('imageModal')
exampleModal.addEventListener('show.bs.modal', function (event){
var button = event.relatedTarget
var source = button.getElementsByTagName('img').item(0).getAttribute('src')
document.getElementById('image').setAttribute("src", source.toString())
});
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
}
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>`
}
</script>
<!--Подвал-->
<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>

216
Lab3/Reviews.html Normal file
View File

@ -0,0 +1,216 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Reviews</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="./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.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="./index.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" aria-current="page" href="./index.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 me-3 ms-3 fs-4 fw-bold" 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 active fs-3 fw-bold" aria-current="page" 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 p-2 rounded-8 fw-bold formStyle formStyle height-500">
<div class="row row-cols-2 text-dark float-md-end mx-auto fs-5 fw-medium rounded-7 light-grey accauntPanel">
<div class="col col-8 text-center my-auto lh-1">
<a type="button" class="text-decoration-underline" data-bs-toggle="modal" data-bs-target="#LogIn">Войдите</a> в аккаунт или
<a type="button" class="text-decoration-underline" data-bs-toggle="modal" data-bs-target="#Register">зарегистрируйтесь</a>
</div>
<div class="col col-4 mx-auto my-auto">
<img src="img/AccountIcon.png" alt="Icon" width="80">
</div>
</div>
<div class="text-md-start text-center">
<button type="button" id="reviewBtn" class="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>
<button id="reset" class="btn rounded-pill">Сброс</button>
<div class="container overflow-y-auto height-300" >
<div class="text-start p-2 rounded-7 my-2 light-grey hfitcon wfitcon">
<h5 class="fw-normal text-dark">Михаил</h5>
<h6>Разбил аппарат, рекомендую</h6>
</div>
<div class="text-start p-2 rounded-7 my-2 light-grey hfitcon wfitcon">
<h5 class="fw-normal text-dark">Леша</h5>
<h6>Марк 2 лучше</h6>
</div>
<div class="text-start p-2 rounded-7 my-2 light-grey hfitcon wfitcon">
<h5 class="fw-normal text-dark">Женя</h5>
<h6>Приехал с сыном на выходных покататься, а заодно и новому научиться,
все таки дело полезное. Отлично провели время, инструктор объяснил что и как
теперь я действительно чувствую себя увереннее за рулем</h6>
</div>
<div class="text-start p-2 rounded-7 my-2 light-grey hfitcon wfitcon">
<h5 class="fw-normal text-dark">Женя</h5>
<h6>Приехал с сыном на выходных покататься, а заодно и новому научиться,
все таки дело полезное. Отлично провели время, инструктор объяснил что и как
теперь я действительно чувствую себя увереннее за рулем</h6>
</div>
</div>
</div>
</div>
<!--Отзывы-->
<!--Модальное окно отзыв-->
<div class="modal fade" id="review" tabindex="-1" aria-labelledby="exampleModalLabel" 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="reviewLabel">Новый отзыв</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<div class="h3 text-danger" id="logged"></div>
<form id="reviews-body">
<div class="mb-3">
<label for="reviewText" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Текст отзыва:</label>
<textarea class="form-control rounded-8 light-grey" rows="5" id="reviewText"></textarea>
</div>
</form>
</div>
<div class="modal-footer" id="reviews-footer">
<button class="btn rounded-pill btn-sm text-light fw-normal fs-6 purple" data-bs-toggle="modal">
Отправить
</button>
</div>
</div>
</div>
</div>
<!--Модальное окно вход-->
<div class="modal fade" id="LogIn" tabindex="-1" aria-labelledby="exampleModalLabel" 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="LogInLabel">Вход</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="nameLogIn" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Имя:</label>
<input type="text" class="form-control rounded-8 light-grey" id="nameLogIn">
</div>
<div class="mb-3">
<label for="passwordLogIn" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Пароль:</label>
<input type="password" class="form-control rounded-8 light-grey" id="passwordLogIn">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn rounded-pill btn-sm text-light fw-normal fs-6 purple" id="signIn" data-bs-toggle="modal">
Вход
</button>
</div>
</div>
</div>
</div>
<!--Модальное окно регистрация-->
<div class="modal fade" id="Register" tabindex="-1" aria-labelledby="RegisterLabel" 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="exampleModalLabel">Регистрация</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="nameRegister" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Имя:</label>
<input type="text" class="form-control rounded-8 light-grey" id="nameRegister">
</div>
<div class="mb-3">
<label for="mailRegister" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Адрес электронной почты:</label>
<input type="text" class="form-control rounded-8 light-grey" id="mailRegister">
</div>
<div class="mb-3">
<label for="passwordRegister" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Пароль:</label>
<input type="password" class="form-control rounded-8 light-grey" id="passwordRegister">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn rounded-pill btn-sm text-light fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
Регистрация
</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>
<!--Подвал-->
<script>
var logged = false
var buttonReset = document.getElementById('reset')
buttonReset.addEventListener('click', function (){
logged = false;
});
var buttonSignIn = document.getElementById('signIn')
buttonSignIn.addEventListener('click', function () {
logged = true
});
var buttonReview = document.getElementById('reviewBtn')
buttonReview.addEventListener('click', function (){
if(!logged) {
document.getElementById('logged').innerText = "Войдите в аккаунт"
document.getElementById('reviews-footer').style.display = 'none'
document.getElementById('reviews-body').style.display = 'none'
} else {
document.getElementById('logged').innerText = ""
document.getElementById('reviews-footer').style.display = 'block'
document.getElementById('reviews-body').style.display = 'block'
}
})
</script>
</body>
</html>

9
Lab3/counter.js Normal file
View 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
Lab3/data.json Normal file
View File

File diff suppressed because one or more lines are too long

BIN
Lab3/img/AccountIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
Lab3/img/CourseImage1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
Lab3/img/CourseImage2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
Lab3/img/CourseImage3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
Lab3/img/MainBackGround.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
Lab3/img/image 3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
Lab3/img/image 4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

BIN
Lab3/img/image 5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
Lab3/img/lable.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
Lab3/img/pen-to-square.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
Lab3/img/togglerIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 863 B

BIN
Lab3/img/trash.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 577 B

3
Lab3/imgs.txt Normal file
View File

@ -0,0 +1,3 @@
img/image 4.jpg
img/image 5.jpg
img/image 3.jpg

77
Lab3/index.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- My css -->
<link rel="stylesheet" href="./myStyle.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="./index.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 active me-3 ms-3 fs-3 fw-bold" aria-current="page" href="./index.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 me-3 ms-3 fs-4 fw-bold" 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="text-light mx-auto mt-5 mb-5 fw-bold p-4 mainPageInf">
<h2>Рад приветствовать вас на моем сайте!</h2>
<h4 class="mt-4">Меня зовут Илья, я иструктор по экстремальному вождению с 15-летним стажем. В течение многих лет я участвовал и
побеждал во многих ралли заездах, таких как
<br> "Париж-Дакар", "Симбирский тракт" и др.</h4>
<h4 class="mt-4">Обучение экстримальному вождению добавит вам уверенности при езде не только по грунтовым дорогам, но и по асфальту,
а также в условиях снега, дождя и при других экстримальных ситуациях. Помните, что ваша безопасность на дороге зависит от ваших навыков вождения!</h4>
</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>

1
Lab3/javascript.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 995 B

59
Lab3/js/lines-modal.js Normal file
View 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
Lab3/js/lines-rest-api.js Normal file
View 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
Lab3/js/lines-ui.js Normal file
View 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
Lab3/js/lines.js Normal file
View 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
Lab3/js/validation.js Normal file
View 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
Lab3/main.js Normal file
View 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'))

78
Lab3/myStyle.css Normal file
View File

@ -0,0 +1,78 @@
.pageBackground{
background-image: url('img/MainBackGround.jpg') !important;
background-attachment: fixed !important;
height: auto !important; min-height: 100vh !important;
}
.navbar-style{
background-color: rgba(249,134,23,0.8) !important;
border-bottom: 7px solid #7c2d00 !important;
}
.footer-style{
background-color: rgba(249,134,23,0.8) !important;
border-top: 7px solid #7c2d00 !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;
}
.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;
}
.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;
}

4627
Lab3/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

26
Lab3/package.json Normal file
View File

@ -0,0 +1,26 @@
{
"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"
},
"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"
}
}

103
Lab3/page-edit.html Normal file
View File

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Page-edit</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- My css -->
<link rel="stylesheet" href="./myStyle.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="./index.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="./index.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 me-3 ms-3 fs-4 fw-bold" 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>
<main class="container-fluid p-2 formStyle formSizeStyle rounded-8 my-4">
<div class="text-center">
<img id="image-preview" src="https://via.placeholder.com/200" class="rounded-8 height-200"
alt="placeholder">
</div>
<form id="items-form" class="needs-validation" novalidate>
<div class="mb-2">
<label for="item" class="form-label">Курсы</label>
<select id="item" class="form-select light-grey rounded-8" name="selected" required>
</select>
</div>
<div class="mb-2">
<label class="form-label" for="price">Цена за занятие</label>
<input id="price" name="price" class="form-control light-grey rounded-8" type="number" value="0.00" min="1000.00" step="0.50"
required>
</div>
<div class="mb-2">
<label class="form-label" for="count">Количество занятий</label>
<input id="count" name="count" class="form-control light-grey rounded-8" type="number" value="0" 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 light-grey rounded-8" accept="image/*">
</div>
<a href="./Admin.html" class="btn dark-grey text-light rounded-pill">Назад</a>
<button type="submit" class="btn purple text-light rounded-pill">Сохранить</button>
</form>
</main>
<!--Подвал-->
<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>
<!--Подвал-->
<script type="module">
import validation from "./js/validation";
import { linesPageForm } from "./js/lines"
document.addEventListener('DOMContentLoaded', () => {
validation();
linesPageForm();
});
</script>
</body>
</html>

1
Lab3/public/vite.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

97
Lab3/style.css Normal file
View 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;
}
}