53 lines
2.3 KiB
PHP
53 lines
2.3 KiB
PHP
<?php
|
||
/**
|
||
* Gemeinsame UI-Bausteine für die Verwaltungsseiten im osTicket-Stil
|
||
* (Liste mit Spalten, danach ein Formular mit Reitern).
|
||
*/
|
||
|
||
/** CSS + JS für Reiter. $startTab = data-tab des zuerst gezeigten Reiters. */
|
||
function ui_tab_assets(string $startTab): void
|
||
{
|
||
?>
|
||
<style>
|
||
.tab-btn{background:none;border:1px solid transparent;border-bottom:none;padding:8px 16px;cursor:pointer;border-radius:6px 6px 0 0;color:var(--muted)}
|
||
.tab-btn.active{background:var(--card-bg,#fff);border-color:var(--border);color:inherit;font-weight:600;position:relative;top:1px}
|
||
</style>
|
||
<script>
|
||
(function () {
|
||
var btns = document.querySelectorAll('.tab-btn'), panes = document.querySelectorAll('.tab-pane');
|
||
function show(t) {
|
||
btns.forEach(function (b) { b.classList.toggle('active', b.dataset.tab === t); });
|
||
panes.forEach(function (p) { p.style.display = p.dataset.pane === t ? '' : 'none'; });
|
||
}
|
||
btns.forEach(function (b) { b.addEventListener('click', function () { show(b.dataset.tab); }); });
|
||
show(<?= json_encode($startTab) ?>);
|
||
})();
|
||
</script>
|
||
<?php
|
||
}
|
||
|
||
/** Reiterleiste: $tabs = ['key' => 'Beschriftung', …] */
|
||
function ui_tab_bar(array $tabs): void
|
||
{
|
||
echo '<div style="display:flex;gap:4px;padding:10px 12px 0;border-bottom:1px solid var(--border)">';
|
||
foreach ($tabs as $key => $label) {
|
||
echo '<button type="button" class="tab-btn" data-tab="' . e($key) . '">' . e($label) . '</button>';
|
||
}
|
||
echo '</div>';
|
||
}
|
||
|
||
/** Status-Auswahl (Aktiv/Deaktiviert) als Radio-Buttons; Feldname "status" mit den Werten active|inactive. */
|
||
function ui_status_radios(bool $active, string $inactiveLabel = 'Deaktiviert'): void
|
||
{
|
||
echo '<label>Status *</label><div style="display:flex;gap:18px;margin:4px 0 10px">';
|
||
echo '<label style="display:flex;align-items:center;gap:6px;margin:0"><input type="radio" name="status" value="active" style="width:auto"' . ($active ? ' checked' : '') . '> <strong>Aktiv</strong></label>';
|
||
echo '<label style="display:flex;align-items:center;gap:6px;margin:0"><input type="radio" name="status" value="inactive" style="width:auto"' . ($active ? '' : ' checked') . '> ' . e($inactiveLabel) . '</label>';
|
||
echo '</div>';
|
||
}
|
||
|
||
/** Datum für Listenspalten ("–" bei leer). */
|
||
function ui_date(?string $dt): string
|
||
{
|
||
return $dt ? date('d.m.Y H:i', strtotime($dt)) : '–';
|
||
}
|