mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 11:09:18 +02:00
admin/system: fetch()-based tab switching, no full-page reload
Add system-fragment.php — a thin authenticated endpoint that returns only the tab-panel HTML (toolbar + meta + log/nginx-config output) for a given ?tab=&n= combination. No page shell, no status section, no DB queries. system.php changes: - Tab <a> elements gain data-tab= attributes used by JS to identify the target without parsing hrefs. - Tab panel content wrapped in <div id=sys-tab-panel data-tab= data-n=> which JS uses as both the swap target and its own state store. - JS rewritten: tab clicks and lines-select changes call loadPanel() which fetch()es system-fragment.php, swaps innerHTML, updates active tab ARIA attributes, and pushes state via history.pushState. - Browser back/forward handled via popstate listener. - bindPanelControls() re-wires the lines-select and copy-to-clipboard button after every innerHTML swap (event delegation not feasible here because log-output is replaced wholesale). - fetch() failure falls back to window.location.href (full page load). - Tabs without JS still work: <a href> links go to system.php?tab=… as before. system-fragment.php: - Requires AdminAuth::isAuthenticated(); returns 403 on failure. - Validates tab and n params against the same whitelist as system.php. - All helper functions namespaced with frag_ prefix to avoid redeclaration if PHP ever includes both files in the same process. - Renders identical HTML to the corresponding section in system.php. system.css: - #sys-tab-panel gets min-height:8rem and position:relative to prevent layout jump during fetch. - .sys-panel-loading: opacity 0.4 + pointer-events:none + subtle diagonal-stripe ::after overlay with shimmer animation.
This commit is contained in:
Pontoporeia
@@ -362,8 +362,9 @@ $isAdmin = true; $bodyClass = 'admin-body';
|
||||
$extraCss = ['/assets/css/system.css'];
|
||||
$extraJsInline = <<<'JS'
|
||||
(function () {
|
||||
// ── Status section toggle ──────────────────────────────────────────
|
||||
var toggleBtn = document.getElementById('sys-status-toggle');
|
||||
|
||||
// ── Status section collapse toggle ────────────────────────────────
|
||||
var toggleBtn = document.getElementById('sys-status-toggle');
|
||||
var statusBody = document.getElementById('sys-status-body');
|
||||
if (toggleBtn && statusBody) {
|
||||
toggleBtn.addEventListener('click', function () {
|
||||
@@ -373,7 +374,6 @@ $extraJsInline = <<<'JS'
|
||||
toggleBtn.textContent = collapsed ? '▲ Réduire' : '▼ Développer';
|
||||
try { localStorage.setItem('sys_status_collapsed', collapsed ? '0' : '1'); } catch(e) {}
|
||||
});
|
||||
// Restore collapsed state
|
||||
try {
|
||||
if (localStorage.getItem('sys_status_collapsed') === '1') {
|
||||
statusBody.hidden = true;
|
||||
@@ -383,44 +383,119 @@ $extraJsInline = <<<'JS'
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
// ── Instant tab switch on lines-select change ──────────────────────
|
||||
var sel = document.getElementById('lines-select');
|
||||
if (sel) {
|
||||
sel.addEventListener('change', function () {
|
||||
var url = new URL(window.location.href);
|
||||
url.searchParams.set('n', this.value);
|
||||
window.location.href = url.toString();
|
||||
});
|
||||
// ── fetch()-based tab panel loading ───────────────────────────────
|
||||
var panel = document.getElementById('sys-tab-panel');
|
||||
var tabNav = document.querySelector('.sys-tabs');
|
||||
if (!panel || !tabNav || !window.fetch) return;
|
||||
|
||||
var currentTab = panel.dataset.tab;
|
||||
var currentN = panel.dataset.n;
|
||||
|
||||
function loadPanel(tab, n, pushState) {
|
||||
var url = new URL(window.location.href);
|
||||
var fragUrl = new URL('/admin/system-fragment.php', window.location.origin);
|
||||
fragUrl.searchParams.set('tab', tab);
|
||||
fragUrl.searchParams.set('n', n);
|
||||
|
||||
// Mark the panel as loading
|
||||
panel.classList.add('sys-panel-loading');
|
||||
|
||||
fetch(fragUrl.toString(), { credentials: 'same-origin' })
|
||||
.then(function (r) {
|
||||
if (!r.ok) throw new Error('HTTP ' + r.status);
|
||||
return r.text();
|
||||
})
|
||||
.then(function (html) {
|
||||
panel.innerHTML = html;
|
||||
panel.dataset.tab = tab;
|
||||
panel.dataset.n = n;
|
||||
currentTab = tab;
|
||||
currentN = n;
|
||||
panel.classList.remove('sys-panel-loading');
|
||||
|
||||
// Update active tab indicators
|
||||
tabNav.querySelectorAll('.sys-tab').forEach(function (a) {
|
||||
var isActive = a.dataset.tab === tab;
|
||||
a.classList.toggle('active', isActive);
|
||||
if (isActive) {
|
||||
a.setAttribute('aria-current', 'page');
|
||||
} else {
|
||||
a.removeAttribute('aria-current');
|
||||
}
|
||||
});
|
||||
|
||||
// Re-bind inner controls (lines-select, copy btn)
|
||||
bindPanelControls();
|
||||
|
||||
// Update browser URL without reloading
|
||||
if (pushState) {
|
||||
url.searchParams.set('tab', tab);
|
||||
url.searchParams.set('n', n);
|
||||
history.pushState({ tab: tab, n: n }, '', url.toString());
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
// Graceful degradation: fall back to full page load
|
||||
panel.classList.remove('sys-panel-loading');
|
||||
url.searchParams.set('tab', tab);
|
||||
url.searchParams.set('n', n);
|
||||
window.location.href = url.toString();
|
||||
});
|
||||
}
|
||||
|
||||
// ── Copy-to-clipboard ─────────────────────────────────────────────
|
||||
var copyBtn = document.getElementById('log-copy-btn');
|
||||
var logOut = document.getElementById('log-output');
|
||||
if (copyBtn && logOut) {
|
||||
copyBtn.addEventListener('click', function () {
|
||||
// Collect text from all .log-line spans (strip the gutter number
|
||||
// rendered via CSS ::before — it's not in the DOM text content).
|
||||
var lines = Array.from(logOut.querySelectorAll('.log-line'))
|
||||
.map(function (el) { return el.textContent; })
|
||||
.join('\n');
|
||||
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(lines).then(function () {
|
||||
copyBtn.textContent = '✓ Copié';
|
||||
copyBtn.classList.add('copied');
|
||||
setTimeout(function () {
|
||||
copyBtn.textContent = 'Copier';
|
||||
copyBtn.classList.remove('copied');
|
||||
}, 2000);
|
||||
}).catch(function () {
|
||||
fallbackCopy(lines);
|
||||
});
|
||||
} else {
|
||||
fallbackCopy(lines);
|
||||
// Wire tab links
|
||||
tabNav.querySelectorAll('.sys-tab').forEach(function (a) {
|
||||
a.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
var tab = a.dataset.tab;
|
||||
if (tab && tab !== currentTab) {
|
||||
loadPanel(tab, currentN, true);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Handle browser back/forward
|
||||
window.addEventListener('popstate', function (e) {
|
||||
if (e.state && e.state.tab) {
|
||||
loadPanel(e.state.tab, e.state.n || 100, false);
|
||||
}
|
||||
});
|
||||
|
||||
function bindPanelControls() {
|
||||
// Lines-select
|
||||
var sel = panel.querySelector('#lines-select');
|
||||
if (sel) {
|
||||
sel.addEventListener('change', function () {
|
||||
loadPanel(currentTab, parseInt(this.value, 10), true);
|
||||
});
|
||||
}
|
||||
// Copy button
|
||||
var copyBtn = panel.querySelector('#log-copy-btn');
|
||||
var logOut = panel.querySelector('#log-output');
|
||||
if (copyBtn && logOut) {
|
||||
copyBtn.addEventListener('click', function () {
|
||||
var text = Array.from(logOut.querySelectorAll('.log-line'))
|
||||
.map(function (el) { return el.textContent; })
|
||||
.join('\n');
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(text).then(function () {
|
||||
copyBtn.textContent = '✓ Copié';
|
||||
copyBtn.classList.add('copied');
|
||||
setTimeout(function () {
|
||||
copyBtn.textContent = 'Copier';
|
||||
copyBtn.classList.remove('copied');
|
||||
}, 2000);
|
||||
}).catch(function () { fallbackCopy(text); });
|
||||
} else {
|
||||
fallbackCopy(text);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Bind controls already present on first load
|
||||
bindPanelControls();
|
||||
|
||||
function fallbackCopy(text) {
|
||||
var ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
@@ -430,6 +505,7 @@ $extraJsInline = <<<'JS'
|
||||
try { document.execCommand('copy'); } catch (e) {}
|
||||
document.body.removeChild(ta);
|
||||
}
|
||||
|
||||
})();
|
||||
JS;
|
||||
require_once APP_ROOT . '/templates/head.php';
|
||||
@@ -516,15 +592,22 @@ require_once APP_ROOT . '/templates/head.php';
|
||||
<?php foreach (LOG_FILES as $key => $def): ?>
|
||||
<a href="?tab=<?= htmlspecialchars($key) ?>&n=<?= $selectedN ?>"
|
||||
class="sys-tab <?= $activeTab === $key ? 'active' : '' ?>"
|
||||
data-tab="<?= htmlspecialchars($key) ?>"
|
||||
<?= $activeTab === $key ? 'aria-current="page"' : '' ?>>
|
||||
<?= htmlspecialchars($def['label']) ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
<a href="?tab=nginx_config"
|
||||
class="sys-tab <?= $activeTab === 'nginx_config' ? 'active' : '' ?>"
|
||||
data-tab="nginx_config"
|
||||
<?= $activeTab === 'nginx_config' ? 'aria-current="page"' : '' ?>>nginx — config</a>
|
||||
</nav>
|
||||
|
||||
<!-- Tab panel — content swapped by fetch(); data-* attrs drive JS state -->
|
||||
<div id="sys-tab-panel"
|
||||
data-tab="<?= htmlspecialchars($activeTab) ?>"
|
||||
data-n="<?= $selectedN ?>">
|
||||
|
||||
<?php if ($activeTab === 'nginx_config'): ?>
|
||||
<!-- ════════════════════════════════════════════════════════════════════
|
||||
NGINX CONFIG PANEL
|
||||
@@ -640,6 +723,8 @@ require_once APP_ROOT . '/templates/head.php';
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
</div><!-- #sys-tab-panel -->
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user