[ADD] カテゴリの一覧・作成・修正画面を作成しました。

This commit is contained in:
s-choi
2026-09-24 15:34:43 +09:00
parent 3e6a7f5a74
commit 95bfd4ed0e
3 changed files with 169 additions and 0 deletions

View File

@@ -0,0 +1,52 @@
<!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 class="pb-5 pt-5">
<div th:replace="~{header :: header}"></div>
<h1>カテゴリ登録</h1>
<form th:action="@{/category/create}" th:object="${categoryForm}" method="post">
<div>
<label for="categoryName">カテゴリ名</label>
<input type="text" id="categoryName" th:field="*{categoryName}">
</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>
<button type="submit">登録</button>
</form>
<div th:replace="~{footer :: footer}"></div>
</body>
</html>

View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<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 class="pb-5 pt-5">
<div th:replace="~{header :: header}"></div>
<div>
<ul>
<li th:each="categoryForm : ${categoryFormList}" class="transaction-item">
<div>
<p>
カテゴリ名:
<span th:text="${categoryForm.categoryName}"></span>
<br>
収支区分:
<span th:if="${categoryForm.transactionType == 0}" th:text="|支出|"></span>
<span th:if="${categoryForm.transactionType == 1}" th:text="|収入|"></span>
</p>
</div>
<div class="transaction-buttons">
<form th:action="@{/category/delete}" method="post">
<input type="hidden" name="today" th:value="${today}">
<input type="hidden" name="categoryId" th:value="${categoryForm.categoryId}">
<button type="submit">削除</button>
</form>
<form th:action="@{/category/update}" method="get">
<input type="hidden" name="today" th:value="${today}">
<input type="hidden" name="categoryId" th:value="${categoryForm.categoryId}">
<button type="submit">編集</button>
</form>
</div>
<hr>
<hr>
</li>
</ul>
</div>
<form th:action="@{/category/create}" method="get">
<input type="hidden" name="today" id="today" th:value="${today}">
<button type="submit">新規登録</button>
</form>
<div th:replace="~{footer :: footer}"></div>
</body>
</html>

View File

@@ -0,0 +1,54 @@
<!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 class="pb-5 pt-5">
<div th:replace="~{header :: header}"></div>
<h1>カテゴリ編集</h1>
<form th:action="@{/category/update}" th:object="${categoryForm}" method="post">
<div>
<label for="categoryName">カテゴリ名</label>
<input type="text" id="categoryName" th:field="*{categoryName}">
</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>
<input type="hidden" name="categoryId" th:value="${categoryId}">
<button type="submit">登録</button>
</form>
<div th:replace="~{footer :: footer}"></div>
</body>
</html>