CSSの最適化や内部挙動の改良
This commit is contained in:
@@ -5,14 +5,14 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-arrow-repeat me-2"></i>繰り返し課題の編集</h5>
|
||||
<h5 class="mb-0"><i class="bi bi-arrow-repeat 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="/recurring/{{.recurring.ID}}">
|
||||
{{.csrfField}}
|
||||
<div class="mb-3">
|
||||
<label for="title" class="form-label">タイトル <span class="text-danger">*</span></label>
|
||||
<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="{{.recurring.Title}}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
@@ -22,9 +22,9 @@
|
||||
<div class="mb-3">
|
||||
<label for="priority" class="form-label">重要度</label>
|
||||
<select class="form-select" id="priority" name="priority">
|
||||
<option value="low" {{if eq .recurring.Priority "low"}}selected{{end}}>小</option>
|
||||
<option value="low" {{if eq .recurring.Priority "low" }}selected{{end}}>低</option>
|
||||
<option value="medium" {{if eq .recurring.Priority "medium"}}selected{{end}}>中</option>
|
||||
<option value="high" {{if eq .recurring.Priority "high"}}selected{{end}}>大</option>
|
||||
<option value="high" {{if eq .recurring.Priority "high" }}selected{{end}}>高</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
@@ -35,30 +35,30 @@
|
||||
<label for="due_time" class="form-label">時刻</label>
|
||||
<input type="time" class="form-control" id="due_time" name="due_time" value="{{.recurring.DueTime}}">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card bg-light mb-3">
|
||||
<div class="card-body py-3">
|
||||
<h6 class="mb-3"><i class="bi bi-arrow-repeat me-1"></i>繰り返し設定</h6>
|
||||
<h6 class="mb-3"><i class="bi bi-arrow-repeat me-1" aria-hidden="true"></i>繰り返し設定</h6>
|
||||
<div class="row mb-3">
|
||||
<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()">
|
||||
<option value="daily" {{if eq .recurring.RecurrenceType "daily"}}selected{{end}}>毎日</option>
|
||||
<option value="weekly" {{if eq .recurring.RecurrenceType "weekly"}}selected{{end}}>毎週</option>
|
||||
<option value="daily" {{if eq .recurring.RecurrenceType "daily" }}selected{{end}}>毎日</option>
|
||||
<option value="weekly" {{if eq .recurring.RecurrenceType "weekly" }}selected{{end}}>毎週</option>
|
||||
<option value="monthly" {{if eq .recurring.RecurrenceType "monthly"}}selected{{end}}>毎月</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<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="{{.recurring.RecurrenceInterval}}" min="1" max="12">
|
||||
<input type="number" class="form-control" id="recurrence_interval" name="recurrence_interval" value="{{.recurring.RecurrenceInterval}}" min="1" max="12" onchange="updateLeadDaysMax()">
|
||||
<span class="input-group-text" id="interval_label">{{if eq .recurring.RecurrenceType "daily"}}日{{else if eq .recurring.RecurrenceType "weekly"}}週{{else}}月{{end}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="weekday_group" class="mb-3">
|
||||
<label class="form-label small">曜日</label>
|
||||
<div class="btn-group btn-group-sm w-100" role="group">
|
||||
<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 .recurring.RecurrenceWeekday}}{{if eq (derefInt .recurring.RecurrenceWeekday) 0}}checked{{end}}{{end}}>
|
||||
<label class="btn btn-outline-primary" for="wd0">日</label>
|
||||
<input type="radio" class="btn-check" name="recurrence_weekday" id="wd1" value="1" {{if .recurring.RecurrenceWeekday}}{{if eq (derefInt .recurring.RecurrenceWeekday) 1}}checked{{end}}{{end}}>
|
||||
@@ -83,7 +83,18 @@
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<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="{{.recurring.GenerationLeadDays}}" min="0" max="365">
|
||||
<span class="input-group-text">日前</span>
|
||||
</div>
|
||||
<input type="time" class="form-control form-control-sm" id="generation_lead_time" name="generation_lead_time" value="{{.recurring.GenerationLeadTime}}" style="width: 110px;">
|
||||
</div>
|
||||
<div class="form-text small text-muted" id="lead_days_hint"></div>
|
||||
</div>
|
||||
<hr class="my-2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="small text-muted">状態:</span>
|
||||
@@ -95,25 +106,25 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-flex gap-2 flex-wrap">
|
||||
<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>
|
||||
{{if .recurring.IsActive}}
|
||||
<button type="button" class="btn btn-outline-danger" onclick="if(confirm('繰り返しを停止しますか?今後新しい課題は自動作成されなくなります。')) document.getElementById('stopForm').submit();">
|
||||
<i class="bi bi-stop-fill me-1"></i>停止
|
||||
<button type="button" class="btn btn-outline-danger" id="stopBtn">
|
||||
<i class="bi bi-stop-fill me-1" aria-hidden="true"></i>停止
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="btn btn-outline-success" onclick="document.getElementById('resumeForm').submit();">
|
||||
<i class="bi bi-play-fill me-1"></i>再開
|
||||
<i class="bi bi-play-fill me-1" aria-hidden="true"></i>再開
|
||||
</button>
|
||||
{{end}}
|
||||
<button type="button" class="btn btn-outline-danger ms-auto" onclick="if(confirm('この繰り返し設定を削除しますか?この操作は取り消せません。')) document.getElementById('deleteForm').submit();">
|
||||
<i class="bi bi-trash me-1"></i>削除
|
||||
<button type="button" class="btn btn-outline-danger ms-auto" id="deleteBtn">
|
||||
<i class="bi bi-trash me-1" aria-hidden="true"></i>削除
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
{{if .recurring.IsActive}}
|
||||
<form id="stopForm" action="/recurring/{{.recurring.ID}}/stop" method="POST" class="d-none">
|
||||
{{.csrfField}}
|
||||
@@ -132,17 +143,58 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function getLeadDaysMax() {
|
||||
var type = document.getElementById('recurrence_type').value;
|
||||
var 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() {
|
||||
var max = getLeadDaysMax();
|
||||
var input = document.getElementById('generation_lead_days');
|
||||
input.max = max;
|
||||
if (parseInt(input.value) > max) input.value = max;
|
||||
var type = document.getElementById('recurrence_type').value;
|
||||
var labels = { daily: '日', weekly: '週', monthly: 'ヶ月' };
|
||||
var interval = document.getElementById('recurrence_interval').value;
|
||||
document.getElementById('lead_days_hint').textContent =
|
||||
max === 0 ? '間隔が1日のため、事前追加は設定できません' :
|
||||
'最大' + max + '日前まで指定可能(繰り返し間隔' + interval + labels[type] + '以内)';
|
||||
}
|
||||
function updateRecurrenceOptions() {
|
||||
var type = document.getElementById('recurrence_type').value;
|
||||
document.getElementById('weekday_group').style.display = type === 'weekly' ? 'block' : 'none';
|
||||
document.getElementById('day_group').style.display = type === 'monthly' ? 'block' : 'none';
|
||||
document.getElementById('weekday_group').style.display = type === 'weekly' ? 'block' : 'none';
|
||||
document.getElementById('day_group').style.display = type === 'monthly' ? 'block' : 'none';
|
||||
var 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.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
updateRecurrenceOptions();
|
||||
|
||||
var stopBtn = document.getElementById('stopBtn');
|
||||
if (stopBtn) {
|
||||
stopBtn.addEventListener('click', function() {
|
||||
showConfirmModal('繰り返しを停止しますか?今後新しい課題は自動作成されなくなります。', function() {
|
||||
document.getElementById('stopForm').submit();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var deleteBtn = document.getElementById('deleteBtn');
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', function() {
|
||||
showConfirmModal('この繰り返し設定を削除しますか?この操作は取り消せません。', function() {
|
||||
document.getElementById('deleteForm').submit();
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@@ -2,24 +2,22 @@
|
||||
|
||||
{{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-arrow-repeat me-2"></i>繰り返し設定一覧</h4>
|
||||
</div>
|
||||
<h4 class="mb-0 fw-bold"><i class="bi bi-arrow-repeat me-2" aria-hidden="true"></i>繰り返し設定一覧</h4>
|
||||
<a href="/assignments" class="btn btn-sm 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>
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<table class="table table-hover mb-0" aria-label="繰り返し設定一覧">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="ps-3">タイトル</th>
|
||||
<th>科目</th>
|
||||
<th>繰り返し</th>
|
||||
<th>状態</th>
|
||||
<th class="text-end pe-3">操作</th>
|
||||
<th scope="col" class="ps-3">タイトル</th>
|
||||
<th scope="col">科目</th>
|
||||
<th scope="col">繰り返し</th>
|
||||
<th scope="col">状態</th>
|
||||
<th scope="col" class="text-end pe-3">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -38,9 +36,7 @@
|
||||
<span class="text-muted">-</span>
|
||||
{{end}}
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-dark">{{recurringSummary .}}</span>
|
||||
</td>
|
||||
<td><span class="text-dark">{{recurringSummary .}}</span></td>
|
||||
<td>
|
||||
{{if .IsActive}}
|
||||
<span class="badge bg-success">有効</span>
|
||||
@@ -49,15 +45,19 @@
|
||||
{{end}}
|
||||
</td>
|
||||
<td class="text-end pe-3">
|
||||
<a href="/recurring/{{.ID}}/edit" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-pencil"></i>
|
||||
<a href="/recurring/{{.ID}}/edit" class="btn btn-sm btn-outline-primary" aria-label="{{.Title}}を編集">
|
||||
<i class="bi bi-pencil" aria-hidden="true"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr>
|
||||
<td colspan="5" class="text-center py-4 text-muted">
|
||||
繰り返し設定がありません
|
||||
<td colspan="5" class="text-center py-5">
|
||||
<i class="bi bi-arrow-repeat 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}}
|
||||
@@ -65,4 +65,4 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user