Files
Super-HomeworkManager/web/templates/assignments/index.html

418 lines
28 KiB
HTML

{{template "base" .}}
{{define "content"}}
<input type="hidden" id="_csrf_global" value="{{.csrfToken}}">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-3 gap-2">
<h4 class="mb-0 fw-bold"><i class="bi bi-list-task me-2" aria-hidden="true"></i>課題一覧</h4>
<div class="d-flex gap-2 align-items-stretch align-items-md-center">
<div class="btn-group btn-group-sm" role="group" aria-label="表示切替">
<button type="button" class="btn btn-outline-secondary" id="viewTableBtn" onclick="setView('table')" title="テーブル表示">
<i class="bi bi-table" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-outline-secondary" id="viewKanbanBtn" onclick="setView('kanban')" title="カンバン表示">
<i class="bi bi-kanban" aria-hidden="true"></i>
</button>
</div>
<button class="btn btn-sm btn-outline-secondary flex-fill" id="groupToggleBtn" onclick="toggleGrouping()" title="科目でグループ化">
<i class="bi bi-collection me-1" aria-hidden="true"></i><span id="groupBtnText" class="d-none d-sm-inline">グループ化</span>
</button>
<button class="btn btn-sm btn-secondary text-white flex-fill" onclick="toggleCountdown()" id="toggleCountdownBtn" aria-pressed="false">
<i class="bi bi-clock me-1" aria-hidden="true"></i><span id="countdownBtnText" class="d-none d-sm-inline">残り非表示</span>
</button>
<a href="/assignments/new" class="btn btn-sm btn-primary flex-fill text-nowrap text-center">
<i class="bi bi-plus-lg me-1" aria-hidden="true"></i>新規登録
</a>
</div>
</div>
<ul class="nav nav-tabs border-0 mb-2" id="assignmentTabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link py-2 rounded-0 {{if eq .filter "pending"}}fw-bold border-bottom border-dark border-3 text-dark{{else}}border-0 text-muted{{end}}"
href="/assignments?filter=pending&q={{.query}}&priority={{.priority}}&subject={{.subject}}&sort={{.sort}}">未完了{{if gt .tabCounts.Pending 0}}<span class="badge rounded-pill ms-1 {{if eq .filter "pending"}}bg-dark{{else}}bg-secondary{{end}}" style="font-size:0.7rem;">{{.tabCounts.Pending}}</span>{{end}}</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link py-2 rounded-0 {{if eq .filter "due_today"}}fw-bold border-bottom border-dark border-3 text-dark{{else}}border-0 text-muted{{end}}"
href="/assignments?filter=due_today&q={{.query}}&priority={{.priority}}&subject={{.subject}}&sort={{.sort}}">今日が期限{{if gt .tabCounts.DueToday 0}}<span class="badge rounded-pill ms-1 {{if eq .filter "due_today"}}bg-dark{{else}}bg-warning text-dark{{end}}" style="font-size:0.7rem;">{{.tabCounts.DueToday}}</span>{{end}}</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link py-2 rounded-0 {{if eq .filter "due_this_week"}}fw-bold border-bottom border-dark border-3 text-dark{{else}}border-0 text-muted{{end}}"
href="/assignments?filter=due_this_week&q={{.query}}&priority={{.priority}}&subject={{.subject}}&sort={{.sort}}">今週が期限{{if gt .tabCounts.DueThisWeek 0}}<span class="badge rounded-pill ms-1 {{if eq .filter "due_this_week"}}bg-dark{{else}}bg-secondary{{end}}" style="font-size:0.7rem;">{{.tabCounts.DueThisWeek}}</span>{{end}}</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link py-2 rounded-0 {{if eq .filter "completed"}}fw-bold border-bottom border-dark border-3 text-dark{{else}}border-0 text-muted{{end}}"
href="/assignments?filter=completed&q={{.query}}&priority={{.priority}}&subject={{.subject}}&sort={{.sort}}">完了済み{{if gt .tabCounts.Completed 0}}<span class="badge rounded-pill ms-1 {{if eq .filter "completed"}}bg-dark{{else}}bg-secondary{{end}}" style="font-size:0.7rem;">{{.tabCounts.Completed}}</span>{{end}}</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link py-2 rounded-0 {{if eq .filter "overdue"}}fw-bold border-bottom border-dark border-3 text-dark{{else}}border-0 text-muted{{end}}"
href="/assignments?filter=overdue&q={{.query}}&priority={{.priority}}&subject={{.subject}}&sort={{.sort}}">期限切れ{{if gt .tabCounts.Overdue 0}}<span class="badge rounded-pill ms-1 {{if eq .filter "overdue"}}bg-dark{{else}}bg-danger{{end}}" style="font-size:0.7rem;">{{.tabCounts.Overdue}}</span>{{end}}</a>
</li>
<li class="nav-item ms-auto" role="presentation">
<a class="nav-link py-2 rounded-0 border-0 text-muted" href="/recurring">
<i class="bi bi-arrow-repeat me-1" aria-hidden="true"></i>繰り返し管理
</a>
</li>
</ul>
<hr class="mt-0 mb-3 text-muted" style="opacity: 0.1;">
<form action="/assignments" method="GET" class="row g-2 mb-3 align-items-center" role="search">
<input type="hidden" name="filter" value="{{.filter}}">
<div class="col-md-4 col-12">
<div class="input-group input-group-sm">
<span class="input-group-text bg-white border-end-0 text-muted"><i class="bi bi-search" aria-hidden="true"></i></span>
<label for="searchInput" class="visually-hidden">課題を検索</label>
<input type="text" class="form-control border-start-0 ps-0 bg-white" id="searchInput" name="q" placeholder="検索..." value="{{.query}}">
</div>
</div>
<div class="col-md-2 col-6">
<label for="priorityFilter" class="visually-hidden">重要度</label>
<select class="form-select form-select-sm bg-white" id="priorityFilter" name="priority" onchange="this.form.submit()">
<option value="">全重要度</option>
<option value="high" {{if eq .priority "high" }}selected{{end}}></option>
<option value="medium" {{if eq .priority "medium"}}selected{{end}}></option>
<option value="low" {{if eq .priority "low" }}selected{{end}}></option>
</select>
</div>
<div class="col-md-2 col-6">
<label for="subjectFilter" class="visually-hidden">科目</label>
<select class="form-select form-select-sm bg-white" id="subjectFilter" name="subject" onchange="this.form.submit()">
<option value="">全科目</option>
{{range .subjects}}<option value="{{.}}" {{if eq . $.subject}}selected{{end}}>{{.}}</option>{{end}}
</select>
</div>
<div class="col-md-2 col-6">
<label for="sortSelect" class="visually-hidden">並び順</label>
<select class="form-select form-select-sm bg-white" id="sortSelect" name="sort" onchange="this.form.submit()">
<option value="" {{if eq .sort "" }}selected{{end}}>期限昇順</option>
<option value="due_desc" {{if eq .sort "due_desc" }}selected{{end}}>期限降順</option>
<option value="priority" {{if eq .sort "priority" }}selected{{end}}>重要度</option>
<option value="subject" {{if eq .sort "subject" }}selected{{end}}>科目</option>
<option value="created_desc" {{if eq .sort "created_desc"}}selected{{end}}>登録日時</option>
</select>
</div>
<div class="col-md-2 col-6">
<a href="/assignments?filter={{.filter}}" class="btn btn-sm btn-outline-secondary w-100 bg-white">クリア</a>
</div>
</form>
<div id="bulkBar" class="d-none" role="toolbar" aria-label="一括操作">
<span id="bulkCount" class="fw-bold small me-1"></span>
<button type="button" class="btn btn-sm btn-light" onclick="submitBulkComplete()">
<i class="bi bi-check-lg me-1" aria-hidden="true"></i>一括完了
</button>
<button type="button" class="btn btn-sm btn-danger" onclick="confirmBulkDelete()">
<i class="bi bi-trash me-1" aria-hidden="true"></i>一括削除
</button>
<button type="button" class="btn btn-sm btn-link text-white ms-auto p-0" onclick="clearSelection()" aria-label="選択解除">
<i class="bi bi-x-lg" aria-hidden="true"></i>
</button>
</div>
<form id="bulkCompleteForm" action="/assignments/bulk-complete" method="POST" class="d-none">
<input type="hidden" name="_csrf" value="{{.csrfToken}}">
</form>
<form id="bulkDeleteForm" action="/assignments/bulk-delete" method="POST" class="d-none">
<input type="hidden" name="_csrf" value="{{.csrfToken}}">
</form>
<div id="tableView">
<div class="card shadow-sm border-0 rounded-0">
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0 custom-table" aria-label="課題一覧">
<thead class="bg-secondary-subtle">
<tr>
<th scope="col" style="width: 36px;" class="ps-2 text-center">
<input type="checkbox" id="selectAll" class="form-check-input" aria-label="全選択">
</th>
<th scope="col" style="width: 40px;" class="text-center text-dark fw-bold">状態</th>
<th scope="col" style="width: 110px;" class="text-dark fw-bold sort-th">
<a href="/assignments?filter={{.filter}}&q={{.query}}&priority={{.priority}}&subject={{.subject}}&sort={{if eq .sort "subject"}}{{else}}subject{{end}}">
科目{{if eq .sort "subject"}}<i class="bi bi-arrow-down-up" aria-hidden="true"></i>{{end}}
</a>
</th>
<th scope="col" style="width: 70px;" class="text-dark fw-bold sort-th">
<a href="/assignments?filter={{.filter}}&q={{.query}}&priority={{.priority}}&subject={{.subject}}&sort=priority">
重要度{{if eq .sort "priority"}}<i class="bi bi-arrow-down-up" aria-hidden="true"></i>{{end}}
</a>
</th>
<th scope="col" class="text-dark fw-bold">タイトル</th>
<th scope="col" style="width: 130px;" class="text-dark fw-bold sort-th">
<a href="/assignments?filter={{.filter}}&q={{.query}}&priority={{.priority}}&subject={{.subject}}&sort={{if eq .sort "due_desc"}}{{else}}due_desc{{end}}">
期限{{if eq .sort ""}}↑{{else if eq .sort "due_desc"}}↓{{end}}
</a>
</th>
<th scope="col" style="width: 120px;" class="countdown-col text-dark fw-bold">残り</th>
<th scope="col" style="width: 100px;" class="text-end pe-3 text-dark fw-bold">操作</th>
</tr>
</thead>
<tbody>
{{range .assignments}}
<tr class="assignment-row border-bottom {{if .IsPinned}}row-pinned{{end}}"
data-due-ts="{{.DueDate.Unix}}"
data-completed="{{.IsCompleted}}"
data-id="{{.ID}}"
data-subject="{{.Subject}}"
data-priority="{{.Priority}}"
data-pinned="{{.IsPinned}}"
data-title="{{.Title}}"
{{if .RecurringAssignmentID}}data-recurring-id="{{.RecurringAssignmentID}}"{{end}}>
<td class="ps-2 text-center">
<input type="checkbox" class="form-check-input row-check" value="{{.ID}}" aria-label="選択">
</td>
<td class="text-center">
{{if .IsCompleted}}
<form action="/assignments/{{.ID}}/toggle" method="POST" class="d-inline" data-row-id="{{.ID}}">
<input type="hidden" name="_csrf" value="{{$.csrfToken}}">
<button type="submit" class="btn btn-link p-0 text-success text-decoration-none btn-touch" aria-label="未完了に戻す">
<i class="bi bi-check-circle-fill" aria-hidden="true"></i>
</button>
</form>
{{else}}
<form action="/assignments/{{.ID}}/toggle" method="POST" class="d-inline" data-row-id="{{.ID}}">
<input type="hidden" name="_csrf" value="{{$.csrfToken}}">
<button type="submit" class="btn btn-link p-0 text-secondary text-decoration-none btn-touch" aria-label="完了にする">
<i class="bi bi-circle" aria-hidden="true"></i>
</button>
</form>
{{end}}
</td>
<td><span class="badge subject-badge border-0 fw-bold" data-subject="{{.Subject}}">{{.Subject}}</span></td>
<td>
{{if eq .Priority "high"}}
<span class="badge bg-danger text-white border-0 fw-bold small"><span class="visually-hidden">(重要度:高)</span></span>
{{else if eq .Priority "medium"}}
<span class="badge bg-warning text-dark border-0 fw-bold small"><span class="visually-hidden">(重要度:中)</span></span>
{{else}}
<span class="badge bg-dark text-white border-0 fw-bold small"><span class="visually-hidden">(重要度:低)</span></span>
{{end}}
</td>
<td>
<div class="d-flex align-items-center gap-1">
<div class="fw-bold text-dark title-clamp" title="{{.Title}}">{{.Title}}</div>
{{if .RecurringAssignmentID}}
<button type="button" class="btn btn-link p-0 text-info btn-touch flex-shrink-0" data-bs-toggle="modal"
data-bs-target="#recurringModal"
data-recurring-id="{{.RecurringAssignmentID}}"
data-assignment-id="{{.ID}}"
data-recurring-title="{{.Title}}"
data-recurring-type="{{if .RecurringAssignment}}{{.RecurringAssignment.RecurrenceType}}{{else}}unknown{{end}}"
data-recurring-active="{{if .RecurringAssignment}}{{.RecurringAssignment.IsActive}}{{else}}true{{end}}"
aria-label="繰り返し設定を表示">
<i class="bi bi-repeat" aria-hidden="true"></i>
</button>
{{end}}
</div>
{{if .SoftDueDate}}<div class="small text-info mt-0"><i class="bi bi-clock-history me-1" aria-hidden="true"></i>{{.SoftDueDate.Format "01/02 15:04"}}</div>{{end}}
</td>
<td>
<div class="small fw-bold text-dark user-select-all">{{.DueDate.Format "2006/01/02 15:04"}}</div>
</td>
<td class="countdown-col">
{{if not .IsCompleted}}
<span class="countdown small fw-bold font-monospace text-dark" aria-live="off">...</span>
{{else}}
<span class="text-secondary small fw-bold">-</span>
{{end}}
</td>
<td class="text-end pe-3">
<div class="d-flex justify-content-end gap-1">
<form action="/assignments/{{.ID}}/pin" method="POST" class="d-inline">
<input type="hidden" name="_csrf" value="{{$.csrfToken}}">
<button type="submit" class="btn btn-link p-0 pin-btn btn-touch {{if .IsPinned}}pinned{{end}}" aria-label="{{if .IsPinned}}ピン解除{{else}}ピン留め{{end}}">
<i class="bi bi-pin-fill" aria-hidden="true"></i>
</button>
</form>
<a href="/assignments/{{.ID}}/edit" class="text-primary text-decoration-none btn-touch d-inline-flex align-items-center" aria-label="編集">
<i class="bi bi-pencil-fill" aria-hidden="true"></i>
</a>
{{if .RecurringAssignment}}
<button type="button" class="btn btn-link p-0 text-danger text-decoration-none border-0 bg-transparent btn-touch" onclick="showDeleteRecurringModal({{.ID}}, {{.RecurringAssignmentID}})" aria-label="削除">
<i class="bi bi-trash-fill" aria-hidden="true"></i>
</button>
{{else}}
<form action="/assignments/{{.ID}}/delete" method="POST" class="d-inline" data-confirm="削除しますか?">
<input type="hidden" name="_csrf" value="{{$.csrfToken}}">
<button type="submit" class="btn btn-link p-0 text-danger text-decoration-none border-0 bg-transparent btn-touch" aria-label="削除">
<i class="bi bi-trash-fill" aria-hidden="true"></i>
</button>
</form>
{{end}}
</div>
</td>
</tr>
{{else}}
<tr>
<td colspan="8" class="text-center py-5">
<i class="bi bi-inbox display-4 text-muted" aria-hidden="true"></i>
<p class="mt-2 mb-1 text-muted fw-bold">課題がありません</p>
<a href="/assignments/new" class="btn btn-sm btn-primary mt-1">
<i class="bi bi-plus-lg me-1" aria-hidden="true"></i>課題を登録する
</a>
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
</div>
{{if gt .totalPages 1}}
<div class="card-footer bg-white border-top-0 py-2">
<nav aria-label="ページナビゲーション">
<ul class="pagination pagination-sm justify-content-center mb-0">
<li class="page-item {{if not .hasPrev}}disabled{{end}}">
<a class="page-link border-0 text-secondary" href="/assignments?page={{.prevPage}}&filter={{.filter}}&q={{.query}}&priority={{.priority}}&subject={{.subject}}&sort={{.sort}}" aria-label="前のページ">
<i class="bi bi-chevron-left" aria-hidden="true"></i>
</a>
</li>
<li class="page-item disabled">
<span class="page-link border-0 text-dark fw-bold" aria-current="page">{{.currentPage}} / {{.totalPages}}</span>
</li>
<li class="page-item {{if not .hasNext}}disabled{{end}}">
<a class="page-link border-0 text-secondary" href="/assignments?page={{.nextPage}}&filter={{.filter}}&q={{.query}}&priority={{.priority}}&subject={{.subject}}&sort={{.sort}}" aria-label="次のページ">
<i class="bi bi-chevron-right" aria-hidden="true"></i>
</a>
</li>
</ul>
</nav>
</div>
{{end}}
</div>
</div>
<div id="kanbanView" class="d-none">
<div class="row g-3">
<div class="col-md-3">
<div class="card border-danger h-100">
<div class="card-header bg-danger text-white py-2 d-flex justify-content-between">
<span><i class="bi bi-exclamation-triangle me-1" aria-hidden="true"></i>期限切れ</span>
<span class="badge bg-white text-danger" id="kb-count-overdue">0</span>
</div>
<div class="card-body p-2 kanban-col-body" id="kb-overdue"></div>
</div>
</div>
<div class="col-md-3">
<div class="card border-warning h-100">
<div class="card-header bg-warning text-dark py-2 d-flex justify-content-between">
<span><i class="bi bi-calendar-event me-1" aria-hidden="true"></i>今日</span>
<span class="badge bg-white text-warning" id="kb-count-today">0</span>
</div>
<div class="card-body p-2 kanban-col-body" id="kb-today"></div>
</div>
</div>
<div class="col-md-3">
<div class="card border-info h-100">
<div class="card-header bg-info text-white py-2 d-flex justify-content-between">
<span><i class="bi bi-calendar-week me-1" aria-hidden="true"></i>今週</span>
<span class="badge bg-white text-info" id="kb-count-week">0</span>
</div>
<div class="card-body p-2 kanban-col-body" id="kb-week"></div>
</div>
</div>
<div class="col-md-3">
<div class="card border-secondary h-100">
<div class="card-header bg-secondary text-white py-2 d-flex justify-content-between">
<span><i class="bi bi-calendar3 me-1" aria-hidden="true"></i>それ以降</span>
<span class="badge bg-white text-secondary" id="kb-count-later">0</span>
</div>
<div class="card-body p-2 kanban-col-body" id="kb-later"></div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="recurringModal" tabindex="-1" aria-labelledby="recurringModalHeading" aria-modal="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="recurringModalHeading"><i class="bi bi-repeat me-2" aria-hidden="true"></i>繰り返し課題</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
</div>
<div class="modal-body">
<h6 id="recurringModalTitle" class="mb-3 fw-bold"></h6>
<table class="table table-sm table-borderless">
<tbody>
<tr>
<th class="text-muted" style="width: 100px;" scope="row">繰り返し</th>
<td id="recurringTypeLabel">読み込み中...</td>
</tr>
<tr>
<th class="text-muted" scope="row">状態</th>
<td id="recurringStatus">読み込み中...</td>
</tr>
</tbody>
</table>
<div class="alert alert-info small mb-0" role="note">
<i class="bi bi-info-circle me-1" aria-hidden="true"></i>
繰り返しを停止すると、今後新しい課題は自動作成されなくなります。既存の課題はそのまま残ります。
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
<a id="recurringEditBtn" href="#" class="btn btn-primary">
<i class="bi bi-pencil me-1" aria-hidden="true"></i>編集
</a>
<form id="recurringStopForm" method="POST" class="d-inline" data-confirm="繰り返しを停止しますか?">
<input type="hidden" name="_csrf" value="{{.csrfToken}}">
<button type="submit" id="recurringStopBtn" class="btn btn-danger">
<i class="bi bi-stop-fill me-1" aria-hidden="true"></i>停止
</button>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="deleteRecurringModal" tabindex="-1" aria-labelledby="deleteRecurringModalHeading" aria-modal="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteRecurringModalHeading"><i class="bi bi-trash me-2" aria-hidden="true"></i>繰り返し課題の削除</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
</div>
<div class="modal-body">
<p>この課題は繰り返し設定に関連付けられています。</p>
<p>繰り返し設定も停止しますか?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button>
<form id="deleteOnlyForm" method="POST" class="d-inline">
<input type="hidden" name="_csrf" value="{{.csrfToken}}">
<button type="submit" class="btn btn-outline-danger">課題のみ削除</button>
</form>
<form id="deleteAndStopForm" method="POST" class="d-inline">
<input type="hidden" name="_csrf" value="{{.csrfToken}}">
<button type="submit" class="btn btn-danger">削除して繰り返しも削除</button>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="bulkDeleteRecurringModal" tabindex="-1" aria-labelledby="bulkDeleteRecurringModalHeading" aria-modal="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="bulkDeleteRecurringModalHeading"><i class="bi bi-trash me-2" aria-hidden="true"></i>一括削除の確認</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
</div>
<div class="modal-body">
<p class="mb-2">選択した課題のうち、以下は繰り返し設定に関連付けられています。</p>
<ul id="bulkDeleteRecurringList" class="list-group list-group-flush mb-3"></ul>
<div class="alert alert-warning small mb-0">
<i class="bi bi-exclamation-triangle me-1" aria-hidden="true"></i>
繰り返し設定を削除すると、今後新しい課題は自動作成されなくなります。
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button>
<button type="button" class="btn btn-outline-danger" id="bulkDeleteOnlyBtn">課題のみ削除</button>
<button type="button" class="btn btn-danger" id="bulkDeleteWithRecurringBtn">課題と繰り返しも削除</button>
</div>
</div>
</div>
</div>
{{end}}
{{end}}