Третья лаба + исправленный отчет
This commit is contained in:
Marselchi
parent
7e4c3eac89
commit
da0aa9d524
Binary file not shown.
20
lab3/.eslintrc.json
Normal file
20
lab3/.eslintrc.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es2021": true
|
||||||
|
},
|
||||||
|
"extends": "airbnb-base",
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 12,
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"quotes": "off",
|
||||||
|
"indent": "off",
|
||||||
|
"no-console": "off",
|
||||||
|
"no-use-before-define": "off",
|
||||||
|
"no-alert": "off",
|
||||||
|
"no-restricted-globals": "off",
|
||||||
|
"quote-props": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
98
lab3/add.html
Normal file
98
lab3/add.html
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
|
||||||
|
<script src="./node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class ="d-flex flex-column h-100">
|
||||||
|
<header id="header" class="header row w-100 m-0 mb-3">
|
||||||
|
<div class="p-0">
|
||||||
|
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-center row w-100 m-0">
|
||||||
|
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center">
|
||||||
|
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid flex-shrink-0">
|
||||||
|
<section class="d-flex align-items-center justify-content-center">
|
||||||
|
<div class="container">
|
||||||
|
<div class="justify-content-center pt-2">
|
||||||
|
<p class="text-center text-white fs-2 fw-normal font-family-Average Sans">Добавить фильм</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="text-center">
|
||||||
|
<img id="image-preview" src="https://via.placeholder.com/200" style="max-width:300px; max-height:600px; min-width:300px; min-height:400px"
|
||||||
|
alt="placeholder">
|
||||||
|
</div>
|
||||||
|
<form id="items-form" class="needs-validation" novalidate>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="name">Название</label>
|
||||||
|
<textarea class="form-control" id="name" rows="1"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label for="lang" class="form-label">Язык</label>
|
||||||
|
<select id="lang" class="form-select" name="selectedLang" required>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label for="genre" class="form-label">Жанры</label>
|
||||||
|
<select id="genre" class="form-select" name="selectedGenre" required>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<label>Год</label>
|
||||||
|
<div class="input-group date" data-provide="datepicker">
|
||||||
|
<input type="text" id="year" class="form-control">
|
||||||
|
<div class="input-group-addon">
|
||||||
|
<span class="glyphicon glyphicon-th"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="descp">Описание</label>
|
||||||
|
<textarea class="form-control" id="descp" rows="3"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="actrs">Актеры</label>
|
||||||
|
<textarea class="form-control" id="actrs" rows="2"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="image">Изображение</label>
|
||||||
|
<input id="image" type="file" name="image" class="form-control" accept="image/*">
|
||||||
|
</div>
|
||||||
|
<a href="/admin.html" class="btn btn-secondary">Назад</a>
|
||||||
|
<button type="submit" class="btn btn-primary">Сохранить</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto fixed bottom-0">
|
||||||
|
<div class= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('.input-group.date').datepicker({
|
||||||
|
format: "yyyy",
|
||||||
|
viewMode: "years",
|
||||||
|
minViewMode: "years"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script type="module">
|
||||||
|
import validation from "./js/validation";
|
||||||
|
import {linesPageForm} from "./js/lines"
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
validation();
|
||||||
|
linesPageForm();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
54
lab3/admin.html
Normal file
54
lab3/admin.html
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class ="d-flex flex-column h-100">
|
||||||
|
<header id="header" class="header row w-100 m-0 mb-3">
|
||||||
|
<div class="p-0">
|
||||||
|
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-center row w-100 m-0">
|
||||||
|
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center">
|
||||||
|
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid flex-shrink-0">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<table id="items-table" class="table table-striped bg-cyan">
|
||||||
|
<thead>
|
||||||
|
<th scope="col">№</th>
|
||||||
|
<th scope="col" class="w-25">Название</th>
|
||||||
|
<th scope="col" class="w-25">Язык</th>
|
||||||
|
<th scope="col" class="w-25">Год</th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<button id="items-add" class="btn bg-cyan"><a class="btn" href="/add.html" >Добавить фильм</a></button>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto fixed bottom-0">
|
||||||
|
<div class= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import validation from "./js/validation";
|
||||||
|
import {draw} from "./js/lines.js";
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
validation();
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
82
lab3/data.json
Normal file
82
lab3/data.json
Normal file
File diff suppressed because one or more lines are too long
101
lab3/favourite.html
Normal file
101
lab3/favourite.html
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class ="d-flex flex-column h-100">
|
||||||
|
<div>
|
||||||
|
<header id="header" class="header row w-100 m-0 mb-3">
|
||||||
|
<div class="p-0">
|
||||||
|
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
|
||||||
|
<div class="col-0 col-lg bg-cyan mw-100 mh-100">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
|
||||||
|
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans m-0 py-2" href="index.html">Онлайн-кинотеатр</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan ">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-group row text-break w-100 mt-3 p-0 mb-2">
|
||||||
|
<div class="form-outline col text-break h-100 flex-grow-1">
|
||||||
|
<input id="search-focus" type="search" id="form1" class="form-control ms-3 p-2 ms-lg-0" placeholder="Введите название фильма" />
|
||||||
|
</div>
|
||||||
|
<div class="dropdown col-1 col-lg-2 col-xl-3 w-auto mx-3 p-0 text-break h-100">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle h-100" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
<span class="d-none d-lg-inline">Выберите жанр</span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-primary col-1 col-sm-1 col-lg-3 col-xl-2 h-100 w-auto">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
||||||
|
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="d-none d-lg-inline">Поиск</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid flex-shrink-0">
|
||||||
|
<div class="row m-2 my-5 ">
|
||||||
|
<div class="col d-flex align-items-center justify-content-center">
|
||||||
|
<a href="selected.html" class="col-xs-12 col-lg-3 w-auto h-auto"><img src="images/fire.jpg" class="img-fluid" alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-xs-12 col-lg-6 col-xl-8 p-0 justify-content-center">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 mx-4">
|
||||||
|
<p class="text-white fs-5 fw-normal font-family-Bayon text-center">Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей, которые борются с неистовой огненной стихией, уничтожающей всё на своем пути. Герои работают в эпицентре лесного пожара и приходят на помощь</p>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<p class="text-center text-white fs-3 fw-normal font-family-Bayon">Приключения, катастрофа, драма, боевик</p>
|
||||||
|
</div>
|
||||||
|
<a href="selected.html" class="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3">
|
||||||
|
Перейти
|
||||||
|
</a>
|
||||||
|
<a class="d-flex btn btn-primary justify-content-center p-5 fs-5 m-3">
|
||||||
|
Удалить из избранного
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-2 my-5">
|
||||||
|
<div class="col d-flex align-items-center justify-content-center">
|
||||||
|
<a href="selected.html" class="col-xs-12 col-lg-3 w-auto h-auto"><img src="images/fire.jpg" class="img-fluid" alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-xs-12 col-lg-6 col-xl-8 p-0 justify-content-center">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break mx-4">
|
||||||
|
<p class="text-white fs-5 fw-normal font-family-Bayon text-center">Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей, которые борются с неистовой огненной стихией, уничтожающей всё на своем пути. Герои работают в эпицентре лесного пожара и приходят на помощь</p>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<p class="text-center text-white fs-3 fw-normal font-family-Bayon">Приключения, катастрофа, драма, боевик</p>
|
||||||
|
</div>
|
||||||
|
<a href="selected.html" class="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3">
|
||||||
|
Перейти
|
||||||
|
</a>
|
||||||
|
<a class="d-flex btn btn-primary justify-content-center p-5 fs-5 m-3">
|
||||||
|
Удалить из избранного
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto fixed bottom-0">
|
||||||
|
<div class= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
79
lab3/index.html
Normal file
79
lab3/index.html
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class ="d-flex flex-column h-100 w-100">
|
||||||
|
<header id="header" class="header row w-100 m-0 mb-3">
|
||||||
|
<div class="p-0">
|
||||||
|
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
|
||||||
|
<div class="col-0 col-lg bg-cyan mw-100 mh-100">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
|
||||||
|
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-xs-12 col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid flex-shrink-0 p-0">
|
||||||
|
<section class="d-flex align-items-center justify-content-center">
|
||||||
|
<div>
|
||||||
|
<div class="row justify-content-center pt-2 col">
|
||||||
|
<p class="text-center text-white fs-2 fw-normal font-family-Average Sans">Популярные сейчас</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="row p-2 m-2 align-items-center justify-content-evenly" id = "banner">
|
||||||
|
</div>
|
||||||
|
<section class="d-flex justify-content-center">
|
||||||
|
<div class="row m-3 justify-content-evenly w-100 text-break">
|
||||||
|
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
|
||||||
|
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Ужасы</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
|
||||||
|
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Экшн</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
|
||||||
|
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Детективы</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
|
||||||
|
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Боевики</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2" >
|
||||||
|
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Фентези</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
|
||||||
|
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Спорт</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto fixed bottom-0 w-100">
|
||||||
|
<div class= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script type="module">
|
||||||
|
import myBanner from "./js/banner";
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
myBanner();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
lab3/js/banner.js
Normal file
25
lab3/js/banner.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
// модуль для смены изображения в баннере по таймеру
|
||||||
|
|
||||||
|
import { getAllLines } from "./lines-rest-api";
|
||||||
|
// указывается блок, в котором будет баннер
|
||||||
|
// блок должен содержать изображения
|
||||||
|
async function myBanner() {
|
||||||
|
console.info("Loaded");
|
||||||
|
const data = await getAllLines();
|
||||||
|
data.forEach((item) => {
|
||||||
|
const im = document.createElement("img");
|
||||||
|
const ban = document.getElementById("banner");
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.setAttribute("class", "col-xs-12 col-sm-6 col-lg-3 w-auto h-auto m-2");
|
||||||
|
im.setAttribute("style", "max-width:300px; max-height:600px; min-width:300px; min-height:400px");
|
||||||
|
im.setAttribute("class", "img-fluid");
|
||||||
|
im.setAttribute("alt", "");
|
||||||
|
im.src = item.image;
|
||||||
|
im.class = "img-fluid";
|
||||||
|
a.appendChild(im);
|
||||||
|
ban.appendChild(a);
|
||||||
|
});
|
||||||
|
// получение всех изображений внутри баннера
|
||||||
|
}
|
||||||
|
|
||||||
|
export default myBanner;
|
||||||
108
lab3/js/lines-rest-api.js
Normal file
108
lab3/js/lines-rest-api.js
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
// модуль для работы с REST API сервера
|
||||||
|
|
||||||
|
// адрес сервера
|
||||||
|
const serverUrl = "http://localhost:8081";
|
||||||
|
|
||||||
|
// функция возвращает объект нужной структуры для отправки на сервер
|
||||||
|
function createLineObject(name, lang, genre, year, descp, actr, image) {
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
langsId: lang,
|
||||||
|
genre,
|
||||||
|
year,
|
||||||
|
descp,
|
||||||
|
actr,
|
||||||
|
image,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для получения всех типов товара (get)
|
||||||
|
export async function getAllLangTypes() {
|
||||||
|
const response = await fetch(`${serverUrl}/langs`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getAllGenreTypes() {
|
||||||
|
const response = await fetch(`${serverUrl}/genre`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
// обращение к серверу для получения всех записей (get)
|
||||||
|
export async function getAllLines() {
|
||||||
|
const response = await fetch(`${serverUrl}/lines?_expand=langs`);
|
||||||
|
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=langs`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для создания записи (post)
|
||||||
|
// объект отправляется в теле запроса (body)
|
||||||
|
export async function createLine(name, lang, genre, year, descp, actr, image) {
|
||||||
|
const itemObject = createLineObject(name, lang, genre, year, descp, actr, image);
|
||||||
|
const options = {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(itemObject),
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json",
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для обновления записи по id (put)
|
||||||
|
// объект отправляется в теле запроса (body)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function updateLine(id, name, lang, genre, year, descp, actr, image) {
|
||||||
|
const itemObject = createLineObject(name, lang, genre, year, descp, actr, image);
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
method: "PUT",
|
||||||
|
body: JSON.stringify(itemObject),
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json",
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для удаления записи по id (delete)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function deleteLine(id) {
|
||||||
|
const options = {
|
||||||
|
method: "DELETE",
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
100
lab3/js/lines-ui.js
Normal file
100
lab3/js/lines-ui.js
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
// модуль для работы с элементами управления
|
||||||
|
|
||||||
|
// объект для удобного получения элементов
|
||||||
|
// при обращении к атрибуту объекта вызывается
|
||||||
|
// нужная функция для поиска элемента
|
||||||
|
export const cntrls = {
|
||||||
|
button: document.getElementById("items-add"),
|
||||||
|
table: document.querySelector("#items-table tbody"),
|
||||||
|
form: document.getElementById("items-form"),
|
||||||
|
lineId: document.getElementById("items-line-id"),
|
||||||
|
langType: document.getElementById("lang"),
|
||||||
|
genreType: document.getElementById("genre"),
|
||||||
|
name: document.getElementById("name"),
|
||||||
|
year: document.getElementById("year"),
|
||||||
|
descp: document.getElementById("descp"),
|
||||||
|
image: document.getElementById("image"),
|
||||||
|
actr: document.getElementById("actrs"),
|
||||||
|
imagePreview: document.getElementById("image-preview"),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Дефолтное превью
|
||||||
|
export const imagePlaceholder = "https://via.placeholder.com/200";
|
||||||
|
|
||||||
|
// функция создает тег option для select
|
||||||
|
// <option value="" selected>name</option>
|
||||||
|
export function createItemsOption(name, value = "", isSelected = false) {
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.value = value || "";
|
||||||
|
option.selected = isSelected;
|
||||||
|
option.text = name;
|
||||||
|
return option;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создает ссылку (a) для таблицы
|
||||||
|
// содержимое тега a заполняется необходимой иконкой (icon)
|
||||||
|
// при нажатии вызывается callback
|
||||||
|
// ссылка "оборачивается" тегом td
|
||||||
|
// <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></td>
|
||||||
|
function createTableAnchor(icon, callback) {
|
||||||
|
const i = document.createElement("i");
|
||||||
|
i.classList.add("fa-solid", icon);
|
||||||
|
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = "#";
|
||||||
|
a.appendChild(i);
|
||||||
|
a.onclick = (event) => {
|
||||||
|
// чтобы в URL не добавлялась решетка
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
callback();
|
||||||
|
};
|
||||||
|
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.appendChild(a);
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создает колонку таблицы с текстом value
|
||||||
|
// <td>value</td>
|
||||||
|
function createTableColumn(value) {
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.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;
|
||||||
|
|
||||||
|
const row = document.createElement("tr");
|
||||||
|
row.id = `line-${item.id}`;
|
||||||
|
|
||||||
|
row.appendChild(rowNumber);
|
||||||
|
row.appendChild(createTableColumn(item.name));
|
||||||
|
row.appendChild(createTableColumn(item.langs.name));
|
||||||
|
row.appendChild(createTableColumn(item.year));
|
||||||
|
// редактировать на странице page-edit
|
||||||
|
row.appendChild(createTableAnchor("fa-pen-to-square", editPageCallback));
|
||||||
|
// удаление
|
||||||
|
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
|
||||||
|
return row;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createImg(item) {
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.src = item.image;
|
||||||
|
return img;
|
||||||
|
}
|
||||||
253
lab3/js/lines.js
Normal file
253
lab3/js/lines.js
Normal file
@ -0,0 +1,253 @@
|
|||||||
|
// модуль с логикой
|
||||||
|
|
||||||
|
import {
|
||||||
|
createLine, deleteLine, getAllLangTypes, getAllGenreTypes, getAllLines, getLine, updateLine,
|
||||||
|
} from "./lines-rest-api";
|
||||||
|
import {
|
||||||
|
cntrls, createItemsOption, createTableRow, imagePlaceholder,
|
||||||
|
} from "./lines-ui";
|
||||||
|
|
||||||
|
async function drawLangSelect() {
|
||||||
|
// вызов метода REST API для получения списка типов товаров
|
||||||
|
const data = await getAllLangTypes();
|
||||||
|
// очистка содержимого select
|
||||||
|
// удаляется все, что находится между тегами <select></select>
|
||||||
|
// но не атрибуты
|
||||||
|
cntrls.langType.innerHTML = "";
|
||||||
|
// пустое значение
|
||||||
|
cntrls.langType.appendChild(createItemsOption("Выберите значение", "", true));
|
||||||
|
// цикл по результату ответа от сервера
|
||||||
|
// используется лямбда-выражение
|
||||||
|
// (item) => {} аналогично function(item) {}
|
||||||
|
data.forEach((lang) => {
|
||||||
|
cntrls.langType.appendChild(createItemsOption(lang.name, lang.id));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function drawGenreSelect() {
|
||||||
|
// вызов метода REST API для получения списка типов товаров
|
||||||
|
const data = await getAllGenreTypes();
|
||||||
|
// очистка содержимого select
|
||||||
|
// удаляется все, что находится между тегами <select></select>
|
||||||
|
// но не атрибуты
|
||||||
|
cntrls.genreType.innerHTML = "";
|
||||||
|
// пустое значение
|
||||||
|
cntrls.genreType.appendChild(createItemsOption("Выберите значение", "", true));
|
||||||
|
// цикл по результату ответа от сервера
|
||||||
|
// используется лямбда-выражение
|
||||||
|
// (item) => {} аналогично function(item) {}
|
||||||
|
data.forEach((genre) => {
|
||||||
|
cntrls.genreType.appendChild(createItemsOption(genre.name, genre.id));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
async function drawLinesTable() {
|
||||||
|
console.info("Try to load data");
|
||||||
|
if (!cntrls.table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// вызов метода REST API для получения всех записей
|
||||||
|
const data = await getAllLines();
|
||||||
|
// очистка содержимого table
|
||||||
|
// удаляется все, что находится между тегами <table></table>
|
||||||
|
// но не атрибуты
|
||||||
|
cntrls.table.innerHTML = "";
|
||||||
|
// цикл по результату ответа от сервера
|
||||||
|
// используется лямбда-выражение
|
||||||
|
// (item, index) => {} аналогично function(item, index) {}
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
cntrls.table.appendChild(
|
||||||
|
createTableRow(
|
||||||
|
item,
|
||||||
|
index,
|
||||||
|
// функции передаются в качестве параметра
|
||||||
|
// это очень удобно, так как аргументы функций доступны только
|
||||||
|
// в данном месте кода и не передаются в сервисные модули
|
||||||
|
() => location.assign(`add.html?id=${item.id}`),
|
||||||
|
() => removeLine(item.id),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addLine(name, lang, genre, year, descp, actr, image) {
|
||||||
|
console.info("Try to add film");
|
||||||
|
// вызов метода REST API для добавления записи
|
||||||
|
const data = await createLine(name, lang, genre, year, descp, actr, image);
|
||||||
|
console.info("Added");
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function editLine(id, name, lang, genre, year, descp, actr, image) {
|
||||||
|
console.info("Try to update item");
|
||||||
|
// вызов метода REST API для обновления записи
|
||||||
|
const data = await updateLine(id, name, lang, genre, year, descp, actr, image);
|
||||||
|
console.info("Updated");
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function removeLine(id) {
|
||||||
|
if (!confirm("Do you really want to remove this item?")) {
|
||||||
|
console.info("Canceled");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.info("Try to remove item");
|
||||||
|
// вызов метода REST API для удаления записи
|
||||||
|
const data = await deleteLine(id);
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция для получения содержимого файла в виде base64 строки
|
||||||
|
// https://ru.wikipedia.org/wiki/Base64
|
||||||
|
async function readFile(file) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
// создание Promise-объекта для использования функции
|
||||||
|
// с помощью await (асинхронно) без коллбэков (callback)
|
||||||
|
// https://learn.javascript.ru/promise
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// 2. "Возвращаем" содержимое когда файл прочитан
|
||||||
|
// через вызов resolve
|
||||||
|
// Если не использовать Promise, то всю работу по взаимодействию
|
||||||
|
// с REST API пришлось бы делать в обработчике (callback) функции
|
||||||
|
// onloadend
|
||||||
|
reader.onloadend = () => {
|
||||||
|
const fileContent = reader.result;
|
||||||
|
// Здесь могла бы быть работа с REST API
|
||||||
|
// Чтение заканчивает выполняться здесь
|
||||||
|
resolve(fileContent);
|
||||||
|
};
|
||||||
|
// 3. Возвращаем ошибку
|
||||||
|
reader.onerror = () => {
|
||||||
|
// Или здесь в случае ошибки
|
||||||
|
reject(new Error("oops, something went wrong with the file reader."));
|
||||||
|
};
|
||||||
|
// Шаг 1. Сначала читаем файл
|
||||||
|
// Чтение начинает выполняться здесь
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция для обновления блока с превью выбранного изображения
|
||||||
|
async function updateImagePreview() {
|
||||||
|
// получение выбранного файла
|
||||||
|
// возможен выбор нескольких файлов, поэтому необходимо получить только первый
|
||||||
|
const file = cntrls.image.files[0];
|
||||||
|
// чтение содержимого файла в виде base64 строки
|
||||||
|
const fileContent = await readFile(file);
|
||||||
|
console.info("base64 ", fileContent);
|
||||||
|
// обновление атрибута src для тега img с id image-preview
|
||||||
|
cntrls.imagePreview.src = fileContent;
|
||||||
|
}
|
||||||
|
export function draw() {
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
|
||||||
|
// Если хотите делать через модальное окно, то удалите эту функцию
|
||||||
|
export async function linesPageForm() {
|
||||||
|
console.info("linesPageForm");
|
||||||
|
// загрузка и заполнение select со списком товаров
|
||||||
|
drawLangSelect();
|
||||||
|
drawGenreSelect();
|
||||||
|
// func1 = (id) => {} аналогично function func1(id) {}
|
||||||
|
const goBack = () => location.assign("/admin.html");
|
||||||
|
|
||||||
|
// Вызов функции обновления превью изображения при возникновении
|
||||||
|
// события onchange в тэге input с id image
|
||||||
|
cntrls.image.addEventListener("change", () => updateImagePreview());
|
||||||
|
|
||||||
|
// получение параметров GET-запроса из URL
|
||||||
|
// параметры перечислены после символа ? (?id=1&color=black&...)
|
||||||
|
const urlParams = new URLSearchParams(location.search);
|
||||||
|
|
||||||
|
// получение значения конкретного параметра (id)
|
||||||
|
// указан только при редактировании
|
||||||
|
const currentId = urlParams.get("id");
|
||||||
|
// если id задан
|
||||||
|
if (currentId) {
|
||||||
|
try {
|
||||||
|
// вызов метода REST API для получения записи по первичному ключу(id)
|
||||||
|
const line = await getLine(currentId);
|
||||||
|
// заполнение формы для редактирования
|
||||||
|
cntrls.langType.value = line.langsId;
|
||||||
|
cntrls.name.value = line.name;
|
||||||
|
cntrls.genreType.value = line.genre;
|
||||||
|
cntrls.year.value = line.year;
|
||||||
|
cntrls.descp.value = line.descp;
|
||||||
|
cntrls.actr.value = line.actr;
|
||||||
|
// заполнение превью
|
||||||
|
// Если пользователь выбрал изображение, то оно загружается
|
||||||
|
// в тэг 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.name.value,
|
||||||
|
cntrls.langType.value,
|
||||||
|
cntrls.genreType.value,
|
||||||
|
cntrls.year.value,
|
||||||
|
cntrls.descp.value,
|
||||||
|
cntrls.actr.value,
|
||||||
|
imageBase64,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
await editLine(
|
||||||
|
currentId,
|
||||||
|
cntrls.name.value,
|
||||||
|
cntrls.langType.value,
|
||||||
|
cntrls.genreType.value,
|
||||||
|
cntrls.year.value,
|
||||||
|
cntrls.descp.value,
|
||||||
|
cntrls.actr.value,
|
||||||
|
imageBase64,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// возврат к странице page4
|
||||||
|
goBack();
|
||||||
|
});
|
||||||
|
}
|
||||||
25
lab3/js/validation.js
Normal file
25
lab3/js/validation.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
// модуль используется для валидации форма на странице
|
||||||
|
|
||||||
|
function validation() {
|
||||||
|
// поиск всех форма с классом .needs-validation
|
||||||
|
const forms = document.querySelectorAll("form.needs-validation");
|
||||||
|
|
||||||
|
for (let i = 0; i < forms.length; i += 1) {
|
||||||
|
const form = forms[i];
|
||||||
|
// для каждой формы добавляется обработчик события отправки
|
||||||
|
form.addEventListener("submit", (event) => {
|
||||||
|
// если форма не прошла валидацию
|
||||||
|
// то выключить стандартное действие
|
||||||
|
if (!form.checkValidity()) {
|
||||||
|
event.preventDefault();
|
||||||
|
// предотвращает распространение preventDefault
|
||||||
|
// на другие объекты
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
// добавляет к форме класс was-validated
|
||||||
|
form.classList.add("was-validated");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default validation;
|
||||||
14
lab3/jsconfig.json
Normal file
14
lab3/jsconfig.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"target": "ES2020",
|
||||||
|
"jsx": "preserve",
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"strictFunctionTypes": true
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"**/node_modules/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
59
lab3/login.html
Normal file
59
lab3/login.html
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Онлайн-кинотеатр</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class ="d-flex flex-column h-100">
|
||||||
|
<header id="header" class="header row w-100 m-0 mb-3">
|
||||||
|
<div class="p-0">
|
||||||
|
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
|
||||||
|
<div class="col-0 col-lg bg-cyan mw-100 mh-100">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
|
||||||
|
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column col-xs-12 col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan">
|
||||||
|
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
|
||||||
|
</div>
|
||||||
|
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||||
|
<a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid flex-shrink-0">
|
||||||
|
<section class="d-flex align-items-center justify-content-center">
|
||||||
|
<div class="container">
|
||||||
|
<div class="justify-content-center pt-2">
|
||||||
|
<p class="text-center text-white fs-2 fw-normal font-family-Average Sans">Вход</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<form class="d-flex align-items-center justify-content-center">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row justify-content-center mt-5 col">
|
||||||
|
<div class="flex-column d-flex col p-2 align-items-center">
|
||||||
|
<input type="text" class="form-control p-2 m-2" placeholder="Имя пользователя/почта">
|
||||||
|
<input type="text" class="form-control p-2 m-2" placeholder="Пароль">
|
||||||
|
<button type="submit" class="btn btn-primary mt-5 text-break px-5 py-1 fs-1">Войти</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto fixed bottom-0">
|
||||||
|
<div class= "bg-dark-blue d-flex text-center justify-content-center">
|
||||||
|
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user