const { useState, useEffect, useCallback, useRef } = React;
// ── Icons ───────────────────────────────────────────────────────────────────
function Icon({ name, size = 16 }) {
const icons = {
sun: ,
moon: ,
home: ,
shop: ,
box: ,
alert: ,
cpu: ,
log: ,
settings: ,
refresh: ,
close: ,
logout: ,
};
return icons[name] ?? null;
}
// ── API ──────────────────────────────────────────────────────────────────────
const BASE = '';
async function apiFetch(path, token, opts = {}) {
const res = await fetch(BASE + path, {
...opts,
headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json', ...(opts.headers ?? {}) },
});
if (res.status === 401) throw new Error('unauthorized');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
}
async function apiLogin(username, password) {
const res = await fetch(BASE + '/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
});
if (!res.ok) throw new Error('Login fehlgeschlagen');
return res.json();
}
// ── Helpers ──────────────────────────────────────────────────────────────────
function fmtTime(d) {
if (!d) return '—';
const dt = new Date(d);
return dt.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
}
function fmtDate(d) {
if (!d) return '—';
const dt = new Date(d);
return dt.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit' }) + ' ' + fmtTime(d);
}
function timeSince(d) {
if (!d) return '—';
const s = Math.floor((Date.now() - new Date(d)) / 1000);
if (s < 60) return `vor ${s}s`;
if (s < 3600) return `vor ${Math.floor(s/60)}m`;
return `vor ${Math.floor(s/3600)}h`;
}
function LevelPill({ level }) {
const map = { info: 'pill-blue', warning: 'pill-yellow', error: 'pill-red', debug: 'pill-gray' };
return {level};
}
function WorkerTypePill({ type }) {
return {type};
}
// ── Login ────────────────────────────────────────────────────────────────────
function Login({ onLogin }) {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
async function submit(e) {
e.preventDefault();
setError(''); setLoading(true);
try {
const data = await apiLogin(username, password);
onLogin(data.access_token ?? data.token ?? data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
return (
);
}
// ── Sidebar ──────────────────────────────────────────────────────────────────
const NAV = [
{ id: 'overview', label: 'Übersicht', icon: 'home' },
{ id: 'shops', label: 'Shops', icon: 'shop' },
{ id: 'products', label: 'Produkte', icon: 'box' },
{ id: 'workers', label: 'Worker', icon: 'cpu' },
{ id: 'errors', label: 'Fehler', icon: 'alert' },
{ id: 'logs', label: 'Logs', icon: 'log' },
];
function Sidebar({ view, setView, onLogout }) {
return (
);
}
// ── Overview ─────────────────────────────────────────────────────────────────
function Overview({ workers, logs, shops, queues }) {
const errors = logs.filter(l => l.level === 'error');
const warnings = logs.filter(l => l.level === 'warning');
const activeWorkers = workers.filter(w => (Date.now() - new Date(w.lastActive)) < 5 * 60 * 1000);
return (
Übersicht
Status aller Connector-Komponenten
Shops
{shops.length}
{shops.filter(s => s.active).length} aktiv
Aktive Jobs
s+q.active,0) > 0 ? 'var(--green)' : 'inherit' }}>
{queues.reduce((s, q) => s + q.active, 0)}
{queues.reduce((s, q) => s + q.waiting, 0)} wartend
Fehler
0 ? 'var(--red)' : 'inherit' }}>{errors.length}
{warnings.length} Warnungen
Log-Einträge
{logs.length}
letzte 500
Worker
{workers.length === 0
?
Keine Worker aktiv
:
| Typ | Zuletzt aktiv | Status |
|---|
{workers.slice(0, 8).map(w => {
const alive = (Date.now() - new Date(w.lastActive)) < 5 * 60 * 1000;
return (
|
{timeSince(w.lastActive)} |
|
);
})}
}
Letzte Fehler
{errors.length === 0
?
Keine Fehler
:
{errors.slice(0, 6).map(l => (
{fmtDate(l.createdAt)}
{l.message.slice(0, 120)}{l.message.length > 120 ? '…' : ''}
))}
}
);
}
// ── Shops ────────────────────────────────────────────────────────────────────
function Shops({ shops }) {
return (
Shops
Verbundene Shopware-Instanzen
| ID | API URL | Status |
|---|
{shops.length === 0
? Keine Shops konfiguriert |
: shops.map(s => (
| {s.id} |
{s.apiUrl} |
{s.active
? Aktiv
: Inaktiv
}
|
))
}
);
}
// ── Products ─────────────────────────────────────────────────────────────────
function Products({ token, onUnauthorized }) {
const [data, setData] = useState({ items: [], hasMore: false });
const [search, setSearch] = useState('');
const [debouncedSearch, setDebouncedSearch] = useState('');
const [offset, setOffset] = useState(0);
const [syncing, setSyncing] = useState({});
const [toast, setToast] = useState(null);
const [error, setError] = useState(null);
const limit = 100;
// Debounce search — reset to page 1 on new search
useEffect(() => {
const t = setTimeout(() => {
setDebouncedSearch(search);
setOffset(0);
}, 300);
return () => clearTimeout(t);
}, [search]);
const load = useCallback(async () => {
setError(null);
try {
const params = new URLSearchParams({ limit: String(limit), offset: String(offset) });
if (debouncedSearch) params.set('search', debouncedSearch);
const res = await apiFetch(`/products?${params}`, token);
setData(res);
} catch (e) {
if (e.message === 'unauthorized') { onUnauthorized(); return; }
setError(e.message);
}
}, [token, offset, debouncedSearch]);
useEffect(() => { load(); }, [load]);
async function resync(product) {
setSyncing(s => ({ ...s, [product.id]: true }));
try {
const res = await apiFetch(`/products/${product.id}/resync`, token, { method: 'POST' });
setToast(`${product.mainProductNumber}: ${res.jobsQueued} Job(s) in Queue`);
setTimeout(() => setToast(null), 3000);
} catch {
setToast(`Fehler bei ${product.mainProductNumber}`);
setTimeout(() => setToast(null), 3000);
} finally {
setSyncing(s => ({ ...s, [product.id]: false }));
}
}
return (
Produkte
{data.total} indexierte Produkte
{error &&
Fehler: {error}
}
setSearch(e.target.value)}
/>
{data.items.length} Einträge
| Artikelnummer |
Datei |
Geparst |
Aktualisiert |
|
{data.items.length === 0
? Keine Produkte gefunden |
: data.items.map(p => (
| {p.mainProductNumber} |
{p.fileKey} |
{fmtDate(p.parsedAt)} |
{fmtDate(p.updatedAt)} |
{p.mainProductNumber.length < 8 && (
)}
|
))
}
{(offset > 0 || data.hasMore) && (
Seite {Math.floor(offset / limit) + 1}
)}
{toast && (
)}
);
}
// ── Workers ──────────────────────────────────────────────────────────────────
function Workers({ workers, logs, queues, onSelectType }) {
const byType = workers.reduce((acc, w) => {
if (!acc[w.type] || new Date(w.lastActive) > new Date(acc[w.type].lastActive)) {
acc[w.type] = w;
}
return acc;
}, {});
// Merge all known types from workers + queues
const allTypes = new Set([
...Object.keys(byType),
...queues.map(q => q.workerType),
]);
const totalActive = queues.reduce((s, q) => s + q.active, 0);
const totalWaiting = queues.reduce((s, q) => s + q.waiting, 0);
const totalFailed = queues.reduce((s, q) => s + q.failed, 0);
return (
Worker & Queues
Registrierte Worker und Queue-Status — Klick für Logs
Aktive Jobs
0 ? 'var(--green)' : 'inherit' }}>{totalActive}
Wartende Jobs
{totalWaiting}
Fehlgeschlagen
0 ? 'var(--red)' : 'inherit' }}>{totalFailed}
| Typ | Worker | Zuletzt aktiv | Aktiv | Wartend | Verzögert | Fehler | Logs |
|---|
{allTypes.size === 0
? Keine Worker oder Queues gefunden |
: [...allTypes].map(type => {
const worker = byType[type];
const queue = queues.find(q => q.workerType === type);
const alive = worker && (Date.now() - new Date(worker.lastActive)) < 10 * 60 * 1000;
const typeLogCount = logs.filter(l => l.workerType === type).length;
return (
onSelectType(type)}>
|
{worker
?
:
}
|
{worker ? timeSince(worker.lastActive) : '—'} |
0 ? 'var(--green)' : 'inherit' }}>
{queue?.active ?? '—'}
|
{queue?.waiting ?? '—'} |
0 ? 'var(--yellow)' : 'inherit' }}>
{queue?.delayed ?? '—'}
|
0 ? 'var(--red)' : 'inherit' }}>
{queue?.failed ?? '—'}
|
{typeLogCount} |
);
})
}
);
}
// ── Worker Type Drawer ────────────────────────────────────────────────────────
function WorkerDrawer({ workerType, logs, onClose }) {
const workerLogs = logs.filter(l => l.workerType === workerType).sort((a, b) => b.id - a.id);
const [levelFilter, setLevelFilter] = useState('all');
const filtered = workerLogs.filter(l => levelFilter === 'all' || l.level === levelFilter);
return (
e.target === e.currentTarget && onClose()}>
{workerType}
{workerLogs.length} Log-Einträge
{['all', 'info', 'warning', 'error', 'debug'].map(lvl => (
))}
{filtered.length === 0
?
Keine Logs
: filtered.map(l => (
{fmtDate(l.createdAt)}
{l.message}
))
}
Fehler & Warnungen
{errors.length} Einträge
{errors.length === 0
?
Keine Fehler oder Warnungen
: errors.map(l => (
{fmtDate(l.createdAt)}
{l.workerId?.slice(0, 12)}…
{l.message}
))
}
);
}
// ── Logs ─────────────────────────────────────────────────────────────────────
function Logs({ logs }) {
const [search, setSearch] = useState('');
const [levelFilter, setLevelFilter] = useState('all');
const filtered = logs
.filter(l => levelFilter === 'all' || l.level === levelFilter)
.filter(l => !search || l.message.toLowerCase().includes(search.toLowerCase()))
.sort((a, b) => b.id - a.id);
return (
Logs
{filtered.length} Einträge
setSearch(e.target.value)}
/>
{['all', 'info', 'warning', 'error', 'debug'].map(lvl => (
))}
{filtered.length === 0
?
Keine Logs
: filtered.map(l => (
{fmtDate(l.createdAt)}
{l.workerId?.slice(0, 12)}…
{l.message}
))
}
);
}
// ── App ───────────────────────────────────────────────────────────────────────
function App() {
const [theme, setTheme] = useState(() => localStorage.getItem('wc_theme') ?? 'dark');
const [token, setToken] = useState(() => localStorage.getItem('wc_token') ?? null);
useEffect(() => {
document.documentElement.classList.toggle('light', theme === 'light');
localStorage.setItem('wc_theme', theme);
}, [theme]);
function toggleTheme() {
setTheme(t => t === 'dark' ? 'light' : 'dark');
}
const [view, setView] = useState('overview');
const [workers, setWorkers] = useState([]);
const [logs, setLogs] = useState([]);
const [shops, setShops] = useState([]);
const [queues, setQueues] = useState([]);
const [selectedWorkerType, setSelectedWorkerType] = useState(null);
const [loading, setLoading] = useState(false);
function handleLogin(t) {
localStorage.setItem('wc_token', t);
setToken(t);
}
function handleLogout() {
localStorage.removeItem('wc_token');
setToken(null);
}
const load = useCallback(async () => {
if (!token) return;
setLoading(true);
try {
const rethrowUnauthorized = (e) => { if (e.message === 'unauthorized') throw e; return []; };
const [w, l, s, q] = await Promise.all([
apiFetch('/workers', token).catch(rethrowUnauthorized),
apiFetch('/logs', token).catch(rethrowUnauthorized),
apiFetch('/shops', token).catch(rethrowUnauthorized),
apiFetch('/queues', token).catch(rethrowUnauthorized),
]);
setWorkers(Array.isArray(w) ? w : []);
setLogs(Array.isArray(l) ? l : []);
setShops(Array.isArray(s) ? s : []);
setQueues(Array.isArray(q) ? q : []);
} catch (err) {
if (err.message === 'unauthorized') handleLogout();
} finally {
setLoading(false);
}
}, [token]);
useEffect(() => { load(); }, [load]);
// auto-refresh every 30s
useEffect(() => {
const t = setInterval(load, 30_000);
return () => clearInterval(t);
}, [load]);
if (!token) return ;
function renderView() {
switch (view) {
case 'overview': return ;
case 'shops': return ;
case 'products': return ;
case 'workers': return ;
case 'errors': return ;
case 'logs': return ;
default: return null;
}
}
const viewLabel = NAV.find(n => n.id === view)?.label ?? '';
return (
{viewLabel}
{renderView()}
{selectedWorkerType && (
setSelectedWorkerType(null)}
/>
)}
);
}
ReactDOM.createRoot(document.getElementById('root')).render();