script.js

@@ -10,8 +10,51 @@ const blockEnd = `
 let filmNumber = 10
 let categoryMovieBlock = 6
 
+async function getMovies(url, id, type) {
+    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 id = i+1
+
+        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);
+
+    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() {
@@ -166,7 +209,7 @@ function addSeeMore(id, display) {
     let blockToChange = document.getElementById(id)
     let blockToAdd = `
         <div id="seeMore"  class="row d-flex justify-content-center">
-            <button onclick="${id}More()" class="col-4 btn btn-danger rounded-4 ${display}" id="more" type="button" >Voir plus</button>
+            <button class="col-4 btn btn-danger rounded-4 ${display}" id="more" type="button" >Voir plus</button>
         </div>
     `
     blockToChange.innerHTML += blockToAdd
@@ -176,15 +219,12 @@ function addSeeLess(id, display) {
     let blockToChange = document.getElementById(id)
     let blockToAdd = `
         <div id="seeLess"  class="row d-flex justify-content-center">
-            <button onclick="${id}Less()" class="col-4 btn btn-danger rounded-4 ${display}" id="less" type="button" >Voir moins</button>
+            <button class="col-4 btn btn-danger rounded-4 ${display}" id="less" type="button" >Voir moins</button>
         </div>
     `
     blockToChange.innerHTML += blockToAdd;
 }
 
-
-
-
 // add movie block quantity depending on screen size
 function generateMovies(movieProm, id) {
 
@@ -216,7 +256,29 @@ function generateMoviesUnsized(movieProm, id) {
     });
 }
 
+function listenButton(blockId) {
+    let more = document.querySelector("#blockId button");
+    // when the button is clicked ; regenerate blocks and hide button
+    more.addEventListener("click", ()=> {
+        blockId.then((data) => {
+            createBlock(data, "blockId", 6);
+            addSeeMore("blockId", "d-none");
+            addSeeLess("blockId", "d-block");
+        })
+    })
 
+    let less = document.querySelector("#bockId button");
+    less.addEventListener("click", ()=> {
+        blockId.then((data) => {
+            generateMovies(blockId, "blockId");
+        })
+    })
+
+// when the screen changes, regenerate blocks
+window.addEventListener("resize", ()=> {
+        generateMovies(bestRated, "bestRated")
+})
+}
 
 // ============ best film ============
 // Il Grande Lebowski
@@ -229,63 +291,131 @@ let bestRated = getMovies3("?sort_by=-imdb_score");
 // create blocks depending on current screen's size
 generateMovies(bestRated, "bestRated");
 
-
+//retrieve the button when it exists (better than getElementById which could raise an error
-
+let more = document.querySelector("#bestRated");
-// when the screen changes, regenerate blocks
+console.log(more)
-window.addEventListener("resize", ()=> {
+// when the button is clicked ; regenerate blocks and hide button
-        generateMovies(bestRated, "bestRated");
+more.addEventListener("click", ()=> {
-        generateMovies(mystery, "mystery");
-        generateMovies(other, "other");
-
-})
-//  ============ Mystery ============
-let mystery = getMovies3("?genre=mystery")
-generateMovies(mystery, "mystery")
-
-
-// fill the selection menu
-getCategory();
-let other = getMovies3("?genre=action");
-generateMovies(other, "other");
-
-// listen for any change in menu
-let selectedItem = document.getElementById("category-select");
-selectedItem.addEventListener("change", ()=> {
-//    getMovies(`?genre=${selectedItem.value}`, "other");
-    let block = getMovies3(`?genre=${selectedItem.value}`);
-    generateMovies(block, "other");
-});
-
-
-function bestRatedMore() {
     bestRated.then((data) => {
         createBlock(data, "bestRated", 6);
         addSeeMore("bestRated", "d-none");
         addSeeLess("bestRated", "d-block");
     })
-}
+})
-function bestRatedLess() {
+
-    generateMovies(bestRated, "bestRated")
+less.addEventListener("click", ()=> {
+    bestRated.then((data) => {
+        createBlock(data, "bestRated", 6);
+        addSeeMore("bestRated", "d-none");
+        addSeeLess("bestRated", "d-block");
+    })
+})
+
+// when the screen changes, regenerate blocks
+window.addEventListener("resize", ()=> {
+        generateMovies(bestRated, "bestRated")
+})
+
+
+
+
+
+
+// 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");
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+function createBlock2(filmList, id, count) {
+    let blockToLook = document.getElementById(id);
+    blockToLook.innerHTML = "";
+    let display = "d-block"
+
+    for (let i = 0; i < count; i++) {
+        film = filmList[i];
+        let id = i+1
+
+        if (i === 0 || i === 1 ) {
+            display = "d-block"
+        }
+        if (i === 2 || i === 3) {
+            display = "d-none d-md-block"
+        }
+        if (i === 4 || i === 5) {
+            display = "d-none d-lg-block"
+        }
+
+        let movieBlock = `
+            <div class="col-12 col-md-6 col-lg-4 pb-5 ${display}" id="${i}">
+                <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
+        let modal = getModalDetail(film, film.id);
+
+
+
+        blockToLook.innerHTML += movieBlock+modal+blockEnd;
+    }
 }
 
-function mysteryMore() {
+async function getMovies2(url, id) {
-    mystery.then((data) => {
+    const filmList = [];
-        createBlock(data, "mystery", 6);
+    //let countMovies = 6;
-        addSeeMore("mystery", "d-none");
-        addSeeLess("mystery", "d-block");
-    })
-}
-function mysteryLess() {
-    generateMovies(mystery, "mystery")
-}
 
-function otherMore() {
+    for (let j=1; j<3; j++) {
-    other.then((data) => {
+        const response = await fetch(`${url_title}${url}&format=json&page=${j}`);
-        createBlock(data, "other", 6);
+        const film1 = await response.json();
-        addSeeMore("other", "d-none");
+        for (i in film1.results) {
-        addSeeLess("other", "d-block");
+            filmList.push(film1.results[i]);
-    })
+        }
-}
+    }
-function otherLess() {
+
-    generateMovies(other, "other")
+    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);
+
+    blockToLook.innerHTML += movieBlock+modal+blockEnd;
+    }
 }