───────┬──────────────────────────────────────────────────────────────────────── │ File: src/main/resources/templates/list.html ───────┼──────────────────────────────────────────────────────────────────────── 1 │ <!DOCTYPE html> 2 │ <html lang="ja" xmlns:th="http://www.thymeleaf.org"> 3 │ 4 │ <head> 5 │ <meta charset="UTF-8"> 6 │ <title>ToDoList</title> 7 │ </head> 8 │ 9 │ <body> 10 │ <h1> ようこそ [[${member.name}]] さん！</h1> 11 │ <p> 12 │ <a th:href="@{/{mid}/todos/all(mid=${member.mid})}">みんなのToDo</a> 13 │ <a th:href="@{/}">ログアウト</a> 14 │ </p> 15 │ <h2>ToDo</h2> 16 │ <table border="1"> 17 │ <tr> 18 │ <th>#</th> 19 │ <th>タイトル</th> 20 │ <th>作成日時</th> 21 │ <th>期日</th> 22 │ <th>コマンド</th> 23 │ </tr> 24 │ <tr th:each="todo: ${todos}"> 25 │ <td>[[${todo.seq}]]</td> 26 │ <td>[[${todo.title}]]</td> 27 │ <td>[[${todo.dueAt}]]</td> 28 │ <td>[[${todo.createdAt}]]</td> 29 │ <td> 30 │ <form th:action="@{/{mid}/todos/{seq}/due(mid=${member.mid},seq=${todo.seq})}" th:method="put" th:object="${ToDoForm}"> 31 │ <input type="hidden" name="title" th:value="${todo.title}" /> 32 │ <input type="datetime-local" name="due" th:value="${todo.getDueString()}" /> 33 │ <input type="submit" value="期日を設定" /> 34 │ </form> 35 │ <a th:href="@{/{mid}/todos/{seq}/done(mid=${member.mid},seq=${todo.seq})}">完了</a> 36 │ </td> 37 │ </tr> 38 │ <tr> 39 │ <td> 40 │ * 41 │ </td> 42 │ <td colspan="4"> 43 │ <form role="form" th:action="@{/{mid}/todos(mid=${member.mid})}" th:object="${ToDoForm}" method="post"> 44 │ <input type="text" required th:field="*{title}" /> 45 │ <input type="datetime-local" th:field="*{due}" /> 46 │ <input type="submit" value="新規作成" /> 47 │ <div th:if="${#fields.hasErrors('title')}" th:errors="*{title}" style="color: red"></div> 48 │ </form> 49 │ </td> 50 │ </tr> 51 │ </table> 52 │ 53 │ <h2>Done</h2> 54 │ <table border="1"> 55 │ <tr> 56 │ <th>#</th> 57 │ <th>タイトル</th> 58 │ <th>作成日時</th> 59 │ <th>期日</th> 60 │ <th>完了日時</th> 61 │ </tr> 62 │ <tr th:each="done: ${dones}"> 63 │ <td>[[${done.seq}]]</td> 64 │ <td>[[${done.title}]]</td> 65 │ <td>[[${done.createdAt}]]</td> 66 │ <td>[[${done.dueAt}]]</td> 67 │ <td>[[${done.doneAt}]]</td> 68 │ </tr> 69 │ </table> 70 │ 71 │ </body> 72 │ 73 │ </html> ───────┴────────────────────────────────────────────────────────────────────────