[ADD] 目標作成画面の追加及び遷移ボタン追加

src/main/resources/templates/goal_create.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+	<meta charset="UTF-8">
+	<title>目標作成</title>
+	
+	<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="@{/goal/create}" th:object="${goalForm}" method="post">
+		<input type="hidden" th:field="*{goalId}">
+
+		<div>
+			<label>目標名</label>
+			<input type="text" th:field="*{goalTitle}" required>
+		</div>
+
+		<div>
+			<label>目標説明</label>
+			<textarea th:field="*{goalSubtitle}" required></textarea>
+		</div>
+
+		<div>
+			<label>目標金額</label>
+			<input type="number" th:field="*{targetAmount}" required min="1">
+		</div>
+
+		<div>
+			<label>目標達成期限</label>
+			<input type="date" th:field="*{deadline}" th:min="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd')}" required>
+		</div>
+		<button type="submit">更新する</button>
+
+	</form>
+
+	<div th:replace="~{footer :: footer}"></div>
+
+	
+</body>
+</html>

src/main/resources/templates/goal_view.html

@@ -1,48 +1,67 @@
-<!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
-<head>
-	<meta charset="UTF-8">
-	<title>目標詳細</title>
-	
-	<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>
-
-	<table>
-		<tr>
-			<th>目標名</th>
-			<td th:text="${goalForm.goalTitle}"></td>
-		</tr>
-				
-		<tr>
-			<th>目標説明</th>
-			<td th:text="${goalForm.goalSubtitle}"></td>
-		</tr>
-		<tr>
-			<th>目標金額</th>
-			<td th:text="${goalForm.targetAmount}"></td>
-		</tr>
-		<tr>
-			<th>目標達成期限</th>
-			<td th:text="${goalForm.deadline}"></td>
-		</tr>
-		
-		<tr>
-			<th>達成率</th>
-			<td th:text="${goalForm.achievementRate} + '%'"></td>
-		</tr>
-		
-		
-	</table>
-
-	<a th:href="@{/goal/edit}">編集する</a>
-	
-	<div th:replace="~{footer :: footer}"></div>
-	
-</body>
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+	<meta charset="UTF-8">
+	<title>目標詳細</title>
+
+	<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>
+
+	<div>
+		<ul>
+			<li th:each="goalForm : ${goalFormList}" class="transaction-item">
+
+				<div>
+					<p>
+						目標名：
+						<span th:text="${goalForm.goalTitle}"></span>
+						<br>
+						目標説明：
+						<span th:text="${goalForm.goalSubtitle}"></span>
+						<br>
+						目標金額：
+						<span th:text="${goalForm.targetAmount}"></span>
+						<br>
+						目標達成期限：
+						<span th:text="${goalForm.deadline}"></span>
+						<br>
+						達成率：
+						<span th:text="${goalForm.achievementRate} + '%'"></span>
+						<br>
+					</p>
+				</div>
+
+				<div class="transaction-buttons">
+
+					<form th:action="@{/goal/edit}" method="get">
+						<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
+						<button type="submit">編集</button>
+					</form>
+					<form th:action="@{/goal/delete}" method="post">
+						<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
+						<button type="submit">削除</button>
+					</form>
+
+				</div>
+
+			</li>
+		</ul>
+	</div>
+
+	<form th:action="@{/goal/create}" method="get">
+		<button type="submit">新規登録</button>
+	</form>
+
+	<div th:replace="~{footer :: footer}"></div>
+
+</body>
+
 </html>