Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Dateien nach "frontend/src/tools" hochladen

Browse Source
This commit is contained in:
Dicken
2026-05-26 11:53:08 +02:00
parent 589fa52505
commit 09fe7d2f06
2 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/tools/bestellungen.jsx
View File

@@ -107,7 +107,7 @@ function BestellungDetail({ id, toast, onBack }) {
? archiv.filter(a => a.name.toLowerCase().includes(pickerSearch.toLowerCase())) ? archiv.filter(a => a.name.toLowerCase().includes(pickerSearch.toLowerCase()))
: archiv; : archiv;
if (loading) return <div style={{padding:24,color:'rgba(255,255,255,0.3)',fontFamily:'monospace'}}>Lädt…</div>; if (loading) return <div style={{padding:24,color:'rgba(255,255,255,0.6)',fontFamily:'monospace'}}>Lädt…</div>;
// Status aus Stück-Zählern ableiten // Status aus Stück-Zählern ableiten
const itemDisplayStatus = (item) => { const itemDisplayStatus = (item) => {
@@ -231,7 +231,7 @@ function BestellungDetail({ id, toast, onBack }) {
</div> </div>
{order.items.length===0 && ( {order.items.length===0 && (
<div style={{color:'rgba(255,255,255,0.2)',fontFamily:'monospace',fontSize:12,padding:'6px 0'}}> <div style={{color:'rgba(255,255,255,0.5)',fontFamily:'monospace',fontSize:12,padding:'6px 0'}}>
Noch keine Positionen. Noch keine Positionen.
</div> </div>
)} )}
@@ -310,13 +310,13 @@ function BestellungDetail({ id, toast, onBack }) {
}; };
return ( return (
<div key={key} style={{background:`${color}10`,border:`1px solid ${color}30`,borderRadius:8,padding:'8px 6px',textAlign:'center'}}> <div key={key} style={{background:`${color}10`,border:`1px solid ${color}30`,borderRadius:8,padding:'8px 6px',textAlign:'center'}}>
<div style={{color:'rgba(255,255,255,0.35)',fontSize:9,fontFamily:'monospace',marginBottom:6}}>{label.toUpperCase()}</div> <div style={{color:'rgba(255,255,255,0.6)',fontSize:9,fontFamily:'monospace',marginBottom:6}}>{label.toUpperCase()}</div>
<div style={{display:'flex',alignItems:'center',justifyContent:'center',gap:4}}> <div style={{display:'flex',alignItems:'center',justifyContent:'center',gap:4}}>
<button onClick={handleDec} <button onClick={handleDec}
style={{width:22,height:22,borderRadius:5,background:'rgba(0,0,0,0.3)',border:'none',color:canDec?color:'rgba(255,255,255,0.15)',fontSize:16,cursor:canDec?'pointer':'default',lineHeight:1}}>−</button> style={{width:22,height:22,borderRadius:5,background:'rgba(0,0,0,0.3)',border:'none',color:canDec?color:'rgba(255,255,255,0.45)',fontSize:16,cursor:canDec?'pointer':'default',lineHeight:1}}>−</button>
<span style={{color,fontFamily:"'Space Mono',monospace",fontSize:16,fontWeight:700,minWidth:20,textAlign:'center'}}>{qty}</span> <span style={{color,fontFamily:"'Space Mono',monospace",fontSize:16,fontWeight:700,minWidth:20,textAlign:'center'}}>{qty}</span>
<button onClick={handleInc} <button onClick={handleInc}
style={{width:22,height:22,borderRadius:5,background:'rgba(0,0,0,0.3)',border:'none',color:canInc?color:'rgba(255,255,255,0.15)',fontSize:16,cursor:canInc?'pointer':'default',lineHeight:1}}>+</button> style={{width:22,height:22,borderRadius:5,background:'rgba(0,0,0,0.3)',border:'none',color:canInc?color:'rgba(255,255,255,0.45)',fontSize:16,cursor:canInc?'pointer':'default',lineHeight:1}}>+</button>
</div> </div>
</div> </div>
); );
@@ -342,7 +342,7 @@ function BestellungDetail({ id, toast, onBack }) {
))} ))}
{item.custom_price!=null && ( {item.custom_price!=null && (
<div style={{textAlign:'center',minWidth:60,marginLeft:'auto'}}> <div style={{textAlign:'center',minWidth:60,marginLeft:'auto'}}>
<div style={{color:'rgba(255,255,255,0.3)',fontSize:9,fontFamily:'monospace'}}>FEST</div> <div style={{color:'rgba(255,255,255,0.6)',fontSize:9,fontFamily:'monospace'}}>FEST</div>
<div style={{color:'#fff',fontFamily:"'Space Mono',monospace",fontSize:12,fontWeight:700}}> <div style={{color:'#fff',fontFamily:"'Space Mono',monospace",fontSize:12,fontWeight:700}}>
{(item.custom_price*item.stueckzahl).toFixed(2)}€ {(item.custom_price*item.stueckzahl).toFixed(2)}€
</div> </div>
@@ -361,7 +361,7 @@ function BestellungDetail({ id, toast, onBack }) {
{PREISE.map(p=>( {PREISE.map(p=>(
<div key={p.key} style={{background:`${p.c}10`,border:`1px solid ${p.c}30`,borderRadius:9,padding:'10px 8px',textAlign:'center'}}> <div key={p.key} style={{background:`${p.c}10`,border:`1px solid ${p.c}30`,borderRadius:9,padding:'10px 8px',textAlign:'center'}}>
<div style={{fontSize:16,marginBottom:2}}>{p.emoji}</div> <div style={{fontSize:16,marginBottom:2}}>{p.emoji}</div>
<div style={{color:'rgba(255,255,255,0.35)',fontSize:9,fontFamily:'monospace',marginBottom:3}}>{p.label}</div> <div style={{color:'rgba(255,255,255,0.6)',fontSize:9,fontFamily:'monospace',marginBottom:3}}>{p.label}</div>
<div style={{color:p.c,fontFamily:"'Space Mono',monospace",fontSize:16,fontWeight:700}}> <div style={{color:p.c,fontFamily:"'Space Mono',monospace",fontSize:16,fontWeight:700}}>
{totals[p.key].toFixed(2)}€ {totals[p.key].toFixed(2)}€
</div> </div>
@@ -414,7 +414,7 @@ function BestellungDetail({ id, toast, onBack }) {
}}> }}>
<div style={{textAlign:'left'}}> <div style={{textAlign:'left'}}>
<div style={{color:'#fff',fontFamily:'monospace',fontSize:13}}>{a.name}</div> <div style={{color:'#fff',fontFamily:'monospace',fontSize:13}}>{a.name}</div>
<div style={{color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:10,marginTop:2}}>{a.gramm}g · {a.stunden}h</div> <div style={{color:'rgba(255,255,255,0.6)',fontFamily:'monospace',fontSize:10,marginTop:2}}>{a.gramm}g · {a.stunden}h</div>
</div> </div>
<div style={{display:'flex',gap:8}}> <div style={{display:'flex',gap:8}}>
{PREISE.map(p=>( {PREISE.map(p=>(
@@ -426,7 +426,7 @@ function BestellungDetail({ id, toast, onBack }) {
</div> </div>
</button> </button>
))} ))}
{filteredArchiv.length===0 && <div style={{color:'rgba(255,255,255,0.25)',fontFamily:'monospace',fontSize:12,padding:'12px 8px'}}>Keine Treffer.</div>} {filteredArchiv.length===0 && <div style={{color:'rgba(255,255,255,0.55)',fontFamily:'monospace',fontSize:12,padding:'12px 8px'}}>Keine Treffer.</div>}
</div> </div>
<div style={{padding:'8px 16px 24px'}}> <div style={{padding:'8px 16px 24px'}}>
<button onClick={()=>setShowPicker(false)} style={{...S.btn('#ff6b9d'),width:'100%',textAlign:'center',padding:'10px 0'}}>Schließen</button> <button onClick={()=>setShowPicker(false)} style={{...S.btn('#ff6b9d'),width:'100%',textAlign:'center',padding:'10px 0'}}>Schließen</button>
@@ -500,7 +500,7 @@ export default function Bestellungen({ toast, mobile }) {
</span> </span>
<input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Name suchen…" <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Name suchen…"
style={{...S.inp,paddingLeft:34,fontSize:15}}/> style={{...S.inp,paddingLeft:34,fontSize:15}}/>
{search && <button onClick={()=>setSearch('')} style={{position:'absolute',right:10,top:'50%',transform:'translateY(-50%)',background:'transparent',border:'none',color:'rgba(255,255,255,0.3)',cursor:'pointer',fontSize:16}}>✕</button>} {search && <button onClick={()=>setSearch('')} style={{position:'absolute',right:10,top:'50%',transform:'translateY(-50%)',background:'transparent',border:'none',color:'rgba(255,255,255,0.6)',cursor:'pointer',fontSize:16}}>✕</button>}
</div> </div>
{/* Status-Filter */} {/* Status-Filter */}
@@ -522,15 +522,15 @@ export default function Bestellungen({ toast, mobile }) {
))} ))}
</div> </div>
<p style={{color:'rgba(255,255,255,0.25)',fontFamily:'monospace',fontSize:10,marginBottom:12}}> <p style={{color:'rgba(255,255,255,0.55)',fontFamily:'monospace',fontSize:10,marginBottom:12}}>
{filtered.length} von {orders.length} Bestellungen {filtered.length} von {orders.length} Bestellungen
</p> </p>
{loading && <div style={{color:'rgba(255,255,255,0.3)',fontFamily:'monospace'}}>Lädt…</div>} {loading && <div style={{color:'rgba(255,255,255,0.6)',fontFamily:'monospace'}}>Lädt…</div>}
{!loading && orders.length===0 && ( {!loading && orders.length===0 && (
<div style={{...S.card,textAlign:'center',padding:40}}> <div style={{...S.card,textAlign:'center',padding:40}}>
<div style={{color:'rgba(255,255,255,0.25)',fontFamily:'monospace',fontSize:12}}>Noch keine Bestellungen.</div> <div style={{color:'rgba(255,255,255,0.55)',fontFamily:'monospace',fontSize:12}}>Noch keine Bestellungen.</div>
</div> </div>
)} )}
@@ -544,7 +544,7 @@ export default function Bestellungen({ toast, mobile }) {
<div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:6}}> <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:6}}>
<button onClick={()=>setOpenId(order.id)} style={{background:'transparent',border:'none',cursor:'pointer',textAlign:'left',padding:0,flex:1}}> <button onClick={()=>setOpenId(order.id)} style={{background:'transparent',border:'none',cursor:'pointer',textAlign:'left',padding:0,flex:1}}>
<div style={{color:'#fff',fontFamily:'monospace',fontSize:14,fontWeight:700}}>{order.name}</div> <div style={{color:'#fff',fontFamily:'monospace',fontSize:14,fontWeight:700}}>{order.name}</div>
<div style={{color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:10,marginTop:2}}> <div style={{color:'rgba(255,255,255,0.6)',fontFamily:'monospace',fontSize:10,marginTop:2}}>
{new Date(order.created_at).toLocaleDateString('de-DE')} {new Date(order.created_at).toLocaleDateString('de-DE')}
</div> </div>
</button> </button>

30
frontend/src/tools/kalkulator3d.jsx
View File

@@ -57,7 +57,7 @@ function Stepper({ label, value, onChange, step, unit, min = 0, hint }) {
/> />
<button onClick={inc} style={{ padding:'10px 12px', background:'transparent', border:'none', color:'rgba(255,255,255,0.6)', fontSize:20, cursor:'pointer', flexShrink:0, lineHeight:1 }}>+</button> <button onClick={inc} style={{ padding:'10px 12px', background:'transparent', border:'none', color:'rgba(255,255,255,0.6)', fontSize:20, cursor:'pointer', flexShrink:0, lineHeight:1 }}>+</button>
</div> </div>
{hint && <div style={{ color:'rgba(255,255,255,0.2)', fontSize:10, fontFamily:'monospace', marginTop:3 }}>{hint}</div>} {hint && <div style={{ color:'rgba(255,255,255,0.5)', fontSize:10, fontFamily:'monospace', marginTop:3 }}>{hint}</div>}
</div> </div>
); );
} }
@@ -65,7 +65,7 @@ function Stepper({ label, value, onChange, step, unit, min = 0, hint }) {
function SmallInput({ label, value, onChange, step = 0.01 }) { function SmallInput({ label, value, onChange, step = 0.01 }) {
return ( return (
<div> <div>
<div style={{ color:'rgba(255,255,255,0.35)', fontSize:9, fontFamily:'monospace', marginBottom:3 }}>{label}</div> <div style={{ color:'rgba(255,255,255,0.6)', fontSize:9, fontFamily:'monospace', marginBottom:3 }}>{label}</div>
<input type="number" value={value} step={step} <input type="number" value={value} step={step}
onChange={e => onChange(parseFloat(e.target.value) || 0)} onChange={e => onChange(parseFloat(e.target.value) || 0)}
style={{ ...S.inp, padding:'7px 8px', fontSize:13 }} style={{ ...S.inp, padding:'7px 8px', fontSize:13 }}
@@ -169,7 +169,7 @@ export default function Kalkulator3D({ toast, editData, onEditDone, mobile }) {
<button onClick={() => setShowAdv(v => !v)} style={{ <button onClick={() => setShowAdv(v => !v)} style={{
width:'100%', marginTop:4, background:'rgba(255,255,255,0.02)', width:'100%', marginTop:4, background:'rgba(255,255,255,0.02)',
border:'1px solid rgba(255,255,255,0.06)', borderRadius:7, border:'1px solid rgba(255,255,255,0.06)', borderRadius:7,
padding:'9px 12px', color:'rgba(255,255,255,0.35)', cursor:'pointer', padding:'9px 12px', color:'rgba(255,255,255,0.6)', cursor:'pointer',
fontFamily:'monospace', fontSize:11, textAlign:'left', fontFamily:'monospace', fontSize:11, textAlign:'left',
display:'flex', alignItems:'center', gap:7, display:'flex', alignItems:'center', gap:7,
}}> }}>
@@ -203,7 +203,7 @@ export default function Kalkulator3D({ toast, editData, onEditDone, mobile }) {
borderBottom: i < 2 ? '1px solid rgba(255,255,255,0.05)' : 'none', borderBottom: i < 2 ? '1px solid rgba(255,255,255,0.05)' : 'none',
borderRight: i % 2 === 0 ? '1px solid rgba(255,255,255,0.05)' : 'none', borderRight: i % 2 === 0 ? '1px solid rgba(255,255,255,0.05)' : 'none',
}}> }}>
<div style={{ color:'rgba(255,255,255,0.3)', fontSize:9, fontFamily:'monospace', marginBottom:2 }}>{l.toUpperCase()}</div> <div style={{ color:'rgba(255,255,255,0.6)', fontSize:9, fontFamily:'monospace', marginBottom:2 }}>{l.toUpperCase()}</div>
<div style={{ color:c, fontSize:i===3?18:14, fontFamily:"'Space Mono',monospace", fontWeight:i===3?700:400 }}> <div style={{ color:c, fontSize:i===3?18:14, fontFamily:"'Space Mono',monospace", fontWeight:i===3?700:400 }}>
{v.toFixed(2)} € {v.toFixed(2)} €
</div> </div>
@@ -220,11 +220,11 @@ export default function Kalkulator3D({ toast, editData, onEditDone, mobile }) {
padding:'12px 10px', textAlign:'center', transform:i===1?'scale(1.04)':'scale(1)', padding:'12px 10px', textAlign:'center', transform:i===1?'scale(1.04)':'scale(1)',
}}> }}>
<div style={{ fontSize:20, marginBottom:3 }}>{s.emoji}</div> <div style={{ fontSize:20, marginBottom:3 }}>{s.emoji}</div>
<div style={{ color:'rgba(255,255,255,0.35)', fontSize:9, fontFamily:'monospace', marginBottom:4 }}>{s.label}</div> <div style={{ color:'rgba(255,255,255,0.6)', fontSize:9, fontFamily:'monospace', marginBottom:4 }}>{s.label}</div>
<div style={{ color:s.c, fontSize:mobile?16:20, fontFamily:"'Space Mono',monospace", fontWeight:700 }}> <div style={{ color:s.c, fontSize:mobile?16:20, fontFamily:"'Space Mono',monospace", fontWeight:700 }}>
{(calc.grund * s.mult).toFixed(2)}€ {(calc.grund * s.mult).toFixed(2)}€
</div> </div>
<div style={{ color:'rgba(255,255,255,0.2)', fontSize:8, fontFamily:'monospace', marginTop:2 }}>×{s.mult}</div> <div style={{ color:'rgba(255,255,255,0.5)', fontSize:8, fontFamily:'monospace', marginTop:2 }}>×{s.mult}</div>
</div> </div>
))} ))}
</div> </div>
@@ -272,7 +272,7 @@ export default function Kalkulator3D({ toast, editData, onEditDone, mobile }) {
<button onClick={() => fileRef.current?.click()} style={{ <button onClick={() => fileRef.current?.click()} style={{
width:'100%', padding:'20px', background:'rgba(255,255,255,0.03)', width:'100%', padding:'20px', background:'rgba(255,255,255,0.03)',
border:'1px dashed rgba(255,255,255,0.15)', borderRadius:8, border:'1px dashed rgba(255,255,255,0.15)', borderRadius:8,
color:'rgba(255,255,255,0.3)', cursor:'pointer', fontFamily:'monospace', fontSize:12, color:'rgba(255,255,255,0.6)', cursor:'pointer', fontFamily:'monospace', fontSize:12,
}}>📷 Bild hinzufügen</button> }}>📷 Bild hinzufügen</button>
)} )}
</div> </div>
@@ -330,35 +330,35 @@ export function SavedList({ toast, mobile }) {
{/* Suche */} {/* Suche */}
<div style={{ position:'relative', marginBottom:12 }}> <div style={{ position:'relative', marginBottom:12 }}>
<span style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', <span style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)',
color:'rgba(255,255,255,0.3)', fontSize:14, pointerEvents:'none' }}>⌕</span> color:'rgba(255,255,255,0.6)', fontSize:14, pointerEvents:'none' }}>⌕</span>
<input value={search} onChange={e => setSearch(e.target.value)} <input value={search} onChange={e => setSearch(e.target.value)}
placeholder="Name oder Bemerkung suchen…" placeholder="Name oder Bemerkung suchen…"
style={{ ...S.inp, paddingLeft:34, fontSize:15 }} /> style={{ ...S.inp, paddingLeft:34, fontSize:15 }} />
{search && ( {search && (
<button onClick={() => setSearch('')} style={{ <button onClick={() => setSearch('')} style={{
position:'absolute', right:10, top:'50%', transform:'translateY(-50%)', position:'absolute', right:10, top:'50%', transform:'translateY(-50%)',
background:'transparent', border:'none', color:'rgba(255,255,255,0.3)', background:'transparent', border:'none', color:'rgba(255,255,255,0.6)',
cursor:'pointer', fontSize:16, cursor:'pointer', fontSize:16,
}}>✕</button> }}>✕</button>
)} )}
</div> </div>
<p style={{ color:'rgba(255,255,255,0.25)', fontFamily:'monospace', fontSize:10, marginBottom:14 }}> <p style={{ color:'rgba(255,255,255,0.55)', fontFamily:'monospace', fontSize:10, marginBottom:14 }}>
{filtered.length} von {items.length} Einträgen{search ? ` für „${search}"` : ''} {filtered.length} von {items.length} Einträgen{search ? ` für „${search}"` : ''}
</p> </p>
{loading && <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace' }}>Lädt…</div>} {loading && <div style={{ color:'rgba(255,255,255,0.6)', fontFamily:'monospace' }}>Lädt…</div>}
{!loading && items.length === 0 && ( {!loading && items.length === 0 && (
<div style={{ ...S.card, textAlign:'center', padding:40 }}> <div style={{ ...S.card, textAlign:'center', padding:40 }}>
<div style={{ fontSize:28, marginBottom:10 }}>◉</div> <div style={{ fontSize:28, marginBottom:10 }}>◉</div>
<div style={{ color:'rgba(255,255,255,0.25)', fontFamily:'monospace', fontSize:12 }}>Noch keine Berechnungen.</div> <div style={{ color:'rgba(255,255,255,0.55)', fontFamily:'monospace', fontSize:12 }}>Noch keine Berechnungen.</div>
</div> </div>
)} )}
{!loading && search && filtered.length === 0 && ( {!loading && search && filtered.length === 0 && (
<div style={{ ...S.card, textAlign:'center', padding:24 }}> <div style={{ ...S.card, textAlign:'center', padding:24 }}>
<div style={{ color:'rgba(255,255,255,0.25)', fontFamily:'monospace', fontSize:12 }}>Keine Treffer.</div> <div style={{ color:'rgba(255,255,255,0.55)', fontFamily:'monospace', fontSize:12 }}>Keine Treffer.</div>
</div> </div>
)} )}
@@ -378,13 +378,13 @@ export function SavedList({ toast, mobile }) {
{/* Name + Datum */} {/* Name + Datum */}
<div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:4 }}> <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:4 }}>
<div style={{ color:'#fff', fontFamily:'monospace', fontSize:13, fontWeight:700 }}>{item.name}</div> <div style={{ color:'#fff', fontFamily:'monospace', fontSize:13, fontWeight:700 }}>{item.name}</div>
<div style={{ color:'rgba(255,255,255,0.2)', fontFamily:'monospace', fontSize:10, flexShrink:0, marginLeft:8 }}> <div style={{ color:'rgba(255,255,255,0.5)', fontFamily:'monospace', fontSize:10, flexShrink:0, marginLeft:8 }}>
{new Date(item.created_at).toLocaleDateString('de-DE')} {new Date(item.created_at).toLocaleDateString('de-DE')}
</div> </div>
</div> </div>
{/* Infos */} {/* Infos */}
<div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:10, marginBottom:6 }}> <div style={{ color:'rgba(255,255,255,0.6)', fontFamily:'monospace', fontSize:10, marginBottom:6 }}>
{item.gramm}g · {item.stunden}h · {item.farben} Farbe{item.farben > 1 ? 'n' : ''} {item.gramm}g · {item.stunden}h · {item.farben} Farbe{item.farben > 1 ? 'n' : ''}
</div> </div>