jamie/goencode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: implement server-side pagination for job queue and history views
Build / Build and Push (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Jamie
2026-06-06 12:20:36 +01:00
parent 58f760f41d
commit 8d8649f531
4 changed files with 112 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/dashboard.html
+38 -3
View File
@@ -33,15 +33,50 @@
</tbody>
</table>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
<div>
<label for="limit-select" style="color: var(--text-secondary); font-size: 0.875rem; margin-right: 0.5rem;">Rows per page:</label>
<select id="limit-select" onchange="changeLimit()" style="background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; padding: 0.25rem 0.5rem;">
<option value="10">10</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<div style="display: flex; gap: 0.5rem; align-items: center;">
<button id="prev-page" class="btn btn-sm btn-outline" onclick="changePage(-1)">Previous</button>
<span id="page-info" style="color: var(--text-secondary); font-size: 0.875rem;">Page 1 of 1</span>
<button id="next-page" class="btn btn-sm btn-outline" onclick="changePage(1)">Next</button>
</div>
</div>
</div>
<script>
const queueBody = document.getElementById('queue-body');
let currentPage = 1;
let currentLimit = 10;
async function loadQueue() {
const res = await fetch('/api/queue');
const jobs = await res.json();
renderQueue(jobs || []);
const res = await fetch(`/api/queue?page=${currentPage}&limit=${currentLimit}`);
const data = await res.json();
renderQueue(data.jobs || []);
document.getElementById('page-info').innerText = `Page ${data.page} of ${data.totalPages}`;
document.getElementById('prev-page').disabled = data.page <= 1;
document.getElementById('next-page').disabled = data.page >= data.totalPages;
currentPage = data.page;
}
function changeLimit() {
currentLimit = document.getElementById('limit-select').value;
currentPage = 1;
loadQueue();
}
function changePage(delta) {
currentPage += delta;
loadQueue();
}
function renderQueue(jobs) {
web/templates/history.html
+16 -9
View File
@@ -55,21 +55,28 @@
</tbody>
</table>
</div>
<div class="pagination">
<span style="color: var(--text-secondary); font-size: 0.875rem;">
Page {{.CurrentPage}} of {{.TotalPages}}
</span>
<div class="pagination-controls">
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
<div>
<label for="limit-select" style="color: var(--text-secondary); font-size: 0.875rem; margin-right: 0.5rem;">Rows per page:</label>
<select id="limit-select" onchange="window.location.href='?limit=' + this.value + '&status={{.FilterStatus}}'" style="background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; padding: 0.25rem 0.5rem;">
<option value="10" {{if eq .Limit 10}}selected{{end}}>10</option>
<option value="50" {{if eq .Limit 50}}selected{{end}}>50</option>
<option value="100" {{if eq .Limit 100}}selected{{end}}>100</option>
</select>
</div>
<div style="display: flex; gap: 0.5rem; align-items: center;">
{{if .HasPrev}}
<a href="?page={{.PrevPage}}&status={{.FilterStatus}}" class="page-btn">Previous</a>
<a href="?page={{.PrevPage}}&limit={{.Limit}}&status={{.FilterStatus}}" class="btn btn-sm btn-outline" style="text-decoration: none;">Previous</a>
{{else}}
<span class="page-btn disabled">Previous</span>
<button class="btn btn-sm btn-outline" disabled>Previous</button>
{{end}}
<span style="color: var(--text-secondary); font-size: 0.875rem;">Page {{.CurrentPage}} of {{.TotalPages}}</span>
{{if .HasNext}}
<a href="?page={{.NextPage}}&status={{.FilterStatus}}" class="page-btn">Next</a>
<a href="?page={{.NextPage}}&limit={{.Limit}}&status={{.FilterStatus}}" class="btn btn-sm btn-outline" style="text-decoration: none;">Next</a>
{{else}}
<span class="page-btn disabled">Next</span>
<button class="btn btn-sm btn-outline" disabled>Next</button>
{{end}}
</div>
</div>