From 0e5d2349fd6286ae575fbad7a3ec690ecac569ab Mon Sep 17 00:00:00 2001 From: leoevgeniy <98206383+leoevgeniy@users.noreply.github.com> Date: Sun, 17 Dec 2023 22:07:22 +0400 Subject: [PATCH] fix lab3 --- css/style.css | 10 ++- editpage.html | 2 + index.html | 198 ++------------------------------------------- js/film.js | 135 ++++++++++++++++++++++++++++++- page3.html | 217 ++++++-------------------------------------------- page5.html | 193 +------------------------------------------- 6 files changed, 176 insertions(+), 579 deletions(-) diff --git a/css/style.css b/css/style.css index ee521f6..8267302 100644 --- a/css/style.css +++ b/css/style.css @@ -51,16 +51,22 @@ body { .movie-container { width: 80%; + margin: 0 auto; overflow-x: auto; white-space: nowrap; + gap: 20px; + } .movie-card { - - display: inline-block; width: 300px; + height: 600px; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; margin: 0 auto; + margin-right: 20px; border-radius: 5px; background-color: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); diff --git a/editpage.html b/editpage.html index 9ead453..d78c4ac 100644 --- a/editpage.html +++ b/editpage.html @@ -82,6 +82,7 @@ Admin + - - + + diff --git a/js/film.js b/js/film.js index ce88eed..e8bd7d4 100644 --- a/js/film.js +++ b/js/film.js @@ -1,6 +1,6 @@ // film.js -import { getAllLines } from './lines-rest-api.js'; +import { getAllLines, getAllItemTypes } from './lines-rest-api.js'; async function loadMovies() { try { @@ -10,7 +10,86 @@ async function loadMovies() { console.error("Error loading movies:", error); } } +async function loadMoviesindex() { + try { + const moviesData = await getAllLines(); + addMovieCardsindex(moviesData); + } catch (error) { + console.error("Error loading movies:", error); + } +} +async function loadMoviesBygenre() { + try { + const moviesData = await getAllLines(); + + const itemTypes = await getAllItemTypes(); + addMoviesByGenre(moviesData, itemTypes); + } catch (error) { + console.error("Error loading movies:", error); + } +} +function addMoviesByGenre(moviesData, itemTypes) { + var containers = document.querySelectorAll(".movie-container"); + + containers.forEach(function (container) { + var genre = container.querySelector("h1").textContent; + + // Находим все фильмы для данного жанра + var genreMovies = moviesData.filter(function (movie) { + var itemType = itemTypes[movie.itemsId-1]; + + if (itemType && itemType.genre === genre) { + return true; + } else { + console.error("Invalid itemTypes for movie:", movie); + console.log("itemType:", itemType); + console.log("genre:", genre); + return false; + } + }); + + genreMovies.forEach(function (movie) { + addMovieCardsByContainer(container, movie); + }); + }); +} + +function addMovieCardsByContainer(container,movie) { + var container = container + + if (!container) { + console.error("Movie container not found"); + return;"" + } + + + 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); + +} function addMovieCards(moviesData) { var container = document.getElementById("movie-container"); @@ -46,5 +125,57 @@ function addMovieCards(moviesData) { container.appendChild(movieCard); }); } +function addMovieCardsindex(moviesData) { + var containers = document.querySelectorAll(".movie-container"); -document.addEventListener('DOMContentLoaded', loadMovies); + if (!containers || containers.length === 0) { + console.error("Movie containers not found"); + return; + } + + containers.forEach(function (container) { + 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', function () { + if (window.location.pathname.includes("page2.html")) { + // Запуск функции для page2.html + loadMovies(); + }else if (window.location.pathname.includes("page5.html")) { + // Запуск функции для page5.html + loadMovies(); + }else if (window.location.pathname.includes("page3.html")) { + // Запуск функции для page3.html + loadMoviesBygenre(); + }else if (window.location.pathname.includes("index.html")) { + // Запуск функции для index.html + loadMoviesindex(); + } +}); diff --git a/page3.html b/page3.html index 44b0a10..a4d9bbd 100644 --- a/page3.html +++ b/page3.html @@ -42,207 +42,39 @@
Описание фильма 1.
-Описание фильма 2.
-Описание фильма 3.
-Описание фильма 1.
-Описание фильма 2.
-Описание фильма 3.
-Описание фильма 1.
-Описание фильма 2.
-Описание фильма 3.
-Описание фильма 1.
-Описание фильма 2.
-Описание фильма 3.
-Описание фильма 1.
-Описание фильма 2.
-Описание фильма 3.
-Описание фильма 1.
-Описание фильма 2.
-Описание фильма 3.
-Описание фильма 2.
-Описание фильма 3.
-Описание фильма 1.
-Описание фильма 2.
-Описание фильма 3.
-Описание фильма 1.
-Описание фильма 2.
-Описание фильма 3.
-