Upload files to ".Net Capstone Project"
This commit is contained in:
parent
6c82c0c96b
commit
4e5ae647c2
832
.Net Capstone Project/Dashboard27.js
Normal file
832
.Net Capstone Project/Dashboard27.js
Normal file
@ -0,0 +1,832 @@
|
||||
let currentPatientId = null;
|
||||
let patientsCache = [];
|
||||
let patientSearchTerm = '';
|
||||
|
||||
function showSpinner(show) {
|
||||
document.getElementById('spinnerOverlay').style.display = show ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
function showToast(message, variant = 'success') {
|
||||
const container = document.getElementById('toastContainer');
|
||||
const el = document.createElement('div');
|
||||
el.className = `toast align-items-center text-bg-${variant} border-0 show mb-2`;
|
||||
el.innerHTML = `<div class="d-flex">
|
||||
<div class="toast-body">${message}</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" onclick="this.closest('.toast').remove()"></button>
|
||||
</div>`;
|
||||
container.appendChild(el);
|
||||
setTimeout(() => el.remove(), 5000);
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str ?? '';
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function fmtDate(dateStr) {
|
||||
if (!dateStr) return '—';
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
// ---------- Dynamic resource forms ----------
|
||||
// Field config per FHIR resource type. Drives the generic #addResourceModal
|
||||
// so patients, conditions, observations, allergies, medications and
|
||||
// encounters can all be added from the UI and hit the CRUD API — nothing
|
||||
// here is limited to the three seeded demo patients.
|
||||
const RESOURCE_FORMS = {
|
||||
condition: {
|
||||
title: 'Add Condition',
|
||||
fields: [
|
||||
{ key: 'code', label: 'Code (ICD-10, e.g. I10)', type: 'text', required: true },
|
||||
{ key: 'display', label: 'Display name', type: 'text', required: true },
|
||||
{ key: 'clinicalStatus', label: 'Clinical status', type: 'select', options: ['active', 'inactive', 'resolved', 'remission'], default: 'active' },
|
||||
{ key: 'onsetDate', label: 'Onset date', type: 'date', required: true }
|
||||
],
|
||||
add: (patientId, payload) => Api.addCondition(patientId, payload)
|
||||
},
|
||||
observation: {
|
||||
title: 'Add Observation',
|
||||
fields: [
|
||||
{ key: 'code', label: 'Code (LOINC, e.g. 8480-6)', type: 'text', required: true },
|
||||
{ key: 'display', label: 'Display name', type: 'text', required: true },
|
||||
{ key: 'value', label: 'Value', type: 'number', required: true },
|
||||
{ key: 'unit', label: 'Unit', type: 'text', required: true },
|
||||
{ key: 'effectiveDate', label: 'Effective date/time', type: 'datetime-local', required: true }
|
||||
],
|
||||
add: (patientId, payload) => Api.addObservation(patientId, payload)
|
||||
},
|
||||
allergy: {
|
||||
title: 'Add Allergy / Intolerance',
|
||||
fields: [
|
||||
{ key: 'substance', label: 'Substance', type: 'text', required: true },
|
||||
{ key: 'reaction', label: 'Reaction', type: 'text' },
|
||||
{ key: 'criticality', label: 'Criticality', type: 'select', options: ['low', 'high', 'unable-to-assess'], default: 'low' }
|
||||
],
|
||||
add: (patientId, payload) => Api.addAllergy(patientId, payload)
|
||||
},
|
||||
medication: {
|
||||
title: 'Add Medication',
|
||||
fields: [
|
||||
{ key: 'medicationName', label: 'Medication name', type: 'text', required: true },
|
||||
{ key: 'dosage', label: 'Dosage', type: 'text' },
|
||||
{ key: 'status', label: 'Status', type: 'select', options: ['active', 'completed', 'cancelled', 'on-hold', 'stopped'], default: 'active' },
|
||||
{ key: 'authoredOn', label: 'Authored on', type: 'date' }
|
||||
],
|
||||
add: (patientId, payload) => Api.addMedication(patientId, payload)
|
||||
},
|
||||
encounter: {
|
||||
title: 'Add Encounter',
|
||||
fields: [
|
||||
{ key: 'encounterType', label: 'Encounter type', type: 'text', required: true, placeholder: 'e.g. Outpatient' },
|
||||
{ key: 'reason', label: 'Reason', type: 'text' },
|
||||
{ key: 'encounterDate', label: 'Date/time', type: 'datetime-local', required: true },
|
||||
{ key: 'status', label: 'Status', type: 'select', options: ['planned', 'in-progress', 'finished', 'cancelled'], default: 'in-progress' }
|
||||
],
|
||||
add: (patientId, payload) => Api.addEncounter(patientId, payload)
|
||||
}
|
||||
};
|
||||
|
||||
let activeResourceType = null;
|
||||
let newPatientModal, addResourceModal;
|
||||
|
||||
function openResourceModal(type) {
|
||||
if (!currentPatientId) {
|
||||
showToast('Select a patient first.', 'danger');
|
||||
return;
|
||||
}
|
||||
activeResourceType = type;
|
||||
const config = RESOURCE_FORMS[type];
|
||||
document.getElementById('addResourceModalTitle').textContent = config.title;
|
||||
|
||||
const body = document.getElementById('addResourceModalBody');
|
||||
body.innerHTML = config.fields.map(f => {
|
||||
const id = `res_${f.key}`;
|
||||
if (f.type === 'select') {
|
||||
return `<div class="col-12">
|
||||
<label class="form-label small">${escapeHtml(f.label)}</label>
|
||||
<select class="form-select" id="${id}">
|
||||
${f.options.map(o => `<option value="${o}" ${o === f.default ? 'selected' : ''}>${o}</option>`).join('')}
|
||||
</select>
|
||||
</div>`;
|
||||
}
|
||||
return `<div class="col-12">
|
||||
<label class="form-label small">${escapeHtml(f.label)}</label>
|
||||
<input type="${f.type}" ${f.required ? 'required' : ''} class="form-control" id="${id}" placeholder="${escapeHtml(f.placeholder || '')}">
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
addResourceModal.show();
|
||||
}
|
||||
|
||||
// ---------- Dashboard stats + resource browser ----------
|
||||
// Aggregates every patient's chart + care plans into flat arrays (each item
|
||||
// tagged with its owning patient) so the top stat cards can show real
|
||||
// counts, and clicking one can browse that resource across ALL patients —
|
||||
// not just the one currently selected.
|
||||
let resourceCache = { conditions: [], observations: [], allergies: [], medications: [], encounters: [], careplans: [] };
|
||||
let resourceBrowserModal;
|
||||
|
||||
async function loadDashboardStats() {
|
||||
resourceCache = { conditions: [], observations: [], allergies: [], medications: [], encounters: [], careplans: [] };
|
||||
|
||||
try {
|
||||
const [chartResults, carePlanResults] = await Promise.all([
|
||||
Promise.all(patientsCache.map(p => Api.getChart(p.id).catch(() => null))),
|
||||
Promise.all(patientsCache.map(p => Api.getCarePlans(p.id).catch(() => [])))
|
||||
]);
|
||||
|
||||
patientsCache.forEach((p, idx) => {
|
||||
const chart = chartResults[idx];
|
||||
if (chart) {
|
||||
chart.conditions.forEach(c => resourceCache.conditions.push({ ...c, patientId: p.id, patientName: p.fullName }));
|
||||
chart.observations.forEach(o => resourceCache.observations.push({ ...o, patientId: p.id, patientName: p.fullName }));
|
||||
chart.allergies.forEach(a => resourceCache.allergies.push({ ...a, patientId: p.id, patientName: p.fullName }));
|
||||
chart.medications.forEach(m => resourceCache.medications.push({ ...m, patientId: p.id, patientName: p.fullName }));
|
||||
chart.encounters.forEach(e => resourceCache.encounters.push({ ...e, patientId: p.id, patientName: p.fullName }));
|
||||
}
|
||||
(carePlanResults[idx] || []).forEach(cp => resourceCache.careplans.push({ ...cp, patientId: p.id, patientName: p.fullName }));
|
||||
});
|
||||
} catch {
|
||||
// Stats are a nice-to-have on top of the core dashboard — don't block
|
||||
// the rest of the page if aggregation fails for some reason.
|
||||
}
|
||||
|
||||
updateStatCardsForContext();
|
||||
}
|
||||
|
||||
// Returns the patients matching the current search box text (or everyone,
|
||||
// if the box is empty). Shared by the sidebar list and the stat cards so
|
||||
// they always agree on "what's currently in view".
|
||||
function getFilteredPatients() {
|
||||
const term = patientSearchTerm.trim().toLowerCase();
|
||||
if (!term) return patientsCache;
|
||||
|
||||
return patientsCache.filter(p => {
|
||||
const fullName = (p.fullName || '').toLowerCase();
|
||||
const nameParts = fullName.split(' ').filter(Boolean);
|
||||
|
||||
// Name matches if the search term is the start of the full name, OR
|
||||
// the start of any individual name part (first name, last name, etc.)
|
||||
// — so typing "N" matches "Nisha Meshram" and "Neha Patil", but not
|
||||
// "Anjali Patil" (the 'n' isn't at the start of either name part).
|
||||
const nameMatch = fullName.startsWith(term) || nameParts.some(part => part.startsWith(term));
|
||||
|
||||
// Strip generic label prefixes ("pt-", "MRN-") before substring
|
||||
// matching — otherwise a search term can accidentally match the label
|
||||
// text itself. E.g. "MRN-100235" lowercased contains "mrn", so
|
||||
// searching "n" would match every patient's MRN regardless of their
|
||||
// actual number, even ones with nothing else in common with "n".
|
||||
const idValue = (p.id || '').toLowerCase().replace(/^pt-/, '');
|
||||
const mrnValue = (p.medicalRecordNumber || '').toLowerCase().replace(/^mrn-/, '');
|
||||
const idMatch = idValue.includes(term);
|
||||
const mrnMatch = mrnValue.includes(term);
|
||||
|
||||
return nameMatch || idMatch || mrnMatch;
|
||||
});
|
||||
}
|
||||
|
||||
// Drives the top stat cards. Three states:
|
||||
// 1. A patient is selected (currentPatientId set) -> counts for just them.
|
||||
// 2. Nothing selected but the search box has text -> counts for the
|
||||
// patients currently matching the search.
|
||||
// 3. Neither -> counts across everyone.
|
||||
function updateStatCardsForContext() {
|
||||
const setCount = (id, value) => { const el = document.getElementById(id); if (el) el.textContent = value; };
|
||||
const scopeLabel = document.getElementById('statsScopeLabel');
|
||||
|
||||
let activePatients;
|
||||
let scopeText = null;
|
||||
|
||||
if (currentPatientId) {
|
||||
const selected = patientsCache.find(p => p.id === currentPatientId);
|
||||
activePatients = selected ? [selected] : [];
|
||||
if (selected) scopeText = `Showing data for <strong>${escapeHtml(selected.fullName)}</strong>`;
|
||||
} else {
|
||||
activePatients = getFilteredPatients();
|
||||
if (patientSearchTerm.trim()) {
|
||||
scopeText = `Showing ${activePatients.length} of ${patientsCache.length} patients matching "${escapeHtml(patientSearchTerm.trim())}"`;
|
||||
}
|
||||
}
|
||||
|
||||
const activeIds = getActivePatientIds();
|
||||
|
||||
setCount('stat_patients', activePatients.length);
|
||||
setCount('stat_conditions', resourceCache.conditions.filter(c => activeIds.has(c.patientId)).length);
|
||||
setCount('stat_medications', resourceCache.medications.filter(m => activeIds.has(m.patientId)).length);
|
||||
setCount('stat_allergies', resourceCache.allergies.filter(a => activeIds.has(a.patientId)).length);
|
||||
setCount('stat_observations', resourceCache.observations.filter(o => activeIds.has(o.patientId)).length);
|
||||
setCount('stat_encounters', resourceCache.encounters.filter(e => activeIds.has(e.patientId)).length);
|
||||
setCount('stat_careplans', resourceCache.careplans.filter(cp => activeIds.has(cp.patientId)).length);
|
||||
|
||||
if (scopeLabel) {
|
||||
if (scopeText) {
|
||||
scopeLabel.innerHTML = `${scopeText} · <a href="#" id="clearStatsScopeLink">Show all patients</a>`;
|
||||
scopeLabel.classList.remove('d-none');
|
||||
} else {
|
||||
scopeLabel.innerHTML = '';
|
||||
scopeLabel.classList.add('d-none');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function patientChipHtml(patientId, name) {
|
||||
return `<span class="patient-chip" data-jump-patient="${patientId}">👤 ${escapeHtml(name)}</span>`;
|
||||
}
|
||||
|
||||
// The single source of truth for "what patient(s) is the page currently
|
||||
// scoped to" — a selected patient takes priority, otherwise it's whoever
|
||||
// matches the search box (or everyone, if the box is empty). Used by both
|
||||
// the stat cards and the "browse all" modal so they always agree.
|
||||
function getActivePatientIds() {
|
||||
if (currentPatientId) return new Set([currentPatientId]);
|
||||
return new Set(getFilteredPatients().map(p => p.id));
|
||||
}
|
||||
|
||||
const RESOURCE_BROWSER_CONFIG = {
|
||||
patients: {
|
||||
title: 'Patients',
|
||||
columns: ['Name', 'Age', 'Gender', 'MRN'],
|
||||
rows: (activeIds) => patientsCache.filter(p => activeIds.has(p.id)).map(p => [
|
||||
patientChipHtml(p.id, p.fullName), p.age, escapeHtml(p.gender), escapeHtml(p.medicalRecordNumber)
|
||||
])
|
||||
},
|
||||
conditions: {
|
||||
title: 'Conditions',
|
||||
columns: ['Patient', 'Display', 'Code', 'Status', 'Onset'],
|
||||
rows: (activeIds) => resourceCache.conditions.filter(c => activeIds.has(c.patientId)).map(c => [
|
||||
patientChipHtml(c.patientId, c.patientName), escapeHtml(c.display), escapeHtml(c.code),
|
||||
escapeHtml(c.clinicalStatus), fmtDate(c.onsetDate)
|
||||
])
|
||||
},
|
||||
medications: {
|
||||
title: 'Medications',
|
||||
columns: ['Patient', 'Medication', 'Dosage', 'Status', 'Authored'],
|
||||
rows: (activeIds) => resourceCache.medications.filter(m => activeIds.has(m.patientId)).map(m => [
|
||||
patientChipHtml(m.patientId, m.patientName), escapeHtml(m.medicationName), escapeHtml(m.dosage),
|
||||
escapeHtml(m.status), fmtDate(m.authoredOn)
|
||||
])
|
||||
},
|
||||
allergies: {
|
||||
title: 'Allergies',
|
||||
columns: ['Patient', 'Substance', 'Reaction', 'Criticality'],
|
||||
rows: (activeIds) => resourceCache.allergies.filter(a => activeIds.has(a.patientId)).map(a => [
|
||||
patientChipHtml(a.patientId, a.patientName), escapeHtml(a.substance), escapeHtml(a.reaction), escapeHtml(a.criticality)
|
||||
])
|
||||
},
|
||||
observations: {
|
||||
title: 'Observations',
|
||||
columns: ['Patient', 'Display', 'Value', 'Date'],
|
||||
rows: (activeIds) => resourceCache.observations.filter(o => activeIds.has(o.patientId)).map(o => [
|
||||
patientChipHtml(o.patientId, o.patientName), escapeHtml(o.display), `${o.value} ${escapeHtml(o.unit)}`, fmtDate(o.effectiveDate)
|
||||
])
|
||||
},
|
||||
encounters: {
|
||||
title: 'Encounters',
|
||||
columns: ['Patient', 'Type', 'Reason', 'Date', 'Status'],
|
||||
rows: (activeIds) => resourceCache.encounters.filter(e => activeIds.has(e.patientId)).map(e => [
|
||||
patientChipHtml(e.patientId, e.patientName), escapeHtml(e.encounterType), escapeHtml(e.reason),
|
||||
fmtDate(e.encounterDate), escapeHtml(e.status)
|
||||
])
|
||||
},
|
||||
careplans: {
|
||||
title: 'Care Plans',
|
||||
columns: ['Patient', 'Title', 'Triggered By', 'Status', 'Created'],
|
||||
rows: (activeIds) => resourceCache.careplans.filter(cp => activeIds.has(cp.patientId)).map(cp => [
|
||||
patientChipHtml(cp.patientId, cp.patientName), escapeHtml(cp.title), escapeHtml(cp.triggeredByRule),
|
||||
escapeHtml(cp.status), fmtDate(cp.createdDate)
|
||||
])
|
||||
}
|
||||
};
|
||||
|
||||
function openResourceBrowser(resourceType) {
|
||||
const config = RESOURCE_BROWSER_CONFIG[resourceType];
|
||||
if (!config) return;
|
||||
|
||||
const activeIds = getActivePatientIds();
|
||||
const scopeSuffix = currentPatientId
|
||||
? ` — ${patientsCache.find(p => p.id === currentPatientId)?.fullName || 'selected patient'}`
|
||||
: (patientSearchTerm.trim() ? ` — matching "${patientSearchTerm.trim()}"` : '');
|
||||
|
||||
document.getElementById('resourceBrowserTitle').textContent = config.title + scopeSuffix;
|
||||
document.getElementById('resourceBrowserHead').innerHTML = config.columns.map(c => `<th>${c}</th>`).join('');
|
||||
|
||||
const rows = config.rows(activeIds);
|
||||
const body = document.getElementById('resourceBrowserBody');
|
||||
const emptyState = document.getElementById('resourceBrowserEmpty');
|
||||
|
||||
if (rows.length === 0) {
|
||||
body.innerHTML = '';
|
||||
emptyState.textContent = 'No data found.';
|
||||
emptyState.classList.remove('d-none');
|
||||
} else {
|
||||
emptyState.classList.add('d-none');
|
||||
body.innerHTML = rows.map(cells => `<tr>${cells.map(c => `<td>${c}</td>`).join('')}</tr>`).join('');
|
||||
}
|
||||
|
||||
resourceBrowserModal.show();
|
||||
}
|
||||
|
||||
async function submitResourceForm(e) {
|
||||
e.preventDefault();
|
||||
const config = RESOURCE_FORMS[activeResourceType];
|
||||
if (!config) return;
|
||||
|
||||
const payload = {};
|
||||
for (const f of config.fields) {
|
||||
const el = document.getElementById(`res_${f.key}`);
|
||||
let val = el.value;
|
||||
if (f.type === 'number') val = val === '' ? null : parseFloat(val);
|
||||
payload[f.key] = val === '' ? null : val;
|
||||
}
|
||||
|
||||
try {
|
||||
showSpinner(true);
|
||||
await config.add(currentPatientId, payload);
|
||||
addResourceModal.hide();
|
||||
showToast(`${config.title.replace('Add ', '')} added.`);
|
||||
await loadChart(currentPatientId);
|
||||
loadDashboardStats();
|
||||
} catch (err) {
|
||||
showToast(err.message, 'danger');
|
||||
} finally {
|
||||
showSpinner(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteResource(type, id) {
|
||||
if (!currentPatientId || !confirm('Delete this item?')) return;
|
||||
const deleteFns = {
|
||||
condition: Api.deleteCondition,
|
||||
observation: Api.deleteObservation,
|
||||
allergy: Api.deleteAllergy,
|
||||
medication: Api.deleteMedication,
|
||||
encounter: Api.deleteEncounter
|
||||
};
|
||||
try {
|
||||
showSpinner(true);
|
||||
await deleteFns[type](currentPatientId, id);
|
||||
showToast('Deleted.');
|
||||
await loadChart(currentPatientId);
|
||||
loadDashboardStats();
|
||||
} catch (err) {
|
||||
showToast(err.message, 'danger');
|
||||
} finally {
|
||||
showSpinner(false);
|
||||
}
|
||||
}
|
||||
|
||||
function setupDynamicDataControls() {
|
||||
newPatientModal = new bootstrap.Modal(document.getElementById('newPatientModal'));
|
||||
addResourceModal = new bootstrap.Modal(document.getElementById('addResourceModal'));
|
||||
resourceBrowserModal = new bootstrap.Modal(document.getElementById('resourceBrowserModal'));
|
||||
|
||||
document.getElementById('newPatientBtn').addEventListener('click', () => newPatientModal.show());
|
||||
|
||||
// Live search: filters the cached patient list by name, patient ID, or
|
||||
// MRN as the user types — no server round-trip needed.
|
||||
document.getElementById('patientSearchInput')?.addEventListener('input', (e) => {
|
||||
patientSearchTerm = e.target.value;
|
||||
renderPatientList();
|
||||
updateStatCardsForContext();
|
||||
});
|
||||
|
||||
document.getElementById('newPatientForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const payload = {
|
||||
firstName: document.getElementById('np_firstName').value,
|
||||
lastName: document.getElementById('np_lastName').value,
|
||||
dateOfBirth: document.getElementById('np_dob').value,
|
||||
gender: document.getElementById('np_gender').value,
|
||||
medicalRecordNumber: document.getElementById('np_mrn').value || null
|
||||
};
|
||||
try {
|
||||
showSpinner(true);
|
||||
const created = await Api.createPatient(payload);
|
||||
newPatientModal.hide();
|
||||
document.getElementById('newPatientForm').reset();
|
||||
showToast('Patient created.');
|
||||
await loadPatientList();
|
||||
loadDashboardStats();
|
||||
selectPatient(created.patient.id);
|
||||
} catch (err) {
|
||||
showToast(err.message, 'danger');
|
||||
} finally {
|
||||
showSpinner(false);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('addResourceForm').addEventListener('submit', submitResourceForm);
|
||||
|
||||
// Stat cards -> open the "browse this resource across all patients" modal.
|
||||
document.getElementById('statsRow').addEventListener('click', (e) => {
|
||||
const card = e.target.closest('.stat-card');
|
||||
if (card) openResourceBrowser(card.dataset.resource);
|
||||
});
|
||||
|
||||
// "Show all patients" link inside the stats scope label — clears both
|
||||
// the search box and the selected patient, reverting the stat cards to
|
||||
// totals across everyone.
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.id !== 'clearStatsScopeLink') return;
|
||||
e.preventDefault();
|
||||
patientSearchTerm = '';
|
||||
const input = document.getElementById('patientSearchInput');
|
||||
if (input) input.value = '';
|
||||
currentPatientId = null;
|
||||
sessionStorage.removeItem('cip_patientId');
|
||||
document.getElementById('patientContent')?.classList.add('d-none');
|
||||
document.getElementById('noPatientState')?.classList.remove('d-none');
|
||||
renderPatientList();
|
||||
updateStatCardsForContext();
|
||||
});
|
||||
|
||||
// Inside the resource browser: clicking a patient chip jumps straight to
|
||||
// that patient's Chart tab.
|
||||
document.getElementById('resourceBrowserBody').addEventListener('click', (e) => {
|
||||
const chip = e.target.closest('[data-jump-patient]');
|
||||
if (!chip) return;
|
||||
resourceBrowserModal.hide();
|
||||
selectPatient(chip.dataset.jumpPatient);
|
||||
document.querySelectorAll('#dashboardTabs .nav-link').forEach(b => b.classList.remove('active'));
|
||||
document.querySelector('#dashboardTabs .nav-link[data-tab="chart"]')?.classList.add('active');
|
||||
document.querySelectorAll('.tab-pane').forEach(p => p.classList.add('d-none'));
|
||||
document.getElementById('tab-chart')?.classList.remove('d-none');
|
||||
});
|
||||
|
||||
// Event delegation: "+ Add" buttons in the chart tab, and per-item delete
|
||||
// buttons rendered inside the chart lists (see loadChart()).
|
||||
document.getElementById('tab-chart').addEventListener('click', (e) => {
|
||||
const addBtn = e.target.closest('[data-add]');
|
||||
if (addBtn) { openResourceModal(addBtn.dataset.add); return; }
|
||||
|
||||
const delBtn = e.target.closest('[data-delete-type]');
|
||||
if (delBtn) { deleteResource(delBtn.dataset.deleteType, parseInt(delBtn.dataset.deleteId, 10)); }
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Init ----------
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const token = sessionStorage.getItem('cip_token');
|
||||
if (!token) {
|
||||
window.location.href = 'login.html';
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('clinicianLabel').textContent =
|
||||
`👤 ${sessionStorage.getItem('cip_clinician') || 'Clinician'}`;
|
||||
|
||||
document.getElementById('logoutBtn').addEventListener('click', () => {
|
||||
sessionStorage.clear();
|
||||
window.location.href = 'index.html';
|
||||
});
|
||||
|
||||
setupTabs();
|
||||
setupRiskForm();
|
||||
setupDynamicDataControls();
|
||||
document.getElementById('evaluateCdsBtn').addEventListener('click', evaluateCds);
|
||||
document.getElementById('refreshCarePlansBtn').addEventListener('click', () => loadCarePlans(currentPatientId));
|
||||
|
||||
await loadPatientList();
|
||||
loadDashboardStats();
|
||||
|
||||
const launchPatientId = sessionStorage.getItem('cip_patientId');
|
||||
if (launchPatientId) {
|
||||
selectPatient(launchPatientId);
|
||||
}
|
||||
});
|
||||
|
||||
function setupTabs() {
|
||||
document.querySelectorAll('#dashboardTabs .nav-link').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('#dashboardTabs .nav-link').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
document.querySelectorAll('.tab-pane').forEach(p => p.classList.add('d-none'));
|
||||
document.getElementById(`tab-${btn.dataset.tab}`).classList.remove('d-none');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Patients ----------
|
||||
async function loadPatientList() {
|
||||
try {
|
||||
showSpinner(true);
|
||||
patientsCache = await Api.getPatients();
|
||||
renderPatientList();
|
||||
} catch (err) {
|
||||
showToast(err.message, 'danger');
|
||||
} finally {
|
||||
showSpinner(false);
|
||||
}
|
||||
}
|
||||
|
||||
function renderPatientList() {
|
||||
const container = document.getElementById('patientList');
|
||||
const emptyState = document.getElementById('patientSearchEmpty');
|
||||
const emptyTerm = document.getElementById('patientSearchEmptyTerm');
|
||||
|
||||
const term = patientSearchTerm.trim();
|
||||
const filtered = getFilteredPatients();
|
||||
|
||||
if (filtered.length === 0 && term) {
|
||||
container.innerHTML = '';
|
||||
container.classList.add('d-none');
|
||||
if (emptyTerm) emptyTerm.textContent = patientSearchTerm.trim();
|
||||
emptyState?.classList.remove('d-none');
|
||||
return;
|
||||
}
|
||||
container.classList.remove('d-none');
|
||||
emptyState?.classList.add('d-none');
|
||||
|
||||
container.innerHTML = filtered.map(p => `
|
||||
<div class="card-ci patient-tile p-2 mb-2 d-flex justify-content-between align-items-start ${p.id === currentPatientId ? 'active' : ''}" data-id="${p.id}">
|
||||
<div>
|
||||
<div class="fw-semibold">${escapeHtml(p.fullName)}</div>
|
||||
<div class="small text-muted-ci">${p.age} yrs · ${escapeHtml(p.gender)} · ${escapeHtml(p.medicalRecordNumber)}</div>
|
||||
<div class="small text-muted-ci">ID: ${escapeHtml(p.id)}</div>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-danger" data-delete-patient="${p.id}" title="Delete patient">×</button>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
container.querySelectorAll('.patient-tile').forEach(tile => {
|
||||
tile.addEventListener('click', (e) => {
|
||||
if (e.target.closest('[data-delete-patient]')) return;
|
||||
selectPatient(tile.dataset.id);
|
||||
});
|
||||
});
|
||||
|
||||
container.querySelectorAll('[data-delete-patient]').forEach(btn => {
|
||||
btn.addEventListener('click', async (e) => {
|
||||
e.stopPropagation();
|
||||
const id = btn.dataset.deletePatient;
|
||||
if (!confirm('Delete this patient and all their chart data?')) return;
|
||||
try {
|
||||
showSpinner(true);
|
||||
await Api.deletePatient(id);
|
||||
showToast('Patient deleted.');
|
||||
if (currentPatientId === id) {
|
||||
currentPatientId = null;
|
||||
sessionStorage.removeItem('cip_patientId');
|
||||
document.getElementById('patientContent').classList.add('d-none');
|
||||
document.getElementById('noPatientState').classList.remove('d-none');
|
||||
}
|
||||
await loadPatientList();
|
||||
loadDashboardStats();
|
||||
} catch (err) {
|
||||
showToast(err.message, 'danger');
|
||||
} finally {
|
||||
showSpinner(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function selectPatient(id) {
|
||||
currentPatientId = id;
|
||||
sessionStorage.setItem('cip_patientId', id);
|
||||
renderPatientList();
|
||||
updateStatCardsForContext();
|
||||
|
||||
document.getElementById('noPatientState').classList.add('d-none');
|
||||
document.getElementById('patientContent').classList.remove('d-none');
|
||||
|
||||
resetRiskTab();
|
||||
resetCdsTab();
|
||||
|
||||
await loadChart(id);
|
||||
await loadCarePlans(id);
|
||||
}
|
||||
|
||||
// ---------- Chart ----------
|
||||
async function loadChart(id) {
|
||||
try {
|
||||
showSpinner(true);
|
||||
const chart = await Api.getChart(id);
|
||||
|
||||
document.getElementById('patientName').textContent = chart.fullName;
|
||||
document.getElementById('patientMeta').textContent =
|
||||
`${chart.age} yrs · ${chart.gender} · ${chart.medicalRecordNumber} · Patient ID: ${chart.patientId}`;
|
||||
|
||||
document.getElementById('conditionsList').innerHTML = chart.conditions.length
|
||||
? chart.conditions.map(c => `
|
||||
<div class="chart-list-item d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<div class="fw-semibold">${escapeHtml(c.display)}</div>
|
||||
<div class="small text-muted-ci">${escapeHtml(c.code)} · ${escapeHtml(c.clinicalStatus)} · onset ${fmtDate(c.onsetDate)}</div>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-danger" data-delete-type="condition" data-delete-id="${c.id}">×</button>
|
||||
</div>`).join('')
|
||||
: '<div class="text-muted-ci">No active conditions on file.</div>';
|
||||
|
||||
document.getElementById('allergiesList').innerHTML = chart.allergies.length
|
||||
? chart.allergies.map(a => `
|
||||
<div class="chart-list-item d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<div class="fw-semibold text-danger">${escapeHtml(a.substance)}</div>
|
||||
<div class="small text-muted-ci">Reaction: ${escapeHtml(a.reaction)} · Criticality: ${escapeHtml(a.criticality)}</div>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-danger" data-delete-type="allergy" data-delete-id="${a.id}">×</button>
|
||||
</div>`).join('')
|
||||
: '<div class="text-muted-ci">No known allergies (NKA).</div>';
|
||||
|
||||
document.getElementById('medicationsList').innerHTML = chart.medications.length
|
||||
? chart.medications.map(m => `
|
||||
<div class="chart-list-item d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<div class="fw-semibold">${escapeHtml(m.medicationName)}</div>
|
||||
<div class="small text-muted-ci">${escapeHtml(m.dosage)} · ${escapeHtml(m.status)} · authored ${fmtDate(m.authoredOn)}</div>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-danger" data-delete-type="medication" data-delete-id="${m.id}">×</button>
|
||||
</div>`).join('')
|
||||
: '<div class="text-muted-ci">No active medications.</div>';
|
||||
|
||||
document.getElementById('observationsList').innerHTML = chart.observations.length
|
||||
? chart.observations.map(o => `
|
||||
<div class="chart-list-item d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<div class="fw-semibold">${escapeHtml(o.display)}: ${o.value} ${escapeHtml(o.unit)}</div>
|
||||
<div class="small text-muted-ci">${fmtDate(o.effectiveDate)}</div>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-danger" data-delete-type="observation" data-delete-id="${o.id}">×</button>
|
||||
</div>`).join('')
|
||||
: '<div class="text-muted-ci">No recent observations.</div>';
|
||||
|
||||
document.getElementById('encountersList').innerHTML = chart.encounters.length
|
||||
? chart.encounters.map(e => `
|
||||
<div class="chart-list-item d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<div class="fw-semibold">${escapeHtml(e.encounterType)} — ${escapeHtml(e.reason)}</div>
|
||||
<div class="small text-muted-ci">${fmtDate(e.encounterDate)} · ${escapeHtml(e.status)}</div>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-outline-danger" data-delete-type="encounter" data-delete-id="${e.id}">×</button>
|
||||
</div>`).join('')
|
||||
: '<div class="text-muted-ci">No encounters on file.</div>';
|
||||
|
||||
} catch (err) {
|
||||
showToast(err.message, 'danger');
|
||||
} finally {
|
||||
showSpinner(false);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Risk ----------
|
||||
function resetRiskTab() {
|
||||
document.getElementById('riskForm').reset();
|
||||
document.getElementById('q_pain_val').textContent = '0';
|
||||
document.getElementById('riskResultEmpty').classList.remove('d-none');
|
||||
document.getElementById('riskResultBody').classList.add('d-none');
|
||||
}
|
||||
|
||||
function setupRiskForm() {
|
||||
const painInput = document.getElementById('q_pain');
|
||||
painInput.addEventListener('input', () => {
|
||||
document.getElementById('q_pain_val').textContent = painInput.value;
|
||||
});
|
||||
|
||||
document.getElementById('riskForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
if (!currentPatientId) return;
|
||||
|
||||
const questionnaire = {
|
||||
smoker: document.getElementById('q_smoker').checked,
|
||||
familyHistoryHeartDisease: document.getElementById('q_family').checked,
|
||||
priorHospitalization: document.getElementById('q_hosp').checked,
|
||||
bmi: document.getElementById('q_bmi').value ? parseFloat(document.getElementById('q_bmi').value) : null,
|
||||
painScore: parseInt(document.getElementById('q_pain').value || '0', 10)
|
||||
};
|
||||
|
||||
try {
|
||||
showSpinner(true);
|
||||
const result = await Api.assessRisk(currentPatientId, questionnaire);
|
||||
renderRiskResult(result);
|
||||
showToast('Risk assessment complete.');
|
||||
} catch (err) {
|
||||
showToast(err.message, 'danger');
|
||||
} finally {
|
||||
showSpinner(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderRiskResult(result) {
|
||||
document.getElementById('riskResultEmpty').classList.add('d-none');
|
||||
document.getElementById('riskResultBody').classList.remove('d-none');
|
||||
|
||||
const gauge = document.getElementById('scoreGauge');
|
||||
gauge.textContent = result.score;
|
||||
gauge.style.background = result.riskLevel === 'High'
|
||||
? 'radial-gradient(circle, #e74c3c, #c0392b)'
|
||||
: 'radial-gradient(circle, #27ae60, #1e8449)';
|
||||
|
||||
const badge = document.getElementById('riskLevelBadge');
|
||||
badge.textContent = `${result.riskLevel} Risk`;
|
||||
badge.className = `risk-badge ${result.riskLevel}`;
|
||||
|
||||
document.getElementById('riskFactorsList').innerHTML = result.contributingFactors
|
||||
.map(f => `<li>${escapeHtml(f)}</li>`).join('');
|
||||
}
|
||||
|
||||
// ---------- CDS ----------
|
||||
function resetCdsTab() {
|
||||
document.getElementById('cdsAlertsContainer').innerHTML =
|
||||
'<div class="text-muted-ci text-center py-5">Click "Evaluate Encounter" to screen for drug-allergy conflicts and guideline gaps.</div>';
|
||||
document.getElementById('alertCountBadge').classList.add('d-none');
|
||||
}
|
||||
|
||||
async function evaluateCds() {
|
||||
if (!currentPatientId) return;
|
||||
try {
|
||||
showSpinner(true);
|
||||
const result = await Api.evaluateCds(currentPatientId);
|
||||
renderCdsAlerts(result);
|
||||
} catch (err) {
|
||||
showToast(err.message, 'danger');
|
||||
} finally {
|
||||
showSpinner(false);
|
||||
}
|
||||
}
|
||||
|
||||
function renderCdsAlerts(result) {
|
||||
const container = document.getElementById('cdsAlertsContainer');
|
||||
const badge = document.getElementById('alertCountBadge');
|
||||
|
||||
if (!result.hasAlerts) {
|
||||
container.innerHTML = '<div class="text-center py-5"><div class="fs-1">✅</div><div class="text-muted-ci">Nothing triggered — no CDS alerts for this encounter.</div></div>';
|
||||
badge.classList.add('d-none');
|
||||
return;
|
||||
}
|
||||
|
||||
badge.textContent = result.alerts.length;
|
||||
badge.classList.remove('d-none');
|
||||
|
||||
container.innerHTML = result.alerts.map(a => `
|
||||
<div class="alert-card ${a.severity}" data-alert-id="${a.id}">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<span class="severity-tag ${a.severity}">${escapeHtml(a.severity)}</span>
|
||||
<span class="small text-muted-ci">${escapeHtml(a.ruleId)}</span>
|
||||
</div>
|
||||
<div class="fw-semibold mt-2">${escapeHtml(a.summary)}</div>
|
||||
<div class="small text-muted-ci mt-1">${escapeHtml(a.recommendation)}</div>
|
||||
<button class="btn btn-ci-primary btn-sm mt-3 create-careplan-btn" data-alert-id="${a.id}">
|
||||
Create Care Plan & Service Request
|
||||
</button>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
container.querySelectorAll('.create-careplan-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => createCarePlanFromAlert(parseInt(btn.dataset.alertId, 10)));
|
||||
});
|
||||
}
|
||||
|
||||
async function createCarePlanFromAlert(alertId) {
|
||||
try {
|
||||
showSpinner(true);
|
||||
await Api.createCarePlan({
|
||||
patientId: currentPatientId,
|
||||
alertId,
|
||||
createServiceRequest: true,
|
||||
priority: 'urgent'
|
||||
});
|
||||
showToast('Care Plan and Service Request created and written back to the FHIR store.');
|
||||
|
||||
document.querySelector(`.alert-card[data-alert-id="${alertId}"]`)?.remove();
|
||||
const badge = document.getElementById('alertCountBadge');
|
||||
const remaining = document.querySelectorAll('.alert-card').length;
|
||||
if (remaining === 0) {
|
||||
resetCdsTab();
|
||||
document.getElementById('cdsAlertsContainer').innerHTML =
|
||||
'<div class="text-center py-5"><div class="fs-1">✅</div><div class="text-muted-ci">All alerts for this encounter have been actioned.</div></div>';
|
||||
} else {
|
||||
badge.textContent = remaining;
|
||||
}
|
||||
|
||||
await loadCarePlans(currentPatientId);
|
||||
} catch (err) {
|
||||
showToast(err.message, 'danger');
|
||||
} finally {
|
||||
showSpinner(false);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Care Plans ----------
|
||||
async function loadCarePlans(patientId) {
|
||||
if (!patientId) return;
|
||||
try {
|
||||
const carePlans = await Api.getCarePlans(patientId);
|
||||
const tbody = document.getElementById('carePlansTableBody');
|
||||
|
||||
tbody.innerHTML = carePlans.length
|
||||
? carePlans.map(cp => `
|
||||
<tr>
|
||||
<td>${escapeHtml(cp.title)}</td>
|
||||
<td><span class="small text-muted-ci">${escapeHtml(cp.triggeredByRule)}</span></td>
|
||||
<td><span class="badge bg-success-subtle text-success">${escapeHtml(cp.status)}</span></td>
|
||||
<td class="small text-muted-ci">${fmtDate(cp.createdDate)}</td>
|
||||
</tr>`).join('')
|
||||
: '<tr><td colspan="4" class="text-muted-ci text-center py-4">No care plans yet.</td></tr>';
|
||||
} catch (err) {
|
||||
showToast(err.message, 'danger');
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user