60 lines
3.7 KiB
HTML
60 lines
3.7 KiB
HTML
<!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}"/>
|
|
<th th:text="#{financer.period-overview.table-header.actions}"/>
|
|
</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}">
|
|
<div id="period-overview-asset-container">
|
|
<span th:utext="${#numbers.formatDecimal(periodOverview.assetsSum/100D, 1, 'DEFAULT', 2, 'DEFAULT') + currencySymbol}"/>
|
|
<span th:if="${periodOverview.assetTrend == T(de.financer.dto.AssetTrend).UP}" class="icon color-good"></span>
|
|
<span th:if="${periodOverview.assetTrend == T(de.financer.dto.AssetTrend).DOWN}" class="icon color-bad"></span>
|
|
<span th:if="${periodOverview.assetTrend == T(de.financer.dto.AssetTrend).EQUAL}" class="icon color-neutral"></span>
|
|
</div>
|
|
</td>
|
|
<td th:if="${periodOverview.assetsSum == null}" />
|
|
<td th:text="${periodOverview.transactionCount}"/>
|
|
<td nowrap>
|
|
<div id="period-overview-actions-container">
|
|
<a th:href="@{/showTransactions(periodId=${periodOverview.periodId})}"
|
|
th:text="#{financer.period-overview.table.actions.showTransactions}" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div th:replace="includes/footer :: footer"/>
|
|
</body>
|
|
</html> |