217 lines
7.9 KiB
JavaScript
217 lines
7.9 KiB
JavaScript
// Импортируем Bootstrap
|
||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
|
||
|
||
// Импортируем собственные стили
|
||
import '../style.css';
|
||
|
||
// Инициализация общего функционала сайта
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
console.log('Сайт успешно загружен!');
|
||
|
||
// Инициализация выпадающего меню, если оно есть на странице
|
||
const dropdownElements = document.querySelectorAll('.dropdown');
|
||
if (dropdownElements.length > 0) {
|
||
dropdownElements.forEach(dropdown => {
|
||
dropdown.addEventListener('click', () => {
|
||
dropdown.querySelector('.features-menu')?.classList.toggle('active');
|
||
});
|
||
});
|
||
}
|
||
|
||
// Set max year to current year for the year input
|
||
const movieYearInput = document.getElementById('movieYear');
|
||
if (movieYearInput) {
|
||
const currentYear = new Date().getFullYear();
|
||
// Only set the min attribute, validation will happen on form submission
|
||
movieYearInput.min = 1900;
|
||
}
|
||
|
||
// Добавление обработчиков для фильтров в каталоге
|
||
const genreSelect = document.getElementById('genre-select');
|
||
if (genreSelect) {
|
||
genreSelect.addEventListener('change', () => {
|
||
// Здесь будет логика фильтрации по жанрам
|
||
console.log('Выбран жанр:', genreSelect.value);
|
||
});
|
||
}
|
||
|
||
// Load movies from localStorage and display them
|
||
const movieContainer = document.getElementById('movieContainer');
|
||
if (movieContainer) {
|
||
loadMoviesFromStorage();
|
||
}
|
||
|
||
// Form submission handler
|
||
const addMovieForm = document.getElementById('addMovieForm');
|
||
if (addMovieForm) {
|
||
// Handle poster preview
|
||
const moviePoster = document.getElementById('moviePoster');
|
||
const posterPreview = document.getElementById('posterPreview');
|
||
const previewContainer = document.querySelector('.preview-container');
|
||
|
||
if (moviePoster && posterPreview && previewContainer) {
|
||
moviePoster.addEventListener('change', (e) => {
|
||
const file = e.target.files[0];
|
||
if (file) {
|
||
const reader = new FileReader();
|
||
reader.onload = (e) => {
|
||
posterPreview.src = e.target.result;
|
||
previewContainer.classList.remove('d-none');
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
});
|
||
}
|
||
|
||
addMovieForm.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
|
||
// Get form values
|
||
const title = document.getElementById('movieTitle').value;
|
||
const director = document.getElementById('movieDirector').value;
|
||
const year = parseInt(document.getElementById('movieYear').value);
|
||
const currentYear = new Date().getFullYear();
|
||
let errorText = ""
|
||
// Validate year only on form submission
|
||
if (year > currentYear) {
|
||
errorText += `Год выпуска не может быть больше текущего (${currentYear})\n`;
|
||
}
|
||
|
||
if (year < 1900) {
|
||
errorText += "Год выпуска не может быть меньше 1900\n";
|
||
}
|
||
|
||
// Check if movie already exists
|
||
if (movieExists(title, director)) {
|
||
errorText += "Фильм с таким названием и режиссером уже существует!\n";
|
||
}
|
||
if (errorText) {
|
||
alert(errorText)
|
||
return;
|
||
}
|
||
|
||
const formData = {
|
||
id: Date.now().toString(), // Generate unique ID based on timestamp
|
||
title: title,
|
||
director: director,
|
||
genres: Array.from(document.getElementById('movieGenre').selectedOptions).map(option => option.text),
|
||
year: year,
|
||
description: document.getElementById('movieDescription').value,
|
||
poster: posterPreview?.src || 'resources/movies/placeholder.jpg'
|
||
};
|
||
|
||
// Save to localStorage
|
||
if (saveMovieToStorage(formData)) {
|
||
// Reset form and preview
|
||
addMovieForm.reset();
|
||
if (previewContainer) {
|
||
previewContainer.classList.add('d-none');
|
||
}
|
||
|
||
// Show success message
|
||
alert('Фильм успешно добавлен!');
|
||
|
||
// Redirect to catalog page if we're on the add-movie page
|
||
if (window.location.pathname.includes('add-movie.html')) {
|
||
window.location.href = 'catalog.html';
|
||
} else if (movieContainer) {
|
||
// If we're already on a page with the movie container, add the new card
|
||
addMovieCard(formData, movieContainer);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// Function to create movie card
|
||
function createMovieCard(movie) {
|
||
const card = document.createElement('div');
|
||
card.className = 'card movie-card h-100 bg-dark';
|
||
card.dataset.movieId = movie.id;
|
||
|
||
card.innerHTML = `
|
||
<img src="${movie.poster}" class="card-img-top" alt="${movie.title} Poster">
|
||
<div class="card-body">
|
||
<h5 class="card-title text-white"><i class="bi bi-film text-orange me-2"></i>${movie.title}</h5>
|
||
<p class="card-text text-white"><i class="bi bi-person-video3 me-2"></i>Режиссер: ${movie.director}</p>
|
||
<p class="card-text text-light"><i class="bi bi-tags me-2"></i>Жанр: ${Array.isArray(movie.genres) ? movie.genres.join(', ') : movie.genres}</p>
|
||
<p class="card-text text-light"><i class="bi bi-calendar3 me-2"></i>Год выпуска: ${movie.year}</p>
|
||
${movie.description ? `<p class="card-text text-light"><i class="bi bi-text-paragraph me-2"></i>Описание: ${movie.description}</p>` : ''}
|
||
</div>
|
||
<div class="card-footer bg-transparent border-0 d-flex justify-content-between">
|
||
<a href="about.html" class="btn btn-orange"><i class="bi bi-play-circle me-2"></i>Смотреть</a>
|
||
<button class="btn btn-danger delete-movie"><i class="bi bi-trash"></i> Удалить</button>
|
||
</div>
|
||
`;
|
||
|
||
// Add event listener for delete button
|
||
const deleteButton = card.querySelector('.delete-movie');
|
||
if (deleteButton) {
|
||
deleteButton.addEventListener('click', () => {
|
||
if (confirm('Вы уверены, что хотите удалить этот фильм?')) {
|
||
deleteMovieFromStorage(movie.id);
|
||
card.remove();
|
||
}
|
||
});
|
||
}
|
||
|
||
return card;
|
||
}
|
||
|
||
// Function to add a movie card to the container
|
||
function addMovieCard(movie, container) {
|
||
const colDiv = document.createElement('div');
|
||
colDiv.className = 'col';
|
||
const movieCard = createMovieCard(movie);
|
||
colDiv.appendChild(movieCard);
|
||
container.prepend(colDiv);
|
||
}
|
||
|
||
// Function to check if a movie already exists in localStorage
|
||
function movieExists(title, director) {
|
||
const movies = JSON.parse(localStorage.getItem('movies')) || [];
|
||
return movies.some(movie =>
|
||
movie.title.toLowerCase() === title.toLowerCase() &&
|
||
movie.director.toLowerCase() === director.toLowerCase()
|
||
);
|
||
}
|
||
|
||
// Function to save movie to localStorage
|
||
function saveMovieToStorage(movie) {
|
||
// Get existing movies from localStorage
|
||
const movies = JSON.parse(localStorage.getItem('movies')) || [];
|
||
|
||
// Add new movie
|
||
movies.push(movie);
|
||
|
||
// Save back to localStorage
|
||
localStorage.setItem('movies', JSON.stringify(movies));
|
||
return true;
|
||
}
|
||
|
||
// Function to delete movie from localStorage
|
||
function deleteMovieFromStorage(movieId) {
|
||
// Get existing movies from localStorage
|
||
let movies = JSON.parse(localStorage.getItem('movies')) || [];
|
||
|
||
// Filter out the movie to delete
|
||
movies = movies.filter(movie => movie.id !== movieId);
|
||
|
||
// Save back to localStorage
|
||
localStorage.setItem('movies', JSON.stringify(movies));
|
||
}
|
||
|
||
// Function to load movies from localStorage and display them
|
||
function loadMoviesFromStorage() {
|
||
const movieContainer = document.getElementById('movieContainer');
|
||
if (!movieContainer) return;
|
||
|
||
// Get movies from localStorage
|
||
const movies = JSON.parse(localStorage.getItem('movies')) || [];
|
||
|
||
// Display each movie
|
||
movies.forEach(movie => {
|
||
addMovieCard(movie, movieContainer);
|
||
});
|
||
} |