// ===== Gemeinsame UI-Bausteine =====
const { useState, useRef, useEffect } = React;
// Dünne Line-Icons (stroke, round, currentColor)
function Icon({ name, size = 15, style }) {
const c = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor',
strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', style };
const P = {
play: ,
sliders: ,
settings:,
lock: ,
layers: ,
truck: ,
box: ,
pin: ,
close: ,
chevron: ,
plus: ,
check: ,
arrow: ,
alert: ,
flag: ,
grid: ,
calendar:,
target: ,
clock: ,
info: ,
reset: ,
scissors:,
undo: ,
calc: ,
};
return ;
}
function L({ children, style }) {
return {children};
}
// Score-Badge: 1..9, Farbintensität nach Höhe
function ScoreBadge({ value, size = 'md', dim }) {
const t = (value - 1) / 8;
// Tint von neutral -> Akzentblau bei hohem Score
const bg = `color-mix(in oklch, var(--accent) ${20 + t * 80}%, var(--surface))`;
const bd = `color-mix(in oklch, var(--accent-line) ${30 + t * 70}%, var(--line))`;
const px = size === 'sm' ? { w: 22, h: 20, f: 12 } : size === 'lg' ? { w: 30, h: 28, f: 15 } : { w: 26, h: 23, f: 13 };
return (
{value}
);
}
const BESTAND = {
direkt: { t: 'Direktbestand', icon: 'box', c: 'var(--good-ink)', bg: 'var(--good)' },
indirekt: { t: 'Indirekt', icon: 'layers', c: 'var(--warn-ink)', bg: 'var(--warn)' },
route: { t: 'In Route', icon: 'truck', c: 'var(--accent-ink)', bg: 'var(--accent)' },
};
function StatusPill({ kind }) {
const s = BESTAND[kind] || BESTAND.route;
return (
{s.t}
);
}
function MatChip({ mat, showName }) {
const m = window.MATERIALS[mat];
return (
{m.id}
{showName && {m.name}}
);
}
// Stufenregler 0/1..9
function StepRange({ value, onChange, min = 0, max = 9 }) {
return (
{Array.from({ length: max - min + 1 }, (_, i) => i + min).map(n => {
const on = n !== 0 && n <= value;
const isZero = n === 0;
return (
);
})}
);
}
// Schieberegler (Optimierungsziel)
function Slider({ value, onChange, accent = 'var(--accent-ink)' }) {
return (
onChange(+e.target.value)}
style={{ width: '100%', height: 22, cursor: 'pointer', accentColor: accent }} />
);
}
function IconBtn({ icon, label, onClick, active, primary, disabled }) {
return (
);
}
// ===== Sortierung für Tabellen =====
function useSort(defaultKey = null, defaultDir = 1) {
const [sort, setSort] = useState({ key: defaultKey, dir: defaultDir });
const toggle = (key) => setSort(s =>
s.key === key ? (s.dir === 1 ? { key, dir: -1 } : { key: null, dir: 1 }) : { key, dir: 1 });
return [sort, toggle];
}
function sortRows(arr, sort, accessor) {
if (!sort.key) return arr;
const a = [...arr];
a.sort((x, y) => {
let vx = accessor(x, sort.key), vy = accessor(y, sort.key);
if (vx == null) vx = ''; if (vy == null) vy = '';
if (typeof vx === 'string' && typeof vy === 'string') return vx.localeCompare(vy) * sort.dir;
return (vx < vy ? -1 : vx > vy ? 1 : 0) * sort.dir;
});
return a;
}
// Sortierbarer Tabellenkopf
function SortTh({ label, sortKey, sort, onSort, align = 'left', style }) {
const active = sort.key === sortKey;
return (
onSort(sortKey)}
style={{ ...window.thStyle, textAlign: align, cursor: 'pointer', userSelect: 'none',
color: active ? 'var(--accent-ink)' : 'var(--muted)', whiteSpace: 'nowrap', ...style }}>
{label}
{active ? (sort.dir === 1 ? '▲' : '▼') : '⇅'}
|
);
}
Object.assign(window, { Icon, L, ScoreBadge, StatusPill, MatChip, StepRange, Slider, IconBtn, useSort, sortRows, SortTh });