feat(projects): projects page overhaul — events, header, module toolbars, cards
Addresses a batch of projects-page UX issues: 1. Vibration Events sub-tab: add a Location filter + clickable column sorting (Timestamp/Location/Serial/Tran/Vert/Long/PVS/Mic). Events are cached client-side so location-filter and sort are instant (no SFM refetch). 3. Drop the misleading single-module "Sound Monitoring" subtitle on the Overview card (combined projects have multiple modules); show the project number · client identity instead. 4. Header cleanup: move the sound-only actions (Generate Combined Report, Night Report, Report Settings) and the Manual/Remote chip out of the global project header and into the Sound tab's module toolbar. The header now carries project-level concerns only (status, modules, merge). The Night Report / Report Settings modals stay defined in the header partial (global), so the relocated buttons still call them. 2. Per-module status UI: each module tab gets a status dropdown (active/on_hold/completed) wired to the new endpoint; the header module chips show a "✓ Done" / "On hold" badge. 5. Project cards redesigned: module mix accent strip, Sound/Vibration chips with per-module status, project number · client identity, and per-module "Sound"/"Vibration" quick-open buttons that deep-link into that module's tab (#sound / #vibration). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015m9FuJvk65kJmmP3c9c6r1
This commit is contained in:
+191
-11
@@ -131,6 +131,19 @@
|
||||
|
||||
<!-- Vibration Tab -->
|
||||
<div id="vibration-tab" class="tab-panel hidden">
|
||||
<!-- Vibration module toolbar — per-module status, scoped to this module -->
|
||||
<div class="flex flex-wrap items-center gap-3 mb-5">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white dark:bg-slate-800 shadow-sm border border-gray-200 dark:border-gray-700">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">Module status</span>
|
||||
<select id="vibration-module-status" onchange="setModuleStatus('vibration_monitoring', this.value, this)"
|
||||
class="text-sm font-medium bg-transparent border-0 focus:ring-0 text-gray-900 dark:text-white cursor-pointer py-0 pr-6">
|
||||
<option value="active">Active</option>
|
||||
<option value="on_hold">On hold</option>
|
||||
<option value="completed">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vibration sub-nav -->
|
||||
<div class="flex gap-0 mb-5 border-b border-gray-200 dark:border-gray-700">
|
||||
<button id="vib-sub-locations-btn" onclick="switchVibSubTab('locations')"
|
||||
@@ -202,6 +215,13 @@
|
||||
<input type="date" id="pve-to" onchange="loadProjectVibrationEvents()"
|
||||
class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-gray-500 dark:text-gray-400">Location</label>
|
||||
<select id="pve-loc" onchange="_pveApplyAndRender()"
|
||||
class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
|
||||
<option value="">All locations</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs text-gray-500 dark:text-gray-400">Events</label>
|
||||
<select id="pve-ft" onchange="loadProjectVibrationEvents()"
|
||||
@@ -234,6 +254,46 @@
|
||||
|
||||
<!-- Sound Tab -->
|
||||
<div id="sound-tab" class="tab-panel hidden">
|
||||
<!-- Sound module toolbar — per-module status + sound-only actions
|
||||
(relocated here from the global project header). -->
|
||||
<div class="flex flex-wrap items-center gap-3 mb-5">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white dark:bg-slate-800 shadow-sm border border-gray-200 dark:border-gray-700">
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">Module status</span>
|
||||
<select id="sound-module-status" onchange="setModuleStatus('sound_monitoring', this.value, this)"
|
||||
class="text-sm font-medium bg-transparent border-0 focus:ring-0 text-gray-900 dark:text-white cursor-pointer py-0 pr-6">
|
||||
<option value="active">Active</option>
|
||||
<option value="on_hold">On hold</option>
|
||||
<option value="completed">Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
<span id="sound-mode-chip" class="hidden items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium"></span>
|
||||
<div class="ml-auto flex flex-wrap items-center gap-2">
|
||||
<a href="/api/projects/{{ project_id }}/combined-report-wizard"
|
||||
class="px-3.5 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors flex items-center gap-2 text-sm">
|
||||
<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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
Generate Combined Report
|
||||
</a>
|
||||
<button onclick="openNightReportModal()"
|
||||
title="Last night's noise vs baseline, per location (FTP report pipeline)"
|
||||
class="px-3.5 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center gap-2 text-sm">
|
||||
<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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
|
||||
</svg>
|
||||
Night Report
|
||||
</button>
|
||||
<button onclick="openReportSettings('{{ project_id }}')"
|
||||
title="Nightly report settings — schedule, baseline range, recipients"
|
||||
class="px-3 py-2 border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors flex items-center text-sm">
|
||||
<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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sound sub-nav -->
|
||||
<div class="flex gap-0 mb-5 border-b border-gray-200 dark:border-gray-700">
|
||||
<button id="sound-sub-locations-btn" onclick="switchSoundSubTab('locations')"
|
||||
@@ -1041,11 +1101,15 @@ function switchVibSubTab(name) {
|
||||
|
||||
// ── Vibration Events sub-tab ─────────────────────────────────────────────
|
||||
let _projectEventsLoaded = false;
|
||||
let _pveAllEvents = []; // full fetched set (before client-side location filter)
|
||||
let _pveTotal = 0; // project-wide count reported by the API
|
||||
let _pveSort = { key: 'timestamp', dir: 'desc' };
|
||||
|
||||
function clearProjectEventFilters() {
|
||||
document.getElementById('pve-from').value = '';
|
||||
document.getElementById('pve-to').value = '';
|
||||
document.getElementById('pve-ft').value = '';
|
||||
const loc = document.getElementById('pve-loc'); if (loc) loc.value = '';
|
||||
loadProjectVibrationEvents();
|
||||
}
|
||||
|
||||
@@ -1057,6 +1121,8 @@ function _pvePPVClass(v) {
|
||||
return 'text-green-600 dark:text-green-400';
|
||||
}
|
||||
|
||||
// Date range / FT / limit are server-side filters → re-fetch. Location and
|
||||
// column sorting are applied client-side over the cached set so they're instant.
|
||||
async function loadProjectVibrationEvents() {
|
||||
const container = document.getElementById('pve-container');
|
||||
if (!container) return;
|
||||
@@ -1076,13 +1142,81 @@ async function loadProjectVibrationEvents() {
|
||||
const r = await fetch(`/api/projects/${projectId}/vibration-events?${params.toString()}`);
|
||||
if (!r.ok) throw new Error('HTTP ' + r.status);
|
||||
const d = await r.json();
|
||||
_renderProjectEvents(d.events || [], d.count || 0, container);
|
||||
_pveAllEvents = d.events || [];
|
||||
_pveTotal = d.count || 0;
|
||||
_pvePopulateLocations();
|
||||
_pveApplyAndRender();
|
||||
} catch (e) {
|
||||
container.innerHTML = `<div class="text-center py-12 text-red-500 text-sm">Failed to load events: ${lsEsc(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function _renderProjectEvents(events, total, container) {
|
||||
// Rebuild the Location dropdown from whatever locations actually have events in
|
||||
// the current fetch, preserving the operator's current selection if still valid.
|
||||
function _pvePopulateLocations() {
|
||||
const sel = document.getElementById('pve-loc');
|
||||
if (!sel) return;
|
||||
const prev = sel.value;
|
||||
const seen = new Map();
|
||||
_pveAllEvents.forEach(ev => {
|
||||
if (ev.location_id && !seen.has(ev.location_id)) seen.set(ev.location_id, ev.location_name || ev.location_id);
|
||||
});
|
||||
const opts = ['<option value="">All locations</option>'];
|
||||
[...seen.entries()]
|
||||
.sort((a, b) => String(a[1]).localeCompare(String(b[1])))
|
||||
.forEach(([id, name]) => opts.push(`<option value="${lsEsc(id)}">${lsEsc(name)}</option>`));
|
||||
sel.innerHTML = opts.join('');
|
||||
if (prev && seen.has(prev)) sel.value = prev;
|
||||
}
|
||||
|
||||
function _pveSortBy(key) {
|
||||
if (_pveSort.key === key) {
|
||||
_pveSort.dir = (_pveSort.dir === 'asc') ? 'desc' : 'asc';
|
||||
} else {
|
||||
_pveSort.key = key;
|
||||
_pveSort.dir = 'desc'; // numbers + dates most useful high→low first
|
||||
}
|
||||
_pveApplyAndRender();
|
||||
}
|
||||
|
||||
const _PVE_NUM_KEYS = new Set(['tran_ppv', 'vert_ppv', 'long_ppv', 'peak_vector_sum', 'mic_ppv']);
|
||||
const _PVE_STR_KEYS = new Set(['location_name', 'serial']);
|
||||
|
||||
function _pveApplyAndRender() {
|
||||
const container = document.getElementById('pve-container');
|
||||
if (!container) return;
|
||||
|
||||
const locId = document.getElementById('pve-loc')?.value || '';
|
||||
let rows = locId ? _pveAllEvents.filter(ev => ev.location_id === locId) : _pveAllEvents.slice();
|
||||
|
||||
const { key, dir } = _pveSort;
|
||||
const mul = dir === 'asc' ? 1 : -1;
|
||||
rows.sort((a, b) => {
|
||||
if (_PVE_NUM_KEYS.has(key)) {
|
||||
const av = (a[key] == null) ? -Infinity : Number(a[key]);
|
||||
const bv = (b[key] == null) ? -Infinity : Number(b[key]);
|
||||
return (av - bv) * mul;
|
||||
}
|
||||
if (_PVE_STR_KEYS.has(key)) {
|
||||
return String(a[key] || '').toLowerCase().localeCompare(String(b[key] || '').toLowerCase()) * mul;
|
||||
}
|
||||
// timestamp — ISO strings sort lexicographically
|
||||
return String(a.timestamp || '').localeCompare(String(b.timestamp || '')) * mul;
|
||||
});
|
||||
|
||||
_renderProjectEvents(rows, container, locId);
|
||||
}
|
||||
|
||||
function _pveTh(label, key, align) {
|
||||
const active = _pveSort.key === key;
|
||||
const arrow = active ? (_pveSort.dir === 'asc' ? '▲' : '▼') : '<span class="opacity-0 group-hover:opacity-40">▼</span>';
|
||||
const alignCls = align === 'right' ? 'text-right' : 'text-left';
|
||||
return `<th onclick="_pveSortBy('${key}')"
|
||||
class="group px-4 py-3 text-xs font-medium uppercase tracking-wider cursor-pointer select-none ${alignCls} ${active ? 'text-seismo-orange' : 'text-gray-700 dark:text-gray-300 hover:text-seismo-orange'}">
|
||||
${label}<span class="ml-1 inline-block text-[10px] text-seismo-orange">${arrow}</span></th>`;
|
||||
}
|
||||
|
||||
function _renderProjectEvents(events, container, locId) {
|
||||
if (!events.length) {
|
||||
container.innerHTML = '<div class="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">No events for the current filter.</div>';
|
||||
return;
|
||||
@@ -1106,19 +1240,22 @@ function _renderProjectEvents(events, total, container) {
|
||||
<td class="px-4 py-2.5 text-sm">${ft}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
const scope = locId
|
||||
? `Showing ${events.length.toLocaleString()} event${events.length === 1 ? '' : 's'} at this location`
|
||||
: `Showing ${events.length.toLocaleString()} of ${_pveTotal.toLocaleString()} events`;
|
||||
container.innerHTML = `
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400 px-1 pb-2">Showing ${events.length} of ${total.toLocaleString()} events</div>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400 px-1 pb-2">${scope}</div>
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-gray-50 dark:bg-slate-700 border-b border-gray-200 dark:border-gray-600">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Timestamp</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Location</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Serial</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Tran</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Vert</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Long</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">PVS</th>
|
||||
<th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Mic</th>
|
||||
${_pveTh('Timestamp', 'timestamp')}
|
||||
${_pveTh('Location', 'location_name')}
|
||||
${_pveTh('Serial', 'serial')}
|
||||
${_pveTh('Tran', 'tran_ppv')}
|
||||
${_pveTh('Vert', 'vert_ppv')}
|
||||
${_pveTh('Long', 'long_ppv')}
|
||||
${_pveTh('PVS', 'peak_vector_sum')}
|
||||
${_pveTh('Mic', 'mic_ppv')}
|
||||
<th class="px-4 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Flags</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -1140,6 +1277,41 @@ function switchSoundSubTab(name) {
|
||||
}
|
||||
}
|
||||
|
||||
// ── Per-module status (active / on_hold / completed) ─────────────────────
|
||||
// Each module has its own lifecycle independent of the parent project, so the
|
||||
// sound side can be "completed" while vibration keeps running.
|
||||
const _MODULE_STATUS_LABEL = { active: 'Active', on_hold: 'On hold', completed: 'Completed' };
|
||||
async function setModuleStatus(moduleType, status, selectEl) {
|
||||
const prev = selectEl ? selectEl.getAttribute('data-prev') : null;
|
||||
try {
|
||||
const r = await fetch(`/api/projects/${projectId}/modules/${moduleType}/status`, {
|
||||
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status })
|
||||
});
|
||||
if (!r.ok) throw new Error('HTTP ' + r.status);
|
||||
if (selectEl) selectEl.setAttribute('data-prev', status);
|
||||
// Refresh the header so the module chip's status badge updates.
|
||||
if (window.htmx) htmx.ajax('GET', `/api/projects/${projectId}/header`, { target: '#project-header', swap: 'innerHTML' });
|
||||
const name = (moduleType === 'sound_monitoring') ? 'Sound' : 'Vibration';
|
||||
if (window.showToast) showToast(`${name} module marked ${_MODULE_STATUS_LABEL[status] || status}.`, 'success');
|
||||
} catch (e) {
|
||||
if (selectEl && prev) selectEl.value = prev; // revert the dropdown on failure
|
||||
if (window.showToast) showToast('Could not update module status.', 'error');
|
||||
else alert('Could not update module status.');
|
||||
}
|
||||
}
|
||||
|
||||
function _renderSoundModeChip(mode) {
|
||||
const chip = document.getElementById('sound-mode-chip');
|
||||
if (!chip) return;
|
||||
const remote = mode === 'remote';
|
||||
chip.classList.remove('hidden');
|
||||
chip.className = 'inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium ' +
|
||||
(remote ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300'
|
||||
: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300');
|
||||
chip.textContent = remote ? 'Remote — data via FTP' : 'Manual — SD card upload';
|
||||
}
|
||||
|
||||
// Load project details
|
||||
async function loadProjectDetails() {
|
||||
try {
|
||||
@@ -1169,6 +1341,14 @@ async function loadProjectDetails() {
|
||||
if (modeRadio) modeRadio.checked = true;
|
||||
settingsUpdateModeStyles();
|
||||
|
||||
// Per-module status selects + the (sound-scoped) data-collection chip.
|
||||
const ms = data.module_status || {};
|
||||
const ssel = document.getElementById('sound-module-status');
|
||||
if (ssel) { ssel.value = ms.sound_monitoring || 'active'; ssel.setAttribute('data-prev', ssel.value); }
|
||||
const vsel = document.getElementById('vibration-module-status');
|
||||
if (vsel) { vsel.value = ms.vibration_monitoring || 'active'; vsel.setAttribute('data-prev', vsel.value); }
|
||||
_renderSoundModeChip(mode);
|
||||
|
||||
// Show/hide module tabs based on active modules
|
||||
const hasSoundModule = projectModules.includes('sound_monitoring');
|
||||
const hasVibrationModule = projectModules.includes('vibration_monitoring');
|
||||
|
||||
Reference in New Issue
Block a user