aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--assets/main.css92
-rw-r--r--assets/main.js34
-rw-r--r--src/db/payments.rs5
-rw-r--r--templates/balance.html2
-rw-r--r--templates/base.html116
-rw-r--r--templates/category/create.html44
-rw-r--r--templates/category/table.html49
-rw-r--r--templates/category/update.html49
-rw-r--r--templates/income/create.html96
-rw-r--r--templates/income/table.html73
-rw-r--r--templates/income/update.html99
-rw-r--r--templates/login.html14
-rw-r--r--templates/payment/create.html93
-rw-r--r--templates/payment/table.html259
-rw-r--r--templates/payment/update.html117
-rw-r--r--templates/statistics.html10
16 files changed, 597 insertions, 555 deletions
diff --git a/assets/main.css b/assets/main.css
index 4c286da..6a0be98 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -7,6 +7,7 @@
--color-green: #9FD2A5;
--color-blue: #6CA2A4;
--color-gray: #EEEEEE;
+ --color-gray-light: #F8F8F8;
--color-yellow: #FFF09E;
/* Sizes */
@@ -25,9 +26,9 @@
/* Reset */
-html { box-sizing: border-box; }
+html { box-sizing: border-box; height: 100%; }
*, *:before, *:after { box-sizing: inherit; }
-body { margin: 0; }
+body { margin: 0; height: 100%; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
h1 { font-size: inherit; font-weight: normal; margin: 0; }
@@ -62,9 +63,6 @@ body {
.g-Header {
width: 100%;
-}
-
-.g-Header__Primary {
display: flex;
align-items: center;
justify-content: space-between;
@@ -92,37 +90,52 @@ body {
text-decoration: underline;
}
-.g-Header__Secondary {
+.g-Nav {
+ width: 100%;
display: flex;
background-color: var(--color-red);
color: white;
overflow-y: auto;
}
-.g-Header__Link {
+.g-Nav__Link {
padding: var(--size-mouse) var(--size-dog);
}
-.g-Header__Link:hover {
+.g-Nav__Link:hover {
background-color: var(--color-brown);
}
-.g-Header__Link:focus {
+.g-Nav__Link:focus {
background-color: var(--color-brown);
}
-.g-Header__Link--Current {
+.g-Nav__Link--Current {
background-color: var(--color-brown);
}
.g-Main {
display: flex;
+ width: 100%;
+ height: 100%;
+ overflow-x: hidden;
+}
+
+.g-Aside {
+ height: 100%;
+ display: flex;
flex-direction: column;
- align-items: center;
+ background-color: var(--color-gray-light);
+ border-right: 2px solid #DDDDDD;
+ padding: var(--size-horse) var(--size-bear);
+}
+
+.g-Section {
+ display: flex;
width: 100%;
- padding: 0 var(--size-bear);
+ flex-direction: column;
+ align-items: center;
margin: var(--size-horse) 0;
- overflow-x: hidden;
}
.g-Title {
@@ -229,10 +242,11 @@ body {
.g-Form__Label {
margin-bottom: var(--size-mouse);
+ position: relative;
}
.g-Form__Input {
- margin-bottom: var(--size-lion);
+ margin: var(--size-mouse) 0 var(--size-lion);
background-color: white;
border: 1px solid black;
height: var(--size-camel);
@@ -245,7 +259,7 @@ body {
}
.g-Form__Select {
- margin-bottom: var(--size-lion);
+ margin: var(--size-mouse) 0 var(--size-lion);
background-color: white;
border: 1px solid black;
height: var(--size-camel);
@@ -253,6 +267,13 @@ body {
width: 100%;
}
+.g-Form__ResetSelect {
+ cursor: pointer;
+ position: absolute;
+ top: -3px;
+ right: 0;
+}
+
.g-Form__Error {
color: var(--color-red);
text-align: center;
@@ -261,18 +282,6 @@ body {
/* Buttons */
-.g-Button__Search {
- cursor: pointer;
- background-color: var(--color-gray);
- color: white;
- border: none;
- height: var(--size-camel);
- padding: 0 var(--size-dog);
- border-top: 1px solid black;
- border-right: 1px solid black;
- border-bottom: 1px solid black;
-}
-
.g-Button__Validate {
display: flex;
align-items: center;
@@ -338,33 +347,9 @@ body {
}
}
-.g-Payments__FrequenciesAndSearch {
- display: flex;
- align-items: center;
-}
-
-.g-Payments__Search {
- display: flex;
- margin: 0 var(--size-bear) 0 0;
-}
-
-.g-Payments__SearchInput {
- margin-bottom: 0;
- width: 150px;
-}
-
-.g-Payments__Frequencies {
+.g-Payments__Filters {
display: flex;
- margin: 0 var(--size-dog);
-}
-
-.g-Payments__Frequency {
- margin: 0 var(--size-mouse);
-}
-
-.g-Payments__Frequency--Selected {
- color: var(--color-red);
- font-weight: bold;
+ flex-direction: column;
}
@media screen and (max-width: 500px) {
@@ -383,6 +368,7 @@ body {
background-color: var(--color-green);
border-radius: var(--size-bee);
color: white;
+ padding: var(--size-bee);
margin-bottom: var(--size-bear);
text-align: center;
}
diff --git a/assets/main.js b/assets/main.js
index aee4862..3dd4b6e 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -6,6 +6,10 @@ if (path == '/login') {
trim_inputs_on_blur()
+} else if (path == '/') { // Payment table
+
+ allow_select_reset()
+
} else if (path == '/payment') { // Payment creation
trim_inputs_on_blur()
@@ -53,10 +57,34 @@ function trim_inputs_on_blur() {
})
}
+function allow_select_reset() {
+ document.querySelectorAll('select').forEach(select => {
+ const canBeReset = Array.from(select.options).find(option => option.disabled)
+ if (canBeReset) {
+ const button = document.createElement('input')
+ button.type = 'button'
+ button.value = 'Effacer'
+ button.className = 'g-Form__ResetSelect'
+ button.onclick = function() {
+ select.selectedIndex = 0
+ }
+ if (select.selectedIndex === 0) {
+ button.style = 'visibility: hidden'
+ }
+ select.onchange = function() {
+ button.style = 'visibility: visible'
+ }
+ select.parentNode.appendChild(button)
+ }
+ })
+}
+
function control_remove_button() {
- const removeInput = document.getElementById('remove-input')
+ const removeInput = document.getElementsByName('remove-input')[0]
const removeButton = document.getElementById('remove-button')
+ console.log(removeInput, removeButton)
+
if (removeInput && removeButton) {
removeInput.addEventListener('input', () => {
if (removeInput.value.trim() == removeInput.getAttribute('data-name')) {
@@ -69,8 +97,8 @@ function control_remove_button() {
}
function auto_fill_category() {
- const name = document.getElementById('name')
- const category = document.getElementById('category_id')
+ const name = document.getElementsByName('name')[0]
+ const category = document.getElementsByName('category_id')[0]
function onNameChange() {
const query = name.value.trim()
diff --git a/src/db/payments.rs b/src/db/payments.rs
index 624ba9f..3b85dab 100644
--- a/src/db/payments.rs
+++ b/src/db/payments.rs
@@ -133,7 +133,6 @@ OFFSET ?
fn search_query(search: String) -> String {
let payments_name = utils::format_key_for_search("payments.name");
let users_name = utils::format_key_for_search("users.name");
- let categories_name = utils::format_key_for_search("categories.name");
search
.split_ascii_whitespace()
@@ -144,11 +143,10 @@ AND (
{} LIKE ?
OR payments.cost LIKE ?
OR {} LIKE ?
- OR {} LIKE ?
OR strftime('%d/%m/%Y', date) LIKE ?
)
"#,
- payments_name, users_name, categories_name
+ payments_name, users_name
)
})
.collect::<Vec<String>>()
@@ -165,7 +163,6 @@ fn bind_search<'a, Row: FromRow<'a, SqliteRow>>(
.bind(s.clone())
.bind(s.clone())
.bind(s.clone())
- .bind(s.clone())
})
}
diff --git a/templates/balance.html b/templates/balance.html
index 15da854..b97ea40 100644
--- a/templates/balance.html
+++ b/templates/balance.html
@@ -6,7 +6,7 @@
{% block main %}
- <div>
+ <section class="g-Section">
{% if exceeding_payers %}
<ul class="g-Balance__ExceedingPayers">
{% for exceeding_payer in exceeding_payers %}
diff --git a/templates/base.html b/templates/base.html
index a4ebf71..4787ae7 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,74 +8,70 @@
<link rel="icon" href="{{ assets | get(key="icon.png") }}">
<header class="g-Header">
-
- <div class="g-Header__Primary">
- <div class="g-Header__Title">Budget</div>
- {% if connected_user %}
- <form action="/logout" method="POST">
- {{ connected_user.name }}
- <input class="g-Header__Logout" type="submit" value="(Déconnexion)" />
- </form>
- {% endif %}
- </div>
-
+ <div class="g-Header__Title">Budget</div>
{% if connected_user %}
- <div class="g-Header__Secondary">
+ <form action="/logout" method="POST">
+ {{ connected_user.name }}
+ <input class="g-Header__Logout" type="submit" value="(Déconnexion)" />
+ </form>
+ {% endif %}
+</header>
- <a
- href="/"
- class="
- g-Header__Link
- {% if header == "Payments" %} g-Header__Link--Current {% endif %}
- "
- >
- Paiements
- </a>
+{% if connected_user %}
+ <nav class="g-Nav">
- <a
- href="/incomes"
- class="
- g-Header__Link
- {% if header == "Incomes" %} g-Header__Link--Current {% endif %}
- "
- >
- Revenus
- </a>
+ <a
+ href="/"
+ class="
+ g-Nav__Link
+ {% if header == "Payments" %} g-Nav__Link--Current {% endif %}
+ "
+ >
+ Paiements
+ </a>
- <a
- href="/categories"
- class="
- g-Header__Link
- {% if header == "Categories" %} g-Header__Link--Current {% endif %}
- "
- >
- Catégories
- </a>
+ <a
+ href="/incomes"
+ class="
+ g-Nav__Link
+ {% if header == "Incomes" %} g-Nav__Link--Current {% endif %}
+ "
+ >
+ Revenus
+ </a>
- <a
- href="/balance"
- class="
- g-Header__Link
- {% if header == "Balance" %} g-Header__Link--Current {% endif %}
- "
- >
- Équilibre
- </a>
+ <a
+ href="/categories"
+ class="
+ g-Nav__Link
+ {% if header == "Categories" %} g-Nav__Link--Current {% endif %}
+ "
+ >
+ Catégories
+ </a>
- <a
- href="/statistics"
- class="
- g-Header__Link
- {% if header == "Statistics" %} g-Header__Link--Current {% endif %}
- "
- >
- Statistiques
- </a>
+ <a
+ href="/balance"
+ class="
+ g-Nav__Link
+ {% if header == "Balance" %} g-Nav__Link--Current {% endif %}
+ "
+ >
+ Équilibre
+ </a>
- </div>
- {% endif %}
+ <a
+ href="/statistics"
+ class="
+ g-Nav__Link
+ {% if header == "Statistics" %} g-Nav__Link--Current {% endif %}
+ "
+ >
+ Statistiques
+ </a>
-</header>
+ </nav>
+{% endif %}
<main class="g-Main">
{% block main %}{% endblock main %}
diff --git a/templates/category/create.html b/templates/category/create.html
index e206898..af95e16 100644
--- a/templates/category/create.html
+++ b/templates/category/create.html
@@ -6,7 +6,7 @@
{% block main %}
- <div>
+ <section class="g-Section">
<p class="g-Paragraph">
<a class="g-Link g-Media__Large" href="/categories">
Retour aux categories
@@ -22,30 +22,32 @@
<div class="g-Form__Error">{{ error }}</div>
{% endif %}
- <label class="g-Form__Label" for="name">Nom</label>
- <input
- name="name"
- class="g-Form__Input"
- id="name"
- value="{{ form.name | default(value="") }}"
- required
- {% if not form %} autofocus {% endif %}
- />
-
- <label class="g-Form__Label" for="color">Couleur</label>
- <input
- name="color"
- type="color"
- class="g-Form__Input g-Form__InputColor"
- id="color"
- value="{{ form.color | default(value="") }}"
- required
- />
+ <label class="g-Form__Label">
+ Nom
+ <input
+ name="name"
+ class="g-Form__Input"
+ value="{{ form.name | default(value="") }}"
+ required
+ {% if not form %} autofocus {% endif %}
+ />
+ </label>
+
+ <label class="g-Form__Label">
+ Couleur
+ <input
+ name="color"
+ type="color"
+ class="g-Form__Input g-Form__InputColor"
+ value="{{ form.color | default(value="") }}"
+ required
+ />
+ </label>
<div>
<input class="g-Button__Validate" type="submit" value="Créer" />
</div>
</form>
- </div>
+ </section>
{% endblock main %}
diff --git a/templates/category/table.html b/templates/category/table.html
index 896304a..ad42258 100644
--- a/templates/category/table.html
+++ b/templates/category/table.html
@@ -6,33 +6,36 @@
{% block main %}
- <div class="g-Paragraph g-Payments__Header">
- <a class="g-Button__Validate" href="/category">Nouveau</a>
- </div>
+ <section class="g-Section">
- {% if not categories %}
+ {% if not categories %}
+ <div class="g-Payments__NoResults">
+ Il n’y a aucune catégorie.
+ </div>
+ {% endif %}
- <div class="g-Payments__NoResults">
- Il n’y a aucune catégorie.
+ <div class="g-Paragraph">
+ <a class="g-Button__Validate" href="/category">Ajouter une catégorie</a>
</div>
- {% else %}
-
- <div class="g-Table">
- {% for category in categories %}
- <a
- class="g-Table__Row {% if highlight == category.id %} g-Table__Row--Highlight {% endif %}"
- href="/category/{{ category.id }}"
- >
- <span
- class="g-Table__Cell"
- style="color: {{ category.color }}"
+ {% if categories %}
+ <div class="g-Table">
+ {% for category in categories %}
+ <a
+ class="g-Table__Row {% if highlight == category.id %} g-Table__Row--Highlight {% endif %}"
+ href="/category/{{ category.id }}"
>
- {{ category.name }}
- </span>
- </a>
- {% endfor %}
- </div>
+ <span
+ class="g-Table__Cell"
+ style="color: {{ category.color }}"
+ >
+ {{ category.name }}
+ </span>
+ </a>
+ {% endfor %}
+ </div>
+ {% endif %}
+
+ </section>
- {% endif %}
{% endblock main %}
diff --git a/templates/category/update.html b/templates/category/update.html
index a4c1481..48dda06 100644
--- a/templates/category/update.html
+++ b/templates/category/update.html
@@ -6,7 +6,7 @@
{% block main %}
- <div>
+ <section class="g-Section">
<p class="g-Paragraph">
<a class="g-Link g-Media__Large" href="/categories">
Retour aux catégories
@@ -30,24 +30,26 @@
>
<h1 class="g-H1">Modification</h1>
- <label class="g-Form__Label" for="name">Nom</label>
- <input
- name="name"
- class="g-Form__Input"
- id="name"
- value="{{ form.name | default(value=category.name) }}"
- required
- />
-
- <label class="g-Form__Label" for="color">Couleur</label>
- <input
- name="color"
- type="color"
- class="g-Form__Input g-Form__InputColor"
- id="color"
- value="{{ form.color | default(value=category.color) }}"
- required
- />
+ <label class="g-Form__Label">
+ Nom
+ <input
+ name="name"
+ class="g-Form__Input"
+ value="{{ form.name | default(value=category.name) }}"
+ required
+ />
+ </label>
+
+ <label class="g-Form__Label">
+ Couleur
+ <input
+ name="color"
+ type="color"
+ class="g-Form__Input g-Form__InputColor"
+ value="{{ form.color | default(value=category.color) }}"
+ required
+ />
+ </label>
<div>
<input class="g-Button__Validate" type="submit" value="Modifier" />
@@ -67,19 +69,18 @@
utilisée.
</p>
{% else %}
- <label class="g-Form__Label" for="remove-input">
+ <label class="g-Form__Label">
Veuillez recopier le nom de la catégorie : « {{ category.name }} ».
+ <input name="remove-input" class="g-Form__Input" data-name="{{ category.name }}" />
</label>
- <input name="remove-input" class="g-Form__Input" id="remove-input" data-name="{{ category.name }}" />
-
<div>
- <input class="g-Button__Danger" type="submit" value="Supprimer" id="remove-button" disabled />
+ <input id="remove-button" class="g-Button__Danger" type="submit" value="Supprimer" disabled />
</div>
{% endif %}
</form>
{% endif %}
- </div>
+ </section>
{% endblock main %}
diff --git a/templates/income/create.html b/templates/income/create.html
index b74dddd..3c899ca 100644
--- a/templates/income/create.html
+++ b/templates/income/create.html
@@ -6,7 +6,7 @@
{% block main %}
- <div>
+ <section class="g-Section">
<p class="g-Paragraph">
<a
class="g-Link g-Media__Large"
@@ -29,61 +29,67 @@
<div class="g-Form__Error">{{ error }}</div>
{% endif %}
- <label class="g-Form__Label" for="amount">Montant</label>
- <input
- name="amount"
- type="number"
- class="g-Form__Input"
- id="amount"
- value="{{ form.amount | default(value="") }}"
- required
- {% if not form %} autofocus {% endif %}
- />
+ <label class="g-Form__Label">
+ Montant
+ <input
+ name="amount"
+ type="number"
+ class="g-Form__Input"
+ value="{{ form.amount | default(value="") }}"
+ required
+ {% if not form %} autofocus {% endif %}
+ />
+ </label>
{% set user_id = form.user_id | default(value="" ~ connected_user.id) %}
- <label class="g-Form__Label" for="user_id">Personne</label>
- <select name="user_id" id="user_id" class="g-Form__Select" required>
- {% for user in users %}
- <option
- value="{{ user.id }}"
- {% if "" ~ user.id == user_id %} selected {% endif %}
- >
- {{ user.name }}
- </option>
- {% endfor %}
- </select>
+ <label class="g-Form__Label">
+ Personne
+ <select name="user_id" class="g-Form__Select" required>
+ {% for user in users %}
+ <option
+ value="{{ user.id }}"
+ {% if "" ~ user.id == user_id %} selected {% endif %}
+ >
+ {{ user.name }}
+ </option>
+ {% endfor %}
+ </select>
+ </label>
{% set month_index = form.month | default(value="" ~ current_month) %}
- <label class="g-Form__Label" for="month">Mois</label>
- <select name="month" id="month" class="g-Form__Select" required>
- {% for month in months %}
- <option
- value="{{ loop.index }}"
- {% if "" ~ loop.index == month_index %}
- selected
- {% endif %}
- >
- {{ month }}
- </option>
- {% endfor %}
- </select>
+ <label class="g-Form__Label">
+ Mois
+ <select name="month" class="g-Form__Select" required>
+ {% for month in months %}
+ <option
+ value="{{ loop.index }}"
+ {% if "" ~ loop.index == month_index %}
+ selected
+ {% endif %}
+ >
+ {{ month }}
+ </option>
+ {% endfor %}
+ </select>
+ </label>
- <label class="g-Form__Label" for="year">Année</label>
- <input
- name="year"
- type="number"
- class="g-Form__Input"
- id="year"
- value="{{ form.year | default(value=now() | date(format="%Y")) }}"
- required
- />
+ <label class="g-Form__Label">
+ Année
+ <input
+ name="year"
+ type="number"
+ class="g-Form__Input"
+ value="{{ form.year | default(value=now() | date(format="%Y")) }}"
+ required
+ />
+ </label>
<div>
<input class="g-Button__Validate" type="submit" value="Créer" />
</div>
</form>
- </div>
+ </section>
{% endblock main %}
diff --git a/templates/income/table.html b/templates/income/table.html
index efd82a7..60cd6e0 100644
--- a/templates/income/table.html
+++ b/templates/income/table.html
@@ -8,48 +8,49 @@
{% block main %}
- <div class="g-Paragraph g-Payments__Header">
+ <section class="g-Section">
+
+ {% if not incomes %}
+ <div class="g-Table__NoResults">
+ Il n’y a aucun revenu.
+ </div>
+ {% endif %}
+
<a
- class="g-Button__Validate"
+ class="g-Paragraph g-Button__Validate"
href="/income?page={{ page | default(value=1) }}"
>
- Nouveau
+ Ajouter un revenu
</a>
- </div>
- {% if not incomes %}
+ {% if incomes %}
+ <div class="g-Table">
+ <div class="g-Table__Row g-Table__Row--Header">
+ <span class="g-Table__Cell">Montant</span>
+ <span class="g-Table__Cell">Personne</span>
+ <span class="g-Table__Cell">Mois</span>
+ </div>
+ {% for income in incomes %}
+ <a
+ class="g-Table__Row {% if highlight == income.id %} g-Table__Row--Highlight {% endif %}"
+ href="/income/{{ income.id }}?page={{ page | default(value=1) }}"
+ >
+ <span class="g-Table__Cell g-Table__NumericCell">
+ {{ income.amount | euros() }}
+ </span>
+ <span class="g-Table__Cell">{{ income.user }}</span>
+ <span class="g-Table__Cell">{{ income.date }}</span>
+ </a>
+ {% endfor %}
+ </div>
- <div class="g-Payments__NoResults">
- Il n’y a aucun revenu.
- </div>
+ {{ paging::paging(
+ url="/incomes",
+ page=page,
+ max_page=max_page
+ ) }}
+ {% endif %}
- {% else %}
+ </section>
- <div class="g-Table">
- <div class="g-Table__Row g-Table__Row--Header">
- <span class="g-Table__Cell">Montant</span>
- <span class="g-Table__Cell">Personne</span>
- <span class="g-Table__Cell">Mois</span>
- </div>
- {% for income in incomes %}
- <a
- class="g-Table__Row {% if highlight == income.id %} g-Table__Row--Highlight {% endif %}"
- href="/income/{{ income.id }}?page={{ page | default(value=1) }}"
- >
- <span class="g-Table__Cell g-Table__NumericCell">
- {{ income.amount | euros() }}
- </span>
- <span class="g-Table__Cell">{{ income.user }}</span>
- <span class="g-Table__Cell">{{ income.date }}</span>
- </a>
- {% endfor %}
- </div>
-
- {{ paging::paging(
- url="/incomes",
- page=page,
- max_page=max_page
- ) }}
-
- {% endif %}
{% endblock main %}
diff --git a/templates/income/update.html b/templates/income/update.html
index 6dd649a..855d5c4 100644
--- a/templates/income/update.html
+++ b/templates/income/update.html
@@ -6,7 +6,7 @@
{% block main %}
- <div>
+ <section class="g-Section">
<p class="g-Paragraph">
<a
class="g-Link g-Media__Large"
@@ -33,53 +33,59 @@
>
<h1 class="g-H1">Modification</h1>
- <label class="g-Form__Label" for="amount">Montant</label>
- <input
- name="amount"
- type="number"
- class="g-Form__Input"
- id="amount"
- value="{{ form.amount | default(value=income.amount) }}"
- required
- />
+ <label class="g-Form__Label">
+ Montant
+ <input
+ name="amount"
+ type="number"
+ class="g-Form__Input"
+ value="{{ form.amount | default(value=income.amount) }}"
+ required
+ />
+ </label>
{% set user_id = form.user_id | default(value="" ~ income.user_id) %}
- <label class="g-Form__Label" for="user_id">Personne</label>
- <select name="user_id" id="user_id" class="g-Form__Select" required>
- {% for user in users %}
- <option
- value="{{ user.id }}"
- {% if "" ~ user.id == user_id %} selected {% endif %}
- >
- {{ user.name }}
- </option>
- {% endfor %}
- </select>
+ <label class="g-Form__Label">
+ Personne
+ <select name="user_id" class="g-Form__Select" required>
+ {% for user in users %}
+ <option
+ value="{{ user.id }}"
+ {% if "" ~ user.id == user_id %} selected {% endif %}
+ >
+ {{ user.name }}
+ </option>
+ {% endfor %}
+ </select>
+ </label>
{% set month_index = form.month | default(value="" ~ income.month) %}
- <label class="g-Form__Label" for="month">Mois</label>
- <select name="month" id="month" class="g-Form__Select" required>
- {% for month in months %}
- <option
- value="{{ loop.index }}"
- {% if "" ~ loop.index == month_index %} selected {% endif %}
- >
- {{ month }}
- </option>
- {% endfor %}
- </select>
-
- <label class="g-Form__Label" for="year">Année</label>
- <input
- name="year"
- type="number"
- class="g-Form__Input"
- id="year"
- value="{{ form.year | default(value=income.year) }}"
- required
- />
+ <label class="g-Form__Label">
+ Mois
+ <select name="month" class="g-Form__Select" required>
+ {% for month in months %}
+ <option
+ value="{{ loop.index }}"
+ {% if "" ~ loop.index == month_index %} selected {% endif %}
+ >
+ {{ month }}
+ </option>
+ {% endfor %}
+ </select>
+ </label>
+
+ <label class="g-Form__Label">
+ Année
+ <input
+ name="year"
+ type="number"
+ class="g-Form__Input"
+ value="{{ form.year | default(value=income.year) }}"
+ required
+ />
+ </label>
<div>
<input class="g-Button__Validate" type="submit" value="Modifier" />
@@ -99,19 +105,18 @@
utilisée.
</p>
{% else %}
- <label class="g-Form__Label" for="remove-input">
+ <label class="g-Form__Label">
Veuillez recopier le montant du revenu : « {{ income.amount }} ».
+ <input name="remove-input" class="g-Form__Input" data-name="{{ income.amount }}" />
</label>
- <input name="remove-input" class="g-Form__Input" id="remove-input" data-name="{{ income.amount }}" />
-
<div>
- <input class="g-Button__Danger" type="submit" value="Supprimer" id="remove-button" disabled />
+ <input id="remove-button" class="g-Button__Danger" type="submit" value="Supprimer" disabled />
</div>
{% endif %}
</form>
{% endif %}
- </div>
+ </section>
{% endblock main %}
diff --git a/templates/login.html b/templates/login.html
index fd4cfe9..0c2e151 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -13,11 +13,15 @@
<div class="g-Form__Error">{{ error }}</div>
{% endif %}
- <label class="g-Form__Label" for="email">Email</label>
- <input name="email" class="g-Form__Input" id="email" required autofocus />
-
- <label class="g-Form__Label" for="password">Mot de passe</label>
- <input name="password" type="password" class="g-Form__Input" id="password" required />
+ <label class="g-Form__Label">
+ Email
+ <input name="email" class="g-Form__Input" required autofocus />
+ </label>
+
+ <label class="g-Form__Label">
+ Mot de passe
+ <input name="password" type="password" class="g-Form__Input" required />
+ </label>
<div>
<input class="g-Login__Button g-Button__Validate" type="submit" value="Connexion" />
diff --git a/templates/payment/create.html b/templates/payment/create.html
index 5bae767..8defad3 100644
--- a/templates/payment/create.html
+++ b/templates/payment/create.html
@@ -6,7 +6,7 @@
{% block main %}
- <div>
+ <section class="g-Section">
<p class="g-Paragraph">
<a
class="g-Link g-Media__Large"
@@ -34,47 +34,51 @@
<div class="g-Form__Error">{{ error }}</div>
{% endif %}
- <label class="g-Form__Label" for="name">Nom</label>
- <input
- name="name"
- class="g-Form__Input"
- id="name"
- value="{{ form.name | default(value="") }}"
- required
- {% if not form %} autofocus {% endif %}
- />
+ <label class="g-Form__Label">
+ Nom
+ <input
+ name="name"
+ class="g-Form__Input"
+ value="{{ form.name | default(value="") }}"
+ required
+ {% if not form %} autofocus {% endif %}
+ />
+ </label>
- <label class="g-Form__Label" for="cost">Coût</label>
- <input
- name="cost"
- type="number"
- class="g-Form__Input"
- id="cost"
- value="{{ form.cost | default(value="") }}"
- required
- />
+ <label class="g-Form__Label">
+ Coût
+ <input
+ name="cost"
+ type="number"
+ class="g-Form__Input"
+ value="{{ form.cost | default(value="") }}"
+ required
+ />
+ </label>
{% set user_id = form.user_id | default(value="" ~ connected_user.id) %}
- <label class="g-Form__Label" for="user_id">Personne</label>
- <select name="user_id" id="user_id" class="g-Form__Select" required>
- {% for user in users %}
- <option
- value="{{ user.id }}"
- {% if "" ~ user.id == user_id %}
- selected
- {% endif %}
- >
- {{ user.name }}
- </option>
- {% endfor %}
- </select>
+ <label class="g-Form__Label">
+ Personne
+ <select name="user_id" class="g-Form__Select" required>
+ {% for user in users %}
+ <option
+ value="{{ user.id }}"
+ {% if "" ~ user.id == user_id %}
+ selected
+ {% endif %}
+ >
+ {{ user.name }}
+ </option>
+ {% endfor %}
+ </select>
+ </label>
{% set category_id = form.category_id | default(value="") %}
- <label class="g-Form__Label" for="category_id">
+ <label class="g-Form__Label">
Catégorie
- <select name="category_id" id="category_id" class="g-Form__Select" required>
+ <select name="category_id" class="g-Form__Select" required>
{% for category in categories %}
<option
value="{{ category.id }}"
@@ -90,15 +94,16 @@
{% set date = form.date | default(value=now() | date(format="%Y-%m-%d")) %}
{% if query.frequency != "Monthly" %}
- <label class="g-Form__Label" for="date">Date</label>
- <input
- name="date"
- type="date"
- class="g-Form__Input"
- id="date"
- value="{{ date }}"
- required
- />
+ <label class="g-Form__Label">
+ Date
+ <input
+ name="date"
+ type="date"
+ class="g-Form__Input"
+ value="{{ date }}"
+ required
+ />
+ </label>
{% else %}
<input
name="date"
@@ -117,6 +122,6 @@
<input class="g-Button__Validate" type="submit" value="Créer" />
</div>
</form>
- </div>
+ </section>
{% endblock main %}
diff --git a/templates/payment/table.html b/templates/payment/table.html
index 5234e05..da15b22 100644
--- a/templates/payment/table.html
+++ b/templates/payment/table.html
@@ -8,139 +8,138 @@
{% block main %}
- <div class="g-Paragraph g-Payments__Header">
- <div class="g-Payments__FrequenciesAndSearch">
- <div class="g-Payments__Frequencies">
- {% if query.frequency == "Monthly" %}
- <a
- class="g-Payments__Frequency g-Link"
- href="/{{ payments_params(frequency="Punctual") }}"
- >
- Ponctuels
- </a>
- /
- <span class="g-Payments__Frequency g-Payments__Frequency--Selected">
- Mensuels
- </span>
- {% else %}
- <span class="g-Payments__Frequency g-Payments__Frequency--Selected">
- Ponctuels
- </span>
- /
- <a
- class="g-Payments__Frequency g-Link"
- href="/{{ payments_params(frequency="Monthly") }}"
- >
- Mensuels
- </a>
- {% endif %}
+ <aside class="g-Aside">
+ <form action="/" method="GET" class="g-Payments__Filters">
+ <label class="g-Form__Label">
+ Fréquence
+ <select name="frequency" class="g-Form__Select">
+ <option value="Punctual" {% if query.frequency == "Punctual" %} selected {% endif %}>
+ Ponctuelle
+ </option>
+ <option value="Monthly" {% if query.frequency == "Monthly" %} selected {% endif %}>
+ Mensuelle
+ </option>
+ </select>
+ </label>
+
+ <label class="g-Form__Label">
+ Recherche
+ <input
+ type="search"
+ name="search"
+ class="g-Form__Input"
+ value="{{ query.search }}"
+ />
+ </label>
+
+ <label class="g-Form__Label">
+ Catégorie
+ <select name="category" class="g-Form__Select">
+ <option selected disabled hidden></option>
+ {% for category in categories %}
+ <option
+ value="{{ category.id }}"
+ style="color: {{ category.color }}"
+ {% if category.id == query.category %} selected {% endif %}
+ >
+ {{ category.name }}
+ </option>
+ {% endfor %}
+ </select>
+ </label>
+
+ <input type="submit" class="g-Button__Validate" value="Rechercher">
+ </form>
+ </aside>
+
+ <section class="g-Section">
+ {% if not payments %}
+
+ <div class="g-Payments__NoResults">
+ Aucun paiement ne correspond à votre recherche.
</div>
- {% if query.frequency != "Monthly" %}
- <form action="/" method="GET" class="g-Payments__Search">
- <input
- type="search"
- name="search"
- class="g-Form__Input g-Payments__SearchInput"
- value="{{ query.search }}"
- />
-
- <label class="g-Form__Label">
- Catégorie
- <select name="category" class="g-Form__Select">
- <option disabled selected value></option>
- {% for category in categories %}
- <option
- value="{{ category.id }}"
- style="color: {{ category.color }}"
- {% if category.id == query.category %} selected {% endif %}
- >
- {{ category.name }}
- </option>
- {% endfor %}
- </select>
- </label>
-
- <input type="submit" class="g-Button__Search" value="🔍">
- </form>
- {% endif %}
- </div>
-
- <a
- class="g-Button__Validate g-Payments__New"
- href="/payment{{ payments_params(
- page=query.page,
- search=query.search,
- frequency=query.frequency
- ) }}"
- >
- Nouveau
- </a>
- </div>
-
- {% if not payments %}
-
- <div class="g-Payments__NoResults">
- Aucun paiement ne correspond à votre recherche.
- </div>
-
- {% else %}
-
- <div class="g-Paragraph">
- {{ count | numeric }} paiement{{ count | pluralize }} comptabilisant {{ total_cost | euros() }}.
- </div>
-
- <div class="g-Table">
- <div class="g-Table__Row g-Table__Row--Header">
- <span class="g-Table__Cell">Nom</span>
- <span class="g-Table__Cell">Coût</span>
- <span class="g-Table__Cell">Personne</span>
- <span class="g-Media__Large g-Table__Cell">Catégorie</span>
- {% if query.frequency != "Monthly" %}
- <span class="g-Table__Cell">Date</span>
- {% endif %}
+ <a
+ class="g-Button__Validate g-Payments__New"
+ href="/payment{{ payments_params(
+ page=query.page,
+ search=query.search,
+ frequency=query.frequency
+ ) }}"
+ >
+ Nouveau
+ </a>
+
+ {% else %}
+
+ <div class="g-Paragraph">
+ {{ count | numeric }} paiement{{ count | pluralize }} comptabilisant {{ total_cost | euros() }}.
</div>
- {% for payment in payments %}
- <a
- class="g-Table__Row {% if query.highlight == payment.id %} g-Table__Row--Highlight {% endif %}"
- href="/payment/{{ payment.id }}{{ payments_params(
- page=query.page,
- search=query.search,
- frequency=query.frequency
- ) }}"
- >
- <span class="g-Table__Cell">{{ payment.name }}</span>
- <span class="
- g-Table__Cell
- g-Table__NumericCell
- {% if payment.cost < 0 %} g-Payments__Refund {% endif %}
- ">
- {{ payment.cost | euros() }}
- </span>
- <span class="g-Table__Cell">{{ payment.user }}</span>
- <span class="g-Table__Cell g-Media__Large">
- <span style="color: {{ payment.category_color }}">
- {{ payment.category_name }}
- </span>
- </span>
+
+ <a
+ class="g-Paragraph g-Button__Validate g-Payments__New"
+ href="/payment{{ payments_params(
+ page=query.page,
+ search=query.search,
+ frequency=query.frequency
+ ) }}"
+ >
+ Ajouter un paiement
+ </a>
+
+ <div class="g-Table">
+ <div class="g-Table__Row g-Table__Row--Header">
+ <span class="g-Table__Cell">Nom</span>
+ <span class="g-Table__Cell">Coût</span>
+ <span class="g-Table__Cell">Personne</span>
+ <span class="g-Media__Large g-Table__Cell">Catégorie</span>
{% if query.frequency != "Monthly" %}
- <span class="g-Table__Cell">
- {{ payment.date }}
- </span>
+ <span class="g-Table__Cell">Date</span>
{% endif %}
- </a>
- {% endfor %}
- </div>
-
- {{ paging::paging(
- url="/" ~ payments_params(
- search=query.search,
- frequency=query.frequency,
- category=query.category
- ),
- page=page,
- max_page=max_page
- ) }}
-
- {% endif %}
+ </div>
+ {% for payment in payments %}
+ <a
+ class="g-Table__Row {% if query.highlight == payment.id %} g-Table__Row--Highlight {% endif %}"
+ href="/payment/{{ payment.id }}{{ payments_params(
+ page=query.page,
+ search=query.search,
+ frequency=query.frequency
+ ) }}"
+ >
+ <span class="g-Table__Cell">{{ payment.name }}</span>
+ <span class="
+ g-Table__Cell
+ g-Table__NumericCell
+ {% if payment.cost < 0 %} g-Payments__Refund {% endif %}
+ ">
+ {{ payment.cost | euros() }}
+ </span>
+ <span class="g-Table__Cell">{{ payment.user }}</span>
+ <span class="g-Table__Cell g-Media__Large">
+ <span style="color: {{ payment.category_color }}">
+ {{ payment.category_name }}
+ </span>
+ </span>
+ {% if query.frequency != "Monthly" %}
+ <span class="g-Table__Cell">
+ {{ payment.date }}
+ </span>
+ {% endif %}
+ </a>
+ {% endfor %}
+ </div>
+
+ {{ paging::paging(
+ url="/" ~ payments_params(
+ search=query.search,
+ frequency=query.frequency,
+ category=query.category
+ ),
+ page=page,
+ max_page=max_page
+ ) }}
+
+ {% endif %}
+ </section>
+
{% endblock main %}
diff --git a/templates/payment/update.html b/templates/payment/update.html
index 25e6915..4e244f4 100644
--- a/templates/payment/update.html
+++ b/templates/payment/update.html
@@ -6,7 +6,7 @@
{% block main %}
- <div>
+ <section class="g-Section">
<p class="g-Paragraph">
<a
class="g-Link g-Media__Large"
@@ -42,66 +42,73 @@
>
<h1 class="g-H1">Modification</h1>
- <label class="g-Form__Label" for="name">Nom</label>
- <input
- name="name"
- class="g-Form__Input"
- id="name"
- value="{{ form.name | default(value=payment.name) }}"
- required
- />
-
- <label class="g-Form__Label" for="cost">Coût</label>
- <input
- name="cost"
- type="number"
- class="g-Form__Input"
- id="cost"
- value="{{ form.cost | default(value=payment.cost) }}"
- required
- />
+ <label class="g-Form__Label">
+ Nom
+ <input
+ name="name"
+ class="g-Form__Input"
+ value="{{ form.name | default(value=payment.name) }}"
+ required
+ />
+ </label>
+
+ <label class="g-Form__Label">
+ Coût
+ <input
+ name="cost"
+ type="number"
+ class="g-Form__Input"
+ value="{{ form.cost | default(value=payment.cost) }}"
+ required
+ />
+ </label>
{% set user_id = form.user_id | default(value="" ~ payment.user_id) %}
- <label class="g-Form__Label" for="user_id">Personne</label>
- <select name="user_id" id="user_id" class="g-Form__Select" required>
- {% for user in users %}
- <option
- value="{{ user.id }}"
- {% if "" ~ user.id == user_id %} selected {% endif %}
- >
- {{ user.name }}
- </option>
- {% endfor %}
- </select>
+ <label class="g-Form__Label">
+ Personne
+ <select name="user_id" class="g-Form__Select" required>
+ {% for user in users %}
+ <option
+ value="{{ user.id }}"
+ {% if "" ~ user.id == user_id %} selected {% endif %}
+ >
+ {{ user.name }}
+ </option>
+ {% endfor %}
+ </select>
+ </label>
{% set category_id = form.category_id | default(value="" ~ payment.category_id) %}
- <label class="g-Form__Label" for="category_id">Catégorie</label>
- <select name="category_id" id="category_id" class="g-Form__Select" required>
- {% for category in categories %}
- <option
- value="{{ category.id }}"
- style="color: {{ category.color }}"
- {% if "" ~ category.id == category_id %} selected {% endif %}
- >
- {{ category.name }}
- </option>
- {% endfor %}
- </select>
+ <label class="g-Form__Label">
+ Catégorie
+ <select name="category_id" class="g-Form__Select" required>
+ {% for category in categories %}
+ <option
+ value="{{ category.id }}"
+ style="color: {{ category.color }}"
+ {% if "" ~ category.id == category_id %} selected {% endif %}
+ >
+ {{ category.name }}
+ </option>
+ {% endfor %}
+ </select>
+ </label>
{% set date = form.date | default(value=payment.date) %}
{% if payment.frequency == "Punctual" %}
- <label class="g-Form__Label" for="date">Date</label>
- <input
- name="date"
- type="date"
- class="g-Form__Input"
- id="date"
- value="{{ date }}"
- required
- />
+ <label class="g-Form__Label">
+ Date
+ <input
+ name="date"
+ type="date"
+ class="g-Form__Input"
+ value="{{ date }}"
+ required
+ />
+ </label>
{% else %}
<input
name="date"
@@ -127,18 +134,18 @@
>
<h1 class="g-H1">Suppression</h1>
- <label class="g-Form__Label" for="remove-input">
+ <label class="g-Form__Label">
Veuillez recopier le nom du paiement : « {{ payment.name }} ».
+ <input name="remove-input" class="g-Form__Input" data-name="{{ payment.name }}" />
</label>
- <input name="remove-input" class="g-Form__Input" id="remove-input" data-name="{{ payment.name }}" />
<div>
- <input class="g-Button__Danger" type="submit" value="Supprimer" id="remove-button" disabled />
+ <input id="remove-button"class="g-Button__Danger" type="submit" value="Supprimer" disabled />
</div>
</form>
{% endif %}
- </div>
+ </section>
{% endblock main %}
diff --git a/templates/statistics.html b/templates/statistics.html
index badbc6d..21e8fcd 100644
--- a/templates/statistics.html
+++ b/templates/statistics.html
@@ -6,10 +6,12 @@
{% block main %}
- <div class="g-Chart">
- <canvas id="g-Chart__Canvas">
- </canvas>
- </div>
+ <section class="g-Section">
+ <div class="g-Chart">
+ <canvas id="g-Chart__Canvas">
+ </canvas>
+ </div>
+ </section>
<div id="categories" hidden>
{{ json_categories }}