new system prototype

2026-04-15 10:19:42 +02:00
parent e805f225bc
commit 034b108c7e
80 changed files with 12212 additions and 890 deletions
--- a/website/js/pages/export.js
+++ b/website/js/pages/export.js
@ -0,0 +1,104 @@
+import { apiGet } from '../api.js';
+import { showToast } from '../app.js';
+
+export async function exportPage() {
+    const app = document.getElementById('app');
+    app.innerHTML = `
+        <div class="page-header">
+            <h1>Export Data</h1>
+            <div class="actions"><a href="#/" class="btn">&larr; Dashboard</a></div>
+        </div>
+        <div class="card" id="exportContent"><div class="spinner"></div></div>
+    `;
+
+    try {
+        const data = await apiGet('questionnaires.php');
+        renderExport(data.questionnaires || []);
+    } catch (e) {
+        showToast(e.message, 'error');
+        document.getElementById('exportContent').innerHTML = `<p class="error-text">${esc(e.message)}</p>`;
+    }
+}
+
+function renderExport(questionnaires) {
+    const container = document.getElementById('exportContent');
+
+    if (!questionnaires.length) {
+        container.innerHTML = `
+            <div class="empty-state">
+                <h3>No questionnaires</h3>
+                <p>Create questionnaires first to export data.</p>
+            </div>
+        `;
+        return;
+    }
+
+    container.innerHTML = `
+        <p style="margin-bottom:16px;color:var(--text-secondary)">
+            Select a questionnaire and click Export to download a CSV file with all client responses (filtered by your role's visibility).
+        </p>
+        <table class="data-table">
+            <thead>
+                <tr>
+                    <th>Questionnaire</th>
+                    <th>Version</th>
+                    <th>State</th>
+                    <th>Questions</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                ${questionnaires.map(q => `
+                    <tr>
+                        <td><strong>${esc(q.name)}</strong></td>
+                        <td>${esc(q.version || '—')}</td>
+                        <td><span class="badge badge-${(q.state || 'draft').toLowerCase()}">${esc(q.state || 'draft')}</span></td>
+                        <td>${q.questionCount || 0}</td>
+                        <td>
+                            <button class="btn btn-sm btn-primary export-btn" data-id="${q.questionnaireID}" data-name="${esc(q.name)}" data-version="${esc(q.version)}">
+                                Export CSV
+                            </button>
+                            <a href="#/questionnaire/${q.questionnaireID}/results" class="btn btn-sm">View Results</a>
+                        </td>
+                    </tr>
+                `).join('')}
+            </tbody>
+        </table>
+    `;
+
+    container.querySelectorAll('.export-btn').forEach(btn => {
+        btn.addEventListener('click', async () => {
+            btn.disabled = true;
+            btn.textContent = 'Downloading...';
+            try {
+                const token = localStorage.getItem('qdb_token');
+                const res = await fetch(`../api/export.php?questionnaireID=${encodeURIComponent(btn.dataset.id)}&format=csv`, {
+                    headers: { 'Authorization': `Bearer ${token}` }
+                });
+                if (!res.ok) {
+                    const err = await res.json().catch(() => ({ error: 'Download failed' }));
+                    throw new Error(err.error);
+                }
+                const blob = await res.blob();
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `${btn.dataset.name}_v${btn.dataset.version}.csv`;
+                a.click();
+                URL.revokeObjectURL(url);
+                showToast('Download started', 'success');
+            } catch (e) {
+                showToast(e.message, 'error');
+            } finally {
+                btn.disabled = false;
+                btn.textContent = 'Export CSV';
+            }
+        });
+    });
+}
+
+function esc(s) {
+    const d = document.createElement('div');
+    d.textContent = s ?? '';
+    return d.innerHTML;
+}