380 lines
14 KiB
JavaScript
380 lines
14 KiB
JavaScript
import { apiGet } from '../api.js';
|
|
import { showToast } from '../app.js';
|
|
|
|
let sortCol = null;
|
|
let sortDir = 'asc';
|
|
let allClients = [];
|
|
let questionsDef = [];
|
|
let questionnaireMeta = null;
|
|
let filterCoach = '';
|
|
let filterSupervisor = '';
|
|
let filterStatus = '';
|
|
let filterDateFrom = '';
|
|
let filterDateTo = '';
|
|
|
|
export async function resultsPage(params) {
|
|
const app = document.getElementById('app');
|
|
sortCol = null;
|
|
sortDir = 'asc';
|
|
filterCoach = '';
|
|
filterSupervisor = '';
|
|
filterStatus = '';
|
|
filterDateFrom = '';
|
|
filterDateTo = '';
|
|
|
|
app.innerHTML = `
|
|
<div class="page-header">
|
|
<h1 id="resultsTitle">Results</h1>
|
|
<div class="actions">
|
|
<a href="#/questionnaire/${params.id}" class="btn">← Back to Editor</a>
|
|
<a href="#/" class="btn">Dashboard</a>
|
|
</div>
|
|
</div>
|
|
<div id="resultsContent"><div class="spinner"></div></div>
|
|
`;
|
|
|
|
try {
|
|
const data = await apiGet(`results.php?questionnaireID=${encodeURIComponent(params.id)}`);
|
|
questionnaireMeta = data.questionnaire;
|
|
questionsDef = data.questions || [];
|
|
allClients = data.clients || [];
|
|
document.getElementById('resultsTitle').textContent = `Results: ${questionnaireMeta.name} v${questionnaireMeta.version}`;
|
|
renderResults();
|
|
} catch (e) {
|
|
showToast(e.message, 'error');
|
|
document.getElementById('resultsContent').innerHTML = `<p class="error-text">${esc(e.message)}</p>`;
|
|
}
|
|
}
|
|
|
|
function renderResults() {
|
|
const container = document.getElementById('resultsContent');
|
|
|
|
// Collect unique coaches and statuses for filters
|
|
const coachOptions = getCoachFilterOptions();
|
|
const supervisorOptions = getSupervisorFilterOptions();
|
|
const statuses = [...new Set(allClients.map(c => c.status))].filter(Boolean).sort();
|
|
|
|
container.innerHTML = `
|
|
<div class="card" style="margin-bottom:16px">
|
|
<div class="filter-bar">
|
|
<label style="font-size:.85rem;font-weight:500">Filter:</label>
|
|
<select id="filterSupervisor">
|
|
<option value="">All supervisors</option>
|
|
${supervisorOptions.map(name => `<option value="${esc(name)}" ${filterSupervisor === name ? 'selected' : ''}>${esc(name)}</option>`).join('')}
|
|
</select>
|
|
<select id="filterCoach">
|
|
<option value="">All coaches</option>
|
|
${coachOptions.map(([id, label]) => `<option value="${esc(id)}" ${filterCoach === id ? 'selected' : ''}>${esc(label)}</option>`).join('')}
|
|
</select>
|
|
<select id="filterStatus">
|
|
<option value="">All statuses</option>
|
|
${statuses.map(s => `<option value="${esc(s)}" ${filterStatus === s ? 'selected' : ''}>${esc(s)}</option>`).join('')}
|
|
</select>
|
|
<label style="font-size:.85rem;display:flex;align-items:center;gap:4px">
|
|
Completed from
|
|
<input type="date" id="filterDateFrom" value="${esc(filterDateFrom)}">
|
|
</label>
|
|
<label style="font-size:.85rem;display:flex;align-items:center;gap:4px">
|
|
to
|
|
<input type="date" id="filterDateTo" value="${esc(filterDateTo)}">
|
|
</label>
|
|
<button type="button" class="btn btn-sm" id="clearFiltersBtn">Clear filters</button>
|
|
<span style="margin-left:auto;font-size:.85rem;color:var(--text-secondary)" id="resultCount"></span>
|
|
<a id="exportCsvLink" class="btn btn-sm" href="#">Export CSV</a>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="table-wrapper">
|
|
<table class="data-table" id="resultsTable">
|
|
<thead><tr id="resultsHead"></tr></thead>
|
|
<tbody id="resultsBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('filterSupervisor').addEventListener('change', (e) => {
|
|
filterSupervisor = e.target.value;
|
|
renderTableRows();
|
|
});
|
|
document.getElementById('filterCoach').addEventListener('change', (e) => {
|
|
filterCoach = e.target.value;
|
|
renderTableRows();
|
|
});
|
|
document.getElementById('filterStatus').addEventListener('change', (e) => {
|
|
filterStatus = e.target.value;
|
|
renderTableRows();
|
|
});
|
|
document.getElementById('filterDateFrom').addEventListener('change', (e) => {
|
|
filterDateFrom = e.target.value;
|
|
renderTableRows();
|
|
});
|
|
document.getElementById('filterDateTo').addEventListener('change', (e) => {
|
|
filterDateTo = e.target.value;
|
|
renderTableRows();
|
|
});
|
|
document.getElementById('clearFiltersBtn').addEventListener('click', () => {
|
|
filterCoach = '';
|
|
filterSupervisor = '';
|
|
filterStatus = '';
|
|
filterDateFrom = '';
|
|
filterDateTo = '';
|
|
renderResults();
|
|
});
|
|
document.getElementById('exportCsvLink').addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
exportCSV();
|
|
});
|
|
|
|
renderTableHead();
|
|
renderTableRows();
|
|
}
|
|
|
|
function renderTableHead() {
|
|
const head = document.getElementById('resultsHead');
|
|
const fixedCols = [
|
|
{ key: 'clientCode', label: 'Client' },
|
|
{ key: 'coachUsername', label: 'Coach' },
|
|
{ key: 'supervisorUsername', label: 'Supervisor' },
|
|
{ key: 'status', label: 'Status' },
|
|
{ key: 'sumPoints', label: 'Score' },
|
|
{ key: 'completedAt', label: 'Completed' },
|
|
];
|
|
const questionCols = questionsDef.map(q => ({
|
|
key: `q_${q.questionID}`,
|
|
label: q.defaultText,
|
|
questionID: q.questionID,
|
|
}));
|
|
const allCols = [...fixedCols, ...questionCols];
|
|
|
|
head.innerHTML = allCols.map(col => {
|
|
let cls = 'sortable';
|
|
if (sortCol === col.key) cls += sortDir === 'asc' ? ' sort-asc' : ' sort-desc';
|
|
return `<th class="${cls}" data-key="${col.key}" title="${esc(col.label)}">${esc(col.label)}</th>`;
|
|
}).join('');
|
|
|
|
head.querySelectorAll('th.sortable').forEach(th => {
|
|
th.addEventListener('click', () => {
|
|
const key = th.dataset.key;
|
|
if (sortCol === key) sortDir = sortDir === 'asc' ? 'desc' : 'asc';
|
|
else { sortCol = key; sortDir = 'asc'; }
|
|
renderTableHead();
|
|
renderTableRows();
|
|
});
|
|
});
|
|
}
|
|
|
|
function getCoachFilterOptions() {
|
|
const map = new Map();
|
|
allClients.forEach(c => {
|
|
if (!c.coachID || map.has(c.coachID)) return;
|
|
map.set(c.coachID, c.coachUsername || c.coachID);
|
|
});
|
|
return [...map.entries()].sort((a, b) => a[1].localeCompare(b[1]));
|
|
}
|
|
|
|
function getSupervisorFilterOptions() {
|
|
return [...new Set(allClients.map(c => c.supervisorUsername).filter(Boolean))].sort((a, b) =>
|
|
a.localeCompare(b)
|
|
);
|
|
}
|
|
|
|
function coachDisplayName(c) {
|
|
return c.coachUsername || c.coachID || '—';
|
|
}
|
|
|
|
function supervisorDisplayName(c) {
|
|
return c.supervisorUsername || '—';
|
|
}
|
|
|
|
function getFilteredClients() {
|
|
let clients = allClients;
|
|
if (filterSupervisor) clients = clients.filter(c => c.supervisorUsername === filterSupervisor);
|
|
if (filterCoach) clients = clients.filter(c => c.coachID === filterCoach);
|
|
if (filterStatus) clients = clients.filter(c => c.status === filterStatus);
|
|
if (filterDateFrom || filterDateTo) {
|
|
const fromTs = filterDateFrom ? dateInputToUnixStart(filterDateFrom) : null;
|
|
const toTs = filterDateTo ? dateInputToUnixEnd(filterDateTo) : null;
|
|
clients = clients.filter(c => {
|
|
const ts = c.completedAt;
|
|
if (!ts) return false;
|
|
if (fromTs !== null && ts < fromTs) return false;
|
|
if (toTs !== null && ts > toTs) return false;
|
|
return true;
|
|
});
|
|
}
|
|
return clients;
|
|
}
|
|
|
|
function dateInputToUnixStart(yyyyMmDd) {
|
|
const [y, m, d] = yyyyMmDd.split('-').map(Number);
|
|
return Math.floor(new Date(y, m - 1, d).getTime() / 1000);
|
|
}
|
|
|
|
function dateInputToUnixEnd(yyyyMmDd) {
|
|
const [y, m, d] = yyyyMmDd.split('-').map(Number);
|
|
return Math.floor(new Date(y, m - 1, d, 23, 59, 59, 999).getTime() / 1000);
|
|
}
|
|
|
|
function renderTableRows() {
|
|
const body = document.getElementById('resultsBody');
|
|
let clients = getFilteredClients();
|
|
|
|
// Sort
|
|
if (sortCol) {
|
|
clients = [...clients].sort((a, b) => {
|
|
let va = getCellValue(a, sortCol);
|
|
let vb = getCellValue(b, sortCol);
|
|
if (va == null) va = '';
|
|
if (vb == null) vb = '';
|
|
if (typeof va === 'number' && typeof vb === 'number') {
|
|
return sortDir === 'asc' ? va - vb : vb - va;
|
|
}
|
|
const cmp = String(va).localeCompare(String(vb), undefined, { numeric: true });
|
|
return sortDir === 'asc' ? cmp : -cmp;
|
|
});
|
|
}
|
|
|
|
document.getElementById('resultCount').textContent = `${clients.length} client${clients.length === 1 ? '' : 's'}`;
|
|
|
|
if (!clients.length) {
|
|
body.innerHTML = `<tr><td colspan="99" style="text-align:center;color:var(--text-secondary);padding:30px">No results found</td></tr>`;
|
|
return;
|
|
}
|
|
|
|
// Build option text lookup
|
|
const optionMap = {};
|
|
questionsDef.forEach(q => {
|
|
(q.answerOptions || []).forEach(o => {
|
|
optionMap[o.answerOptionID] = o.defaultText;
|
|
});
|
|
});
|
|
|
|
body.innerHTML = clients.map(c => {
|
|
const completedDate = c.completedAt ? new Date(c.completedAt * 1000).toLocaleDateString() : '—';
|
|
const statusBadge = c.status ? `<span class="badge badge-${c.status.toLowerCase().replace(/\s+/g,'_')}">${esc(c.status)}</span>` : '—';
|
|
|
|
const questionCells = questionsDef.map(q => {
|
|
const ans = c.answers && c.answers[q.questionID];
|
|
if (!ans) return '<td>—</td>';
|
|
if (q.type === 'glass_scale_question') {
|
|
const text = formatGlassAnswer(ans.freeTextValue);
|
|
return `<td>${esc(text || '—')}</td>`;
|
|
}
|
|
if (ans.answerOptionID && optionMap[ans.answerOptionID]) {
|
|
return `<td>${esc(optionMap[ans.answerOptionID])}</td>`;
|
|
}
|
|
if (ans.freeTextValue) return `<td>${esc(ans.freeTextValue)}</td>`;
|
|
if (ans.numericValue !== null && ans.numericValue !== undefined) return `<td>${ans.numericValue}</td>`;
|
|
return '<td>—</td>';
|
|
}).join('');
|
|
|
|
return `<tr>
|
|
<td>${esc(c.clientCode)}</td>
|
|
<td>${esc(coachDisplayName(c))}</td>
|
|
<td>${esc(supervisorDisplayName(c))}</td>
|
|
<td>${statusBadge}</td>
|
|
<td>${c.sumPoints !== null ? c.sumPoints : '—'}</td>
|
|
<td>${completedDate}</td>
|
|
${questionCells}
|
|
</tr>`;
|
|
}).join('');
|
|
}
|
|
|
|
function getCellValue(client, key) {
|
|
if (key === 'clientCode') return client.clientCode;
|
|
if (key === 'coachUsername') return coachDisplayName(client);
|
|
if (key === 'supervisorUsername') return supervisorDisplayName(client);
|
|
if (key === 'status') return client.status;
|
|
if (key === 'sumPoints') return client.sumPoints;
|
|
if (key === 'completedAt') return client.completedAt;
|
|
if (key.startsWith('q_')) {
|
|
const qid = key.substring(2);
|
|
const q = questionsDef.find(qq => qq.questionID === qid);
|
|
const ans = client.answers && client.answers[qid];
|
|
if (!ans) return null;
|
|
if (q?.type === 'glass_scale_question') {
|
|
return formatGlassAnswer(ans.freeTextValue) || null;
|
|
}
|
|
if (ans.numericValue !== null && ans.numericValue !== undefined) return ans.numericValue;
|
|
if (ans.freeTextValue) return ans.freeTextValue;
|
|
return ans.answerOptionID || null;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function exportCSV() {
|
|
const clients = getFilteredClients();
|
|
const optionMap = {};
|
|
questionsDef.forEach(q => {
|
|
(q.answerOptions || []).forEach(o => {
|
|
optionMap[o.answerOptionID] = o.defaultText;
|
|
});
|
|
});
|
|
|
|
const headers = ['clientCode', 'coach', 'supervisor', 'status', 'sumPoints', 'completedAt',
|
|
...questionsDef.map(q => q.defaultText)];
|
|
|
|
const rows = clients.map(c => {
|
|
const base = [
|
|
c.clientCode, coachDisplayName(c), c.supervisorUsername || '', c.status, c.sumPoints ?? '',
|
|
c.completedAt ? new Date(c.completedAt * 1000).toISOString() : ''
|
|
];
|
|
const answerCols = questionsDef.map(q => {
|
|
const ans = c.answers && c.answers[q.questionID];
|
|
if (!ans) return '';
|
|
if (q.type === 'glass_scale_question') {
|
|
return formatGlassAnswer(ans.freeTextValue);
|
|
}
|
|
if (ans.answerOptionID && optionMap[ans.answerOptionID]) return optionMap[ans.answerOptionID];
|
|
if (ans.freeTextValue) return ans.freeTextValue;
|
|
if (ans.numericValue !== null && ans.numericValue !== undefined) return ans.numericValue;
|
|
return '';
|
|
});
|
|
return [...base, ...answerCols];
|
|
});
|
|
|
|
let csv = '\uFEFF'; // BOM
|
|
csv += headers.map(csvEsc).join(',') + '\n';
|
|
rows.forEach(r => { csv += r.map(csvEsc).join(',') + '\n'; });
|
|
|
|
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `${questionnaireMeta.name}_v${questionnaireMeta.version}_results.csv`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
showToast('CSV exported', 'success');
|
|
}
|
|
|
|
function csvEsc(val) {
|
|
const s = String(val ?? '');
|
|
if (s.includes(',') || s.includes('"') || s.includes('\n')) {
|
|
return '"' + s.replace(/"/g, '""') + '"';
|
|
}
|
|
return s;
|
|
}
|
|
|
|
function formatGlassAnswer(raw) {
|
|
if (!raw) return '';
|
|
try {
|
|
const o = JSON.parse(raw);
|
|
if (o && typeof o === 'object' && !Array.isArray(o)) {
|
|
return Object.entries(o)
|
|
.filter(([, v]) => v != null && String(v).trim() !== '')
|
|
.map(([k, v]) => `${k}: ${v}`)
|
|
.join('; ');
|
|
}
|
|
} catch {
|
|
/* plain text fallback */
|
|
}
|
|
return String(raw);
|
|
}
|
|
|
|
function esc(s) {
|
|
const d = document.createElement('div');
|
|
d.textContent = s ?? '';
|
|
return d.innerHTML;
|
|
}
|