const url_title = "http://localhost:8000/api/v1/titles/"
const url_genre = "http://localhost:8000/api/v1/genres/"
const blockEnd = `
`
async function getMovies(url, id) {
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])
}
}
let blockToLook = document.getElementById(id)
blockToLook.innerHTML = ""
// square block creation for each film
for (let i = 0; i < 6; i++) {
film = filmList[i]
let movieBlock = `
${film.title}
`
// retrieve the specific film detail from URL using id then concatenate with the modal creator
const response2 = await fetch(`${url_title}${film.id}`)
const film2 = await response2.json()
let modal = getModalDetail(film2, film2.id)
blockToLook.innerHTML += movieBlock+modal+blockEnd
}
}
// tried to make some dynamic pagination browsing... nok
async function getCount(type) {
const response = await fetch(`http://localhost:8000/api/v1/${type}`)
const result = await response.json()
return result
}
// 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
}
}
// 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 detail = `
${bfilm.title}
${bfilm.description}
`
let modal = getModalDetail(bfilm, bfilm.id);
document.getElementById("bestFilm").innerHTML += detail+modal;
}
// create the modal HTML block for a given film object
function getModalDetail(film, modalId) {
recette = "-"
if (film.worldwide_gross_income) {
recette = film.worldwide_gross_income
}
let modalContent = `
Détail du film
${film.title}
${film.year} - ${film.genre}
${film.duration} minutes (${film.countries})
IMDB score: ${film.imdb_score}/10
Realisé par:
${film.directors}
${film.long_description}
Avec:
${film.actors}
`
return modalContent
}
// fill each blocks "defined category" : best rated, then mystery...
// Il Grande Lebowski
// bestFilm("118715")
bestFilm("101928")
getMovies("?sort_by=-imdb_score", "bestRated")
getMovies("?genre=mystery", "mystery")
getMovies("?genre=action", "other")
// fill the selection menu
getCategory()
// listen for any change in menu
let selectedItem = document.getElementById("category-select")
selectedItem.addEventListener("change", ()=> {
console.log(selectedItem.value)
getMovies(`?genre=${selectedItem.value}`, "other")
})
//afficherFilms()
// console.log(film)