109 lines
2.8 KiB
HTML
109 lines
2.8 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}">
|
|
</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> |