Add expense history to overview page

This commit is contained in:
2019-10-08 22:41:11 +02:00
parent 1fb4c8fc98
commit b81303f20d
20 changed files with 217 additions and 30 deletions

View File

@@ -24,6 +24,7 @@ financer.account-overview.table-header.type=Type
financer.account-overview.table-header.status=Status
financer.account-overview.tooltip.status.current-expenses=Period starting at {0}. Clicking the amount will open a graphical overview about the expenses grouped by account group
financer.account-overview.tooltip.status.current-assets=Assets available at short-notice
financer.account-overview.expense-history.description=Expense history
financer.account-new.title=financer\: create new account
financer.account-new.label.key=Key\:

View File

@@ -22,6 +22,7 @@ financer.account-overview.table-header.type=Typ
financer.account-overview.table-header.status=Status
financer.account-overview.tooltip.status.current-expenses=Periode ab {0}. Durch Klicken des Betrags kann eine grafische \u00DCbersicht über die Ausgaben gruppiert nach Konto-Gruppe angezeigt werden
financer.account-overview.tooltip.status.current-assets=Kurzfristig verf\u00FCgbares Verm\u00F6gen
financer.account-overview.expense-history.description=Ausgabenhistorie
financer.account-new.title=financer\: Neues Konto erstellen
financer.account-new.label.key=Schl\u00FCssel\:

View File

@@ -1,6 +1,7 @@
v23 -> v24:
- Mark accounts that are overspend, meaning their spending in the current period is greater than the average spending of
that account
- Add expense history to overview page
v22 -> v23:
- Make table headers sticky if the table scrolls

View File

@@ -1,3 +1,9 @@
/* Variable declarations */
:root {
--error-color: #D30000/*#ff6666*/;
}
/* --------------------- */
#account-overview-table,
#account-transaction-table,
#recurring-transaction-list-table {
@@ -32,7 +38,7 @@ tr:hover {
}
.overspend {
color: #ff6666;
color: var(--error-color);
}
@media only screen and (max-width: 450px) {
@@ -65,6 +71,19 @@ tr:hover {
#details-container,
#status-container {
margin-bottom: 1em;
padding-inline-end: 1em;
}
#header-container > div {
display: inline-block;
}
#expense-history-container {
float: right;
}
#expense-history-description {
text-align: center;
}
#status-container > span, div {
@@ -118,6 +137,6 @@ input[type=submit] {
}
.errorMessage {
color: #ff6666;
color: var(--error-color);
display: block;
}

View File

@@ -149,7 +149,6 @@
11. Planned features
====================
This chapter lists planned features. The list is in no particular order:
- Budgeting
- Transaction import from online banking (file based)
- Extended reports, e.g. forecasting based on recurring transactions and average spending
- Receivable account type

View File

@@ -9,25 +9,31 @@
<body>
<h1 th:text="#{financer.heading.account-overview}" />
<span class="errorMessage" th:if="${errorMessage != null}" th:text="#{'financer.error-message.' + ${errorMessage}}"/>
<div id="status-container">
<span th:text="#{financer.account-overview.status}"/>
<div th:title="#{financer.account-overview.tooltip.status.current-assets}">
<span th:text="#{financer.account-overview.status.current-assets}"/>
<span th:text="${#numbers.formatDecimal(currentAssets/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}"/>
<div id="header-container">
<div id="status-container">
<span th:text="#{financer.account-overview.status}"/>
<div th:title="#{financer.account-overview.tooltip.status.current-assets}">
<span th:text="#{financer.account-overview.status.current-assets}"/>
<span th:text="${#numbers.formatDecimal(currentAssets/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}"/>
</div>
<div th:title="#{'financer.account-overview.tooltip.status.current-expenses'(${#temporals.format(periodStart)})}">
<span th:text="#{financer.account-overview.status.current-expenses}"/>
<a th:href="@{/getAccountGroupExpensesCurrentPeriod}">
<span th:text="${#numbers.formatDecimal(currentExpenses/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}" />
</a>
</div>
<div>
<span th:text="#{financer.account-overview.status.recurring-transaction-due-today}"/>
<a th:href="@{/recurringTransactionDueToday}" th:text="${rtDueTodayCount}"/>
</div>
<div>
<span th:text="#{financer.account-overview.status.recurring-transaction-active}"/>
<a th:href="@{/recurringTransactionActive}" th:text="${rtAllActiveCount}"/>
</div>
</div>
<div th:title="#{'financer.account-overview.tooltip.status.current-expenses'(${#temporals.format(periodStart)})}">
<span th:text="#{financer.account-overview.status.current-expenses}"/>
<a th:href="@{/getAccountGroupExpensesCurrentPeriod}">
<span th:text="${#numbers.formatDecimal(currentExpenses/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}" />
</a>
</div>
<div>
<span th:text="#{financer.account-overview.status.recurring-transaction-due-today}"/>
<a th:href="@{/recurringTransactionDueToday}" th:text="${rtDueTodayCount}"/>
</div>
<div>
<span th:text="#{financer.account-overview.status.recurring-transaction-active}"/>
<a th:href="@{/recurringTransactionActive}" th:text="${rtAllActiveCount}"/>
<div id="expense-history-container">
<div id="expense-history-description" th:text="#{financer.account-overview.expense-history.description}" />
<img class="picture" th:src="@{'/getExpensesAllPeriodsInline'}" />
</div>
</div>
<span th:text="#{financer.account-overview.available-actions}"/>