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 13:04:50 +02:00
parent 52a77ad1ae
commit f7c329b3de
1 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -444,6 +444,8 @@ function BestellungDetail({ id, toast, onBack }) {
function ArchivModal({ calcId, onClose }) { function ArchivModal({ calcId, onClose }) {
const [item, setItem] = useState(null); const [item, setItem] = useState(null);
const [lightbox, setLightbox] = useState(false); const [lightbox, setLightbox] = useState(false);
const mobile = window.innerWidth < 768;
useEffect(() => { useEffect(() => {
api('/tools/kalkulator3d').then(items => { api('/tools/kalkulator3d').then(items => {
setItem(items.find(i => i.id === calcId) || null); setItem(items.find(i => i.id === calcId) || null);
@@ -457,50 +459,64 @@ function ArchivModal({ calcId, onClose }) {
</div> </div>
); );
// Mobile: bottom-sheet, Desktop: centered dialog
const overlayStyle = {
position:'fixed', inset:0, background:'rgba(0,0,0,0.85)', zIndex:6000,
display:'flex',
alignItems: mobile ? 'flex-end' : 'center',
justifyContent: 'center',
padding: mobile ? 0 : 24,
};
const dialogStyle = mobile ? {
background:'#1a1a1e', borderRadius:'16px 16px 0 0', width:'100%', maxWidth:600,
maxHeight:'85vh', overflowY:'auto', border:'1px solid rgba(255,255,255,0.1)',
} : {
background:'#1a1a1e', borderRadius:16, width:'100%', maxWidth:560,
maxHeight:'90vh', overflowY:'auto', border:'1px solid rgba(255,255,255,0.15)',
boxShadow:'0 24px 80px rgba(0,0,0,0.6)',
};
return ( return (
<div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.85)',zIndex:6000, <div style={overlayStyle} onClick={e=>e.target===e.currentTarget&&onClose()}>
display:'flex',alignItems:'flex-end',justifyContent:'center'}}
onClick={e=>e.target===e.currentTarget&&onClose()}>
{lightbox && <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.95)',zIndex:7000, {lightbox && <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.95)',zIndex:7000,
display:'flex',alignItems:'center',justifyContent:'center'}} onClick={()=>setLightbox(false)}> display:'flex',alignItems:'center',justifyContent:'center'}} onClick={()=>setLightbox(false)}>
<img src={item.image} alt="" style={{maxWidth:'95%',maxHeight:'90vh',borderRadius:10,objectFit:'contain'}}/> <img src={item.image} alt="" style={{maxWidth:'95%',maxHeight:'90vh',borderRadius:10,objectFit:'contain'}}/>
</div>} </div>}
<div style={{background:'#1a1a1e',borderRadius:'16px 16px 0 0',width:'100%',maxWidth:600, <div style={dialogStyle}>
maxHeight:'85vh',overflowY:'auto',border:'1px solid rgba(255,255,255,0.1)'}}> <div style={{padding:'16px 20px 0'}}>
<div style={{padding:'16px 16px 0'}}> {mobile && <div style={{width:36,height:4,background:'rgba(255,255,255,0.15)',borderRadius:2,margin:'0 auto 14px'}}/>}
<div style={{width:36,height:4,background:'rgba(255,255,255,0.15)',borderRadius:2,margin:'0 auto 14px'}}/> <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:14}}>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:12}}> <div style={{color:'#fff',fontFamily:"'Space Mono',monospace",fontSize:mobile?15:17,fontWeight:700}}>{item.name}</div>
<div style={{color:'#fff',fontFamily:"'Space Mono',monospace",fontSize:15,fontWeight:700}}>{item.name}</div> <button onClick={onClose} style={{background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.1)',
<button onClick={onClose} style={{background:'transparent',border:'none',color:'rgba(255,255,255,0.4)', borderRadius:6, color:'rgba(255,255,255,0.6)', fontSize:14, cursor:'pointer', padding:'4px 10px', lineHeight:1, flexShrink:0, marginLeft:12}}>✕</button>
fontSize:20,cursor:'pointer',padding:'0 4px',lineHeight:1}}>✕</button>
</div> </div>
</div> </div>
<div style={{padding:'0 16px 24px'}}> <div style={{padding:'0 20px 28px'}}>
{item.image && ( {item.image && (
<img src={item.image} alt={item.name} onClick={()=>setLightbox(true)} <img src={item.image} alt={item.name} onClick={()=>setLightbox(true)}
style={{width:'100%',maxHeight:180,objectFit:'cover',borderRadius:8,marginBottom:12, style={{width:'100%', maxHeight: mobile?180:260, objectFit:'cover', borderRadius:10, marginBottom:14,
cursor:'pointer', border:'1px solid rgba(255,255,255,0.1)'}}/> cursor:'pointer', border:'1px solid rgba(255,255,255,0.1)'}}/>
)} )}
<div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:6,marginBottom:12}}> <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8,marginBottom:14}}>
{[['Gewicht',`${item.gramm}g`],['Dauer',`${item.stunden}h`],['Farben',item.farben]].map(([l,v])=>( {[['Gewicht',`${item.gramm}g`],['Dauer',`${item.stunden}h`],['Farben',item.farben]].map(([l,v])=>(
<div key={l} style={{background:'rgba(255,255,255,0.04)',borderRadius:8,padding:'8px 10px'}}> <div key={l} style={{background:'rgba(255,255,255,0.04)',borderRadius:8,padding:'10px 12px'}}>
<div style={{color:'rgba(255,255,255,0.55)',fontFamily:'monospace',fontSize:9,marginBottom:3}}>{l.toUpperCase()}</div> <div style={{color:'rgba(255,255,255,0.55)',fontFamily:'monospace',fontSize:9,marginBottom:4}}>{l.toUpperCase()}</div>
<div style={{color:'#fff',fontFamily:"'Space Mono',monospace",fontSize:13,fontWeight:700}}>{v}</div> <div style={{color:'#fff',fontFamily:"'Space Mono',monospace",fontSize:14,fontWeight:700}}>{v}</div>
</div> </div>
))} ))}
</div> </div>
<div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:6,marginBottom:12}}> <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8,marginBottom:14}}>
{[['💖',item.preis_freundschaft,'#ff6b9d'],['🤝',item.preis_normal,'#4ecdc4'],['💼',item.preis_auftrag,'#ffe66d']].map(([e,v,color])=>( {[['💖',item.preis_freundschaft,'#ff6b9d'],['🤝',item.preis_normal,'#4ecdc4'],['💼',item.preis_auftrag,'#ffe66d']].map(([e,v,color])=>(
<div key={e} style={{background:`${color}10`,border:`1px solid ${color}25`,borderRadius:8,padding:'8px 6px',textAlign:'center'}}> <div key={e} style={{background:`${color}10`,border:`1px solid ${color}25`,borderRadius:8,padding:'10px 8px',textAlign:'center'}}>
<div style={{fontSize:14,marginBottom:3}}>{e}</div> <div style={{fontSize:16,marginBottom:4}}>{e}</div>
<div style={{color,fontFamily:"'Space Mono',monospace",fontSize:14,fontWeight:700}}>{v.toFixed(2)}€</div> <div style={{color,fontFamily:"'Space Mono',monospace",fontSize:mobile?14:16,fontWeight:700}}>{v.toFixed(2)}€</div>
</div> </div>
))} ))}
</div> </div>
{item.bemerkung && ( {item.bemerkung && (
<div style={{background:'rgba(255,255,255,0.03)',border:'1px solid rgba(255,255,255,0.07)', <div style={{background:'rgba(255,255,255,0.03)',border:'1px solid rgba(255,255,255,0.07)',
borderRadius:8,padding:'10px 12px'}}> borderRadius:8,padding:'12px 14px'}}>
<div style={{color:'rgba(255,255,255,0.55)',fontFamily:'monospace',fontSize:12,lineHeight:1.6}}>{item.bemerkung}</div> <div style={{color:'rgba(255,255,255,0.6)',fontFamily:'monospace',fontSize:12,lineHeight:1.7}}>{item.bemerkung}</div>
</div> </div>
)} )}
</div> </div>