pourquoi la pagination ne fait rien ? l'evenement se déclenche bien mais rien ne change à l'écran : import PersonnagesProvider from "../../services/PersonnagesProvider.js";
import FavoriteManager from '../../services/FavoriteManager.js';
import { renderNavbar } from "./navBar.js";
import { lazyLoadImages } from '../../services/LazyLoading.js';

export default class Home {
  constructor() {
    this.currentPage = 1;
  }

  async render() {
    let personnages = await PersonnagesProvider.FetchPersonnages(10, this.currentPage);
    let html = `<div class="personnages-container">
      ${personnages
        .map(
          (personnage) => /*html*/ `
          <div class="personnage">
            <a href="/#/personnage/${personnage.id}">
              <img class="personnage-img" src="${personnage.img}" alt="${personnage.name}">
            </a>
            <p>${personnage.nom}  <a id="favori-${personnage.id}" onclick="FavoriteManager.toggleFavorites('${personnage.id}');">
            ${FavoriteManager.isFavorite(personnage.id) ? 
            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16"><path d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/></svg>' : 
            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16"><path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/></svg>'} 
        </a></p>
          </div>
          `
        )
        .join("\n ")}
    </div>
    <div class="pagination">
      <button id="prev-page">Previous</button>
      <span>Page ${this.currentPage}</span>
      <button id="next-page">Next</button>
    </div>`;

    return /*html*/ `
      ${renderNavbar()}
      ${html}
    `;
  }

  after_render() {
    lazyLoadImages('.personnage-img');
    document.getElementById('prev-page').addEventListener('click', () => {
      this.currentPage = Math.max(this.currentPage - 1, 1);
      this.render();
    });
    document.getElementById('next-page').addEventListener('click', () => {
      this.currentPage++;
      this.render();
    });
  }
}import { ENDPOINT  } from "../config.js";
import PersonnageModel from "../models/PersonnageModel.js";

export default class PersonnagesProvider{

  
  static FetchPersonnages = async (limit = 10, page = 1) => {
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    };
    const offset = (page - 1) * limit;
    try {
      const response = await fetch(`${ENDPOINT}/personnages?_limit=${limit}&_start=${offset}`, options)
      const json = await response.json();
      return json
    } catch (err) {
      console.log('Error getting documents', err)
    }
  }
  static searchPersonnages = async (searchTerm) => {
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    };
    try {
      const response = await fetch(`${ENDPOINT}/personnages`, options)
      const json = await response.json();
      return json.filter(personnage => personnage.nom.toLowerCase().includes(searchTerm));
    } catch (err) {
      console.log('Error getting documents', err)
    }
  }

  

  static getPersonnages = async (id) => {
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    };
    try{
      
      const response = await fetch(`${ENDPOINT}/personnages?id=` + id, options)
      const json = await response.json();
      return new PersonnageModel(json[0].id, json[0].nom, json[0].classe, json[0].niveau, json[0].note, json[0].experience, json[0].statistiques);

    }catch (err){
      console.log('Error getting documents', err)
    }
  }

  static updatePersonnage = async(personnage) => {
    const options = {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        "id": personnage.id,
        "nom": personnage.nom,
        "classe": personnage.classe,
        "niveau": personnage.niveau,
        "note": personnage.note,
        "experience": personnage.experience,
        "statistiques": personnage.statistiques
      })
    };

    try{
      const response = await fetch(`${ENDPOINT}/personnages/` + personnage.id, options)
      const json = await response.json();

      return new PersonnageModel(json.id, json.nom, json.classe, json.niveau, json.note, json.experience, json.statistiques);

    }catch(err){
      console.log('Error getting documents', err)
    }
  }  
  static async getFavoritePersonnages() {
    let allPersonnages = await this.FetchPersonnages();
    let favorites = FavoriteManager.getFavorites();
    return allPersonnages.filter(personnage => favorites.includes(personnage.id));
  }
}import PersonnagesProvider from "../../services/PersonnagesProvider.js";
import Utils from "../../services/Utils.js";
import FavoriteManager from "../../services/FavoriteManager.js";

