Marselchii/PIbd-21_Sagirov_M.M._Internet_Programming
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Третья лаба + исправленный отчет

Browse Source
This commit is contained in:
Marselchi 2023-12-11 18:48:20 +04:00
parent 7e4c3eac89
commit da0aa9d524
14 changed files with 1018 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
lab2/Laboratornaya_2.docx
View File

Binary file not shown.

20
lab3/.eslintrc.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"
}
}

98
lab3/add.html Normal file
View File

@ -0,0 +1,98 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Онлайн-кинотеатр</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="./node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<script src="./node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body class ="d-flex flex-column h-100">
<header id="header" class="header row w-100 m-0 mb-3">
<div class="p-0">
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-center row w-100 m-0">
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center">
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
</div>
</div>
</div>
</header>
<main class="container-fluid flex-shrink-0">
<section class="d-flex align-items-center justify-content-center">
<div class="container">
<div class="justify-content-center pt-2">
<p class="text-center text-white fs-2 fw-normal font-family-Average Sans">Добавить фильм</p>
</div>
</div>
</section>
<div class="text-center">
<img id="image-preview" src="https://via.placeholder.com/200" style="max-width:300px; max-height:600px; min-width:300px; min-height:400px"
alt="placeholder">
</div>
<form id="items-form" class="needs-validation" novalidate>
<div class="mb-2">
<label class="form-label" for="name">Название</label>
<textarea class="form-control" id="name" rows="1"></textarea>
</div>
<div class="mb-2">
<label for="lang" class="form-label">Язык</label>
<select id="lang" class="form-select" name="selectedLang" required>
</select>
</div>
<div class="mb-2">
<label for="genre" class="form-label">Жанры</label>
<select id="genre" class="form-select" name="selectedGenre" required>
</select>
</div>
<label>Год</label>
<div class="input-group date" data-provide="datepicker">
<input type="text" id="year" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
<div class="mb-2">
<label class="form-label" for="descp">Описание</label>
<textarea class="form-control" id="descp" rows="3"></textarea>
</div>
<div class="mb-2">
<label class="form-label" for="actrs">Актеры</label>
<textarea class="form-control" id="actrs" rows="2"></textarea>
</div>
<div class="mb-2">
<label class="form-label" for="image">Изображение</label>
<input id="image" type="file" name="image" class="form-control" accept="image/*">
</div>
<a href="/admin.html" class="btn btn-secondary">Назад</a>
<button type="submit" class="btn btn-primary">Сохранить</button>
</form>
</main>
<footer class="footer mt-auto fixed bottom-0">
<div class= "bg-dark-blue d-flex text-center justify-content-center">
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
</div>
</footer>
<script>
$(document).ready(function(){
$('.input-group.date').datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years"
});
});
</script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="module">
import validation from "./js/validation";
import {linesPageForm} from "./js/lines"
document.addEventListener('DOMContentLoaded', () => {
validation();
linesPageForm();
});
</script>
</body>
</html>

54
lab3/admin.html Normal file
View File

@ -0,0 +1,54 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Онлайн-кинотеатр</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
</head>
<body class ="d-flex flex-column h-100">
<header id="header" class="header row w-100 m-0 mb-3">
<div class="p-0">
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-center row w-100 m-0">
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center">
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
</div>
</div>
</div>
</header>
<main class="container-fluid flex-shrink-0">
<div>
<table id="items-table" class="table table-striped bg-cyan">
<thead>
<th scope="col">№</th>
<th scope="col" class="w-25">Название</th>
<th scope="col" class="w-25">Язык</th>
<th scope="col" class="w-25">Год</th>
<th scope="col"></th>
<th scope="col"></th>
</thead>
<tbody></tbody>
</table>
</div>
<button id="items-add" class="btn bg-cyan"><a class="btn" href="/add.html" >Добавить фильм</a></button>
</main>
<footer class="footer mt-auto fixed bottom-0">
<div class= "bg-dark-blue d-flex text-center justify-content-center">
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
</div>
</footer>
<script type="module">
import validation from "./js/validation";
import {draw} from "./js/lines.js";
document.addEventListener('DOMContentLoaded', () => {
validation();
draw();
});
</script>
</body>
</html>

