Files
terra-view/templates/admin/pending_deployments.html
T
serversdown 85a64c83f8 fix: classify button stuck on "Classifying…" on modal reopen
submitClassify()'s success path closes the modal and reloads the list but
never resets the submit button (only the error paths did), and
openClassifyModal() reset the form fields but not the button. So after a
successful classify, the next modal opened with the button stuck disabled on
"Classifying…" — only a full page refresh cleared it.

Reset the submit button to "Classify"/enabled in openClassifyModal so every
open starts clean regardless of how the previous one ended.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-22 16:55:45 +00:00

470 lines
22 KiB
HTML

{% extends "base.html" %}
{% block title %}Pending Deployments - Seismo Fleet Manager{% endblock %}
{% block content %}
<div class="mb-6">
<a href="/tools" class="text-sm text-seismo-orange hover:text-seismo-burgundy">← Back to Tools</a>
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mt-1">Pending Deployments</h1>
<p class="text-gray-600 dark:text-gray-400 mt-1">
Captures from the field waiting to be classified.
<a href="/deploy" class="text-seismo-orange hover:text-seismo-navy">Capture a new one →</a>
</p>
</div>
<!-- Filter pills -->
<div class="flex gap-2 mb-6">
<button onclick="switchPdStatus('awaiting')" id="pd-tab-awaiting"
class="px-4 py-2 rounded-lg text-sm font-medium bg-seismo-orange text-white">
Awaiting <span id="pd-count-awaiting" class="ml-1 text-xs opacity-80"></span>
</button>
<button onclick="switchPdStatus('assigned')" id="pd-tab-assigned"
class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
Assigned
</button>
<button onclick="switchPdStatus('cancelled')" id="pd-tab-cancelled"
class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
Cancelled
</button>
</div>
<div id="pd-list" class="space-y-4">
<div class="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">Loading…</div>
</div>
<!-- Classify modal -->
<div id="classify-modal" class="hidden fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto" style="min-height: 480px;">
<div class="sticky top-0 bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-gray-700 px-5 py-4 flex items-center justify-between">
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Classify pending deployment</h3>
<p class="text-xs text-gray-500 dark:text-gray-400">
<span id="classify-unit-label" class="font-mono text-seismo-orange"></span>
captured at
<span id="classify-captured-at"></span>
</p>
</div>
<button onclick="closeClassifyModal()" class="text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div class="p-5 space-y-5">
<!-- Mode toggle -->
<div class="flex gap-2">
<button onclick="setClassifyMode('existing')" id="mode-existing"
class="flex-1 px-3 py-2 text-sm rounded-lg bg-seismo-orange text-white">
Assign to existing location
</button>
<button onclick="setClassifyMode('new')" id="mode-new"
class="flex-1 px-3 py-2 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
Create new location
</button>
</div>
<!-- Existing mode: project + location pickers -->
<div id="classify-existing-pane" class="space-y-3">
<div>
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">Project</label>
<select id="existing-project-select" onchange="onExistingProjectChange()"
class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm">
<option value="">Loading projects…</option>
</select>
</div>
<div>
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">Location</label>
<select id="existing-location-select"
class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm">
<option value="">Pick a project first</option>
</select>
</div>
</div>
<!-- New mode: project (existing/new) + location name -->
<div id="classify-new-pane" class="hidden space-y-3">
<div>
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">Project</label>
<div class="flex gap-2 mt-1">
<select id="new-project-select" onchange="onNewProjectMode()"
class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm">
<option value="">— Create new project —</option>
</select>
</div>
</div>
<div id="new-project-name-wrap" class="space-y-2">
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">New project name</label>
<input id="new-project-name" type="text" placeholder="e.g. Carnegie Museum HVAC"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm">
<p class="text-xs text-gray-500 dark:text-gray-400">Project type will be Vibration Monitoring.</p>
</div>
<div>
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">Location name</label>
<input id="new-location-name" type="text" placeholder="e.g. NE corner, near loading dock"
class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm">
</div>
<label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
<input type="checkbox" id="use-captured-coords" checked
class="rounded border-gray-300 text-seismo-orange focus:ring-seismo-orange">
Use the photo's GPS coords <span id="captured-coords-hint" class="text-xs text-gray-500 dark:text-gray-400"></span>
</label>
</div>
<div>
<label class="text-sm font-medium text-gray-700 dark:text-gray-300">Assignment notes (optional)</label>
<textarea id="classify-notes" rows="2"
class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm"></textarea>
</div>
<div id="classify-error" class="hidden text-sm text-red-600"></div>
</div>
<div class="sticky bottom-0 bg-white dark:bg-slate-800 border-t border-gray-200 dark:border-gray-700 px-5 py-3 flex justify-end gap-2">
<button onclick="closeClassifyModal()"
class="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
Cancel
</button>
<button id="classify-submit" onclick="submitClassify()"
class="px-4 py-2 text-sm bg-seismo-orange hover:bg-orange-600 text-white rounded-lg font-medium">
Classify
</button>
</div>
</div>
</div>
<script>
let _pdState = {
currentStatus: 'awaiting',
rows: [],
classifyingId: null,
classifyingPd: null,
classifyMode: 'existing', // 'existing' | 'new'
projectsCache: null,
};
function _esc(s) {
if (s == null) return '';
return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
function _fmtDateTime(iso) {
if (!iso) return '—';
return iso.replace('T', ' ').slice(0, 16);
}
async function loadPdList() {
const list = document.getElementById('pd-list');
list.innerHTML = '<div class="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">Loading…</div>';
try {
const r = await fetch(`/api/deployments/pending?status=${encodeURIComponent(_pdState.currentStatus)}`);
if (!r.ok) throw new Error('HTTP ' + r.status);
const data = await r.json();
_pdState.rows = data.pending_deployments || [];
renderPdList();
// Refresh awaiting count badge.
if (_pdState.currentStatus === 'awaiting') {
document.getElementById('pd-count-awaiting').textContent = data.count > 0 ? `(${data.count})` : '';
}
} catch (e) {
list.innerHTML = `<div class="text-center py-8 text-red-500 text-sm">Load failed: ${_esc(e.message)}</div>`;
}
}
function renderPdList() {
const list = document.getElementById('pd-list');
if (_pdState.rows.length === 0) {
const blurb = {
awaiting: 'No captures awaiting classification.',
assigned: 'No assigned captures yet.',
cancelled: 'No cancelled captures.',
}[_pdState.currentStatus] || '';
list.innerHTML = `<div class="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">${blurb}</div>`;
return;
}
list.innerHTML = _pdState.rows.map(pd => _renderPdCard(pd)).join('');
}
function _renderPdCard(pd) {
const photoUrl = pd.photo_url || '';
const coords = pd.coordinates
? `<span class="font-mono text-xs">${_esc(pd.coordinates)}</span>`
: '<span class="text-xs italic text-gray-400">no GPS in photo</span>';
const noteHtml = pd.operator_note
? `<p class="text-xs text-gray-600 dark:text-gray-300 mt-1 italic">"${_esc(pd.operator_note)}"</p>`
: '';
let footerActions = '';
if (pd.status === 'awaiting') {
footerActions = `<div class="flex gap-2 mt-3">
<button onclick="openClassifyModal('${_esc(pd.id)}')"
class="px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white text-sm rounded-lg font-medium">
Classify
</button>
<button onclick="cancelPending('${_esc(pd.id)}')"
class="px-4 py-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 text-sm rounded-lg">
Cancel
</button>
</div>`;
} else if (pd.status === 'assigned') {
footerActions = `<div class="mt-3 text-xs text-green-700 dark:text-green-400">
Promoted ${_fmtDateTime(pd.promoted_at)} → assignment <span class="font-mono">${_esc((pd.resulting_assignment_id || '').slice(0, 8))}…</span>
</div>`;
} else if (pd.status === 'cancelled') {
footerActions = `<div class="mt-3 text-xs text-gray-500 dark:text-gray-400">
Cancelled ${_fmtDateTime(pd.cancelled_at)}${pd.cancelled_reason ? `${_esc(pd.cancelled_reason)}` : ''}
</div>`;
}
return `<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-4 flex gap-4">
<div class="shrink-0 w-32 h-32 bg-gray-100 dark:bg-slate-900 rounded-lg overflow-hidden">
${photoUrl
? `<img src="${_esc(photoUrl)}" class="w-full h-full object-cover" alt="install">`
: `<div class="w-full h-full flex items-center justify-center text-gray-400 text-xs">(no photo)</div>`}
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 flex-wrap">
<a href="/unit/${_esc(pd.unit_id)}" class="font-mono font-semibold text-seismo-orange hover:text-seismo-navy">
${_esc(pd.unit_id)}
</a>
<span class="text-xs text-gray-500 dark:text-gray-400">captured ${_fmtDateTime(pd.captured_at)}</span>
</div>
<div class="text-xs text-gray-500 dark:text-gray-400 mt-1">${coords}</div>
${noteHtml}
${footerActions}
</div>
</div>`;
}
function switchPdStatus(status) {
_pdState.currentStatus = status;
const tabs = { awaiting: 'pd-tab-awaiting', assigned: 'pd-tab-assigned', cancelled: 'pd-tab-cancelled' };
Object.entries(tabs).forEach(([k, id]) => {
const btn = document.getElementById(id);
if (k === status) {
btn.classList.add('bg-seismo-orange', 'text-white');
btn.classList.remove('bg-gray-100', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300', 'hover:bg-gray-200', 'dark:hover:bg-gray-600');
} else {
btn.classList.remove('bg-seismo-orange', 'text-white');
btn.classList.add('bg-gray-100', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300', 'hover:bg-gray-200', 'dark:hover:bg-gray-600');
}
});
loadPdList();
}
// ── Classify modal ──────────────────────────────────────────────────
async function openClassifyModal(pendingId) {
const pd = _pdState.rows.find(r => r.id === pendingId);
if (!pd) return;
_pdState.classifyingId = pendingId;
_pdState.classifyingPd = pd;
document.getElementById('classify-unit-label').textContent = pd.unit_id;
document.getElementById('classify-captured-at').textContent = _fmtDateTime(pd.captured_at);
document.getElementById('classify-notes').value = '';
document.getElementById('classify-error').classList.add('hidden');
document.getElementById('new-project-name').value = '';
document.getElementById('new-location-name').value = '';
// Reset the submit button — the success path closes the modal without
// clearing it, so without this it stays stuck on "Classifying…" on reopen.
const submitBtn = document.getElementById('classify-submit');
submitBtn.disabled = false;
submitBtn.textContent = 'Classify';
// Coords hint for "use captured coords" checkbox.
const hint = document.getElementById('captured-coords-hint');
if (pd.coordinates) {
hint.textContent = `(${pd.coordinates})`;
document.getElementById('use-captured-coords').checked = true;
document.getElementById('use-captured-coords').disabled = false;
} else {
hint.textContent = '(no GPS in photo — uncheck unless you want a placeholder)';
document.getElementById('use-captured-coords').checked = false;
document.getElementById('use-captured-coords').disabled = true;
}
setClassifyMode('existing');
document.getElementById('classify-modal').classList.remove('hidden');
// Load projects if not cached.
if (!_pdState.projectsCache) {
await _loadProjects();
}
_populateProjectSelects();
}
function closeClassifyModal() {
document.getElementById('classify-modal').classList.add('hidden');
}
async function _loadProjects() {
try {
// Must be the JSON endpoint — /api/projects/list returns HTML cards.
const r = await fetch('/api/projects/list-json');
const data = r.ok ? await r.json() : { projects: [] };
// Tolerate either { projects: [...] } or a flat array.
_pdState.projectsCache = Array.isArray(data) ? data : (data.projects || []);
} catch (e) {
_pdState.projectsCache = [];
}
}
function _populateProjectSelects() {
// Sort active projects first, then alphabetical.
const projs = (_pdState.projectsCache || []).slice().sort((a, b) => {
if ((a.status || '') !== (b.status || '')) {
if (a.status === 'active') return -1;
if (b.status === 'active') return 1;
}
return (a.name || '').localeCompare(b.name || '');
});
const existingSel = document.getElementById('existing-project-select');
existingSel.innerHTML = '<option value="">— Pick a project —</option>' + projs.map(p =>
`<option value="${_esc(p.id)}">${_esc(p.name)}${p.status && p.status !== 'active' ? ` (${p.status})` : ''}</option>`
).join('');
const newSel = document.getElementById('new-project-select');
newSel.innerHTML = '<option value="">— Create new project —</option>' + projs.map(p =>
`<option value="${_esc(p.id)}">${_esc(p.name)}</option>`
).join('');
}
async function onExistingProjectChange() {
const projectId = document.getElementById('existing-project-select').value;
const locSel = document.getElementById('existing-location-select');
if (!projectId) {
locSel.innerHTML = '<option value="">Pick a project first</option>';
return;
}
locSel.innerHTML = '<option value="">Loading…</option>';
try {
const r = await fetch(`/api/projects/${projectId}/locations-json?location_type=vibration`);
const locs = await r.json();
if (!Array.isArray(locs) || locs.length === 0) {
locSel.innerHTML = '<option value="">(no locations — use Create new location instead)</option>';
return;
}
locSel.innerHTML = '<option value="">— Pick a location —</option>' + locs.map(l =>
`<option value="${_esc(l.id)}">${_esc(l.name)}</option>`
).join('');
} catch (e) {
locSel.innerHTML = `<option value="">Load failed: ${_esc(e.message)}</option>`;
}
}
function setClassifyMode(mode) {
_pdState.classifyMode = mode;
const ex = document.getElementById('mode-existing');
const nw = document.getElementById('mode-new');
document.getElementById('classify-existing-pane').classList.toggle('hidden', mode !== 'existing');
document.getElementById('classify-new-pane').classList.toggle('hidden', mode !== 'new');
const activeCls = ['bg-seismo-orange', 'text-white'];
const dormantCls = ['bg-gray-100', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300', 'hover:bg-gray-200', 'dark:hover:bg-gray-600'];
if (mode === 'existing') {
ex.classList.add(...activeCls); ex.classList.remove(...dormantCls);
nw.classList.remove(...activeCls); nw.classList.add(...dormantCls);
} else {
nw.classList.add(...activeCls); nw.classList.remove(...dormantCls);
ex.classList.remove(...activeCls); ex.classList.add(...dormantCls);
}
}
function onNewProjectMode() {
const sel = document.getElementById('new-project-select');
const wrap = document.getElementById('new-project-name-wrap');
wrap.classList.toggle('hidden', !!sel.value);
}
async function submitClassify() {
const btn = document.getElementById('classify-submit');
const errEl = document.getElementById('classify-error');
errEl.classList.add('hidden');
btn.disabled = true; btn.textContent = 'Classifying…';
const body = { notes: document.getElementById('classify-notes').value.trim() };
if (_pdState.classifyMode === 'existing') {
const locId = document.getElementById('existing-location-select').value;
if (!locId) {
errEl.textContent = 'Pick a location.';
errEl.classList.remove('hidden');
btn.disabled = false; btn.textContent = 'Classify';
return;
}
body.location_id = locId;
} else {
const existingProj = document.getElementById('new-project-select').value;
const newName = document.getElementById('new-project-name').value.trim();
const locName = document.getElementById('new-location-name').value.trim();
if (!locName) {
errEl.textContent = 'Location name required.';
errEl.classList.remove('hidden');
btn.disabled = false; btn.textContent = 'Classify';
return;
}
if (existingProj) {
body.project_id = existingProj;
} else {
if (!newName) {
errEl.textContent = 'Project name (or pick an existing project) required.';
errEl.classList.remove('hidden');
btn.disabled = false; btn.textContent = 'Classify';
return;
}
body.project_name = newName;
body.project_type_id = 'vibration_monitoring';
}
body.location_name = locName;
body.use_captured_coords = document.getElementById('use-captured-coords').checked;
}
try {
const r = await fetch(`/api/deployments/pending/${_pdState.classifyingId}/promote`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
if (!r.ok) {
const e = await r.json().catch(() => ({detail: 'HTTP ' + r.status}));
throw new Error(e.detail || 'HTTP ' + r.status);
}
closeClassifyModal();
loadPdList();
} catch (e) {
errEl.textContent = e.message;
errEl.classList.remove('hidden');
btn.disabled = false; btn.textContent = 'Classify';
}
}
async function cancelPending(pendingId) {
const reason = prompt('Cancel this capture?\n\nOptional reason:');
if (reason === null) return; // user hit Cancel on the prompt
try {
const r = await fetch(`/api/deployments/pending/${pendingId}/cancel`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ reason }),
});
if (!r.ok) {
const e = await r.json().catch(() => ({detail: 'HTTP ' + r.status}));
throw new Error(e.detail || 'HTTP ' + r.status);
}
loadPdList();
} catch (e) {
alert('Cancel failed: ' + e.message);
}
}
// Kick off the initial load.
loadPdList();
// Refresh awaiting count every 30s for the badge.
setInterval(() => {
if (_pdState.currentStatus === 'awaiting') loadPdList();
}, 30000);
</script>
{% endblock %}