From f3fd9dc2e8ff750dec107ddf02d389640d68d568 Mon Sep 17 00:00:00 2001
From: yann <yann@needsome.coffee>
Date: Fri, 7 Mar 2025 20:18:17 +0100
Subject: [PATCH] works except show more and show less

---
 index2.html |  23 ++++---
 test2.js    | 176 +++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 142 insertions(+), 57 deletions(-)

diff --git a/index2.html b/index2.html
index 63790de..8b226b9 100644
--- a/index2.html
+++ b/index2.html
@@ -5,7 +5,9 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
         <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://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>
 		.square {
 			width: 100%;
@@ -15,7 +17,7 @@
 		}
 		.overlay {
 			position: absolute;
-			top: 10rem;
+		 	top: 10rem;
 			height: 8rem;
 			width: 90%;
 			background-color: rgba(0, 0, 0, 0.4);
@@ -46,10 +48,10 @@
 	<section>
 		<div class="container mt-5">
 			<h2> Meilleur film </h2></div>
-				<div class="container border border-black border-4 mt-1">
-    			<div class="row" id="bestFilm">
-        		<!-- square block model-->
-    			</div>
+				<div class="container border border-black border-5 mt-1">
+					<div class="row" id="bestFilm">
+					<!-- square block model-->
+					</div>
 			</div>
 	</section>
 	<!-- best note -->
@@ -59,6 +61,12 @@
     		<div class="row" id="bestRated">
         		<!-- 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>
 	</section>
 
@@ -66,7 +74,8 @@
 		<div class="container">
 			<h2>Mystery</h2>
     		<div class="row" id="mystery">
-        		<!-- square block model-->
+			<!-- square block model-->
+				</div>
     		</div>
 		</div>
 	</section>
diff --git a/test2.js b/test2.js
index 9decb87..8111cb7 100644
--- a/test2.js
+++ b/test2.js
@@ -1,28 +1,39 @@
-const url_title = "http://localhost:8000/api/v1/titles/"
-const url_genre = "http://localhost:8000/api/v1/genres/"
+const url_title = "http://localhost:8000/api/v1/titles/";
+const url_genre = "http://localhost:8000/api/v1/genres/";
+
 const blockEnd = `
             </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) {
-    const filmList = []
+    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])
+            filmList.push(film1.results[i]);
         }
     }
 
-    let blockToLook = document.getElementById(id)
-    blockToLook.innerHTML = ""
+    let blockToLook = document.getElementById(id);
+    blockToLook.innerHTML = "";
 
-// square block creation for each film
     for (let i = 0; i < 6; i++) {
-        film = filmList[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">
@@ -34,39 +45,39 @@ async function getMovies(url, id) {
                     <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)
+        const response2 = await fetch(`${url_title}${film.id}`);
+        const film2 = await response2.json();
+        let modal = getModalDetail(film2, film2.id);
 
-    blockToLook.innerHTML += movieBlock+modal+blockEnd
+    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
+    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 = []
+    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)
+            listeGenres.push(genres.results[j].name);
         };
     }
-    let categorySelect = document.getElementById("category-select")
+    let categorySelect = document.getElementById("category-select");
     for (i in listeGenres) {
         let 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();
 
         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="col-lg-3 col-md-3"><h2>${bfilm.title}</h2></div>
+                <div class="row">
+                    <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 class="row">
-                        <div class="col-md-9">${bfilm.description}</div>
+                    <div class="col-12 d-block d-md-none" style="background-image: url(${bfilm.image_url}); background-size: cover"></div>
+                    <div class="col-sm-12 col-md-9 my-3">
+                            <div class="col-12  d-flex justify-content-start"><h2>${bfilm.title}</h2></div>
+                            <div class="col-12">${bfilm.description}</div>
+                            <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>
+                            </div>
                     </div>
-                    <div class="row">
-                        <div class="col-12 d-flex justify-content-sm-end justify-content-center mt-3">
-                            <button type="button" class="btn btn-danger rounded-4 px-4" data-toggle="modal" data-target="#${bfilm.id}">Détail</button>
                 </div>
-        `
+        `;
         let modal = getModalDetail(bfilm, bfilm.id);
         document.getElementById("bestFilm").innerHTML += detail+modal;
 
@@ -98,9 +108,14 @@ async function bestFilm(filmId) {
 
 // create the modal HTML block for a given film object
 function getModalDetail(film, modalId) {
-    recette = "-"
+    let recette = "N/A";
+    let genre = recette;
+
     if (film.worldwide_gross_income) {
-        recette = film.worldwide_gross_income
+        recette = film.worldwide_gross_income;
+    }
+    if (film.genre) {
+        genre = film.genre;
     }
     let modalContent = `
     <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="p-2">
                                 <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">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:
                                     <p class="fs-5">${film.directors}</p>
                                 </div>
@@ -150,38 +166,98 @@ function getModalDetail(film, modalId) {
             </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...
 
 // Il Grande Lebowski
 // bestFilm("118715")
 
-bestFilm("101928")
-getMovies("?sort_by=-imdb_score", "bestRated")
-getMovies("?genre=mystery", "mystery")
-getMovies("?genre=action", "other")
+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()
+getCategory();
 
 // listen for any change in menu
-let selectedItem = document.getElementById("category-select")
+let selectedItem = document.getElementById("category-select");
 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()
-// console.log(film)
+    blockToLook.innerHTML += movieBlock+modal+blockEnd;
+    }
+}