83 lines
2.3 KiB
HTML
83 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> |