feat: dashboard web FastAPI Sprint 4
Ajout d'un dashboard lecture seule par-dessus la DB SQLite existante. Fichiers créés : - tickettracker/web/queries.py : 7 fonctions SQL (stats, compare, historique...) - tickettracker/web/api.py : router /api/* JSON (FastAPI) - tickettracker/web/app.py : routes HTML + Jinja2 + point d'entrée uvicorn - tickettracker/web/templates/ : base.html, index.html, compare.html, product.html, receipt.html - tickettracker/web/static/style.css : personnalisations Pico CSS - tests/test_web.py : 19 tests (96 passent, 1 xfail OCR) Fichiers modifiés : - requirements.txt : +fastapi, uvicorn[standard], jinja2, python-multipart, httpx - config.py : +DB_PATH (lu depuis TICKETTRACKER_DB_PATH) Lancement : python -m tickettracker.web.app Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
36
tickettracker/web/templates/base.html
Normal file
36
tickettracker/web/templates/base.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}TicketTracker{% endblock %}</title>
|
||||
<!-- Pico CSS : framework CSS minimaliste sans JavaScript -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
|
||||
<!-- Chart.js : graphiques -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
|
||||
<!-- Style personnalisé -->
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><strong>🛒 TicketTracker</strong></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/">Accueil</a></li>
|
||||
<li><a href="/compare">Comparer</a></li>
|
||||
<li><a href="/api/docs" target="_blank">API docs</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<small>TicketTracker — dashboard lecture seule</small>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
62
tickettracker/web/templates/compare.html
Normal file
62
tickettracker/web/templates/compare.html
Normal file
@@ -0,0 +1,62 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Comparer les prix — TicketTracker{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>Comparaison Picnic vs Leclerc</h1>
|
||||
|
||||
{% if empty %}
|
||||
<article>
|
||||
<p>
|
||||
Aucun produit commun trouvé entre Picnic et Leclerc.
|
||||
</p>
|
||||
<p>
|
||||
Pour voir une comparaison, vous devez :
|
||||
</p>
|
||||
<ol>
|
||||
<li>Importer des tickets des deux enseignes</li>
|
||||
<li>Normaliser les noms d'articles avec la CLI</li>
|
||||
</ol>
|
||||
<pre><code>python -m tickettracker.cli normalize</code></pre>
|
||||
</article>
|
||||
{% else %}
|
||||
|
||||
<p>Produits présents chez les deux enseignes, triés par écart de prix décroissant.</p>
|
||||
|
||||
<div class="overflow-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Produit</th>
|
||||
<th>Picnic moy.</th>
|
||||
<th>Leclerc moy.</th>
|
||||
<th>Écart €</th>
|
||||
<th>Écart %</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for p in products %}
|
||||
<tr>
|
||||
<td>{{ p.name }}</td>
|
||||
<td>{{ "%.2f"|format(p.price_picnic) }} €</td>
|
||||
<td>{{ "%.2f"|format(p.price_leclerc) }} €</td>
|
||||
<td class="{% if p.diff > 0 %}diff-positive{% elif p.diff < 0 %}diff-negative{% endif %}">
|
||||
{{ "%+.2f"|format(p.diff) }} €
|
||||
</td>
|
||||
<td class="{% if p.diff > 0 %}diff-positive{% elif p.diff < 0 %}diff-negative{% endif %}">
|
||||
{{ "%+.1f"|format(p.diff_pct) }} %
|
||||
</td>
|
||||
<td>
|
||||
<a href="/product/{{ p.name | urlquote }}">Historique</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p><small>Positif = Leclerc plus cher, négatif = Picnic plus cher.</small></p>
|
||||
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
104
tickettracker/web/templates/index.html
Normal file
104
tickettracker/web/templates/index.html
Normal file
@@ -0,0 +1,104 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Accueil — TicketTracker{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>Tableau de bord</h1>
|
||||
|
||||
{% if empty %}
|
||||
<article>
|
||||
<p>
|
||||
Aucun ticket importé. Utilisez la CLI pour importer vos tickets :
|
||||
</p>
|
||||
<pre><code>python -m tickettracker.cli import chemin/vers/ticket.html # Picnic
|
||||
python -m tickettracker.cli import chemin/vers/ticket.pdf # Leclerc</code></pre>
|
||||
</article>
|
||||
{% else %}
|
||||
|
||||
<!-- Cartes de statistiques -->
|
||||
<div class="stat-grid">
|
||||
<article class="stat-card">
|
||||
<h3>{{ stats.total_receipts }}</h3>
|
||||
<p>Tickets importés</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h3>{{ "%.2f"|format(stats.total_spent) }} €</h3>
|
||||
<p>Total dépensé</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h3>{{ stats.distinct_products }}</h3>
|
||||
<p>Produits distincts</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h3>{{ stats.total_items }}</h3>
|
||||
<p>Articles scannés</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<!-- Graphique dépenses par mois -->
|
||||
<article>
|
||||
<h2>Dépenses par mois</h2>
|
||||
<div class="chart-container">
|
||||
<canvas id="monthlyChart"></canvas>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const data = {{ chart_data | tojson }};
|
||||
const ctx = document.getElementById("monthlyChart").getContext("2d");
|
||||
new Chart(ctx, {
|
||||
type: "bar",
|
||||
data: data,
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: { position: "top" }
|
||||
},
|
||||
scales: {
|
||||
x: { stacked: true },
|
||||
y: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
callback: function(value) { return value + " €"; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Tableau des derniers tickets -->
|
||||
<article>
|
||||
<h2>Derniers tickets</h2>
|
||||
<div class="overflow-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Enseigne</th>
|
||||
<th>Date</th>
|
||||
<th>Total</th>
|
||||
<th>Articles</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for r in receipts %}
|
||||
<tr>
|
||||
<td>{{ r.id }}</td>
|
||||
<td>{{ r.store }}</td>
|
||||
<td>{{ r.date }}</td>
|
||||
<td>{{ "%.2f"|format(r.total) }} €</td>
|
||||
<td>{{ r.nb_items }}</td>
|
||||
<td><a href="/receipt/{{ r.id }}">Voir</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
118
tickettracker/web/templates/product.html
Normal file
118
tickettracker/web/templates/product.html
Normal file
@@ -0,0 +1,118 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}
|
||||
{% if data %}{{ data.name }}{% else %}Produit inconnu{% endif %} — TicketTracker
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>Historique produit</h1>
|
||||
|
||||
<!-- Sélecteur de produit : navigation JS vers /product/<nom encodé> -->
|
||||
<label for="product-select">Choisir un produit :</label>
|
||||
<select id="product-select" onchange="window.location='/product/' + encodeURIComponent(this.value)">
|
||||
<option value="">— sélectionner —</option>
|
||||
{% for p in all_products %}
|
||||
<option value="{{ p }}" {% if p == name %}selected{% endif %}>{{ p }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
{% if empty %}
|
||||
<article>
|
||||
<p>Produit <strong>{{ name }}</strong> introuvable dans la base.</p>
|
||||
<p>Le nom doit correspondre exactement à un <code>name_normalized</code> existant.</p>
|
||||
</article>
|
||||
{% else %}
|
||||
|
||||
<!-- Cartes statistiques -->
|
||||
<div class="stat-grid">
|
||||
<article class="stat-card">
|
||||
<h3>{{ "%.2f"|format(data.min_price) }} €</h3>
|
||||
<p>Prix minimum</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h3>{{ "%.2f"|format(data.avg_price) }} €</h3>
|
||||
<p>Prix moyen</p>
|
||||
</article>
|
||||
<article class="stat-card">
|
||||
<h3>{{ "%.2f"|format(data.max_price) }} €</h3>
|
||||
<p>Prix maximum</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<!-- Graphique d'historique des prix -->
|
||||
<article>
|
||||
<h2>Évolution du prix unitaire</h2>
|
||||
<div class="chart-container">
|
||||
<canvas id="priceChart"></canvas>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const history = {{ data.history | tojson }};
|
||||
|
||||
// Couleurs par enseigne
|
||||
const colors = { picnic: "#4a9eff", leclerc: "#ff6b35" };
|
||||
const stores = [...new Set(history.map(h => h.store))].sort();
|
||||
|
||||
const datasets = stores.map(store => {
|
||||
const points = history.filter(h => h.store === store);
|
||||
return {
|
||||
label: store,
|
||||
data: points.map(h => ({ x: h.date, y: h.unit_price })),
|
||||
borderColor: colors[store] || "#888",
|
||||
backgroundColor: (colors[store] || "#888") + "33",
|
||||
tension: 0.2,
|
||||
fill: false,
|
||||
};
|
||||
});
|
||||
|
||||
new Chart(document.getElementById("priceChart").getContext("2d"), {
|
||||
type: "line",
|
||||
data: { datasets },
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: { type: "category", title: { display: true, text: "Date" } },
|
||||
y: {
|
||||
title: { display: true, text: "Prix unitaire (€)" },
|
||||
ticks: { callback: v => v + " €" }
|
||||
}
|
||||
},
|
||||
plugins: { legend: { position: "top" } }
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Tableau des occurrences -->
|
||||
<article>
|
||||
<h2>Toutes les occurrences</h2>
|
||||
<div class="overflow-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Enseigne</th>
|
||||
<th>Prix unitaire</th>
|
||||
<th>Quantité</th>
|
||||
<th>Unité</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for h in data.history %}
|
||||
<tr>
|
||||
<td>{{ h.date }}</td>
|
||||
<td>{{ h.store }}</td>
|
||||
<td>{{ "%.2f"|format(h.unit_price) }} €</td>
|
||||
<td>{{ h.quantity }}</td>
|
||||
<td>{{ h.unit }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
89
tickettracker/web/templates/receipt.html
Normal file
89
tickettracker/web/templates/receipt.html
Normal file
@@ -0,0 +1,89 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{% if data %}Ticket #{{ data.id }}{% else %}Ticket introuvable{% endif %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% if data is none %}
|
||||
<article>
|
||||
<h2>Ticket introuvable</h2>
|
||||
<p>Le ticket #{{ receipt_id }} n'existe pas dans la base.</p>
|
||||
<a href="/">← Retour à l'accueil</a>
|
||||
</article>
|
||||
{% else %}
|
||||
|
||||
<!-- En-tête ticket -->
|
||||
<hgroup>
|
||||
<h1>Ticket #{{ data.id }}</h1>
|
||||
<p>{{ data.store | capitalize }} — {{ data.date }}</p>
|
||||
</hgroup>
|
||||
|
||||
<!-- Champs du ticket -->
|
||||
<article>
|
||||
<dl>
|
||||
<dt>Enseigne</dt>
|
||||
<dd>{{ data.store }}</dd>
|
||||
|
||||
<dt>Date</dt>
|
||||
<dd>{{ data.date }}</dd>
|
||||
|
||||
<dt>Total</dt>
|
||||
<dd><strong>{{ "%.2f"|format(data.total) }} €</strong></dd>
|
||||
|
||||
{% if data.delivery_fee is not none %}
|
||||
<dt>Frais de livraison</dt>
|
||||
<dd>{{ "%.2f"|format(data.delivery_fee) }} €</dd>
|
||||
{% endif %}
|
||||
|
||||
{% if data.order_id %}
|
||||
<dt>Référence commande</dt>
|
||||
<dd><code>{{ data.order_id }}</code></dd>
|
||||
{% endif %}
|
||||
</dl>
|
||||
</article>
|
||||
|
||||
<!-- Articles -->
|
||||
<article>
|
||||
<h2>Articles ({{ data['items'] | length }})</h2>
|
||||
<div class="overflow-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom brut</th>
|
||||
<th>Nom normalisé</th>
|
||||
<th>Catégorie</th>
|
||||
<th>Qté</th>
|
||||
<th>Unité</th>
|
||||
<th>Prix unit.</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in data['items'] %}
|
||||
<tr>
|
||||
<td>{{ item.name_raw }}</td>
|
||||
<td>
|
||||
{% if item.name_normalized %}
|
||||
<a href="/product/{{ item.name_normalized | urlquote }}">
|
||||
{{ item.name_normalized }}
|
||||
</a>
|
||||
{% else %}
|
||||
<em>—</em>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ item.category or "—" }}</td>
|
||||
<td>{{ item.quantity }}</td>
|
||||
<td>{{ item.unit }}</td>
|
||||
<td>{{ "%.2f"|format(item.unit_price) }} €</td>
|
||||
<td>{{ "%.2f"|format(item.total_price) }} €</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<a href="/">← Retour à l'accueil</a>
|
||||
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user