tetelie/WebCrawler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

back

Browse Source
This commit is contained in:
Σlie *
2026-02-27 22:47:11 +01:00
parent 96ff8da66c
commit d716272903
1 changed files with 6 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/main/resources/templates/index.html
View File

@ -15,63 +15,21 @@
</form> </form>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <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"> <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"> <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>
<h2 class="flex-1 font-semibold text-sm" th:text="${product.name ?: 'Produit sans nom'}">Nom</h2>
<a th:href="@{'/delete/' + ${product.id}}" class="text-red-500">🗑️</a> <a th:href="@{'/delete/' + ${product.id}}" class="text-red-500">🗑️</a>
</div> </div>
<canvas th:id="'chart-' + ${product.id}"></canvas> <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>
</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> </body>
</html> </html>