Changeset 0.25.0 (#160)
This commit is contained in:
198
src/js/admin-surfaces.js
Normal file
198
src/js/admin-surfaces.js
Normal file
@@ -0,0 +1,198 @@
|
||||
// ==========================================
|
||||
// Chat Switchboard — Admin Surfaces UI
|
||||
// ==========================================
|
||||
// v0.25.0: Surface lifecycle management.
|
||||
// Renders in the "Surfaces" admin section via ADMIN_LOADERS.
|
||||
|
||||
async function _loadAdminSurfaces() {
|
||||
const container = document.getElementById('adminSurfacesContent');
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = `
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
|
||||
<p style="font-size:13px;color:var(--text-2);margin:0;line-height:1.6;flex:1;">
|
||||
Manage which surfaces are available. Disabled surfaces redirect to Chat and are hidden from navigation.
|
||||
</p>
|
||||
<button id="adminSurfaceInstallBtn" class="btn-small" style="margin-left:16px;white-space:nowrap;">
|
||||
+ Install Surface
|
||||
</button>
|
||||
</div>
|
||||
<div id="adminSurfaceInstallForm" style="display:none;margin-bottom:16px;padding:16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;">
|
||||
<div style="font-size:13px;font-weight:600;margin-bottom:8px;">Install Surface Archive</div>
|
||||
<p style="font-size:12px;color:var(--text-3);margin:0 0 12px;">Upload a <code>.surface</code> or <code>.zip</code> archive containing manifest.json, js/, css/, and assets/.</p>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<input type="file" id="adminSurfaceFile" accept=".surface,.zip" style="font-size:12px;color:var(--text-2);">
|
||||
<button id="adminSurfaceUploadBtn" class="btn-small btn-primary" disabled>Upload</button>
|
||||
<button id="adminSurfaceCancelBtn" class="btn-small">Cancel</button>
|
||||
</div>
|
||||
<div id="adminSurfaceInstallStatus" style="font-size:12px;margin-top:8px;"></div>
|
||||
</div>
|
||||
<div id="adminSurfaceList" class="admin-surface-list">
|
||||
<div style="padding:12px;font-size:12px;color:var(--text-3);">Loading…</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Wire install form
|
||||
var installBtn = document.getElementById('adminSurfaceInstallBtn');
|
||||
var installForm = document.getElementById('adminSurfaceInstallForm');
|
||||
var fileInput = document.getElementById('adminSurfaceFile');
|
||||
var uploadBtn = document.getElementById('adminSurfaceUploadBtn');
|
||||
var cancelBtn = document.getElementById('adminSurfaceCancelBtn');
|
||||
var statusEl = document.getElementById('adminSurfaceInstallStatus');
|
||||
|
||||
if (installBtn) installBtn.addEventListener('click', function() {
|
||||
installForm.style.display = '';
|
||||
installBtn.style.display = 'none';
|
||||
});
|
||||
if (cancelBtn) cancelBtn.addEventListener('click', function() {
|
||||
installForm.style.display = 'none';
|
||||
installBtn.style.display = '';
|
||||
fileInput.value = '';
|
||||
uploadBtn.disabled = true;
|
||||
statusEl.textContent = '';
|
||||
});
|
||||
if (fileInput) fileInput.addEventListener('change', function() {
|
||||
uploadBtn.disabled = !fileInput.files.length;
|
||||
});
|
||||
if (uploadBtn) uploadBtn.addEventListener('click', async function() {
|
||||
var file = fileInput.files[0];
|
||||
if (!file) return;
|
||||
uploadBtn.disabled = true;
|
||||
uploadBtn.textContent = 'Uploading…';
|
||||
statusEl.textContent = '';
|
||||
statusEl.style.color = 'var(--text-3)';
|
||||
|
||||
try {
|
||||
var formData = new FormData();
|
||||
formData.append('file', file);
|
||||
var base = window.__BASE__ || '';
|
||||
var resp = await fetch(base + '/api/v1/admin/surfaces/install', {
|
||||
method: 'POST',
|
||||
headers: API._authHeaders ? (function() { var h = API._authHeaders(); delete h['Content-Type']; return h; })() : {},
|
||||
body: formData,
|
||||
});
|
||||
var data = await resp.json();
|
||||
if (!resp.ok) throw new Error(data.error || 'Upload failed');
|
||||
|
||||
statusEl.style.color = 'var(--success)';
|
||||
statusEl.textContent = 'Installed: ' + (data.title || data.id);
|
||||
if (typeof UI !== 'undefined') UI.toast('Surface installed: ' + (data.title || data.id), 'success');
|
||||
|
||||
// Refresh the list
|
||||
installForm.style.display = 'none';
|
||||
installBtn.style.display = '';
|
||||
fileInput.value = '';
|
||||
_loadSurfaceList();
|
||||
} catch (e) {
|
||||
statusEl.style.color = 'var(--danger)';
|
||||
statusEl.textContent = 'Error: ' + e.message;
|
||||
uploadBtn.disabled = false;
|
||||
uploadBtn.textContent = 'Upload';
|
||||
}
|
||||
});
|
||||
|
||||
_loadSurfaceList();
|
||||
}
|
||||
|
||||
async function _loadSurfaceList() {
|
||||
var listEl = document.getElementById('adminSurfaceList');
|
||||
if (!listEl) return;
|
||||
|
||||
try {
|
||||
var resp = await API._get('/api/v1/admin/surfaces');
|
||||
var surfaces = resp.surfaces || [];
|
||||
|
||||
if (surfaces.length === 0) {
|
||||
listEl.innerHTML = '<div style="padding:12px;font-size:12px;color:var(--text-3);">No surfaces registered</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
listEl.innerHTML = '';
|
||||
surfaces.forEach(function(s) {
|
||||
var row = document.createElement('div');
|
||||
row.className = 'admin-surface-row';
|
||||
row.dataset.surfaceId = s.id;
|
||||
|
||||
var isProtected = s.id === 'chat' || s.id === 'admin';
|
||||
var sourceLabel = s.source === 'core' ? 'Core' : 'Extension';
|
||||
var route = s.manifest && s.manifest.route ? s.manifest.route : '';
|
||||
|
||||
row.innerHTML =
|
||||
'<div class="admin-surface-info">' +
|
||||
'<div class="admin-surface-title">' +
|
||||
'<span class="admin-surface-name">' + _surfEsc(s.title) + '</span>' +
|
||||
'<span class="admin-surface-badge admin-surface-badge--' + s.source + '">' + sourceLabel + '</span>' +
|
||||
(isProtected ? '<span class="admin-surface-badge admin-surface-badge--required">Required</span>' : '') +
|
||||
'</div>' +
|
||||
'<div class="admin-surface-meta">' +
|
||||
'<span class="admin-surface-id">' + _surfEsc(s.id) + '</span>' +
|
||||
(route ? '<span class="admin-surface-route">' + _surfEsc(route) + '</span>' : '') +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="admin-surface-actions">' +
|
||||
'<label class="admin-surface-toggle' + (isProtected ? ' admin-surface-toggle--locked' : '') + '">' +
|
||||
'<input type="checkbox"' + (s.enabled ? ' checked' : '') + (isProtected ? ' disabled' : '') +
|
||||
' data-surface-id="' + _surfEsc(s.id) + '">' +
|
||||
'<span class="admin-surface-toggle-label">' + (s.enabled ? 'Enabled' : 'Disabled') + '</span>' +
|
||||
'</label>' +
|
||||
(s.source === 'extension' ? '<button class="btn-small btn-danger admin-surface-uninstall" data-surface-id="' + _surfEsc(s.id) + '">Uninstall</button>' : '') +
|
||||
'</div>';
|
||||
|
||||
// Toggle handler
|
||||
var checkbox = row.querySelector('input[type="checkbox"]');
|
||||
if (checkbox && !isProtected) {
|
||||
checkbox.addEventListener('change', (function(surface) {
|
||||
return async function() {
|
||||
var id = this.dataset.surfaceId;
|
||||
var action = this.checked ? 'enable' : 'disable';
|
||||
var label = row.querySelector('.admin-surface-toggle-label');
|
||||
var cb = this;
|
||||
|
||||
try {
|
||||
await API._put('/api/v1/admin/surfaces/' + id + '/' + action);
|
||||
if (label) label.textContent = cb.checked ? 'Enabled' : 'Disabled';
|
||||
if (typeof UI !== 'undefined') {
|
||||
UI.toast(surface.title + ' ' + (cb.checked ? 'enabled' : 'disabled') + ' — takes effect on next page load', 'success');
|
||||
}
|
||||
} catch (e) {
|
||||
cb.checked = !cb.checked;
|
||||
if (label) label.textContent = cb.checked ? 'Enabled' : 'Disabled';
|
||||
if (typeof UI !== 'undefined') UI.toast('Failed: ' + e.message, 'error');
|
||||
}
|
||||
};
|
||||
})(s));
|
||||
}
|
||||
|
||||
// Uninstall handler
|
||||
var uninstallBtn = row.querySelector('.admin-surface-uninstall');
|
||||
if (uninstallBtn) {
|
||||
uninstallBtn.addEventListener('click', (function(surface) {
|
||||
return async function() {
|
||||
var ok = typeof showConfirm === 'function'
|
||||
? await showConfirm('Uninstall ' + surface.title + '? This removes all files.')
|
||||
: window.confirm('Uninstall ' + surface.title + '?');
|
||||
if (!ok) return;
|
||||
|
||||
try {
|
||||
await API._del('/api/v1/admin/surfaces/' + surface.id);
|
||||
row.remove();
|
||||
if (typeof UI !== 'undefined') UI.toast(surface.title + ' uninstalled', 'success');
|
||||
} catch (e) {
|
||||
if (typeof UI !== 'undefined') UI.toast('Failed: ' + e.message, 'error');
|
||||
}
|
||||
};
|
||||
})(s));
|
||||
}
|
||||
|
||||
listEl.appendChild(row);
|
||||
});
|
||||
} catch (e) {
|
||||
listEl.innerHTML = '<div style="padding:12px;font-size:12px;color:var(--danger);">Failed to load: ' + _surfEsc(e.message) + '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function _surfEsc(s) {
|
||||
var d = document.createElement('div');
|
||||
d.textContent = s || '';
|
||||
return d.innerHTML;
|
||||
}
|
||||
Reference in New Issue
Block a user