2026_09_5H_Spring_KIZAKI/Monegement
16
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[EDIT] 月転換機能を追加しました。現在セッションユーザーの目標に関する情報をメニューで取得するように変更しました。

Browse Source
This commit is contained in:
s-choi
2026-09-18 15:05:11 +09:00
parent 11fbec6d8c
commit 3378f81a2d
3 changed files with 146 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/main/resources/static/css/menu.css
View File

@@ -42,6 +42,22 @@ td:hover {
background-color: bisque;
}
.calendar-title {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin: 15px 10px;
}
.calendar-date {
display: flex;
align-items: baseline;
gap: 10px;
}
.year {
font-size: 20px;
}
@@ -51,8 +67,23 @@ td:hover {
font-weight: bold;
}
.calendar-title {
margin: 15px 10px;
.month-button {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
font-size: 28px;
text-decoration: none;
color: #333;
border-radius: 50%;
}
.month-button:hover {
background-color: #eee;
}
.date {

56
src/main/resources/templates/menu.html
View File

@@ -14,22 +14,30 @@
</head>
<body>
<body class="pb-5 pt-5">
<div th:replace="~{header :: header}"></div>
<div class="calendar-title">
<span class="year" th:text="|${year}年|">
</span>
<a class="month-button" th:href="@{/menu(years=${previousYear}, months=${previousMonth})}">
←
</a>
<span class="month" th:text="|${month}月|">
</span>
<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>
@@ -54,21 +62,25 @@
<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(
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
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 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 th:each="expense : ${expenseList}"
th:if="${expense.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}"
class="expense" th:text="|支出 -${expense.amount}円|">
</div>
</div>
@@ -101,6 +113,30 @@
</div>
<div>
<span>目標貯金</span>
<span th:text="${targetAmount}"></span>
<span>円</span>
</div>
<div>
<span>貯金額</span>
<span th:text="${saving}"></span>
<span>円</span>
</div>
<hr>
<div>
<span>達成率</span>
<span th:text="${achievementRate}"></span>
<span>円</span>
</div>
<div>
<span>達成期限</span>
<span th:text="${deadline}"></span>
<span>円</span>
</div>
<div th:replace="~{footer :: footer}"></div>
</body>