87 lines
2.3 KiB
HTML
87 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
|
|
<title>分析画面</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<h2 class="text-center">支出分析</h2>
|
|
|
|
<table class="table text-center">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col"></th>
|
|
<th scope="col">支出</th>
|
|
<th scope="col">前月比</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">総支出</th>
|
|
<td th:text="'￥' + ${analysisForm.currentMonthTotalAmount}">
|
|
0
|
|
</td>
|
|
<td th:text="${analysisForm.totalDifferenceAmount >= 0}
|
|
? '+' + ${analysisForm.totalDifferenceAmount}
|
|
: '-' + ${analysisForm.totalDifferenceAmount}"
|
|
th:class="${analysisForm.totalDifferenceAmount >= 0}
|
|
? 'color-danger;'
|
|
: 'color-primary;'">
|
|
0
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<hr class="border border-primary border-2 opacity-50">
|
|
|
|
<table class="table text-center">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">カテゴリ別</th>
|
|
<th scope="col">支出</th>
|
|
<th scope="col">
|
|
前月比
|
|
<br>
|
|
コース比
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr th:each="category : ${analysisForm.categoryAnalysisFormList}">
|
|
|
|
<th scope="row"
|
|
th:text="${category.categoryName}">
|
|
食費
|
|
</th>
|
|
|
|
<td th:text="'￥' + ${category.currentMonthAmount}">
|
|
0
|
|
</td>
|
|
|
|
<td>
|
|
<span th:text="${category.monthDifferenceAmount >= 0}
|
|
? '+' + ${category.monthDifferenceAmount}
|
|
: '-' + ${category.monthDifferenceAmount}"
|
|
th:class="${category.monthDifferenceAmount >= 0}
|
|
? 'color-danger;'
|
|
: 'color-primary;'">
|
|
</span>
|
|
<br>
|
|
<span th:text="${category.courseDifferenceAmount >= 0}
|
|
? '+' + ${category.courseDifferenceAmount}
|
|
: '-' + ${category.courseDifferenceAmount}"
|
|
th:class="${category.courseDifferenceAmount >= 0}
|
|
? 'color-danger;'
|
|
: 'color-primary;'">
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html> |