PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-07 11:39:18 +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

19
public/admin/system-fragment.php
View File

@@ -77,7 +77,8 @@ if ($tab === 'nginx_config') {
<div class="log-empty">Le fichier de configuration est vide.</div>
<?php else: ?>
<div class="log-output" id="log-output" role="region" aria-label="Configuration nginx">
<button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier la configuration">Copier</button>
<button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier la configuration"
onclick="copyLogContent(this);return false">Copier</button>
<?php foreach ($lines as $i => $line): ?>
<span class="log-line <?= SystemController::nginxLineClass($line) ?>"
data-n="<?= $i + 1 ?>"><?= htmlspecialchars($line, ENT_QUOTES | ENT_SUBSTITUTE) ?></span>
@@ -93,12 +94,19 @@ if ($tab === 'nginx_config') {
$logMeta = $data['meta'];
?>
<div class="log-toolbar">
<label for="lines-select">Afficher</label>
<select id="lines-select" aria-label="Nombre de lignes">
<form id="lines-form" hx-get="/admin/system-fragment.php"
hx-target="#sys-tab-panel"
hx-swap="innerHTML"
hx-indicator="#sys-tab-panel"
hx-trigger="change"
hx-vals='{"tab":"<?= htmlspecialchars($tab) ?>"}'>
<label for="lines-select">Afficher</label>
<select id="lines-select" name="n" aria-label="Nombre de lignes">
<?php foreach (SystemController::ALLOWED_LINES as $opt): ?>
<option value="<?= $opt ?>" <?= $opt === $n ? 'selected' : '' ?>><?= $opt ?> dernières lignes</option>
<?php endforeach; ?>
</select>
</select>
</form>
<?php if ($logLines !== null && count($logLines) > 0): ?>
<span class="log-count-badge"><?= count($logLines) ?> ligne(s)</span>
<?php endif; ?>
@@ -127,7 +135,8 @@ if ($tab === 'nginx_config') {
<div class="log-empty">Le fichier journal est vide.</div>
<?php else: ?>
<div class="log-output" id="log-output" role="log" aria-live="off" aria-label="Contenu du journal">
<button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier le contenu">Copier</button>
<button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier le contenu"
onclick="copyLogContent(this);return false">Copier</button>
<?php foreach ($logLines as $i => $line): ?>
<span class="log-line <?= SystemController::logLineClass($line) ?>"
data-n="<?= count($logLines) - $i ?>"><?= htmlspecialchars($line, ENT_QUOTES | ENT_SUBSTITUTE) ?></span>

98
public/admin/system.php
View File

@@ -70,8 +70,12 @@ if ($activeTab === 'nginx_config') {
$isAdmin = true; $bodyClass = 'admin-body';
$extraCss = ['/assets/css/system.css'];
$extraJs = ['/assets/js/system.js'];
// HTMX loaded once in footer; status collapse + copy via inline JS
require_once APP_ROOT . '/templates/head.php';
// Restore collapsed state from cookie
$collapsed = $_COOKIE['sys_collapsed'] ?? null;
$statusInitiallyCollapsed = $collapsed === '1';
?>
<?php include APP_ROOT . '/templates/header.php'; ?>
@@ -103,11 +107,14 @@ require_once APP_ROOT . '/templates/head.php';
<?php endif; ?>
</h2>
<button id="sys-status-toggle" class="sys-status-toggle"
aria-expanded="true" aria-controls="sys-status-body"
type="button">▲ Réduire</button>
aria-expanded="<?= $statusInitiallyCollapsed ? 'false' : 'true' ?>" aria-controls="sys-status-body"
type="button"
onclick="var b=document.getElementById('sys-status-body');var c=b.hidden;b.hidden=!c;this.setAttribute('aria-expanded',c);this.textContent=c?'▲ Réduire':'▼ Développer';document.cookie='sys_collapsed='+(!c)+';path=/;max-age=31536000';return false">
<?= $statusInitiallyCollapsed ? '▼ Développer' : '▲ Réduire' ?>
</button>
</div>
<div id="sys-status-body">
<div id="sys-status-body"<?= $statusInitiallyCollapsed ? ' hidden' : '' ?>>
<div class="srv-grid">
<?php foreach ($checks as $check): ?>
<?php $st = $check['status'] ?? 'unknown'; ?>
@@ -154,6 +161,11 @@ require_once APP_ROOT . '/templates/head.php';
<?php foreach (SystemController::LOG_FILES as $key => $def): ?>
<a href="?tab=<?= htmlspecialchars($key) ?>&amp;n=<?= $selectedN ?>"
class="sys-tab <?= $activeTab === $key ? 'active' : '' ?>"
hx-get="/admin/system-fragment.php?tab=<?= htmlspecialchars($key) ?>&amp;n=<?= $selectedN ?>"
hx-target="#sys-tab-panel"
hx-push-url="?tab=<?= htmlspecialchars($key) ?>&amp;n=<?= $selectedN ?>"
hx-swap="innerHTML"
hx-indicator="#sys-tab-panel"
data-tab="<?= htmlspecialchars($key) ?>"
<?= $activeTab === $key ? 'aria-current="page"' : '' ?>>
<?= htmlspecialchars($def['label']) ?>
@@ -161,14 +173,17 @@ require_once APP_ROOT . '/templates/head.php';
<?php endforeach; ?>
<a href="?tab=nginx_config"
class="sys-tab <?= $activeTab === 'nginx_config' ? 'active' : '' ?>"
hx-get="/admin/system-fragment.php?tab=nginx_config"
hx-target="#sys-tab-panel"
hx-push-url="?tab=nginx_config"
hx-swap="innerHTML"
hx-indicator="#sys-tab-panel"
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 ?>">
<!-- Tab panel — content swapped by HTMX -->
<div id="sys-tab-panel">
<?php if ($activeTab === 'nginx_config'): ?>
<!-- ════════════════════════════════════════════════════════════════════
@@ -205,7 +220,8 @@ require_once APP_ROOT . '/templates/head.php';
<?php else: ?>
<div class="log-output" id="log-output" role="region" aria-label="Configuration nginx">
<button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier la configuration">
<button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier la configuration"
onclick="copyLogContent(this);return false">
Copier
</button>
<?php foreach ($nginxConfigLines as $i => $line): ?>
@@ -223,13 +239,21 @@ require_once APP_ROOT . '/templates/head.php';
<!-- Lines selector (submits via JS on change; no button needed) -->
<div class="log-toolbar">
<label for="lines-select">Afficher</label>
<select id="lines-select" aria-label="Nombre de lignes">
<form id="lines-form" hx-get="/admin/system-fragment.php"
hx-target="#sys-tab-panel"
hx-swap="innerHTML"
hx-indicator="#sys-tab-panel"
hx-trigger="change"
hx-vals='{"tab":"<?= htmlspecialchars($activeTab) ?>"}'>
<label for="lines-select">Afficher</label>
<select id="lines-select" name="n" aria-label="Nombre de lignes">
<?php foreach (SystemController::ALLOWED_LINES as $n): ?>
<option value="<?= $n ?>" <?= $n === $selectedN ? 'selected' : '' ?>>
<?= $n ?> dernières lignes
</option>
<?php endforeach; ?>
</select>
</form>
<?php if ($logLines !== null && count($logLines) > 0): ?>
<span class="log-count-badge"><?= count($logLines) ?> ligne(s)</span>
<?php endif; ?>
@@ -262,7 +286,8 @@ require_once APP_ROOT . '/templates/head.php';
<?php else: ?>
<div class="log-output" id="log-output" role="log" aria-live="off" aria-label="Contenu du journal">
<button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier le contenu">
<button class="log-copy-btn" id="log-copy-btn" type="button" title="Copier le contenu"
onclick="copyLogContent(this);return false">
Copier
</button>
<?php foreach ($logLines as $i => $line): ?>
@@ -278,5 +303,56 @@ require_once APP_ROOT . '/templates/head.php';
</main>
<script>
function copyLogContent(btn) {
var logOut = document.querySelector('#log-output');
if (!logOut) return;
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(){
btn.textContent = '\u2713 Copi\u00e9';
btn.classList.add('copied');
setTimeout(function(){ btn.textContent = 'Copier'; btn.classList.remove('copied'); }, 2000);
});
} else {
fallbackCopy(text, btn);
}
}
function fallbackCopy(text, btn) {
var ta = document.createElement('textarea');
ta.value = text;
ta.style.cssText = 'position:fixed;opacity:0';
document.body.appendChild(ta); ta.select();
try { document.execCommand('copy'); btn.textContent = '\u2713 Copi\u00e9'; btn.classList.add('copied');
setTimeout(function(){ btn.textContent = 'Copier'; btn.classList.remove('copied'); }, 2000);
} catch(e) {}
document.body.removeChild(ta);
}
// Update active tab class after each HTMX swap on #sys-tab-panel
document.body.addEventListener('htmx:afterSwap', function(evt) {
if (evt.detail.target && evt.detail.target.id === 'sys-tab-panel') {
var rc = evt.detail.requestConfig;
var tab = null;
// Tab clicks carry ?tab=… in the path
var qIdx = rc.path.indexOf('?');
if (qIdx !== -1) {
tab = new URLSearchParams(rc.path.substring(qIdx + 1)).get('tab');
}
// Line-count form sends tab via hx-vals in parameters
if (!tab && rc.parameters && rc.parameters.tab) {
tab = rc.parameters.tab;
}
if (tab) {
document.querySelectorAll('.sys-tabs .sys-tab').forEach(function(a) {
var isActive = a.getAttribute('data-tab') === tab;
a.classList.toggle('active', isActive);
if (isActive) a.setAttribute('aria-current', 'page');
else a.removeAttribute('aria-current');
});
}
}
});
</script>
<?php require_once APP_ROOT . '/templates/admin/footer.php'; ?>