const url_title = "http://localhost:8000/api/v1/titles/";
const url_genre = "http://localhost:8000/api/v1/genres/";
// create the best film block and get a movie from a given ID
async function bestFilm(filmId) {
const response = await fetch(`${url_title}${filmId}`);
const bfilm = await response.json();
let blockToLook = document.getElementById("bestFilm");
let detail = `
${bfilm.title}
${bfilm.description}
`;
blockToLook.innerHTML += detail;
getModalDetail(bfilm, bfilm.id, blockToLook);
}
// call the movie URL, retrieve data and create modal block, then insert it in HTML directly
// avoid to manage a promise object in createBlock()
async function getModalDetail(filmData, modalId, blockToLook) {
const response = await fetch(`${filmData.url}`);
const film = await response.json();
let recette = "N/A";
let genre = recette;
if (film.worldwide_gross_income) {
recette = film.worldwide_gross_income;
}
if (film.genre) {
genre = film.genre;
}
let modalContent = `
Détail du film
${film.title}
${film.year} - ${genre}
${film.duration} minutes (${film.countries})
IMDB score: ${film.imdb_score}/10
Recettes au Box-Office : ${recette}
Realisé par:
${film.directors}
${film.long_description}
Avec:
${film.actors}
`
blockToLook.innerHTML += modalContent
}
// get a list of movies from a first general call based on query string;
// -> returns a promise
async function getMovies3(url) {
const filmList = [];
for (let j=1; j<3; j++) {
const response = await fetch(`${url_title}${url}&format=json&page=${j}`);
const film1 = await response.json();
for (i in film1.results) {
filmList.push(film1.results[i]);
}
}
return filmList;
}
// create HTML blocks from a movie list
// Called by generateMovies (using screen size) and the button "more" to create 6 blocks
// (they've already handled the promise)
function createBlock(filmList, id, count) {
// get the element to change
let blockToLook = document.getElementById(id);
blockToLook.innerHTML = "";
for (let i = 0; i < count; i++) {
film = filmList[i];
let movieBlock = `
${film.title}
`;
// create the block, then call the modal creation from the async function
blockToLook.innerHTML += movieBlock
getModalDetail(film, film.id, blockToLook);
}
}
// get categories and create the options in select menu
async function getCategory() {
listeGenres = [];
for (let i = 1; i<6; i++) {
const response = await fetch(`${url_genre}?page=${i}`);
const genres = await response.json();
for (let j in genres.results) {
listeGenres.push(genres.results[j].name);
};
}
let categorySelect = document.getElementById("category-select");
for (i in listeGenres) {
let option = `
`;
categorySelect.innerHTML += option;
}
}
// ==================== buttons
// add button with requested display
function addSeeMore(id, display) {
let blockToChange = document.getElementById(id)
let blockToAdd = `
`
blockToChange.innerHTML += blockToAdd
}
function addSeeLess(id, display) {
let blockToChange = document.getElementById(id)
let blockToAdd = `
`
blockToChange.innerHTML += blockToAdd;
}
//==================== end buttons
// ==================== functions called by buttons
//for each container... could be improved (factorized)
function bestRatedMore() {
bestRated.then((data) => {
createBlock(data, "bestRated", 6);
addSeeMore("bestRated", "d-none");
addSeeLess("bestRated", "d-block");
})
}
function bestRatedLess() {
generateMovies(bestRated, "bestRated")
}
function mysteryMore() {
mystery.then((data) => {
createBlock(data, "mystery", 6);
addSeeMore("mystery", "d-none");
addSeeLess("mystery", "d-block");
})
}
function mysteryLess() {
generateMovies(mystery, "mystery")
}
function animationMore() {
animation.then((data) => {
createBlock(data, "animation", 6);
addSeeMore("animation", "d-none");
addSeeLess("animation", "d-block");
})
}
function animationLess() {
generateMovies(animation, "animation")
}
function otherMore() {
other.then((data) => {
createBlock(data, "other", 6);
addSeeMore("other", "d-none");
addSeeLess("other", "d-block");
})
}
function otherLess() {
generateMovies(other, "other")
}
// ==================== end of functions called by buttons
// responsive management
// generate the movies block depending on screen size
function generateMovies(movieProm, id) {
if (screen.width < 768 ) {
movieProm.then((data) => {
createBlock(data, id, 2);
addSeeMore(id, "d-block");
})
}
if (screen.width === 768 || screen.width > 768 && screen.width < 992) {
movieProm.then((data) => {
createBlock(data, id, 4);
addSeeMore(id, "d-block");
})
}
if (screen.width > 992) {
movieProm.then((data) => {
createBlock(data, id, 6);
addSeeMore(id, "d-none");
})
}
}
// main
// ============ best film ============
// Il Grande Lebowski
// bestFilm("118715")
//bestFilm("133093");
bestFilm("234215");
// Get resources
let bestRated = getMovies3("?sort_by=-imdb_score");
let mystery = getMovies3("?genre=mystery");
let animation = getMovies3("?genre=animation");
let other = getMovies3("?genre=action");
// ============ Best Rated ============
generateMovies(bestRated, "bestRated");
// ============ Mystery ============
generateMovies(mystery, "mystery")
// ============ Animation ============
generateMovies(animation, "animation")
// ============ Other ============
// fill the selection menu
getCategory();
generateMovies(other, "other");
// Make it dynamic, step 8
// listen for any change in menu
let selectedItem = document.getElementById("category-select");
selectedItem.addEventListener("change", ()=> {
let block = getMovies3(`?genre=${selectedItem.value}`);
generateMovies(block, "other");
other = block;
});
// Make it dynamic, step 7
// responsive management
// when the screen changes, regenerate blocks for all
window.addEventListener("resize", ()=> {
generateMovies(bestRated, "bestRated");
generateMovies(mystery, "mystery");
generateMovies(animation, "animation");
generateMovies(other, "other");
})