Merge pull request 'Слив веток чтобы не терятся' (#1) from master into main
Reviewed-on: http://student.git.athene.tech/Marselchii/PIbd-21_Sagirov_M.M._Internet_Programming/pulls/1
This commit is contained in:
commit
d005514505
BIN
lab1/Лаб1 отчет.docx
Normal file
BIN
lab1/Лаб1 отчет.docx
Normal file
Binary file not shown.
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>
|
||||
BIN
lab3/images/bro.jpg
Normal file
BIN
lab3/images/bro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
lab3/images/fire.jpg
Normal file
BIN
lab3/images/fire.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
BIN
lab3/images/harry.jpg
Normal file
BIN
lab3/images/harry.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
BIN
lab3/images/noimage.png
Normal file
BIN
lab3/images/noimage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
lab3/images/nolan.jpg
Normal file
BIN
lab3/images/nolan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
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/*"
|
||||
]
|
||||
}
|
||||
BIN
lab3/lab3.docx
Normal file
BIN
lab3/lab3.docx
Normal file
Binary file not shown.
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>
|
||||
4716
lab3/package-lock.json
generated
Normal file
4716
lab3/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
lab3/package.json
Normal file
31
lab3/package.json
Normal file
@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "web",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"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"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.5.1",
|
||||
"bootstrap": "^5.2.1",
|
||||
"bootstrap-datepicker": "^1.10.0",
|
||||
"jquery": "^3.7.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"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",
|
||||
"vite": "4.4.9"
|
||||
}
|
||||
}
|
||||
101
lab3/search.html
Normal file
101
lab3/search.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>
|
||||
64
lab3/selected.html
Normal file
64
lab3/selected.html
Normal file
@ -0,0 +1,64 @@
|
||||
<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">
|
||||
<div class="ms-3">
|
||||
<div class="row p-2 justify-content-center">
|
||||
<img class="col-12 col-lg-6 img-fluid w-auto h-auto" src="images/fire.jpg" alt="" style="max-height: 590;">
|
||||
<div class="col-12 col-lg-6 text-wrap px-2 d-flex justify-content-center mt-3">
|
||||
<p class="text-white fs-3 fw-normal font-family-Bayon text-lg-start text-center">Дата выхода: 2020<br/>Режиссер:<br/>Алексей Нужный<br/>В главных ролях:<br/>Константин Хабенский, Иван Янковский, Стася Милославская...<br/>Язык: Русский</p>
|
||||
</div>
|
||||
<div class="col-12 d-flex justify-content-center m-0 flex-column mt-5">
|
||||
<div class="d-flex justify-content-center">
|
||||
<h1 class="text-white fs-2 fw-normal font-family-Bayon">Огонь</h1>
|
||||
</div>
|
||||
<div class="d-flex text-wrap me-3">
|
||||
<p class="text-white fs-5 fw-normal font-family-Bayon text-lg-center mb-0 px-3 py-2" style="text-align: justify;">Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей, которые борются с неистовой огненной стихией, уничтожающей всё на своем пути. Герои работают в эпицентре лесного пожара и приходят на помощь жителям близлежащей деревни. Константин Хабенский, Иван Янковский и Стася Милославская в зрелищном героическом блокбастере от режиссера Алексея Нужного и создателей кинохитов «Движение вверх», «Экипаж», «Легенда № 17».<br/>Наступает тяжелый сезон разрушительных лесных пожаров. Борьба с ними не на жизнь, а на смерть разворачивается возле маленького села Ольхово в Карелии. На вызов прибыла бригада из шести пожарных во главе с опытным инструктором Алексеем Павловичем Соколовым. У каждого члена группы своя история: кто-то уже потерял в огне самых близких, кого-то с беспокойством ждут дома. Есть среди них и новичок – самоуверенный красавец Роман Ильин. Он ухаживает за дочкой Соколова Катей, работающей на базе в диспетчерской. Вот только отношения с самим Алексеем Павловичем у Ильина не задались – и это мягко говоря. Конфликт нарастает перед лицом свирепого пожара, угрожающего деревенским жителям, которых приходится эвакуировать в экстремальных условиях.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-around">
|
||||
<buttnon class="d-flex btn btn-primary justify-content-center col p-5 fs-4 m-3 align-items-center">
|
||||
Смотреть
|
||||
</buttnon>
|
||||
<buttnon class="d-flex btn btn-primary justify-content-center col p-5 fs-5 m-3 align-items-center">
|
||||
Добавить в избранное
|
||||
</buttnon>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
61
lab3/signup.html
Normal file
61
lab3/signup.html
Normal file
@ -0,0 +1,61 @@
|
||||
<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="Почта">
|
||||
<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-2">Зарегистрироваться</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>
|
||||
16
lab3/style.css
Normal file
16
lab3/style.css
Normal file
@ -0,0 +1,16 @@
|
||||
body{
|
||||
background-color:#194F75;
|
||||
height: 100%;
|
||||
}
|
||||
.bg-cyan{
|
||||
background-color: #71B8F7;
|
||||
}
|
||||
.bg-grey{
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
.bg-dark-blue{
|
||||
background-color: #2B82CF;
|
||||
}
|
||||
main{
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
22
lab3/vite.config.js
Normal file
22
lab3/vite.config.js
Normal file
@ -0,0 +1,22 @@
|
||||
import { resolve } from "path";
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
sourcemap: true,
|
||||
emptyOutDir: true,
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, "index.html"),
|
||||
selected: resolve(__dirname, "selected.html"),
|
||||
favourite: resolve(__dirname, "favourite.html"),
|
||||
admin: resolve(__dirname, "admin.html"),
|
||||
signup: resolve(__dirname, "signup.html"),
|
||||
login: resolve(__dirname, "login.html"),
|
||||
search: resolve(__dirname, "search.html"),
|
||||
add: resolve(__dirname, "add.html"),
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
24
lab4/.eslintrc.cjs
Normal file
24
lab4/.eslintrc.cjs
Normal file
@ -0,0 +1,24 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'airbnb-base',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 12, sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
'indent': 'off',
|
||||
'no-console': 'off',
|
||||
'arrow-body-style': 'off',
|
||||
'implicit-arrow-linebreak': 'off',
|
||||
},
|
||||
}
|
||||
24
lab4/.gitignore
vendored
Normal file
24
lab4/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
29
lab4/README.md
Normal file
29
lab4/README.md
Normal file
@ -0,0 +1,29 @@
|
||||
#### Окружение:
|
||||
- nodejs 18;
|
||||
- VSCode;
|
||||
- ESLint плагин для VSCode;
|
||||
- для отладки необходимы бразузеры Chrome или Edge.
|
||||
|
||||
#### Создание пустого проекта:
|
||||
|
||||
```commandline
|
||||
npm create vite@latest ./ -- --template react
|
||||
```
|
||||
|
||||
#### Установка зависимостей:
|
||||
|
||||
```commandline
|
||||
npm install
|
||||
```
|
||||
|
||||
#### Запуск проекта:
|
||||
|
||||
```commandline
|
||||
npm run dev
|
||||
```
|
||||
|
||||
#### Сборка проекта:
|
||||
|
||||
```commandline
|
||||
npm run build
|
||||
```
|
||||
15
lab4/index.html
Normal file
15
lab4/index.html
Normal file
@ -0,0 +1,15 @@
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>My shop</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
14
lab4/jsconfig.json
Normal file
14
lab4/jsconfig.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"target": "ES2020",
|
||||
"jsx": "react",
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"**/node_modules/*"
|
||||
]
|
||||
}
|
||||
4344
lab4/package-lock.json
generated
Normal file
4344
lab4/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
lab4/package.json
Normal file
32
lab4/package.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "lec4",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.18.0",
|
||||
"bootstrap": "^5.3.2",
|
||||
"react-bootstrap": "^2.9.1",
|
||||
"react-bootstrap-icons": "^1.10.3",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"vite": "^4.4.5"
|
||||
}
|
||||
}
|
||||
3
lab4/public/favicon.svg
Normal file
3
lab4/public/favicon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
|
||||
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 463 B |
0
lab4/src/App.css
Normal file
0
lab4/src/App.css
Normal file
19
lab4/src/App.jsx
Normal file
19
lab4/src/App.jsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { Container } from 'react-bootstrap';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import './App.css';
|
||||
import Footer from './components/footer/Footer.jsx';
|
||||
import Header from './components/header/Header.jsx';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<>
|
||||
<Header></Header>
|
||||
<Container className='p-0' as="main" fluid>
|
||||
<Outlet />
|
||||
</Container>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
BIN
lab4/src/assets/banner1.png
Normal file
BIN
lab4/src/assets/banner1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 640 KiB |
BIN
lab4/src/assets/banner2.png
Normal file
BIN
lab4/src/assets/banner2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 812 KiB |
BIN
lab4/src/assets/banner3.png
Normal file
BIN
lab4/src/assets/banner3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 767 KiB |
BIN
lab4/src/assets/images/bro.jpg
Normal file
BIN
lab4/src/assets/images/bro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
lab4/src/assets/images/fire.jpg
Normal file
BIN
lab4/src/assets/images/fire.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
BIN
lab4/src/assets/images/harry.jpg
Normal file
BIN
lab4/src/assets/images/harry.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
BIN
lab4/src/assets/images/noimage.png
Normal file
BIN
lab4/src/assets/images/noimage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
lab4/src/assets/images/nolan.jpg
Normal file
BIN
lab4/src/assets/images/nolan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
BIN
lab4/src/assets/logo.png
Normal file
BIN
lab4/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
25
lab4/src/components/banner/Banner.css
Normal file
25
lab4/src/components/banner/Banner.css
Normal file
@ -0,0 +1,25 @@
|
||||
#banner {
|
||||
margin: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#banner img {
|
||||
border: 1px solid #3c3c3f;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#banner img.banner-show {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
transition: opacity 1s, visibility 0s;
|
||||
}
|
||||
|
||||
#banner img.banner-hide {
|
||||
height: 0;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 1s, visibility 0s 1s;
|
||||
}
|
||||
40
lab4/src/components/banner/Banner.jsx
Normal file
40
lab4/src/components/banner/Banner.jsx
Normal file
@ -0,0 +1,40 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import banner1 from '../../assets/banner1.png';
|
||||
import banner2 from '../../assets/banner2.png';
|
||||
import banner3 from '../../assets/banner3.png';
|
||||
import './Banner.css';
|
||||
|
||||
const Banner = () => {
|
||||
const [currentBanner, setCurrentBanner] = useState(0);
|
||||
const banners = [banner1, banner2, banner3];
|
||||
|
||||
const getBannerClass = (index) => {
|
||||
return currentBanner === index ? 'banner-show' : 'banner-hide';
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const bannerInterval = setInterval(
|
||||
() => {
|
||||
console.info('Banner changed');
|
||||
let current = currentBanner + 1;
|
||||
if (current === banners.length) {
|
||||
current = 0;
|
||||
}
|
||||
setCurrentBanner(current);
|
||||
},
|
||||
5000,
|
||||
);
|
||||
return () => clearInterval(bannerInterval);
|
||||
});
|
||||
|
||||
return (
|
||||
<div id="banner" >
|
||||
{
|
||||
banners.map((banner, index) =>
|
||||
<img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
|
||||
}
|
||||
</div >
|
||||
);
|
||||
};
|
||||
|
||||
export default Banner;
|
||||
22
lab4/src/components/filmLogo/FilmLogo.jsx
Normal file
22
lab4/src/components/filmLogo/FilmLogo.jsx
Normal file
@ -0,0 +1,22 @@
|
||||
import { Col, Image } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const FilmLogo = ({ logoName }) => {
|
||||
const tempLogo = logoName ?? 'logo';
|
||||
return (
|
||||
<Col xs={12} sm={6} lg={3}
|
||||
className="w-auto h-auto m-2"
|
||||
>
|
||||
<Link to="/selected">
|
||||
<Image src={`src/assets/images/${tempLogo}.jpg`} fluid alt="" />
|
||||
</Link>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
FilmLogo.propTypes = {
|
||||
logoName: PropTypes.string,
|
||||
};
|
||||
|
||||
export default FilmLogo;
|
||||
4
lab4/src/components/filmRow/FilmRow.css
Normal file
4
lab4/src/components/filmRow/FilmRow.css
Normal file
@ -0,0 +1,4 @@
|
||||
.FilmLogoRow{
|
||||
min-width: 300px;
|
||||
min-height: 500px;
|
||||
}
|
||||
38
lab4/src/components/filmRow/FilmRow.jsx
Normal file
38
lab4/src/components/filmRow/FilmRow.jsx
Normal file
@ -0,0 +1,38 @@
|
||||
import {
|
||||
Row, Col, Button, Image,
|
||||
} from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const FilmRow = () => {
|
||||
return (
|
||||
<Row className="m-2 my-5 ">
|
||||
<Col xs={12} lg={3}>
|
||||
<Link to="/selected" className="">
|
||||
<Image src="src/assets/images/fire.jpg" fluid alt="" className="FilmLogoRow"/>
|
||||
</Link>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} xl={8} className="d-flex flex-column p-0 justify-content-center">
|
||||
<div className="d-flex p-1 ps-0 justify-content-center mw-100 mh-100 mx-4">
|
||||
<p className="text-white fs-5 fw-normal font-family-Bayon text-center">
|
||||
Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей,
|
||||
которые борются с неистовой огненной стихией, уничтожающей всё на своем
|
||||
пути. Герои работают в эпицентре лесного пожара и приходят на помощь
|
||||
</p>
|
||||
</div>
|
||||
<div className="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||
<p className="text-center text-white fs-3 fw-normal font-family-Bayon">
|
||||
Приключения, катастрофа, драма, боевик
|
||||
</p>
|
||||
</div>
|
||||
<Button className="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3 align-items-center">
|
||||
Перейти
|
||||
</Button>
|
||||
<Button className="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3 align-items-center">
|
||||
Смотреть позже
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
export default FilmRow;
|
||||
3
lab4/src/components/footer/Footer.css
Normal file
3
lab4/src/components/footer/Footer.css
Normal file
@ -0,0 +1,3 @@
|
||||
.bg-dark-blue{
|
||||
background-color: #2B82CF;
|
||||
}
|
||||
13
lab4/src/components/footer/Footer.jsx
Normal file
13
lab4/src/components/footer/Footer.jsx
Normal file
@ -0,0 +1,13 @@
|
||||
import './Footer.css';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="footer mt-auto fixed bottom-0 w-100">
|
||||
<div className= "bg-dark-blue d-flex text-center justify-content-center">
|
||||
<p className="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
3
lab4/src/components/genre/Genre.css
Normal file
3
lab4/src/components/genre/Genre.css
Normal file
@ -0,0 +1,3 @@
|
||||
.bg-grey{
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
23
lab4/src/components/genre/Genre.jsx
Normal file
23
lab4/src/components/genre/Genre.jsx
Normal file
@ -0,0 +1,23 @@
|
||||
import { Col } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Genre.css';
|
||||
|
||||
const Genre = ({ genreName }) => {
|
||||
return (
|
||||
<Col xs={12} sm={6} lg={3} xl={1} className="bg-grey rounded-3 text-center p-2 m-2">
|
||||
<Link
|
||||
className="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans"
|
||||
to="/search"
|
||||
>
|
||||
{genreName}
|
||||
</Link>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
Genre.propTypes = {
|
||||
genreName: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Genre;
|
||||
10
lab4/src/components/header/Header.css
Normal file
10
lab4/src/components/header/Header.css
Normal file
@ -0,0 +1,10 @@
|
||||
.bg-cyan{
|
||||
background-color: #71B8F7;
|
||||
}
|
||||
.bg-grey{
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
.bg-dark-blue{
|
||||
background-color: #2B82CF;
|
||||
}
|
||||
|
||||
43
lab4/src/components/header/Header.jsx
Normal file
43
lab4/src/components/header/Header.jsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Col, Row } from 'react-bootstrap';
|
||||
import './Header.css';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="w-100 m-0 mb-3">
|
||||
<div className="w-100">
|
||||
<Row className="pt-lg-3 px-lg-5 p-0 justify-content-lg-between justify-content-center row w-100 m-0">
|
||||
<Col lg={3} xl={2} className="col-0 bg-cyan gone">
|
||||
</Col>
|
||||
<Col xs className="d-flex p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center">
|
||||
<Link to="/"
|
||||
className="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2"
|
||||
href="index.html"
|
||||
>
|
||||
Онлайн-кинотеатр
|
||||
</Link>
|
||||
</Col>
|
||||
<Col xs={12} sm={6} lg={3} xl={2} className="flex-column p-0 bg-cyan">
|
||||
<div className="d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
|
||||
<Link
|
||||
className="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0"
|
||||
to="/signup"
|
||||
>
|
||||
Регистрация
|
||||
</Link>
|
||||
</div>
|
||||
<div className="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
|
||||
<Link
|
||||
className="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0"
|
||||
to="/login"
|
||||
>
|
||||
Вход
|
||||
</Link>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
export default Header;
|
||||
12
lab4/src/components/navigation/Navigation.css
Normal file
12
lab4/src/components/navigation/Navigation.css
Normal file
@ -0,0 +1,12 @@
|
||||
.my-navbar {
|
||||
background-color: #3c3c3c !important;
|
||||
}
|
||||
|
||||
.my-navbar .link a:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.my-navbar .logo {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
41
lab4/src/components/navigation/Navigation.jsx
Normal file
41
lab4/src/components/navigation/Navigation.jsx
Normal file
@ -0,0 +1,41 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container, Nav, Navbar } from 'react-bootstrap';
|
||||
import { Cart2 } from 'react-bootstrap-icons';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import './Navigation.css';
|
||||
|
||||
const Navigation = ({ routes }) => {
|
||||
const location = useLocation();
|
||||
const indexPageLink = routes.filter((route) => route.index === false).shift();
|
||||
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
|
||||
|
||||
return (
|
||||
<header>
|
||||
<Navbar expand='md' bg='dark' data-bs-theme='dark' className='my-navbar'>
|
||||
<Container fluid>
|
||||
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
|
||||
<Cart2 className='d-inline-block align-top me-1 logo' />
|
||||
My shop
|
||||
</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls='main-navbar' />
|
||||
<Navbar.Collapse id='main-navbar'>
|
||||
<Nav className='me-auto link' activeKey={location.pathname}>
|
||||
{
|
||||
pages.map((page) =>
|
||||
<Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
|
||||
{page.title}
|
||||
</Nav.Link>)
|
||||
}
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar >
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
Navigation.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
15
lab4/src/components/searchbar/SearchBar.css
Normal file
15
lab4/src/components/searchbar/SearchBar.css
Normal file
@ -0,0 +1,15 @@
|
||||
.bg-grey{
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#dropdown-basic-button{
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
.sotnya{
|
||||
min-height: 100px;
|
||||
|
||||
}
|
||||
#dropdown-basic-button{
|
||||
height: 100% !important ;
|
||||
}
|
||||
38
lab4/src/components/searchbar/SearchBar.jsx
Normal file
38
lab4/src/components/searchbar/SearchBar.jsx
Normal file
@ -0,0 +1,38 @@
|
||||
import {
|
||||
Form, Row, Col, Dropdown, DropdownButton,
|
||||
} from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './SearchBar.css';
|
||||
|
||||
const SearchBar = () => {
|
||||
return (
|
||||
<Row className="text-break w-100 mt-3 p-0 mb-2 align-items-center justify-content-center">
|
||||
<Col lg={3} className=" text-break h-100 flex-grow-1">
|
||||
<Form.Control
|
||||
id="search-focus"
|
||||
as="textarea"
|
||||
className="ms-3 p-0 ms-lg-4"
|
||||
placeholder="Введите название фильма"
|
||||
/>
|
||||
</Col>
|
||||
<Col sm={1} lg={2} xl={3} className=" w-auto mx-3 p-auto text-break h-100 d-flex align-items-center">
|
||||
<DropdownButton id="dropdown-basic-button" title="Выберите жанр" className=" h-100">
|
||||
<Dropdown.Item href="#">Ужасы</Dropdown.Item>
|
||||
<Dropdown.Item href="#">Триллер</Dropdown.Item>
|
||||
<Dropdown.Item href="#">Комедия</Dropdown.Item>
|
||||
</DropdownButton>
|
||||
</Col>
|
||||
<Col sm={1} lg={3} xl={2} className="align-items-center justify-content-center">
|
||||
<Link
|
||||
className=" "
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-search" viewBox="0 0 20 20">
|
||||
<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>
|
||||
</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchBar;
|
||||
32
lab4/src/index.css
Normal file
32
lab4/src/index.css
Normal file
@ -0,0 +1,32 @@
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.btn-mw {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.btn-mw {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.btn-mw {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
body{
|
||||
background-color:#194F75;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
67
lab4/src/main.jsx
Normal file
67
lab4/src/main.jsx
Normal file
@ -0,0 +1,67 @@
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
|
||||
import App from './App.jsx';
|
||||
import './index.css';
|
||||
import ErrorPage from './pages/ErrorPage.jsx';
|
||||
import Page1 from './pages/Page1.jsx';
|
||||
import Signup from './pages/signup.jsx';
|
||||
import Login from './pages/Login.jsx';
|
||||
import Admin from './pages/Admin.jsx';
|
||||
import PageEdit from './pages/PageEdit.jsx';
|
||||
import Selected from './pages/Selected.jsx';
|
||||
import Search from './pages/Search.jsx';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
index: true,
|
||||
path: '/',
|
||||
element: <Page1 />,
|
||||
title: 'Главная страница',
|
||||
},
|
||||
{
|
||||
path: '/signup',
|
||||
element: <Signup />,
|
||||
title: 'Вторая страница',
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
element: <Login />,
|
||||
title: 'Третья страница',
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
element: <Admin />,
|
||||
title: 'Четвертая страница',
|
||||
},
|
||||
{
|
||||
path: '/add',
|
||||
element: <PageEdit />,
|
||||
},
|
||||
{
|
||||
path: '/selected',
|
||||
element: <Selected />,
|
||||
title: 'Страница выбора',
|
||||
},
|
||||
{
|
||||
path: '/search',
|
||||
element: <Search />,
|
||||
title: 'Страница поиска',
|
||||
},
|
||||
];
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <App routes={routes} />,
|
||||
children: routes,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
]);
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
23
lab4/src/pages/Admin.jsx
Normal file
23
lab4/src/pages/Admin.jsx
Normal file
@ -0,0 +1,23 @@
|
||||
import { Button, Table } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Admin = () => {
|
||||
return (
|
||||
<>
|
||||
<Button as={Link} to="/add" variant="success">Добавить Фильм</Button>
|
||||
<Table className="mt-2" striped>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Название</th>
|
||||
<th scope="col">Редактировать</th>
|
||||
<th scope="col">Удалить</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</Table>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Admin;
|
||||
19
lab4/src/pages/ErrorPage.jsx
Normal file
19
lab4/src/pages/ErrorPage.jsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { Alert, Button, Container } from 'react-bootstrap';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const ErrorPage = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Container fluid className="p-2 row justify-content-center">
|
||||
<Container className='col-md-6'>
|
||||
<Alert variant="danger">
|
||||
Страница не найдена
|
||||
</Alert>
|
||||
<Button className="w-25 mt-2" variant="primary" onClick={() => navigate(-1)}>Назад</Button>
|
||||
</Container>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorPage;
|
||||
34
lab4/src/pages/Login.jsx
Normal file
34
lab4/src/pages/Login.jsx
Normal file
@ -0,0 +1,34 @@
|
||||
import { Form, Button } from 'react-bootstrap';
|
||||
import { useState } from 'react';
|
||||
|
||||
const Login = () => {
|
||||
const [validated, setValidated] = useState(false);
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
const form = event.currentTarget;
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
setValidated(true);
|
||||
};
|
||||
return (
|
||||
<Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-2">
|
||||
<Form.Label className="form-label">Войдите</Form.Label>
|
||||
<Form.Control type="text" name="name"
|
||||
placeholder='Введите имя пользователя/email' required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2">
|
||||
<Form.Control type="text" name="password"
|
||||
placeholder='Введите пароль' required />
|
||||
</Form.Group>
|
||||
<Form.Group className="d-flex flex-md-row flex-column justify-content-center">
|
||||
<Button className="btn-mw me-md-3" type="submit" variant="primary">Войти</Button>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
65
lab4/src/pages/Page1.jsx
Normal file
65
lab4/src/pages/Page1.jsx
Normal file
@ -0,0 +1,65 @@
|
||||
import { Row, Container } from 'react-bootstrap';
|
||||
import FilmLogo from '../components/filmLogo/FilmLogo.jsx';
|
||||
import Genre from '../components/genre/Genre.jsx';
|
||||
|
||||
const Page1 = () => {
|
||||
return (
|
||||
<Container fluid className="flex-shrink-0 p-0">
|
||||
<section className="d-flex align-items-center justify-content-center">
|
||||
<div>
|
||||
<Row className="justify-content-center pt-2">
|
||||
<p className="text-center text-white fs-2 fw-normal font-family-Average Sans">
|
||||
Популярные сейчас
|
||||
</p>
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
<section className="d-flex justify-content-evenly ">
|
||||
<Row className="row p-2 m-2 align-items-center justify-content-center">
|
||||
<FilmLogo logoName={'fire'}>
|
||||
|
||||
</FilmLogo>
|
||||
<FilmLogo logoName={'harry'}>
|
||||
|
||||
</FilmLogo>
|
||||
<FilmLogo logoName={'fire'}>
|
||||
|
||||
</FilmLogo>
|
||||
<FilmLogo logoName={'fire'}>
|
||||
|
||||
</FilmLogo>
|
||||
</Row>
|
||||
</section>
|
||||
<section className="d-flex justify-content-center">
|
||||
<Row className="m-3 justify-content-evenly w-100 text-break">
|
||||
<Genre genreName={'Ужасы'}>
|
||||
|
||||
</Genre>
|
||||
<Genre genreName={'Ужасы'}>
|
||||
|
||||
</Genre>
|
||||
<Genre genreName={'Ужасы'}>
|
||||
|
||||
</Genre>
|
||||
<Genre genreName={'Ужасы'}>
|
||||
|
||||
</Genre>
|
||||
<Genre genreName={'Ужасы'}>
|
||||
|
||||
</Genre>
|
||||
<Genre genreName={'Ужасы'}>
|
||||
|
||||
</Genre>
|
||||
<Genre genreName={'Ужасы'}>
|
||||
|
||||
</Genre>
|
||||
<Genre genreName={'Ужасы'}>
|
||||
|
||||
</Genre>
|
||||
</Row>
|
||||
</section>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page1;
|
||||
57
lab4/src/pages/PageEdit.jsx
Normal file
57
lab4/src/pages/PageEdit.jsx
Normal file
@ -0,0 +1,57 @@
|
||||
import { useState } from 'react';
|
||||
import { Button, Form } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const PageEdit = () => {
|
||||
const [validated, setValidated] = useState(false);
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
const form = event.currentTarget;
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
setValidated(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="text-center">
|
||||
<img id="image-preview" src="https://via.placeholder.com/200" className=""
|
||||
alt="placeholder" />
|
||||
</div>
|
||||
<Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-2" controlId="name">
|
||||
<Form.Label htmlFor="desc" className="form-label">Описание</Form.Label>
|
||||
<Form.Control as="textarea" name="name" rows={5}
|
||||
placeholder='Описание' required/>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="email">
|
||||
<Form.Label htmlFor="actrs" className="form-label">Актеры</Form.Label>
|
||||
<Form.Control type="text" name="actrs"
|
||||
placeholder='Актеры' required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="password">
|
||||
<Form.Label htmlFor="genres" className="form-label">Жанры</Form.Label>
|
||||
<Form.Control type="text" name="genres"
|
||||
placeholder='Жанры' required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="file">
|
||||
<Form.Label>Изображение</Form.Label>
|
||||
<Form.Control type="file" name="image" accept="image/*" />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="file">
|
||||
<Form.Label>Файл</Form.Label>
|
||||
<Form.Control type="file" name="file"/>
|
||||
</Form.Group>
|
||||
<Form.Group className="d-flex flex-md-row flex-column justify-content-center">
|
||||
<Button className="btn-mw me-md-3 mb-md-0 mb-2" as={Link} to="/admin" variant="secondary">Назад</Button>
|
||||
<Button className="btn-mw me-md-3" type="submit" variant="primary">Сохранить</Button>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageEdit;
|
||||
14
lab4/src/pages/Search.jsx
Normal file
14
lab4/src/pages/Search.jsx
Normal file
@ -0,0 +1,14 @@
|
||||
import SearchBar from '../components/searchbar/SearchBar.jsx';
|
||||
import FilmRow from '../components/filmRow/FilmRow.jsx';
|
||||
|
||||
const Search = () => {
|
||||
return (
|
||||
<div className="ms-4">
|
||||
<SearchBar/>
|
||||
<FilmRow/>
|
||||
<FilmRow/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Search;
|
||||
80
lab4/src/pages/Selected.jsx
Normal file
80
lab4/src/pages/Selected.jsx
Normal file
@ -0,0 +1,80 @@
|
||||
import {
|
||||
Row, Col, Image, Button,
|
||||
} from 'react-bootstrap';
|
||||
import image from '../assets/images/fire.jpg';
|
||||
|
||||
const Selected = () => {
|
||||
return (
|
||||
<div className=" w-100">
|
||||
<Row className="p-2 justify-content-center mw-100">
|
||||
<Col lg={6} md={12} className="align-items-center d-flex justify-content-center">
|
||||
<Image
|
||||
className=" w-auto h-auto ms-5"
|
||||
src={image}
|
||||
alt=""
|
||||
fluid
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={6} className="text-wrap px-2 d-flex justify-content-center mt-3">
|
||||
<p className="text-white fs-3 fw-normal font-family-Bayon text-lg-start text-center">
|
||||
Дата выхода: 2020
|
||||
<br />
|
||||
Режиссер:
|
||||
<br />
|
||||
Алексей Нужный
|
||||
<br />В главных ролях:
|
||||
<br />
|
||||
Константин Хабенский, Иван Янковский, Стася Милославская...
|
||||
<br />
|
||||
Язык: Русский
|
||||
</p>
|
||||
</Col>
|
||||
<Col sm={12} className="d-flex justify-content-center m-0 flex-column mt-5">
|
||||
<div className="d-flex justify-content-center">
|
||||
<h1 className="text-white fs-2 fw-normal font-family-Bayon">Огонь</h1>
|
||||
</div>
|
||||
<div className="d-flex text-wrap me-3">
|
||||
<p
|
||||
className="text-white fs-5 fw-normal font-family-Bayon text-lg-center mb-0 px-3 py-2"
|
||||
>
|
||||
Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей,
|
||||
которые борются с неистовой огненной стихией, уничтожающей всё на
|
||||
своем пути. Герои работают в эпицентре лесного пожара и приходят на
|
||||
помощь жителям близлежащей деревни. Константин Хабенский, Иван
|
||||
Янковский и Стася Милославская в зрелищном героическом блокбастере
|
||||
от режиссера Алексея Нужного и создателей кинохитов «Движение
|
||||
вверх», «Экипаж», «Легенда № 17».
|
||||
<br />
|
||||
Наступает тяжелый сезон разрушительных лесных пожаров. Борьба с ними
|
||||
не на жизнь, а на смерть разворачивается возле маленького села
|
||||
Ольхово в Карелии. На вызов прибыла бригада из шести пожарных во
|
||||
главе с опытным инструктором Алексеем Павловичем Соколовым. У
|
||||
каждого члена группы своя история: кто-то уже потерял в огне самых
|
||||
близких, кого-то с беспокойством ждут дома. Есть среди них и новичок
|
||||
– самоуверенный красавец Роман Ильин. Он ухаживает за дочкой
|
||||
Соколова Катей, работающей на базе в диспетчерской. Вот только
|
||||
отношения с самим Алексеем Павловичем у Ильина не задались – и это
|
||||
мягко говоря. Конфликт нарастает перед лицом свирепого пожара,
|
||||
угрожающего деревенским жителям, которых приходится эвакуировать в
|
||||
экстремальных условиях.
|
||||
</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="justify-content-center w-100">
|
||||
<Col lg={3} md={6} xs={12} className="justify-content-center align-items-center d-flex">
|
||||
<Button className="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3 align-items-center">
|
||||
Смотреть
|
||||
</Button>
|
||||
</Col>
|
||||
<Col lg={3} md={6} xs={12} className="justify-content-center align-items-center d-flex">
|
||||
<Button className="d-flex btn btn-primary justify-content-centerp-5 p-5 fs-5 m-3 align-items-center">
|
||||
Добавить в избранное
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Selected;
|
||||
42
lab4/src/pages/signup.jsx
Normal file
42
lab4/src/pages/signup.jsx
Normal file
@ -0,0 +1,42 @@
|
||||
import { Form, Button } from 'react-bootstrap';
|
||||
import { useState } from 'react';
|
||||
|
||||
const Signup = () => {
|
||||
const [validated, setValidated] = useState(false);
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
const form = event.currentTarget;
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
setValidated(true);
|
||||
};
|
||||
return (
|
||||
<Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-2">
|
||||
<Form.Label className="form-label">Зарегистрируйтесь</Form.Label>
|
||||
<Form.Control type="text" name="name"
|
||||
placeholder='Введите имя пользователя' required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2">
|
||||
<Form.Control type="text" name="email"
|
||||
placeholder='Введите email' required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2">
|
||||
<Form.Control type="text" name="password"
|
||||
placeholder='Введите пароль' required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2">
|
||||
<Form.Control type="text" name="repPassword"
|
||||
placeholder='Повторите пароль' required />
|
||||
</Form.Group>
|
||||
<Form.Group className="d-flex flex-md-row flex-column justify-content-center">
|
||||
<Button className="btn-mw me-md-3" type="submit" variant="primary">Зарегистрироваться</Button>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default Signup;
|
||||
13
lab4/vite.config.js
Normal file
13
lab4/vite.config.js
Normal file
@ -0,0 +1,13 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
build: {
|
||||
sourcemap: true,
|
||||
chunkSizeWarningLimit: 1024,
|
||||
emptyOutDir: true,
|
||||
},
|
||||
});
|
||||
BIN
lab4/Лаб4 отчет.docx
Normal file
BIN
lab4/Лаб4 отчет.docx
Normal file
Binary file not shown.
24
lab5/.eslintrc.cjs
Normal file
24
lab5/.eslintrc.cjs
Normal file
@ -0,0 +1,24 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'airbnb-base',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 12, sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
'indent': 'off',
|
||||
'no-console': 'off',
|
||||
'arrow-body-style': 'off',
|
||||
'implicit-arrow-linebreak': 'off',
|
||||
},
|
||||
}
|
||||
24
lab5/.gitignore
vendored
Normal file
24
lab5/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
29
lab5/README.md
Normal file
29
lab5/README.md
Normal file
@ -0,0 +1,29 @@
|
||||
#### Окружение:
|
||||
- nodejs 18;
|
||||
- VSCode;
|
||||
- ESLint плагин для VSCode;
|
||||
- для отладки необходимы бразузеры Chrome или Edge.
|
||||
|
||||
#### Создание пустого проекта:
|
||||
|
||||
```commandline
|
||||
npm create vite@latest ./ -- --template react
|
||||
```
|
||||
|
||||
#### Установка зависимостей:
|
||||
|
||||
```commandline
|
||||
npm install
|
||||
```
|
||||
|
||||
#### Запуск проекта:
|
||||
|
||||
```commandline
|
||||
npm run dev
|
||||
```
|
||||
|
||||
#### Сборка проекта:
|
||||
|
||||
```commandline
|
||||
npm run build
|
||||
```
|
||||
103
lab5/data.json
Normal file
103
lab5/data.json
Normal file
File diff suppressed because one or more lines are too long
14
lab5/index.html
Normal file
14
lab5/index.html
Normal file
@ -0,0 +1,14 @@
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Онлайн-кинотеатр</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
15
lab5/jsconfig.json
Normal file
15
lab5/jsconfig.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"target": "ES2020",
|
||||
"jsx": "react",
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"sourceMap": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"**/node_modules/*"
|
||||
]
|
||||
}
|
||||
5
lab5/json-server.json
Normal file
5
lab5/json-server.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"static": "./node_modules/json-server/public",
|
||||
"port": 8081,
|
||||
"watch": "true"
|
||||
}
|
||||
5976
lab5/package-lock.json
generated
Normal file
5976
lab5/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
39
lab5/package.json
Normal file
39
lab5/package.json
Normal file
@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "lec4",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"rest": "json-server data.json",
|
||||
"vite": "vite",
|
||||
"dev": "npm-run-all --parallel rest vite",
|
||||
"prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.6.1",
|
||||
"bootstrap": "^5.3.2",
|
||||
"primereact": "^10.3.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.9.1",
|
||||
"react-bootstrap-icons": "^1.10.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
"react-router-dom": "^6.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.15",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-plugin-import": "^2.29.0",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"json-server": "^0.17.4",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"vite": "^4.4.5"
|
||||
}
|
||||
}
|
||||
3
lab5/public/favicon.svg
Normal file
3
lab5/public/favicon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
|
||||
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 463 B |
0
lab5/src/App.css
Normal file
0
lab5/src/App.css
Normal file
42
lab5/src/App.jsx
Normal file
42
lab5/src/App.jsx
Normal file
@ -0,0 +1,42 @@
|
||||
import { Container } from 'react-bootstrap';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'react';
|
||||
import './App.css';
|
||||
import Footer from './components/footer/Footer.jsx';
|
||||
import Header from './components/header/Header.jsx';
|
||||
import UserContext from './components/users/UserContext.jsx';
|
||||
import useUsers from './components/users/UsersHook';
|
||||
import CurrentUserApiService from './components/users/CurrentUserApiService';
|
||||
|
||||
const App = () => {
|
||||
const { user, setUser } = useUsers(-1);
|
||||
const [logged, setLogged] = useState(false);
|
||||
const [currentUser, setCurrentUser] = useState(null);
|
||||
const load = async () => {
|
||||
const data = await CurrentUserApiService.get('');
|
||||
if (data.id !== '') {
|
||||
setCurrentUser(data);
|
||||
console.log(currentUser);
|
||||
setLogged(true);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
load();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<UserContext.Provider value={{
|
||||
user, setUser, logged, setLogged, currentUser, setCurrentUser,
|
||||
}}>
|
||||
<Header/>
|
||||
<Container className='p-0' as="main" fluid>
|
||||
<Outlet />
|
||||
</Container>
|
||||
</UserContext.Provider>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
5
lab5/src/Selected.css
Normal file
5
lab5/src/Selected.css
Normal file
@ -0,0 +1,5 @@
|
||||
#norm{
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
object-fit: cover;
|
||||
}
|
||||
BIN
lab5/src/assets/200.png
Normal file
BIN
lab5/src/assets/200.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
lab5/src/assets/images/bro.jpg
Normal file
BIN
lab5/src/assets/images/bro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
lab5/src/assets/images/fire.jpg
Normal file
BIN
lab5/src/assets/images/fire.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
BIN
lab5/src/assets/images/harry.jpg
Normal file
BIN
lab5/src/assets/images/harry.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
BIN
lab5/src/assets/images/noimage.png
Normal file
BIN
lab5/src/assets/images/noimage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
lab5/src/assets/images/nolan.jpg
Normal file
BIN
lab5/src/assets/images/nolan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
40
lab5/src/components/api/ApiClient.js
Normal file
40
lab5/src/components/api/ApiClient.js
Normal file
@ -0,0 +1,40 @@
|
||||
import axios from 'axios';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export class HttpError extends Error {
|
||||
constructor(message = '') {
|
||||
super(message);
|
||||
this.name = 'HttpError';
|
||||
Object.setPrototypeOf(this, new.target.prototype);
|
||||
toast.error(message, { id: 'HttpError' });
|
||||
}
|
||||
}
|
||||
|
||||
function responseHandler(response) {
|
||||
if (response.status === 200 || response.status === 201) {
|
||||
const data = response?.data;
|
||||
if (!data) {
|
||||
throw new HttpError('API Error. No data!');
|
||||
}
|
||||
return data;
|
||||
}
|
||||
throw new HttpError(`API Error! Invalid status code ${response.status}!`);
|
||||
}
|
||||
|
||||
function responseErrorHandler(error) {
|
||||
if (error === null) {
|
||||
throw new Error('Unrecoverable error!! Error is null!');
|
||||
}
|
||||
toast.error(error.message, { id: 'AxiosError' });
|
||||
return Promise.reject(error.message);
|
||||
}
|
||||
|
||||
export const ApiClient = axios.create({
|
||||
baseURL: 'http://localhost:8081/',
|
||||
timeout: '3000',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
ApiClient.interceptors.response.use(responseHandler, responseErrorHandler);
|
||||
33
lab5/src/components/api/ApiService.js
Normal file
33
lab5/src/components/api/ApiService.js
Normal file
@ -0,0 +1,33 @@
|
||||
import { ApiClient } from './ApiClient';
|
||||
|
||||
class ApiService {
|
||||
constructor(url) {
|
||||
this.url = url;
|
||||
}
|
||||
|
||||
async getAll(expand) {
|
||||
return ApiClient.get(`${this.url}${expand || ''}`);
|
||||
}
|
||||
|
||||
async get(id, expand) {
|
||||
return ApiClient.get(`${this.url}/${id}${expand || ''}`);
|
||||
}
|
||||
|
||||
async create(body) {
|
||||
return ApiClient.post(this.url, body);
|
||||
}
|
||||
|
||||
async update(id, body) {
|
||||
return ApiClient.put(`${this.url}/${id}`, body);
|
||||
}
|
||||
|
||||
async delete(id) {
|
||||
return ApiClient.delete(`${this.url}/${id}`);
|
||||
}
|
||||
|
||||
async deleteTable() {
|
||||
return ApiClient.delete(`${this.url}`);
|
||||
}
|
||||
}
|
||||
|
||||
export default ApiService;
|
||||
5
lab5/src/components/filmLogo/FilmLogo.css
Normal file
5
lab5/src/components/filmLogo/FilmLogo.css
Normal file
@ -0,0 +1,5 @@
|
||||
#normRaz {
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
object-fit: cover;
|
||||
}
|
||||
27
lab5/src/components/filmLogo/FilmLogo.jsx
Normal file
27
lab5/src/components/filmLogo/FilmLogo.jsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { Col, Image } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import useLinesItem from '../lines/hooks/LinesItemHook';
|
||||
import imgPlaceholder from '../../assets/200.png';
|
||||
import './FilmLogo.css';
|
||||
|
||||
const FilmLogo = ({ id }) => {
|
||||
const { item } = useLinesItem(id);
|
||||
const imag = item.image ?? imgPlaceholder;
|
||||
return (
|
||||
<Col xs={12} sm={6} lg={3}
|
||||
className="w-auto h-auto m-2"
|
||||
>
|
||||
<Link to={`/selected/${id}`} >
|
||||
<Image src={imag} fluid alt="" id="normRaz"/>
|
||||
</Link>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
FilmLogo.propTypes = {
|
||||
logoName: PropTypes.string,
|
||||
id: PropTypes.number,
|
||||
};
|
||||
|
||||
export default FilmLogo;
|
||||
8
lab5/src/components/filmRow/FilmRow.css
Normal file
8
lab5/src/components/filmRow/FilmRow.css
Normal file
@ -0,0 +1,8 @@
|
||||
.FilmLogoRow{
|
||||
min-width: 300px;
|
||||
min-height: 500px;
|
||||
object-fit: cover;
|
||||
}
|
||||
#name {
|
||||
font-size: 3em;
|
||||
}
|
||||
46
lab5/src/components/filmRow/FilmRow.jsx
Normal file
46
lab5/src/components/filmRow/FilmRow.jsx
Normal file
@ -0,0 +1,46 @@
|
||||
import {
|
||||
Row, Col, Button,
|
||||
} from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import FilmLogo from '../filmLogo/FilmLogo.jsx';
|
||||
import useLinesItem from '../lines/hooks/LinesItemHook';
|
||||
import Genre from '../genre/Genre.jsx';
|
||||
import './FilmRow.css';
|
||||
|
||||
const FilmRow = ({ id }) => {
|
||||
const { item } = useLinesItem(id);
|
||||
return (
|
||||
<Row className="m-2 my-5">
|
||||
<Col xs={12} lg={3}>
|
||||
<FilmLogo id={Number(id)}/>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} xl={8} className="d-flex flex-column p-0 justify-content-center">
|
||||
<div className="d-flex p-1 ps-0 justify-content-center mw-100 mh-100 mx-4">
|
||||
<p className="text-white fw-normal font-family-Bayon text-center" id="name">
|
||||
{item.name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="d-flex p-1 ps-0 justify-content-center mw-100 mh-100 mx-4">
|
||||
<p className="text-white fs-5 fw-normal font-family-Bayon text-center text-break">
|
||||
{item.descp.substring(0, 192)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="d-flex p-2 ps-0 pb-2 justify-content-center mw-100 mh-100">
|
||||
<Genre id={Number(item.genreId)}/>
|
||||
</div>
|
||||
<Button as={Link} to={`/selected/${item.id}`} className="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3 align-items-center">
|
||||
Перейти
|
||||
</Button>
|
||||
<Button className="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3 align-items-center">
|
||||
Смотреть позже
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
FilmRow.propTypes = {
|
||||
id: PropTypes.string,
|
||||
};
|
||||
|
||||
export default FilmRow;
|
||||
3
lab5/src/components/footer/Footer.css
Normal file
3
lab5/src/components/footer/Footer.css
Normal file
@ -0,0 +1,3 @@
|
||||
.bg-dark-blue{
|
||||
background-color: #2B82CF;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user