111 lines
2.9 KiB
HTML
111 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns:th="http://www.thymeleaf.org">
|
||
<head>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
|
||
<title>分析画面</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" th:href="@{/css/style.css}">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div th:replace="~{header :: header}">
|
||
</div>
|
||
|
||
<div class="main-container">
|
||
<h2 class="page-title">支出分析</h2>
|
||
|
||
<div class="calendar-title">
|
||
|
||
<a class="month-button" th:href="@{/analysis(year=${previousYear}, month=${previousMonth})}">
|
||
←
|
||
</a>
|
||
|
||
<div class="calendar-date">
|
||
<span class="year" th:text="|${year}年|"></span>
|
||
<span class="month" th:text="|${month}月|"></span>
|
||
</div>
|
||
|
||
<a class="month-button" th:href="@{/analysis(year=${nextYear}, month=${nextMonth})}">
|
||
→
|
||
</a>
|
||
|
||
</div>
|
||
|
||
<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}
|
||
? 'text-danger'
|
||
: 'text-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}
|
||
? 'text-danger'
|
||
: 'text-primary'">
|
||
</span>
|
||
<br>
|
||
<span th:text="${category.courseDifferenceAmount >= 0}
|
||
? '＋' + ${category.courseDifferenceAmount}
|
||
: ${category.courseDifferenceAmount}"
|
||
th:class="${category.courseDifferenceAmount >= 0}
|
||
? 'text-danger'
|
||
: 'text-primary'">
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
</div>
|
||
|
||
<div th:replace="~{footer :: footer}">
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>
|
||
</body>
|
||
</html> |