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

Merge branch 's-choi' of https://gitea.it-college.co.jp/2026_09_5H_Spring_KIZAKI/Monegement into n-kawahito

Browse Source
This commit is contained in:
[IIJ] Naoki Kawahito
2026-09-18 13:59:17 +09:00
parent 6b4ae5bd96 b49c9156a1
commit 18faec044e
14 changed files with 440 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,80 @@
table, th, td {border: 1px solid black; border-collapse: collapse;}
body {
margin: 0;
padding: 0;
}
td:hover{background-color: lightblue;}
#calendar {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
th{font-weight: bold; height: 50px;}
#calendar th,
#calendar td {
border: 1px solid black;
}
td{text-align: left; vertical-align: text-top; width: 200px; height: 100px; padding: 10px}
th {
font-weight: bold;
height: 35px;
font-size: 13px;
text-align: center;
}
.holiday{color: red;}
td {
width: 14.28%;
height: 70px;
padding: 5px;
text-align: left;
vertical-align: top;
}
#today{font-weight: bold; background-color: bisque;}
td:hover {
background-color: lightblue;
}
.year{font-size: 30px;}
.holiday {
color: red;
}
.month{font-size: 50px; font-weight: bold;}
#today {
font-weight: bold;
background-color: bisque;
}
.year {
font-size: 20px;
}
.month {
font-size: 30px;
font-weight: bold;
}
.calendar-title {
margin: 15px 10px;
}
.date {
font-size: 13px;
font-weight: bold;
}
.income {
color: blue;
font-size: 10px;
}
.expense {
color: red;
font-size: 10px;
}
.total {
margin: 15px 10px;
padding: 10px;
border-top: 1px solid #ddd;
font-size: 16px;
text-align: right;
}

15
src/main/resources/static/css/transaction_detail.css Normal file
View File

@@ -0,0 +1,15 @@
.transaction-item {
display: flex;
align-items: center;
justify-content: space-between;
}
.transaction-buttons {
display: flex;
gap: 10px;
margin-right: 20px;
}
.transaction-buttons form {
margin: 0;
}

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

@@ -2,71 +2,106 @@
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Calendar</title>
<link rel="stylesheet" th:href="@{/css/menu.css}">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calendar</title>
<link rel="stylesheet" th:href="@{/css/menu.css}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<span class="year" th:text="|${year}年|"></span>
<span class="month" th:text="|${month}月|"></span>
<div th:replace="~{header :: header}"></div>
<table id="calendar">
<thead>
<tr>
<th class="holiday">日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</thead>
<div class="calendar-title">
<tbody>
<span class="year" th:text="|${year}年|">
</span>
<tr th:each="week : ${#numbers.sequence(0, 5)}">
<span class="month" th:text="|${month}月|">
</span>
<td th:each="weekDay : ${#numbers.sequence(0, 6)}">
</div>
<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>
<table id="calendar">
<div th:each="income : ${incomeList}"
th:if="${income.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}"
class="income"
th:text="|収入 +${income.amount}円|"
style="color: blue;">
</div>
<thead>
<div th:each="expense : ${expenseList}"
th:if="${expense.date.dayOfMonth == week * 7 + weekDay - firstDayOfWeek + 1}"
class="expense"
th:text="|支出 -${expense.amount}円|"
style="color: red;">
</div>
<tr>
<th class="holiday">日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</div>
</thead>
</td>
</tr>
<tbody>
</tbody>
</table>
<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="total">
<div>
<span>収入：</span>
<span th:text="${totalIncome}"></span>
<span>円</span>
</div>
<div>
<span>支出：</span>
<span th:text="${totalExpense}"></span>
<span>円</span>
</div>
</div>
<div>
<h2>
<span th:text="|収入：${totalIncome}|"></span>
<span th:text="|支出：${totalExpense}|"></span>
</h2>
</div>
</body>
</html>
</html>

8
src/main/resources/templates/transaction_create.html
View File

