[FIX] 収支登録の際、収支項目を分けました。金額の最少額は1円に設定しました。
This commit is contained in:
s-choi
@@ -15,127 +15,149 @@
|
||||
|
||||
<div class="main-container">
|
||||
|
||||
<h1 class="page-title">
|
||||
取引登録
|
||||
</h1>
|
||||
<h1 class="page-title">
|
||||
取引登録
|
||||
</h1>
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="card shadow-sm">
|
||||
|
||||
<div class="card-body">
|
||||
<div class="card-body">
|
||||
|
||||
<form th:action="@{/transaction/create}"
|
||||
th:object="${transactionForm}"
|
||||
method="post">
|
||||
<form th:action="@{/transaction/create}" th:object="${transactionForm}" method="post">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="transactionDate"
|
||||
class="form-label">
|
||||
日付
|
||||
</label>
|
||||
<input type="date"
|
||||
id="transactionDate"
|
||||
class="form-select"
|
||||
name="transactionDate"
|
||||
th:value="*{transactionDate}"
|
||||
required>
|
||||
<label for="transactionDate" class="form-label">
|
||||
日付
|
||||
</label>
|
||||
<input type="date" id="transactionDate" class="form-select" name="transactionDate"
|
||||
th:value="*{transactionDate}" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="mb-3">
|
||||
|
||||
<label for="transactionType"
|
||||
class="form-label">
|
||||
収入・支出
|
||||
</label>
|
||||
<label for="transactionType" class="form-label">
|
||||
収入・支出
|
||||
</label>
|
||||
|
||||
<select id="transactionType"
|
||||
class="form-select"
|
||||
th:field="*{transactionType}"
|
||||
required>
|
||||
<select id="transactionType" class="form-select" th:field="*{transactionType}" required>
|
||||
|
||||
<option value="">
|
||||
選択してください
|
||||
</option>
|
||||
<option value="">
|
||||
選択してください
|
||||
</option>
|
||||
|
||||
<option value="1">
|
||||
支出
|
||||
</option>
|
||||
<option value="1">
|
||||
支出
|
||||
</option>
|
||||
|
||||
<option value="2">
|
||||
収入
|
||||
</option>
|
||||
<option value="2">
|
||||
収入
|
||||
</option>
|
||||
|
||||
</select>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="mb-3">
|
||||
|
||||
<label for="categoryId"
|
||||
class="form-label">
|
||||
カテゴリ
|
||||
</label>
|
||||
<label for="categoryId" class="form-label">
|
||||
カテゴリ
|
||||
</label>
|
||||
|
||||
<select id="categoryId"
|
||||
class="form-select"
|
||||
th:field="*{categoryId}"
|
||||
required>
|
||||
<select id="categoryId" class="form-select" th:field="*{categoryId}" required>
|
||||
|
||||
<option value="">
|
||||
選択してください
|
||||
</option>
|
||||
<option value="">
|
||||
選択してください
|
||||
</option>
|
||||
|
||||
<option th:each="category : ${categoryFormList}"
|
||||
th:value="${category.categoryId}"
|
||||
th:text="${category.categoryName}">
|
||||
</option>
|
||||
<option class="expenseListClass" th:each="category : ${expenseList}"
|
||||
th:value="${category.categoryId}" th:text="${category.categoryName}">
|
||||
</option>
|
||||
|
||||
</select>
|
||||
<option class="incomeListClass" th:each="category : ${incomeList}"
|
||||
th:value="${category.categoryId}" th:text="${category.categoryName}">
|
||||
</option>
|
||||
|
||||
</div>
|
||||
</select>
|
||||
|
||||
<div class="mb-3">
|
||||
</div>
|
||||
|
||||
<label for="amount"
|
||||
class="form-label">
|
||||
金額
|
||||
</label>
|
||||
<div class="mb-3">
|
||||
|
||||
<input type="number"
|
||||
id="amount"
|
||||
class="form-control"
|
||||
th:field="*{amount}"
|
||||
min="0"
|
||||
max="100000000"
|
||||
placeholder="金額を入力してください"
|
||||
required>
|
||||
<label for="amount" class="form-label">
|
||||
金額
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<input type="number" id="amount" class="form-control" th:field="*{amount}" min="1"
|
||||
max="100000000" placeholder="金額を入力してください" required>
|
||||
|
||||
<input type="hidden"
|
||||
name="today"
|
||||
th:value="${today}">
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<input type="hidden" name="today" th:value="${today}">
|
||||
|
||||
<button type="submit"
|
||||
class="btn btn-primary">
|
||||
<div class="d-grid">
|
||||
|
||||
登録
|
||||
<button type="submit" class="btn btn-primary">
|
||||
|
||||
</button>
|
||||
登録
|
||||
|
||||
</div>
|
||||
</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user