admin/miem_workers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: improve admin directory and crawl progress

Browse Source
This commit is contained in:
Anton
2026-04-28 17:24:10 +03:00
parent 51d83d7062
commit 4bd5f26469
19 changed files with 1082 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
app/static/admin.css
View File

@@ -151,3 +151,262 @@
border-radius: 8px;
white-space: pre-wrap;
}
.stats-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-top: 16px;
}
.stats-strip__item {
padding: 14px 16px;
background: #ffffff;
border: 1px solid #d9dee7;
border-radius: 8px;
}
.stats-strip__label {
display: block;
color: #6b7280;
font-size: 12px;
text-transform: uppercase;
}
.stats-strip__value {
display: block;
margin-top: 6px;
color: #1f2937;
font-weight: 700;
}
.progress-panel {
display: grid;
gap: 12px;
}
.progress-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.progress-panel__body {
display: grid;
gap: 10px;
}
.progress-panel__meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
color: #4b5563;
font-size: 14px;
}
.progress-panel__percent {
color: #0f766e;
font-weight: 700;
}
.progress-panel__empty {
margin: 0;
color: #6b7280;
}
.progress-bar {
height: 12px;
overflow: hidden;
background: #e5e7eb;
border-radius: 999px;
}
.progress-bar__fill {
height: 100%;
width: 0;
background: #0f766e;
transition: width 0.25s ease;
}
.directory {
display: grid;
gap: 18px;
}
.directory__header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
}
.directory__title {
margin: 0;
font-size: 24px;
}
.directory__summary {
margin: 6px 0 0;
color: #6b7280;
}
.directory__filters {
display: grid;
grid-template-columns: minmax(220px, 1.7fr) repeat(6, minmax(120px, 1fr));
gap: 10px;
padding: 16px;
background: #ffffff;
border: 1px solid #d9dee7;
border-radius: 8px;
}
.directory__input {
min-width: 0;
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
}
.directory__table-wrap {
overflow-x: auto;
background: #ffffff;
border: 1px solid #d9dee7;
border-radius: 8px;
}
.directory__pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.directory__page {
color: #4b5563;
font-weight: 700;
}
.directory-table {
width: 100%;
min-width: 1120px;
border-collapse: collapse;
}
.directory-table__head {
padding: 12px 10px;
color: #374151;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
font-size: 13px;
text-align: left;
white-space: nowrap;
}
.directory-table__cell {
max-width: 280px;
padding: 12px 10px;
border-bottom: 1px solid #e5e7eb;
vertical-align: top;
}
.directory-table__row {
cursor: pointer;
}
.directory-table__row:hover {
background: #f0fdfa;
}
.directory-table__empty {
padding: 28px;
color: #6b7280;
text-align: center;
}
.directory-table__cell--hidden,
.directory-table__head--hidden {
display: none;
}
.columns-modal {
position: fixed;
inset: 0;
z-index: 50;
display: grid;
place-items: center;
padding: 20px;
}
.columns-modal[hidden] {
display: none;
}
.columns-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(17, 24, 39, 0.54);
}
.columns-modal__panel {
position: relative;
width: min(620px, 100%);
max-height: min(720px, calc(100vh - 40px));
overflow: auto;
padding: 20px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
}
.columns-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.columns-modal__title {
margin: 0;
font-size: 18px;
}
.columns-modal__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin-top: 18px;
}
.columns-modal__option {
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 6px;
}
.columns-modal__checkbox {
width: 16px;
height: 16px;
}
@media (max-width: 920px) {
.directory__filters {
grid-template-columns: 1fr 1fr;
}
.progress-panel__header,
.directory__header {
align-items: stretch;
flex-direction: column;
}
}
@media (max-width: 620px) {
.directory__filters {
grid-template-columns: 1fr;
}
}

111
app/static/admin.js Normal file
View File

@@ -0,0 +1,111 @@
(function () {
const columnDefaults = [
"full_name",
"status",
"positions",
"hse_start_year",
"email",
"last_seen_at",
"dismissed_at",
"profile",
];
const storageKey = "miem.directory.columns";
function readColumns() {
try {
const stored = JSON.parse(localStorage.getItem(storageKey) || "[]");
return Array.isArray(stored) && stored.length ? stored : columnDefaults;
} catch (_error) {
return columnDefaults;
}
}
function writeColumns(columns) {
localStorage.setItem(storageKey, JSON.stringify(columns));
}
function applyColumns(columns) {
document.querySelectorAll("[data-column]").forEach((node) => {
const visible = columns.includes(node.dataset.column);
node.classList.toggle("directory-table__cell--hidden", !visible && node.classList.contains("directory-table__cell"));
node.classList.toggle("directory-table__head--hidden", !visible && node.classList.contains("directory-table__head"));
});
document.querySelectorAll("[data-column-toggle]").forEach((checkbox) => {
checkbox.checked = columns.includes(checkbox.value);
});
}
function setupColumns() {
if (!document.querySelector("[data-directory-table]")) return;
let columns = readColumns();
const modal = document.querySelector("[data-columns-modal]");
applyColumns(columns);
document.querySelectorAll("[data-columns-open]").forEach((button) => {
button.addEventListener("click", () => {
modal.hidden = false;
});
});
document.querySelectorAll("[data-columns-close]").forEach((button) => {
button.addEventListener("click", () => {
modal.hidden = true;
});
});
document.querySelectorAll("[data-column-toggle]").forEach((checkbox) => {
checkbox.addEventListener("change", () => {
columns = Array.from(document.querySelectorAll("[data-column-toggle]:checked")).map((item) => item.value);
if (!columns.length) columns = ["full_name"];
writeColumns(columns);
applyColumns(columns);
});
});
document.querySelectorAll("[data-row-href]").forEach((row) => {
row.addEventListener("click", (event) => {
if (event.target.closest("a, button, input, select, label")) return;
window.location.href = row.dataset.rowHref;
});
});
}
function setupProgress() {
const panel = document.querySelector("[data-progress-panel]");
if (!panel) return;
const update = (run) => {
if (!run) return;
const status = document.querySelector("[data-progress-status]");
const processed = document.querySelector("[data-progress-processed]");
const found = document.querySelector("[data-progress-found]");
const errors = document.querySelector("[data-progress-errors]");
const fill = document.querySelector("[data-progress-fill]");
const percent = document.querySelector("[data-progress-percent]");
if (status) status.textContent = run.status;
if (processed) processed.textContent = run.processed_count;
if (found) found.textContent = run.found_count;
if (errors) errors.textContent = run.error_count;
if (fill) fill.style.width = `${run.progress_percent}%`;
if (percent) percent.textContent = run.progress_percent;
};
const poll = async () => {
try {
const response = await fetch("/api/crawl-runs/latest", { credentials: "same-origin" });
if (!response.ok) return false;
const data = await response.json();
const run = data.running || data.latest;
update(run);
return Boolean(data.running);
} catch (_error) {
return false;
}
};
const interval = window.setInterval(async () => {
const keepGoing = await poll();
if (!keepGoing) window.clearInterval(interval);
}, 4000);
}
setupColumns();
setupProgress();
})();