YourDax/Internet-programming-Pibd-23-Tikhonenkov-Alexey-ULSTU
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix lab3

Browse Source
This commit is contained in:
leoevgeniy 2023-12-14 20:59:43 +04:00
parent 764f79b2a8
commit 8cd466c170
6 changed files with 165 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
data.json
View File

File diff suppressed because one or more lines are too long

4
editpage.html
View File

@ -69,8 +69,8 @@
<input type="text" class="form-control" id="director" name="director" required> <input type="text" class="form-control" id="director" name="director" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="coverImage" class="form-label">Фотография обложки</label> <label for="image" class="form-label">Фотография обложки</label>
<input type="file" class="form-control" id="coverImage" name="coverImage" accept="image/*" > <input id="image" type="file" name="image" class="form-control" accept="image/*">
</div> </div>
<a href="admin.html" class="btn btn-secondary">Назад</a> <a href="admin.html" class="btn btn-secondary">Назад</a>
<button type="submit" class="btn btn-primary">Добавить фильм</button> <button type="submit" class="btn btn-primary">Добавить фильм</button>

50
js/film.js Normal file
View File

@ -0,0 +1,50 @@
// film.js
import { getAllLines } from './lines-rest-api.js';
async function loadMovies() {
try {
const moviesData = await getAllLines();
addMovieCards(moviesData);
} catch (error) {
console.error("Error loading movies:", error);
}
}
function addMovieCards(moviesData) {
var container = document.getElementById("movie-container");
if (!container) {
console.error("Movie container not found");
return;
}
moviesData.forEach(function (movie) {
var movieCard = document.createElement("div");
movieCard.className = "movie-card";
var image = document.createElement("img");
// Проверяем, есть ли у фильма изображение, и вставляем соответствующее изображение
image.src = movie.image ? movie.image : "https://via.placeholder.com/300x400";
image.alt = "Movie Image";
var content = document.createElement("div");
content.className = "movie-card-content";
var title = document.createElement("h2");
title.textContent = movie.name;
var description = document.createElement("p");
description.textContent = "Рейтинг: " + movie.rating;
content.appendChild(title);
content.appendChild(description);
movieCard.appendChild(image);
movieCard.appendChild(content);
container.appendChild(movieCard);
});
}
document.addEventListener('DOMContentLoaded', loadMovies);

5
js/lines-ui.js
View File

@ -8,10 +8,11 @@ export const cntrls = {
rating: document.getElementById("rating"), rating: document.getElementById("rating"),
releaseDate: document.getElementById("releaseDate"), releaseDate: document.getElementById("releaseDate"),
director: document.getElementById("director"), director: document.getElementById("director"),
image: document.getElementById("coverImage"), image: document.getElementById("image"),
imagePreview: document.getElementById("image-preview"),
}; };
export const imagePlaceholder = "https://via.placeholder.com/200"; export const imagePlaceholder = "https://via.placeholder.com/300x400";
export function createItemsOption(name, value = "", isSelected = false) { export function createItemsOption(name, value = "", isSelected = false) {
const option = document.createElement("option"); const option = document.createElement("option");

66
js/lines.js
View File

@ -59,11 +59,55 @@ async function editLine(id,item,name, rating, release_date, director,image) {
console.info(data); console.info(data);
drawLinesTable(); drawLinesTable();
} }
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 linesForm() { export function linesForm() {
console.info("linesForm"); console.info("linesForm");
drawItemsSelect(); drawItemsSelect();
drawLinesTable(); drawLinesTable();
// Вызов функции обновления превью изображения при возникновении
// события oncahnge в тэге input с id image
cntrls.image.addEventListener("change", () => updateImagePreview());
cntrls.form.addEventListener("submit", async (event) => { cntrls.form.addEventListener("submit", async (event) => {
console.info("Form onSubmit"); console.info("Form onSubmit");
event.preventDefault(); event.preventDefault();
@ -71,6 +115,7 @@ export function linesForm() {
if (!cntrls.form.checkValidity()) { if (!cntrls.form.checkValidity()) {
return; return;
} }
let imageBase64 = "";
if (cntrls.imagePreview.src !== imagePlaceholder) { if (cntrls.imagePreview.src !== imagePlaceholder) {
const result = await fetch(cntrls.imagePreview.src); const result = await fetch(cntrls.imagePreview.src);
const blob = await result.blob(); const blob = await result.blob();
@ -95,15 +140,18 @@ export function linesForm() {
cntrls.rating.value, cntrls.rating.value,
cntrls.releaseDate.value, cntrls.releaseDate.value,
cntrls.director.value, cntrls.director.value,
imageBase64,
); );
} }
}); });
} }
export async function linesPageForm() { export async function linesPageForm() {
console.info("linesPageForm"); console.info("linesPageForm");
drawItemsSelect(); drawItemsSelect();
const goBack = () => location.assign("/admin.html"); const goBack = () => location.assign("/admin.html");
cntrls.image.addEventListener("change", () => updateImagePreview());
const urlParams = new URLSearchParams(location.search); const urlParams = new URLSearchParams(location.search);
const currentId = urlParams.get("id"); const currentId = urlParams.get("id");
if (currentId) { if (currentId) {
@ -114,6 +162,7 @@ export async function linesPageForm() {
cntrls.rating.value = line.rating; cntrls.rating.value = line.rating;
cntrls.releaseDate.value = line.release_date; cntrls.releaseDate.value = line.release_date;
cntrls.director.value = line.director; cntrls.director.value = line.director;
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
} catch { } catch {
goBack(); goBack();
} }
@ -126,6 +175,19 @@ export async function linesPageForm() {
if (!cntrls.form.checkValidity()) { if (!cntrls.form.checkValidity()) {
return; return;
} }
let imageBase64 = "";
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) { if (!currentId) {
await addLine( await addLine(
cntrls.itemsType.value, cntrls.itemsType.value,
@ -133,7 +195,7 @@ export async function linesPageForm() {
cntrls.rating.value, cntrls.rating.value,
cntrls.releaseDate.value, cntrls.releaseDate.value,
cntrls.director.value, cntrls.director.value,
cntrls.image, imageBase64,
); );
} else { } else {
await editLine( await editLine(
@ -143,7 +205,7 @@ export async function linesPageForm() {
cntrls.rating.value, cntrls.rating.value,
cntrls.releaseDate.value, cntrls.releaseDate.value,
cntrls.director.value, cntrls.director.value,
cntrls.image, imageBase64,
); );
} }
goBack(); goBack();

199
page2.html
View File

@ -41,208 +41,23 @@
</nav> </nav>
</div> </div>
<h1>Каталог</h1> <h1>Каталог</h1>
<div id="catalog" class="movie-container">
<div class="movie-card"> <div id="movie-container" class="d-flex flex-wrap">
<img src="https://via.placeholder.com/300x400" alt="Movie Image"> <!-- Здесь будут добавляться карточки фильмов -->
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div> </div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
</div>
<footer class="footer mt-auto d-flex justify-content-center align-items-center"> <footer class="footer mt-auto d-flex justify-content-center align-items-center">
<div class="container-fluid"> <div class="container-fluid">
<p>© 2023 Просмотр фильмов.</p> <p>© 2023 Просмотр фильмов.</p>
<a href="admin.html" class="nav-link">Admin</a>
</div> </div>
</footer> </footer>
<script src="js/script.js"></script> <script type="module" src="./js/film.js"></script>
<script src="js/film.js"></script>
</body> </body>