From 060102d2b164ba9d6c2a6c55197ce062c43ad847 Mon Sep 17 00:00:00 2001
From: s-choi <choi-suyeong@iij.ad.jp>
Date: Thu, 24 Sep 2026 12:42:22 +0900
Subject: [PATCH] =?UTF-8?q?[ADD]=20=E5=9B=BA=E5=AE=9A=E8=B2=BB=E7=99=BB?=
 =?UTF-8?q?=E9=8C=B2=E7=94=BB=E9=9D=A2=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=97?=
 =?UTF-8?q?=E3=81=BE=E3=81=97=E3=81=9F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/fixed_cost_create.html          | 129 ++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 src/main/resources/templates/fixed_cost_create.html

diff --git a/src/main/resources/templates/fixed_cost_create.html b/src/main/resources/templates/fixed_cost_create.html
new file mode 100644
index 0000000..03e780b
--- /dev/null
+++ b/src/main/resources/templates/fixed_cost_create.html
@@ -0,0 +1,129 @@
+<!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="@{/fixed-cost/create}" th:object="${fixedCostForm}" method="post">
+
+
+		<div>
+			<label for="fixedCostName">固定費名</label>
+
+			<input type="text" id="fixedCostName" th:field="*{fixedCostName}" required>
+		</div>
+
+		<br>
+
+
+
+		<div>
+			<label for="transactionType">収入・支出</label>
+
+			<select id="transactionType">
+
+				<option value="">選択してください</option>
+				<option value="1">支出</option>
+				<option value="2">収入</option>
+
+			</select>
+		</div>
+
+		<br>
+
+		<div>
+			<label for="categoryId">カテゴリ</label>
+
+			<select id="categoryId" th:field="*{categoryId}">
+				<option value="">選択してください</option>
+
+				<option class="expenseListClass" th:each="category : ${expenseList}" th:value="${category.categoryId}"
+					th:text="${category.categoryName}">
+				</option>
+
+				<option class="incomeListClass" th:each="category : ${incomeList}" 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="金額を入力してください" required>
+		</div>
+
+		<br>
+		<input type="hidden" name="today" id="today" th:value="${today}">
+
+		<button type="submit">登録</button>
+
+	</form>
+
+	<div th:replace="~{footer :: footer}"></div>
+
+	<script>
+		const transactionType = document.getElementById("transactionType");
+		const categoryId = document.getElementById("categoryId");
+
+		const expenseList = document.getElementsByClassName("expenseListClass");
+		const incomeList = document.getElementsByClassName("incomeListClass");
+
+		transactionType.addEventListener("change", function () {
+
+			if (this.value === "1") {
+
+				for (let i = 0; i < expenseList.length; i++) {
+					expenseList[i].style.display = "";
+				}
+
+				for (let i = 0; i < incomeList.length; i++) {
+					incomeList[i].style.display = "none";
+				}
+
+			} else if (this.value === "2") {
+
+				for (let i = 0; i < expenseList.length; i++) {
+					expenseList[i].style.display = "none";
+				}
+
+				for (let i = 0; i < incomeList.length; i++) {
+					incomeList[i].style.display = "";
+				}
+
+			} else {
+
+				for (let i = 0; i < expenseList.length; i++) {
+					expenseList[i].style.display = "none";
+				}
+
+				for (let i = 0; i < incomeList.length; i++) {
+					incomeList[i].style.display = "none";
+				}
+			}
+
+			categoryId.value = "";
+		});
+	</script>
+
+
+
+</body>
+
+
+</html>
\ No newline at end of file