back

src/main/resources/templates/index.html

@@ -15,63 +15,21 @@
 </form>
 
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-    <div th:each="product : ${products}" th:if="${product != null}" class="bg-gray-800 p-4 rounded-xl shadow-lg">
+    <div th:each="product : ${products}" class="bg-gray-800 p-4 rounded-xl shadow-lg">
         <div class="flex items-center gap-4 mb-4">
-            <img th:src="${product.imageUrl != null ? product.imageUrl : 'https://via.placeholder.com/150'}" class="w-16 h-16 object-contain rounded">
-
-            <h2 class="flex-1 font-semibold text-sm" th:text="${product.name ?: 'Produit sans nom'}">Nom</h2>
-
+            <img th:src="${product.imageUrl}" class="w-16 h-16 object-contain rounded">
+            <h2 class="flex-1 font-semibold text-sm" th:text="${product.name}">Nom du produit</h2>
             <a th:href="@{'/delete/' + ${product.id}}" class="text-red-500">🗑️</a>
         </div>
 
         <canvas th:id="'chart-' + ${product.id}"></canvas>
 
+        <script th:inline="javascript">
+            /* Code pour générer le graphique Chart.js pour chaque produit */
+        </script>
     </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
-<div class="p-4 bg-gray-800 rounded-lg shadow-md mb-4">
-    <h3 th:text="${product.name}" class="text-xl font-bold mb-2"></h3>
-
-    <div style="height: 200px;">
-        <canvas th:id="'chart-' + ${product.id}"></canvas>
-    </div>
-
-    <script th:inline="javascript">
-        (function() {
-            const productId = [[${product.id}]];
-            const ctx = document.getElementById('chart-' + productId).getContext('2d');
-
-            // On va chercher les données via l'API qu'on a créée
-            fetch('/api/prices/' + productId)
-                .then(response => response.json())
-                .then(data => {
-                    const labels = data.map(entry => new Date(entry.dateCheck).toLocaleDateString());
-                    const prices = data.map(entry => entry.price);
-
-                    new Chart(ctx, {
-                        type: 'line',
-                        data: {
-                            labels: labels,
-                            datasets: [{
-                                label: 'Prix (€)',
-                                data: prices,
-                                borderColor: '#3b82f6', // Bleu Tailwind
-                                backgroundColor: 'rgba(59, 130, 246, 0.1)',
-                                fill: true,
-                                tension: 0.4 // Courbe arrondie
-                            }]
-                        },
-                        options: {
-                            responsive: true,
-                            maintainAspectRatio: false,
-                            plugins: { legend: { display: false } }
-                        }
-                    });
-                });
-        })();
-    </script>
-</div>
 </body>
 </html>