UI: пагинация, вынос пагинатора, быстрые действия
This commit is contained in:
+1
-1
@@ -34,8 +34,8 @@
|
|||||||
<tbody></tbody>
|
<tbody></tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="empty" id="auditEmpty" style="display:none">Записей пока нет.</div>
|
<div class="empty" id="auditEmpty" style="display:none">Записей пока нет.</div>
|
||||||
<div class="pager" id="auditPager"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="pager" id="auditPager"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-overlay" id="auditDetailsModal">
|
<div class="modal-overlay" id="auditDetailsModal">
|
||||||
|
|||||||
+16
-4
@@ -1,4 +1,5 @@
|
|||||||
const AUTO_REFRESH_MS = 5000;
|
const AUTO_REFRESH_MS = 5000;
|
||||||
|
const RECENT_PAGE_SIZE = 15;
|
||||||
const STATUS_LABELS = {
|
const STATUS_LABELS = {
|
||||||
pending: 'В очереди',
|
pending: 'В очереди',
|
||||||
processing: 'Проверяется',
|
processing: 'Проверяется',
|
||||||
@@ -18,6 +19,7 @@ let state = null;
|
|||||||
let refreshTimer = null;
|
let refreshTimer = null;
|
||||||
let busy = false;
|
let busy = false;
|
||||||
let recentRows = [];
|
let recentRows = [];
|
||||||
|
let recentPage = 1;
|
||||||
|
|
||||||
function fmtDur(ms) {
|
function fmtDur(ms) {
|
||||||
if (ms === null || ms === undefined || ms < 0) return '—';
|
if (ms === null || ms === undefined || ms < 0) return '—';
|
||||||
@@ -140,10 +142,19 @@ function renderRecent() {
|
|||||||
document.getElementById('recentCount').textContent = `${rows.length} из ${all.length}`;
|
document.getElementById('recentCount').textContent = `${rows.length} из ${all.length}`;
|
||||||
const tbody = document.querySelector('#recentTable tbody');
|
const tbody = document.querySelector('#recentTable tbody');
|
||||||
const empty = document.getElementById('recentEmpty');
|
const empty = document.getElementById('recentEmpty');
|
||||||
if (!rows.length) { tbody.innerHTML = ''; empty.style.display = 'block'; return; }
|
const maxPage = Math.max(1, Math.ceil(rows.length / RECENT_PAGE_SIZE));
|
||||||
|
if (recentPage > maxPage) recentPage = maxPage;
|
||||||
|
if (!rows.length) {
|
||||||
|
recentRows = [];
|
||||||
|
tbody.innerHTML = '';
|
||||||
|
empty.style.display = 'block';
|
||||||
|
renderPager(document.getElementById('recentPager'), 1, 1, () => {});
|
||||||
|
return;
|
||||||
|
}
|
||||||
empty.style.display = 'none';
|
empty.style.display = 'none';
|
||||||
recentRows = rows;
|
const slice = rows.slice((recentPage - 1) * RECENT_PAGE_SIZE, recentPage * RECENT_PAGE_SIZE);
|
||||||
tbody.innerHTML = rows.map((r, i) => `
|
recentRows = slice;
|
||||||
|
tbody.innerHTML = slice.map((r, i) => `
|
||||||
<tr>
|
<tr>
|
||||||
<td style="white-space:nowrap">${fmtTime(r.ai_checked_at)}</td>
|
<td style="white-space:nowrap">${fmtTime(r.ai_checked_at)}</td>
|
||||||
<td>${esc(r.student_name)}</td>
|
<td>${esc(r.student_name)}</td>
|
||||||
@@ -152,6 +163,7 @@ function renderRecent() {
|
|||||||
<td>${r.changed ? '<span class="lucide-inline" style="color:#f59e0b"><i data-lucide="pencil"></i></span> исправлен' : '—'}</td>
|
<td>${r.changed ? '<span class="lucide-inline" style="color:#f59e0b"><i data-lucide="pencil"></i></span> исправлен' : '—'}</td>
|
||||||
<td><button type="button" class="ai-details" data-ai-idx="${i}">Подробнее</button></td>
|
<td><button type="button" class="ai-details" data-ai-idx="${i}">Подробнее</button></td>
|
||||||
</tr>`).join('');
|
</tr>`).join('');
|
||||||
|
renderPager(document.getElementById('recentPager'), recentPage, maxPage, p => { recentPage = p; renderRecent(); });
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderErrors() {
|
function renderErrors() {
|
||||||
@@ -226,7 +238,7 @@ document.getElementById('refreshBtn').addEventListener('click', load);
|
|||||||
document.getElementById('wakeBtn').addEventListener('click', wake);
|
document.getElementById('wakeBtn').addEventListener('click', wake);
|
||||||
document.getElementById('toggleBtn').addEventListener('click', toggleEnabled);
|
document.getElementById('toggleBtn').addEventListener('click', toggleEnabled);
|
||||||
document.getElementById('requeueBtn').addEventListener('click', requeueFailed);
|
document.getElementById('requeueBtn').addEventListener('click', requeueFailed);
|
||||||
document.getElementById('recentFilter').addEventListener('change', renderRecent);
|
document.getElementById('recentFilter').addEventListener('change', () => { recentPage = 1; renderRecent(); });
|
||||||
document.getElementById('autoRefresh').addEventListener('change', e => setAutoRefresh(e.target.checked));
|
document.getElementById('autoRefresh').addEventListener('change', e => setAutoRefresh(e.target.checked));
|
||||||
|
|
||||||
document.getElementById('recentTable').addEventListener('click', e => {
|
document.getElementById('recentTable').addEventListener('click', e => {
|
||||||
|
|||||||
@@ -75,6 +75,7 @@
|
|||||||
</table>
|
</table>
|
||||||
<div class="empty" id="recentEmpty" style="display:none">Проверок пока нет.</div>
|
<div class="empty" id="recentEmpty" style="display:none">Проверок пока нет.</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="pager" id="recentPager"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="settings-card wide" id="errorsCard" style="display:none">
|
<div class="settings-card wide" id="errorsCard" style="display:none">
|
||||||
|
|||||||
Reference in New Issue
Block a user