domma-cms 0.10.0 → 0.13.0

package/plugins/garage/admin/views/garage.js

@@ -1,622 +0,0 @@
-/**
- * Garage Plugin — Admin View
- *
- * Provides the Garage admin UI: UK vehicle lookup via DVLA API, saved vehicle
- * management ("My Garage"), and full lookup history.
- *
- * Pattern: follows contacts plugin conventions.
- *   - api()                  — fetch wrapper with CMS Bearer token
- *   - buildVehicleCard()     — DOM-built result card (preserves interactive buttons)
- *   - statusBadge()          — colour-coded MOT/tax status badge
- *   - loadSaved()            — populates My Garage tab via T.create
- *   - loadHistory()          — populates History tab via T.create with D().fromNow()
- */
-
-const BASE = '/api/plugins/garage';
-
-/**
- * Authenticated fetch helper.
- *
- * @param {string} url
- * @param {string} [method]
- * @param {object} [body]
- * @returns {Promise<any>}
- */
-async function api(url, method = 'GET', body) {
-    const opts = {method, headers: {'Authorization': 'Bearer ' + (S.get('auth_token') || '')}};
-    if (body !== undefined) {
-        opts.headers['Content-Type'] = 'application/json';
-        opts.body = JSON.stringify(body);
-    }
-    const res = await fetch(url, opts);
-    if (!res.ok) {
-        const err = await res.json().catch(() => ({error: res.statusText}));
-        throw new Error(err.error || res.statusText);
-    }
-    const text = await res.text();
-    return text ? JSON.parse(text) : {};
-}
-
-/**
- * Escape HTML special characters to prevent XSS in T.create render functions.
- *
- * @param {*} str
- * @returns {string}
- */
-function esc(str) {
-    return String(str ?? '')
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
-
-/**
- * Build a colour-coded status badge element.
- *
- * @param {string} label - e.g. "MOT" or "Tax"
- * @param {string} value - e.g. "Valid", "SORN", "Not valid"
- * @returns {HTMLElement}
- */
-function statusBadge(label, value) {
-    const span = document.createElement('span');
-    const v = (value || '').toLowerCase();
-    let cls = 'badge-secondary';
-    if (v === 'valid' || v === 'taxed') cls = 'badge-success';
-    else if (v === 'sorn') cls = 'badge-warning';
-    else if (v.includes('not valid') || v === 'untaxed') cls = 'badge-danger';
-    span.className = `badge ${cls}`;
-    span.textContent = `${label}: ${value || 'Unknown'}`;
-    return span;
-}
-
-/**
- * Format a date string using D() (Moment-style), falling back gracefully.
- *
- * @param {string|null} dateStr
- * @returns {string}
- */
-function formatDate(dateStr) {
-    if (!dateStr) return '—';
-    try {
-        return D(dateStr).format('D MMM YYYY');
-    } catch {
-        return dateStr;
-    }
-}
-
-/**
- * Build a badge HTML string for T.create render functions (values are escaped).
- *
- * @param {string} value
- * @param {'success'|'warning'|'danger'|'secondary'} cls
- * @returns {string}
- */
-function badgeHtml(value, cls) {
-    return `<span class="badge badge-${cls}">${esc(value || '—')}</span>`;
-}
-
-/**
- * Resolve a badge class from a MOT status string.
- *
- * @param {string} v
- * @returns {string}
- */
-function motBadgeCls(v) {
-    if ((v || '').toLowerCase() === 'valid') return 'success';
-    if (v) return 'danger';
-    return 'secondary';
-}
-
-/**
- * Resolve a badge class from a tax status string.
- *
- * @param {string} v
- * @returns {string}
- */
-function taxBadgeCls(v) {
-    const lv = (v || '').toLowerCase();
-    if (lv === 'taxed') return 'success';
-    if (lv === 'sorn') return 'warning';
-    if (v) return 'danger';
-    return 'secondary';
-}
-
-/** Plate-style HTML span for use inside T.create render functions. */
-function plateHtml(reg) {
-    return `<span style="background:#FFD900;color:#000;font-family:'Arial Black',Arial,sans-serif;font-size:0.85rem;font-weight:900;letter-spacing:2px;padding:0.1rem 0.4rem;border-radius:3px;border:2px solid #000;">${esc(reg)}</span>`;
-}
-
-export const garageView = {
-    templateUrl: '/plugins/garage/admin/templates/garage.html',
-
-    /**
-     * Mount the Garage admin view.
-     *
-     * @param {object} $container - Domma-wrapped container element
-     */
-    async onMount($container) {
-
-        // ---------------------------------------------------------------
-        // State
-        // ---------------------------------------------------------------
-        let savedVehicles = [];
-        let historyVehicles = [];
-
-        // ---------------------------------------------------------------
-        // DOM refs
-        // ---------------------------------------------------------------
-        const regInput = $container.find('#reg-input').get(0);
-        const lookupBtn = $container.find('#lookup-btn').get(0);
-        const rateLimitInfo = $container.find('#rate-limit-info').get(0);
-        const lookupError = $container.find('#lookup-error').get(0);
-        const vehicleResult = $container.find('#vehicle-result').get(0);
-        const resultEmpty = $container.find('#result-empty').get(0);
-        const garageCount = $container.find('#garage-count').get(0);
-        const garageTableEl = $container.find('#garage-table').get(0);
-        const garageEmpty = $container.find('#garage-empty').get(0);
-        const historyCount = $container.find('#history-count').get(0);
-        const historyTableEl = $container.find('#history-table').get(0);
-        const historyEmpty = $container.find('#history-empty').get(0);
-        const clearHistoryBtn = $container.find('#clear-history-btn').get(0);
-        const tabBtnGarage = $container.find('#tab-btn-garage').get(0);
-        const tabBtnHistory = $container.find('#tab-btn-history').get(0);
-        const settingsApiKeyInput = $container.find('#settings-api-key').get(0);
-        const settingsSaveBtn = $container.find('#settings-save-btn').get(0);
-        const settingsKeyStatus = $container.find('#settings-key-status').get(0);
-
-        // ---------------------------------------------------------------
-        // Tabs
-        // ---------------------------------------------------------------
-        E.tabs($container.find('#garage-tabs').get(0));
-
-        // ---------------------------------------------------------------
-        // Build vehicle detail card (DOM construction — preserves buttons)
-        // ---------------------------------------------------------------
-
-        /**
-         * Builds a full vehicle detail card as a DOM node.
-         * Uses createElement throughout so interactive buttons are preserved
-         * (Domma's .html() strips buttons via DOMPurify).
-         *
-         * @param {object} vehicle
-         * @param {Function} [onSaveToggle] - optional callback after save toggle
-         * @returns {HTMLElement}
-         */
-        function buildVehicleCard(vehicle, onSaveToggle) {
-            const card = document.createElement('div');
-            card.className = 'card';
-            card.style.cssText = 'max-width:560px;';
-
-            // Card header — UK plate style registration + make/year
-            const header = document.createElement('div');
-            header.className = 'card-header';
-            header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:1rem;';
-
-            const plate = document.createElement('span');
-            plate.style.cssText = 'background:#FFD900;color:#000;font-family:\'Arial Black\',Arial,sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:3px;padding:0.2rem 0.6rem;border-radius:4px;border:2px solid #000;';
-            plate.textContent = vehicle.registrationNumber || '—';
-
-            const makeYear = document.createElement('span');
-            makeYear.style.cssText = 'font-size:0.9rem;color:var(--dm-text-muted,#888);';
-            makeYear.textContent = [vehicle.make, vehicle.yearOfManufacture].filter(Boolean).join(' · ');
-
-            header.appendChild(plate);
-            header.appendChild(makeYear);
-            card.appendChild(header);
-
-            // Card body
-            const body = document.createElement('div');
-            body.className = 'card-body';
-
-            // Detail grid
-            const grid = document.createElement('div');
-            grid.style.cssText = 'display:grid;grid-template-columns:1fr 1fr;gap:0.4rem 1rem;font-size:0.88rem;margin-bottom:0.75rem;';
-
-            [
-                ['Colour', vehicle.colour],
-                ['Fuel', vehicle.fuelType],
-                ['Engine', vehicle.engineCapacity ? `${vehicle.engineCapacity}cc` : null],
-                ['CO₂', vehicle.co2Emissions ? `${vehicle.co2Emissions}g/km` : null],
-            ].forEach(([label, value]) => {
-                if (!value) return;
-                const item = document.createElement('div');
-                const lbl = document.createElement('span');
-                lbl.style.color = 'var(--dm-text-muted,#888)';
-                lbl.textContent = label + ': ';
-                const val = document.createElement('strong');
-                val.textContent = value;
-                item.appendChild(lbl);
-                item.appendChild(val);
-                grid.appendChild(item);
-            });
-
-            body.appendChild(grid);
-
-            // Status badges
-            const badges = document.createElement('div');
-            badges.style.cssText = 'display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;margin-bottom:0.75rem;';
-            badges.appendChild(statusBadge('MOT', vehicle.motStatus));
-            if (vehicle.motExpiryDate) {
-                const expiry = document.createElement('span');
-                expiry.style.cssText = 'font-size:0.8rem;color:var(--dm-text-muted,#888);';
-                expiry.textContent = `Expires ${formatDate(vehicle.motExpiryDate)}`;
-                badges.appendChild(expiry);
-            }
-            badges.appendChild(statusBadge('Tax', vehicle.taxStatus));
-            if (vehicle.taxDueDate) {
-                const due = document.createElement('span');
-                due.style.cssText = 'font-size:0.8rem;color:var(--dm-text-muted,#888);';
-                due.textContent = `Due ${formatDate(vehicle.taxDueDate)}`;
-                badges.appendChild(due);
-            }
-            body.appendChild(badges);
-
-            // Save / Unsave button
-            const saveBtn = document.createElement('button');
-            saveBtn.className = vehicle.isSaved ? 'btn btn-sm btn-warning' : 'btn btn-sm btn-success';
-            const saveIconEl = document.createElement('span');
-            saveIconEl.setAttribute('data-icon', vehicle.isSaved ? 'bookmark-minus' : 'bookmark-plus');
-            const saveTxt = document.createTextNode(' ' + (vehicle.isSaved ? 'Remove from Garage' : 'Save to Garage'));
-            saveBtn.appendChild(saveIconEl);
-            saveBtn.appendChild(saveTxt);
-
-            saveBtn.addEventListener('click', async () => {
-                try {
-                    const updated = await api(`${BASE}/vehicles/${vehicle.id}/save`, 'PATCH');
-                    vehicle.isSaved = updated.isSaved;
-                    saveBtn.className = updated.isSaved ? 'btn btn-sm btn-warning' : 'btn btn-sm btn-success';
-                    saveIconEl.setAttribute('data-icon', updated.isSaved ? 'bookmark-minus' : 'bookmark-plus');
-                    saveTxt.textContent = ' ' + (updated.isSaved ? 'Remove from Garage' : 'Save to Garage');
-                    E.toast(updated.isSaved ? 'Saved to Garage' : 'Removed from Garage', {type: 'success'});
-                    Domma.icons.scan();
-                    if (onSaveToggle) onSaveToggle(updated);
-                } catch (err) {
-                    E.toast(err.message, {type: 'error'});
-                }
-            });
-
-            body.appendChild(saveBtn);
-            card.appendChild(body);
-            return card;
-        }
-
-        // ---------------------------------------------------------------
-        // Lookup
-        // ---------------------------------------------------------------
-
-        function setLookupError(msg) {
-            if (msg) {
-                lookupError.textContent = msg;
-                lookupError.style.display = '';
-            } else {
-                lookupError.style.display = 'none';
-            }
-        }
-
-        async function doLookup() {
-            const reg = (regInput.value || '').trim();
-            if (!reg) {
-                regInput.focus();
-                return;
-            }
-
-            setLookupError(null);
-            rateLimitInfo.textContent = '';
-            lookupBtn.disabled = true;
-            lookupBtn.textContent = 'Looking up…';
-
-            try {
-                const vehicle = await api(`${BASE}/lookup`, 'POST', {registrationNumber: reg});
-
-                // Show vehicle card in Results tab
-                while (vehicleResult.firstChild) vehicleResult.removeChild(vehicleResult.firstChild);
-                vehicleResult.appendChild(buildVehicleCard(vehicle, async () => {
-                    await loadSaved();
-                    await loadHistory();
-                }));
-                vehicleResult.style.display = '';
-                resultEmpty.style.display = 'none';
-                Domma.icons.scan();
-
-                loadHistory().catch(() => {
-                });
-
-            } catch (err) {
-                if (err.message && err.message.toLowerCase().includes('rate limit')) {
-                    rateLimitInfo.textContent = err.message;
-                } else {
-                    setLookupError(err.message);
-                }
-            } finally {
-                lookupBtn.disabled = false;
-                const icon = document.createElement('span');
-                icon.setAttribute('data-icon', 'search');
-                lookupBtn.textContent = '';
-                lookupBtn.appendChild(icon);
-                lookupBtn.appendChild(document.createTextNode(' Look Up'));
-                Domma.icons.scan();
-            }
-        }
-
-        lookupBtn.addEventListener('click', doLookup);
-        regInput.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter') doLookup();
-        });
-        regInput.addEventListener('input', () => {
-            const pos = regInput.selectionStart;
-            regInput.value = regInput.value.toUpperCase();
-            regInput.setSelectionRange(pos, pos);
-        });
-
-        // ---------------------------------------------------------------
-        // My Garage (saved vehicles)
-        // ---------------------------------------------------------------
-
-        async function loadSaved() {
-            try {
-                savedVehicles = await api(`${BASE}/vehicles`);
-            } catch (err) {
-                E.toast('Could not load saved vehicles: ' + err.message, {type: 'error'});
-                savedVehicles = [];
-            }
-
-            try {
-                const empty = savedVehicles.length === 0;
-                garageEmpty.style.display = empty ? '' : 'none';
-                garageTableEl.style.display = empty ? 'none' : '';
-                garageCount.textContent = savedVehicles.length
-                    ? `${savedVehicles.length} vehicle${savedVehicles.length === 1 ? '' : 's'}`
-                    : '';
-                if (tabBtnGarage) tabBtnGarage.innerHTML = savedVehicles.length
-                    ? `My Garage <span class="badge badge-primary" style="margin-left:0.35rem;">${savedVehicles.length}</span>`
-                    : 'My Garage';
-
-                if (!empty) {
-                    T.create('#garage-table', {
-                        data: savedVehicles,
-                        columns: [
-                            {key: 'registrationNumber', title: 'Registration', render: (v) => plateHtml(v)},
-                            {key: 'make', title: 'Make', render: (v) => esc(v)},
-                            {key: 'colour', title: 'Colour', render: (v) => esc(v)},
-                            {key: 'yearOfManufacture', title: 'Year', render: (v) => esc(v)},
-                            {
-                                key: 'motStatus', title: 'MOT',
-                                render: (v, row) => badgeHtml(v, motBadgeCls(v)) +
-                                    (row && row.motExpiryDate ? `<br><span style="font-size:0.78rem;color:var(--dm-text-muted,#888);">Exp ${formatDate(row.motExpiryDate)}</span>` : '')
-                            },
-                            {
-                                key: 'taxStatus', title: 'Road Tax',
-                                render: (v, row) => badgeHtml(v, taxBadgeCls(v)) +
-                                    (row && row.taxDueDate ? `<br><span style="font-size:0.78rem;color:var(--dm-text-muted,#888);">Due ${formatDate(row.taxDueDate)}</span>` : '')
-                            },
-                            {
-                                key: 'id', title: 'Actions',
-                                render: (id) => `<button class="btn btn-xs btn-outline garage-unsave-btn" data-id="${esc(id)}" title="Remove from Garage"><span data-icon="bookmark-minus"></span> Remove</button>`
-                            }
-                        ]
-                    });
-                    Domma.icons.scan();
-                }
-            } catch (err) {
-                console.error('[garage] loadSaved render error:', err);
-            }
-        }
-
-        garageTableEl.addEventListener('click', async (e) => {
-            const unsaveBtn = e.target.closest('.garage-unsave-btn');
-            if (!unsaveBtn) return;
-            const id = unsaveBtn.dataset.id;
-            try {
-                await api(`${BASE}/vehicles/${id}/save`, 'PATCH');
-                E.toast('Removed from Garage', {type: 'success'});
-                await loadSaved();
-                await loadHistory();
-            } catch (err) {
-                E.toast(err.message, {type: 'error'});
-            }
-        });
-
-        // ---------------------------------------------------------------
-        // History
-        // ---------------------------------------------------------------
-
-        async function loadHistory() {
-            try {
-                historyVehicles = await api(`${BASE}/history`);
-            } catch (err) {
-                E.toast('Could not load history: ' + err.message, {type: 'error'});
-                historyVehicles = [];
-            }
-
-            try {
-                const empty = historyVehicles.length === 0;
-                historyEmpty.style.display = empty ? '' : 'none';
-                historyTableEl.style.display = empty ? 'none' : '';
-                historyCount.textContent = historyVehicles.length
-                    ? `${historyVehicles.length} lookup${historyVehicles.length === 1 ? '' : 's'}`
-                    : '';
-                if (tabBtnHistory) tabBtnHistory.innerHTML = historyVehicles.length
-                    ? `History <span class="badge badge-secondary" style="margin-left:0.35rem;">${historyVehicles.length}</span>`
-                    : 'History';
-
-                if (!empty) {
-                    T.create('#history-table', {
-                        data: historyVehicles,
-                        columns: [
-                            {key: 'registrationNumber', title: 'Registration', render: (v) => plateHtml(v)},
-                            {key: 'make', title: 'Make', render: (v) => esc(v)},
-                            {key: 'yearOfManufacture', title: 'Year', render: (v) => esc(v)},
-                            {
-                                key: 'lookupDate', title: 'Last Checked',
-                                render: (v) => {
-                                    if (!v) return '—';
-                                    try {
-                                        return esc(D(v).fromNow());
-                                    } catch {
-                                        return esc(v);
-                                    }
-                                }
-                            },
-                            {
-                                key: 'motStatus', title: 'MOT',
-                                render: (v, row) => badgeHtml(v, motBadgeCls(v)) +
-                                    (row && row.motExpiryDate ? `<br><span style="font-size:0.78rem;color:var(--dm-text-muted,#888);">Exp ${formatDate(row.motExpiryDate)}</span>` : '')
-                            },
-                            {
-                                key: 'taxStatus', title: 'Road Tax',
-                                render: (v, row) => badgeHtml(v, taxBadgeCls(v)) +
-                                    (row && row.taxDueDate ? `<br><span style="font-size:0.78rem;color:var(--dm-text-muted,#888);">Due ${formatDate(row.taxDueDate)}</span>` : '')
-                            },
-                            {
-                                key: 'isSaved', title: 'In Garage',
-                                render: (v) => v
-                                    ? '<span class="badge badge-success">Saved</span>'
-                                    : '<span class="badge badge-secondary">No</span>'
-                            },
-                            {
-                                key: 'id', title: 'Actions',
-                                render: (id, row) => {
-                                    const saved = row && row.isSaved;
-                                    return `<div style="display:flex;gap:0.4rem;">
-                                    <button class="btn btn-xs ${saved ? 'btn-warning' : 'btn-outline'} history-save-btn" data-id="${esc(id)}" title="${saved ? 'Remove from Garage' : 'Save to Garage'}">
-                                        <span data-icon="${saved ? 'bookmark-minus' : 'bookmark-plus'}"></span>
-                                        ${saved ? 'Remove' : 'Save'}
-                                    </button>
-                                    <button class="btn btn-xs btn-danger history-delete-btn" data-id="${esc(id)}" title="Delete">
-                                        <span data-icon="trash"></span>
-                                    </button>
-                                </div>`;
-                                }
-                            }
-                        ]
-                    });
-                    Domma.icons.scan();
-                }
-            } catch (err) {
-                console.error('[garage] loadHistory render error:', err);
-            }
-        }
-
-        historyTableEl.addEventListener('click', async (e) => {
-            const saveBtn = e.target.closest('.history-save-btn');
-            const deleteBtn = e.target.closest('.history-delete-btn');
-            if (!saveBtn && !deleteBtn) return;
-            const id = (saveBtn || deleteBtn).dataset.id;
-            if (saveBtn) {
-                try {
-                    const updated = await api(`${BASE}/vehicles/${id}/save`, 'PATCH');
-                    E.toast(updated.isSaved ? 'Saved to Garage' : 'Removed from Garage', {type: 'success'});
-                    await loadSaved();
-                    await loadHistory();
-                } catch (err) {
-                    E.toast(err.message, {type: 'error'});
-                }
-            }
-            if (deleteBtn) {
-                const confirmed = await E.confirm('Delete this lookup from your history?');
-                if (!confirmed) return;
-                try {
-                    await api(`${BASE}/vehicles/${id}`, 'DELETE');
-                    E.toast('Deleted', {type: 'success'});
-                    await loadSaved();
-                    await loadHistory();
-                } catch (err) {
-                    E.toast(err.message, {type: 'error'});
-                }
-            }
-        });
-
-        // ---------------------------------------------------------------
-        // Clear History
-        // ---------------------------------------------------------------
-
-        clearHistoryBtn.addEventListener('click', async () => {
-            const unsaved = historyVehicles.filter(v => !v.isSaved);
-            if (unsaved.length === 0) {
-                E.toast('No unsaved history to clear — saved vehicles are kept.', {type: 'info'});
-                return;
-            }
-            const confirmed = await E.confirm(
-                `Delete ${unsaved.length} unsaved lookup${unsaved.length === 1 ? '' : 's'} from history? Saved vehicles will not be affected.`
-            );
-            if (!confirmed) return;
-
-            let deleted = 0;
-            for (const v of unsaved) {
-                try {
-                    await api(`${BASE}/vehicles/${v.id}`, 'DELETE');
-                    deleted++;
-                } catch { /* continue */
-                }
-            }
-            E.toast(`Cleared ${deleted} history item${deleted === 1 ? '' : 's'}.`, {type: 'success'});
-            await loadHistory();
-        });
-
-        // ---------------------------------------------------------------
-        // Settings
-        // ---------------------------------------------------------------
-
-        let currentSettings = {};
-
-        async function loadSettings() {
-            try {
-                const plugins = await api('/api/plugins');
-                const garage = plugins.find(p => p.name === 'garage');
-                currentSettings = garage?.settings || {};
-                const hasKey = !!(currentSettings.dvlaApiKey);
-                const badge = document.createElement('span');
-                badge.className = hasKey ? 'badge badge-success' : 'badge badge-warning';
-                badge.textContent = hasKey
-                    ? 'API key configured'
-                    : 'No API key — lookups will fail until one is saved';
-                settingsKeyStatus.textContent = '';
-                settingsKeyStatus.appendChild(badge);
-            } catch (err) {
-                settingsKeyStatus.textContent = 'Could not load settings.';
-            }
-        }
-
-        settingsSaveBtn.addEventListener('click', async () => {
-            const key = (settingsApiKeyInput.value || '').trim();
-            if (!key) {
-                E.toast('Please enter an API key.', {type: 'warning'});
-                return;
-            }
-
-            settingsSaveBtn.disabled = true;
-            try {
-                await api('/api/plugins/garage', 'PUT', {
-                    enabled: true,
-                    settings: {...currentSettings, dvlaApiKey: key}
-                });
-                currentSettings.dvlaApiKey = key;
-                settingsApiKeyInput.value = '';
-                const badge = document.createElement('span');
-                badge.className = 'badge badge-success';
-                badge.textContent = 'API key configured';
-                settingsKeyStatus.textContent = '';
-                settingsKeyStatus.appendChild(badge);
-                E.toast('Settings saved.', {type: 'success'});
-            } catch (err) {
-                E.toast('Failed to save: ' + err.message, {type: 'error'});
-            } finally {
-                settingsSaveBtn.disabled = false;
-                const icon = document.createElement('span');
-                icon.setAttribute('data-icon', 'save');
-                settingsSaveBtn.textContent = '';
-                settingsSaveBtn.appendChild(icon);
-                settingsSaveBtn.appendChild(document.createTextNode(' Save'));
-                Domma.icons.scan();
-            }
-        });
-
-        // ---------------------------------------------------------------
-        // Initial load
-        // ---------------------------------------------------------------
-        await Promise.all([loadSaved(), loadHistory(), loadSettings()]);
-        Domma.icons.scan();
-    }
-};