#10 Create period overview

WIP commit
This commit is contained in:
2021-03-04 18:12:18 +01:00
parent 51d491c5d1
commit 5a13429e9b
18 changed files with 543 additions and 4 deletions

View File

@@ -0,0 +1,47 @@
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{financer.period-overview.title}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}"/>
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}"/>
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="shortcut icon" th:href="@{/favicon.ico}"/>
</head>
<body>
<h1 th:text="#{financer.heading.period-overview}"/>
<span class="errorMessage" th:if="${errorMessage != null}" th:text="#{'financer.error-message.' + ${errorMessage}}"/>
<a th:href="@{/accountOverview}" th:text="#{financer.cancel-back-to-overview}"/>
<table id="period-overview-table">
<tr>
<th th:text="#{financer.period-overview.table-header.id}"/>
<th th:text="#{financer.period-overview.table-header.type}"/>
<th th:text="#{financer.period-overview.table-header.start}"/>
<th th:text="#{financer.period-overview.table-header.end}"/>
<th th:text="#{financer.period-overview.table-header.income}" />
<th th:text="#{financer.period-overview.table-header.expense}"/>
<th th:text="#{financer.period-overview.table-header.liability}"/>
<th th:text="#{financer.period-overview.table-header.total}"/>
<th th:text="#{financer.period-overview.table-header.assets}"/>
<th th:text="#{financer.period-overview.table-header.transactions}"/>
</tr>
<tr th:each="periodOverview : ${periodOverviews}">
<td th:text="${periodOverview.periodId}"/>
<td th:text="#{'financer.period-type.' + ${periodOverview.periodType}}"/>
<td th:text="${#temporals.format(periodOverview.periodStart)}"/>
<td th:text="${#temporals.format(periodOverview.periodEnd)}"/>
<td th:utext="${#numbers.formatDecimal(periodOverview.incomeSum/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}"/>
<td th:utext="${#numbers.formatDecimal(periodOverview.expenseSum/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}"/>
<td th:utext="${#numbers.formatDecimal(periodOverview.liabilitySum/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}"/>
<td th:utext="${#numbers.formatDecimal(periodOverview.total/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}"
th:classappend="${periodOverview.total > periodOverview.incomeSum} ? overspend"/>
<td th:if="${periodOverview.assetsSum != null}"
th:utext="${#numbers.formatDecimal(periodOverview.assetsSum/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}"/>
<td th:if="${periodOverview.assetsSum == null}" />
<td th:text="${periodOverview.transactionCount}"/>
</tr>
</table>
<div th:replace="includes/footer :: footer"/>
</body>
</html>