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

Fix: Elektro-Rechner Inputs verlieren Fokus nicht mehr nach erster Zahl

Browse Source
This commit is contained in:
Dicken
2026-05-31 23:31:46 +02:00
parent ca48bceded
commit 8eafe38737
1 changed files with 48 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/src/tools/devtools.jsx
View File

@@ -314,10 +314,7 @@ function ElektroRechner({ mobile }) {
const n = k => { const v = parseFloat(vals[k]); return isNaN(v) ? null : v; }; const n = k => { const v = parseFloat(vals[k]); return isNaN(v) ? null : v; };
const fmt = (v, unit, digits=3) => v == null ? '—' : `${parseFloat(v.toPrecision(digits))} ${unit}`; const fmt = (v, unit, digits=3) => v == null ? '—' : `${parseFloat(v.toPrecision(digits))} ${unit}`;
// Shorthand mit gebundenen props // Res und Sec als direkte Aliase (kein Render-Problem, keine Inputs)
const Inp = (props) => <ElektroInp vals={vals} setVals={setVals} {...props}/>;
const Res = (props) => <ElektroResult {...props}/>;
const Sec = (props) => <ElektroSection {...props}/>;
const cols = mobile ? '1fr' : '1fr 1fr'; const cols = mobile ? '1fr' : '1fr 1fr';
@@ -379,51 +376,51 @@ function ElektroRechner({ mobile }) {
<div style={{ display:'grid', gridTemplateColumns:cols, gap:20 }}> <div style={{ display:'grid', gridTemplateColumns:cols, gap:20 }}>
<div> <div>
{/* Ohmsches Gesetz */} {/* Ohmsches Gesetz */}
<Sec title="⚡ Ohmsches Gesetz U = R · I"> <ElektroSection title="⚡ Ohmsches Gesetz U = R · I">
<div style={{ display:'flex', gap:8, marginBottom:10, flexWrap:'wrap' }}> <div style={{ display:'flex', gap:8, marginBottom:10, flexWrap:'wrap' }}>
<Inp k="u1" label="Spannung" unit="V" placeholder="230"/> <ElektroInp vals={vals} setVals={setVals} k="u1" label="Spannung" unit="V" placeholder="230"/>
<Inp k="i1" label="Strom" unit="A" placeholder="2"/> <ElektroInp vals={vals} setVals={setVals} k="i1" label="Strom" unit="A" placeholder="2"/>
<Inp k="r1" label="Widerstand" unit="Ω" placeholder="115"/> <ElektroInp vals={vals} setVals={setVals} k="r1" label="Widerstand" unit="Ω" placeholder="115"/>
</div> </div>
<Res label="U – Spannung" value={fmt(ohmRes.U,'V')} highlight={!U1&&ohmRes.U!=null}/> <ElektroResult label="U – Spannung" value={fmt(ohmRes.U,'V')} highlight={!U1&&ohmRes.U!=null}/>
<Res label="I – Strom" value={fmt(ohmRes.I,'A')} highlight={!I1&&ohmRes.I!=null}/> <ElektroResult label="I – Strom" value={fmt(ohmRes.I,'A')} highlight={!I1&&ohmRes.I!=null}/>
<Res label="R – Widerstand" value={fmt(ohmRes.R,'Ω')} highlight={!R1&&ohmRes.R!=null}/> <ElektroResult label="R – Widerstand" value={fmt(ohmRes.R,'Ω')} highlight={!R1&&ohmRes.R!=null}/>
</Sec> </ElektroSection>
{/* Leistung */} {/* Leistung */}
<Sec title="🔋 Leistung P = U · I"> <ElektroSection title="🔋 Leistung P = U · I">
<div style={{ display:'flex', gap:8, marginBottom:10, flexWrap:'wrap' }}> <div style={{ display:'flex', gap:8, marginBottom:10, flexWrap:'wrap' }}>
<Inp k="u2" label="Spannung" unit="V"/> <ElektroInp vals={vals} setVals={setVals} k="u2" label="Spannung" unit="V"/>
<Inp k="i2" label="Strom" unit="A"/> <ElektroInp vals={vals} setVals={setVals} k="i2" label="Strom" unit="A"/>
<Inp k="p2" label="Leistung" unit="W"/> <ElektroInp vals={vals} setVals={setVals} k="p2" label="Leistung" unit="W"/>
<Inp k="r2" label="Widerstand" unit="Ω"/> <ElektroInp vals={vals} setVals={setVals} k="r2" label="Widerstand" unit="Ω"/>
</div> </div>
{leistRes ? <> {leistRes ? <>
<Res label="P – Leistung" value={fmt(leistRes.P,'W')} highlight={!P2}/> <ElektroResult label="P – Leistung" value={fmt(leistRes.P,'W')} highlight={!P2}/>
<Res label="U – Spannung" value={fmt(leistRes.U,'V')} highlight={!U2}/> <ElektroResult label="U – Spannung" value={fmt(leistRes.U,'V')} highlight={!U2}/>
<Res label="I – Strom" value={fmt(leistRes.I,'A')} highlight={!I2}/> <ElektroResult label="I – Strom" value={fmt(leistRes.I,'A')} highlight={!I2}/>
<Res label="R – Widerstand" value={fmt(leistRes.R,'Ω')} highlight={!R2}/> <ElektroResult label="R – Widerstand" value={fmt(leistRes.R,'Ω')} highlight={!R2}/>
</> : <div style={{color:'rgba(255,255,255,0.2)',fontFamily:'monospace',fontSize:11}}>Mindestens 2 Werte eingeben</div>} </> : <div style={{color:'rgba(255,255,255,0.2)',fontFamily:'monospace',fontSize:11}}>Mindestens 2 Werte eingeben</div>}
</Sec> </ElektroSection>
{/* Wirkungsgrad */} {/* Wirkungsgrad */}
<Sec title="🔄 Wirkungsgrad η = P_ab / P_zu"> <ElektroSection title="🔄 Wirkungsgrad η = P_ab / P_zu">
<div style={{ display:'flex', gap:8, marginBottom:10 }}> <div style={{ display:'flex', gap:8, marginBottom:10 }}>
<Inp k="pa" label="Abgabe-Leistung" unit="W" placeholder="800"/> <ElektroInp vals={vals} setVals={setVals} k="pa" label="Abgabe-Leistung" unit="W" placeholder="800"/>
<Inp k="pe" label="Aufnahme-Leistung" unit="W" placeholder="1000"/> <ElektroInp vals={vals} setVals={setVals} k="pe" label="Aufnahme-Leistung" unit="W" placeholder="1000"/>
</div> </div>
<Res label="η – Wirkungsgrad" value={eta!=null ? `${eta.toFixed(1)} %` : '—'} highlight={eta!=null}/> <ElektroResult label="η – Wirkungsgrad" value={eta!=null ? `${eta.toFixed(1)} %` : '—'} highlight={eta!=null}/>
<Res label="Verlustleistung" value={fmt(verlust,'W')}/> <ElektroResult label="Verlustleistung" value={fmt(verlust,'W')}/>
</Sec> </ElektroSection>
</div> </div>
<div> <div>
{/* Stromkosten */} {/* Stromkosten */}
<Sec title="💶 Stromkosten"> <ElektroSection title="💶 Stromkosten">
<div style={{ display:'flex', gap:8, marginBottom:10, flexWrap:'wrap' }}> <div style={{ display:'flex', gap:8, marginBottom:10, flexWrap:'wrap' }}>
<Inp k="pw" label="Leistung" unit="W" placeholder="100"/> <ElektroInp vals={vals} setVals={setVals} k="pw" label="Leistung" unit="W" placeholder="100"/>
<Inp k="std" label="Stunden/Tag" unit="h" placeholder="5"/> <ElektroInp vals={vals} setVals={setVals} k="std" label="Stunden/Tag" unit="h" placeholder="5"/>
<Inp k="tage" label="Tage/Monat" unit="d" placeholder="30"/> <ElektroInp vals={vals} setVals={setVals} k="tage" label="Tage/Monat" unit="d" placeholder="30"/>
</div> </div>
<div style={{ marginBottom:8 }}> <div style={{ marginBottom:8 }}>
<div style={{ color:'rgba(255,255,255,0.35)', fontFamily:'monospace', fontSize:9, marginBottom:3 }}> <div style={{ color:'rgba(255,255,255,0.35)', fontFamily:'monospace', fontSize:9, marginBottom:3 }}>
@@ -433,41 +430,41 @@ function ElektroRechner({ mobile }) {
step="0.01" min="0" step="0.01" min="0"
style={{ ...S.inp, fontSize:13, padding:'7px 9px', width:'100%', boxSizing:'border-box' }}/> style={{ ...S.inp, fontSize:13, padding:'7px 9px', width:'100%', boxSizing:'border-box' }}/>
</div> </div>
<Res label="kWh/Tag" value={kwhTag!=null ? `${kwhTag.toFixed(3)} kWh` : '—'}/> <ElektroResult label="kWh/Tag" value={kwhTag!=null ? `${kwhTag.toFixed(3)} kWh` : '—'}/>
<Res label="Kosten/Tag" value={kostenTag!=null ? `${kostenTag.toFixed(3)} €` : '—'}/> <ElektroResult label="Kosten/Tag" value={kostenTag!=null ? `${kostenTag.toFixed(3)} €` : '—'}/>
<Res label="kWh/Monat" value={kwhMonat!=null ? `${kwhMonat.toFixed(2)} kWh` : '—'}/> <ElektroResult label="kWh/Monat" value={kwhMonat!=null ? `${kwhMonat.toFixed(2)} kWh` : '—'}/>
<Res label="Kosten/Monat" value={kostenMonat!=null ? `${kostenMonat.toFixed(2)} €`: '—'} highlight={kostenMonat!=null}/> <ElektroResult label="Kosten/Monat" value={kostenMonat!=null ? `${kostenMonat.toFixed(2)} €`: '—'} highlight={kostenMonat!=null}/>
<Res label="kWh/Jahr" value={kwhJahr!=null ? `${kwhJahr.toFixed(1)} kWh` : '—'}/> <ElektroResult label="kWh/Jahr" value={kwhJahr!=null ? `${kwhJahr.toFixed(1)} kWh` : '—'}/>
<Res label="Kosten/Jahr" value={kostenJahr!=null ? `${kostenJahr.toFixed(2)} €` : '—'} highlight={kostenJahr!=null}/> <ElektroResult label="Kosten/Jahr" value={kostenJahr!=null ? `${kostenJahr.toFixed(2)} €` : '—'} highlight={kostenJahr!=null}/>
</Sec> </ElektroSection>
{/* Widerstände */} {/* Widerstände */}
<Sec title="🔗 Widerstandsschaltung"> <ElektroSection title="🔗 Widerstandsschaltung">
<div style={{ marginBottom:8 }}> <div style={{ marginBottom:8 }}>
<div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9, marginBottom:5 }}>SERIE (R = R1+R2+…)</div> <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9, marginBottom:5 }}>SERIE (R = R1+R2+…)</div>
<div style={{ display:'flex', gap:6, flexWrap:'wrap', marginBottom:8 }}> <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginBottom:8 }}>
{['rs1','rs2','rs3','rs4'].map(k=><Inp key={k} k={k} label={`R${k.slice(2)}`} unit="Ω"/>)} {['rs1','rs2','rs3','rs4'].map(k=><ElektroInp vals={vals} setVals={setVals} key={k} k={k} label={`R${k.slice(2)}`} unit="Ω"/>)}
</div> </div>
<Res label="Gesamtwiderstand (Serie)" value={r_ser.length>=2 ? fmt(R_ser,'Ω') : '—'} highlight={r_ser.length>=2}/> <ElektroResult label="Gesamtwiderstand (Serie)" value={r_ser.length>=2 ? fmt(R_ser,'Ω') : '—'} highlight={r_ser.length>=2}/>
</div> </div>
<div> <div>
<div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9, marginBottom:5 }}>PARALLEL (1/R = 1/R1+1/R2+…)</div> <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9, marginBottom:5 }}>PARALLEL (1/R = 1/R1+1/R2+…)</div>
<div style={{ display:'flex', gap:6, flexWrap:'wrap', marginBottom:8 }}> <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginBottom:8 }}>
{['rp1','rp2','rp3','rp4'].map(k=><Inp key={k} k={k} label={`R${k.slice(2)}`} unit="Ω"/>)} {['rp1','rp2','rp3','rp4'].map(k=><ElektroInp vals={vals} setVals={setVals} key={k} k={k} label={`R${k.slice(2)}`} unit="Ω"/>)}
</div> </div>
<Res label="Gesamtwiderstand (Parallel)" value={r_par.length>=2 ? fmt(R_par,'Ω') : '—'} highlight={r_par.length>=2}/> <ElektroResult label="Gesamtwiderstand (Parallel)" value={r_par.length>=2 ? fmt(R_par,'Ω') : '—'} highlight={r_par.length>=2}/>
</div> </div>
</Sec> </ElektroSection>
{/* Kondensator */} {/* Kondensator */}
<Sec title="⚡ Kondensator I = C · (ΔU/Δt)"> <ElektroSection title="⚡ Kondensator I = C · (ΔU/Δt)">
<div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:10 }}> <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:10 }}>
<Inp k="cap" label="Kapazität" unit="F" placeholder="0.001"/> <ElektroInp vals={vals} setVals={setVals} k="cap" label="Kapazität" unit="F" placeholder="0.001"/>
<Inp k="uc" label="Spannung" unit="V" placeholder="230"/> <ElektroInp vals={vals} setVals={setVals} k="uc" label="Spannung" unit="V" placeholder="230"/>
<Inp k="tc" label="Zeit Δt" unit="s" placeholder="0.02"/> <ElektroInp vals={vals} setVals={setVals} k="tc" label="Zeit Δt" unit="s" placeholder="0.02"/>
</div> </div>
<Res label="I – Ladestrom" value={fmt(Ic,'A')} highlight={Ic!=null}/> <ElektroResult label="I – Ladestrom" value={fmt(Ic,'A')} highlight={Ic!=null}/>
</Sec> </ElektroSection>
</div> </div>
</div> </div>