const url_title = "http://localhost:8000/api/v1/titles/";
const url_genre = "http://localhost:8000/api/v1/genres/";
const blockEnd = `
`;
// construct button "see more" or "see less"
function getButtonSee(what) {
let see = `
`;
return see;
}
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 = "";
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) {
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}
`;
return modalContent;
}
function adaptToSize() {
let countMovies = 6
if (screen.width < 992) {
countMovies = 4;
}
if (screen.width < 768 ) {
countMovies = 2;
}
console.log(countMovies)
}
// fill each blocks "defined category" : best rated, then mystery...
// Il Grande Lebowski
// bestFilm("118715")
bestFilm("101928");
function displayWindowSize(){
// Get width and height of the window excluding scrollbars
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
console.log('width:'+w+','+'height:'+h)
}
//displayWindowSize();
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", ()=> {
getMovies(`?genre=${selectedItem.value}`, "other");
});
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;
}
async function getMovies2(url, id, count) {
const filmList = [];
//let countMovies = 6;
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 = "";
for (let i = 0; i < count; 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;
}
}