Yann/Projet6
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

works except show more and show less

Browse Source
This commit is contained in:
yann 2025-03-07 20:18:17 +01:00
parent 619bf05069
commit f3fd9dc2e8
2 changed files with 142 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index2.html
View File

@ -5,7 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>JustStreamIt</title> <title>JustStreamIt</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style> <style>
.square { .square {
width: 100%; width: 100%;
@ -46,7 +48,7 @@
<section> <section>
<div class="container mt-5"> <div class="container mt-5">
<h2> Meilleur film </h2></div> <h2> Meilleur film </h2></div>
<div class="container border border-black border-4 mt-1"> <div class="container border border-black border-5 mt-1">
<div class="row" id="bestFilm"> <div class="row" id="bestFilm">
<!-- square block model--> <!-- square block model-->
</div> </div>
@ -58,6 +60,12 @@
<h2>Best rated</h2> <h2>Best rated</h2>
<div class="row" id="bestRated"> <div class="row" id="bestRated">
<!-- square block model--> <!-- square block model-->
</div>
<div id="seeMore" class="row d-flex justify-content-center d-lg-none">
<button class="col-4 btn btn-danger rounded-4" type="button" >Voir plus</button>
</div>
<div id="seeLess" class="row d-flex justify-content-center d-sm-none">
<button class="col-4 btn btn-danger rounded-4" type="button" >Voir moins</button>
</div> </div>
</div> </div>
</section> </section>
@ -69,6 +77,7 @@
<!-- square block model--> <!-- square block model-->
</div> </div>
</div> </div>
</div>
</section> </section>
<section class="py-5"> <section class="py-5">

174
test2.js
View File

@ -1,28 +1,39 @@
const url_title = "http://localhost:8000/api/v1/titles/" const url_title = "http://localhost:8000/api/v1/titles/";
const url_genre = "http://localhost:8000/api/v1/genres/" const url_genre = "http://localhost:8000/api/v1/genres/";
const blockEnd = ` const blockEnd = `
</div> </div>
</div> </div>
</div> </div>
` `;
// construct button "see more" or "see less"
function getButtonSee(what) {
let see = `
<div id="${what}" class="row d-flex justify-content-center d-lg-none">
<button class="col-4 btn btn-danger rounded-4" type="button" >Voir ${what}</button>
</div>
`;
return see;
}
async function getMovies(url, id) { async function getMovies(url, id) {
const filmList = [] const filmList = [];
for (let j=1; j<3; j++) { for (let j=1; j<3; j++) {
const response = await fetch(`${url_title}${url}&format=json&page=${j}`); const response = await fetch(`${url_title}${url}&format=json&page=${j}`);
const film1 = await response.json(); const film1 = await response.json();
for (i in film1.results) { for (i in film1.results) {
filmList.push(film1.results[i]) filmList.push(film1.results[i]);
} }
} }
let blockToLook = document.getElementById(id) let blockToLook = document.getElementById(id);
blockToLook.innerHTML = "" blockToLook.innerHTML = "";
// square block creation for each film
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
film = filmList[i] film = filmList[i];
let movieBlock = ` let movieBlock = `
<div class="col-12 col-md-6 col-lg-4 pb-5"> <div class="col-12 col-md-6 col-lg-4 pb-5">
<div class="square" style="background-image: url(${film.image_url}); background-size: cover"> <div class="square" style="background-image: url(${film.image_url}); background-size: cover">
@ -34,39 +45,39 @@ async function getMovies(url, id) {
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button> <button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>
` `;
// retrieve the specific film detail from URL using id then concatenate with the modal creator // retrieve the specific film detail from URL using id then concatenate with the modal creator
const response2 = await fetch(`${url_title}${film.id}`) const response2 = await fetch(`${url_title}${film.id}`);
const film2 = await response2.json() const film2 = await response2.json();
let modal = getModalDetail(film2, film2.id) let modal = getModalDetail(film2, film2.id);
blockToLook.innerHTML += movieBlock+modal+blockEnd blockToLook.innerHTML += movieBlock+modal+blockEnd;
} }
} }
// tried to make some dynamic pagination browsing... nok // tried to make some dynamic pagination browsing... nok
async function getCount(type) { async function getCount(type) {
const response = await fetch(`http://localhost:8000/api/v1/${type}`) const response = await fetch(`http://localhost:8000/api/v1/${type}`);
const result = await response.json() const result = await response.json();
return result return result;
} }
// get categories and create the options in select menu // get categories and create the options in select menu
async function getCategory() { async function getCategory() {
listeGenres = [] listeGenres = [];
for (let i = 1; i<6; i++) { for (let i = 1; i<6; i++) {
const response = await fetch(`${url_genre}?page=${i}`); const response = await fetch(`${url_genre}?page=${i}`);
const genres = await response.json(); const genres = await response.json();
for (let j in genres.results) { for (let j in genres.results) {
listeGenres.push(genres.results[j].name) listeGenres.push(genres.results[j].name);
}; };
} }
let categorySelect = document.getElementById("category-select") let categorySelect = document.getElementById("category-select");
for (i in listeGenres) { for (i in listeGenres) {
let option = ` let option = `
<option value="${listeGenres[i]}">${listeGenres[i]}</option> <option value="${listeGenres[i]}">${listeGenres[i]}</option>
` `;
categorySelect.innerHTML += option categorySelect.innerHTML += option;
} }
} }
@ -76,21 +87,20 @@ async function bestFilm(filmId) {
const bfilm = await response.json(); const bfilm = await response.json();
let detail = ` let detail = `
<div class="col d-flex justify-content-center my-2">
<img src="${bfilm.image_url}" alt="film cover">
</div>
<div class="col-lg-9 col-md-9 col-sm-12 my-3">
<div class="row"> <div class="row">
<div class="col-lg-3 col-md-3"><h2>${bfilm.title}</h2></div> <div class="col d-flex justify-content-center my-2" >
<img class="img-fluid d-none d-md-block" src="${bfilm.image_url}" alt="film cover">
</div> </div>
<div class="row"> <div class="col-12 d-block d-md-none" style="background-image: url(${bfilm.image_url}); background-size: cover"></div>
<div class="col-md-9">${bfilm.description}</div> <div class="col-sm-12 col-md-9 my-3">
</div> <div class="col-12 d-flex justify-content-start"><h2>${bfilm.title}</h2></div>
<div class="row"> <div class="col-12">${bfilm.description}</div>
<div class="col-12 d-flex justify-content-sm-end justify-content-center mt-3"> <div class="col-12 d-flex justify-content-end mt-auto">
<button type="button" class="btn btn-danger rounded-4 px-4" data-toggle="modal" data-target="#${bfilm.id}">Détail</button> <button type="button" class="btn btn-danger rounded-4 px-4" data-toggle="modal" data-target="#${bfilm.id}">Détail</button>
</div> </div>
` </div>
</div>
`;
let modal = getModalDetail(bfilm, bfilm.id); let modal = getModalDetail(bfilm, bfilm.id);
document.getElementById("bestFilm").innerHTML += detail+modal; document.getElementById("bestFilm").innerHTML += detail+modal;
@ -98,9 +108,14 @@ async function bestFilm(filmId) {
// create the modal HTML block for a given film object // create the modal HTML block for a given film object
function getModalDetail(film, modalId) { function getModalDetail(film, modalId) {
recette = "-" let recette = "N/A";
let genre = recette;
if (film.worldwide_gross_income) { if (film.worldwide_gross_income) {
recette = film.worldwide_gross_income recette = film.worldwide_gross_income;
}
if (film.genre) {
genre = film.genre;
} }
let modalContent = ` let modalContent = `
<div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}" aria-hidden="true"> <div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}" aria-hidden="true">
@ -118,9 +133,10 @@ function getModalDetail(film, modalId) {
<div class="col-12-auto col-lg-6 "> <div class="col-12-auto col-lg-6 ">
<div class="p-2"> <div class="p-2">
<div class="py-2 fw-bolder"><h1>${film.title}</h1></div> <div class="py-2 fw-bolder"><h1>${film.title}</h1></div>
<div class="fs-4">${film.year} - ${film.genre}</div> <div class="fs-4">${film.year} - ${genre}</div>
<div class="fs-4">${film.duration} minutes (${film.countries})</div> <div class="fs-4">${film.duration} minutes (${film.countries})</div>
<div class="fs-4">IMDB score: ${film.imdb_score}/10</div> <div class="fs-4">IMDB score: ${film.imdb_score}/10</div>
<div class="fs-4">Recettes au Box-Office : ${recette}</div>
<div class="py-3 fs-4">Realisé par: <div class="py-3 fs-4">Realisé par:
<p class="fs-5">${film.directors}</p> <p class="fs-5">${film.directors}</p>
</div> </div>
@ -150,38 +166,98 @@ function getModalDetail(film, modalId) {
</div> </div>
</div> </div>
</div> </div>
` `;
return modalContent 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... // fill each blocks "defined category" : best rated, then mystery...
// Il Grande Lebowski // Il Grande Lebowski
// bestFilm("118715") // bestFilm("118715")
bestFilm("101928") bestFilm("101928");
getMovies("?sort_by=-imdb_score", "bestRated") function displayWindowSize(){
getMovies("?genre=mystery", "mystery") // Get width and height of the window excluding scrollbars
getMovies("?genre=action", "other") 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 // fill the selection menu
getCategory() getCategory();
// listen for any change in menu // listen for any change in menu
let selectedItem = document.getElementById("category-select") let selectedItem = document.getElementById("category-select");
selectedItem.addEventListener("change", ()=> { selectedItem.addEventListener("change", ()=> {
console.log(selectedItem.value) getMovies(`?genre=${selectedItem.value}`, "other");
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 = `
<div class="col-12 col-md-6 col-lg-4 pb-5">
<div class="square" style="background-image: url(${film.image_url}); background-size: cover">
</div>
<div class="overlay row">
<div class="col-12">
<h4 style="color: white">${film.title}</h4>
</div>
<div class="col d-flex justify-content-end">
<button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>
`;
// 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);
//afficherFilms() blockToLook.innerHTML += movieBlock+modal+blockEnd;
// console.log(film) }
}