82
lab3/data.json Normal file
View File

File diff suppressed because one or more lines are too long

101
lab3/favourite.html Normal file
View File

@ -0,0 +1,101 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Онлайн-кинотеатр</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
</head>
<body class ="d-flex flex-column h-100">
<div>
<header id="header" class="header row w-100 m-0 mb-3">
<div class="p-0">
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
<div class="col-0 col-lg bg-cyan mw-100 mh-100">
</div>
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans m-0 py-2" href="index.html">Онлайн-кинотеатр</a>
</div>
<div class="d-flex flex-column col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan ">
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
<a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
</div>
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
<a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
</div>
</div>
<div class="input-group row text-break w-100 mt-3 p-0 mb-2">
<div class="form-outline col text-break h-100 flex-grow-1">
<input id="search-focus" type="search" id="form1" class="form-control ms-3 p-2 ms-lg-0" placeholder="Введите название фильма" />
</div>
<div class="dropdown col-1 col-lg-2 col-xl-3 w-auto mx-3 p-0 text-break h-100">
<button class="btn btn-secondary dropdown-toggle h-100" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<span class="d-none d-lg-inline">Выберите жанр</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
</ul>
</div>
<button type="button" class="btn btn-primary col-1 col-sm-1 col-lg-3 col-xl-2 h-100 w-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
<span class="d-none d-lg-inline">Поиск</span>
</button>
</div>
</div>
</div>
</header>
<main class="container-fluid flex-shrink-0">
<div class="row m-2 my-5 ">
<div class="col d-flex align-items-center justify-content-center">
<a href="selected.html" class="col-xs-12 col-lg-3 w-auto h-auto"><img src="images/fire.jpg" class="img-fluid" alt=""></a>
</div>
<div class="d-flex flex-column col-xs-12 col-lg-6 col-xl-8 p-0 justify-content-center">
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 mx-4">
<p class="text-white fs-5 fw-normal font-family-Bayon text-center">Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей, которые борются с неистовой огненной стихией, уничтожающей всё на своем пути. Герои работают в эпицентре лесного пожара и приходят на помощь</p>
</div>
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
<p class="text-center text-white fs-3 fw-normal font-family-Bayon">Приключения, катастрофа, драма, боевик</p>
</div>
<a href="selected.html" class="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3">
Перейти
</a>
<a class="d-flex btn btn-primary justify-content-center p-5 fs-5 m-3">
Удалить из избранного
</a>
</div>
</div>
<div class="row m-2 my-5">
<div class="col d-flex align-items-center justify-content-center">
<a href="selected.html" class="col-xs-12 col-lg-3 w-auto h-auto"><img src="images/fire.jpg" class="img-fluid" alt=""></a>
</div>
<div class="d-flex flex-column col-xs-12 col-lg-6 col-xl-8 p-0 justify-content-center">
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break mx-4">
<p class="text-white fs-5 fw-normal font-family-Bayon text-center">Фильм-катастрофа о подвиге небольшой бригады пожарных и спасателей, которые борются с неистовой огненной стихией, уничтожающей всё на своем пути. Герои работают в эпицентре лесного пожара и приходят на помощь</p>
</div>
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
<p class="text-center text-white fs-3 fw-normal font-family-Bayon">Приключения, катастрофа, драма, боевик</p>
</div>
<a href="selected.html" class="d-flex btn btn-primary justify-content-center p-5 fs-4 m-3">
Перейти
</a>
<a class="d-flex btn btn-primary justify-content-center p-5 fs-5 m-3">
Удалить из избранного
</a>
</div>
</div>
</main>
<footer class="footer mt-auto fixed bottom-0">
<div class= "bg-dark-blue d-flex text-center justify-content-center">
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
</div>
</footer>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</div>
</body>
</html>

