diff options
| -rw-r--r-- | assets/main.css | 92 | ||||
| -rw-r--r-- | assets/main.js | 34 | ||||
| -rw-r--r-- | src/db/payments.rs | 5 | ||||
| -rw-r--r-- | templates/balance.html | 2 | ||||
| -rw-r--r-- | templates/base.html | 116 | ||||
| -rw-r--r-- | templates/category/create.html | 44 | ||||
| -rw-r--r-- | templates/category/table.html | 49 | ||||
| -rw-r--r-- | templates/category/update.html | 49 | ||||
| -rw-r--r-- | templates/income/create.html | 96 | ||||
| -rw-r--r-- | templates/income/table.html | 73 | ||||
| -rw-r--r-- | templates/income/update.html | 99 | ||||
| -rw-r--r-- | templates/login.html | 14 | ||||
| -rw-r--r-- | templates/payment/create.html | 93 | ||||
| -rw-r--r-- | templates/payment/table.html | 259 | ||||
| -rw-r--r-- | templates/payment/update.html | 117 | ||||
| -rw-r--r-- | templates/statistics.html | 10 |
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 }} |