[ADD] カテゴリの一覧・作成・修正画面を作成しました。
This commit is contained in:
52
src/main/resources/templates/category-create.html
Normal file
52
src/main/resources/templates/category-create.html
Normal 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>
|
||||||
63
src/main/resources/templates/category-list.html
Normal file
63
src/main/resources/templates/category-list.html
Normal 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>
|
||||||
54
src/main/resources/templates/category-update.html
Normal file
54
src/main/resources/templates/category-update.html
Normal 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>
|
||||||
Reference in New Issue
Block a user