CSSの最適化や内部挙動の改良
This commit is contained in:
@@ -5,85 +5,71 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-pencil me-2"></i>課題編集</h5>
|
||||
<h5 class="mb-0"><i class="bi bi-pencil me-2" aria-hidden="true"></i>課題編集</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{{if .error}}<div class="alert alert-danger">{{.error}}</div>{{end}}
|
||||
{{if .error}}<div class="alert alert-danger" role="alert">{{.error}}</div>{{end}}
|
||||
<form method="POST" action="/assignments/{{.assignment.ID}}">
|
||||
{{.csrfField}}
|
||||
<div class="mb-3">
|
||||
<label for="title" class="form-label">タイトル <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="title" name="title" value="{{.assignment.Title}}"
|
||||
required>
|
||||
<label for="title" class="form-label">タイトル <span class="text-danger" aria-hidden="true">*</span><span class="visually-hidden">（必須）</span></label>
|
||||
<input type="text" class="form-control" id="title" name="title" value="{{.assignment.Title}}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="subject" class="form-label">科目</label>
|
||||
<input type="text" class="form-control" id="subject" name="subject"
|
||||
value="{{.assignment.Subject}}">
|
||||
<input type="text" class="form-control" id="subject" name="subject" value="{{.assignment.Subject}}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="priority" class="form-label">重要度</label>
|
||||
<select class="form-select" id="priority" name="priority">
|
||||
<option value="low" {{if eq .assignment.Priority "low" }}selected{{end}}>小</option>
|
||||
<option value="medium" {{if eq .assignment.Priority "medium" }}selected{{end}}>中</option>
|
||||
<option value="high" {{if eq .assignment.Priority "high" }}selected{{end}}>大</option>
|
||||
<option value="low" {{if eq .assignment.Priority "low" }}selected{{end}}>低</option>
|
||||
<option value="medium" {{if eq .assignment.Priority "medium"}}selected{{end}}>中</option>
|
||||
<option value="high" {{if eq .assignment.Priority "high" }}selected{{end}}>高</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="due_date" class="form-label">提出期限 <span class="text-danger">*</span></label>
|
||||
<input type="datetime-local" class="form-control" id="due_date" name="due_date"
|
||||
value="{{formatDateInput .assignment.DueDate}}" required>
|
||||
<label for="due_date" class="form-label">提出期限 <span class="text-danger" aria-hidden="true">*</span><span class="visually-hidden">（必須）</span></label>
|
||||
<input type="datetime-local" class="form-control" id="due_date" name="due_date" value="{{formatDateInput .assignment.DueDate}}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="description" class="form-label">説明</label>
|
||||
<textarea class="form-control" id="description" name="description"
|
||||
rows="3">{{.assignment.Description}}</textarea>
|
||||
<textarea class="form-control" id="description" name="description" rows="3">{{.assignment.Description}}</textarea>
|
||||
</div>
|
||||
<!-- 通知設定 -->
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-body py-2">
|
||||
<h6 class="mb-2"><i class="bi bi-bell me-1"></i>通知設定</h6>
|
||||
<!-- 督促通知 -->
|
||||
<h6 class="mb-2"><i class="bi bi-bell me-1" aria-hidden="true"></i>通知設定</h6>
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="urgent_reminder_enabled"
|
||||
name="urgent_reminder_enabled" {{if
|
||||
.assignment.UrgentReminderEnabled}}checked{{end}}>
|
||||
<input class="form-check-input" type="checkbox" id="urgent_reminder_enabled" name="urgent_reminder_enabled" {{if .assignment.UrgentReminderEnabled}}checked{{end}}>
|
||||
<label class="form-check-label" for="urgent_reminder_enabled">
|
||||
督促通知（期限3時間前から繰り返し通知）
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-text small mb-2">
|
||||
重要度により間隔が変わります：大=10分、中=30分、小=1時間
|
||||
重要度により通知間隔が変わります：高=10分ごと、中=30分ごと、低=1時間ごと
|
||||
</div>
|
||||
<hr class="my-2">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="reminder_enabled"
|
||||
name="reminder_enabled" {{if .assignment.ReminderEnabled}}checked{{end}}
|
||||
onchange="toggleReminderDate(this)">
|
||||
<input class="form-check-input" type="checkbox" id="reminder_enabled" name="reminder_enabled" {{if .assignment.ReminderEnabled}}checked{{end}} onchange="toggleReminderDate(this)">
|
||||
<label class="form-check-label" for="reminder_enabled">
|
||||
リマインダー（指定日時に通知）
|
||||
</label>
|
||||
</div>
|
||||
<div class="mt-2" id="reminder_at_group"
|
||||
style="display: {{if .assignment.ReminderEnabled}}block{{else}}none{{end}};">
|
||||
<div class="mt-2" id="reminder_at_group" style="display: {{if .assignment.ReminderEnabled}}block{{else}}none{{end}};">
|
||||
<label for="reminder_at" class="form-label small">通知日時</label>
|
||||
<input type="datetime-local" class="form-control form-control-sm" id="reminder_at"
|
||||
name="reminder_at"
|
||||
value="{{if .assignment.ReminderAt}}{{formatDateInput .assignment.ReminderAt}}{{end}}">
|
||||
<input type="datetime-local" class="form-control form-control-sm" id="reminder_at" name="reminder_at" value="{{if .assignment.ReminderAt}}{{formatDateInput .assignment.ReminderAt}}{{end}}">
|
||||
{{if .assignment.ReminderSent}}
|
||||
<div class="text-success small mt-1"><i class="bi bi-check-circle me-1"></i>通知送信済み</div>
|
||||
<div class="text-success small mt-1"><i class="bi bi-check-circle me-1" aria-hidden="true"></i>通知送信済み</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{if .recurring}}
|
||||
<!-- 繰り返し設定 -->
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-body py-2">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h6 class="mb-0"><i class="bi bi-arrow-repeat me-1"></i>繰り返し設定</h6>
|
||||
<h6 class="mb-0"><i class="bi bi-arrow-repeat me-1" aria-hidden="true"></i>繰り返し設定</h6>
|
||||
<a href="/recurring/{{.recurring.ID}}/edit" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-pencil me-1"></i>編集
|
||||
<i class="bi bi-pencil me-1" aria-hidden="true"></i>編集
|
||||
</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
@@ -110,7 +96,7 @@
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>更新</button>
|
||||
<button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1" aria-hidden="true"></i>更新</button>
|
||||
<a href="/assignments" class="btn btn-outline-secondary">キャンセル</a>
|
||||
</div>
|
||||
</form>
|
||||
@@ -123,4 +109,4 @@
|
||||
document.getElementById('reminder_at_group').style.display = checkbox.checked ? 'block' : 'none';
|
||||
}
|
||||
</script>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@@ -2,132 +2,100 @@
|
||||
|
||||
{{define "content"}}
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<h4 class="mb-0 fw-bold"><i class="bi bi-list-task me-2"></i>課題一覧</h4>
|
||||
</div>
|
||||
<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">
|
||||
<button class="btn btn-sm btn-secondary text-white" onclick="toggleCountdown()" id="toggleCountdownBtn">
|
||||
<i class="bi bi-clock me-1"></i><span id="countdownBtnText">カウントダウン表示中</span>
|
||||
<button class="btn btn-sm btn-secondary text-white" onclick="toggleCountdown()" id="toggleCountdownBtn" aria-pressed="false">
|
||||
<i class="bi bi-clock me-1" aria-hidden="true"></i><span id="countdownBtnText">カウントダウンを非表示</span>
|
||||
</button>
|
||||
<a href="/assignments/new" class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-plus-lg me-1"></i>新規登録
|
||||
<i class="bi bi-plus-lg me-1" aria-hidden="true"></i>新規登録
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<ul class="nav nav-tabs border-0 mb-2" id="assignmentTabs">
|
||||
<li class="nav-item">
|
||||
<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}}">
|
||||
未完了
|
||||
</a>
|
||||
<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}}">未完了</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<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}}">
|
||||
今日が期限
|
||||
</a>
|
||||
<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}}">今日が期限</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<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}}">
|
||||
今週が期限
|
||||
</a>
|
||||
<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}}">今週が期限</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<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}}">
|
||||
完了済み
|
||||
</a>
|
||||
<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}}">完了済み</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<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}}">
|
||||
期限切れ
|
||||
</a>
|
||||
<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}}">期限切れ</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link py-2 rounded-0 border-0 text-muted"
|
||||
href="/recurring">
|
||||
繰り返し
|
||||
<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;">
|
||||
|
||||
<!-- Filter Section -->
|
||||
<form action="/assignments" method="GET" class="row g-2 mb-3 align-items-center">
|
||||
<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-5">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-white border-end-0 text-muted"><i class="bi bi-search"></i></span>
|
||||
<input type="text" class="form-control border-start-0 ps-0 bg-white" name="q" placeholder="検索..."
|
||||
value="{{.query}}">
|
||||
<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-4">
|
||||
<select class="form-select form-select-sm bg-white" name="priority" onchange="this.form.submit()">
|
||||
<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>
|
||||
<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-3">
|
||||
<a href="/assignments?filter={{.filter}}" class="btn btn-sm btn-outline-secondary w-100 bg-white">
|
||||
クリア
|
||||
</a>
|
||||
<a href="/assignments?filter={{.filter}}" class="btn btn-sm btn-outline-secondary w-100 bg-white">クリア</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Table -->
|
||||
<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">
|
||||
<table class="table table-hover align-middle mb-0 custom-table" aria-label="課題一覧">
|
||||
<thead class="bg-secondary-subtle">
|
||||
<tr>
|
||||
<th style="width: 50px;" class="ps-3 text-center text-dark fw-bold">状態</th>
|
||||
<th style="width: 120px;" class="text-dark fw-bold">科目</th>
|
||||
<th style="width: 80px;" class="text-dark fw-bold">重要度</th>
|
||||
<th class="text-dark fw-bold">タイトル</th>
|
||||
<th style="width: 140px;" class="text-dark fw-bold">期限</th>
|
||||
<th style="width: 120px;" class="countdown-col text-dark fw-bold">残り</th>
|
||||
<th style="width: 80px;" class="text-end pe-3 text-dark fw-bold">操作</th>
|
||||
<th scope="col" style="width: 50px;" class="ps-3 text-center text-dark fw-bold">状態</th>
|
||||
<th scope="col" style="width: 120px;" class="text-dark fw-bold">科目</th>
|
||||
<th scope="col" style="width: 80px;" class="text-dark fw-bold">重要度</th>
|
||||
<th scope="col" class="text-dark fw-bold">タイトル</th>
|
||||
<th scope="col" style="width: 140px;" class="text-dark fw-bold">期限</th>
|
||||
<th scope="col" style="width: 120px;" class="countdown-col text-dark fw-bold">残り</th>
|
||||
<th scope="col" style="width: 80px;" class="text-end pe-3 text-dark fw-bold">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .assignments}}
|
||||
<tr class="assignment-row border-bottom" data-due-ts="{{.DueDate.Unix}}"
|
||||
data-completed="{{.IsCompleted}}">
|
||||
<tr class="assignment-row border-bottom" data-due-ts="{{.DueDate.Unix}}" data-completed="{{.IsCompleted}}">
|
||||
<td class="ps-3 text-center">
|
||||
{{if .IsCompleted}}
|
||||
<form action="/assignments/{{.ID}}/toggle" method="POST" class="d-inline">
|
||||
<input type="hidden" name="_csrf" value="{{$.csrfToken}}">
|
||||
<button type="submit"
|
||||
class="btn btn-link p-0 text-success text-decoration-none hover-dark"
|
||||
title="未完了に戻す">
|
||||
<i class="bi bi-check-circle-fill"></i>
|
||||
<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">
|
||||
<input type="hidden" name="_csrf" value="{{$.csrfToken}}">
|
||||
<button type="submit"
|
||||
class="btn btn-link p-0 text-secondary text-decoration-none hover-dark"
|
||||
title="完了にする">
|
||||
<i class="bi bi-circle"></i>
|
||||
<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}}
|
||||
@@ -135,57 +103,54 @@
|
||||
<td><span class="badge bg-secondary text-white border-0 fw-bold">{{.Subject}}</span></td>
|
||||
<td>
|
||||
{{if eq .Priority "high"}}
|
||||
<span class="badge bg-danger text-white border-0 fw-bold small">高</span>
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<div class="fw-bold text-dark text-truncate" style="max-width: 280px;">{{.Title}}</div>
|
||||
{{if .RecurringAssignmentID}}
|
||||
<button type="button" class="btn btn-link p-0 ms-2 text-info" data-bs-toggle="modal"
|
||||
data-bs-target="#recurringModal" data-recurring-id="{{.RecurringAssignmentID}}"
|
||||
<button type="button" class="btn btn-link p-0 ms-2 text-info btn-touch" 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}}"
|
||||
title="繰り返し課題">
|
||||
<i class="fa-solid fa-repeat"></i>
|
||||
aria-label="繰り返し設定を表示">
|
||||
<i class="bi bi-repeat" aria-hidden="true"></i>
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="small fw-bold text-dark user-select-all">{{.DueDate.Format "2006/01/02 15:04"}}
|
||||
</div>
|
||||
<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">...</span>
|
||||
<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="btn-group">
|
||||
<a href="/assignments/{{.ID}}/edit" class="text-primary me-3 text-decoration-none">
|
||||
<i class="bi bi-pencil-fill"></i>
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<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 .RecurringAssignmentID}}
|
||||
<button type="button" class="btn btn-link p-0 text-danger text-decoration-none border-0 bg-transparent"
|
||||
onclick="showDeleteRecurringModal({{.ID}}, {{.RecurringAssignmentID}})">
|
||||
<i class="bi bi-trash-fill"></i>
|
||||
<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"
|
||||
onsubmit="return confirm('削除しますか？');">
|
||||
<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">
|
||||
<i class="bi bi-trash-fill"></i>
|
||||
<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}}
|
||||
@@ -194,8 +159,12 @@
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr>
|
||||
<td colspan="7" class="text-center py-4 text-secondary fw-bold small">
|
||||
課題なし
|
||||
<td colspan="7" 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}}
|
||||
@@ -205,21 +174,19 @@
|
||||
</div>
|
||||
{{if gt .totalPages 1}}
|
||||
<div class="card-footer bg-white border-top-0 py-2">
|
||||
<nav>
|
||||
<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}}">
|
||||
<i class="bi bi-chevron-left"></i>
|
||||
<a class="page-link border-0 text-secondary" href="/assignments?page={{.prevPage}}&filter={{.filter}}&q={{.query}}&priority={{.priority}}" 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">{{.currentPage}} / {{.totalPages}}</span>
|
||||
<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}}">
|
||||
<i class="bi bi-chevron-right"></i>
|
||||
<a class="page-link border-0 text-secondary" href="/assignments?page={{.nextPage}}&filter={{.filter}}&q={{.query}}&priority={{.priority}}" aria-label="次のページ">
|
||||
<i class="bi bi-chevron-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -229,121 +196,119 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var _countdownInterval = null;
|
||||
|
||||
function updateCountdowns() {
|
||||
const now = new Date();
|
||||
document.querySelectorAll('.assignment-row').forEach(row => {
|
||||
var now = new Date();
|
||||
var hasUnder24h = false;
|
||||
|
||||
document.querySelectorAll('.assignment-row').forEach(function(row) {
|
||||
if (row.getAttribute('data-completed') === 'true') return;
|
||||
|
||||
const dueTs = row.getAttribute('data-due-ts');
|
||||
var dueTs = row.getAttribute('data-due-ts');
|
||||
if (!dueTs) return;
|
||||
|
||||
// Fix: Use timestamp directly to avoid parsing issues
|
||||
const due = new Date(parseInt(dueTs) * 1000);
|
||||
var due = new Date(parseInt(dueTs) * 1000);
|
||||
if (isNaN(due.getTime())) return;
|
||||
|
||||
const diff = due - now;
|
||||
const countdownEl = row.querySelector('.countdown');
|
||||
var diff = due - now;
|
||||
var countdownEl = row.querySelector('.countdown');
|
||||
|
||||
// Reset classes
|
||||
row.classList.remove('anxiety-danger', 'anxiety-warning', 'bg-danger-subtle');
|
||||
if (countdownEl) countdownEl.className = 'countdown small fw-bold font-monospace';
|
||||
|
||||
if (diff < 0) {
|
||||
if (countdownEl) {
|
||||
countdownEl.textContent = "期限切れ";
|
||||
countdownEl.textContent = '期限切れ';
|
||||
countdownEl.classList.add('text-danger');
|
||||
}
|
||||
row.classList.add('bg-danger-subtle');
|
||||
return;
|
||||
}
|
||||
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
||||
var days = Math.floor(diff / 86400000);
|
||||
var hours = Math.floor((diff % 86400000) / 3600000);
|
||||
var minutes = Math.floor((diff % 3600000) / 60000);
|
||||
var seconds = Math.floor((diff % 60000) / 1000);
|
||||
var remainingHours = days * 24 + hours;
|
||||
|
||||
let text = "";
|
||||
let remainingHours = (days * 24) + hours;
|
||||
|
||||
if (days > 0) {
|
||||
text += `${days}日 `;
|
||||
}
|
||||
text += `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
||||
var text = (days > 0 ? days + '日 ' : '') +
|
||||
String(hours).padStart(2, '0') + ':' +
|
||||
String(minutes).padStart(2, '0') + ':' +
|
||||
String(seconds).padStart(2, '0');
|
||||
|
||||
if (countdownEl) countdownEl.textContent = text;
|
||||
|
||||
// Anxiety Logic
|
||||
if (remainingHours < 24) {
|
||||
hasUnder24h = true;
|
||||
row.classList.add('anxiety-danger');
|
||||
if (countdownEl) {
|
||||
countdownEl.classList.add('text-danger', 'countdown-urgent');
|
||||
countdownEl.innerHTML = '<i class="bi bi-exclamation-triangle-fill me-1"></i>' + text;
|
||||
countdownEl.innerHTML = '<i class="bi bi-exclamation-triangle-fill me-1" aria-hidden="true"></i>' + text;
|
||||
}
|
||||
} else if (days < 7) {
|
||||
row.classList.add('anxiety-warning');
|
||||
if (countdownEl) {
|
||||
countdownEl.classList.add('text-dark');
|
||||
countdownEl.innerHTML = '<i class="bi bi-exclamation-triangle-fill text-warning me-1"></i>' + text;
|
||||
countdownEl.innerHTML = '<i class="bi bi-exclamation-triangle-fill text-warning me-1" aria-hidden="true"></i>' + text;
|
||||
}
|
||||
} else {
|
||||
if (countdownEl) countdownEl.classList.add('text-secondary');
|
||||
}
|
||||
});
|
||||
|
||||
scheduleNextUpdate(hasUnder24h);
|
||||
}
|
||||
|
||||
function scheduleNextUpdate(hasUnder24h) {
|
||||
if (_countdownInterval !== null) return;
|
||||
var interval = hasUnder24h ? 1000 : 60000;
|
||||
_countdownInterval = setTimeout(function() {
|
||||
_countdownInterval = null;
|
||||
updateCountdowns();
|
||||
}, interval);
|
||||
}
|
||||
|
||||
function toggleCountdown() {
|
||||
const cols = document.querySelectorAll('.countdown-col');
|
||||
const btnText = document.getElementById('countdownBtnText');
|
||||
const isHidden = cols[0] && cols[0].style.display === 'none';
|
||||
var cols = document.querySelectorAll('.countdown-col');
|
||||
var btn = document.getElementById('toggleCountdownBtn');
|
||||
var btnText = document.getElementById('countdownBtnText');
|
||||
var isHidden = cols[0] && cols[0].style.display === 'none';
|
||||
|
||||
cols.forEach(col => {
|
||||
col.style.display = isHidden ? '' : 'none';
|
||||
});
|
||||
cols.forEach(function(col) { col.style.display = isHidden ? '' : 'none'; });
|
||||
|
||||
btnText.textContent = isHidden ? 'カウントダウン表示中' : 'カウントダウン非表示中';
|
||||
localStorage.setItem('countdownHidden', !isHidden);
|
||||
var nowHidden = !isHidden;
|
||||
btnText.textContent = nowHidden ? 'カウントダウンを表示' : 'カウントダウンを非表示';
|
||||
btn.setAttribute('aria-pressed', nowHidden ? 'true' : 'false');
|
||||
localStorage.setItem('countdownHidden', nowHidden);
|
||||
}
|
||||
|
||||
// Init with higher frequency for smooth panic
|
||||
setInterval(updateCountdowns, 1000);
|
||||
updateCountdowns();
|
||||
|
||||
// Check preference
|
||||
const isHidden = localStorage.getItem('countdownHidden') === 'true';
|
||||
if (isHidden) {
|
||||
document.querySelectorAll('.countdown-col').forEach(col => {
|
||||
col.style.display = 'none';
|
||||
});
|
||||
const btnText = document.getElementById('countdownBtnText');
|
||||
if (btnText) btnText.textContent = 'カウントダウン非表示中';
|
||||
if (localStorage.getItem('countdownHidden') === 'true') {
|
||||
document.querySelectorAll('.countdown-col').forEach(function(col) { col.style.display = 'none'; });
|
||||
var btn = document.getElementById('toggleCountdownBtn');
|
||||
var btnText = document.getElementById('countdownBtnText');
|
||||
if (btnText) btnText.textContent = 'カウントダウンを表示';
|
||||
if (btn) btn.setAttribute('aria-pressed', 'true');
|
||||
}
|
||||
|
||||
// Recurring modal handler - wait for DOM to be ready
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const recurringModal = document.getElementById('recurringModal');
|
||||
var recurringModal = document.getElementById('recurringModal');
|
||||
if (recurringModal) {
|
||||
recurringModal.addEventListener('show.bs.modal', function (event) {
|
||||
const button = event.relatedTarget;
|
||||
const id = button.getAttribute('data-recurring-id');
|
||||
const assignmentId = button.getAttribute('data-assignment-id');
|
||||
const title = button.getAttribute('data-recurring-title');
|
||||
const type = button.getAttribute('data-recurring-type');
|
||||
const isActive = button.getAttribute('data-recurring-active') === 'true';
|
||||
recurringModal.addEventListener('show.bs.modal', function(event) {
|
||||
var button = event.relatedTarget;
|
||||
var id = button.getAttribute('data-recurring-id');
|
||||
var title = button.getAttribute('data-recurring-title');
|
||||
var type = button.getAttribute('data-recurring-type');
|
||||
var isActive = button.getAttribute('data-recurring-active') === 'true';
|
||||
|
||||
document.getElementById('recurringModalTitle').textContent = title;
|
||||
document.getElementById('recurringStopForm').action = '/recurring/' + id + '/stop';
|
||||
document.getElementById('recurringEditBtn').href = '/recurring/' + id + '/edit';
|
||||
|
||||
const typeLabels = {
|
||||
'daily': '毎日',
|
||||
'weekly': '毎週',
|
||||
'monthly': '毎月',
|
||||
'unknown': '(読み込み中...)'
|
||||
};
|
||||
var typeLabels = { daily: '毎日', weekly: '毎週', monthly: '毎月', unknown: '(不明)' };
|
||||
document.getElementById('recurringTypeLabel').textContent = typeLabels[type] || type || '不明';
|
||||
|
||||
|
||||
const statusEl = document.getElementById('recurringStatus');
|
||||
var statusEl = document.getElementById('recurringStatus');
|
||||
if (isActive) {
|
||||
statusEl.innerHTML = '<span class="badge bg-success">有効</span>';
|
||||
document.getElementById('recurringStopBtn').style.display = 'inline-block';
|
||||
@@ -356,43 +321,41 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Recurring Modal -->
|
||||
<div class="modal fade" id="recurringModal" tabindex="-1">
|
||||
<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"><i class="fa-solid fa-repeat me-2"></i>繰り返し課題</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
<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;">繰り返し</th>
|
||||
<th class="text-muted" style="width: 100px;" scope="row">繰り返し</th>
|
||||
<td id="recurringTypeLabel">読み込み中...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-muted">状態</th>
|
||||
<th class="text-muted" scope="row">状態</th>
|
||||
<td id="recurringStatus">読み込み中...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="alert alert-info small mb-0">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
<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"></i>編集
|
||||
<i class="bi bi-pencil me-1" aria-hidden="true"></i>編集
|
||||
</a>
|
||||
<form id="recurringStopForm" method="POST" class="d-inline">
|
||||
<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"
|
||||
onclick="return confirm('繰り返しを停止しますか？');">
|
||||
<i class="bi bi-stop-fill me-1"></i>停止
|
||||
<button type="submit" id="recurringStopBtn" class="btn btn-danger">
|
||||
<i class="bi bi-stop-fill me-1" aria-hidden="true"></i>停止
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -400,13 +363,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Recurring Confirmation Modal -->
|
||||
<div class="modal fade" id="deleteRecurringModal" tabindex="-1">
|
||||
<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"><i class="bi bi-trash me-2"></i>繰り返し課題の削除</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
<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>
|
||||
@@ -416,15 +378,11 @@
|
||||
<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>
|
||||
<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>
|
||||
<button type="submit" class="btn btn-danger">削除して繰り返しも削除</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -432,11 +390,11 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showDeleteRecurringModal(assignmentId, recurringId) {
|
||||
var modal = new bootstrap.Modal(document.getElementById('deleteRecurringModal'));
|
||||
document.getElementById('deleteOnlyForm').action = '/assignments/' + assignmentId + '/delete';
|
||||
document.getElementById('deleteAndStopForm').action = '/assignments/' + assignmentId + '/delete?stop_recurring=' + recurringId;
|
||||
modal.show();
|
||||
}
|
||||
function showDeleteRecurringModal(assignmentId, recurringId) {
|
||||
var modal = new bootstrap.Modal(document.getElementById('deleteRecurringModal'));
|
||||
document.getElementById('deleteOnlyForm').action = '/assignments/' + assignmentId + '/delete';
|
||||
document.getElementById('deleteAndStopForm').action = '/assignments/' + assignmentId + '/delete?stop_recurring=' + recurringId;
|
||||
modal.show();
|
||||
}
|
||||
</script>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@@ -5,83 +5,71 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-plus-circle me-2"></i>課題登録</h5>
|
||||
<h5 class="mb-0"><i class="bi bi-plus-circle me-2" aria-hidden="true"></i>課題登録</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{{if .error}}<div class="alert alert-danger">{{.error}}</div>{{end}}
|
||||
{{if .error}}<div class="alert alert-danger" role="alert">{{.error}}</div>{{end}}
|
||||
<form method="POST" action="/assignments">
|
||||
{{.csrfField}}
|
||||
<div class="mb-3">
|
||||
<label for="title" class="form-label">タイトル <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="title" name="title" value="{{.formTitle}}" required
|
||||
autofocus>
|
||||
<label for="title" class="form-label">タイトル <span class="text-danger" aria-hidden="true">*</span><span class="visually-hidden">（必須）</span></label>
|
||||
<input type="text" class="form-control" id="title" name="title" value="{{.formTitle}}" required autofocus>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="subject" class="form-label">科目</label>
|
||||
<input type="text" class="form-control" id="subject" name="subject" value="{{.subject}}"
|
||||
placeholder="例: 数学、英語、情報">
|
||||
<input type="text" class="form-control" id="subject" name="subject" value="{{.subject}}" placeholder="例: 数学、英語、情報">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="priority" class="form-label">重要度</label>
|
||||
<select class="form-select" id="priority" name="priority">
|
||||
<option value="low" {{if eq .priority "low" }}selected{{end}}>小</option>
|
||||
<option value="medium" {{if not (or (eq .priority "low" ) (eq .priority "high"
|
||||
))}}selected{{end}}>中</option>
|
||||
<option value="high" {{if eq .priority "high" }}selected{{end}}>大</option>
|
||||
<option value="low" {{if eq .priority "low" }}selected{{end}}>低</option>
|
||||
<option value="medium" {{if not (or (eq .priority "low") (eq .priority "high"))}}selected{{end}}>中</option>
|
||||
<option value="high" {{if eq .priority "high" }}selected{{end}}>高</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="due_date" class="form-label">提出期限 <span class="text-danger">*</span></label>
|
||||
<input type="datetime-local" class="form-control" id="due_date" name="due_date" required>
|
||||
<label for="due_date" class="form-label">提出期限 <span class="text-danger" aria-hidden="true">*</span><span class="visually-hidden">（必須）</span></label>
|
||||
<input type="datetime-local" class="form-control" id="due_date" name="due_date" value="{{.defaultDueDate}}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="description" class="form-label">説明</label>
|
||||
<textarea class="form-control" id="description" name="description"
|
||||
rows="3">{{.description}}</textarea>
|
||||
<textarea class="form-control" id="description" name="description" rows="3">{{.description}}</textarea>
|
||||
</div>
|
||||
<!-- 通知設定 -->
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-body py-2">
|
||||
<h6 class="mb-2"><i class="bi bi-bell me-1"></i>通知設定</h6>
|
||||
<!-- 督促通知 -->
|
||||
<h6 class="mb-2"><i class="bi bi-bell me-1" aria-hidden="true"></i>通知設定</h6>
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="urgent_reminder_enabled"
|
||||
name="urgent_reminder_enabled" checked>
|
||||
<input class="form-check-input" type="checkbox" id="urgent_reminder_enabled" name="urgent_reminder_enabled" checked>
|
||||
<label class="form-check-label" for="urgent_reminder_enabled">
|
||||
督促通知（期限3時間前から繰り返し通知）
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-text small mb-2">
|
||||
重要度により間隔が変わります：大=10分、中=30分、小=1時間
|
||||
重要度により通知間隔が変わります：高=10分ごと、中=30分ごと、低=1時間ごと
|
||||
</div>
|
||||
<hr class="my-2">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="reminder_enabled"
|
||||
name="reminder_enabled" onchange="toggleReminderDate(this)">
|
||||
<input class="form-check-input" type="checkbox" id="reminder_enabled" name="reminder_enabled" onchange="toggleReminderDate(this)">
|
||||
<label class="form-check-label" for="reminder_enabled">
|
||||
リマインダー（指定日時に通知）
|
||||
</label>
|
||||
</div>
|
||||
<div class="mt-2" id="reminder_at_group" style="display: none;">
|
||||
<label for="reminder_at" class="form-label small">通知日時</label>
|
||||
<input type="datetime-local" class="form-control form-control-sm" id="reminder_at"
|
||||
name="reminder_at">
|
||||
<input type="datetime-local" class="form-control form-control-sm" id="reminder_at" name="reminder_at">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-header py-2" style="cursor: pointer;" data-bs-toggle="collapse"
|
||||
data-bs-target="#recurringSettings">
|
||||
<h6 class="mb-0"><i class="bi bi-arrow-repeat me-1"></i>繰り返し設定 <i
|
||||
class="bi bi-chevron-down float-end"></i></h6>
|
||||
<div class="card-header py-2" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#recurringSettings" aria-expanded="false" aria-controls="recurringSettings">
|
||||
<h6 class="mb-0"><i class="bi bi-arrow-repeat me-1" aria-hidden="true"></i>繰り返し設定 <i class="bi bi-chevron-down float-end" aria-hidden="true"></i></h6>
|
||||
</div>
|
||||
<div class="collapse" id="recurringSettings">
|
||||
<div class="card-body py-2">
|
||||
<div class="row mb-2">
|
||||
<div class="col-6">
|
||||
<label for="recurrence_type" class="form-label small">繰り返しタイプ</label>
|
||||
<select class="form-select form-select-sm" id="recurrence_type"
|
||||
name="recurrence_type" onchange="updateRecurrenceOptions()">
|
||||
<select class="form-select form-select-sm" id="recurrence_type" name="recurrence_type" onchange="updateRecurrenceOptions()">
|
||||
<option value="none" selected>なし</option>
|
||||
<option value="daily">毎日</option>
|
||||
<option value="weekly">毎週</option>
|
||||
@@ -91,107 +79,130 @@
|
||||
<div class="col-6" id="interval_group" style="display: none;">
|
||||
<label for="recurrence_interval" class="form-label small">間隔</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="number" class="form-control" id="recurrence_interval"
|
||||
name="recurrence_interval" value="1" min="1" max="12">
|
||||
<input type="number" class="form-control" id="recurrence_interval" name="recurrence_interval" value="1" min="1" max="12" onchange="updateLeadDaysMax()">
|
||||
<span class="input-group-text" id="interval_label">週</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="weekday_group" style="display: none;" class="mb-2">
|
||||
<div id="weekday_group" class="mb-2">
|
||||
<label class="form-label small">曜日</label>
|
||||
<div class="btn-group btn-group-sm w-100" role="group">
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd0"
|
||||
value="0" {{if eq .currentWeekday 0}}checked{{end}}>
|
||||
<div class="btn-group btn-group-sm w-100" role="group" aria-label="曜日選択">
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd0" value="0" {{if eq .currentWeekday 0}}checked{{end}}>
|
||||
<label class="btn btn-outline-primary" for="wd0">日</label>
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd1"
|
||||
value="1" {{if eq .currentWeekday 1}}checked{{end}}>
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd1" value="1" {{if eq .currentWeekday 1}}checked{{end}}>
|
||||
<label class="btn btn-outline-primary" for="wd1">月</label>
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd2"
|
||||
value="2" {{if eq .currentWeekday 2}}checked{{end}}>
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd2" value="2" {{if eq .currentWeekday 2}}checked{{end}}>
|
||||
<label class="btn btn-outline-primary" for="wd2">火</label>
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd3"
|
||||
value="3" {{if eq .currentWeekday 3}}checked{{end}}>
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd3" value="3" {{if eq .currentWeekday 3}}checked{{end}}>
|
||||
<label class="btn btn-outline-primary" for="wd3">水</label>
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd4"
|
||||
value="4" {{if eq .currentWeekday 4}}checked{{end}}>
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd4" value="4" {{if eq .currentWeekday 4}}checked{{end}}>
|
||||
<label class="btn btn-outline-primary" for="wd4">木</label>
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd5"
|
||||
value="5" {{if eq .currentWeekday 5}}checked{{end}}>
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd5" value="5" {{if eq .currentWeekday 5}}checked{{end}}>
|
||||
<label class="btn btn-outline-primary" for="wd5">金</label>
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd6"
|
||||
value="6" {{if eq .currentWeekday 6}}checked{{end}}>
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd6" value="6" {{if eq .currentWeekday 6}}checked{{end}}>
|
||||
<label class="btn btn-outline-primary" for="wd6">土</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="day_group" style="display: none;" class="mb-2">
|
||||
<div id="day_group" class="mb-2">
|
||||
<label for="recurrence_day" class="form-label small">日</label>
|
||||
<select class="form-select form-select-sm" id="recurrence_day"
|
||||
name="recurrence_day">
|
||||
<select class="form-select form-select-sm" id="recurrence_day" name="recurrence_day">
|
||||
{{range $i := seq 1 31}}
|
||||
<option value="{{$i}}" {{if eq $.currentDay $i}}selected{{end}}>{{$i}}日</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
<div id="lead_days_group" style="display: none;" class="mb-2">
|
||||
<label class="form-label small">リストに追加するタイミング</label>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="input-group input-group-sm" style="width: 120px;">
|
||||
<input type="number" class="form-control" id="generation_lead_days" name="generation_lead_days" value="0" min="0" max="0">
|
||||
<span class="input-group-text">日前</span>
|
||||
</div>
|
||||
<input type="time" class="form-control form-control-sm" id="generation_lead_time" name="generation_lead_time" style="width: 110px;">
|
||||
</div>
|
||||
<div class="form-text small text-muted" id="lead_days_hint"></div>
|
||||
</div>
|
||||
<div id="end_group" style="display: none;">
|
||||
<label class="form-label small">終了条件</label>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="end_type" id="end_never"
|
||||
value="never" checked>
|
||||
<input class="form-check-input" type="radio" name="end_type" id="end_never" value="never" checked>
|
||||
<label class="form-check-label small" for="end_never">無期限</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="end_type" id="end_count"
|
||||
value="count">
|
||||
<input class="form-check-input" type="radio" name="end_type" id="end_count" value="count">
|
||||
<label class="form-check-label small" for="end_count">回数</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="end_type" id="end_date"
|
||||
value="date">
|
||||
<input class="form-check-input" type="radio" name="end_type" id="end_date" value="date">
|
||||
<label class="form-check-label small" for="end_date">終了日</label>
|
||||
</div>
|
||||
<div class="mt-1" id="end_count_group" style="display: none;">
|
||||
<input type="number" class="form-control form-control-sm" id="end_count_value"
|
||||
name="end_count" value="10" min="1" style="width: 100px;">
|
||||
<input type="number" class="form-control form-control-sm" id="end_count_value" name="end_count" value="10" min="1" style="width: 100px;">
|
||||
</div>
|
||||
<div class="mt-1" id="end_date_group" style="display: none;">
|
||||
<input type="date" class="form-control form-control-sm" id="end_date_value"
|
||||
name="end_date" style="width: 150px;">
|
||||
<input type="date" class="form-control form-control-sm" id="end_date_value" name="end_date" style="width: 150px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1" aria-hidden="true"></i>登録</button>
|
||||
<a href="/assignments" class="btn btn-outline-secondary">キャンセル</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>登録</button>
|
||||
<a href="/assignments" class="btn btn-outline-secondary">キャンセル</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function toggleReminderDate(checkbox) {
|
||||
document.getElementById('reminder_at_group').style.display = checkbox.checked ? 'block' : 'none';
|
||||
}
|
||||
function getLeadDaysMax() {
|
||||
const type = document.getElementById('recurrence_type').value;
|
||||
const interval = parseInt(document.getElementById('recurrence_interval').value) || 1;
|
||||
if (type === 'daily') return interval;
|
||||
if (type === 'weekly') return interval * 7;
|
||||
if (type === 'monthly') return interval * 28;
|
||||
return 0;
|
||||
}
|
||||
function updateLeadDaysMax() {
|
||||
const max = getLeadDaysMax();
|
||||
const input = document.getElementById('generation_lead_days');
|
||||
input.max = max;
|
||||
if (parseInt(input.value) > max) input.value = max;
|
||||
const type = document.getElementById('recurrence_type').value;
|
||||
const labels = { daily: '日', weekly: '週', monthly: 'ヶ月' };
|
||||
const interval = document.getElementById('recurrence_interval').value;
|
||||
document.getElementById('lead_days_hint').textContent =
|
||||
max === 0 ? '間隔が1日のため、事前追加は設定できません' :
|
||||
`最大${max}日前まで指定可能（繰り返し間隔${interval}${labels[type]}以内）`;
|
||||
}
|
||||
function updateRecurrenceOptions() {
|
||||
const type = document.getElementById('recurrence_type').value;
|
||||
const isRecurring = type !== 'none';
|
||||
document.getElementById('interval_group').style.display = isRecurring ? 'block' : 'none';
|
||||
document.getElementById('weekday_group').style.display = type === 'weekly' ? 'block' : 'none';
|
||||
document.getElementById('day_group').style.display = type === 'monthly' ? 'block' : 'none';
|
||||
document.getElementById('lead_days_group').style.display = isRecurring ? 'block' : 'none';
|
||||
document.getElementById('end_group').style.display = isRecurring ? 'block' : 'none';
|
||||
const label = document.getElementById('interval_label');
|
||||
if (type === 'daily') label.textContent = '日';
|
||||
else if (type === 'weekly') label.textContent = '週';
|
||||
else if (type === 'monthly') label.textContent = '月';
|
||||
if (label) {
|
||||
if (type === 'daily') label.textContent = '日';
|
||||
else if (type === 'weekly') label.textContent = '週';
|
||||
else if (type === 'monthly') label.textContent = '月';
|
||||
}
|
||||
updateLeadDaysMax();
|
||||
}
|
||||
document.querySelectorAll('input[name="end_type"]').forEach(radio => {
|
||||
document.querySelectorAll('input[name="end_type"]').forEach(function(radio) {
|
||||
radio.addEventListener('change', function () {
|
||||
document.getElementById('end_count_group').style.display = this.value === 'count' ? 'block' : 'none';
|
||||
document.getElementById('end_date_group').style.display = this.value === 'date' ? 'block' : 'none';
|
||||
});
|
||||
});
|
||||
document.getElementById('recurringSettings').addEventListener('show.bs.collapse', function () {
|
||||
updateLeadDaysMax();
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@@ -2,111 +2,43 @@
|
||||
|
||||
{{define "head"}}
|
||||
<style>
|
||||
.stat-card {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.subject-row:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.table-progress {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.stats-table {
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
.stats-table th,
|
||||
.stats-table td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stats-table th:first-child,
|
||||
.stats-table td:first-child {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.stat-card { transition: transform 0.2s ease-in-out; }
|
||||
.stat-card:hover { transform: translateY(-5px); }
|
||||
.progress { height: 25px; }
|
||||
.progress-bar { font-size: 0.9rem; font-weight: 500; }
|
||||
.subject-row:hover { background-color: rgba(0, 0, 0, 0.02); }
|
||||
.table-progress { height: 20px; }
|
||||
.pagination-info { font-size: 0.875rem; }
|
||||
.stats-table { min-width: 700px; }
|
||||
.stats-table th, .stats-table td { white-space: nowrap; }
|
||||
.stats-table th:first-child, .stats-table td:first-child { min-width: 120px; }
|
||||
#shareCard {
|
||||
width: 600px;
|
||||
height: 315px;
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: 0;
|
||||
width: 600px; height: 315px;
|
||||
position: fixed; left: -9999px; top: 0;
|
||||
background: linear-gradient(135deg, #005bea 0%, #00c6fb 100%);
|
||||
padding: 2rem;
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 2rem; color: white; border-radius: 12px;
|
||||
display: flex; flex-direction: column; justify-content: space-between;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
#shareCard .card-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
#shareCard .rate-display {
|
||||
font-size: 5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
#shareCard .card-title { font-size: 1.5rem; font-weight: bold; opacity: 0.9; }
|
||||
#shareCard .rate-display { font-size: 5rem; font-weight: bold; line-height: 1; margin: 1rem 0; }
|
||||
#shareCard .stats-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
display: flex; justify-content: space-around;
|
||||
background: rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
#shareCard .stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#shareCard .stat-label {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.8;
|
||||
display: block;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
#shareCard .stat-value {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
#shareCard .stat-item { text-align: center; }
|
||||
#shareCard .stat-label { font-size: 0.8rem; opacity: 0.8; display: block; margin-bottom: 0.2rem; }
|
||||
#shareCard .stat-value { font-size: 1.4rem; font-weight: bold; }
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
|
||||
{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1><i class="bi bi-bar-chart me-2"></i>統計</h1>
|
||||
<h1><i class="bi bi-bar-chart me-2" aria-hidden="true"></i>統計</h1>
|
||||
<a href="/assignments" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>課題一覧に戻る
|
||||
<i class="bi bi-arrow-left me-1" aria-hidden="true"></i>課題一覧に戻る
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -114,35 +46,67 @@
|
||||
<div class="card-body">
|
||||
<form method="GET" action="/statistics" class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">科目</label>
|
||||
<select name="subject" class="form-select">
|
||||
<label for="subjectFilter" class="form-label">科目</label>
|
||||
<select id="subjectFilter" name="subject" class="form-select">
|
||||
<option value="">すべての科目</option>
|
||||
{{range .subjects}}
|
||||
<option value="{{.}}" {{if eq . $.selectedSubject}}selected{{end}}>{{.}}{{if index
|
||||
$.archivedSubjects .}} (アーカイブ済){{end}}</option>
|
||||
<option value="{{.}}" {{if eq . $.selectedSubject}}selected{{end}}>{{.}}{{if index $.archivedSubjects .}} (アーカイブ済){{end}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">登録日（開始）</label>
|
||||
<input type="date" name="from" class="form-control" value="{{.fromDate}}">
|
||||
<label for="fromDate" class="form-label">登録日（開始）</label>
|
||||
<input type="date" id="fromDate" name="from" class="form-control" value="{{.fromDate}}">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">登録日（終了）</label>
|
||||
<input type="date" name="to" class="form-control" value="{{.toDate}}">
|
||||
<label for="toDate" class="form-label">登録日（終了）</label>
|
||||
<input type="date" id="toDate" name="to" class="form-control" value="{{.toDate}}">
|
||||
</div>
|
||||
<div class="col-md-4 d-flex align-items-end">
|
||||
<button type="submit" class="btn btn-primary me-2">
|
||||
<i class="bi bi-filter me-1"></i>絞り込み
|
||||
<i class="bi bi-filter me-1" aria-hidden="true"></i>絞り込み
|
||||
</button>
|
||||
<a href="/statistics" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-x-lg me-1"></i>リセット
|
||||
<i class="bi bi-x-lg me-1" aria-hidden="true"></i>リセット
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-download me-2" aria-hidden="true"></i>CSVエクスポート
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="GET" action="/assignments/export" class="row g-3">
|
||||
<div class="col-md-3">
|
||||
<label for="csvSubject" class="form-label">科目</label>
|
||||
<select id="csvSubject" name="subject" class="form-select">
|
||||
<option value="">すべての科目</option>
|
||||
{{range .subjects}}
|
||||
<option value="{{.}}">{{.}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="csvFrom" class="form-label">提出期限（開始）</label>
|
||||
<input type="date" id="csvFrom" name="from" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="csvTo" class="form-label">提出期限（終了）</label>
|
||||
<input type="date" id="csvTo" name="to" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-3 d-flex align-items-end">
|
||||
<button type="submit" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-file-earmark-spreadsheet me-1" aria-hidden="true"></i>CSVダウンロード
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<small class="text-muted mt-2 d-block">期間・科目を指定しない場合は全件をエクスポートします。提出期限を基準に絞り込みます。</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-6 col-lg-3">
|
||||
<div class="card stat-card bg-primary text-white h-100">
|
||||
@@ -152,7 +116,7 @@
|
||||
<h6 class="text-white-50 mb-1">総課題数</h6>
|
||||
<h2 class="mb-0">{{.stats.TotalAssignments}}</h2>
|
||||
</div>
|
||||
<i class="bi bi-list-task display-4 opacity-50"></i>
|
||||
<i class="bi bi-list-task display-4 opacity-50" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,7 +129,7 @@
|
||||
<h6 class="text-white-50 mb-1">完了</h6>
|
||||
<h2 class="mb-0">{{.stats.CompletedAssignments}}</h2>
|
||||
</div>
|
||||
<i class="bi bi-check-circle display-4 opacity-50"></i>
|
||||
<i class="bi bi-check-circle display-4 opacity-50" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -178,7 +142,7 @@
|
||||
<h6 class="text-dark-50 mb-1">未完了</h6>
|
||||
<h2 class="mb-0">{{.stats.PendingAssignments}}</h2>
|
||||
</div>
|
||||
<i class="bi bi-hourglass-split display-4 opacity-50"></i>
|
||||
<i class="bi bi-hourglass-split display-4 opacity-50" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -191,7 +155,7 @@
|
||||
<h6 class="text-white-50 mb-1">期限切れ</h6>
|
||||
<h2 class="mb-0">{{.stats.OverdueAssignments}}</h2>
|
||||
</div>
|
||||
<i class="bi bi-exclamation-triangle display-4 opacity-50"></i>
|
||||
<i class="bi bi-exclamation-triangle display-4 opacity-50" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -200,38 +164,24 @@
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span><i class="bi bi-clock-history me-2"></i>期限内完了率</span>
|
||||
<span><i class="bi bi-clock-history me-2" aria-hidden="true"></i>期限内完了率</span>
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="generateShareImage()">
|
||||
<i class="bi bi-share me-1"></i>シェア
|
||||
<i class="bi bi-share me-1" aria-hidden="true"></i>シェア
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-3 text-center mb-3 mb-md-0">
|
||||
<h1
|
||||
class="display-3 mb-0 {{if ge .stats.OnTimeCompletionRate 80.0}}text-success{{else if ge .stats.OnTimeCompletionRate 50.0}}text-warning{{else}}text-danger{{end}}">
|
||||
<p class="display-3 mb-0 {{if ge .stats.OnTimeCompletionRate 80.0}}text-success{{else if ge .stats.OnTimeCompletionRate 50.0}}text-warning{{else}}text-danger{{end}}" aria-label="期限内完了率 {{printf "%.1f" .stats.OnTimeCompletionRate}}パーセント">
|
||||
{{printf "%.1f" .stats.OnTimeCompletionRate}}%
|
||||
</h1>
|
||||
</p>
|
||||
<small class="text-muted">期限内完了率</small>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="progress">
|
||||
{{if ge .stats.OnTimeCompletionRate 80.0}}
|
||||
<div class="progress-bar bg-success" role="progressbar"
|
||||
style="width: {{.stats.OnTimeCompletionRate}}%">
|
||||
<div class="progress" role="progressbar" aria-label="期限内完了率" aria-valuenow="{{printf "%.0f" .stats.OnTimeCompletionRate}}" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar {{if ge .stats.OnTimeCompletionRate 80.0}}bg-success{{else if ge .stats.OnTimeCompletionRate 50.0}}bg-warning{{else}}bg-danger{{end}}" style="width: {{.stats.OnTimeCompletionRate}}%">
|
||||
{{printf "%.1f" .stats.OnTimeCompletionRate}}% 期限内に完了
|
||||
</div>
|
||||
{{else if ge .stats.OnTimeCompletionRate 50.0}}
|
||||
<div class="progress-bar bg-warning" role="progressbar"
|
||||
style="width: {{.stats.OnTimeCompletionRate}}%">
|
||||
{{printf "%.1f" .stats.OnTimeCompletionRate}}% 期限内に完了
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="progress-bar bg-danger" role="progressbar"
|
||||
style="width: {{.stats.OnTimeCompletionRate}}%">
|
||||
{{printf "%.1f" .stats.OnTimeCompletionRate}}% 期限内に完了
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<small class="text-muted mt-2 d-block">完了した課題のうち、期限内に完了した割合を表示しています。</small>
|
||||
</div>
|
||||
@@ -241,22 +191,22 @@
|
||||
|
||||
<div class="card mb-4" id="activeSubjectsCard">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span><i class="bi bi-collection me-2"></i>アクティブ科目</span>
|
||||
<span><i class="bi bi-collection me-2" aria-hidden="true"></i>アクティブ科目</span>
|
||||
<span class="badge bg-primary" id="activeCount">0</span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0 stats-table">
|
||||
<table class="table table-hover mb-0 stats-table" aria-label="アクティブ科目統計">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>科目</th>
|
||||
<th class="text-center">総数</th>
|
||||
<th class="text-center">完了</th>
|
||||
<th class="text-center">未完了</th>
|
||||
<th class="text-center">期限切れ</th>
|
||||
<th class="text-center">完了率</th>
|
||||
<th style="width: 150px;">進捗</th>
|
||||
<th class="text-center">操作</th>
|
||||
<th scope="col">科目</th>
|
||||
<th scope="col" class="text-center">総数</th>
|
||||
<th scope="col" class="text-center">完了</th>
|
||||
<th scope="col" class="text-center">未完了</th>
|
||||
<th scope="col" class="text-center">期限切れ</th>
|
||||
<th scope="col" class="text-center">完了率</th>
|
||||
<th scope="col" style="width: 150px;">進捗</th>
|
||||
<th scope="col" class="text-center">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="activeSubjectsBody"></tbody>
|
||||
@@ -265,7 +215,7 @@
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-between align-items-center">
|
||||
<span class="pagination-info" id="activePageInfo"></span>
|
||||
<nav>
|
||||
<nav aria-label="アクティブ科目ページナビゲーション">
|
||||
<ul class="pagination pagination-sm mb-0" id="activePagination"></ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -273,22 +223,22 @@
|
||||
|
||||
<div class="card" id="archivedSubjectsCard">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span><i class="bi bi-archive me-2"></i>アーカイブ済み科目</span>
|
||||
<span><i class="bi bi-archive me-2" aria-hidden="true"></i>アーカイブ済み科目</span>
|
||||
<span class="badge bg-secondary" id="archivedCount">0</span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0 stats-table">
|
||||
<table class="table table-hover mb-0 stats-table" aria-label="アーカイブ済み科目統計">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>科目</th>
|
||||
<th class="text-center">総数</th>
|
||||
<th class="text-center">完了</th>
|
||||
<th class="text-center">未完了</th>
|
||||
<th class="text-center">期限切れ</th>
|
||||
<th class="text-center">完了率</th>
|
||||
<th style="width: 150px;">進捗</th>
|
||||
<th class="text-center">操作</th>
|
||||
<th scope="col">科目</th>
|
||||
<th scope="col" class="text-center">総数</th>
|
||||
<th scope="col" class="text-center">完了</th>
|
||||
<th scope="col" class="text-center">未完了</th>
|
||||
<th scope="col" class="text-center">期限切れ</th>
|
||||
<th scope="col" class="text-center">完了率</th>
|
||||
<th scope="col" style="width: 150px;">進捗</th>
|
||||
<th scope="col" class="text-center">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="archivedSubjectsBody"></tbody>
|
||||
@@ -297,7 +247,7 @@
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-between align-items-center">
|
||||
<span class="pagination-info" id="archivedPageInfo"></span>
|
||||
<nav>
|
||||
<nav aria-label="アーカイブ済み科目ページナビゲーション">
|
||||
<ul class="pagination pagination-sm mb-0" id="archivedPagination"></ul>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -305,27 +255,25 @@
|
||||
|
||||
<div class="card d-none" id="noSubjectsCard">
|
||||
<div class="card-body text-center py-5">
|
||||
<i class="bi bi-inbox display-1 text-muted"></i>
|
||||
<i class="bi bi-inbox display-1 text-muted" aria-hidden="true"></i>
|
||||
<h4 class="mt-3">科目別の統計データがありません</h4>
|
||||
<p class="text-muted">課題を登録して科目を設定すると、ここに統計が表示されます。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="shareCard">
|
||||
<div id="shareCard" aria-hidden="true">
|
||||
<div>
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<i class="bi bi-journal-check me-2" style="font-size: 1.5rem;"></i>
|
||||
<span class="card-title">Super Homework Manager</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div style="font-size: 1.5rem; font-weight: bold; margin-bottom: 0.5rem; opacity: 0.9;">期限内完了率</div>
|
||||
<div class="rate-display" style="margin-top: 0;">
|
||||
{{printf "%.1f" .stats.OnTimeCompletionRate}}<span style="font-size: 2.5rem;">%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-row">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">完了</span>
|
||||
@@ -342,31 +290,28 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Share Modal -->
|
||||
<div class="modal fade" id="shareModal" tabindex="-1">
|
||||
<div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalHeading" aria-modal="true" role="dialog">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><i class="bi bi-share me-2"></i>シェア</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
<h5 class="modal-title" id="shareModalHeading"><i class="bi bi-share 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 text-center">
|
||||
<div id="sharePreviewContainer" class="mb-3" style="max-width: 100%; overflow: hidden;">
|
||||
</div>
|
||||
<div id="sharePreviewContainer" class="mb-3" style="max-width: 100%; overflow: hidden;"></div>
|
||||
<p class="text-muted small mb-3">
|
||||
画像を保存またはコピーして、SNSに貼り付けてください。<br>
|
||||
<span class="text-danger"><i class="bi bi-info-circle me-1"></i>ブラウザの制限により、自動で画像は添付されません。</span>
|
||||
<span class="text-danger"><i class="bi bi-info-circle me-1" aria-hidden="true"></i>ブラウザの制限により、自動で画像は添付されません。</span>
|
||||
</p>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-outline-primary" onclick="copyImageToClipboard(this)">
|
||||
<i class="bi bi-clipboard me-2"></i>画像をコピー
|
||||
<button class="btn btn-outline-primary" id="copyImageBtn">
|
||||
<i class="bi bi-clipboard me-2" aria-hidden="true"></i>画像をコピー
|
||||
</button>
|
||||
<a id="downloadLink" class="btn btn-outline-secondary" download="stats.png">
|
||||
<i class="bi bi-download me-2"></i>画像を保存
|
||||
<i class="bi bi-download me-2" aria-hidden="true"></i>画像を保存
|
||||
</a>
|
||||
<a id="twitterShareBtn" href="#" target="_blank" class="btn btn-dark"
|
||||
style="background-color: #000;">
|
||||
<i class="bi bi-twitter-x me-2"></i>Xでポストする
|
||||
<a id="twitterShareBtn" href="#" target="_blank" rel="noopener noreferrer" class="btn btn-dark" style="background-color: #000;">
|
||||
<i class="bi bi-twitter-x me-2" aria-hidden="true"></i>Xでポストする
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -381,28 +326,23 @@
|
||||
</script>
|
||||
<script>
|
||||
(function () {
|
||||
var data = JSON.parse(document.getElementById('subjectsData').textContent);
|
||||
var csrfToken = data.csrfToken;
|
||||
var subjects = data.subjects;
|
||||
var PAGE_SIZE = 10;
|
||||
var activeSubjects = subjects.filter(function (s) { return !s.isArchived; });
|
||||
var data = JSON.parse(document.getElementById('subjectsData').textContent);
|
||||
var csrfToken = data.csrfToken;
|
||||
var subjects = data.subjects;
|
||||
var PAGE_SIZE = 10;
|
||||
var activeSubjects = subjects.filter(function (s) { return !s.isArchived; });
|
||||
var archivedSubjects = subjects.filter(function (s) { return s.isArchived; });
|
||||
var activePage = 1;
|
||||
var archivedPage = 1;
|
||||
var activePage = 1;
|
||||
var archivedPage = 1;
|
||||
var _capturedCanvas = null;
|
||||
|
||||
// Share Functionality
|
||||
window.generateShareImage = function () {
|
||||
var card = document.getElementById('shareCard');
|
||||
// Ensure card is visible for rendering but off-screen
|
||||
card.style.display = 'flex';
|
||||
|
||||
html2canvas(card, {
|
||||
backgroundColor: null,
|
||||
scale: 2 // High resolution
|
||||
}).then(canvas => {
|
||||
html2canvas(card, { backgroundColor: null, scale: 2 }).then(function(canvas) {
|
||||
_capturedCanvas = canvas;
|
||||
var imgData = canvas.toDataURL('image/png');
|
||||
|
||||
// Set up preview
|
||||
var previewContainer = document.getElementById('sharePreviewContainer');
|
||||
previewContainer.innerHTML = '';
|
||||
var img = document.createElement('img');
|
||||
@@ -410,67 +350,51 @@
|
||||
img.style.maxWidth = '100%';
|
||||
img.style.borderRadius = '8px';
|
||||
img.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
|
||||
img.alt = '統計シェア画像';
|
||||
previewContainer.appendChild(img);
|
||||
|
||||
// Set up download link
|
||||
var downloadLink = document.getElementById('downloadLink');
|
||||
downloadLink.href = imgData;
|
||||
document.getElementById('downloadLink').href = imgData;
|
||||
|
||||
// Set up Twitter button
|
||||
var text = '私の課題完了状況\n期限内完了率: {{printf "%.1f" .stats.OnTimeCompletionRate}}%\n#SuperHomeworkManager';
|
||||
var twitterBtn = document.getElementById('twitterShareBtn');
|
||||
twitterBtn.href = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text);
|
||||
document.getElementById('twitterShareBtn').href = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(text);
|
||||
|
||||
// Show modal
|
||||
var modal = new bootstrap.Modal(document.getElementById('shareModal'));
|
||||
modal.show();
|
||||
new bootstrap.Modal(document.getElementById('shareModal')).show();
|
||||
});
|
||||
};
|
||||
|
||||
// Helper to convert Data URL to Blob
|
||||
function dataURLtoBlob(dataurl) {
|
||||
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
||||
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
return new Blob([u8arr], { type: mime });
|
||||
var arr = dataurl.split(',');
|
||||
var mime = arr[0].match(/:(.*?);/)[1];
|
||||
var bstr = atob(arr[1]);
|
||||
var n = bstr.length;
|
||||
var u8 = new Uint8Array(n);
|
||||
while (n--) u8[n] = bstr.charCodeAt(n);
|
||||
return new Blob([u8], { type: mime });
|
||||
}
|
||||
|
||||
window.copyImageToClipboard = function (btn) {
|
||||
var canvas = document.querySelector('#sharePreviewContainer img');
|
||||
if (!canvas) return;
|
||||
document.getElementById('copyImageBtn').addEventListener('click', function() {
|
||||
var btn = this;
|
||||
var imgEl = document.querySelector('#sharePreviewContainer img');
|
||||
if (!imgEl) return;
|
||||
|
||||
if (!navigator.clipboard) {
|
||||
alert('このブラウザまたは環境（非HTTPS/非localhost）では、クリップボードへのコピー機能がサポートされていません。\n「画像を保存」を使用してください。');
|
||||
if (!navigator.clipboard || !window.ClipboardItem) {
|
||||
showCopyFeedback('このブラウザではクリップボードへの画像コピーがサポートされていません。「画像を保存」をご利用ください。');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
var blob = dataURLtoBlob(canvas.src);
|
||||
navigator.clipboard.write([
|
||||
new ClipboardItem({
|
||||
'image/png': blob
|
||||
})
|
||||
]).then(function () {
|
||||
var originalText = btn.innerHTML;
|
||||
btn.innerHTML = '<i class="bi bi-check me-2"></i>コピーしました';
|
||||
btn.classList.remove('btn-outline-primary');
|
||||
btn.classList.add('btn-success');
|
||||
setTimeout(function () {
|
||||
btn.innerHTML = originalText;
|
||||
btn.classList.add('btn-outline-primary');
|
||||
btn.classList.remove('btn-success');
|
||||
}, 2000);
|
||||
}).catch(function (err) {
|
||||
console.error('Failed to copy: ', err);
|
||||
alert('画像のコピーに失敗しました。\nエラー: ' + err.message + '\n「画像を保存」を使用してください。');
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Failed to create blob: ', err);
|
||||
alert('画像データの生成に失敗しました: ' + err.message);
|
||||
}
|
||||
};
|
||||
var blob = dataURLtoBlob(imgEl.src);
|
||||
navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]).then(function() {
|
||||
var orig = btn.innerHTML;
|
||||
btn.innerHTML = '<i class="bi bi-check me-2" aria-hidden="true"></i>コピーしました';
|
||||
btn.classList.replace('btn-outline-primary', 'btn-success');
|
||||
setTimeout(function() {
|
||||
btn.innerHTML = orig;
|
||||
btn.classList.replace('btn-success', 'btn-outline-primary');
|
||||
}, 2000);
|
||||
}).catch(function(err) {
|
||||
showCopyFeedback('画像のコピーに失敗しました。「画像を保存」をご利用ください。（' + (err.message || err) + '）');
|
||||
});
|
||||
});
|
||||
|
||||
function getRateClass(rate) {
|
||||
if (rate >= 80) return 'text-success';
|
||||
@@ -479,22 +403,22 @@
|
||||
}
|
||||
|
||||
function renderProgress(completed, pending, overdue, total) {
|
||||
if (total === 0) return '<div class="progress table-progress"></div>';
|
||||
if (total === 0) return '<div class="progress table-progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="進捗なし"></div>';
|
||||
var cP = (completed / total * 100).toFixed(1);
|
||||
var pP = (pending / total * 100).toFixed(1);
|
||||
var oP = (overdue / total * 100).toFixed(1);
|
||||
return '<div class="progress table-progress">' +
|
||||
var pP = (pending / total * 100).toFixed(1);
|
||||
var oP = (overdue / total * 100).toFixed(1);
|
||||
return '<div class="progress table-progress" role="progressbar" aria-valuenow="' + cP + '" aria-valuemin="0" aria-valuemax="100" aria-label="完了' + cP + '%、未完了' + pP + '%、期限切れ' + oP + '%">' +
|
||||
'<div class="progress-bar bg-success" style="width:' + cP + '%" title="完了: ' + completed + '"></div>' +
|
||||
'<div class="progress-bar bg-warning" style="width:' + pP + '%" title="未完了: ' + pending + '"></div>' +
|
||||
'<div class="progress-bar bg-danger" style="width:' + oP + '%" title="期限切れ: ' + overdue + '"></div></div>';
|
||||
'<div class="progress-bar bg-danger" style="width:' + oP + '%" title="期限切れ: ' + overdue + '"></div></div>';
|
||||
}
|
||||
|
||||
function renderRow(s, isArchived) {
|
||||
var action = isArchived ?
|
||||
'<form action="/statistics/unarchive-subject" method="POST" class="d-inline"><input type="hidden" name="_csrf" value="' + csrfToken + '"><input type="hidden" name="subject" value="' + s.subject + '"><button type="submit" class="btn btn-sm btn-outline-success" title="復元"><i class="bi bi-arrow-counterclockwise"></i></button></form>' :
|
||||
'<form action="/statistics/archive-subject" method="POST" class="d-inline"><input type="hidden" name="_csrf" value="' + csrfToken + '"><input type="hidden" name="subject" value="' + s.subject + '"><button type="submit" class="btn btn-sm btn-outline-secondary" title="アーカイブ"><i class="bi bi-archive"></i></button></form>';
|
||||
var action = isArchived
|
||||
? '<form action="/statistics/unarchive-subject" method="POST" class="d-inline"><input type="hidden" name="_csrf" value="' + csrfToken + '"><input type="hidden" name="subject" value="' + XSS.escapeHtml(s.subject) + '"><button type="submit" class="btn btn-sm btn-outline-success" aria-label="' + XSS.escapeHtml(s.subject) + 'を復元"><i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i></button></form>'
|
||||
: '<form action="/statistics/archive-subject" method="POST" class="d-inline"><input type="hidden" name="_csrf" value="' + csrfToken + '"><input type="hidden" name="subject" value="' + XSS.escapeHtml(s.subject) + '"><button type="submit" class="btn btn-sm btn-outline-secondary" aria-label="' + XSS.escapeHtml(s.subject) + 'をアーカイブ"><i class="bi bi-archive" aria-hidden="true"></i></button></form>';
|
||||
return '<tr class="subject-row">' +
|
||||
'<td><a href="/statistics?subject=' + encodeURIComponent(s.subject) + '" class="text-decoration-none"><i class="bi bi-folder me-1"></i>' + s.subject + '</a></td>' +
|
||||
'<td><a href="/statistics?subject=' + encodeURIComponent(s.subject) + '" class="text-decoration-none"><i class="bi bi-folder me-1" aria-hidden="true"></i>' + XSS.escapeHtml(s.subject) + '</a></td>' +
|
||||
'<td class="text-center">' + s.total + '</td>' +
|
||||
'<td class="text-center text-success">' + s.completed + '</td>' +
|
||||
'<td class="text-center text-warning">' + s.pending + '</td>' +
|
||||
@@ -510,7 +434,7 @@
|
||||
if (total <= 1) return;
|
||||
var prev = document.createElement('li');
|
||||
prev.className = 'page-item' + (page === 1 ? ' disabled' : '');
|
||||
prev.innerHTML = '<a class="page-link" href="#">«</a>';
|
||||
prev.innerHTML = '<a class="page-link" href="#" aria-label="前のページ">«</a>';
|
||||
if (page > 1) prev.onclick = function (e) { e.preventDefault(); cb(page - 1); };
|
||||
el.appendChild(prev);
|
||||
for (var i = 1; i <= total; i++) {
|
||||
@@ -522,28 +446,28 @@
|
||||
}
|
||||
var next = document.createElement('li');
|
||||
next.className = 'page-item' + (page === total ? ' disabled' : '');
|
||||
next.innerHTML = '<a class="page-link" href="#">»</a>';
|
||||
next.innerHTML = '<a class="page-link" href="#" aria-label="次のページ">»</a>';
|
||||
if (page < total) next.onclick = function (e) { e.preventDefault(); cb(page + 1); };
|
||||
el.appendChild(next);
|
||||
}
|
||||
|
||||
function renderActiveSubjects() {
|
||||
var start = (activePage - 1) * PAGE_SIZE;
|
||||
var end = Math.min(start + PAGE_SIZE, activeSubjects.length);
|
||||
var start = (activePage - 1) * PAGE_SIZE;
|
||||
var end = Math.min(start + PAGE_SIZE, activeSubjects.length);
|
||||
var totalPages = Math.ceil(activeSubjects.length / PAGE_SIZE);
|
||||
document.getElementById('activeSubjectsBody').innerHTML = activeSubjects.slice(start, end).map(function (s) { return renderRow(s, false); }).join('');
|
||||
document.getElementById('activeCount').textContent = activeSubjects.length;
|
||||
document.getElementById('activeCount').textContent = activeSubjects.length;
|
||||
document.getElementById('activePageInfo').textContent = activeSubjects.length > 0 ? (start + 1) + '-' + end + ' / ' + activeSubjects.length + ' 件' : '0 件';
|
||||
renderPagination('activePagination', activePage, totalPages, function (p) { activePage = p; renderActiveSubjects(); });
|
||||
document.getElementById('activeSubjectsCard').style.display = activeSubjects.length > 0 ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function renderArchivedSubjects() {
|
||||
var start = (archivedPage - 1) * PAGE_SIZE;
|
||||
var end = Math.min(start + PAGE_SIZE, archivedSubjects.length);
|
||||
var start = (archivedPage - 1) * PAGE_SIZE;
|
||||
var end = Math.min(start + PAGE_SIZE, archivedSubjects.length);
|
||||
var totalPages = Math.ceil(archivedSubjects.length / PAGE_SIZE);
|
||||
document.getElementById('archivedSubjectsBody').innerHTML = archivedSubjects.slice(start, end).map(function (s) { return renderRow(s, true); }).join('');
|
||||
document.getElementById('archivedCount').textContent = archivedSubjects.length;
|
||||
document.getElementById('archivedCount').textContent = archivedSubjects.length;
|
||||
document.getElementById('archivedPageInfo').textContent = archivedSubjects.length > 0 ? (start + 1) + '-' + end + ' / ' + archivedSubjects.length + ' 件' : '0 件';
|
||||
renderPagination('archivedPagination', archivedPage, totalPages, function (p) { archivedPage = p; renderArchivedSubjects(); });
|
||||
document.getElementById('archivedSubjectsCard').style.display = archivedSubjects.length > 0 ? 'block' : 'none';
|
||||
@@ -553,9 +477,9 @@
|
||||
renderArchivedSubjects();
|
||||
if (activeSubjects.length === 0 && archivedSubjects.length === 0) {
|
||||
document.getElementById('noSubjectsCard').classList.remove('d-none');
|
||||
document.getElementById('activeSubjectsCard').style.display = 'none';
|
||||
document.getElementById('activeSubjectsCard').style.display = 'none';
|
||||
document.getElementById('archivedSubjectsCard').style.display = 'none';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user