167 lines
3.7 KiB
HTML
167 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Calendar</title>
|
|
|
|
<link rel="stylesheet" th:href="@{/css/style.css}">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div th:replace="~{header :: header}"></div>
|
|
|
|
|
|
<div class="calendar-title">
|
|
|
|
<a class="month-button" th:href="@{/menu(years=${previousYear}, months=${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="@{/menu(years=${nextYear}, months=${nextMonth})}">
|
|
→
|
|
</a>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<table id="calendar">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
<th class="holiday">日</th>
|
|
<th>月</th>
|
|
<th>火</th>
|
|
<th>水</th>
|
|
<th>木</th>
|
|
<th>金</th>
|
|
<th>土</th>
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
|
|
<tbody>
|
|
|
|
<tr th:each="week : ${#numbers.sequence(0, 5)}">
|
|
|
|
<td th:each="weekDay : ${#numbers.sequence(0, 6)}">
|
|
|
|
<a th:if="${week * 7 + weekDay - firstDayOfWeek + 1 >= 1
|
|
and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}" th:href="@{/transaction/detail(
|
|
todayDates=${T(java.time.LocalDate).of(year, month, week * 7 + weekDay - firstDayOfWeek + 1)}
|
|
)}">
|
|
|
|
|
|
<div
|
|
th:if="${week * 7 + weekDay - firstDayOfWeek + 1 >= 1 and week * 7 + weekDay - firstDayOfWeek + 1 <= lastDay}">
|
|
|
|
<div class="date" th:text="${week * 7 + weekDay - firstDayOfWeek + 1}">
|
|
</div>
|
|
|
|
<div th:each="income : ${incomeList}"
|
|
th:if="${income.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}"
|
|
class="income" th:text="|収入 +${income.amount}円|">
|
|
</div>
|
|
|
|
<div th:each="expense : ${expenseList}"
|
|
th:if="${expense.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}"
|
|
class="expense" th:text="|支出 -${expense.amount}円|">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
|
|
<div class="card shadow-sm mb-3">
|
|
|
|
<div class="card-body">
|
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>収入</span>
|
|
<span th:text="'￥' + ${totalIncome}"></span>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<span>支出</span>
|
|
<span th:text="'￥' + ${totalExpense}"></span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr class="border border-primary border-2 opacity-50">
|
|
|
|
<div class="card shadow-sm mb-3">
|
|
|
|
<div class="card-body">
|
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>目標資金</span>
|
|
<span th:text="'￥' + ${targetAmount}"></span>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>現在高</span>
|
|
<span th:text="'￥' + ${currentAmount}"></span>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<span>貯金額</span>
|
|
<span th:text="'￥' + ${saving}"></span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card shadow-sm">
|
|
|
|
<div class="card-body">
|
|
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>達成率</span>
|
|
<span th:text="${achievementRate} + '%'"
|
|
class="badge bg-success">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<span>達成期限</span>
|
|
<span th:text="${deadline}"></span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div th:replace="~{footer :: footer}"></div>
|
|
|
|
</body>
|
|
|
|
</html> |