Merge branch 'dev' into recherche

films.html

@@ -30,68 +30,9 @@
     </form>
   </section>
 
-  <div class='accordeon'>
+  <section id="resultats" class="accordeon">
-    <div class='accordeon_item'>
+
-      <div id="1" class='accordeon_item_header'>
+  </section>
-        <h2 class="titres"></h2>
-        <p>(Cliquez ici pour étendre)</p>
-      </div>
-      <div class="accordeon_item_body">
-        <div class="accordeon_item_body_content">
-        </div>
-      </div>
-    </div>
-    <div class='accordeon_item'>
-      <div id="2" class='accordeon_item_header'>
-        <h2 class="titres"></h2>
-        <p>(Cliquez ici pour étendre)</p>
-      </div>
-      <div class="accordeon_item_body">
-        <div class="accordeon_item_body_content">
-        </div>
-      </div>
-    </div>
-    <div class='accordeon_item'>
-      <div id="3" class='accordeon_item_header'>
-        <h4>Return of the Jedi</h4>
-        <p>(Cliquez ici pour étendre)</p>
-      </div>
-      <div class="accordeon_item_body">
-        <div class="accordeon_item_body_content">
-        </div>
-      </div>
-    </div>
-    <div class='accordeon_item'>
-      <div id="4" class='accordeon_item_header'>
-        <h4>The Phantom Menace</h4>
-        <p>(Cliquez ici pour étendre)</p>
-      </div>
-      <div class="accordeon_item_body">
-        <div class="accordeon_item_body_content">
-        </div>
-      </div>
-    </div>
-    <div id="5" class='accordeon_item'>
-      <div class='accordeon_item_header'>
-        <h4>Attack of the Clones</h4>
-        <p>(Cliquez ici pour étendre)</p>
-      </div>
-      <div class="accordeon_item_body">
-        <div class="accordeon_item_body_content">
-        </div>
-      </div>
-    </div>
-    <div class='accordeon_item'>
-      <div id="6" class='accordeon_item_header'>
-        <h4>Revenge of the Sith</h4>
-        <p>(Cliquez ici pour étendre)</p>
-      </div>
-      <div class="accordeon_item_body">
-        <div class="accordeon_item_body_content">
-        </div>
-      </div>
-    </div>
-  </div>
   <div class="image-films"></div>
 </body>
 

index.html

@@ -18,6 +18,9 @@
             </ul>
         </nav>
     </section>
+    <h1 id = "bienvenue">bienvenue</h1>
+    <p id = "presentation">Bienvenue sur la Star Wars database, 
+                        utilisez le menu pour vous déplacer</p>
     
 </body>
 </html>

scripts/films.js

@@ -1,68 +1,31 @@
-const { div } = require("prelude-ls");
+import { api_call } from './util';
 
-const FILMS = document.getElementsByClassName('accordeon');
+const films = document.getElementById("resultats");
-const VAISSEAUX = document.getElementById('vaisseaux-films');
-const ESPECES = document.getElementById('especes-films');
-const TITRE = document.getElementsByClassName('titres');
-console.log(FILMS);
 
