fix lab3
This commit is contained in:
leoevgeniy
parent
764f79b2a8
commit
8cd466c170
@ -69,8 +69,8 @@
|
||||
<input type="text" class="form-control" id="director" name="director" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="coverImage" class="form-label">Фотография обложки</label>
|
||||
<input type="file" class="form-control" id="coverImage" name="coverImage" accept="image/*" >
|
||||
<label for="image" class="form-label">Фотография обложки</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>
|
||||
|
||||
50
js/film.js
Normal file
50
js/film.js
Normal 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);
|
||||
@ -8,10 +8,11 @@ export const cntrls = {
|
||||
rating: document.getElementById("rating"),
|
||||
releaseDate: document.getElementById("releaseDate"),
|
||||
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) {
|
||||
const option = document.createElement("option");
|
||||
|
||||
66
js/lines.js
66
js/lines.js
@ -59,11 +59,55 @@ async function editLine(id,item,name, rating, release_date, director,image) {
|
||||
console.info(data);
|
||||
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() {
|
||||
console.info("linesForm");
|
||||
drawItemsSelect();
|
||||
drawLinesTable();
|
||||
// Вызов функции обновления превью изображения при возникновении
|
||||
// события oncahnge в тэге input с id image
|
||||
cntrls.image.addEventListener("change", () => updateImagePreview());
|
||||
|
||||
cntrls.form.addEventListener("submit", async (event) => {
|
||||
console.info("Form onSubmit");
|
||||
event.preventDefault();
|
||||
@ -71,6 +115,7 @@ export function linesForm() {
|
||||
if (!cntrls.form.checkValidity()) {
|
||||
return;
|
||||
}
|
||||
let imageBase64 = "";
|
||||
if (cntrls.imagePreview.src !== imagePlaceholder) {
|
||||
const result = await fetch(cntrls.imagePreview.src);
|
||||
const blob = await result.blob();
|
||||
@ -95,15 +140,18 @@ export function linesForm() {
|
||||
cntrls.rating.value,
|
||||
cntrls.releaseDate.value,
|
||||
cntrls.director.value,
|
||||
imageBase64,
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export async function linesPageForm() {
|
||||
console.info("linesPageForm");
|
||||
drawItemsSelect();
|
||||
const goBack = () => location.assign("/admin.html");
|
||||
cntrls.image.addEventListener("change", () => updateImagePreview());
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
const currentId = urlParams.get("id");
|
||||
if (currentId) {
|
||||
@ -114,6 +162,7 @@ export async function linesPageForm() {
|
||||
cntrls.rating.value = line.rating;
|
||||
cntrls.releaseDate.value = line.release_date;
|
||||
cntrls.director.value = line.director;
|
||||
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
|
||||
} catch {
|
||||
goBack();
|
||||
}
|
||||
@ -126,6 +175,19 @@ export async function linesPageForm() {
|
||||
if (!cntrls.form.checkValidity()) {
|
||||
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) {
|
||||
await addLine(
|
||||
cntrls.itemsType.value,
|
||||
@ -133,7 +195,7 @@ export async function linesPageForm() {
|
||||
cntrls.rating.value,
|
||||
cntrls.releaseDate.value,
|
||||
cntrls.director.value,
|
||||
cntrls.image,
|
||||
imageBase64,
|
||||
);
|
||||
} else {
|
||||
await editLine(
|
||||
@ -143,7 +205,7 @@ export async function linesPageForm() {
|
||||
cntrls.rating.value,
|
||||
cntrls.releaseDate.value,
|
||||
cntrls.director.value,
|
||||
cntrls.image,
|
||||
imageBase64,
|
||||
);
|
||||
}
|
||||
goBack();
|
||||
|
||||
199
page2.html
199
page2.html
@ -41,209 +41,24 @@
|
||||
</nav>
|
||||
</div>
|
||||
<h1>Каталог</h1>
|
||||
<div id="catalog" class="movie-container">
|
||||
<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 id="movie-container" class="d-flex flex-wrap">
|
||||
<!-- Здесь будут добавляться карточки фильмов -->
|
||||
</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">
|
||||
<div class="container-fluid">
|
||||
<p>© 2023 Просмотр фильмов.</p>
|
||||
<a href="admin.html" class="nav-link">Admin</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
<script src="js/film.js"></script>
|
||||
<script type="module" src="./js/film.js"></script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user