Add snapshot list

nummi/main/static/main/css/index.css

@@ -6,47 +6,55 @@ h1 {
 	margin: 0;
 }
 
-#transactions {
+.table {
 	display: grid;
-	grid-template-columns: repeat(6, auto);
 	margin: 2em 0;
 	border-radius: 1em 0 1em 0;
 	overflow: hidden;
-	border-bottom: .5em solid var(--text);
+	border-bottom: .5em solid var(--bg-inv);
 }
+.table.col2 {grid-template-columns: repeat(2, auto)}
+.table.col3 {grid-template-columns: repeat(3, auto)}
+.table.col4 {grid-template-columns: repeat(4, auto)}
+.table.col5 {grid-template-columns: repeat(5, auto)}
+.table.col6 {grid-template-columns: repeat(6, auto)}
 
-#transactions > div {
+.table > div {
 	display: contents;
 }
 
-#transactions > div > * {
+.table > div > * {
 	padding: 1em;
 	white-space: nowrap;
 }
-#transactions > div.g> * {
+.table > div.g> * {
 	background: var(--bg-01);
 }
 
-#transactions > div.header > * {
+.table > div.header > * {
 	background: var(--bg-inv);
 	color: var(--text-inv);
 }
 
-#transactions > div > .center {
+.table > div > .center {
 	text-align: center;
 }
-#transactions > div > span.value {
+.table > div > .right {
 	text-align: right;
 }
-#transactions > div > .num {
+.table > div > .num {
 	font-feature-settings: "tnum", "ss01";
 }
 
-#transactions > div > span.text {
+.table > div > span.text {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
 #categories > a {
-	margin-right: 1em;
+	margin-right: var(--gap);
+}
+
+#snapshots {
+	max-width: 24rem;
 }

nummi/main/templates/main/index.html

@@ -10,7 +10,7 @@
 <h1>Nummi</h1>
 
 {% if transactions %}
-	<div id="transactions">
+	<div id="transactions" class="table col6">
 		<div class="header">
 			<strong class="date center">Date</strong>
 			<strong class="name">Nom</strong>
@@ -23,7 +23,7 @@
 			<div class="transaction {% cycle 'w' 'g' %}">
 				<span class="date num center">{{ trans.date|date:"Y-m-d" }}</span>
 				<span class="name text"><a href="{% url 'transaction' trans.id %}">{{ trans.name }}</a></span>
-				<span class="value num">{% if trans.value > 0 %}+{% endif %}{{ trans.value|floatformat:"2g" }} €</span>
+				<span class="value num right">{% if trans.value > 0 %}+{% endif %}{{ trans.value|floatformat:"2g" }} €</span>
 				<span class="trader text center">{{ trans.trader|default_if_none:"–" }}</span>
 				<span class="category text center">
 					{% if trans.category %}
@@ -41,6 +41,22 @@
 	</div>
 {% endif %}
 
+{% if snapshots %}
+	<h2>Relevés</h2>
+	<div id="snapshots" class="table col2">
+		<div class="header">
+			<strong class="date center">Date</strong>
+			<strong class="value center">Valeur</strong>
+		</div>
+		{% for snap in snapshots %}
+			<div class="snapshot {% cycle 'w' 'g' %}">
+				<span class="date num center">{{ snap.date|date:"Y-m-d" }}</span>
+				<span class="value num right">{{ snap.value }} €</span>
+			</div>
+		{% endfor %}
+	</div>
+{% endif %}
+
 {% if categories %}
 	<h2>Catégories</h2>
 	<div id="categories">

nummi/main/views.py

@@ -10,17 +10,20 @@ from .models import (
     InvoiceForm,
     Category,
     CategoryForm,
+    Snapshot,
 )
 
 
 @login_required
 def index(request):
-    _transactions = Transaction.objects.order_by("-date")[:5]
+    _transactions = Transaction.objects.all()[:5]
     _categories = Category.objects.all()
+    _snapshots = Snapshot.objects.all()[:5]
 
     context = {
         "transactions": _transactions,
         "categories": _categories,
+        "snapshots": _snapshots,
     }
     return render(request, "main/index.html", context)