───────┬──────────────────────────────────────────────────────────────────────── │ 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> 19 │ # 20 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'seq'}, order=${'asc'})}">↓</a> 21 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'seq'}, order=${'desc'})}">↑</a> 22 │ </th> 23 │ <th> 24 │ タイトル 25 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'title'}, order=${'asc'})}">↓</a> 26 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'title'}, order=${'desc'})}">↑</a> 27 │ </th> 28 │ <th> 29 │ 作成日時 30 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'created_at'}, order=${'asc'})}">↓</a> 31 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'created_at'}, order=${'desc'})}">↑</a> 32 │ </th> 33 │ <th> 34 │ 期日 35 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'due_at'}, order=${'asc'})}">↓</a> 36 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'due_at'}, order=${'desc'})}">↑</a> 37 │ </th> 38 │ <th>コマンド</th> 39 │ </tr> 40 │ <tr th:each="todo: ${todos}"> 41 │ <td th:style="'background-color: ' + ${todo.background}">[[${todo.seq}]]</td> 42 │ <td>[[${todo.title}]]</td> 43 │ <td th:title="${todo.createdAt}">[[${todo.humanizeCreatedAt()}]]</td> 44 │ <td th:title="${todo.dueAt}">[[${todo.humanizeDueAt()}]]</td> 45 │ <td> 46 │ <form th:action="@{/{mid}/todos/{seq}/due(mid=${member.mid},seq=${todo.seq})}" th:method="put" th:object="${ToDoForm}"> 47 │ <input type="hidden" name="title" th:value="${todo.title}" /> 48 │ <input type="hidden" name="background" th:value="${todo.background}" /> 49 │ <input type="datetime-local" name="due" th:value="${todo.getDueString()}" /> 50 │ <input type="submit" value="期日を設定" /> 51 │ </form> 52 │ <form th:object="${ToDoForm}" th:action="@{/{mid}/todos/{seq}/background(mid=${member.mid},seq=${todo.seq})}" th:method="put"> 53 │ <input type="hidden" name="title" th:value="${todo.title}"/> 54 │ <input type="color" name="background" th:value="${todo.background}" /> 55 │ <input type="submit" value="更新" /> 56 │ </form> 57 │ <a th:href="@{/{mid}/todos/{seq}/done(mid=${member.mid},seq=${todo.seq})}">完了</a> 58 │ </td> 59 │ </tr> 60 │ <tr> 61 │ <td> 62 │ * 63 │ </td> 64 │ <td colspan="4"> 65 │ <form role="form" th:action="@{/{mid}/todos(mid=${member.mid})}" th:object="${ToDoForm}" method="post"> 66 │ <input type="text" required th:field="*{title}" /> 67 │ <input type="datetime-local" th:field="*{due}" /> 68 │ <input type="color" required name="background" th:value="*{background == null ? '#ffffff': background}" /> 69 │ <input type="submit" value="新規作成" /> 70 │ <div th:if="${#fields.hasErrors('title')}" th:errors="*{title}" style="color: red"></div> 71 │ </form> 72 │ </td> 73 │ </tr> 74 │ </table> 75 │ <div th:fragment="paginationbar"> 76 │ <ul> 77 │ <li th:class="${todos.first}? 'disabled': ''" style="display:inline"> 78 │ <span th:if="${todos.first}"><<</span> 79 │ <a th:if="${not todos.first}" th:href="@{${url}(page=0)}"><<</a> 80 │ </li> 81 │ <li th:if="${todos.totalPages} > 0" th:each="i: ${#numbers.sequence(0, todos.totalPages-1)}" th:class="(${i}==${todos.number})?'active': ''" style="display:inline"> 82 │ <span th:if="${i} == ${todos.number}" th:text="${i+1}">1</span> 83 │ <a th:if="${i}!=${todos.number}" th:href="@{${url}(page=${i})}"> 84 │ <span th:text="${i+1}">1</span> 85 │ </a> 86 │ </li> 87 │ <li th:class="${todos.last}? 'disabled': ''" style="display:inline"> 88 │ <span th:if="${todos.last}">>></span> 89 │ <a th:if="${not todos.last}" th:href="@{${url}(page=(${todos.totalPages}-1))}">>></a> 90 │ </li> 91 │ </ul> 92 │ </div> 93 │ 94 │ <h2>Done</h2> 95 │ <table border="1"> 96 │ <tr> 97 │ <th> 98 │ # 99 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'seq'}, order=${'asc'})}">↓</a> 100 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'seq'}, order=${'desc'})}">↑</a> 101 │ </th> 102 │ <th> 103 │ タイトル 104 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'title'}, order=${'asc'})}">↓</a> 105 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'title'}, order=${'desc'})}">↑</a> 106 │ </th> 107 │ <th> 108 │ 作成日時 109 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'created_at'}, order=${'asc'})}">↓</a> 110 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'created_at'}, order=${'desc'})}">↑</a> 111 │ </th> 112 │ <th> 113 │ 期日 114 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'due_at'}, order=${'asc'})}">↓</a> 115 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'due_at'}, order=${'desc'})}">↑</a> 116 │ </th> 117 │ <th> 118 │ 完了日時 119 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'done_at'}, order=${'asc'})}">↓</a> 120 │ <a th:href="@{/{mid}/todos(mid=${member.mid}, sort_by=${'done_at'}, order=${'desc'})}">↑</a> 121 │ </th> 122 │ <th>コマンド</th> 123 │ </tr> 124 │ <tr th:each="done: ${dones}"> 125 │ <td th:style="'background-color: ' + ${done.background}">[[${done.seq}]]</td> 126 │ <td>[[${done.title}]]</td> 127 │ <td th:title="${done.createdAt}">[[${done.humanizeCreatedAt()}]]</td> 128 │ <td th:title="${done.dueAt}">[[${done.humanizeDueAt()}]]</td> 129 │ <td th:title="${done.doneAt}">[[${done.humanizeDoneAt()}]]</td> 130 │ <td><a th:href="@{/{mid}/todos/{seq}/cancel(mid=${member.mid},seq=${done.seq})}">キャンセル</a></td> 131 │ </tr> 132 │ </table> 133 │ <div th:fragment="paginationbar"> 134 │ <ul> 135 │ <li th:class="${dones.first}? 'disabled': ''" style="display:inline"> 136 │ <span th:if="${dones.first}"><<</span> 137 │ <a th:if="${not dones.first}" th:href="@{${url}(page=0)}"><<</a> 138 │ </li> 139 │ <li th:if="${dones.totalPages} > 0" th:each="i: ${#numbers.sequence(0, dones.totalPages-1)}" th:class="(${i}==${dones.number})?'active': ''" style="display:inline"> 140 │ <span th:if="${i} == ${dones.number}" th:text="${i+1}">1</span> 141 │ <a th:if="${i}!=${dones.number}" th:href="@{${url}(page=${i})}"> 142 │ <span th:text="${i+1}">1</span> 143 │ </a> 144 │ </li> 145 │ <li th:class="${dones.last}? 'disabled': ''" style="display:inline"> 146 │ <span th:if="${dones.last}">>></span> 147 │ <a th:if="${not dones.last}" th:href="@{${url}(page=(${dones.totalPages}-1))}">>></a> 148 │ </li> 149 │ </ul> 150 │ </div> 151 │ </body> 152 │ 153 │ </html> ───────┴────────────────────────────────────────────────────────────────────────