PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-07 03:29:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: migrate admin system page to HTMX with tab-based navigation and log viewer

Browse Source
This commit is contained in:
Pontoporeia
2026-04-16 14:45:50 +02:00
parent 05002ccee4
commit b03be51b92
10 changed files with 146 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/css/system.css
View File

@@ -184,12 +184,12 @@
min-height: 8rem;
position: relative;
}
#sys-tab-panel.sys-panel-loading {
#sys-tab-panel.htmx-request {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.1s;
}
#sys-tab-panel.sys-panel-loading::after {
#sys-tab-panel.htmx-request::after {
content: '';
position: absolute;
inset: 0;

2
public/assets/js/htmx.min.js vendored
View File

File diff suppressed because one or more lines are too long

146
public/assets/js/system.js
View File

@@ -1,146 +0,0 @@
(function () {
// ── 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 () {
var collapsed = statusBody.hidden;
statusBody.hidden = !collapsed;
toggleBtn.setAttribute('aria-expanded', collapsed ? 'true' : 'false');
toggleBtn.textContent = collapsed ? '▲ Réduire' : '▼ Développer';
try { localStorage.setItem('sys_status_collapsed', collapsed ? '0' : '1'); } catch(e) {}
});
try {
if (localStorage.getItem('sys_status_collapsed') === '1') {
statusBody.hidden = true;
toggleBtn.setAttribute('aria-expanded', 'false');
toggleBtn.textContent = '▼ Développer';
}
} catch(e) {}
}
// ── 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();
});
}
// 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;
ta.style.cssText = 'position:fixed;opacity:0;top:0;left:0';
document.body.appendChild(ta);
ta.select();
try { document.execCommand('copy'); } catch (e) {}
document.body.removeChild(ta);
}
})();