Lab3 #2
20
Lab3/.eslintrc.json
Normal file
20
Lab3/.eslintrc.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es2021": true
|
||||||
|
},
|
||||||
|
"extends": "airbnb-base",
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 12,
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"quotes": "off",
|
||||||
|
"indent": "off",
|
||||||
|
"no-console": "off",
|
||||||
|
"no-use-before-define": "off",
|
||||||
|
"no-alert": "off",
|
||||||
|
"no-restricted-globals": "off",
|
||||||
|
"quote-props": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
Lab3/Dark Nights preview.jpg
Normal file
BIN
Lab3/Dark Nights preview.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
80
Lab3/admin.html
Normal file
80
Lab3/admin.html
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Steam</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-md navbar-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="nav-link active" href="./index.html"> Главная </a>
|
||||||
|
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||||
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
||||||
|
<div class="navbar-nav">
|
||||||
|
<a class="nav-link active" href="./basket.html">Корзина</a>
|
||||||
|
<a class="nav-link active" href="./library.html">Библиотека</a>
|
||||||
|
<a class="nav-link active" href="./entry.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="container-fluid p-2">
|
||||||
|
<div class="text-center">
|
||||||
|
<img id="image-preview" src="placeholder.jpg" alt="placeholder">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="games-form" class="admin_panel mt-4 needs-validation" novalidate>
|
||||||
|
<div class="input-group mb-4">
|
||||||
|
<span class="input-group-text span_admin_panel" id="basic-addon1">Жанр:</span>
|
||||||
|
<select id="genre" class="form-select" name="selected" required>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="input-group mb-4">
|
||||||
|
<span class="input-group-text span_admin_panel" id="basic-addon1">Название:</span>
|
||||||
|
<input id="name" type="text" class="form-control" placeholder="Название" required>
|
||||||
|
</div>
|
||||||
|
<div class="input-group mb-4">
|
||||||
|
<span class="input-group-text span_admin_panel" id="basic-addon1">Цена:</span>
|
||||||
|
<input id = "price" type="number" class="form-control" placeholder="Цена" required>
|
||||||
|
</div>
|
||||||
|
<div class="input-group mb-4">
|
||||||
|
<span class="input-group-text span_admin_panel" id="basic-addon1">Фото:</span>
|
||||||
|
<input id="image" name="image" type="file" class="form-control" placeholder="Фото" accept="image/*">
|
||||||
|
</div>
|
||||||
|
<div class = "d-flex justify-content-center">
|
||||||
|
<button class = "btn_admin_panel" type="submit"> Подтвердить </button> <!-- onclick="window.location.href = './index.html';" -->
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||||
|
</footer>
|
||||||
|
<script type="module">
|
||||||
|
import validation from "./js/validation";
|
||||||
|
import { linesPageForm } from "./js/lines"
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
validation();
|
||||||
|
linesPageForm();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
96
Lab3/basket.html
Normal file
96
Lab3/basket.html
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Steam</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-md navbar-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="nav-link" href="./index.html"> Главная </a>
|
||||||
|
|
||||||
|
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||||
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
||||||
|
<div class="navbar-nav">
|
||||||
|
<a class="nav-link active" href="./basket.html">Корзина</a>
|
||||||
|
<a class="nav-link active" href="./library.html">Библиотека</a>
|
||||||
|
<a class="nav-link active" href="./entry.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="container-fluid p-2">
|
||||||
|
<table class="table table-bordered align-middle">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class = "p-0 cell1_basket">
|
||||||
|
<img src="Dark Nights preview.jpg" alt="Dark Nights with Poe & Munro" class="img-fluid">
|
||||||
|
</td>
|
||||||
|
<td class = "p-0 cell2_basket">
|
||||||
|
<p class = "basket_name_of_game">Dark Nights with Poe and Munro</p>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td class = "p-0 text-center align-middle cell3_basket">
|
||||||
|
|
||||||
|
<p class = "price_of_game_main_page"> 299 руб.</p>
|
||||||
|
</td>
|
||||||
|
<td class = "p-0 text-center align-middle">
|
||||||
|
<button class = "basket_delete_button"> X </button>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class = "p-0 cell1_basket">
|
||||||
|
<img src="Ten Dates preview.jpg" alt="Ten Dates" class="img-fluid">
|
||||||
|
</td>
|
||||||
|
<td class = "p-0 text-center align-middle cell2_basket">
|
||||||
|
<p class = "basket_name_of_game">Ten Dates</p>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td class = "p-0 text-center align-middle cell3_basket">
|
||||||
|
<p class = "price_of_game_main_page"> 509 руб.</p>
|
||||||
|
</td>
|
||||||
|
<td class = "p-0 text-center align-middle">
|
||||||
|
<button class = "basket_delete_button"> X </button>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2" class = "align-left">
|
||||||
|
<p class = "basket_price_of_games"> Итого: 808 руб.</p>
|
||||||
|
</td>
|
||||||
|
<td colspan="2" class = "text-end">
|
||||||
|
<button class = "basket_buy_button">КУПИТЬ</button>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||||
|
Сайт Чернышева Георгия, ПИбд-22
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
78
Lab3/create_account.html
Normal file
78
Lab3/create_account.html
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Steam</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-md navbar-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="nav-link active" href="./index.html"> Главная </a>
|
||||||
|
|
||||||
|
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||||
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
||||||
|
<div class="navbar-nav">
|
||||||
|
<a class="nav-link active" href="./basket.html">Корзина</a>
|
||||||
|
<a class="nav-link active" href="./library.html">Библиотека</a>
|
||||||
|
<a class="nav-link active" href="./entry.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="container-fluid">
|
||||||
|
<div class="row align-items-center justify-content-center mb-2 mt-20vh">
|
||||||
|
<div class="col-auto justify-content-left">
|
||||||
|
<label for="inputMail" class="account_text" id = "label_nickname">ВВЕДИТЕ ПОЧТУ:</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row align-items-center justify-content-center mb-2">
|
||||||
|
<div class="col-auto justify-content-left">
|
||||||
|
<label for="inputMail" class="account_text" id = "label_nickname">ВВЕДИТЕ НИК:</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<input type="text" class="form-control" aria-label="Username" id = "inputMail">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row align-items-center justify-content-center mb-2">
|
||||||
|
<div class="col-auto">
|
||||||
|
<label for="inputPassword6" class="account_text">ВВЕДИТЕ ПАРОЛЬ:</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row align-items-center justify-content-center">
|
||||||
|
<div class="col-auto mt-3">
|
||||||
|
<button class = "account_btn"> СОЗДАТЬ </button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||||
|
<a class = "account_text" href = "entry.html">ВОЙТИ В АККАУНТ</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
67
Lab3/dark_nights_page.html
Normal file
67
Lab3/dark_nights_page.html
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Steam</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-md navbar-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="nav-link active" href="./index.html"> Главная </a>
|
||||||
|
|
||||||
|
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||||
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
||||||
|
<div class="navbar-nav">
|
||||||
|
<a class="nav-link active" href="./basket.html">Корзина</a>
|
||||||
|
<a class="nav-link active" href="./library.html">Библиотека</a>
|
||||||
|
<a class="nav-link active" href="./entry.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="container-fluid p-2">
|
||||||
|
<!-- ВЕРХНИЙ DIV -->
|
||||||
|
<div class = "row info_about_game_pic_and_name">
|
||||||
|
<div class = "col-sm-5">
|
||||||
|
<img src="Dark Nights preview.jpg" alt="Dark Nights with Poe & Munro" class="img-fluid">
|
||||||
|
</div>
|
||||||
|
<div class = "col-sm-7 text-center align-items-center">
|
||||||
|
<p class = "info_about_game_name">Dark Nights with Poe and Munro</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col-sm 12">
|
||||||
|
<p class = "info_about_game_text">Проведите местных радиоведущих По и Манро через шесть похожих на короткометражки эпизодов сверъестественной странности и обжигающего сюжета. От создателей The Infectious Madness of Doctor Dekker и The Shapeshifting Detective.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class = "info_about_game_div_button text-center align-items-center">
|
||||||
|
<button class = "info_about_game_add_to_basket_button"> Добавить в корзину </button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||||
|
Сайт Чернышева Георгия, ПИбд-22
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
68
Lab3/data.json
Normal file
68
Lab3/data.json
Normal file
File diff suppressed because one or more lines are too long
68
Lab3/entry.html
Normal file
68
Lab3/entry.html
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Steam</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-md navbar-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="nav-link active" href="./index.html"> Главная </a>
|
||||||
|
|
||||||
|
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||||
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
||||||
|
<div class="navbar-nav">
|
||||||
|
<a class="nav-link active" href="./basket.html">Корзина</a>
|
||||||
|
<a class="nav-link active" href="./library.html">Библиотека</a>
|
||||||
|
<a class="nav-link active" href="./entry.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<main class = "container-fluid">
|
||||||
|
<div class="row align-items-center justify-content-center mb-2 mt-25vh">
|
||||||
|
<div class="col-auto">
|
||||||
|
<label for="inputMail" class="account_text" id = "label_nickname">ВВЕДИТЕ НИК:</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row align-items-center justify-content-center mb-2">
|
||||||
|
<div class="col-auto">
|
||||||
|
<label for="inputMail" class="account_text" id = "label_nickname">ВВЕДИТЕ ПАРОЛЬ:</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<input type="text" class="form-control" aria-label="Username" id = "inputMail">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row align-items-center justify-content-center">
|
||||||
|
<div class="col-auto mt-3">
|
||||||
|
<button class = "account_btn"> ВОЙТИ </button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||||
|
<a class = "account_text" href = "create_account.html">СОЗДАТЬ АККАУНТ</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
71
Lab3/index.html
Normal file
71
Lab3/index.html
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Steam</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-md navbar-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="nav-link active main_link" href="./index.html"> Главная </a>
|
||||||
|
|
||||||
|
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||||
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
|
||||||
|
<div class="navbar-nav">
|
||||||
|
<a class="nav-link" href="./basket.html">Корзина</a>
|
||||||
|
<a class="nav-link" href="./library.html">Библиотека</a>
|
||||||
|
<a class="nav-link" href="./entry.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<main class="container-fluid p-2">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" placeholder="Название игры" aria-label="Recipient's username" aria-describedby="button_search">
|
||||||
|
<button class="btn btn_searching" type="button" id="button_search">Поиск</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex flex-row-reverse">
|
||||||
|
<div class="pt-2">
|
||||||
|
<button class="btn_adding_game" onclick="window.location.href = './admin.html';">+</button> <!-- -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table id = "games-table" class="table table-borderless table_of_main_page"> <!-- id = "games-table" -->
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||||
|
Сайт Чернышева Георгия, ПИбд-22
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import { drawLinesTable } from "./js/lines";
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
drawLinesTable();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
99
Lab3/js/lines-rest-api.js
Normal file
99
Lab3/js/lines-rest-api.js
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
// модуль для работы с REST API сервера
|
||||||
|
|
||||||
|
// адрес сервера
|
||||||
|
const serverUrl = "http://localhost:8081";
|
||||||
|
|
||||||
|
// Функция создания объекта-игры для отправки на сервер
|
||||||
|
function createLineObject(genre, name, price, image) {
|
||||||
|
return {
|
||||||
|
genresId: genre,
|
||||||
|
name,
|
||||||
|
price: Math.floor(parseFloat(price)),
|
||||||
|
image,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обращение к серверу для получения всех жанров (get)
|
||||||
|
export async function getAllGenreTypes() {
|
||||||
|
const response = await fetch(`${serverUrl}/genres`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обращение к серверу для получения всех игр (get)
|
||||||
|
export async function getAllLines() {
|
||||||
|
const response = await fetch(`${serverUrl}/lines?_expand=genres`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обращение к серверу для получения записи по id (get)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function getLine(id) {
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}?_expand=genres`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обращение к серверу для создания записи (post)
|
||||||
|
// объект отправляется в теле запроса (body)
|
||||||
|
export async function createLine(genre, name, price, image) {
|
||||||
|
const itemObject = createLineObject(genre, name, price, image);
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(itemObject),
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json",
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обращение к серверу для обновления записи по id (put)
|
||||||
|
// объект отправляется в теле запроса (body)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function updateLine(id, genre, name, price, image) {
|
||||||
|
const itemObject = createLineObject(genre, name, price, image);
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
method: "PUT",
|
||||||
|
body: JSON.stringify(itemObject),
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json",
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обращение к серверу для удаления записи по id (delete)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function deleteLine(id) {
|
||||||
|
const options = {
|
||||||
|
method: "DELETE",
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
117
Lab3/js/lines-ui.js
Normal file
117
Lab3/js/lines-ui.js
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
// работа с элементами управления
|
||||||
|
|
||||||
|
// объект для удобного получения элементов
|
||||||
|
// controls - элементы управления
|
||||||
|
// при обращении к атрибуту объекта вызывается
|
||||||
|
// нужная функция для поиска элемента
|
||||||
|
export const controls = {
|
||||||
|
table: document.querySelector("#games-table tbody"),
|
||||||
|
form: document.getElementById("games-form"),
|
||||||
|
lineId: document.getElementById("items-line-id"),
|
||||||
|
genresType: document.getElementById("genre"),
|
||||||
|
price: document.getElementById("price"),
|
||||||
|
name: document.getElementById("name"),
|
||||||
|
image: document.getElementById("image"),
|
||||||
|
imagePreview: document.getElementById("image-preview"),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Дефолтное превью
|
||||||
|
export const imagePlaceholder = "placeholder.jpg";
|
||||||
|
|
||||||
|
// функция создания option для select
|
||||||
|
export function createGenresOption(name, value = "", isSelected = false) {
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.value = value || "";
|
||||||
|
option.selected = isSelected;
|
||||||
|
option.text = name;
|
||||||
|
return option;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создания ячейки (колонки) таблицы с кнопками удаления/редактирования
|
||||||
|
function createTableButtons(text1, text2, callback1, callback2, styleOfCOlumn) {
|
||||||
|
const button1 = document.createElement("button");
|
||||||
|
button1.setAttribute('class', 'btn_for_game_main_page');
|
||||||
|
button1.onclick = () => {
|
||||||
|
callback1(); // вызывается переданная функция
|
||||||
|
};
|
||||||
|
button1.innerHTML = text1;
|
||||||
|
|
||||||
|
const button2 = document.createElement("button");
|
||||||
|
button2.setAttribute('class', 'btn_for_game_main_page');
|
||||||
|
button2.onclick = () => {
|
||||||
|
callback2(); // вызывается переданная функция
|
||||||
|
};
|
||||||
|
button2.innerHTML = text2;
|
||||||
|
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.setAttribute('class', styleOfCOlumn);
|
||||||
|
td.appendChild(button1);
|
||||||
|
td.appendChild(button2);
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создания ячейки (колонки) таблицы с фотографией игры
|
||||||
|
function createTableColumnWithImage(imageSrc, styleOfImage, styleOfColumn) {
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.setAttribute('class', styleOfColumn);
|
||||||
|
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.setAttribute('src', imageSrc);
|
||||||
|
img.setAttribute('class', styleOfImage);
|
||||||
|
td.appendChild(img);
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
// функция создания ячейки (колонки) таблицы с названием и ценой игры
|
||||||
|
function createTableColumnWithSeveralTexts(text1, text2, style1, style2, styleOfColumn) {
|
||||||
|
const td = document.createElement("td");
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.setAttribute('class', style1);
|
||||||
|
a.innerHTML = text1;
|
||||||
|
// ССЫЛКА-ЗАГЛУШКА НА СТРАНИЦУ С ИНФОЙ ОБ ИГРЕ ДЛЯ КАЖДОЙ ИГРЫ
|
||||||
|
a.href = "./dark_nights_page.html";
|
||||||
|
|
||||||
|
// Создание абзаца с ценой игры
|
||||||
|
const p = document.createElement("p");
|
||||||
|
p.setAttribute('class', style2);
|
||||||
|
|
||||||
|
// eslint-disable-next-line prefer-template
|
||||||
|
const fullPrice = text2 + ' руб.';
|
||||||
|
p.innerHTML = fullPrice;
|
||||||
|
|
||||||
|
td.setAttribute('class', styleOfColumn);
|
||||||
|
// Добавление названия игры в ячейку
|
||||||
|
td.appendChild(a);
|
||||||
|
// Добавление цены игры в ячейку
|
||||||
|
td.appendChild(p);
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создания ячейки (колонки) таблицы с жанром игры
|
||||||
|
function createTableColumnWithGenre(value, style, styleOfCOlumn) {
|
||||||
|
const td = document.createElement("td");
|
||||||
|
const p = document.createElement("p");
|
||||||
|
|
||||||
|
p.innerHTML = value;
|
||||||
|
p.setAttribute('class', style);
|
||||||
|
|
||||||
|
td.setAttribute('class', styleOfCOlumn);
|
||||||
|
td.appendChild(p);
|
||||||
|
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Создание строки с игрой при обновлении данных
|
||||||
|
export async function createTableRow(item, editPageCallback, deleteCallback) {
|
||||||
|
console.log(item);
|
||||||
|
const row = document.createElement("tr");
|
||||||
|
row.id = `line-${item.id}`;
|
||||||
|
// ПЕРВЫЙ СТОЛБЕЦ С ФОТКОЙ ИГРЫ. Передаю само фото, стиль для неё и для столбца
|
||||||
|
row.appendChild(createTableColumnWithImage(item.image, 'img-fluid w-100 h-100', 'align-middle p-0 cell1_main_page'));
|
||||||
|
// ВТОРОЙ СТОЛБЕЦ С НАЗВАНИЕМ ИГРЫ, ЦЕНОЙ. Передаю название, цену, стили для них и столбца
|
||||||
|
row.appendChild(createTableColumnWithSeveralTexts(item.name, item.price, 'nav-link active name_of_game_main_page', 'price_of_game_main_page', 'align-middle p-0 cell2_main_page'));
|
||||||
|
// ТРЕТИЙ СТОБЕЦ С ЖАНРОМ ИГРЫ
|
||||||
|
row.appendChild(createTableColumnWithGenre(item.genres.name, 'genre_of_game_main_page', 'align-middle p-0'));
|
||||||
|
// ЧЕТВЁРТЫЙ СТОЛБЕЦ С 2 КНОПКАМИ
|
||||||
|
row.appendChild(createTableButtons("изменить", "удалить", editPageCallback, deleteCallback, 'text-center align-middle p-0'));
|
||||||
|
return row;
|
||||||
|
}
|
||||||
213
Lab3/js/lines.js
Normal file
213
Lab3/js/lines.js
Normal file
@ -0,0 +1,213 @@
|
|||||||
|
import {
|
||||||
|
createLine, deleteLine, updateLine, getAllGenreTypes, getAllLines, getLine,
|
||||||
|
} from "./lines-rest-api";
|
||||||
|
import {
|
||||||
|
controls, createGenresOption, createTableRow, imagePlaceholder,
|
||||||
|
} from "./lines-ui";
|
||||||
|
|
||||||
|
// ОТОБРАЖЕНИЕ ВОЗМОЖНЫХ ЖАНРОВ ИГРЫ ПРИ СОЗДАНИИ/ИЗМЕНЕНИИ В SELECT
|
||||||
|
async function drawGenresSelect() {
|
||||||
|
// вызов метода REST API для получения списка жанров
|
||||||
|
const data = await getAllGenreTypes();
|
||||||
|
// очистка содержимого select, удаление всего между тегами <select></select>
|
||||||
|
controls.genresType.innerHTML = '';
|
||||||
|
// пустое значение
|
||||||
|
controls.genresType.appendChild(createGenresOption("Выберите жанр", "", true));
|
||||||
|
// цикл по результату ответа от сервера
|
||||||
|
// используется лямбда-выражение
|
||||||
|
// (item) => {} аналогично function(item) {}
|
||||||
|
data.forEach((genre) => {
|
||||||
|
controls.genresType.appendChild(createGenresOption(genre.name, genre.id));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ОБНОВЛЕНИЕ СОДЕРЖИМОГО TABLE ПРИ СОЗДАНИИ, РЕДАКТИРОВАНИИ, УДАЛЕНИИ
|
||||||
|
export async function drawLinesTable() {
|
||||||
|
console.info("Try to load data");
|
||||||
|
if (!controls.table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// вызов метода REST API для получения всех записей
|
||||||
|
const data = await getAllLines();
|
||||||
|
// очистка содержимого table, удаление всего между тегами <table></table>
|
||||||
|
controls.table.innerHTML = "";
|
||||||
|
// цикл по результату ответа от сервера с лямбда выражением (сокращение от function)
|
||||||
|
// ДОБАВИЛ async И await
|
||||||
|
data.forEach(async (item) => {
|
||||||
|
// добавление строки в конец таблицы
|
||||||
|
controls.table.appendChild(
|
||||||
|
await createTableRow(
|
||||||
|
item,
|
||||||
|
// функции в качестве параметра
|
||||||
|
// location - адрес текущей страницы, ей меняем адрес на страницу админки
|
||||||
|
() => location.assign(`admin.html?id=${item.id}`),
|
||||||
|
() => removeLine(item.id),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ДОБАВЛЕНИЕ НОВОЙ ЗАПИСИ НА СЕРВЕР, ОБНОВЛЕНИЕ ТАБЛИЦЫ
|
||||||
|
async function addLine(genre, name, price, image) {
|
||||||
|
console.info("Try to add item");
|
||||||
|
// вызов метода REST API для добавления записи
|
||||||
|
const data = await createLine(genre, name, price, image);
|
||||||
|
console.info("Added");
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
// РЕДАКТИРОВАНИЕ ЗАПИСИ НА СЕРВЕРЕ, ОБНОВЛЕНИЕ ТАБЛИЦЫ
|
||||||
|
async function editLine(id, genre, name, price, image) {
|
||||||
|
console.info("Try to update item");
|
||||||
|
// вызов метода REST API для обновления записи
|
||||||
|
const data = await updateLine(id, genre, name, price, image);
|
||||||
|
console.info("Updated");
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
// УДАЛЕНИЕ ЗАПИСИ НА СЕРВЕРЕ, ОБНОВЛЕНИЕ ТАБЛИЦЫ
|
||||||
|
async function removeLine(id) {
|
||||||
|
if (!confirm("Удалить игру?")) {
|
||||||
|
console.info("Canceled");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.info("Try to remove item");
|
||||||
|
// вызов метода REST API для удаления записи
|
||||||
|
const data = await deleteLine(id);
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ПОЛУЧЕНИЕ ДАННЫХ ФАЙЛА (ФОТКИ)
|
||||||
|
|
||||||
|
async function readFile(file) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// Шаг 1. Чтение файла
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
// Шаг 2. "Возвращение" содержимого, если файл нормально прочитан, через вызов resolve
|
||||||
|
reader.onloadend = () => {
|
||||||
|
const fileContent = reader.result;
|
||||||
|
resolve(fileContent);
|
||||||
|
};
|
||||||
|
// 3. Возвращение ошибки, если файл был прочитан с ошбикой
|
||||||
|
reader.onerror = () => {
|
||||||
|
// Или здесь в случае ошибки
|
||||||
|
reject(new Error("Something went wrong with the file reader."));
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обновление превью выбранного изображения при изменении/создании
|
||||||
|
async function updateImagePreview() {
|
||||||
|
// получение выбранного файла
|
||||||
|
// возможен выбор нескольких файлов, поэтому надо получить только первый
|
||||||
|
const file = controls.image.files[0];
|
||||||
|
// чтение содержимого файла в виде base64 строки
|
||||||
|
const fileContent = await readFile(file);
|
||||||
|
console.info("base64 ", fileContent);
|
||||||
|
// обновление источника src для тега img с id image-preview
|
||||||
|
controls.imagePreview.src = fileContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Функция для обработки создания и редактирования элементов таблицы через страницу admin.html
|
||||||
|
export async function linesPageForm() {
|
||||||
|
console.info("linesPageForm");
|
||||||
|
|
||||||
|
// загрузка и заполнение select со списком товаров
|
||||||
|
drawGenresSelect();
|
||||||
|
|
||||||
|
// аналог function goBack() {}
|
||||||
|
const goBack = () => location.assign("/index.html");
|
||||||
|
|
||||||
|
// Вызов функции обновления превью изображения при возникновении
|
||||||
|
// события onchange в тэге input с id image
|
||||||
|
controls.image.addEventListener("change", () => updateImagePreview());
|
||||||
|
|
||||||
|
// получение параметров GET-запроса из URL
|
||||||
|
// параметры перечислены после символа ?
|
||||||
|
const urlParams = new URLSearchParams(location.search);
|
||||||
|
|
||||||
|
// получение значения конкретного параметра (id)
|
||||||
|
// указан только при редактировании
|
||||||
|
const currentId = urlParams.get("id");
|
||||||
|
// если id задан
|
||||||
|
if (currentId) {
|
||||||
|
try {
|
||||||
|
// вызов метода REST API для получения записи по первичному ключу(id)
|
||||||
|
const line = await getLine(currentId);
|
||||||
|
// заполнение формы для редактирования
|
||||||
|
controls.genresType.value = line.genresId;
|
||||||
|
controls.price.value = line.price;
|
||||||
|
controls.name.value = line.name;
|
||||||
|
// заполнение превью
|
||||||
|
// Если пользователь выбрал изображение, то оно загружается
|
||||||
|
// в тэг image с id image - preview
|
||||||
|
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
||||||
|
controls.imagePreview.src = line.image ? line.image : imagePlaceholder;
|
||||||
|
} catch {
|
||||||
|
// в случае ошибки происходит возврат к странице index
|
||||||
|
goBack();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// обработчик события отправки формы
|
||||||
|
// возникает при нажатии на кнопку (button) с типом submit
|
||||||
|
// кнопка должна находится внутри тега form
|
||||||
|
controls.form.addEventListener("submit", async (event) => {
|
||||||
|
console.info("Form onSubmit");
|
||||||
|
// отключение стандартного поведения формы при отправке
|
||||||
|
// при отправке страница обновляется и JS перестает работать
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
// если форма не прошла валидацию, то ничего делать не нужно
|
||||||
|
if (!controls.form.checkValidity()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let imageBase64 = "";
|
||||||
|
// Получение выбранного пользователем изображения в виде base64 строки
|
||||||
|
// Если пользователь ничего не выбрал, то не нужно сохранять в БД
|
||||||
|
// дефолтное изображение
|
||||||
|
if (controls.imagePreview.src !== imagePlaceholder) {
|
||||||
|
// Загрузка содержимого атрибута src тэга img с id image-preview
|
||||||
|
// Здесь выполняется HTTP запрос с типом GET
|
||||||
|
const result = await fetch(controls.imagePreview.src);
|
||||||
|
// Получение из HTTP-ответа бинарного содержимого
|
||||||
|
const blob = await result.blob();
|
||||||
|
// Получение base64 строки для файла
|
||||||
|
// Здесь выполняется Promise из функции readFile
|
||||||
|
// Promise позволяет писать линейный код для работы с асинхронными методами
|
||||||
|
// без использования обработчиков (callback) с помощью await
|
||||||
|
imageBase64 = await readFile(blob);
|
||||||
|
}
|
||||||
|
|
||||||
|
// если значение параметра запроса не задано,
|
||||||
|
// то значит сейчас делается добавление записи
|
||||||
|
// если не задано, значит это обновление записи
|
||||||
|
if (!currentId) {
|
||||||
|
await addLine(
|
||||||
|
controls.genresType.value,
|
||||||
|
controls.name.value,
|
||||||
|
controls.price.value,
|
||||||
|
imageBase64,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
await editLine(
|
||||||
|
currentId,
|
||||||
|
controls.genresType.value,
|
||||||
|
controls.name.value,
|
||||||
|
controls.price.value,
|
||||||
|
imageBase64,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// возврат к странице index
|
||||||
|
goBack();
|
||||||
|
});
|
||||||
|
}
|
||||||
25
Lab3/js/validation.js
Normal file
25
Lab3/js/validation.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
// модуль валидации формы (проверки данных)
|
||||||
|
|
||||||
|
function validation() {
|
||||||
|
// поиск среди тегов form тех, у которых css класс needs-validation (с bootstrap)
|
||||||
|
const forms = document.querySelectorAll("form.needs-validation");
|
||||||
|
|
||||||
|
for (let i = 0; i < forms.length; i += 1) {
|
||||||
|
const form = forms[i];
|
||||||
|
// добавление для каждой формы обработчика нажатия на кнопку с id = "submit"
|
||||||
|
form.addEventListener("submit", (event) => {
|
||||||
|
// если форма не прошла валидацию (зависит от атрибута type у input)
|
||||||
|
if (!form.checkValidity()) {
|
||||||
|
// отключает стандартное действие (отменяет событие), но будет для
|
||||||
|
// всех элементов до тех пор, пока не отменит это методом ниже
|
||||||
|
event.preventDefault();
|
||||||
|
// предотвращение распространения preventDefault на другие объекты
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
// добавление к форме класса was-validated
|
||||||
|
form.classList.add("was-validated");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Экспортироваться будет сама функция
|
||||||
|
export default validation;
|
||||||
120
Lab3/library.html
Normal file
120
Lab3/library.html
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Steam</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-md navbar-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="nav-link active" href="./index.html"> Главная </a>
|
||||||
|
|
||||||
|
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||||
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
||||||
|
<div class="navbar-nav">
|
||||||
|
<a class="nav-link active" href="./basket.html">Корзина</a>
|
||||||
|
<a class="nav-link active" href="./library.html">Библиотека</a>
|
||||||
|
<a class="nav-link active" href="./entry.html">Вход</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="container-fluid p-2">
|
||||||
|
<table class="table table-borderless table_of_library">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class = "align-middle p-0 cell1_library">
|
||||||
|
<img src="Dark Nights preview.jpg" alt="Dark Nights with Poe & Munro" class="img-fluid">
|
||||||
|
</td>
|
||||||
|
<td class = "align-middle p-0 cell2_library">
|
||||||
|
<a class = "nav-link library_name_of_game" href="./dark_nights_page.html">Dark Nights with Poe and Munro</a>
|
||||||
|
</td>
|
||||||
|
<td class = "align-middle text-center p-0">
|
||||||
|
<select>
|
||||||
|
<option disabled selected>ИГРА</option>
|
||||||
|
<option>Играть</option>
|
||||||
|
<option>Установить</option>
|
||||||
|
<option>Удалить</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class = "align-middle p-0 cell1_library" >
|
||||||
|
<img src="Song of Farca preview.jpg" alt="Song of Farca" class="img-fluid">
|
||||||
|
</td>
|
||||||
|
<td class = "align-middle p-0 cell2_library" >
|
||||||
|
<a class = "nav-link library_name_of_game" href="./dark_nights_page.html">Song of Farca</a>
|
||||||
|
</td>
|
||||||
|
<td class = "align-middle text-center p-0">
|
||||||
|
<select>
|
||||||
|
<option disabled selected>ИГРА</option>
|
||||||
|
<option>Играть</option>
|
||||||
|
<option>Установить</option>
|
||||||
|
<option>Удалить</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class = "align-middle p-0 cell1_library">
|
||||||
|
<img src="Papers, Please preview.jpg" alt="Papers, Please" class="img-fluid">
|
||||||
|
</td>
|
||||||
|
<td class = "align-middle p-0 cell2_library">
|
||||||
|
<a class = "nav-link library_name_of_game" href="./dark_nights_page.html"> Papers, Please </a>
|
||||||
|
</td>
|
||||||
|
<td class = "align-middle text-center p-0">
|
||||||
|
<select>
|
||||||
|
<option disabled selected>ИГРА</option>
|
||||||
|
<option>Играть</option>
|
||||||
|
<option>Установить</option>
|
||||||
|
<option>Удалить</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class = "align-middle p-0 cell1_library">
|
||||||
|
<img src="Ten Dates preview.jpg" alt="Ten Dates" class="img-fluid">
|
||||||
|
</td>
|
||||||
|
<td class = "align-middle p-0 cell2_library">
|
||||||
|
<a class = "nav-link library_name_of_game" href="./dark_nights_page.html">Ten Dates</a>
|
||||||
|
</td>
|
||||||
|
<td class = "align-middle text-center p-0">
|
||||||
|
<select>
|
||||||
|
<option disabled selected>ИГРА</option>
|
||||||
|
<option>Играть</option>
|
||||||
|
<option>Установить</option>
|
||||||
|
<option>Удалить</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||||
|
Сайт Чернышева Георгия, ПИбд-22
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
4700
Lab3/package-lock.json
generated
Normal file
4700
Lab3/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
Lab3/package.json
Normal file
26
Lab3/package.json
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "lab3",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"vite": "vite",
|
||||||
|
"serve": "http-server -p 3000 ./dist/",
|
||||||
|
"build": "vite build",
|
||||||
|
"rest": "json-server --watch data.json -p 8081",
|
||||||
|
"dev": "npm-run-all --parallel rest vite",
|
||||||
|
"prod": "npm-run-all build --parallel serve rest"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap": "5.2.1",
|
||||||
|
"@fortawesome/fontawesome-free": "6.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"http-server": "14.1.1",
|
||||||
|
"vite": "4.4.9",
|
||||||
|
"eslint": "8.50.0",
|
||||||
|
"eslint-config-airbnb-base": "15.0.0",
|
||||||
|
"eslint-plugin-import": "2.28.1",
|
||||||
|
"json-server": "0.17.4",
|
||||||
|
"npm-run-all": "4.1.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
Lab3/placeholder.jpg
Normal file
BIN
Lab3/placeholder.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
323
Lab3/style.css
Normal file
323
Lab3/style.css
Normal file
@ -0,0 +1,323 @@
|
|||||||
|
html {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #2e4150;
|
||||||
|
margin-bottom: 70px; /*Равно высоте подвала*/
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
select {
|
||||||
|
background-color: #385a80;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 2.5vw;
|
||||||
|
border: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
select option {
|
||||||
|
background-color: #385a80;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: auto;
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
font-family: sans-serif;
|
||||||
|
background-color:#385a80 !important;
|
||||||
|
min-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #385a80;
|
||||||
|
height: 70px;
|
||||||
|
max-height: 100px;
|
||||||
|
width: 100%;
|
||||||
|
font-family: sans-serif;
|
||||||
|
color:white;
|
||||||
|
font-size: calc(2vw + 8px) !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.navbar > div > a {
|
||||||
|
font-size: calc(18px + 2vw) !important;
|
||||||
|
}
|
||||||
|
.navbar-nav > a {
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: white;
|
||||||
|
font-size: calc(12px + 2vw);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-fluid > a {
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: white;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
/* ГЛАВНАЯ СТРАНИЦА */
|
||||||
|
.btn_for_game_main_page {
|
||||||
|
border: none;
|
||||||
|
/* size: 0.5rem; */
|
||||||
|
background-color: #385a80 !important;
|
||||||
|
color: white;
|
||||||
|
font-size: calc(1vh + 0.5vw) !important;
|
||||||
|
margin-right: 0.3rem;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
.btn_for_game_main_page {
|
||||||
|
margin-bottom: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.btn_for_game_main_page {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name_of_game_main_page {
|
||||||
|
color: white;
|
||||||
|
font-size: 3vw !important;
|
||||||
|
margin-left: 1vw !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price_of_game_main_page {
|
||||||
|
color: white;
|
||||||
|
font-size: 2.7vw !important;
|
||||||
|
margin-left: 1vw !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .img-fluid {
|
||||||
|
max-height: 100%;
|
||||||
|
} */
|
||||||
|
.genre_of_game_main_page {
|
||||||
|
color: white;
|
||||||
|
font-size: 1.5vw !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table_of_main_page {
|
||||||
|
border-collapse: separate;
|
||||||
|
}
|
||||||
|
@media (max-width: 420px) {
|
||||||
|
.table_of_main_page {
|
||||||
|
border-spacing: 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 420px) {
|
||||||
|
.table_of_main_page {
|
||||||
|
border-spacing: 0 0.5vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cell1_main_page {
|
||||||
|
width: 20% !important;
|
||||||
|
}
|
||||||
|
.cell2_main_page {
|
||||||
|
width: 55% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > .container-fluid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn_searching {
|
||||||
|
background-color: #385a80 !important;
|
||||||
|
color: white !important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.searching_input {
|
||||||
|
size: 2vw !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn_adding_game {
|
||||||
|
background-color: #385a80 !important;
|
||||||
|
color: white !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* СТРАНИЦА С ОПИСАНИЕМ ИГРЫ */
|
||||||
|
|
||||||
|
.info_about_game_pic_and_name {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 40% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info_about_game_name {
|
||||||
|
color: white;
|
||||||
|
font-weight: 700;
|
||||||
|
align-items: center !important;
|
||||||
|
font-size: calc(3vw + 2vh) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info_about_game_text {
|
||||||
|
color: white;
|
||||||
|
align-items: center !important;
|
||||||
|
font-size: calc(2vw + 2vh) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info_about_game_add_to_basket_button {
|
||||||
|
background-color: #385a80;
|
||||||
|
color: white;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: calc(2.5vw + 1.5vh);
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.info_about_game_div_button {
|
||||||
|
border: 1px white;
|
||||||
|
align-items: center !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* СТРАНИЦЫ АККАУНТА */
|
||||||
|
.account_text {
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: white;
|
||||||
|
font-size: calc(2.5vw + 1.5vh);
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account_btn {
|
||||||
|
background-color:#385a80;
|
||||||
|
color: white;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: calc(2.5vw + 1.5vh);
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
}
|
||||||
|
.mt-25vh {
|
||||||
|
margin-top: 25vh;
|
||||||
|
}
|
||||||
|
.mt-20vh {
|
||||||
|
margin-top: 20vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* БИБЛИОТЕКА */
|
||||||
|
.library_name_of_game {
|
||||||
|
color: white;
|
||||||
|
font-size: calc(3vw + 0.5vh);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-left: 0.5vw;
|
||||||
|
}
|
||||||
|
.table_of_library {
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0 0.5vw;
|
||||||
|
}
|
||||||
|
.cell1_library {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
.cell2_library {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* КОРЗИНА */
|
||||||
|
.basket_name_of_game {
|
||||||
|
color: white;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 3vw;
|
||||||
|
font-size: auto;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.basket_price_of_games{
|
||||||
|
color: white;
|
||||||
|
font-size: 3vw;
|
||||||
|
margin-bottom: auto;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.basket_delete_button {
|
||||||
|
font-family: sans-serif;
|
||||||
|
border: none !important;
|
||||||
|
background: none !important;
|
||||||
|
color: white !important;
|
||||||
|
font-size: 3vw !important;
|
||||||
|
}
|
||||||
|
.basket_buy_button {
|
||||||
|
background-color: #385a80;
|
||||||
|
color: white;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 3vw;
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.cell1_basket {
|
||||||
|
width: 20% !important;
|
||||||
|
}
|
||||||
|
.cell2_basket {
|
||||||
|
width: 50% !important;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.cell3_basket {
|
||||||
|
width: 20% !important;
|
||||||
|
}
|
||||||
|
tfoot {
|
||||||
|
border-color: #2e4150;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* СТРАНИЦА АДМИНА */
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
.admin_panel {
|
||||||
|
margin-left: 20%;
|
||||||
|
margin-right: 20%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.admin_panel {
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.span_admin_panel {
|
||||||
|
background-color: #385a80 !important;
|
||||||
|
color: white !important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
.span_admin_panel {
|
||||||
|
font-size: 1.5vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.span_admin_panel {
|
||||||
|
font-size: 3vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn_admin_panel {
|
||||||
|
border: none;
|
||||||
|
background-color: #385a80 !important;
|
||||||
|
color: white;
|
||||||
|
font-size: calc(1.5vh + 1.5vw) !important;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#image-preview {
|
||||||
|
width: 350px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
21
Lab3/vite.config.js
Normal file
21
Lab3/vite.config.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { resolve } from "path";
|
||||||
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
build: {
|
||||||
|
sourcemap: true,
|
||||||
|
emptyOutDir: true,
|
||||||
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
main: resolve(__dirname, 'index.html'),
|
||||||
|
basket: resolve(__dirname, 'basket.html'),
|
||||||
|
library: resolve(__dirname, 'library.html'),
|
||||||
|
entry: resolve(__dirname, 'entry.html'),
|
||||||
|
create: resolve(__dirname, 'create_account.html'),
|
||||||
|
info: resolve(__dirname, 'dark_nights_page.html'),
|
||||||
|
admin: resolve(__dirname, 'admin.html'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
BIN
Lab3/ИП отчёт лаб 3.docx
Normal file
BIN
Lab3/ИП отчёт лаб 3.docx
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user