79
lab3/index.html Normal file
View File

@ -0,0 +1,79 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Онлайн-кинотеатр</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
</head>
<body class ="d-flex flex-column h-100 w-100">
<header id="header" class="header row w-100 m-0 mb-3">
<div class="p-0">
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
<div class="col-0 col-lg bg-cyan mw-100 mh-100">
</div>
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
</div>
<div class="d-flex flex-column col-xs-12 col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan">
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
<a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
</div>
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
<a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
</div>
</div>
</div>
</div>
</header>
<main class="container-fluid flex-shrink-0 p-0">
<section class="d-flex align-items-center justify-content-center">
<div>
<div class="row justify-content-center pt-2 col">
<p class="text-center text-white fs-2 fw-normal font-family-Average Sans">Популярные сейчас</p>
</div>
</div>
</section>
<div class="row p-2 m-2 align-items-center justify-content-evenly" id = "banner">
</div>
<section class="d-flex justify-content-center">
<div class="row m-3 justify-content-evenly w-100 text-break">
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Ужасы</a>
</div>
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Экшн</a>
</div>
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Детективы</a>
</div>
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Боевики</a>
</div>
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2" >
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Фентези</a>
</div>
<div class="bg-grey rounded-3 col-xs-12 col-sm-6 col-lg-3 col-xl-1 text-center p-2 m-2">
<a class="text-decoration-none text-black fs-5 fw-normal font-family-Average Sans" href ="search.html">Спорт</a>
</div>
</div>
</section>
</main>
<footer class="footer mt-auto fixed bottom-0 w-100">
<div class= "bg-dark-blue d-flex text-center justify-content-center">
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
</div>
</footer>
<script type="module">
import myBanner from "./js/banner";
document.addEventListener('DOMContentLoaded', () => {
myBanner();
});
</script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

25
lab3/js/banner.js Normal file
View File

@ -0,0 +1,25 @@
// модуль для смены изображения в баннере по таймеру
import { getAllLines } from "./lines-rest-api";
// указывается блок, в котором будет баннер
// блок должен содержать изображения
async function myBanner() {
console.info("Loaded");
const data = await getAllLines();
data.forEach((item) => {
const im = document.createElement("img");
const ban = document.getElementById("banner");
const a = document.createElement("a");
a.setAttribute("class", "col-xs-12 col-sm-6 col-lg-3 w-auto h-auto m-2");
im.setAttribute("style", "max-width:300px; max-height:600px; min-width:300px; min-height:400px");
im.setAttribute("class", "img-fluid");
im.setAttribute("alt", "");
im.src = item.image;
im.class = "img-fluid";
a.appendChild(im);
ban.appendChild(a);
});
// получение всех изображений внутри баннера
}
export default myBanner;

108
lab3/js/lines-rest-api.js Normal file
View File

