merging users
Build and Push Docker Image / build (push) Successful in 9s

This commit is contained in:
2026-05-28 15:56:36 -05:00
parent a963bd6e31
commit 98793fbecf
4 changed files with 925 additions and 38 deletions
+481 -21
View File
@@ -121,6 +121,43 @@
border-color: rgba(243,156,18,0.6);
background: radial-gradient(circle at top, rgba(243,156,18,0.18), rgba(2,2,4,0.95));
}
.people-btn {
border-color: rgba(100,180,255,0.6);
background: radial-gradient(circle at top, rgba(100,180,255,0.18), rgba(2,2,4,0.95));
}
.source-list { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.merged-pill {
display: inline-block; margin-left: 8px; padding: 1px 8px;
font-size: 0.65rem; letter-spacing: 0.1em; border-radius: 999px;
color: var(--blue); border: 1px solid rgba(100,180,255,0.5);
vertical-align: middle;
}
.row-action-btn.merge { border-color: rgba(100,180,255,0.55); color: var(--blue); }
.row-action-group { display: inline-flex; gap: 6px; justify-content: center; }
.picker-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; margin-bottom: 12px; }
.picker-row {
display: grid; grid-template-columns: 1fr auto; gap: 10px;
padding: 8px 12px; background: rgba(255,255,255,0.02);
border: 1px solid var(--border); border-radius: 8px; align-items: center;
}
.picker-row .ctrl-name { font-size: 0.88rem; }
.picker-row .ctrl-sub { font-size: 0.74rem; }
.picker-search { width: 100%; margin-bottom: 10px; }
.suggestion-row {
padding: 10px 14px; background: rgba(100,180,255,0.05);
border: 1px solid rgba(100,180,255,0.25); border-radius: 10px;
display: grid; grid-template-columns: 1fr auto; gap: 10px;
align-items: center; margin-bottom: 8px;
}
.suggestion-row .ctrl-name { font-weight: 600; }
.suggestion-row .ctrl-sub { font-size: 0.76rem; color: var(--muted); }
.section-label {
font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted); margin: 14px 0 8px;
}
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
@@ -211,6 +248,7 @@
<button id="refresh-btn">&#8635; Refresh</button>
<button class="sync-btn" id="sync-btn">&#8635; Sync Users</button>
<button class="filtered-btn" id="open-filtered-btn">&#128683; Filtered</button>
<button class="people-btn" id="open-people-btn">&#128101; People</button>
<button class="controllers-btn" id="open-controllers-btn">&#9881; Controllers</button>
<button class="reset-btn" id="reset-btn">&#x2715; Reset Day</button>
</div>
@@ -299,6 +337,56 @@
</div>
</div>
<!-- Merge picker modal -->
<div class="modal-overlay" id="merge-modal">
<div class="modal">
<h2>Merge with another actor</h2>
<p>Pick the other badge identity for <strong id="merge-source-name"></strong>.
Names are matched fuzzily; type to narrow.</p>
<input type="text" id="merge-search" class="picker-search" placeholder="Search by name…">
<div class="picker-list" id="merge-candidates">
<div class="empty-state">Loading…</div>
</div>
<div class="form-grid">
<div class="full">
<label for="merge-display-name">Display name</label>
<input type="text" id="merge-display-name" placeholder="Will appear in the attendance table">
</div>
</div>
<div class="form-error" id="merge-error"></div>
<div class="modal-actions">
<button class="modal-cancel" id="merge-cancel">Cancel</button>
<button id="merge-confirm">Merge</button>
</div>
</div>
</div>
<!-- People management modal -->
<div class="modal-overlay" id="people-modal">
<div class="modal">
<h2>People</h2>
<p>A "person" groups one or more badge identities (controller + actor) so the
same human counts as a single row in the attendance table.</p>
<div class="section-label">Suggested merges</div>
<div class="ctrl-list" id="suggestions-list">
<div class="empty-state">Loading…</div>
</div>
<div class="section-label">Merged people</div>
<div class="ctrl-list" id="people-list">
<div class="empty-state">Loading…</div>
</div>
<div class="modal-actions">
<button class="modal-cancel" id="people-close">Close</button>
</div>
</div>
</div>
<!-- Filtered tenants modal -->
<div class="modal-overlay" id="filtered-modal">
<div class="modal">
@@ -391,10 +479,22 @@
tr.appendChild(nameTd);
const sourceTd = document.createElement('td');
const chip = document.createElement('span');
chip.className = 'source-chip';
chip.textContent = row.source || '—';
sourceTd.appendChild(chip);
const sourceWrap = document.createElement('span');
sourceWrap.className = 'source-list';
const sources = (row.sources && row.sources.length) ? row.sources : [row.source || '—'];
sources.forEach(s => {
const chip = document.createElement('span');
chip.className = 'source-chip';
chip.textContent = s;
sourceWrap.appendChild(chip);
});
sourceTd.appendChild(sourceWrap);
if (row.merged) {
const pill = document.createElement('span');
pill.className = 'merged-pill';
pill.textContent = 'MERGED';
sourceTd.appendChild(pill);
}
tr.appendChild(sourceTd);
const firstTd = document.createElement('td');
@@ -428,14 +528,29 @@
const actionTd = document.createElement('td');
actionTd.className = 'align-center';
const actionBtn = document.createElement('button');
actionBtn.className = 'row-action-btn' + (row.filtered ? ' unhide' : '');
actionBtn.textContent = row.filtered ? 'Unhide' : 'Hide';
actionBtn.dataset.controllerId = row.controller_id || '';
actionBtn.dataset.actorId = row.actor_id || '';
actionBtn.dataset.filtered = row.filtered ? '1' : '0';
actionBtn.dataset.name = row.name || '';
actionTd.appendChild(actionBtn);
const actionGroup = document.createElement('div');
actionGroup.className = 'row-action-group';
const hideBtn = document.createElement('button');
hideBtn.className = 'row-action-btn hide-btn' + (row.filtered ? ' unhide' : '');
hideBtn.textContent = row.filtered ? 'Unhide' : 'Hide';
hideBtn.dataset.personId = row.person_id || '';
hideBtn.dataset.controllerId = row.controller_id || '';
hideBtn.dataset.actorId = row.actor_id || '';
hideBtn.dataset.filtered = row.filtered ? '1' : '0';
hideBtn.dataset.name = row.name || '';
actionGroup.appendChild(hideBtn);
const mergeBtn = document.createElement('button');
mergeBtn.className = 'row-action-btn merge merge-btn';
mergeBtn.textContent = row.merged ? 'Manage' : 'Merge';
mergeBtn.dataset.personId = row.person_id || '';
mergeBtn.dataset.controllerId = row.controller_id || '';
mergeBtn.dataset.actorId = row.actor_id || '';
mergeBtn.dataset.name = row.name || '';
actionGroup.appendChild(mergeBtn);
actionTd.appendChild(actionGroup);
tr.appendChild(actionTd);
tbody.appendChild(tr);
@@ -465,16 +580,54 @@
return true;
}
async function setPersonFiltered(personId, filtered) {
const r = await fetch(`/api/persons/${personId}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ filtered }),
});
if (!r.ok) {
const j = await r.json().catch(() => ({}));
showToast(`Failed: ${j.error || r.status}`, true);
return false;
}
return true;
}
document.getElementById('table-body').addEventListener('click', async e => {
const btn = e.target.closest('.row-action-btn');
if (!btn) return;
const wasFiltered = btn.dataset.filtered === '1';
btn.disabled = true;
const ok = await setActorFiltered(btn.dataset.controllerId, btn.dataset.actorId, !wasFiltered);
btn.disabled = false;
if (!ok) return;
showToast(wasFiltered ? `Unhid ${btn.dataset.name}` : `Hid ${btn.dataset.name}`);
await loadData();
const hideBtn = e.target.closest('.hide-btn');
const mergeBtn = e.target.closest('.merge-btn');
if (hideBtn) {
const wasFiltered = hideBtn.dataset.filtered === '1';
hideBtn.disabled = true;
let ok;
if (hideBtn.dataset.personId) {
ok = await setPersonFiltered(hideBtn.dataset.personId, !wasFiltered);
} else {
ok = await setActorFiltered(hideBtn.dataset.controllerId, hideBtn.dataset.actorId, !wasFiltered);
}
hideBtn.disabled = false;
if (!ok) return;
showToast(wasFiltered ? `Unhid ${hideBtn.dataset.name}` : `Hid ${hideBtn.dataset.name}`);
await loadData();
return;
}
if (mergeBtn) {
if (mergeBtn.dataset.personId) {
// Already merged — open People modal scrolled to this person
document.getElementById('people-modal').classList.add('open');
await renderSuggestions();
await renderPeople(mergeBtn.dataset.personId);
} else {
await openMergeModal({
controllerId: mergeBtn.dataset.controllerId,
actorId: mergeBtn.dataset.actorId,
name: mergeBtn.dataset.name,
});
}
}
});
async function syncUsers() {
@@ -746,6 +899,313 @@
await loadData();
});
// -------- Merge picker modal --------
let mergeSource = null; // {controllerId, actorId, name}
let mergeCandidates = []; // cached user list
let mergeSelected = null; // {controllerId, actorId, name}
function fuzzyScore(needle, hay) {
needle = (needle || '').toLowerCase().trim();
hay = (hay || '').toLowerCase();
if (!needle) return 1;
if (hay.includes(needle)) return 2;
// simple subsequence check
let i = 0;
for (const ch of hay) { if (ch === needle[i]) i++; if (i === needle.length) return 1; }
return 0;
}
function renderMergeCandidates() {
const search = document.getElementById('merge-search').value;
const list = document.getElementById('merge-candidates');
const items = mergeCandidates
.filter(u => !(u.controller_id === mergeSource.controllerId && u.actor_id === mergeSource.actorId))
.map(u => ({ u, score: search ? fuzzyScore(search, u.full_name) : fuzzyScore(mergeSource.name, u.full_name) }))
.filter(x => x.score > 0)
.sort((a, b) => b.score - a.score || a.u.full_name.localeCompare(b.u.full_name));
if (!items.length) {
list.innerHTML = '<div class="empty-state">No matching candidates. Try clearing the search.</div>';
return;
}
list.innerHTML = '';
items.forEach(({ u }) => {
const row = document.createElement('div');
row.className = 'picker-row';
const selected = mergeSelected
&& mergeSelected.controllerId === u.controller_id
&& mergeSelected.actorId === u.actor_id;
row.innerHTML = `
<div class="ctrl-meta">
<div class="ctrl-name">${escapeHtml(u.full_name)}</div>
<div class="ctrl-sub">${escapeHtml(u.controller_name)} &middot; ${escapeHtml((u.actor_id || '').slice(0,8))}…</div>
</div>
<button class="small-btn ${selected ? 'sync-btn' : ''}"
data-controller-id="${escapeHtml(u.controller_id)}"
data-actor-id="${escapeHtml(u.actor_id)}"
data-name="${escapeHtml(u.full_name)}">${selected ? 'Selected' : 'Select'}</button>
`;
list.appendChild(row);
});
}
async function openMergeModal(source) {
mergeSource = source;
mergeSelected = null;
document.getElementById('merge-source-name').textContent = source.name;
document.getElementById('merge-display-name').value = source.name;
document.getElementById('merge-search').value = '';
document.getElementById('merge-error').textContent = '';
document.getElementById('merge-modal').classList.add('open');
try {
const res = await fetch('/api/users');
mergeCandidates = await res.json();
} catch {
mergeCandidates = [];
}
// Only show actors not already in a person, by querying the persons API
let merged = [];
try {
const res = await fetch('/api/persons');
const persons = await res.json();
merged = persons.flatMap(p => p.members.map(m => `${m.controller_id}|${m.actor_id}`));
} catch {}
const mergedSet = new Set(merged);
mergeCandidates = mergeCandidates.filter(u => !mergedSet.has(`${u.controller_id}|${u.actor_id}`));
renderMergeCandidates();
}
document.getElementById('merge-search').addEventListener('input', renderMergeCandidates);
document.getElementById('merge-candidates').addEventListener('click', e => {
const btn = e.target.closest('button[data-controller-id]');
if (!btn) return;
mergeSelected = {
controllerId: btn.dataset.controllerId,
actorId: btn.dataset.actorId,
name: btn.dataset.name,
};
renderMergeCandidates();
});
document.getElementById('merge-cancel').addEventListener('click', () => {
document.getElementById('merge-modal').classList.remove('open');
});
document.getElementById('merge-modal').addEventListener('click', e => {
if (e.target === document.getElementById('merge-modal'))
document.getElementById('merge-modal').classList.remove('open');
});
document.getElementById('merge-confirm').addEventListener('click', async () => {
const err = document.getElementById('merge-error');
err.textContent = '';
if (!mergeSelected) {
err.textContent = 'Pick a candidate to merge with.';
return;
}
const displayName = document.getElementById('merge-display-name').value.trim();
if (!displayName) {
err.textContent = 'Display name is required.';
return;
}
const btn = document.getElementById('merge-confirm');
btn.disabled = true; btn.textContent = 'Merging…';
try {
const r = await fetch('/api/persons', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
display_name: displayName,
members: [
{ controller_id: mergeSource.controllerId, actor_id: mergeSource.actorId },
{ controller_id: mergeSelected.controllerId, actor_id: mergeSelected.actorId },
],
}),
});
const j = await r.json();
if (!r.ok) {
err.textContent = j.error || `Failed (${r.status})`;
return;
}
document.getElementById('merge-modal').classList.remove('open');
showToast(`Merged into "${displayName}"`);
await loadData();
} finally {
btn.disabled = false; btn.textContent = 'Merge';
}
});
// -------- People modal --------
async function renderSuggestions() {
const list = document.getElementById('suggestions-list');
list.innerHTML = '<div class="empty-state">Loading…</div>';
let items = [];
try {
const res = await fetch('/api/persons/suggestions');
items = await res.json();
} catch {
list.innerHTML = '<div class="empty-state">Failed to load suggestions.</div>';
return;
}
if (!items.length) {
list.innerHTML = '<div class="empty-state">No suggestions. Names already match a person or are unique per controller.</div>';
return;
}
list.innerHTML = '';
items.forEach(s => {
const row = document.createElement('div');
row.className = 'suggestion-row';
const controllerSummary = s.members.map(m => escapeHtml(m.controller_name)).join(', ');
row.innerHTML = `
<div class="ctrl-meta">
<div class="ctrl-name">${escapeHtml(s.display_name)}</div>
<div class="ctrl-sub">${controllerSummary} &middot; ${s.members.length} identities</div>
</div>
<button class="small-btn sync-btn" data-act="merge"
data-payload='${escapeHtml(JSON.stringify(s))}'>Merge</button>
`;
list.appendChild(row);
});
}
async function renderPeople(scrollToId) {
const list = document.getElementById('people-list');
list.innerHTML = '<div class="empty-state">Loading…</div>';
let items = [];
try {
const res = await fetch('/api/persons');
items = await res.json();
} catch {
list.innerHTML = '<div class="empty-state">Failed to load people.</div>';
return;
}
if (!items.length) {
list.innerHTML = '<div class="empty-state">No merged people yet. Use the <span>Merge</span> button on a row.</div>';
return;
}
list.innerHTML = '';
items.forEach(p => {
const row = document.createElement('div');
row.className = 'ctrl-row';
row.dataset.personId = p.id;
const memberLines = p.members.map(m =>
`<div class="ctrl-sub">${escapeHtml(m.controller_name)} &middot; ${escapeHtml(m.full_name)}
<button class="row-action-btn" data-act="unmerge-member"
data-person-id="${escapeHtml(p.id)}"
data-controller-id="${escapeHtml(m.controller_id)}"
data-actor-id="${escapeHtml(m.actor_id)}"
data-name="${escapeHtml(m.full_name)}">Split off</button>
</div>`
).join('');
row.innerHTML = `
<div class="ctrl-meta">
<div class="ctrl-name">
${escapeHtml(p.display_name)}
${p.filtered ? '<span class="disabled-tag">(filtered)</span>' : ''}
</div>
${memberLines}
</div>
<div class="ctrl-actions">
<button class="small-btn" data-act="rename" data-person-id="${escapeHtml(p.id)}"
data-name="${escapeHtml(p.display_name)}">Rename</button>
<button class="small-btn reset-btn" data-act="dissolve" data-person-id="${escapeHtml(p.id)}"
data-name="${escapeHtml(p.display_name)}">Dissolve</button>
</div>
`;
list.appendChild(row);
});
if (scrollToId) {
const target = list.querySelector(`.ctrl-row[data-person-id="${scrollToId}"]`);
if (target) target.scrollIntoView({ block: 'nearest' });
}
}
document.getElementById('open-people-btn').addEventListener('click', async () => {
document.getElementById('people-modal').classList.add('open');
await renderSuggestions();
await renderPeople();
});
document.getElementById('people-close').addEventListener('click', () => {
document.getElementById('people-modal').classList.remove('open');
});
document.getElementById('people-modal').addEventListener('click', e => {
if (e.target === document.getElementById('people-modal'))
document.getElementById('people-modal').classList.remove('open');
});
document.getElementById('suggestions-list').addEventListener('click', async e => {
const btn = e.target.closest('button[data-act="merge"]');
if (!btn) return;
btn.disabled = true;
let payload;
try { payload = JSON.parse(btn.dataset.payload); }
catch { btn.disabled = false; return; }
try {
const r = await fetch('/api/persons', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
display_name: payload.display_name,
members: payload.members.map(m => ({
controller_id: m.controller_id, actor_id: m.actor_id,
})),
}),
});
const j = await r.json();
if (!r.ok) {
showToast(`Merge failed: ${j.error || r.status}`, true);
return;
}
showToast(`Merged "${payload.display_name}"`);
await renderSuggestions();
await renderPeople();
await loadData();
} finally {
btn.disabled = false;
}
});
document.getElementById('people-list').addEventListener('click', async e => {
const btn = e.target.closest('button[data-act]');
if (!btn) return;
const act = btn.dataset.act;
btn.disabled = true;
try {
if (act === 'rename') {
const name = prompt('New display name:', btn.dataset.name);
if (!name || !name.trim()) return;
const r = await fetch(`/api/persons/${btn.dataset.personId}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ display_name: name.trim() }),
});
if (!r.ok) { showToast('Rename failed', true); return; }
showToast(`Renamed to "${name.trim()}"`);
await renderPeople();
await loadData();
} else if (act === 'dissolve') {
if (!confirm(`Dissolve merged person "${btn.dataset.name}"?\n\nAll members will become standalone actors again. Past badge events are unaffected.`))
return;
const r = await fetch(`/api/persons/${btn.dataset.personId}`, { method: 'DELETE' });
if (!r.ok) { showToast('Dissolve failed', true); return; }
showToast(`Dissolved "${btn.dataset.name}"`);
await renderSuggestions();
await renderPeople();
await loadData();
} else if (act === 'unmerge-member') {
if (!confirm(`Split "${btn.dataset.name}" off from this person?`))
return;
const url = `/api/persons/${btn.dataset.personId}/members/${btn.dataset.controllerId}/${btn.dataset.actorId}`;
const r = await fetch(url, { method: 'DELETE' });
if (!r.ok) { showToast('Split failed', true); return; }
showToast(`Split off ${btn.dataset.name}`);
await renderSuggestions();
await renderPeople();
await loadData();
}
} finally {
btn.disabled = false;
}
});
// -------- Wire up --------
document.getElementById('refresh-btn').addEventListener('click', loadData);
document.getElementById('sync-btn').addEventListener('click', syncUsers);