───────┬──────────────────────────────────────────────────────────────────────── │ 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 │ </tr> 23 │ <tr th:each="todo: ${todos}"> 24 │ <td th:style="'background-color: ' + ${todo.background}">[[${todo.seq}]]</td> 25 │ <td>[[${todo.title}]]</td> 26 │ <td>[[${todo.createdAt}]]</td> 27 │ <td> 28 │ <form th:object="${ToDoForm}" th:action="@{/{mid}/todos/{seq}/background(mid=${member.mid},seq=${todo.seq})}" th:method="put"> 29 │ <input type="hidden" name="title" th:value="${todo.title}"/> 30 │ <input type="color" name="background" th:value="${todo.background}" /> 31 │ <input type="submit" value="更新" /> 32 │ </form> 33 │ <a th:href="@{/{mid}/todos/{seq}/done(mid=${member.mid},seq=${todo.seq})}">完了</a> 34 │ </td> 35 │ </tr> 36 │ <tr> 37 │ <td> 38 │ * 39 │ </td> 40 │ <td colspan="3"> 41 │ <form role="form" th:action="@{/{mid}/todos(mid=${member.mid})}" th:object="${ToDoForm}" method="post"> 42 │ <input type="text" required th:field="*{title}" /> 43 │ <input type="color" required name="background" th:value="*{background == null ? '#ffffff': background}" /> 44 │ <input type="submit" value="新規作成" /> 45 │ <div th:if="${#fields.hasErrors('title')}" th:errors="*{title}" style="color: red"></div> 46 │ </form> 47 │ </td> 48 │ </tr> 49 │ </table> 50 │ 51 │ <h2>Done</h2> 52 │ <table border="1"> 53 │ <tr> 54 │ <th>#</th> 55 │ <th>タイトル</th> 56 │ <th>作成日時</th> 57 │ <th>完了日時</th> 58 │ </tr> 59 │ <tr th:each="done: ${dones}"> 60 │ <td th:style="'background-color: ' + ${done.background}">[[${done.seq}]]</td> 61 │ <td>[[${done.title}]]</td> 62 │ <td>[[${done.createdAt}]]</td> 63 │ <td>[[${done.doneAt}]]</td> 64 │ </tr> 65 │ </table> 66 │ 67 │ </body> 68 │ 69 │ </html> ───────┴────────────────────────────────────────────────────────────────────────