-const API_URL = "https://swapi.dev/api/films/";  
+const API_URL = "https://swapi.dev/api/films/";         // déclare la localisation de la liste des films
-fetch(API_URL + target.id)  
+
-.then((response) => {                                   // retourne une reponse
+function remplissage(EPISODES){
-    console.log(response);
-    return response.json();                             // sous format json
-})
-.then(afficherFilms => {                                // on affiche ensuite les films  
-        const EPISODES = afficherFilms;      // on déclare qu'un épisode est toujours la fonction avec sa boucle
             console.log(EPISODES);                             
     
-        TITRE.innerHTML +=`                                 
+        for(index in EPISODES.results){
-        <p class= "titre">${EPISODES.title}</p>
+            films.innerHTML +=`
-        ` 
+            <section class="resultat accordeon_item">
+            <h1 class="accordeon_item_header">${EPISODES.results[index].title}</h1>
+            <div class="accordeon_item_body">
+            <p class= "episode">Episode :  ${EPISODES.results[index].episode_id}</p>
+            <p class= "directeur">Directeur : ${EPISODES.results[index].director}</p>
+            <p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p>
+            <p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p>
+            </div>
+            </section>`
         }
-,)
-
         const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
         accordeonItemHeader.forEach(accordeonItemHeader =>{
         accordeonItemHeader.addEventListener("click", event => {
-
-        console.log(event.target.id);
-        console.log(event.target.nextSibling)
-        console.log(event.target.nextSibling.nextElementSibling)
-        console.log(event.target.nextSibling.nextElementSibling.children)
-        const DEPLIE = event.target.nextSibling.nextElementSibling.children[0];
-
         accordeonItemHeader.classList.toggle("active");    
-
-const API_URL = "https://swapi.dev/api/films/";         // déclare la localisation de la liste des films
-fetch(API_URL + event.target.id)                                          // recupère la liste des films
-.then((response) => {                                   // retourne une reponse
-    console.log(response);
-    return response.json();                             // sous format json
 })
-.then(afficherFilms => {                                // on affiche ensuite les films  
+        })
-        const EPISODES = afficherFilms;      // on déclare qu'un épisode est toujours la fonction avec sa boucle
-        console.log(EPISODES);                             
-    
-        DEPLIE.innerHTML +=`                                 
-        <p class= "titre">${EPISODES.title}</p>
-        <p class= "episode">Episode :  ${EPISODES.episode_id}</p>
-        <p class= "directeur">Directeur : ${EPISODES.director}</p>
-        <p class= "producteur">Producteur : ${EPISODES.producer}</p>
-        <p class= "sortie">Date de Sortie : ${EPISODES.release_date}</p>
-    `
     }
-    /*for(let index = 0; index <5; index++){ 
-        FILMS.innerHTML +=` 
-        <p class ="especes"> Espèces : ${EPISODES.species[index]}</p>
-        ` 
-    }
-        for(let index = 0; index<8; index++){
-        FILMS.innerHTML +=`   
-        <p class= "vaisseaux"> Vaisseaux : ${EPISODES.starships[index]}</p> 
-        ` 
-        }*/
 
-,)
+
-})
+api_call(API_URL, remplissage);
-})

scripts/personnages.js

@@ -1,4 +1,4 @@
-import { api_call,API_URL } from "./util";
+import { api_call,API_URL, createPagination } from "./util";
 
 const PERSONNAGES = document.getElementById("resultats");
 
@@ -20,17 +20,17 @@ console.log('personnage.js loaded');
 
 //api_call(API_URL+"/people", console.log);
 
-fetch(API_URL+"/people")
+// fetch(API_URL+"/people")
-.then(response => {
+// .then(response => {
-    return response.json();
+//     return response.json();
-})
+// })
-.then(jsonResp => {
+// .then(jsonResp => {
-    remplissage(jsonResp);
+//     remplissage(jsonResp);
-})
+// })
-.catch(error => {
+// .catch(error => {
-    console.log(`Erreur lors de l'appel API : 
+//     console.log(`Erreur lors de l'appel API : 
-                    ${error.message}`);
+//                     ${error.message}`);
-});
+// });
 
  function remplissage(json){
    console.log(json.results[0]);
@@ -47,7 +47,10 @@ fetch(API_URL+"/people")
      
      PERSONNAGES.innerHTML = '';
      const PERPAGE = json.results.length;
-     
+     const previousUrl = json.previous;
+     const nextUrl = json.next;
+     console.log(previousUrl);
+     console.log(nextUrl);
      
     for (let i = 0; i < PERPAGE; i++) {
       const urlbirth_year = json.results[i].birth_year;
@@ -84,5 +87,9 @@ for (let i = 0; i < PERPAGE; i++) {
     </section>`;
 
 
+    //Pagination
+    createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage);
 }
-}
+
+api_call(API_URL + "/people", remplissage);
+console.log('personnage.js loaded');

scripts/util.js

@@ -43,7 +43,7 @@ export const api_call = (url, callback) => {
  */
 export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) => {
     console.log("Url précédente : " + prevUrl);
-    console.group("Url suivante : " + nextUrl);
+    console.log("Url suivante : " + nextUrl);
     const currentPage = (prevUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(prevUrl)) + 1);
     console.log("Page courante : " + currentPage);
 

styles/style.css

@@ -85,14 +85,21 @@ form input{
     /* border-radius: 10%; */
 }
 
-/* div.image-films {
+#bienvenue{
+    text-align: center;
     background-color: transparent;
-    margin-top: -170px;
+    font-size: 100px;
-    margin-left: auto;
+    color :var(--jaune) ;
-    width: 30%;
+    text-decoration: underline;
-    content: url("../assets/imgs/mando.png");
+    text-decoration-color: var(--jaune) ;
+}
+#presentation {
+    text-align: center;
+    background-color: transparent;
+    font-size: 40px;
+    color :var(--jaune)
+}
 
-} */
 div.image-films {
     background-color: transparent;
     width: 30%;