export default class Personnage{

    async render(){
        let request = Utils.parseRequestURL();
        let personnage = await PersonnagesProvider.getPersonnages(request.id);
        return /*html*/`
            <script>
                function testt(){
                    console.log("test");
                }
            </script>
            <section class="section">
                <h1> Nom : ${personnage.nom}</h1>
                <p> Classe : ${personnage.classe} </p>
                <p> Note : ${personnage.note} </p>
                <p id="niveau"> Niveau(x) : ${personnage.niveau} </p>
                <p id="exp"> Expérience(s) : ${personnage.experience} </p>
            </section>
            <button id="add_exp">+ 100 expériences</button><br><br>
            ${
                FavoriteManager.isFavorite(personnage.id) ?  "<button id='remove_favoris'>Supprimer des favoris</button>" : "<button id='add_favoris'>Ajouter en favoris</button>"
            }
            <br><br>
            <div id="note">
                <button id="remove_note">-</button>
                <div id="etoiles"></div>
                <button id="add_note">+</button>
            </div>
            <p><a href="/">Retour</a></p>
        `
    }

    async after_render(){
        let request = Utils.parseRequestURL();
        let personnage = await PersonnagesProvider.getPersonnages(request.id);
        let etoiles = document.querySelector("#etoiles");
        let note = document.querySelector("#note");
        note.style.display = "flex";

        // ajoute les etoiles jaunes 
        for(let i = 0; i < personnage.note; i++){
            etoiles.innerHTML += "<img src='assets/etoile2.png' width='20px' height='20px'/>";
        }

        // ajoute les etoiles noires
        for(let i = 0; i < 5 - personnage.note; i++){
            etoiles.innerHTML += "<img src='assets/etoile1.png' width='20px' height='20px'/>";
        }

        document.querySelector("#add_note").addEventListener("click", async function(){
            let request = Utils.parseRequestURL();

            let personnage = await PersonnagesProvider.getPersonnages(request.id);
            if(personnage.note < 5){
                personnage.note++;
                personnage.update();
            }

            // actualise la page 
            let content = document.querySelector('#content');
            let p = new Personnage();
            content.innerHTML = await p.render();
            await p.after_render();
        });

        document.querySelector("#remove_note").addEventListener("click", async function(){
            let request = Utils.parseRequestURL();

            let personnage = await PersonnagesProvider.getPersonnages(request.id);
            if(personnage.note > 0){
                personnage.note--;
                personnage.update();
            }

            // actualise la page 
            let content = document.querySelector('#content');
            let p = new Personnage();
            content.innerHTML = await p.render();
            await p.after_render();
        });


        document.querySelector("#add_exp").addEventListener("click", async function(){
            let request = Utils.parseRequestURL();

            let personnage = await PersonnagesProvider.getPersonnages(request.id);
            personnage.experience += 100;
            personnage.update();

            // actualise la page 
            let content = document.querySelector('#content');
            let p = new Personnage();
            content.innerHTML = await p.render();
            await p.after_render();
        });

        document.querySelector("#add_favoris")?.addEventListener("click", async function(){
            let request = Utils.parseRequestURL();

            let personnage = await PersonnagesProvider.getPersonnages(request.id);

            FavoriteManager.addToFavorites(personnage.id);

            // actualise la page 
            let content = document.querySelector('#content');
            let p = new Personnage();
            content.innerHTML = await p.render();
            await p.after_render();
        });

        document.querySelector("#remove_favoris")?.addEventListener("click", async function(){
            let request = Utils.parseRequestURL();

            let personnage = await PersonnagesProvider.getPersonnages(request.id);
            FavoriteManager.removeFromFavorites(personnage.id);

            // actualise la page 
            let content = document.querySelector('#content');
            let p = new Personnage();
            content.innerHTML = await p.render();
            await p.after_render();
        });
    }
}