@@ -4,16 +4,22 @@
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" th:href="@{/css/menu.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>
<h1>取引登録</h1>
<form th:action="@{/transaction/create}" th:object="${transactionForm}" method="post">
<div>
<label for="transactionDate">日付</label>
<input type="date" id="transactionDate" th:field="*{transactionDate}">
<input type="date" id="transactionDate" name="transactionDate" th:value="*{transactionDate}">
</div>
<br>

46
src/main/resources/templates/transaction_detail.html
View File

@@ -4,32 +4,56 @@
<head>
<meta charset="UTF-8">
<title>収支詳細</title>
<link rel="stylesheet" th:href="@{/css/transaction_detail.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>
<h1 th:text="${today}"></h1>
<div>
<ul>
<li th:each="transactionForm : ${transactionFormList}">
<p>カテゴリ名：<span th:text="${transactionForm.categoryName}"></span>
<br>金額：<span th:text="${transactionForm.amount}"></span>
</p>
<form th:action="@{/transaction/delete}" method="post">
<input type="hidden" name="today" id="today" th:value="${today}">
<input type="hidden" name="transactionId" id="transactionId" value="${transactionForm.transactionId}">
<li th:each="transactionForm : ${transactionFormList}" class="transaction-item">
<button type="submit">削除</button>
</form>
<hr />
<div>
<p>
カテゴリ名：
<span th:text="${transactionForm.categoryName}"></span>
<br>
金額：
<span th:text="${transactionForm.amount}"></span>
</p>
</div>
<div class="transaction-buttons">
<form th:action="@{/transaction/delete}" method="post">
<input type="hidden" name="today" th:value="${today}">
<input type="hidden" name="transactionId" th:value="${transactionForm.transactionId}">
<button type="submit">削除</button>
</form>
<form th:action="@{/transaction/update}" method="get">
<input type="hidden" name="today" th:value="${today}">
<input type="hidden" name="transactionId" th:value="${transactionForm.transactionId}">
<button type="submit">編集</button>
</form>
</div>
<hr>
<hr>
</li>
</ul>
</div>
<form th:action="@{/transaction/create}" method="get">
<input type="hidden" name="today" id="today" th:value="${today}">
<button type="submit">新規登録</button>
</form>

5
src/main/resources/templates/transaction_list.html
View File

@@ -4,10 +4,15 @@
<head>
<meta charset="UTF-8">
<title>一覧</title>
<link rel="stylesheet" th:href="@{/css/menu.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 th:each="transactionForm : ${transactionFormMap}">
<a th:href="@{/transaction/detail(todayDates=${transactionForm.key})}">

76
src/main/resources/templates/transaction_update.html Normal file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" th:href="@{/css/menu.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>
<h1>取引登録</h1>
<form th:action="@{/transaction/update}" th:object="${transactionForm}" method="post">
<input type="hidden" name="transactionId" th:value="${transactionId}">
<div>
<label for="transactionDate">日付</label>
<input type="date" id="transactionDate" name="transactionDate" th:value="*{transactionDate}">
</div>
<br>
<div>
<label for="transactionType">収入・支出</label>
<select id="transactionType" th:field="*{transactionType}">
<option value="">選択してください</option>
<option value="0">支出</option>
<option value="1">収入</option>
</select>
</div>
<br>
<div>
<label for="categoryId">カテゴリ</label>
<select id="categoryId" th:field="*{categoryId}">
<option value="">選択してください</option>
<option th:each="category : ${categoryFormList}" th:value="${category.categoryId}"
th:text="${category.categoryName}">
</option>
</select>
</div>
<br>
<div>
<label for="amount">金額</label>
<input type="number" id="amount" th:field="*{amount}" min="0" placeholder="金額を入力してください">
</div>
<br>
<input type="hidden" name="today" id="today" th:value="${today}">
<button type="submit">登録</button>
</form>
</body>
</html>