102 lines
4.4 KiB
HTML
102 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html data-bs-theme="light" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Create Task</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
|
|
|
|
<style>
|
|
.task-box {
|
|
box-shadow: 6px 6px black;
|
|
}
|
|
|
|
button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Courier New', Courier, monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="w-100 h-100">
|
|
|
|
<div th:replace="~{component/header :: header}"></div>
|
|
|
|
<main class="container d-flex justify-content-center align-items-start py-4" style="height: 90%;">
|
|
<div style="border: 2px solid black;" class="task-box px-4 py-5 col-12 col-md-8 col-lg-6">
|
|
|
|
<h2 class="mb-4">Create Task</h2>
|
|
|
|
<form th:action="@{/createTask/save}" th:object="${task}" method="post">
|
|
|
|
<!-- Title -->
|
|
<label for="title" class="form-label mb-0">Title</label>
|
|
<input id="title" th:field="*{title}" class="form-control rounded-0 mb-3" maxlength="50" style="border-color:black;"
|
|
type="text" required autofocus>
|
|
|
|
<!-- Category -->
|
|
<label for="category" class="form-label mb-0">Category</label>
|
|
<select id="category" th:field="*{categoryId}" class="form-select rounded-0 mb-3"
|
|
style="border-color:black;" required>
|
|
<option value="" disabled selected>Select Category</option>
|
|
<option th:each="cat : ${comCategories}" th:value="${cat.id}" th:text="${cat.categoryName}">
|
|
</option>
|
|
</select>
|
|
|
|
<!-- Status -->
|
|
<label for="status" class="form-label mb-0">Status</label>
|
|
<select id="status" th:field="*{status}" class="form-select rounded-0 mb-3" style="border-color:black;"
|
|
required>
|
|
<option value="" disabled selected>Select Status</option>
|
|
<option value="In Progress">In Progress</option>
|
|
<option value="Pending">Pending</option>
|
|
<option value="Completed">Completed</option>
|
|
<option value="On Hold">On Hold</option>
|
|
<option value="Overdue">Overdue</option>
|
|
<option value="Closed">Closed</option>
|
|
</select>
|
|
|
|
<!-- Priority -->
|
|
<label for="priority" class="form-label mb-0">Priority</label>
|
|
<select id="priority" th:field="*{priority}" class="form-select rounded-0 mb-3"
|
|
style="border-color:black;" required>
|
|
<option value="" disabled selected>Select Priority</option>
|
|
<option value="Critical">Critical</option>
|
|
<option value="High">High</option>
|
|
<option value="Medium">Medium</option>
|
|
<option value="Low">Low</option>
|
|
</select>
|
|
|
|
<!-- Due Date + Time -->
|
|
<label for="dueDate" class="form-label mb-0">Due Date & Time</label>
|
|
<input id="dueDate" th:field="*{dueDate}" class="form-control rounded-0 mb-3" type="datetime-local"
|
|
style="border-color:black;" required>
|
|
|
|
<!-- Description -->
|
|
<label for="description" class="form-label mb-0">Description</label>
|
|
<textarea id="description" th:field="*{description}" maxlength="100" class="form-control rounded-0 mb-3"
|
|
style="border-color:black;height: 90px;"></textarea>
|
|
|
|
<div class="d-inline-flex w-100">
|
|
<button th:text="${resetBtnText}" class="btn btn-outline-secondary rounded-0 w-100 me-1" type="reset">
|
|
Clear
|
|
</button>
|
|
<button th:text="${saveBtnText}" class="btn btn-outline-primary rounded-0 w-100 ms-1" type="submit">
|
|
Create Task
|
|
</button>
|
|
</div>
|
|
|
|
|
|
</form>
|
|
</div>
|
|
</main>
|
|
<div th:replace="~{component/nav-sidebar :: nav-sidebar}"></div>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
|
|
</html> |