@ -0,0 +1,108 @@
// модуль для работы с REST API сервера
// адрес сервера
const serverUrl = "http://localhost:8081";
// функция возвращает объект нужной структуры для отправки на сервер
function createLineObject(name, lang, genre, year, descp, actr, image) {
return {
name,
langsId: lang,
genre,
year,
descp,
actr,
image,
};
}
// обращение к серверу для получения всех типов товара (get)
export async function getAllLangTypes() {
const response = await fetch(`${serverUrl}/langs`);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
export async function getAllGenreTypes() {
const response = await fetch(`${serverUrl}/genre`);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
// обращение к серверу для получения всех записей (get)
export async function getAllLines() {
const response = await fetch(`${serverUrl}/lines?_expand=langs`);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
// обращение к серверу для получения записи по первичному ключу (id) (get)
// id передается в качестве части пути URL get-запроса
export async function getLine(id) {
const response = await fetch(`${serverUrl}/lines/${id}?_expand=langs`);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
// обращение к серверу для создания записи (post)
// объект отправляется в теле запроса (body)
export async function createLine(name, lang, genre, year, descp, actr, image) {
const itemObject = createLineObject(name, lang, genre, year, descp, actr, image);
const options = {
method: "POST",
body: JSON.stringify(itemObject),
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
};
const response = await fetch(`${serverUrl}/lines`, options);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
// обращение к серверу для обновления записи по id (put)
// объект отправляется в теле запроса (body)
// id передается в качестве части пути URL get-запроса
export async function updateLine(id, name, lang, genre, year, descp, actr, image) {
const itemObject = createLineObject(name, lang, genre, year, descp, actr, image);
const options = {
method: "PUT",
body: JSON.stringify(itemObject),
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
};
const response = await fetch(`${serverUrl}/lines/${id}`, options);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}
// обращение к серверу для удаления записи по id (delete)
// id передается в качестве части пути URL get-запроса
export async function deleteLine(id) {
const options = {
method: "DELETE",
};
const response = await fetch(`${serverUrl}/lines/${id}`, options);
if (!response.ok) {
throw response.statusText;
}
return response.json();
}

100
lab3/js/lines-ui.js Normal file
View File

@ -0,0 +1,100 @@
// модуль для работы с элементами управления
// объект для удобного получения элементов
// при обращении к атрибуту объекта вызывается
// нужная функция для поиска элемента
export const cntrls = {
button: document.getElementById("items-add"),
table: document.querySelector("#items-table tbody"),
form: document.getElementById("items-form"),
lineId: document.getElementById("items-line-id"),
langType: document.getElementById("lang"),
genreType: document.getElementById("genre"),
name: document.getElementById("name"),
year: document.getElementById("year"),
descp: document.getElementById("descp"),
image: document.getElementById("image"),
actr: document.getElementById("actrs"),
imagePreview: document.getElementById("image-preview"),
};
// Дефолтное превью
export const imagePlaceholder = "https://via.placeholder.com/200";
// функция создает тег option для select
// <option value="" selected>name</option>
export function createItemsOption(name, value = "", isSelected = false) {
const option = document.createElement("option");
option.value = value || "";
option.selected = isSelected;
option.text = name;
return option;
}
// функция создает ссылку (a) для таблицы
// содержимое тега a заполняется необходимой иконкой (icon)
// при нажатии вызывается callback
// ссылка "оборачивается" тегом td
// <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></td>
function createTableAnchor(icon, callback) {
const i = document.createElement("i");
i.classList.add("fa-solid", icon);
const a = document.createElement("a");
a.href = "#";
a.appendChild(i);
a.onclick = (event) => {
// чтобы в URL не добавлялась решетка
event.preventDefault();
event.stopPropagation();
callback();
};
const td = document.createElement("td");
td.appendChild(a);
return td;
}
// функция создает колонку таблицы с текстом value
// <td>value</td>
function createTableColumn(value) {
const td = document.createElement("td");
td.textContent = value;
return td;
}
// функция создает строку таблицы
// <tr>
// <th scope="row">index + 1</th>
// <td>item.items.name</td>
// <td>parseFloat(item.price).toFixed(2))</td>
// <td>item.count</td>
// <td>parseFloat(item.sum).toFixed(2))</td>
// <td><a href="#" onclick="editCallback()"><i class="fa-solid fa-pencil"></i></a></td>
// <td><a href="#" onclick="editPageCallback()"><i class="fa-solid fa-pen-to-square"></i></a></td>
// <td><a href="#" onclick="deleteCallback()"><i class="fa-solid fa-trash"></i></a></td>
// </tr>
export function createTableRow(item, index, editPageCallback, deleteCallback) {
const rowNumber = document.createElement("th");
rowNumber.scope = "row";
rowNumber.textContent = index + 1;
const row = document.createElement("tr");
row.id = `line-${item.id}`;
row.appendChild(rowNumber);
row.appendChild(createTableColumn(item.name));
row.appendChild(createTableColumn(item.langs.name));
row.appendChild(createTableColumn(item.year));
// редактировать на странице page-edit
row.appendChild(createTableAnchor("fa-pen-to-square", editPageCallback));
// удаление
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
return row;
}
export function createImg(item) {
const img = document.createElement("img");
img.src = item.image;
return img;
}

253
lab3/js/lines.js Normal file
View File

@ -0,0 +1,253 @@
// модуль с логикой
import {
createLine, deleteLine, getAllLangTypes, getAllGenreTypes, getAllLines, getLine, updateLine,
} from "./lines-rest-api";
import {
cntrls, createItemsOption, createTableRow, imagePlaceholder,
} from "./lines-ui";
async function drawLangSelect() {
// вызов метода REST API для получения списка типов товаров
const data = await getAllLangTypes();
// очистка содержимого select
// удаляется все, что находится между тегами <select></select>
// но не атрибуты
cntrls.langType.innerHTML = "";
// пустое значение
cntrls.langType.appendChild(createItemsOption("Выберите значение", "", true));
// цикл по результату ответа от сервера
// используется лямбда-выражение
// (item) => {} аналогично function(item) {}
data.forEach((lang) => {
cntrls.langType.appendChild(createItemsOption(lang.name, lang.id));
});
}
async function drawGenreSelect() {
// вызов метода REST API для получения списка типов товаров
const data = await getAllGenreTypes();
// очистка содержимого select
// удаляется все, что находится между тегами <select></select>
// но не атрибуты
cntrls.genreType.innerHTML = "";
// пустое значение
cntrls.genreType.appendChild(createItemsOption("Выберите значение", "", true));
// цикл по результату ответа от сервера
// используется лямбда-выражение
// (item) => {} аналогично function(item) {}
data.forEach((genre) => {
cntrls.genreType.appendChild(createItemsOption(genre.name, genre.id));
});
}
async function drawLinesTable() {
console.info("Try to load data");
if (!cntrls.table) {
return;
}
// вызов метода REST API для получения всех записей
const data = await getAllLines();
// очистка содержимого table
// удаляется все, что находится между тегами <table></table>
// но не атрибуты
cntrls.table.innerHTML = "";
// цикл по результату ответа от сервера
// используется лямбда-выражение
// (item, index) => {} аналогично function(item, index) {}
data.forEach((item, index) => {
cntrls.table.appendChild(
createTableRow(
item,
index,
// функции передаются в качестве параметра
// это очень удобно, так как аргументы функций доступны только
// в данном месте кода и не передаются в сервисные модули
() => location.assign(`add.html?id=${item.id}`),
() => removeLine(item.id),
),
);
});
}
async function addLine(name, lang, genre, year, descp, actr, image) {
console.info("Try to add film");
// вызов метода REST API для добавления записи
const data = await createLine(name, lang, genre, year, descp, actr, image);
console.info("Added");
console.info(data);
// загрузка и заполнение table
drawLinesTable();
}
async function editLine(id, name, lang, genre, year, descp, actr, image) {
console.info("Try to update item");
// вызов метода REST API для обновления записи
const data = await updateLine(id, name, lang, genre, year, descp, actr, image);
console.info("Updated");
console.info(data);
// загрузка и заполнение table
drawLinesTable();
}
async function removeLine(id) {
if (!confirm("Do you really want to remove this item?")) {
console.info("Canceled");
return;
}
console.info("Try to remove item");
// вызов метода REST API для удаления записи
const data = await deleteLine(id);
console.info(data);
// загрузка и заполнение table
drawLinesTable();
}
// функция для получения содержимого файла в виде base64 строки
// https://ru.wikipedia.org/wiki/Base64
async function readFile(file) {
const reader = new FileReader();
// создание Promise-объекта для использования функции
// с помощью await (асинхронно) без коллбэков (callback)
// https://learn.javascript.ru/promise
return new Promise((resolve, reject) => {
// 2. "Возвращаем" содержимое когда файл прочитан
// через вызов resolve
// Если не использовать Promise, то всю работу по взаимодействию
// с REST API пришлось бы делать в обработчике (callback) функции
// onloadend
reader.onloadend = () => {
const fileContent = reader.result;
// Здесь могла бы быть работа с REST API
// Чтение заканчивает выполняться здесь
resolve(fileContent);
};
// 3. Возвращаем ошибку
reader.onerror = () => {
// Или здесь в случае ошибки
reject(new Error("oops, something went wrong with the file reader."));
};
// Шаг 1. Сначала читаем файл
// Чтение начинает выполняться здесь
reader.readAsDataURL(file);
});
}
// функция для обновления блока с превью выбранного изображения
async function updateImagePreview() {
// получение выбранного файла
// возможен выбор нескольких файлов, поэтому необходимо получить только первый
const file = cntrls.image.files[0];
// чтение содержимого файла в виде base64 строки
const fileContent = await readFile(file);
console.info("base64 ", fileContent);
// обновление атрибута src для тега img с id image-preview
cntrls.imagePreview.src = fileContent;
}
export function draw() {
drawLinesTable();
}
// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
// Если хотите делать через модальное окно, то удалите эту функцию
export async function linesPageForm() {
console.info("linesPageForm");
// загрузка и заполнение select со списком товаров
drawLangSelect();
drawGenreSelect();
// func1 = (id) => {} аналогично function func1(id) {}
const goBack = () => location.assign("/admin.html");
// Вызов функции обновления превью изображения при возникновении
// события onchange в тэге input с id image
cntrls.image.addEventListener("change", () => updateImagePreview());
// получение параметров GET-запроса из URL
// параметры перечислены после символа ? (?id=1&color=black&...)
const urlParams = new URLSearchParams(location.search);
// получение значения конкретного параметра (id)
// указан только при редактировании
const currentId = urlParams.get("id");
// если id задан
if (currentId) {
try {
// вызов метода REST API для получения записи по первичному ключу(id)
const line = await getLine(currentId);
// заполнение формы для редактирования
cntrls.langType.value = line.langsId;
cntrls.name.value = line.name;
cntrls.genreType.value = line.genre;
cntrls.year.value = line.year;
cntrls.descp.value = line.descp;
cntrls.actr.value = line.actr;
// заполнение превью
// Если пользователь выбрал изображение, то оно загружается
// в тэг image с id image - preview
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
} catch {
// в случае ошибки происходит возврат к page4
goBack();
}
}
// обработчик события отправки формы
// возникает при нажатии на кнопку (button) с типом submit
// кнопка должна находится внутри тега form
cntrls.form.addEventListener("submit", async (event) => {
console.info("Form onSubmit");
// отключение стандартного поведения формы при отправке
// при отправке страница обновляется и JS перестает работать
event.preventDefault();
event.stopPropagation();
// если форма не прошла валидацию, то ничего делать не нужно
if (!cntrls.form.checkValidity()) {
return;
}
let imageBase64 = "";
// Получение выбранного пользователем изображения в виде base64 строки
// Если пользователь ничего не выбрал, то не нужно сохранять в БД
// дефолтное изображение
if (cntrls.imagePreview.src !== imagePlaceholder) {
// Загрузка содержимого атрибута src тэга img с id image-preview
// Здесь выполняется HTTP запрос с типом GET
const result = await fetch(cntrls.imagePreview.src);
// Получение из HTTP-ответа бинарного содержимого
const blob = await result.blob();
// Получение base64 строки для файла
// Здесь выполняется Promise из функции readFile
// Promise позволяет писать линейный код для работы с асинхронными методами
// без использования обработчиков (callback) с помощью await
imageBase64 = await readFile(blob);
}
// если значение параметра запроса не задано,
// то необходимо выполнить добавление записи
// иначе обновление записи
if (!currentId) {
await addLine(
cntrls.name.value,
cntrls.langType.value,
cntrls.genreType.value,
cntrls.year.value,
cntrls.descp.value,
cntrls.actr.value,
imageBase64,
);
} else {
await editLine(
currentId,
cntrls.name.value,
cntrls.langType.value,
cntrls.genreType.value,
cntrls.year.value,
cntrls.descp.value,
cntrls.actr.value,
imageBase64,
);
}
// возврат к странице page4
goBack();
});
}

25
lab3/js/validation.js Normal file
View File

@ -0,0 +1,25 @@
// модуль используется для валидации форма на странице
function validation() {
// поиск всех форма с классом .needs-validation
const forms = document.querySelectorAll("form.needs-validation");
for (let i = 0; i < forms.length; i += 1) {
const form = forms[i];
// для каждой формы добавляется обработчик события отправки
form.addEventListener("submit", (event) => {
// если форма не прошла валидацию
// то выключить стандартное действие
if (!form.checkValidity()) {
event.preventDefault();
// предотвращает распространение preventDefault
// на другие объекты
event.stopPropagation();
}
// добавляет к форме класс was-validated
form.classList.add("was-validated");
});
}
}
export default validation;

14
lab3/jsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Node",
"target": "ES2020",
"jsx": "preserve",
"strictNullChecks": true,
"strictFunctionTypes": true
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}

59
lab3/login.html Normal file
View File

@ -0,0 +1,59 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Онлайн-кинотеатр</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
</head>
<body class ="d-flex flex-column h-100">
<header id="header" class="header row w-100 m-0 mb-3">
<div class="p-0">
<div class="d-flex pt-lg-3 px-lg-5 p-0 justify-content-lg-between row w-100 m-0">
<div class="col-0 col-lg bg-cyan mw-100 mh-100">
</div>
<div class = "d-flex col p-1 pe-0 fs-2 bg-cyan mw-100 mh-100 text-break flex-grow-1 justify-content-center justify-content-lg-start">
<a class ="text-decoration-none text-center text-black fs-2 fw-normal font-family-Average Sans py-2" href="index.html">Онлайн-кинотеатр</a>
</div>
<div class="d-flex flex-column col-xs-12 col-sm-6 col-lg-3 col-xl-2 p-0 bg-cyan">
<div class= "d-flex p-1 ps-0 justify-content-center mw-100 mh-100 text-break">
<a class = "text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="signup.html">Регистрация</a>
</div>
<div class ="d-flex p-1 ps-0 pb-2 justify-content-center mw-100 mh-100 text-break">
<a class="text-decoration-none text-center text-black fs-5 fw-normal font-family-Average Sans m-0" href="login.html">Вход</a>
</div>
</div>
</div>
</div>
</header>
<main class="container-fluid flex-shrink-0">
<section class="d-flex align-items-center justify-content-center">
<div class="container">
<div class="justify-content-center pt-2">
<p class="text-center text-white fs-2 fw-normal font-family-Average Sans">Вход</p>
</div>
</div>
</section>
<form class="d-flex align-items-center justify-content-center">
<div class="container">
<div class="row justify-content-center mt-5 col">
<div class="flex-column d-flex col p-2 align-items-center">
<input type="text" class="form-control p-2 m-2" placeholder="Имя пользователя/почта">
<input type="text" class="form-control p-2 m-2" placeholder="Пароль">
<button type="submit" class="btn btn-primary mt-5 text-break px-5 py-1 fs-1">Войти</button>
</div>
</div>
</div>
</form>
</main>
<footer class="footer mt-auto fixed bottom-0">
<div class= "bg-dark-blue d-flex text-center justify-content-center">
<p class="text-black fs-5 fw-normal font-family-Average Sans">Фильмы нам не пренадлежат</p>
</div>
</footer>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>