Проверка

This commit is contained in:
ujijrujijr 2023-12-01 15:11:45 +03:00
parent d3366491ef
commit d4425aa9e7
23 changed files with 6259 additions and 0 deletions

20
Lab3/.eslintrc copy.json Normal file
View 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"
}
}

21
Lab4/.eslintrc.json Normal file
View File

@ -0,0 +1,21 @@
{
"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",
"linebreak-style": "off"
}
}

45
Lab4/.gitignore vendored Normal file
View File

@ -0,0 +1,45 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# Visual Studio Code
.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
.DS_Store
Thumbs.db
# Ignore dist
dist/

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

80
Lab4/admin.html Normal file
View 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
Lab4/basket.html Normal file
View 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
Lab4/create_account.html Normal file
View 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>

View 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
Lab4/data.json Normal file

File diff suppressed because one or more lines are too long

68
Lab4/entry.html Normal file
View 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
Lab4/index.html Normal file
View 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
Lab4/js/lines-rest-api.js Normal file
View 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
Lab4/js/lines-ui.js Normal file
View 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
Lab4/js/lines.js Normal file
View 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
Lab4/js/validation.js Normal file
View 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
Lab4/library.html Normal file
View 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
Lab4/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

26
Lab4/package.json Normal file
View 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
Lab4/placeholder.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

323
Lab4/style.css Normal file
View 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
Lab4/vite.config.js Normal file
View 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'),
},
},
},
});

Binary file not shown.

1
old Submodule

@ -0,0 +1 @@
Subproject commit a97d5224c4f2f01aa1679cff83ce29500f30fca3