This commit is contained in:
2026-01-15 01:21:59 +01:00
parent d3c68bda4d
commit e98b4b4a44
6 changed files with 352 additions and 14 deletions

View File

@@ -109,22 +109,19 @@
content:`<a href="#" data-gjs-type="button" style="${css({display:'inline-block','background-color':'#0ea5e9',color:'#fff','text-decoration':'none',padding:'10px 18px','border-radius':'6px','font-family':'Arial,sans-serif','font-size':'14px'})}">Button</a>` });
// TABLE (Registriert als 'std-table')
addOrUpdate(bm, 'std-table', { label:'Tabelle (Basis)',
content:`<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="${css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%'})}">
addOrUpdate(bm, 'std-table', { label:'Tabelle (2xN)',
content:`<table data-gjs-type="bridge-table" data-bridge-rows="3" data-bridge-cols="2" role="presentation" width="100%" cellpadding="0" cellspacing="0" style="${css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%'})}">
<tr>
<th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte A</th>
<th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte B</th>
<th style="${css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'})}">Spalte C</th>
</tr>
<tr>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 1</td>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
</tr>
<tr>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">Zeile 2</td>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
<td style="${css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'})}">...</td>
</tr>
</table>` });

View File

@@ -13,6 +13,7 @@ const state = {
const pageType = document.body?.dataset?.page || 'account';
const DEBUG_EMAIL = 'madmin@papa-kind-treff.info';
const DEBUG_ENV = (window.APP_ENV || '').toLowerCase();
const MAX_CONSOLE_LINES = 200;
let avatarBtn;
@@ -30,9 +31,12 @@ let debugButton;
let debugDialog;
let debugPhpLoaded = false;
let debugPhpLoading = false;
let debugLogsLoaded = false;
let debugActiveTab = 'php';
let phpInfoContainer;
let consoleContainer;
let logsListContainer;
let logDetailContainer;
let debugStylesInjected = false;
let consolePatched = false;
const consoleBuffer = [];
@@ -695,7 +699,8 @@ function escapeHtml(str) {
}
function refreshDebugAccess() {
const allowed = (window.__currentUser?.email || '').toLowerCase() === DEBUG_EMAIL;
const isStaging = DEBUG_ENV === 'staging';
const allowed = isStaging && (window.__currentUser?.email || '').toLowerCase() === DEBUG_EMAIL;
if (!allowed) {
debugButton?.remove();
debugButton = null;
@@ -738,6 +743,11 @@ function ensureDebugStyles() {
.debug-console-entry.log{color:#15803d}
.debug-console-entry.warn{color:#b45309}
.debug-console-entry.error{color:#b91c1c}
.debug-logs-grid{display:grid;grid-template-columns:220px 1fr;gap:12px;height:100%}
.debug-logs-list{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;padding:.5rem;overflow:auto}
.debug-logs-list button{width:100%;text-align:left;border:none;background:transparent;padding:.35rem .5rem;border-radius:.5rem;cursor:pointer}
.debug-logs-list button.active{background:#e0f2fe;color:#0c4a6e}
.debug-logs-detail{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;padding:.75rem;overflow:auto;font-family:monospace;font-size:.85rem;white-space:pre-wrap}
`;
document.head.appendChild(style);
debugStylesInjected = true;
@@ -756,6 +766,7 @@ function ensureDebugDialog() {
<div class="debug-tabs">
<button type="button" data-debug-tab="php" class="active">PHP Debug</button>
<button type="button" data-debug-tab="console">Console</button>
<button type="button" data-debug-tab="logs">Logs</button>
</div>
<div class="debug-panel" data-debug-panel="php">
<div id="debugPhpContent" class="text-sm text-slate-700">Lade Daten…</div>
@@ -763,10 +774,18 @@ function ensureDebugDialog() {
<div class="debug-panel hidden" data-debug-panel="console">
<pre id="debugConsoleContent"></pre>
</div>
<div class="debug-panel hidden" data-debug-panel="logs">
<div class="debug-logs-grid">
<div class="debug-logs-list" id="debugLogsList">Keine Logs geladen.</div>
<div class="debug-logs-detail" id="debugLogDetail">Bitte Log auswaehlen.</div>
</div>
</div>
</div>`;
document.body.appendChild(debugDialog);
phpInfoContainer = debugDialog.querySelector('#debugPhpContent');
consoleContainer = debugDialog.querySelector('#debugConsoleContent');
logsListContainer = debugDialog.querySelector('#debugLogsList');
logDetailContainer = debugDialog.querySelector('#debugLogDetail');
debugDialog.querySelector('[data-debug-close]')?.addEventListener('click', () => closeDebugDialog());
debugDialog.addEventListener('close', () => setDebugTab('php'));
debugDialog.querySelectorAll('[data-debug-tab]').forEach(btn => {
@@ -801,8 +820,10 @@ function setDebugTab(tab) {
});
if (debugActiveTab === 'php') {
loadPhpInfo();
} else {
} else if (debugActiveTab === 'console') {
renderConsolePanel();
} else if (debugActiveTab === 'logs') {
loadDebugLogs();
}
}
@@ -842,6 +863,49 @@ function renderConsolePanel() {
consoleContainer.innerHTML = lines.join('');
}
async function loadDebugLogs() {
if (debugLogsLoaded || !logsListContainer || !logDetailContainer) return;
logsListContainer.textContent = 'Lade Logs…';
logDetailContainer.textContent = 'Bitte Log auswaehlen.';
try {
const res = await apiAction('debug.logs.list', { method: 'GET' });
if (!res?.ok) throw new Error(res?.error || 'Logs konnten nicht geladen werden');
const items = Array.isArray(res.items) ? res.items : [];
if (!items.length) {
logsListContainer.textContent = 'Keine Logs vorhanden.';
return;
}
logsListContainer.innerHTML = '';
items.forEach((item, idx) => {
const btn = document.createElement('button');
btn.type = 'button';
btn.textContent = item.name || item.file || `Log ${idx + 1}`;
btn.addEventListener('click', () => {
logsListContainer.querySelectorAll('button').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
loadDebugLogFile(item.name || item.file || '');
});
logsListContainer.appendChild(btn);
if (idx === 0) btn.click();
});
debugLogsLoaded = true;
} catch (err) {
logsListContainer.textContent = err.message || 'Logs konnten nicht geladen werden';
}
}
async function loadDebugLogFile(name) {
if (!name || !logDetailContainer) return;
logDetailContainer.textContent = 'Lade Log…';
try {
const res = await apiAction('debug.logs.read', { method: 'GET', data: { name } });
if (!res?.ok) throw new Error(res?.error || 'Log konnte nicht geladen werden');
logDetailContainer.textContent = res.content || '(leer)';
} catch (err) {
logDetailContainer.textContent = err.message || 'Log konnte nicht geladen werden';
}
}
function ensureConsoleCapture() {
if (consolePatched) return;
['log', 'warn', 'error'].forEach(type => {