Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c1b57c430d | |||
| c781252cb3 | |||
| 73684e5b85 | |||
| 44613e9378 | |||
| 7135b70eff | |||
| a01cfe98e4 |
24
.eslintrc.cjs
Normal file
24
.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',
|
||||
},
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
59
.gitignore
vendored
59
.gitignore
vendored
@@ -1,45 +1,24 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.idea
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Ignore dist
|
||||
dist/
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
# Отчёт по лабораторной работе №3
|
||||
# Отчёт по лабораторной работе №5
|
||||
|
||||
Файл отчета: `Отчет лаб3.docx`
|
||||
Файл отчета: `Отчет лаб5.docx`
|
||||
|
||||
178
about_us.html
178
about_us.html
@@ -1,178 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>О нас</title>
|
||||
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
<header>
|
||||
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-md">
|
||||
<a href="index.html" class="navbar-brand">
|
||||
<i class="bi bi-film"></i>
|
||||
<span class="fw-bold text-uppercase ms-2">СигмаТеатр</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item me-3">
|
||||
<a href="index.html#movies" class="nav-link">Фильмы</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="index.html#series" class="nav-link">Сериалы</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="about_us.html" class="nav-link">Справка</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="login.html" class="nav-link">Вход в аккаунт</a>
|
||||
</li>
|
||||
<li class="nav-item d-lg-none">
|
||||
<a href="pricing.html" class="nav-link text-light">Купить подписку</a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-lg-inline">
|
||||
<a href="pricing.html" class="btn btn-light">Купить подписку</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Contact Info -->
|
||||
<section id="contact-info">
|
||||
<div class="container-md py-4">
|
||||
<div class="row gx-5 gy-5">
|
||||
<div class="col-lg-5">
|
||||
<h2 class="text-center mb-5">Контактные данные</h2>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">
|
||||
<span class="fw-bold">Страна:</span> Россия
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="fw-bold">Адрес:</span> 432029, Ульяновск
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="fw-bold">Телефон:</span> +7 (987) 654 32-10
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="fw-bold">Факс:</span> +49 221 95491533
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="fw-bold">Электронная почта:</span> sigmacinema@gmail.com
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="fw-bold">ИНН:</span> 7743013902
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-7">
|
||||
<h2 class="text-center mb-5">Мы на карте</h2>
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed/v1/place?q=Ульяновск,+Россия,+432029&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
|
||||
width="100%" height="500" allowfullscreen="" loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Feedback -->
|
||||
<section id="feedback" class="bg-light">
|
||||
<div class="container-md py-4 mt-5">
|
||||
<div class="text-center">
|
||||
<h2>Остались вопросы?</h2>
|
||||
<p class="lead text-muted">Задайте ваш вопрос нашей службе поддержки - мы постараемся ответить на него в ближайшее время</p>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mt-5">
|
||||
<div class="col-lg-6">
|
||||
<form>
|
||||
<label for="email" class="form-label">Ваш адрес электронной почты</label>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
|
||||
<input type="email" class="form-control" id="email" placeholder="myemail@mail.com">
|
||||
</div>
|
||||
|
||||
<label for="name" class="form-label">Ваше имя</label>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text"><i class="bi bi-person-fill"></i></span>
|
||||
<input type="text" class="form-control" id="name" placeholder="Иванов Иван">
|
||||
</div>
|
||||
|
||||
<label for="subject" class="form-label">О чем ваш вопрос?</label>
|
||||
<div class="input-group mb-4">
|
||||
<span class="input-group-text"><i class="bi bi-chat-right-dots-fill"></i></span>
|
||||
<select id="subject" class="form-select">
|
||||
<option value="pricing" selected>Оплата подписки</option>
|
||||
<option value="content">Фильмы или сериалы</option>
|
||||
<option value="other">Другое</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<textarea id="query" class="form-control" style="height: 140px" placeholder="Ваш вопрос..."></textarea>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button type="submit" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#querry-modal">
|
||||
Отправить
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Querry Modal -->
|
||||
<div class="modal fade" id="querry-modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modal-title">Ваш вопрос отправлен</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus cum nihil. Minus, porro.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="py-2 bg-dark text-light mt-auto">
|
||||
<div class="container-md py-2">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="download-buttons-container justify-content-start">
|
||||
<a href="https://play.google.com/store/games?hl=ru&gl=US"><img src="assets/footer/download-buttons/GooglePlay.svg" class="download-button" alt=""></a>
|
||||
<a href="https://www.huawei.ru/appgallery/"><img src="assets/footer/download-buttons/AppGallery.svg" class="download-button" alt=""></a>
|
||||
<a href="https://www.apple.com/app-store/"><img src="assets/footer/download-buttons/AppStore.svg" class="download-button" alt=""></a>
|
||||
</div>
|
||||
<h6 class="text-secondary mt-3">© 2023 СигмаТеатр</h6>
|
||||
</div>
|
||||
<div class="download-buttons-container">
|
||||
<a href="index.html" class="text-secondary text-decoration-none footer-navigation-button">Главная</a>
|
||||
<a href="#" class="text-secondary text-decoration-none footer-navigation-button">Политика конфиденциальности</a>
|
||||
<a href="about_us.html" class="text-secondary text-decoration-none footer-navigation-button">О нас</a>
|
||||
<a href="admin_panel.html" class="text-secondary text-decoration-none footer-navigation-button">Страница администратора</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
226
admin_panel.html
226
admin_panel.html
@@ -1,226 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CRUD администрирование</title>
|
||||
|
||||
<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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
<header>
|
||||
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-md">
|
||||
<a href="index.html" class="navbar-brand">
|
||||
<i class="bi bi-film"></i>
|
||||
<span class="fw-bold text-uppercase ms-2">СигмаТеатр</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item me-3">
|
||||
<a href="index.html#movies" class="nav-link">Фильмы</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="index.html#series" class="nav-link">Сериалы</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="about_us.html" class="nav-link">Справка</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="login.html" class="nav-link">Вход в аккаунт</a>
|
||||
</li>
|
||||
<li class="nav-item d-lg-none">
|
||||
<a href="pricing.html" class="nav-link text-light">Купить подписку</a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-lg-inline">
|
||||
<a href="pricing.html" class="btn btn-light">Купить подписку</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="movies">
|
||||
<div class="container-md py-4 mb-4">
|
||||
<div class="text-center">
|
||||
<h2>Страница администратора</h2>
|
||||
<p class="lead text-muted">Выполнение CRUD-операций над фильмами или сериалами</p>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" id="addMovieButton">Добавить запись</button>
|
||||
|
||||
<table id="items-table" class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<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" class="w-25">Год производства</th>
|
||||
<th scope="col"></th>
|
||||
<th scope="col"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr id="line-1">
|
||||
<th scope="row">1</th>
|
||||
<td>Американский психопат</td>
|
||||
<td>Фильм</td>
|
||||
<td>+</td>
|
||||
<td>1999</td>
|
||||
<td><a href="#"><i class="fa-solid fa-pencil"></i></a></td>
|
||||
<td><a href="#"><i class="fa-solid fa-trash"></i></a></td>
|
||||
</tr>
|
||||
|
||||
<tr id="line-2">
|
||||
<th scope="row">2</th>
|
||||
<td>Драйв</td>
|
||||
<td>Фильм</td>
|
||||
<td>-</td>
|
||||
<td>1999</td>
|
||||
<td><a href="#"><i class="fa-solid fa-pencil"></i></a></td>
|
||||
<td><a href="#"><i class="fa-solid fa-trash"></i></a></td>
|
||||
</tr>
|
||||
|
||||
<tr id="line-3">
|
||||
<th scope="row">3</th>
|
||||
<td>Острые козырьки</td>
|
||||
<td>Сериал</td>
|
||||
<td>-</td>
|
||||
<td>1999</td>
|
||||
<td><a href="#"><i class="fa-solid fa-pencil"></i></a></td>
|
||||
<td><a href="#"><i class="fa-solid fa-trash"></i></a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="py-2 bg-dark text-light mt-auto">
|
||||
<div class="container-md py-2">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="download-buttons-container justify-content-start">
|
||||
<a href="https://play.google.com/store/games?hl=ru&gl=US"><img src="assets/footer/download-buttons/GooglePlay.svg" class="download-button" alt=""></a>
|
||||
<a href="https://www.huawei.ru/appgallery/"><img src="assets/footer/download-buttons/AppGallery.svg" class="download-button" alt=""></a>
|
||||
<a href="https://www.apple.com/app-store/"><img src="assets/footer/download-buttons/AppStore.svg" class="download-button" alt=""></a>
|
||||
</div>
|
||||
<h6 class="text-secondary mt-3">© 2023 СигмаТеатр</h6>
|
||||
</div>
|
||||
<div class="download-buttons-container">
|
||||
<a href="index.html" class="text-secondary text-decoration-none footer-navigation-button">Главная</a>
|
||||
<a href="#" class="text-secondary text-decoration-none footer-navigation-button">Политика конфиденциальности</a>
|
||||
<a href="about_us.html" class="text-secondary text-decoration-none footer-navigation-button">О нас</a>
|
||||
<a href="admin_panel.html" class="text-secondary text-decoration-none footer-navigation-button">Страница администратора</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- CRUD modal -->
|
||||
<div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
|
||||
<div class="modal-dialog">
|
||||
<form id="items-form" class="needs-validation" novalidate>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="items-update-title"></h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="text-center">
|
||||
<img id="image-preview" src="https://via.placeholder.com/200" class="image-preview"
|
||||
alt="placeholder">
|
||||
</div>
|
||||
<input id="items-line-id" type="number" hidden>
|
||||
|
||||
<div class="mb-2">
|
||||
<label for="item" class="form-label">Название</label>
|
||||
<input id="title" name="title" class="form-control" type="text" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="type" class="form-label">Тип</label>
|
||||
<select id="type" class="form-select" required>
|
||||
<option value="Фильм" selected>Фильм</option>
|
||||
<option value="Сериал">Сериал</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" class="form-check-input" id="requiresSubscription">
|
||||
<label for="requiresSubscription" class="form-check-label">Требуется подписка</label>
|
||||
</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>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="description">Описание</label>
|
||||
<textarea id="description" class="form-control" style="height: 140px"></textarea>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="releaseDate">Год производства</label>
|
||||
<input id="releaseDate" name="releaseDate" class="form-control" type="number" min="1900" step="1"
|
||||
required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="country" class="form-label">Страна</label>
|
||||
<input id="country" name="country" class="form-control" type="text" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="tagline" class="form-label">Слоган</label>
|
||||
<input id="tagline" name="tagline" class="form-control" type="text" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="director" class="form-label">Режиссер</label>
|
||||
<input id="director" name="director" class="form-control" type="text" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="ageRating" class="form-label">Возрастное ограничение</label>
|
||||
<select id="ageRating" class="form-select" required>
|
||||
<option value="0+" selected>0+</option>
|
||||
<option value="6+">6+</option>
|
||||
<option value="12+">12+</option>
|
||||
<option value="16+">16+</option>
|
||||
<option value="18+">18+</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="video" class="form-label">URL видео</label>
|
||||
<input id="video" name="video" class="form-control" type="text" required>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||||
<button type="submit" class="btn btn-primary">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import validation from "./js/validation";
|
||||
import { tableModal } from './js/admin_panel.js';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
validation();
|
||||
tableModal();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
122
index.html
122
index.html
@@ -1,120 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>СигмаТеатр</title>
|
||||
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>СигмаТеатр</title>
|
||||
</head>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
<header>
|
||||
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-md">
|
||||
<a href="index.html" class="navbar-brand">
|
||||
<i class="bi bi-film"></i>
|
||||
<span class="fw-bold text-uppercase ms-2">СигмаТеатр</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item me-3">
|
||||
<a href="index.html#movies" class="nav-link">Фильмы</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="index.html#series" class="nav-link">Сериалы</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="about_us.html" class="nav-link">Справка</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="login.html" class="nav-link">Вход в аккаунт</a>
|
||||
</li>
|
||||
<li class="nav-item d-lg-none">
|
||||
<a href="pricing.html" class="nav-link text-light">Купить подписку</a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-lg-inline">
|
||||
<a href="pricing.html" class="btn btn-light">Купить подписку</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="movies">
|
||||
<div class="container-md py-4 mb-4">
|
||||
<div class="text-center">
|
||||
<h2>Самые базированные фильмы</h2>
|
||||
<p class="lead text-muted">Здесь собраны ваши любимые кинофильмы</p>
|
||||
</div>
|
||||
|
||||
<div class="row gx-5 gy-5 my-3">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="series" class="bg-light">
|
||||
<div class="container-md py-4">
|
||||
<div class="text-center">
|
||||
<h2>Популярные сериалы</h2>
|
||||
<p class="lead text-muted">Сериалы, главные герои которых - буквально вы</p>
|
||||
</div>
|
||||
|
||||
<div class="row gx-5 gy-5 my-3">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="py-2 bg-dark text-light mt-auto">
|
||||
<div class="container-md py-2">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="download-buttons-container justify-content-start">
|
||||
<a href="https://play.google.com/store/games?hl=ru&gl=US"><img
|
||||
src="assets/footer/download-buttons/GooglePlay.svg" class="download-button" alt=""></a>
|
||||
<a href="https://www.huawei.ru/appgallery/"><img
|
||||
src="assets/footer/download-buttons/AppGallery.svg" class="download-button" alt=""></a>
|
||||
<a href="https://www.apple.com/app-store/"><img
|
||||
src="assets/footer/download-buttons/AppStore.svg" class="download-button" alt=""></a>
|
||||
</div>
|
||||
<h6 class="text-secondary mt-3">© 2023 СигмаТеатр</h6>
|
||||
</div>
|
||||
<div class="download-buttons-container">
|
||||
<a href="index.html"
|
||||
class="text-secondary text-decoration-none footer-navigation-button">Главная</a>
|
||||
<a href="#" class="text-secondary text-decoration-none footer-navigation-button">Политика
|
||||
конфиденциальности</a>
|
||||
<a href="about_us.html" class="text-secondary text-decoration-none footer-navigation-button">О
|
||||
нас</a>
|
||||
<a href="admin_panel.html"
|
||||
class="text-secondary text-decoration-none footer-navigation-button">Страница администратора</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="module">
|
||||
import renderMovies from './js/main_page.js';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
renderMovies();
|
||||
});
|
||||
</script>
|
||||
<body>
|
||||
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -1,145 +0,0 @@
|
||||
import {
|
||||
getMovies, createMovie, updateMovie, deleteMovie,
|
||||
} from './rest_api';
|
||||
|
||||
import { hideUpdateModal, showUpdateModal } from './table_modal';
|
||||
|
||||
import {
|
||||
controls, imagePlaceholder, addTableRow,
|
||||
} from './admin_panel_ui';
|
||||
|
||||
export async function showAllMovieEntries() {
|
||||
const tableBody = document.querySelector('tbody');
|
||||
console.log(tableBody);
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
const movies = await getMovies();
|
||||
movies.forEach((movie, index) => {
|
||||
tableBody.appendChild(
|
||||
addTableRow(
|
||||
movie,
|
||||
index,
|
||||
() => showUpdateModal(movie),
|
||||
() => removeMovieObject(movie.id),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
async function addMovieObject(serializedMovieObject) {
|
||||
const data = await createMovie(serializedMovieObject);
|
||||
console.info("Added");
|
||||
console.info(data);
|
||||
|
||||
showAllMovieEntries();
|
||||
}
|
||||
|
||||
async function editMovieObject(id, serializedMovieObject) {
|
||||
const data = await updateMovie(id, serializedMovieObject);
|
||||
console.info("Updated");
|
||||
console.info(data);
|
||||
|
||||
showAllMovieEntries();
|
||||
}
|
||||
|
||||
async function removeMovieObject(id) {
|
||||
if (!confirm("Do you really want to remove this item?")) {
|
||||
console.info("Canceled");
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await deleteMovie(id);
|
||||
console.info("Removed");
|
||||
console.info(data);
|
||||
|
||||
showAllMovieEntries();
|
||||
}
|
||||
|
||||
async function readFile(file) {
|
||||
const reader = new FileReader();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
reader.onloadend = () => {
|
||||
const fileContent = reader.result;
|
||||
resolve(fileContent);
|
||||
};
|
||||
|
||||
reader.onerror = () => {
|
||||
reject(new Error("oops, something went wrong with the file reader."));
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
async function updateImagePreview() {
|
||||
const file = controls.image.files[0];
|
||||
const fileContent = await readFile(file);
|
||||
|
||||
controls.imagePreview.src = fileContent;
|
||||
}
|
||||
|
||||
export function tableModal() {
|
||||
showAllMovieEntries();
|
||||
|
||||
controls.image.addEventListener("change", () => updateImagePreview());
|
||||
controls.button.addEventListener("click", () => showUpdateModal(null));
|
||||
|
||||
controls.form.addEventListener("submit", async (event) => {
|
||||
console.info("Form onSubmit");
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (!controls.form.checkValidity()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let imageBase64 = "";
|
||||
|
||||
if (controls.imagePreview.src !== imagePlaceholder) {
|
||||
const result = await fetch(controls.imagePreview.src);
|
||||
const blob = await result.blob();
|
||||
|
||||
imageBase64 = await readFile(blob);
|
||||
}
|
||||
|
||||
const currentId = controls.lineId.value;
|
||||
if (!currentId) {
|
||||
await addMovieObject(
|
||||
{
|
||||
title: controls.title.value,
|
||||
type: controls.type.value,
|
||||
requiresSubscription: controls.requiresSubscription.checked,
|
||||
poster: imageBase64,
|
||||
description: controls.description.value,
|
||||
releaseDate: controls.releaseDate.value,
|
||||
country: controls.country.value,
|
||||
tagline: controls.tagline.value,
|
||||
director: controls.director.value,
|
||||
ageRating: controls.ageRating.value,
|
||||
video: controls.video.value,
|
||||
},
|
||||
);
|
||||
} else {
|
||||
await editMovieObject(
|
||||
currentId,
|
||||
{
|
||||
title: controls.title.value,
|
||||
type: controls.type.value,
|
||||
requiresSubscription: controls.requiresSubscription.checked,
|
||||
poster: imageBase64,
|
||||
description: controls.description.value,
|
||||
releaseDate: controls.releaseDate.value,
|
||||
country: controls.country.value,
|
||||
tagline: controls.tagline.value,
|
||||
director: controls.director.value,
|
||||
ageRating: controls.ageRating.value,
|
||||
video: controls.video.value,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
hideUpdateModal();
|
||||
});
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
export const controls = {
|
||||
button: document.getElementById("addMovieButton"),
|
||||
table: document.querySelector("#items-table tbody"),
|
||||
form: document.getElementById("items-form"),
|
||||
lineId: document.getElementById("items-line-id"),
|
||||
imagePreview: document.getElementById("image-preview"),
|
||||
|
||||
title: document.querySelector('#title'),
|
||||
type: document.querySelector('#type'),
|
||||
requiresSubscription: document.querySelector('#requiresSubscription'),
|
||||
image: document.querySelector('#image'),
|
||||
description: document.querySelector('#description'),
|
||||
releaseDate: document.querySelector('#releaseDate'),
|
||||
country: document.querySelector('#country'),
|
||||
tagline: document.querySelector('#tagline'),
|
||||
director: document.querySelector('#director'),
|
||||
ageRating: document.querySelector('#ageRating'),
|
||||
video: document.querySelector('#video'),
|
||||
};
|
||||
|
||||
export const imagePlaceholder = "https://via.placeholder.com/200";
|
||||
|
||||
export function createTableColumn(value) {
|
||||
const td = document.createElement("td");
|
||||
td.textContent = value;
|
||||
|
||||
return td;
|
||||
}
|
||||
|
||||
export 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) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
callback();
|
||||
};
|
||||
|
||||
const td = document.createElement("td");
|
||||
td.appendChild(a);
|
||||
return td;
|
||||
}
|
||||
|
||||
export function addTableRow(movie, index, editCallback, deleteCallback) {
|
||||
const rowNumber = document.createElement("th");
|
||||
rowNumber.scope = "row";
|
||||
rowNumber.textContent = index + 1;
|
||||
|
||||
const row = document.createElement("tr");
|
||||
row.id = `line-${movie.id}`;
|
||||
|
||||
row.appendChild(rowNumber);
|
||||
row.appendChild(createTableColumn(movie.title));
|
||||
row.appendChild(createTableColumn(movie.type));
|
||||
row.appendChild(createTableColumn(movie.requiresSubscription === true ? 'Да' : 'Нет'));
|
||||
row.appendChild(createTableColumn(movie.releaseDate));
|
||||
row.appendChild(createTableAnchor("fa-pencil", editCallback));
|
||||
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
|
||||
|
||||
return row;
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { getMovies } from './rest_api';
|
||||
|
||||
export async function renderMovies() {
|
||||
const moviesSection = document.querySelector('#movies');
|
||||
const moviesContainer = moviesSection.querySelector('.row');
|
||||
|
||||
const seriesSection = document.querySelector('#series');
|
||||
const seriesContainer = seriesSection.querySelector('.row');
|
||||
|
||||
moviesContainer.innerHTML = '';
|
||||
seriesContainer.innerHTML = '';
|
||||
|
||||
const movies = await getMovies();
|
||||
movies.forEach((movie) => {
|
||||
const movieTemplate = `
|
||||
<div class="col-6 col-lg-3">
|
||||
<a href="videoplayer.html?id=${movie.id}" class="text-decoration-none">
|
||||
<img src="${movie.poster}" class="img-fluid film-poster" alt="">
|
||||
<h5 class="text-black mt-3">${movie.title}</h5>
|
||||
<h6 class="text-secondary">${movie.requiresSubscription === true ? 'По подписке' : 'Бесплатно'}</h6>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (movie.type === 'Фильм') {
|
||||
moviesContainer.innerHTML += movieTemplate;
|
||||
} else if (movie.type === 'Сериал') {
|
||||
seriesContainer.innerHTML += movieTemplate;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default renderMovies;
|
||||
@@ -1,70 +0,0 @@
|
||||
const uri = "http://localhost:8081";
|
||||
|
||||
export async function getMovies() {
|
||||
const response = await fetch(`${uri}/movies`);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function getMovieById(id) {
|
||||
const response = await fetch(`${uri}/movies/${id}`);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function createMovie(serializedMovie) {
|
||||
console.log(serializedMovie);
|
||||
|
||||
const options = {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(serializedMovie),
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
};
|
||||
|
||||
const response = await fetch(`${uri}/movies`, options);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function updateMovie(id, serializedMovie) {
|
||||
const options = {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(serializedMovie),
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
};
|
||||
|
||||
const response = await fetch(`${uri}/movies/${id}`, options);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function deleteMovie(id) {
|
||||
const options = {
|
||||
method: "DELETE",
|
||||
};
|
||||
|
||||
const response = await fetch(`${uri}/movies/${id}`, options);
|
||||
if (!response.ok) {
|
||||
throw response.statusText;
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
import { Modal } from "bootstrap";
|
||||
import { controls, imagePlaceholder } from "./admin_panel_ui";
|
||||
|
||||
const modal = document.getElementById("items-update");
|
||||
const myModal = modal ? new Modal(modal, {}) : null;
|
||||
|
||||
const modalTitle = document.getElementById("items-update-title");
|
||||
|
||||
function resetValues() {
|
||||
controls.lineId.value = "";
|
||||
controls.imagePreview.src = imagePlaceholder;
|
||||
|
||||
controls.title.value = "";
|
||||
controls.type.value = "";
|
||||
controls.requiresSubscription.checked = false;
|
||||
controls.image.value = "";
|
||||
controls.description.value = "";
|
||||
controls.releaseDate.value = "";
|
||||
controls.country.value = "";
|
||||
controls.tagline.value = "";
|
||||
controls.director.value = "";
|
||||
controls.ageRating.value = "";
|
||||
controls.video.value = "";
|
||||
}
|
||||
|
||||
export function showUpdateModal(item) {
|
||||
modalTitle.innerHTML = item === null ? "Добавить" : "Изменить";
|
||||
console.info(item);
|
||||
|
||||
if (item) {
|
||||
controls.lineId.value = item.id;
|
||||
controls.imagePreview.src = item.poster ? item.poster : imagePlaceholder;
|
||||
|
||||
controls.title.value = item.title;
|
||||
controls.type.value = item.type;
|
||||
controls.requiresSubscription.checked = item.requiresSubscription;
|
||||
controls.description.value = item.description;
|
||||
controls.releaseDate.value = item.releaseDate;
|
||||
controls.country.value = item.country;
|
||||
controls.tagline.value = item.tagline;
|
||||
controls.director.value = item.director;
|
||||
controls.ageRating.value = item.ageRating;
|
||||
controls.video.value = item.video;
|
||||
} else {
|
||||
resetValues();
|
||||
}
|
||||
|
||||
myModal.show();
|
||||
}
|
||||
|
||||
export function hideUpdateModal() {
|
||||
resetValues();
|
||||
controls.form.classList.remove("was-validated");
|
||||
|
||||
myModal.hide();
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
function validation() {
|
||||
const forms = document.querySelectorAll("form.needs-validation");
|
||||
|
||||
forms.forEach((form) => {
|
||||
form.addEventListener("submit", (event) => {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
form.classList.add("was-validated");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export default validation;
|
||||
@@ -1,36 +0,0 @@
|
||||
import { getMovieById } from './rest_api';
|
||||
|
||||
export async function loadMovieData() {
|
||||
const id = new URLSearchParams(location.search).get('id');
|
||||
|
||||
const movie = await getMovieById(id);
|
||||
|
||||
document.querySelector('iframe').setAttribute('src', movie.video);
|
||||
document.querySelector('#movieTitle').innerHTML = movie.title;
|
||||
document.querySelector('#movieDescription').innerHTML = movie.description;
|
||||
|
||||
const movieInfoTemplate = `
|
||||
<h3>О фильме</h3>
|
||||
<ul class="list-group list-group-flush my-3">
|
||||
<li class="list-group-item">
|
||||
<span class="fw-bold">Год производства:</span> ${movie.releaseDate}
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="fw-bold">Страна:</span> ${movie.country}
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="fw-bold">Слоган:</span> <span class="text-secondary">«${movie.tagline}»</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="fw-bold">Режиссер:</span> ${movie.director}
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span class="fw-bold">Возраст:</span> ${movie.ageRating}
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
document.querySelector('#movieInfoContainer').innerHTML = movieInfoTemplate;
|
||||
}
|
||||
|
||||
export default loadMovieData;
|
||||
@@ -3,9 +3,10 @@
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"target": "ES2020",
|
||||
"jsx": "preserve",
|
||||
"jsx": "react",
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true
|
||||
"strictFunctionTypes": true,
|
||||
"sourceMap": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
|
||||
5
json-server.json
Normal file
5
json-server.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"static": "./node_modules/json-server/public",
|
||||
"port": 8081,
|
||||
"watch": "true"
|
||||
}
|
||||
173
login.html
173
login.html
@@ -1,173 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Вход в аккаунт</title>
|
||||
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
<header>
|
||||
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-md">
|
||||
<a href="index.html" class="navbar-brand">
|
||||
<i class="bi bi-film"></i>
|
||||
<span class="fw-bold text-uppercase ms-2">СигмаТеатр</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item me-3">
|
||||
<a href="index.html#movies" class="nav-link">Фильмы</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="index.html#series" class="nav-link">Сериалы</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="about_us.html" class="nav-link">Справка</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="login.html" class="nav-link">Вход в аккаунт</a>
|
||||
</li>
|
||||
<li class="nav-item d-lg-none">
|
||||
<a href="pricing.html" class="nav-link text-light">Купить подписку</a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-lg-inline">
|
||||
<a href="pricing.html" class="btn btn-light">Купить подписку</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Login -->
|
||||
<section id="login">
|
||||
<div class="container-sm py-4">
|
||||
<div class="text-center">
|
||||
<h2>Вход в аккаунт</h2>
|
||||
<p class="lead text-muted">Войдите в ваш аккаунт чтобы воспользоваться подпиской и иметь возможность отмечать желаемые фильмы</p>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mt-5">
|
||||
<div class="col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-row justify-content-center">
|
||||
<i class="bi bi-person-circle login-icon text-primary"></i>
|
||||
<p class="lead my-auto ms-3 text-primary">Вход</p>
|
||||
</div>
|
||||
|
||||
<form action="" class="my-3">
|
||||
<label for="email" class="form-label">Электронная почта</label>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
|
||||
<input type="email" class="form-control" id="email" placeholder="myemail@mail.com">
|
||||
</div>
|
||||
|
||||
<label for="password" class="form-label">Пароль</label>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
|
||||
<input type="password" class="form-control" id="password">
|
||||
<div class="input-group-text" id="hidePassword">
|
||||
<a href=""><i class="bi bi-eye-fill"></i></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="input-group mt-4 d-flex justify-content-between">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="formCheck">
|
||||
<label for="formCheck" class="form-check-label text-secondary"><small>Запомнить на этом компьютере</small></label>
|
||||
</div>
|
||||
<div class="forgot">
|
||||
<button class="btn btn-sm text-primary" data-bs-toggle="modal" data-bs-target="#forgot-modal" id="forgotPassword">Забыли пароль?</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-5">
|
||||
<button class="btn btn-primary">Войти</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="py-2 bg-dark text-light mt-auto">
|
||||
<div class="container-md py-2">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="download-buttons-container justify-content-start">
|
||||
<a href="https://play.google.com/store/games?hl=ru&gl=US"><img src="assets/footer/download-buttons/GooglePlay.svg" class="download-button" alt=""></a>
|
||||
<a href="https://www.huawei.ru/appgallery/"><img src="assets/footer/download-buttons/AppGallery.svg" class="download-button" alt=""></a>
|
||||
<a href="https://www.apple.com/app-store/"><img src="assets/footer/download-buttons/AppStore.svg" class="download-button" alt=""></a>
|
||||
</div>
|
||||
<h6 class="text-secondary mt-3">© 2023 СигмаТеатр</h6>
|
||||
</div>
|
||||
<div class="download-buttons-container">
|
||||
<a href="index.html" class="text-secondary text-decoration-none footer-navigation-button">Главная</a>
|
||||
<a href="#" class="text-secondary text-decoration-none footer-navigation-button">Политика конфиденциальности</a>
|
||||
<a href="about_us.html" class="text-secondary text-decoration-none footer-navigation-button">О нас</a>
|
||||
<a href="admin_panel.html" class="text-secondary text-decoration-none footer-navigation-button">Страница администратора</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- modal itself -->
|
||||
<div class="modal fade" id="forgot-modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modal-title">Восстановление пароля</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>В поле ниже напишите адрес электроннной почты, с которой была совершена регистрация. На этот адрес придёт письмо с дальнейшеми указаниями.</p>
|
||||
<label for="modal-email" class="form-label mt-3">Адрес электронной почты:</label>
|
||||
<input type="text" class="form-control" id="modal-email" placeholder="myemail@mail.com">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary">Отправить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelector('#hidePassword').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const inputField = document.querySelector('#password');
|
||||
|
||||
if (inputField.getAttribute('type') === 'password') {
|
||||
inputField.setAttribute('type', 'text');
|
||||
} else {
|
||||
inputField.setAttribute('type', 'password');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelector('#forgotPassword').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
2035
package-lock.json
generated
2035
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
44
package.json
44
package.json
@@ -1,26 +1,38 @@
|
||||
{
|
||||
"name": "int-prog",
|
||||
"version": "1.0.0",
|
||||
"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",
|
||||
"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"
|
||||
"prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "6.4.2",
|
||||
"bootstrap": "^5.3.2"
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.18.0",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
"axios": "^1.6.1",
|
||||
"bootstrap": "^5.3.2",
|
||||
"react-bootstrap": "^2.9.1",
|
||||
"react-bootstrap-icons": "^1.10.3",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "4.4.9",
|
||||
"eslint": "8.50.0",
|
||||
"eslint-config-airbnb-base": "15.0.0",
|
||||
"eslint-plugin-import": "2.28.1",
|
||||
"http-server": "14.1.1",
|
||||
"json-server": "0.17.4",
|
||||
"npm-run-all": "4.1.5"
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.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"
|
||||
}
|
||||
}
|
||||
}
|
||||
160
pricing.html
160
pricing.html
@@ -1,160 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Подписка</title>
|
||||
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
<header>
|
||||
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-md">
|
||||
<a href="index.html" class="navbar-brand">
|
||||
<i class="bi bi-film"></i>
|
||||
<span class="fw-bold text-uppercase ms-2">СигмаТеатр</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item me-3">
|
||||
<a href="index.html#movies" class="nav-link">Фильмы</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="index.html#series" class="nav-link">Сериалы</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="about_us.html" class="nav-link">Справка</a>
|
||||
</li>
|
||||
<li class="nav-item me-3">
|
||||
<a href="login.html" class="nav-link">Вход в аккаунт</a>
|
||||
</li>
|
||||
<li class="nav-item d-lg-none">
|
||||
<a href="pricing.html" class="nav-link text-light">Купить подписку</a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-lg-inline">
|
||||
<a href="pricing.html" class="btn btn-light">Купить подписку</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Subscrition Features -->
|
||||
<section id="subscription-features">
|
||||
<div class="container-md py-5 mb-0">
|
||||
<div class="text-center">
|
||||
<h2>Преимущества подписки</h2>
|
||||
<p class="lead text-muted">Всё лучшее - в одной подписке</p>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-between align-items-center my-5 gy-5">
|
||||
<div class="col-lg-6">
|
||||
<div class="d-flex flex-row align-items-center">
|
||||
<img src="assets/pricing/diamond.png" width="50px" height="100%" alt="">
|
||||
<div class="ms-3">
|
||||
<p class="lead">Большая коллекция</p>
|
||||
<p>Известные топовые фильмы и новинки</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="d-flex flex-row align-items-center">
|
||||
<img src="assets/pricing/no-ads.png" width="50px" height="100%" alt="">
|
||||
<div class="ms-3">
|
||||
<p class="lead">Без рекламы</p>
|
||||
<p>Видео не прервётся на самом интересном месте</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<!-- Pricing -->
|
||||
<section id="pricing" class="bg-light">
|
||||
<div class="container-md py-5">
|
||||
<div class="text-center">
|
||||
<h2>Подписка на кинотеатр</h2>
|
||||
<p class="lead text-muted">Выберите, какой план вам подходит больше всего</p>
|
||||
</div>
|
||||
|
||||
<div class="row my-5 justify-content-center align-items-center gy-3">
|
||||
<div class="col-8 col-lg-4 col-xl-3">
|
||||
<div class="card border-1">
|
||||
<div class="card-body text-center py-4">
|
||||
<h4 class="card-title">Большой Шлёппа</h4>
|
||||
<p class="lead card-subtitle">Подписка на неделю</p>
|
||||
<p class="display-5 my-4 text-primary fw-bold">49,99 ₽</p>
|
||||
<p class="card-text mx-5 text-muted d-none d-lg-block">Попробуйте и решите, нравится ли вам наш сервис</p>
|
||||
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Купить</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-9 col-lg-4">
|
||||
<div class="card border-primary border-3 pb-3">
|
||||
<div class="card-header text-center text-primary">Самый популярный</div>
|
||||
<div class="card-body text-center py-5">
|
||||
<h4 class="card-title">Базированный гигачад</h4>
|
||||
<p class="lead card-subtitle">Подписка на месяц</p>
|
||||
<p class="display-4 my-4 text-primary fw-bold">149,99 ₽</p>
|
||||
<p class="card-text mx-5 text-muted d-none d-lg-block">Для тех, кто очень любит смотреть фильмы и сериалы по вечерам</p>
|
||||
<a href="#" class="btn btn-outline-primary btn-lg mt-4">Купить</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-8 col-lg-4 col-xl-3">
|
||||
<div class="card border-1">
|
||||
<div class="card-body text-center py-4">
|
||||
<h4 class="card-title">Райан Гослинг</h4>
|
||||
<p class="lead card-subtitle">Подписка на год</p>
|
||||
<p class="display-5 my-4 text-primary fw-bold">799,99 ₽</p>
|
||||
<p class="card-text mx-5 text-muted d-none d-lg-block">Если вдруг захотите остаться с нами подольше</p>
|
||||
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Купить</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="py-2 bg-dark text-light mt-auto">
|
||||
<div class="container-md py-2">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="download-buttons-container justify-content-start">
|
||||
<a href="https://play.google.com/store/games?hl=ru&gl=US"><img src="assets/footer/download-buttons/GooglePlay.svg" class="download-button" alt=""></a>
|
||||
<a href="https://www.huawei.ru/appgallery/"><img src="assets/footer/download-buttons/AppGallery.svg" class="download-button" alt=""></a>
|
||||
<a href="https://www.apple.com/app-store/"><img src="assets/footer/download-buttons/AppStore.svg" class="download-button" alt=""></a>
|
||||
</div>
|
||||
<h6 class="text-secondary mt-3">© 2023 СигмаТеатр</h6>
|
||||
</div>
|
||||
<div class="download-buttons-container">
|
||||
<a href="index.html" class="text-secondary text-decoration-none footer-navigation-button">Главная</a>
|
||||
<a href="#" class="text-secondary text-decoration-none footer-navigation-button">Политика конфиденциальности</a>
|
||||
<a href="about_us.html" class="text-secondary text-decoration-none footer-navigation-button">О нас</a>
|
||||
<a href="admin_panel.html" class="text-secondary text-decoration-none footer-navigation-button">Страница администратора</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
9
src/App.css
Normal file
9
src/App.css
Normal file
@@ -0,0 +1,9 @@
|
||||
body {
|
||||
padding-top: 62px;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
border-radius: 16px;
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
36
src/App.jsx
Normal file
36
src/App.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container } from 'react-bootstrap';
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import './App.css';
|
||||
import Footer from './components/footer/Footer.jsx';
|
||||
import Navigation from './components/navigation/Navigation.jsx';
|
||||
import { WishlistProvider } from './components/wishlist/WishlistContext.jsx';
|
||||
import { LoginProvider } from './components/login/LoginContext.jsx';
|
||||
import { SubscriptionProvider } from './components/subscription/SubscriptionContext.jsx';
|
||||
|
||||
const App = ({ routes }) => {
|
||||
return (
|
||||
<LoginProvider>
|
||||
<SubscriptionProvider>
|
||||
<WishlistProvider>
|
||||
<Navigation routes={ routes }></Navigation>
|
||||
|
||||
<Container as="main" fluid className="px-0">
|
||||
<Outlet />
|
||||
</Container>
|
||||
|
||||
<Footer routes={ routes } />
|
||||
|
||||
<Toaster position='top-center' reverseOrder={true} />
|
||||
</WishlistProvider>
|
||||
</SubscriptionProvider>
|
||||
</LoginProvider>
|
||||
);
|
||||
};
|
||||
|
||||
App.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default App;
|
||||
BIN
src/assets/200.png
Normal file
BIN
src/assets/200.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 329 KiB After Width: | Height: | Size: 329 KiB |
|
Before Width: | Height: | Size: 970 KiB After Width: | Height: | Size: 970 KiB |
|
Before Width: | Height: | Size: 365 KiB After Width: | Height: | Size: 365 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 299 KiB After Width: | Height: | Size: 299 KiB |
|
Before Width: | Height: | Size: 6.1 MiB After Width: | Height: | Size: 6.1 MiB |
|
Before Width: | Height: | Size: 310 KiB After Width: | Height: | Size: 310 KiB |
|
Before Width: | Height: | Size: 292 KiB After Width: | Height: | Size: 292 KiB |
|
Before Width: | Height: | Size: 343 KiB After Width: | Height: | Size: 343 KiB |
|
Before Width: | Height: | Size: 269 KiB After Width: | Height: | Size: 269 KiB |
|
Before Width: | Height: | Size: 297 KiB After Width: | Height: | Size: 297 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
21
src/components/ageRatings/hooks/AgeRatingsHook.js
Normal file
21
src/components/ageRatings/hooks/AgeRatingsHook.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import AgeRatingsApiService from '../service/AgeRatingsApiService';
|
||||
|
||||
const useAgeRatings = () => {
|
||||
const [ageRatings, setAgeRatings] = useState([]);
|
||||
|
||||
const getAgeRatings = async () => {
|
||||
const data = await AgeRatingsApiService.getAll();
|
||||
setAgeRatings(data ?? []);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getAgeRatings();
|
||||
}, []);
|
||||
|
||||
return {
|
||||
ageRatings,
|
||||
};
|
||||
};
|
||||
|
||||
export default useAgeRatings;
|
||||
@@ -0,0 +1,5 @@
|
||||
import ApiService from '../../api/ApiService';
|
||||
|
||||
const AgeRatingsApiService = new ApiService('ageRatings');
|
||||
|
||||
export default AgeRatingsApiService;
|
||||
40
src/components/api/ApiClient.js
Normal file
40
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);
|
||||
29
src/components/api/ApiService.js
Normal file
29
src/components/api/ApiService.js
Normal file
@@ -0,0 +1,29 @@
|
||||
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}`);
|
||||
}
|
||||
}
|
||||
|
||||
export default ApiService;
|
||||
70
src/components/authentification/hooks/UserLoginFormHook.js
Normal file
70
src/components/authentification/hooks/UserLoginFormHook.js
Normal file
@@ -0,0 +1,70 @@
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import UsersApiService from '../service/UsersApiService';
|
||||
import useLogin from '../../login/LoginHook';
|
||||
|
||||
const useUserLoginForm = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { loginAuthorize } = useLogin();
|
||||
|
||||
const [currentInput, setCurrentInput] = useState({});
|
||||
const [validated, setValidated] = useState(false);
|
||||
|
||||
const resetValidity = () => {
|
||||
setValidated(false);
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
const inputName = event.target.name;
|
||||
const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
|
||||
|
||||
setCurrentInput({
|
||||
...currentInput,
|
||||
[inputName]: inputValue,
|
||||
});
|
||||
};
|
||||
|
||||
const checkCredentials = async () => {
|
||||
let correspondingUser;
|
||||
|
||||
const allUsers = await UsersApiService.getAll();
|
||||
allUsers.forEach((user) => {
|
||||
if (user.email === currentInput.email && user.password === currentInput.password) {
|
||||
correspondingUser = user;
|
||||
}
|
||||
});
|
||||
|
||||
if (!correspondingUser) {
|
||||
toast.error('Введены неверные логин и пароль');
|
||||
return;
|
||||
}
|
||||
|
||||
loginAuthorize(correspondingUser);
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
const form = event.currentTarget;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (form.checkValidity()) {
|
||||
await checkCredentials();
|
||||
return true;
|
||||
}
|
||||
|
||||
setValidated(true);
|
||||
return false;
|
||||
};
|
||||
|
||||
return {
|
||||
validated,
|
||||
handleSubmit,
|
||||
handleChange,
|
||||
resetValidity,
|
||||
};
|
||||
};
|
||||
|
||||
export default useUserLoginForm;
|
||||
@@ -0,0 +1,38 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Form, Button, Modal,
|
||||
} from 'react-bootstrap';
|
||||
|
||||
const ForgotPasswordModal = ({ shouldShowModal, hideModal }) => {
|
||||
return (
|
||||
<Modal show={shouldShowModal} onHide={() => hideModal()}>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>Восстановление пароля</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body className="mb-3">
|
||||
<p>В поле ниже напишите адрес электроннной почты, с которой была совершена
|
||||
регистрация. На этот адрес придёт письмо с дальнейшеми указаниями.</p>
|
||||
|
||||
<Form.Group>
|
||||
<Form.Label>Адрес электронной почты:</Form.Label>
|
||||
<Form.Control type="email" placeholder="myemail@mail.com" />
|
||||
</Form.Group>
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<Button variant="primary" onClick={() => hideModal()}>
|
||||
Отправить
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
ForgotPasswordModal.propTypes = {
|
||||
shouldShowModal: PropTypes.bool,
|
||||
hideModal: PropTypes.func,
|
||||
};
|
||||
|
||||
export default ForgotPasswordModal;
|
||||
@@ -0,0 +1,5 @@
|
||||
import ApiService from '../../api/ApiService';
|
||||
|
||||
const UsersApiService = new ApiService('users');
|
||||
|
||||
export default UsersApiService;
|
||||
@@ -1,8 +1,4 @@
|
||||
body{
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
.download-buttons-container {
|
||||
.flex-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
@@ -14,13 +10,22 @@ body{
|
||||
|
||||
.footer-navigation-button {
|
||||
margin-left: 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.download-buttons-container {
|
||||
.flex-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#stores {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#links {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@@ -30,25 +35,8 @@ body{
|
||||
}
|
||||
}
|
||||
|
||||
.film-poster {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.login-icon {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
border-radius: 20px;
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
overflow-y: initial !important
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
height: 80vh;
|
||||
overflow-y: auto;
|
||||
@media (max-width: 600px) {
|
||||
#stores {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
65
src/components/footer/Footer.jsx
Normal file
65
src/components/footer/Footer.jsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { Container } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Footer.css';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import appGallery from '../../assets/footer/download-buttons/AppGallery.svg';
|
||||
import appStore from '../../assets/footer/download-buttons/AppStore.svg';
|
||||
import googlePlay from '../../assets/footer/download-buttons/GooglePlay.svg';
|
||||
|
||||
const Footer = ({ routes }) => {
|
||||
const year = new Date().getFullYear();
|
||||
|
||||
const pageMain = routes.find((page) => { return page.title === 'СигмаТеатр'; });
|
||||
const pageAboutUs = routes.find((page) => { return page.title === 'О нас'; });
|
||||
const pageAdminPanel = routes.find((page) => { return page.title === 'CRUD администрирование'; });
|
||||
|
||||
return (
|
||||
<footer className="py-2 bg-dark text-light mt-auto">
|
||||
<Container fluid="md" className="py-2">
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<div>
|
||||
<div className="flex-box justify-content-start" id="stores">
|
||||
<a href="https://play.google.com/store/games?hl=ru&gl=US">
|
||||
<img src={ googlePlay } className="download-button" alt="" />
|
||||
</a>
|
||||
<a href="https://www.huawei.ru/appgallery/">
|
||||
<img src={ appGallery } className="download-button" alt="" />
|
||||
</a>
|
||||
<a href="https://www.apple.com/app-store/">
|
||||
<img src={ appStore } className="download-button" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h6 className="text-secondary mt-3">© { year } СигмаТеатр</h6>
|
||||
</div>
|
||||
|
||||
<div className="flex-box" id="links">
|
||||
<Link to={ pageMain.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
|
||||
Главная
|
||||
</Link>
|
||||
|
||||
<Link to={ pageMain.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
|
||||
Политика конфиденциальности
|
||||
</Link>
|
||||
|
||||
<Link to={ pageAboutUs.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
|
||||
О нас
|
||||
</Link>
|
||||
|
||||
<Link to={ pageAdminPanel.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
|
||||
Страница администратора
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Container>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
Footer.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
27
src/components/input/Checkbox.jsx
Normal file
27
src/components/input/Checkbox.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Form } from 'react-bootstrap';
|
||||
|
||||
const Checkbox = ({
|
||||
name, label, value, onChange, className, ...rest
|
||||
}) => {
|
||||
return (
|
||||
<Form.Check
|
||||
name={ name || '' }
|
||||
checked={ value }
|
||||
className={ `mb-2 ${className || ''}` }
|
||||
label={ label }
|
||||
onChange={ onChange }
|
||||
{ ...rest }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Checkbox.propTypes = {
|
||||
name: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
value: PropTypes.bool,
|
||||
onChange: PropTypes.func,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Checkbox;
|
||||
23
src/components/input/Input.jsx
Normal file
23
src/components/input/Input.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Form } from 'react-bootstrap';
|
||||
|
||||
const Input = ({
|
||||
name, label, value, onChange, className, ...rest
|
||||
}) => {
|
||||
return (
|
||||
<Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
|
||||
<Form.Label>{label}</Form.Label>
|
||||
<Form.Control name={name || ''} value={value || ''} onChange={onChange} {...rest} />
|
||||
</Form.Group>
|
||||
);
|
||||
};
|
||||
|
||||
Input.propTypes = {
|
||||
name: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Input;
|
||||
29
src/components/input/Select.jsx
Normal file
29
src/components/input/Select.jsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Form } from 'react-bootstrap';
|
||||
|
||||
const Select = ({
|
||||
values, name, label, value, onChange, className, ...rest
|
||||
}) => {
|
||||
return (
|
||||
<Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
|
||||
<Form.Label className='form-label'>{label}</Form.Label>
|
||||
<Form.Select name={name || ''} value={value || ''} onChange={onChange} {...rest}>
|
||||
<option value=''>Выберите значение</option>
|
||||
{
|
||||
values.map((type) => <option key={type.id} value={type.id}>{type.name}</option>)
|
||||
}
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
);
|
||||
};
|
||||
|
||||
Select.propTypes = {
|
||||
values: PropTypes.array,
|
||||
name: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
value: PropTypes.number,
|
||||
onChange: PropTypes.func,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Select;
|
||||
23
src/components/input/Textarea.jsx
Normal file
23
src/components/input/Textarea.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Form } from 'react-bootstrap';
|
||||
|
||||
const Textarea = ({
|
||||
name, label, value, onChange, className, ...rest
|
||||
}) => {
|
||||
return (
|
||||
<Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
|
||||
<Form.Label>{ label }</Form.Label>
|
||||
<Form.Control as='textarea' rows={ 4 } name={ name || '' } value={ value || '' } onChange={ onChange } {...rest} />
|
||||
</Form.Group>
|
||||
);
|
||||
};
|
||||
|
||||
Textarea.propTypes = {
|
||||
name: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Textarea;
|
||||
48
src/components/lines/form/LinesForm.jsx
Normal file
48
src/components/lines/form/LinesForm.jsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Form } from 'react-bootstrap';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import useLinesItemForm from '../hooks/LinesItemFormHook';
|
||||
import LinesItemForm from './LinesItemForm.jsx';
|
||||
|
||||
const LinesForm = ({ id }) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const {
|
||||
item,
|
||||
validated,
|
||||
handleSubmit,
|
||||
handleChange,
|
||||
} = useLinesItemForm(id);
|
||||
|
||||
const onBack = () => {
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
if (await handleSubmit(event)) {
|
||||
onBack();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form className='m-0 p-2' noValidate validated={validated} onSubmit={onSubmit}>
|
||||
<LinesItemForm item={item} handleChange={handleChange} />
|
||||
<Form.Group className='row justify-content-center m-0 mt-3'>
|
||||
<Button className='col-5 col-lg-2 m-0 me-2' variant='secondary' onClick={() => onBack()}>
|
||||
Назад
|
||||
</Button>
|
||||
<Button className='col-5 col-lg-2 m-0 ms-2' type='submit' variant='primary'>
|
||||
Сохранить
|
||||
</Button>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
LinesForm.propTypes = {
|
||||
id: PropTypes.string,
|
||||
};
|
||||
|
||||
export default LinesForm;
|
||||
5
src/components/lines/form/LinesItemForm.css
Normal file
5
src/components/lines/form/LinesItemForm.css
Normal file
@@ -0,0 +1,5 @@
|
||||
#image-preview {
|
||||
border-radius: 20px;
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
66
src/components/lines/form/LinesItemForm.jsx
Normal file
66
src/components/lines/form/LinesItemForm.jsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import imgPlaceholder from '../../../assets/200.png';
|
||||
import Input from '../../input/Input.jsx';
|
||||
import Select from '../../input/Select.jsx';
|
||||
import Checkbox from '../../input/Checkbox.jsx';
|
||||
import Textarea from '../../input/Textarea.jsx';
|
||||
import useTypes from '../../types/hooks/TypesHook';
|
||||
import './LinesItemForm.css';
|
||||
import useAgeRatings from '../../ageRatings/hooks/AgeRatingsHook';
|
||||
|
||||
const LinesItemForm = ({ item, handleChange }) => {
|
||||
const { types } = useTypes();
|
||||
const { ageRatings } = useAgeRatings();
|
||||
|
||||
console.log(types);
|
||||
console.log(ageRatings);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='text-center'>
|
||||
<img id='image-preview' className='rounded' alt='placeholder'
|
||||
src={item.poster || imgPlaceholder} />
|
||||
</div>
|
||||
|
||||
<Input name='title' label='Название' value={item.title} onChange={handleChange}
|
||||
type='text' required />
|
||||
|
||||
<Select values={types} name='typeId' label='Тип' value={item.typeId} onChange={handleChange}
|
||||
required />
|
||||
|
||||
<Checkbox name='requiresSubscription' label='Требуется подписка'
|
||||
value={item.requiresSubscription} onChange={handleChange} />
|
||||
|
||||
<Input name='poster' label='Постер' onChange={handleChange}
|
||||
type='file' accept='image/*' />
|
||||
|
||||
<Textarea name='description' label='Описание' value={item.description} onChange={handleChange}
|
||||
required />
|
||||
|
||||
<Input name='releaseDate' label='Год производства' value={item.releaseDate} onChange={handleChange}
|
||||
type='number' min='1900' step='1' required />
|
||||
|
||||
<Input name='country' label='Страна' value={item.country} onChange={handleChange}
|
||||
type='text' required />
|
||||
|
||||
<Input name='tagline' label='Слоган' value={item.tagline} onChange={handleChange}
|
||||
type='text' required />
|
||||
|
||||
<Input name='director' label='Режиссер' value={item.director} onChange={handleChange}
|
||||
type='text' required />
|
||||
|
||||
<Select values={ageRatings} name='ageRatingId' label='Возрастное ограничение' value={item.ageRatingId} onChange={handleChange}
|
||||
required />
|
||||
|
||||
<Input name='video' label='URL видео' value={item.video} onChange={handleChange}
|
||||
type='text' required />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
LinesItemForm.propTypes = {
|
||||
item: PropTypes.object,
|
||||
handleChange: PropTypes.func,
|
||||
};
|
||||
|
||||
export default LinesItemForm;
|
||||
34
src/components/lines/hooks/LinesDeleteModalHook.js
Normal file
34
src/components/lines/hooks/LinesDeleteModalHook.js
Normal file
@@ -0,0 +1,34 @@
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import useModal from '../../modal/ModalHook';
|
||||
import LinesApiService from '../service/LinesApiService';
|
||||
|
||||
const useLinesDeleteModal = (linesChangeHandle) => {
|
||||
const { isModalShow, showModal, hideModal } = useModal();
|
||||
const [currentId, setCurrentId] = useState(0);
|
||||
|
||||
const showModalDialog = (id) => {
|
||||
showModal();
|
||||
setCurrentId(id);
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
hideModal();
|
||||
};
|
||||
|
||||
const onDelete = async () => {
|
||||
await LinesApiService.delete(currentId);
|
||||
linesChangeHandle();
|
||||
toast.success('Элемент успешно удален', { id: 'LinesTable' });
|
||||
onClose();
|
||||
};
|
||||
|
||||
return {
|
||||
isDeleteModalShow: isModalShow,
|
||||
showDeleteModal: showModalDialog,
|
||||
handleDeleteConfirm: onDelete,
|
||||
handleDeleteCancel: onClose,
|
||||
};
|
||||
};
|
||||
|
||||
export default useLinesDeleteModal;
|
||||
28
src/components/lines/hooks/LinesFilterHook.js
Normal file
28
src/components/lines/hooks/LinesFilterHook.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import useTypes from '../../types/hooks/TypesHook';
|
||||
|
||||
const useTypeFilter = () => {
|
||||
const filterName = 'type';
|
||||
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
|
||||
const { types } = useTypes();
|
||||
|
||||
const handleFilterChange = (event) => {
|
||||
const type = event.target.value;
|
||||
if (type) {
|
||||
searchParams.set(filterName, event.target.value);
|
||||
} else {
|
||||
searchParams.delete(filterName);
|
||||
}
|
||||
setSearchParams(searchParams);
|
||||
};
|
||||
|
||||
return {
|
||||
types,
|
||||
currentFilter: searchParams.get(filterName) || '',
|
||||
handleFilterChange,
|
||||
};
|
||||
};
|
||||
|
||||
export default useTypeFilter;
|
||||
45
src/components/lines/hooks/LinesFormModalHook.js
Normal file
45
src/components/lines/hooks/LinesFormModalHook.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import { useState } from 'react';
|
||||
import useModal from '../../modal/ModalHook';
|
||||
import useLinesItemForm from './LinesItemFormHook';
|
||||
|
||||
const useLinesFormModal = (linesChangeHandle) => {
|
||||
const { isModalShow, showModal, hideModal } = useModal();
|
||||
const [currentId, setCurrentId] = useState(0);
|
||||
|
||||
const {
|
||||
item,
|
||||
validated,
|
||||
handleSubmit,
|
||||
handleChange,
|
||||
resetValidity,
|
||||
} = useLinesItemForm(currentId, linesChangeHandle);
|
||||
|
||||
const showModalDialog = (id) => {
|
||||
setCurrentId(id);
|
||||
resetValidity();
|
||||
showModal();
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
setCurrentId(-1);
|
||||
hideModal();
|
||||
};
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
if (await handleSubmit(event)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
isFormModalShow: isModalShow,
|
||||
isFormValidated: validated,
|
||||
showFormModal: showModalDialog,
|
||||
currentItem: item,
|
||||
handleItemChange: handleChange,
|
||||
handleFormSubmit: onSubmit,
|
||||
handleFormClose: onClose,
|
||||
};
|
||||
};
|
||||
|
||||
export default useLinesFormModal;
|
||||
30
src/components/lines/hooks/LinesHook.js
Normal file
30
src/components/lines/hooks/LinesHook.js
Normal file
@@ -0,0 +1,30 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import LinesApiService from '../service/LinesApiService';
|
||||
|
||||
const useLines = (typeFilter) => {
|
||||
const [linesRefresh, setLinesRefresh] = useState(false);
|
||||
const [lines, setLines] = useState([]);
|
||||
const handleLinesChange = () => setLinesRefresh(!linesRefresh);
|
||||
|
||||
const getLines = async () => {
|
||||
let expand = '?_expand=type&_expand=ageRating';
|
||||
if (typeFilter) {
|
||||
expand = `${expand}&typeId=${typeFilter}`;
|
||||
}
|
||||
|
||||
const data = await LinesApiService.getAll(expand);
|
||||
setLines(data ?? []);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getLines();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [linesRefresh, typeFilter]);
|
||||
|
||||
return {
|
||||
lines,
|
||||
handleLinesChange,
|
||||
};
|
||||
};
|
||||
|
||||
export default useLines;
|
||||
94
src/components/lines/hooks/LinesItemFormHook.js
Normal file
94
src/components/lines/hooks/LinesItemFormHook.js
Normal file
@@ -0,0 +1,94 @@
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import getBase64FromFile from '../../utils/Base64';
|
||||
import LinesApiService from '../service/LinesApiService';
|
||||
import useLinesItem from './LinesItemHook';
|
||||
|
||||
const useLinesItemForm = (id, linesChangeHandle) => {
|
||||
const { item, setItem } = useLinesItem(id);
|
||||
|
||||
const [validated, setValidated] = useState(false);
|
||||
|
||||
const resetValidity = () => {
|
||||
setValidated(false);
|
||||
};
|
||||
|
||||
const getLineObject = (formData) => {
|
||||
const typeId = parseInt(formData.typeId, 10);
|
||||
const ageRatingId = parseInt(formData.ageRatingId, 10);
|
||||
const requiresSubscription = formData.requiresSubscription === true;
|
||||
const poster = formData.poster.startsWith('data:image') ? formData.poster : '';
|
||||
|
||||
return {
|
||||
title: formData.title,
|
||||
typeId,
|
||||
requiresSubscription,
|
||||
poster,
|
||||
description: formData.description,
|
||||
releaseDate: formData.releaseDate.toString(),
|
||||
country: formData.country,
|
||||
tagline: formData.tagline,
|
||||
director: formData.director,
|
||||
ageRatingId,
|
||||
video: formData.video,
|
||||
};
|
||||
};
|
||||
|
||||
const handleImageChange = async (event) => {
|
||||
const { files } = event.target;
|
||||
const file = await getBase64FromFile(files.item(0));
|
||||
setItem({
|
||||
...item,
|
||||
poster: file,
|
||||
});
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
if (event.target.type === 'file') {
|
||||
handleImageChange(event);
|
||||
return;
|
||||
}
|
||||
|
||||
const inputName = event.target.name;
|
||||
const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
|
||||
|
||||
setItem({
|
||||
...item,
|
||||
[inputName]: inputValue,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
const form = event.currentTarget;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const body = getLineObject(item);
|
||||
|
||||
if (form.checkValidity()) {
|
||||
if (id === undefined) {
|
||||
await LinesApiService.create(body);
|
||||
} else {
|
||||
await LinesApiService.update(id, body);
|
||||
}
|
||||
|
||||
if (linesChangeHandle) linesChangeHandle();
|
||||
toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
setValidated(true);
|
||||
return false;
|
||||
};
|
||||
|
||||
return {
|
||||
item,
|
||||
validated,
|
||||
handleSubmit,
|
||||
handleChange,
|
||||
resetValidity,
|
||||
};
|
||||
};
|
||||
|
||||
export default useLinesItemForm;
|
||||
42
src/components/lines/hooks/LinesItemHook.js
Normal file
42
src/components/lines/hooks/LinesItemHook.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import LinesApiService from '../service/LinesApiService';
|
||||
|
||||
const useLinesItem = (id) => {
|
||||
const emptyItem = {
|
||||
id: '',
|
||||
title: '',
|
||||
typeId: 0,
|
||||
requiresSubscription: false,
|
||||
poster: '',
|
||||
description: '',
|
||||
releaseDate: '',
|
||||
country: '',
|
||||
tagline: '',
|
||||
director: '',
|
||||
ageRatingId: 0,
|
||||
video: '',
|
||||
};
|
||||
|
||||
const [item, setItem] = useState({ ...emptyItem });
|
||||
|
||||
const getItem = async (itemId = undefined) => {
|
||||
if (itemId && itemId > 0) {
|
||||
const data = await LinesApiService.get(itemId);
|
||||
setItem(data);
|
||||
} else {
|
||||
setItem({ ...emptyItem });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getItem(id);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [id]);
|
||||
|
||||
return {
|
||||
item,
|
||||
setItem,
|
||||
};
|
||||
};
|
||||
|
||||
export default useLinesItem;
|
||||
5
src/components/lines/service/LinesApiService.js
Normal file
5
src/components/lines/service/LinesApiService.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import ApiService from '../../api/ApiService';
|
||||
|
||||
const LinesApiService = new ApiService('movies');
|
||||
|
||||
export default LinesApiService;
|
||||
72
src/components/lines/table/Lines.jsx
Normal file
72
src/components/lines/table/Lines.jsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { Button } from 'react-bootstrap';
|
||||
import Select from '../../input/Select.jsx';
|
||||
import ModalConfirm from '../../modal/ModalConfirm.jsx';
|
||||
import ModalForm from '../../modal/ModalForm.jsx';
|
||||
import LinesItemForm from '../form/LinesItemForm.jsx';
|
||||
import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
|
||||
import useTypeFilter from '../hooks/LinesFilterHook';
|
||||
import useLinesFormModal from '../hooks/LinesFormModalHook';
|
||||
import useLines from '../hooks/LinesHook';
|
||||
import LinesTable from './LinesTable.jsx';
|
||||
import LinesTableRow from './LinesTableRow.jsx';
|
||||
|
||||
const Lines = () => {
|
||||
const { types, currentFilter, handleFilterChange } = useTypeFilter();
|
||||
|
||||
const { lines: movies, handleLinesChange } = useLines(currentFilter);
|
||||
|
||||
const {
|
||||
isDeleteModalShow,
|
||||
showDeleteModal,
|
||||
handleDeleteConfirm,
|
||||
handleDeleteCancel,
|
||||
} = useLinesDeleteModal(handleLinesChange);
|
||||
|
||||
const {
|
||||
isFormModalShow,
|
||||
isFormValidated,
|
||||
showFormModal,
|
||||
currentItem,
|
||||
handleItemChange,
|
||||
handleFormSubmit,
|
||||
handleFormClose,
|
||||
} = useLinesFormModal(handleLinesChange);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button className='mb-4' onClick={() => showFormModal()}>
|
||||
Добавить запись
|
||||
</Button>
|
||||
|
||||
<Select className='mt-2' values={types} label='Фильтр по типу'
|
||||
value={ parseInt(currentFilter, 10) } onChange={handleFilterChange} />
|
||||
|
||||
<LinesTable>
|
||||
{
|
||||
movies.map((movie, index) =>
|
||||
<LinesTableRow
|
||||
key={ movie.id }
|
||||
index={ index }
|
||||
line={ movie }
|
||||
onDelete={ () => showDeleteModal(movie.id) }
|
||||
onEdit={ () => showFormModal(movie.id) }
|
||||
/>)
|
||||
}
|
||||
</LinesTable>
|
||||
|
||||
<ModalConfirm show={isDeleteModalShow}
|
||||
onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
|
||||
title='Удаление' message='Удалить элемент?' />
|
||||
|
||||
<ModalForm show={isFormModalShow} validated={isFormValidated}
|
||||
onSubmit={handleFormSubmit} onClose={handleFormClose}
|
||||
title='Редактирование'>
|
||||
|
||||
<LinesItemForm item={currentItem} handleChange={handleItemChange} />
|
||||
|
||||
</ModalForm>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Lines;
|
||||
30
src/components/lines/table/LinesTable.jsx
Normal file
30
src/components/lines/table/LinesTable.jsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Table } from 'react-bootstrap';
|
||||
|
||||
const LinesTable = ({ children }) => {
|
||||
return (
|
||||
<Table striped responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">№</th>
|
||||
<th scope="col" className="w-25">Название</th>
|
||||
<th scope="col" className="w-25">Категория</th>
|
||||
<th scope="col" className="w-25">Требуется подписка</th>
|
||||
<th scope="col" className="w-25">Год производства</th>
|
||||
<th scope="col"></th>
|
||||
<th scope="col"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{children}
|
||||
</tbody >
|
||||
</Table >
|
||||
);
|
||||
};
|
||||
|
||||
LinesTable.propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export default LinesTable;
|
||||
33
src/components/lines/table/LinesTableRow.jsx
Normal file
33
src/components/lines/table/LinesTableRow.jsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { PencilFill, TrashFill } from 'react-bootstrap-icons';
|
||||
|
||||
const LinesTableRow = ({
|
||||
index, line, onDelete, onEdit,
|
||||
}) => {
|
||||
const handleAnchorClick = (event, action) => {
|
||||
event.preventDefault();
|
||||
action();
|
||||
};
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<th scope="row">{index + 1}</th>
|
||||
<td>{ line.title }</td>
|
||||
<td>{ line.type.name }</td>
|
||||
<td>{ line.requiresSubscription ? '+' : '-' }</td>
|
||||
<td>{ line.releaseDate }</td>
|
||||
<td><a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a></td>
|
||||
<td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><TrashFill /></a></td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
LinesTableRow.propTypes = {
|
||||
index: PropTypes.number,
|
||||
line: PropTypes.object,
|
||||
onDelete: PropTypes.func,
|
||||
onEdit: PropTypes.func,
|
||||
onEditInPage: PropTypes.func,
|
||||
};
|
||||
|
||||
export default LinesTableRow;
|
||||
25
src/components/login/LoginContext.jsx
Normal file
25
src/components/login/LoginContext.jsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { createContext, useEffect, useReducer } from 'react';
|
||||
import { loadLoginData, loginReducer, saveLoginData } from './LoginReducer';
|
||||
|
||||
const LoginContext = createContext(null);
|
||||
|
||||
export const LoginProvider = ({ children }) => {
|
||||
const [loginData, dispatch] = useReducer(loginReducer, null, loadLoginData);
|
||||
|
||||
useEffect(() => {
|
||||
saveLoginData(loginData || null);
|
||||
}, [loginData]);
|
||||
|
||||
return (
|
||||
<LoginContext.Provider value={{ loginData, dispatch }}>
|
||||
{ children }
|
||||
</LoginContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
LoginProvider.propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export default LoginContext;
|
||||
26
src/components/login/LoginHook.js
Normal file
26
src/components/login/LoginHook.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import { useContext } from 'react';
|
||||
import LoginContext from './LoginContext.jsx';
|
||||
import { loginAuthorize, loginLogout, loginUpdate } from './LoginReducer';
|
||||
import UsersApiService from '../authentification/service/UsersApiService';
|
||||
|
||||
const useLogin = () => {
|
||||
const { loginData, dispatch } = useContext(LoginContext);
|
||||
|
||||
const updateServerData = async (updatedLoginData) => {
|
||||
if (!loginData) {
|
||||
return;
|
||||
}
|
||||
|
||||
await UsersApiService.update(loginData.id, updatedLoginData);
|
||||
dispatch(loginUpdate(updatedLoginData));
|
||||
};
|
||||
|
||||
return {
|
||||
loginData,
|
||||
loginAuthorize: (login) => dispatch(loginAuthorize(login)),
|
||||
loginLogout: () => dispatch(loginLogout()),
|
||||
updateServerData,
|
||||
};
|
||||
};
|
||||
|
||||
export default useLogin;
|
||||
46
src/components/login/LoginReducer.js
Normal file
46
src/components/login/LoginReducer.js
Normal file
@@ -0,0 +1,46 @@
|
||||
const LOGIN_KEY = 'localLogin';
|
||||
const LOGIN_AUTHORIZE = 'login/authorize';
|
||||
const LOGIN_LOGOUT = 'login/logout';
|
||||
const LOGIN_UPDATE = 'login/update';
|
||||
|
||||
export const saveLoginData = (login) => {
|
||||
localStorage.setItem(LOGIN_KEY, JSON.stringify(login));
|
||||
};
|
||||
|
||||
export const loadLoginData = () => {
|
||||
const loginData = localStorage.getItem(LOGIN_KEY);
|
||||
if (loginData) {
|
||||
return JSON.parse(loginData);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export const loginReducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case LOGIN_AUTHORIZE: {
|
||||
return action.userData;
|
||||
}
|
||||
case LOGIN_UPDATE: {
|
||||
return action.userData;
|
||||
}
|
||||
case LOGIN_LOGOUT: {
|
||||
return null;
|
||||
}
|
||||
default: {
|
||||
throw Error(`Unknown action: ${action.type}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const loginAuthorize = (userData) => ({
|
||||
type: LOGIN_AUTHORIZE, userData,
|
||||
});
|
||||
|
||||
export const loginUpdate = (userData) => ({
|
||||
type: LOGIN_AUTHORIZE, userData,
|
||||
});
|
||||
|
||||
export const loginLogout = () => ({
|
||||
type: LOGIN_LOGOUT,
|
||||
});
|
||||
41
src/components/modal/ModalConfirm.jsx
Normal file
41
src/components/modal/ModalConfirm.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Modal } from 'react-bootstrap';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
const ModalConfirm = ({
|
||||
show, title, message, onConfirm, onClose,
|
||||
}) => {
|
||||
return createPortal(
|
||||
<Modal show={show} backdrop='static' onHide={() => onClose()}>
|
||||
<Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
|
||||
<Modal.Title>{title}</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>
|
||||
{message}
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
|
||||
<Button variant='secondary' className='col-5 m-0 me-2'
|
||||
onClick={() => onClose()}>
|
||||
Нет
|
||||
</Button>
|
||||
<Button variant='primary' className='col-5 m-0 ms-2'
|
||||
onClick={() => onConfirm()}>
|
||||
Да
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>,
|
||||
document.body,
|
||||
);
|
||||
};
|
||||
|
||||
ModalConfirm.propTypes = {
|
||||
show: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
message: PropTypes.string,
|
||||
onConfirm: PropTypes.func,
|
||||
onClose: PropTypes.func,
|
||||
};
|
||||
|
||||
export default ModalConfirm;
|
||||
8
src/components/modal/ModalForm.css
Normal file
8
src/components/modal/ModalForm.css
Normal file
@@ -0,0 +1,8 @@
|
||||
.modal-dialog {
|
||||
overflow-y: initial !important
|
||||
}
|
||||
|
||||
.form-modal-body {
|
||||
height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
43
src/components/modal/ModalForm.jsx
Normal file
43
src/components/modal/ModalForm.jsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Form, Modal } from 'react-bootstrap';
|
||||
import { createPortal } from 'react-dom';
|
||||
import './ModalForm.css';
|
||||
|
||||
const ModalForm = ({
|
||||
show, title, validated, onSubmit, onClose, children,
|
||||
}) => {
|
||||
return createPortal(
|
||||
<Modal show={show} backdrop='static' onHide={() => onClose()}>
|
||||
<Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
|
||||
<Modal.Title>{title}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Form className='m-0' noValidate validated={validated} onSubmit={onSubmit}>
|
||||
<Modal.Body className='form-modal-body'>
|
||||
{children}
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
|
||||
<Button variant='secondary' className='col-5 m-0 me-2'
|
||||
onClick={() => onClose()}>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button variant='primary' className='col-5 m-0 ms-2' type='submit'>
|
||||
Сохранить
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Form>
|
||||
</Modal>,
|
||||
document.body,
|
||||
);
|
||||
};
|
||||
|
||||
ModalForm.propTypes = {
|
||||
show: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
validated: PropTypes.bool,
|
||||
onSubmit: PropTypes.func,
|
||||
onClose: PropTypes.func,
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export default ModalForm;
|
||||
21
src/components/modal/ModalHook.js
Normal file
21
src/components/modal/ModalHook.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
const useModal = () => {
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
const showModalDialog = () => {
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const hideModalDialog = () => {
|
||||
setShowModal(false);
|
||||
};
|
||||
|
||||
return {
|
||||
isModalShow: showModal,
|
||||
showModal: showModalDialog,
|
||||
hideModal: hideModalDialog,
|
||||
};
|
||||
};
|
||||
|
||||
export default useModal;
|
||||
24
src/components/movies/MovieBookmark.jsx
Normal file
24
src/components/movies/MovieBookmark.jsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import { Col } from 'react-bootstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const MovieBookmark = ({
|
||||
movieData, deleteCallback,
|
||||
}) => {
|
||||
return (
|
||||
<Col xs={ 6 } sm={ 4 } lg={ 3 }>
|
||||
<a href={ `/videoplayer/${movieData.id}` } className="text-decoration-none">
|
||||
<img src={ movieData.poster } className="img-fluid film-poster" alt="" />
|
||||
<h5 className="text-black mt-3">{ movieData.title }</h5>
|
||||
<h6 className="text-secondary">{ movieData.requiresSubscription ? 'По подписке' : 'Бесплатно' }</h6>
|
||||
</a>
|
||||
<button className="btn btn-outline-info" onClick={ () => deleteCallback(movieData) }>Удалить</button>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
MovieBookmark.propTypes = {
|
||||
movieData: PropTypes.object,
|
||||
deleteCallback: PropTypes.func,
|
||||
};
|
||||
|
||||
export default MovieBookmark;
|
||||
15
src/components/movies/MovieDataHook.js
Normal file
15
src/components/movies/MovieDataHook.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import LinesApiService from '../lines/service/LinesApiService';
|
||||
|
||||
const useMovieData = (movieId) => {
|
||||
const [movieData, setMovieData] = useState({ ageRating: {} });
|
||||
|
||||
useEffect(() => {
|
||||
LinesApiService.get(movieId, '?_expand=ageRating')
|
||||
.then((data) => setMovieData(data));
|
||||
});
|
||||
|
||||
return { movieData };
|
||||
};
|
||||
|
||||
export default useMovieData;
|
||||
3
src/components/movies/MovieItem.css
Normal file
3
src/components/movies/MovieItem.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.film-poster {
|
||||
border-radius: 20px;
|
||||
}
|
||||
28
src/components/movies/MovieItem.jsx
Normal file
28
src/components/movies/MovieItem.jsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { Col } from 'react-bootstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import './MovieItem.css';
|
||||
|
||||
const MovieItem = ({
|
||||
id, imageSrc, title, requiresSubscription, handleClick,
|
||||
}) => {
|
||||
return (
|
||||
<Col xs={ 6 } sm={ 4 } lg={ 3 }>
|
||||
<a href='#' className="text-decoration-none" onClick={ (e) => handleClick(e, id) }>
|
||||
<img src={ imageSrc } className="img-fluid film-poster" alt="" />
|
||||
<h5 className="text-black mt-3">{ title }</h5>
|
||||
<h6 className="text-secondary">{ requiresSubscription ? 'По подписке' : 'Бесплатно' }</h6>
|
||||
</a>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
MovieItem.propTypes = {
|
||||
id: PropTypes.number,
|
||||
imageSrc: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
requiresSubscription: PropTypes.bool,
|
||||
handleClick: PropTypes.func,
|
||||
};
|
||||
|
||||
export default MovieItem;
|
||||
8
src/components/navigation/Navigation.css
Normal file
8
src/components/navigation/Navigation.css
Normal file
@@ -0,0 +1,8 @@
|
||||
.my-nav-link {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.fixed-height {
|
||||
height: 62px;
|
||||
}
|
||||
104
src/components/navigation/Navigation.jsx
Normal file
104
src/components/navigation/Navigation.jsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import {
|
||||
Container, Nav, Navbar, Button,
|
||||
} from 'react-bootstrap';
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import { Film } from 'react-bootstrap-icons';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
|
||||
import './Navigation.css';
|
||||
import useLogin from '../login/LoginHook';
|
||||
import SubscriptionContext from '../subscription/SubscriptionContext.jsx';
|
||||
|
||||
const Navigation = ({ routes }) => {
|
||||
const location = useLocation();
|
||||
const indexPageLink = routes.filter((route) => route.index === false).shift();
|
||||
|
||||
const pageMain = routes.find((page) => { return page.title === 'СигмаТеатр'; });
|
||||
const pageAboutUs = routes.find((page) => { return page.title === 'О нас'; });
|
||||
const pageLogin = routes.find((page) => { return page.title === 'Вход в аккаунт'; });
|
||||
const pageProfile = routes.find((page) => { return page.title === 'Профиль'; });
|
||||
const pagePricing = routes.find((page) => { return page.title === 'Подписка'; });
|
||||
|
||||
const { loginData } = useLogin();
|
||||
let ProfileButton = (
|
||||
<>
|
||||
Ожидание...
|
||||
</>
|
||||
);
|
||||
|
||||
const [subscriptionActive2, setSubscriptionActive2] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (loginData === null) {
|
||||
setSubscriptionActive2(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (loginData.expirationDate === null) {
|
||||
setSubscriptionActive2(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setSubscriptionActive2(true);
|
||||
}, [loginData]);
|
||||
|
||||
if (loginData === null) {
|
||||
ProfileButton = (
|
||||
<Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageLogin.path } eventKey={ pageLogin.path } to={ pageLogin.path ?? '/' }>
|
||||
Вход в аккаунт
|
||||
</Nav.Link>
|
||||
);
|
||||
} else {
|
||||
ProfileButton = (
|
||||
<Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageProfile.path } eventKey={ pageProfile.path } to={ pageProfile.path ?? '/' }>
|
||||
Профиль
|
||||
</Nav.Link>
|
||||
);
|
||||
}
|
||||
|
||||
const { subscriptionActive } = useContext(SubscriptionContext);
|
||||
|
||||
return (
|
||||
<header>
|
||||
<Navbar fixed='top' expand='lg' bg='dark' data-bs-theme='dark' className='py-1 fixed-height'>
|
||||
<Container fluid='md'>
|
||||
<Navbar.Brand as={ Link } to={indexPageLink?.path ?? '/'} className='align-items-center'>
|
||||
<Film className='d-inline-block align-middle pb-1' width="25" height="25"/>
|
||||
<span className="fw-bold text-uppercase ms-2">СигмаТеатр</span>
|
||||
</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls='main-navbar' />
|
||||
<Navbar.Collapse id='main-navbar' className='justify-content-end align-items-center'>
|
||||
<Nav className='link' activeKey={ location.pathname }>
|
||||
|
||||
<Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageMain.path } eventKey={ pageMain.path } to={ pageMain.path ?? '/' }>
|
||||
<span>Фильмы и сериалы</span>
|
||||
</Nav.Link>
|
||||
<Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageAboutUs.path } eventKey={ pageAboutUs.path } to={ pageAboutUs.path ?? '/' }>
|
||||
Справка
|
||||
</Nav.Link>
|
||||
{ ProfileButton }
|
||||
{ !subscriptionActive2
|
||||
&& <Nav.Link className='d-lg-none' as={ Link } eventKey={ pagePricing.path } to={ pagePricing.path ?? '/' }>
|
||||
Купить подписку
|
||||
</Nav.Link>
|
||||
}
|
||||
{ !subscriptionActive2
|
||||
&& <Nav.Link className='d-none d-lg-inline' as={ Link } eventKey={ pagePricing.path } to={ pagePricing.path ?? '/' }>
|
||||
<Button variant='light'>Купить подписку</Button>
|
||||
</Nav.Link>
|
||||
}
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar >
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
Navigation.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
41
src/components/pricing/PricingPlan.jsx
Normal file
41
src/components/pricing/PricingPlan.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { Col, Card } from 'react-bootstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const PricingPlan = ({ pricingPlanData, onBuySubscription }) => {
|
||||
const borderStyling = pricingPlanData.isPrimary ? 'border-primary border-3 pb-3' : 'border-1';
|
||||
|
||||
return (
|
||||
<Col xs={pricingPlanData.isPrimary ? 9 : 8} lg={4} xl={pricingPlanData.isPrimary ? 4 : 3}>
|
||||
<Card className={ borderStyling }>
|
||||
{ pricingPlanData.isPrimary && <Card.Header className="text-center text-primary">Самый популярный</Card.Header> }
|
||||
|
||||
<Card.Body className={ `text-center ${pricingPlanData.isPrimary ? 'py-5' : 'py-4'}` }>
|
||||
<h4 className="card-title">{ pricingPlanData.title }</h4>
|
||||
<p className="lead card-subtitle">{ pricingPlanData.subtitle }</p>
|
||||
<p className={ `${pricingPlanData.isPrimary ? 'display-4' : 'display-5'} my-4 text-primary fw-bold` }>{ pricingPlanData.price } ₽</p>
|
||||
<p className="card-text mx-5 text-muted d-none d-lg-block">{ pricingPlanData.description }</p>
|
||||
<a
|
||||
href="#"
|
||||
className={ `btn btn-outline-primary btn-lg ${pricingPlanData.isPrimary ? 'mt-4' : 'mt-3'}`}
|
||||
onClick={ (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
onBuySubscription(pricingPlanData.period);
|
||||
}}
|
||||
>
|
||||
Купить
|
||||
</a>
|
||||
</Card.Body>
|
||||
|
||||
</Card>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
PricingPlan.propTypes = {
|
||||
pricingPlanData: PropTypes.object,
|
||||
onBuySubscription: PropTypes.func,
|
||||
};
|
||||
|
||||
export default PricingPlan;
|
||||
24
src/components/pricing/Priveledge.jsx
Normal file
24
src/components/pricing/Priveledge.jsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import { Col } from 'react-bootstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Priveledge = ({ icon, title, description }) => {
|
||||
return (
|
||||
<Col lg={ 6 }>
|
||||
<div className="d-flex flex-row align-items-center">
|
||||
<img src={ icon } width="50px" height="100%" alt="" />
|
||||
<div className="ms-3">
|
||||
<p className="lead">{ title }</p>
|
||||
<p>{ description }</p>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
Priveledge.propTypes = {
|
||||
icon: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Priveledge;
|
||||
25
src/components/pricing/hooks/PricingPlansHook.js
Normal file
25
src/components/pricing/hooks/PricingPlansHook.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import PricingApiService from '../service/PricingApiService';
|
||||
|
||||
const usePricingPlans = () => {
|
||||
const [pricingPlans, setPricingPlans] = useState([]);
|
||||
const [isPending, setIsPending] = useState(true);
|
||||
|
||||
const getPricing = async () => {
|
||||
const data = await PricingApiService.getAll();
|
||||
setPricingPlans(data ?? []);
|
||||
|
||||
setIsPending(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getPricing();
|
||||
}, []);
|
||||
|
||||
return {
|
||||
pricingPlans,
|
||||
isPending,
|
||||
};
|
||||
};
|
||||
|
||||
export default usePricingPlans;
|
||||
5
src/components/pricing/service/PricingApiService.js
Normal file
5
src/components/pricing/service/PricingApiService.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import ApiService from '../../api/ApiService';
|
||||
|
||||
const PricingApiService = new ApiService('pricingPlans');
|
||||
|
||||
export default PricingApiService;
|
||||
20
src/components/subscription/SubscriptionContext.jsx
Normal file
20
src/components/subscription/SubscriptionContext.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { createContext, useState } from 'react';
|
||||
|
||||
const SubscriptionContext = createContext(false);
|
||||
|
||||
export const SubscriptionProvider = ({ children }) => {
|
||||
const [subscriptionActive, setSubscriptionActive] = useState(false);
|
||||
|
||||
return (
|
||||
<SubscriptionContext.Provider value={{ subscriptionActive, setSubscriptionActive }}>
|
||||
{ children }
|
||||
</SubscriptionContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
SubscriptionProvider.propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export default SubscriptionContext;
|
||||
70
src/components/subscription/SubscriptionHook.js
Normal file
70
src/components/subscription/SubscriptionHook.js
Normal file
@@ -0,0 +1,70 @@
|
||||
import { useContext, useEffect } from 'react';
|
||||
import SubscriptionContext from './SubscriptionContext.jsx';
|
||||
import useLogin from '../login/LoginHook';
|
||||
|
||||
const useSubscription = () => {
|
||||
const { subscriptionActive, setSubscriptionActive } = useContext(SubscriptionContext);
|
||||
const { loginData, updateServerData } = useLogin();
|
||||
|
||||
useEffect(() => {
|
||||
if (loginData === null) {
|
||||
setSubscriptionActive(false);
|
||||
return;
|
||||
}
|
||||
if (loginData.expirationDate === null) {
|
||||
setSubscriptionActive(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const currentDate = new Date().getTime();
|
||||
const expirationDate = Date.parse(loginData.expirationDate);
|
||||
|
||||
setSubscriptionActive(currentDate <= expirationDate);
|
||||
console.log(`subscriptionActive set to ${currentDate <= expirationDate}`);
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [loginData]);
|
||||
|
||||
const getExpirationDateFormatted = () => {
|
||||
if (!loginData) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (loginData.expirationDate === null) {
|
||||
return 'идёт отмена...';
|
||||
}
|
||||
|
||||
const timestamp = Date.parse(loginData.expirationDate);
|
||||
const expirationDate = new Date(timestamp);
|
||||
|
||||
return expirationDate.toLocaleString('ru-RU').split(', ')[0];
|
||||
};
|
||||
|
||||
const activateSubscription = (expirationDate) => {
|
||||
updateServerData({
|
||||
...loginData,
|
||||
expirationDate: expirationDate.toISOString(),
|
||||
});
|
||||
console.log('server data updated');
|
||||
};
|
||||
|
||||
const cancelSubscription = () => {
|
||||
if (!loginData) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateServerData({
|
||||
...loginData,
|
||||
expirationDate: null,
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
subscriptionActive,
|
||||
getExpirationDateFormatted,
|
||||
activateSubscription,
|
||||
cancelSubscription,
|
||||
};
|
||||
};
|
||||
|
||||
export default useSubscription;
|
||||
21
src/components/types/hooks/TypesHook.js
Normal file
21
src/components/types/hooks/TypesHook.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import TypesApiService from '../service/TypesApiService';
|
||||
|
||||
const useTypes = () => {
|
||||
const [types, setTypes] = useState([]);
|
||||
|
||||
const getTypes = async () => {
|
||||
const data = await TypesApiService.getAll();
|
||||
setTypes(data ?? []);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getTypes();
|
||||
}, []);
|
||||
|
||||
return {
|
||||
types,
|
||||
};
|
||||
};
|
||||
|
||||
export default useTypes;
|
||||
5
src/components/types/service/TypesApiService.js
Normal file
5
src/components/types/service/TypesApiService.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import ApiService from '../../api/ApiService';
|
||||
|
||||
const TypesApiService = new ApiService('types');
|
||||
|
||||
export default TypesApiService;
|
||||
15
src/components/utils/Base64.js
Normal file
15
src/components/utils/Base64.js
Normal file
@@ -0,0 +1,15 @@
|
||||
const getBase64FromFile = async (file) => {
|
||||
const reader = new FileReader();
|
||||
return new Promise((resolve, reject) => {
|
||||
reader.onloadend = () => {
|
||||
const fileContent = reader.result;
|
||||
resolve(fileContent);
|
||||
};
|
||||
reader.onerror = () => {
|
||||
reject(new Error('Oops, something went wrong with the file reader.'));
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
};
|
||||
|
||||
export default getBase64FromFile;
|
||||
42
src/components/wishlist/Wishlist.jsx
Normal file
42
src/components/wishlist/Wishlist.jsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { Container, Row, Button } from 'react-bootstrap';
|
||||
import useWishlist from './WishlistHook';
|
||||
import MovieBookmark from '../movies/MovieBookmark.jsx';
|
||||
|
||||
const Wishlist = () => {
|
||||
const {
|
||||
wishlist,
|
||||
removeFromWishlist,
|
||||
clearWishlist,
|
||||
} = useWishlist();
|
||||
|
||||
return (
|
||||
<Container fluid="md" className="py-4 mb-4">
|
||||
|
||||
<div className="text-center">
|
||||
<h2>Избранное</h2>
|
||||
<p className="lead text-muted">Фильмы и сериары, отмеченные как `посмотреть позже`</p>
|
||||
</div>
|
||||
|
||||
<Row className="gx-5 gy-5 my-3">
|
||||
{
|
||||
wishlist.map((wishlistItem) =>
|
||||
<MovieBookmark
|
||||
key={ wishlistItem.id }
|
||||
movieData={ wishlistItem }
|
||||
deleteCallback={ removeFromWishlist }
|
||||
/>)
|
||||
}
|
||||
</Row>
|
||||
|
||||
{ wishlist.length !== 0
|
||||
? <Button className='mb-4' onClick={() => clearWishlist()}>
|
||||
Очистить список избранного
|
||||
</Button>
|
||||
: <p className="display-5 my-5">Список желаемого пуст</p>
|
||||
}
|
||||
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Wishlist;
|
||||
30
src/components/wishlist/WishlistContext.jsx
Normal file
30
src/components/wishlist/WishlistContext.jsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
createContext,
|
||||
useEffect,
|
||||
useReducer,
|
||||
} from 'react';
|
||||
|
||||
import { wishlistReducer, loadWishlist, saveWishlist } from './WishlistReducer';
|
||||
|
||||
const WishlistContext = createContext(null);
|
||||
|
||||
export const WishlistProvider = ({ children }) => {
|
||||
const [wishlist, dispatch] = useReducer(wishlistReducer, [], loadWishlist);
|
||||
|
||||
useEffect(() => {
|
||||
saveWishlist(wishlist || []);
|
||||
}, [wishlist]);
|
||||
|
||||
return (
|
||||
<WishlistContext.Provider value={{ wishlist, dispatch }}>
|
||||
{children}
|
||||
</WishlistContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
WishlistProvider.propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export default WishlistContext;
|
||||
16
src/components/wishlist/WishlistHook.js
Normal file
16
src/components/wishlist/WishlistHook.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import { useContext } from 'react';
|
||||
import { wishlistAdd, wishlistClear, wishlistRemove } from './WishlistReducer';
|
||||
import WishlistContext from './WishlistContext.jsx';
|
||||
|
||||
const useWishlist = () => {
|
||||
const { wishlist, dispatch } = useContext(WishlistContext);
|
||||
|
||||
return {
|
||||
wishlist,
|
||||
addToWishlist: (item) => dispatch(wishlistAdd(item)),
|
||||
removeFromWishlist: (item) => dispatch(wishlistRemove(item)),
|
||||
clearWishlist: () => dispatch(wishlistClear()),
|
||||
};
|
||||
};
|
||||
|
||||
export default useWishlist;
|
||||
60
src/components/wishlist/WishlistReducer.js
Normal file
60
src/components/wishlist/WishlistReducer.js
Normal file
@@ -0,0 +1,60 @@
|
||||
const addToWishlist = (wishlist, movie) => {
|
||||
const existsMovie = wishlist.find((wishlistItem) => wishlistItem.id === movie.id);
|
||||
if (existsMovie !== undefined) {
|
||||
return wishlist;
|
||||
}
|
||||
|
||||
return [...wishlist, movie];
|
||||
};
|
||||
|
||||
const removeFromWishlist = (wishlist, movie) => {
|
||||
return wishlist.filter((wishlistItem) => wishlistItem.id !== movie.id);
|
||||
};
|
||||
|
||||
const WISHLIST_KEY = 'localWishlist';
|
||||
const WISHLIST_ADD = 'wishlist/add';
|
||||
const WISHLIST_REMOVE = 'wishlist/remove';
|
||||
const WISHLIST_CLEAR = 'wishlist/clear';
|
||||
|
||||
export const saveWishlist = (wishlist) => {
|
||||
localStorage.setItem(WISHLIST_KEY, JSON.stringify(wishlist));
|
||||
};
|
||||
|
||||
export const loadWishlist = (initialValue = []) => {
|
||||
const wishlistData = localStorage.getItem(WISHLIST_KEY);
|
||||
if (wishlistData) {
|
||||
return JSON.parse(wishlistData);
|
||||
}
|
||||
|
||||
return initialValue;
|
||||
};
|
||||
|
||||
export const wishlistReducer = (wishlist, action) => {
|
||||
const { movie } = action;
|
||||
switch (action.type) {
|
||||
case WISHLIST_ADD: {
|
||||
return addToWishlist(wishlist, movie);
|
||||
}
|
||||
case WISHLIST_REMOVE: {
|
||||
return removeFromWishlist(wishlist, movie);
|
||||
}
|
||||
case WISHLIST_CLEAR: {
|
||||
return [];
|
||||
}
|
||||
default: {
|
||||
throw Error(`Unknown action: ${action.type}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const wishlistAdd = (movie) => ({
|
||||
type: WISHLIST_ADD, movie,
|
||||
});
|
||||
|
||||
export const wishlistRemove = (movie) => ({
|
||||
type: WISHLIST_REMOVE, movie,
|
||||
});
|
||||
|
||||
export const wishlistClear = () => ({
|
||||
type: WISHLIST_CLEAR,
|
||||
});
|
||||
0
src/index.css
Normal file
0
src/index.css
Normal file
69
src/main.jsx
Normal file
69
src/main.jsx
Normal file
@@ -0,0 +1,69 @@
|
||||
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 PageIndex from './pages/PageIndex.jsx';
|
||||
import PagePricing from './pages/PagePricing.jsx';
|
||||
import PageAboutUs from './pages/PageAboutUs.jsx';
|
||||
import PageLogin from './pages/PageLogin.jsx';
|
||||
import PageVideoplayer from './pages/PageVideoplayer.jsx';
|
||||
import PageAdminPanel from './pages/PageAdminPanel.jsx';
|
||||
import PageProfile from './pages/PageProfile.jsx';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
index: true,
|
||||
path: '/',
|
||||
element: <PageIndex />,
|
||||
title: 'СигмаТеатр',
|
||||
},
|
||||
{
|
||||
path: '/pricing',
|
||||
element: <PagePricing />,
|
||||
title: 'Подписка',
|
||||
},
|
||||
{
|
||||
path: '/about_us',
|
||||
element: <PageAboutUs />,
|
||||
title: 'О нас',
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
element: <PageLogin />,
|
||||
title: 'Вход в аккаунт',
|
||||
},
|
||||
{
|
||||
path: '/videoplayer/:id?',
|
||||
element: <PageVideoplayer />,
|
||||
title: 'Просмотр',
|
||||
},
|
||||
{
|
||||
path: '/admin_panel',
|
||||
element: <PageAdminPanel />,
|
||||
title: 'CRUD администрирование',
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
element: <PageProfile />,
|
||||
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>,
|
||||
);
|
||||
19
src/pages/ErrorPage.jsx
Normal file
19
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;
|
||||
121
src/pages/PageAboutUs.jsx
Normal file
121
src/pages/PageAboutUs.jsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import {
|
||||
Container, Row, Col, Form, InputGroup, Button, Modal,
|
||||
} from 'react-bootstrap';
|
||||
|
||||
import { EnvelopeFill, PersonFill, ChatRightDotsFill } from 'react-bootstrap-icons';
|
||||
import { useState } from 'react';
|
||||
|
||||
const PageAboutUs = () => {
|
||||
const [show, setShow] = useState(false);
|
||||
|
||||
const handleClose = () => setShow(false);
|
||||
const handleShow = () => setShow(true);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section id="contact-info">
|
||||
<Container fluid="md" className="py-4">
|
||||
<Row className="gx-5 gy-5">
|
||||
<Col lg={ 5 }>
|
||||
<h2 className="text-center mb-5">Контактные данные</h2>
|
||||
<ul className="list-group list-group-flush">
|
||||
<li className="list-group-item">
|
||||
<span className="fw-bold">Страна:</span> Россия
|
||||
</li>
|
||||
<li className="list-group-item">
|
||||
<span className="fw-bold">Адрес:</span> 432029, Ульяновск
|
||||
</li>
|
||||
<li className="list-group-item">
|
||||
<span className="fw-bold">Телефон:</span> +7 (987) 654 32-10
|
||||
</li>
|
||||
<li className="list-group-item">
|
||||
<span className="fw-bold">Факс:</span> +49 221 95491533
|
||||
</li>
|
||||
<li className="list-group-item">
|
||||
<span className="fw-bold">Электронная почта:</span> sigmacinema@gmail.com
|
||||
</li>
|
||||
<li className="list-group-item">
|
||||
<span className="fw-bold">ИНН:</span> 7743013902
|
||||
</li>
|
||||
</ul>
|
||||
</Col>
|
||||
|
||||
<Col lg={ 7 }>
|
||||
<h2 className="text-center mb-5">Мы на карте</h2>
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed/v1/place?q=Ульяновск,+Россия,+432029&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
|
||||
width="100%" height="500" allowFullScreen="" loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"></iframe>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<section id="feedback" className="bg-light">
|
||||
<Container fluid="md" className="py-4 mt-5">
|
||||
<div className="text-center">
|
||||
<h2>Остались вопросы?</h2>
|
||||
<p className="lead text-muted">Задайте ваш вопрос нашей службе поддержки - мы постараемся ответить на него в ближайшее время</p>
|
||||
</div>
|
||||
|
||||
<Row className="justify-content-center mt-5">
|
||||
<Col lg={ 6 }>
|
||||
<Form>
|
||||
<Form.Group>
|
||||
<Form.Label>Ваш адрес электронной почты</Form.Label>
|
||||
<InputGroup className="mb-3">
|
||||
<InputGroup.Text><EnvelopeFill /></InputGroup.Text>
|
||||
<Form.Control type="email" placeholder="myemail@mail.com" />
|
||||
</InputGroup>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<Form.Label>Ваше имя</Form.Label>
|
||||
<InputGroup className="mb-3">
|
||||
<InputGroup.Text><PersonFill /></InputGroup.Text>
|
||||
<Form.Control type="text" placeholder="Иванов Иван" />
|
||||
</InputGroup>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<Form.Label>О чем ваш вопрос?</Form.Label>
|
||||
<InputGroup className="mb-4">
|
||||
<InputGroup.Text><ChatRightDotsFill /></InputGroup.Text>
|
||||
<Form.Select>
|
||||
<option value="pricing">Оплата подписки</option>
|
||||
<option value="content">Фильмы или сериалы</option>
|
||||
<option value="other">Другое</option>
|
||||
</Form.Select>
|
||||
</InputGroup>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Control as="textarea" rows={ 5 } placeholder="Ваш вопрос..." />
|
||||
|
||||
<div className="text-center mt-4">
|
||||
<Button variant="primary" onClick={ handleShow }>Отправить</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<Modal show={ show } onHide={ handleClose }>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>Ваш вопрос отправлен</Modal.Title>
|
||||
</Modal.Header>
|
||||
|
||||
<Modal.Body>На указанный вами адрес электронной почты
|
||||
скоро придет письмо с ответом.</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<Button variant="primary" onClick={handleClose}>
|
||||
Закрыть
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageAboutUs;
|
||||
20
src/pages/PageAdminPanel.jsx
Normal file
20
src/pages/PageAdminPanel.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { Container } from 'react-bootstrap';
|
||||
import Lines from '../components/lines/table/Lines.jsx';
|
||||
|
||||
const PageAdminPanel = () => {
|
||||
return (
|
||||
<section id="administration">
|
||||
<Container fluid="md" className="py-4 mb-4">
|
||||
<div className="text-center">
|
||||
<h2>Страница администратора</h2>
|
||||
<p className="lead text-muted">Выполнение CRUD-операций над фильмами или сериалами</p>
|
||||
</div>
|
||||
|
||||
<Lines />
|
||||
|
||||
</Container>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageAdminPanel;
|
||||
82
src/pages/PageIndex.jsx
Normal file
82
src/pages/PageIndex.jsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import { Container, Row } from 'react-bootstrap';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import toast from 'react-hot-toast';
|
||||
import useLines from '../components/lines/hooks/LinesHook';
|
||||
import MovieItem from '../components/movies/MovieItem.jsx';
|
||||
import useLogin from '../components/login/LoginHook';
|
||||
|
||||
const PageIndex = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { loginData } = useLogin();
|
||||
|
||||
const showMoviePage = (event, movieId) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (!loginData) {
|
||||
toast.error('Для просмотра фильма необходимо войти в аккаунт');
|
||||
navigate('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
navigate(`/videoplayer/${movieId}`);
|
||||
};
|
||||
|
||||
const { lines: movies } = useLines();
|
||||
|
||||
return (
|
||||
<>
|
||||
<section id="movies">
|
||||
<Container fluid="md" className="py-4 mb-4">
|
||||
|
||||
<div className="text-center">
|
||||
<h2>Самые базированные фильмы</h2>
|
||||
<p className="lead text-muted">Здесь собраны ваши любимые кинофильмы</p>
|
||||
</div>
|
||||
|
||||
<Row className="gx-5 gy-5 my-3">
|
||||
{
|
||||
movies.filter((item) => item.type.name === 'Фильм').map((movie) =>
|
||||
<MovieItem
|
||||
key = { movie.id }
|
||||
id={ movie.id }
|
||||
imageSrc={ movie.poster }
|
||||
title={ movie.title }
|
||||
requiresSubscription={ movie.requiresSubscription }
|
||||
handleClick={ showMoviePage }
|
||||
/>)
|
||||
}
|
||||
</Row>
|
||||
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<section id="series" className="bg-light">
|
||||
<Container fluid="md" className="py-4">
|
||||
|
||||
<div className="text-center">
|
||||
<h2>Популярные сериалы</h2>
|
||||
<p className="lead text-muted">Сериалы, главные герои которых - буквально вы</p>
|
||||
</div>
|
||||
|
||||
<Row className="gx-5 gy-5 mt-3 mb-5">
|
||||
{
|
||||
movies.filter((item) => item.type.name === 'Сериал').map((movie) =>
|
||||
<MovieItem
|
||||
key = { movie.id }
|
||||
id={ movie.id }
|
||||
imageSrc={ movie.poster }
|
||||
title={ movie.title }
|
||||
requiresSubscription={ movie.requiresSubscription }
|
||||
handleClick={ showMoviePage }
|
||||
/>)
|
||||
}
|
||||
</Row>
|
||||
</Container>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageIndex;
|
||||
97
src/pages/PageLogin.jsx
Normal file
97
src/pages/PageLogin.jsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import {
|
||||
Container, Row, Col, Form, InputGroup, Button, Card,
|
||||
} from 'react-bootstrap';
|
||||
|
||||
import {
|
||||
PersonCircle, EnvelopeFill, LockFill,
|
||||
} from 'react-bootstrap-icons';
|
||||
|
||||
import { useState } from 'react';
|
||||
import ForgotPasswordModal from '../components/authentification/modals/ForgotPasswordModal.jsx';
|
||||
import useUserLoginForm from '../components/authentification/hooks/UserLoginFormHook';
|
||||
|
||||
const PageLogin = () => {
|
||||
const [shouldShowForgotModal, setShowForgotModal] = useState(false);
|
||||
|
||||
const { validated, handleSubmit, handleChange } = useUserLoginForm();
|
||||
|
||||
const handleForgotPassword = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
setShowForgotModal(true);
|
||||
};
|
||||
|
||||
const handleLogin = async (event) => {
|
||||
await handleSubmit(event);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section id="login">
|
||||
<Container fluid="sm" className="py-4">
|
||||
<div className="text-center">
|
||||
<h2>Вход в аккаунт</h2>
|
||||
<p className="lead text-muted">Войдите в ваш аккаунт чтобы воспользоваться подпиской и иметь возможность отмечать желаемые фильмы</p>
|
||||
</div>
|
||||
|
||||
<Row className="justify-content-center mt-5">
|
||||
<Col lg={ 4 }>
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<div className="d-flex flex-row justify-content-center align-items-center">
|
||||
<PersonCircle className="text-primary" fontSize={ '30px' } />
|
||||
<p className="lead my-auto ms-3 text-primary">Вход</p>
|
||||
</div>
|
||||
|
||||
<Form className="my-3" noValidate validated={ validated } onSubmit={ handleLogin }>
|
||||
<Form.Group>
|
||||
<Form.Label>Электронная почта</Form.Label>
|
||||
<InputGroup className="mb-3">
|
||||
<InputGroup.Text><EnvelopeFill /></InputGroup.Text>
|
||||
<Form.Control name="email" type="email" placeholder="myemail@mail.com" onChange={handleChange} required/>
|
||||
</InputGroup>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<Form.Label>Пароль</Form.Label>
|
||||
<InputGroup className="mb-3">
|
||||
<InputGroup.Text><LockFill /></InputGroup.Text>
|
||||
<Form.Control name="password" type="password" onChange={handleChange} required />
|
||||
|
||||
</InputGroup>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group className="mt-4 d-flex justify-content-between">
|
||||
<div className="form-check me-4">
|
||||
<Form.Check id="rememberMe"/>
|
||||
<Form.Label><small className="text-secondary">Запомнить на этом компьютере</small></Form.Label>
|
||||
</div>
|
||||
|
||||
<div className="forgot">
|
||||
<a onClick={ handleForgotPassword } href='/' id="forgotPassword" className="text-decoration-none">
|
||||
<small>Забыли пароль?</small>
|
||||
</a>
|
||||
</div>
|
||||
</Form.Group>
|
||||
|
||||
<div className="text-center mt-5">
|
||||
<Button variant="primary" type='submit'>Войти</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<ForgotPasswordModal
|
||||
shouldShowModal={ shouldShowForgotModal }
|
||||
hideModal={ () => setShowForgotModal(false) }
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageLogin;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user