From da2a2395d8bec9443f22bd2daff89193541a60fb Mon Sep 17 00:00:00 2001
From: Rocher <maxime.rocher@etu.uca.fr>
Date: Mon, 17 Mar 2025 11:24:05 +0100
Subject: [PATCH] pagination favoris

---
 public/styles/styleAccueil.css | 67 +++++++++++++++++++++++++++++++++-
 vue/favorits.php               | 58 ++++++++++++++++++++++++++---
 2 files changed, 119 insertions(+), 6 deletions(-)

diff --git a/public/styles/styleAccueil.css b/public/styles/styleAccueil.css
index 0770632..1b4980d 100644
--- a/public/styles/styleAccueil.css
+++ b/public/styles/styleAccueil.css
@@ -30,4 +30,69 @@ body.light-mode .citation-du-jour {
     transform: scale(1.02);
     z-index: 5;
     position: relative;
-}
\ No newline at end of file
+}
+
+/* ====== PAGINATION STYLES ====== */
+.pagination-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 20px 0;
+}
+
+.pagination-container select {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 10px;
+    padding: 5px;
+    font-size: 16px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+.pagination-container button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--main-light-gradient);
+    border: none;
+    border-radius: 5px;
+    padding: 5px 10px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+
+.pagination-container button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Spinner style */
+.spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #000;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    animation: spin 1s linear infinite;
+    margin-left: 10px;
+    display: none;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Adaptation pour dark mode */
+body.dark-mode .pagination-container button {
+    background: var(--main-dark-gradient);
+    color: #fff;
+}
+
+body.dark-mode .pagination-container select {
+    border: 1px solid #555;
+    background: #333;
+    color: #fff;
+}
diff --git a/vue/favorits.php b/vue/favorits.php
index 61ad807..6370d89 100644
--- a/vue/favorits.php
+++ b/vue/favorits.php
@@ -1,16 +1,64 @@
 <?php
 global $twig;
 
+// Paramètres de la pagination
+$perPage = 30;
+$currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
+if ($currentPage < 1) {
+    $currentPage = 1;
+}
+
+$totalItems = count($favorites);
+$totalPages = ceil($totalItems / $perPage);
+$offset = ($currentPage - 1) * $perPage;
+$favoritesPaginated = array_slice($favorites, $offset, $perPage);
+
 echo $twig->render('head.html.twig', [
-    'title' => "Favoris",
-    'style' => "public/styles/styleAccueil.css",
+    'title'   => "Favoris",
+    'style'   => "public/styles/styleAccueil.css",
     'scripts' => array("public/script/theme-toggle.js")
 ]);
 
 echo $twig->render('bandeau.html.twig');
 
 echo $twig->render('quoteLittle.html.twig', [
-            'quotes' => $favorites,
-            'titre' => "Favoris"
-        ]);
+    'quotes' => $favoritesPaginated,
+    'titre'  => "Favoris"
+]);
 ?>
+
+<div class="pagination-container">
+    <button id="prev-page" <?php if($currentPage <= 1) echo "disabled"; ?>>Page précédente</button>
+    <select id="page-selector">
+        <?php for($page = 1; $page <= $totalPages; $page++): ?>
+            <option value="<?php echo $page; ?>" <?php if($page == $currentPage) echo "selected"; ?>>Page <?php echo $page; ?></option>
+        <?php endfor; ?>
+    </select>
+    <button id="next-page" <?php if($currentPage >= $totalPages) echo "disabled"; ?>>Page suivante</button>
+    <div class="spinner" id="spinner"></div>
+</div>
+
+<script>
+document.getElementById('page-selector').addEventListener('change', function() {
+    document.getElementById('spinner').style.display = 'inline-block';
+    window.location.href = "?page=" + this.value;
+});
+
+document.getElementById('prev-page').addEventListener('click', function() {
+    var selector = document.getElementById('page-selector');
+    var newPage = parseInt(selector.value) - 1;
+    if(newPage >= 1) {
+        document.getElementById('spinner').style.display = 'inline-block';
+        window.location.href = "?page=" + newPage;
+    }
+});
+
+document.getElementById('next-page').addEventListener('click', function() {
+    var selector = document.getElementById('page-selector');
+    var newPage = parseInt(selector.value) + 1;
+    if(newPage <= <?php echo $totalPages; ?>) {
+        document.getElementById('spinner').style.display = 'inline-block';
+        window.location.href = "?page=" + newPage;
+    }
+});
+</script>