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

Dev-Tools: Elektro-Rechner (Ohm, Leistung, Kosten, Widerstände, Wirkungsgrad)

Browse Source
This commit is contained in:
Dicken
2026-05-30 15:41:09 +02:00
parent cf415d2b76
commit 9955fc77b7
1 changed files with 201 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -270,10 +270,210 @@ function CronBuilder() {
}
// ── Tool-Definitionen ─────────────────────────────────────────────────────────
// ── Elektro-Rechner ───────────────────────────────────────────────────────────
function ElektroRechner({ mobile }) {
// Eingabe-State für alle Formeln
const [vals, setVals] = useState({});
const set = (k, v) => setVals(p => ({ ...p, [k]: 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}`;
// Strompreis für Kostenrechner
const [preis, setPreis] = useState('0.30');
const Inp = ({ k, label, unit, placeholder }) => (
<div style={{ flex:1, minWidth:100 }}>
<div style={{ color:'rgba(255,255,255,0.35)', fontFamily:'monospace', fontSize:9, marginBottom:3 }}>{label} [{unit}]</div>
<input type="number" value={vals[k]||''} onChange={e=>set(k,e.target.value)}
placeholder={placeholder||''}
style={{ ...S.inp, fontSize:13, padding:'7px 9px', width:'100%', boxSizing:'border-box' }}/>
</div>
);
const Result = ({ label, value, highlight }) => (
<div style={{ display:'flex', justifyContent:'space-between', alignItems:'center',
padding:'8px 12px', marginBottom:5, borderRadius:8,
background: highlight ? 'rgba(78,205,196,0.1)' : 'rgba(255,255,255,0.03)',
border: `1px solid ${highlight ? 'rgba(78,205,196,0.25)' : 'rgba(255,255,255,0.07)'}` }}>
<span style={{ color:'rgba(255,255,255,0.55)', fontFamily:'monospace', fontSize:11 }}>{label}</span>
<span style={{ color: highlight ? '#4ecdc4' : '#fff', fontFamily:"'Courier New',monospace",
fontSize:14, fontWeight:700 }}>{value}</span>
</div>
);
const Section = ({ title, children }) => (
<div style={{ marginBottom:20 }}>
<div style={{ ...S.head, marginBottom:10, color:'#4ecdc4' }}>{title}</div>
{children}
</div>
);
const cols = mobile ? '1fr' : '1fr 1fr';
// ── Ohmsches Gesetz ──
const U1=n('u1'), I1=n('i1'), R1=n('r1');
const ohmRes = {
U: U1 ?? (I1!=null&&R1!=null ? I1*R1 : null),
I: I1 ?? (U1!=null&&R1!=null ? U1/R1 : null),
R: R1 ?? (U1!=null&&I1!=null ? U1/I1 : null),
};
// ── Leistung P = U * I ──
const U2=n('u2'), I2=n('i2'), P2=n('p2'), R2=n('r2');
const leistRes = (() => {
if (U2!=null&&I2!=null) return { P:U2*I2, U:U2, I:I2, R:U2/I2 };
if (P2!=null&&U2!=null) return { P:P2, I:P2/U2, U:U2, R:U2*U2/P2 };
if (P2!=null&&I2!=null) return { P:P2, U:P2/I2, I:I2, R:P2/(I2*I2) };
if (P2!=null&&R2!=null) return { P:P2, U:Math.sqrt(P2*R2), I:Math.sqrt(P2/R2), R:R2 };
if (U2!=null&&R2!=null) return { P:U2*U2/R2, U:U2, I:U2/R2, R:R2 };
if (I2!=null&&R2!=null) return { P:I2*I2*R2, U:I2*R2, I:I2, R:R2 };
return null;
})();
// ── Energie & Kosten ──
const Pw=n('pw'), Std=n('std'), Tage=n('tage');
const kwhTag = Pw!=null&&Std!=null ? (Pw/1000)*Std : null;
const kwhMonat= kwhTag!=null&&Tage!=null ? kwhTag*Tage : (kwhTag!=null ? kwhTag*30 : null);
const kwhJahr = kwhTag!=null ? kwhTag*365 : null;
const ep = parseFloat(preis);
const kostenTag = kwhTag!=null ? kwhTag*ep : null;
const kostenMonat = kwhMonat!=null ? kwhMonat*ep : null;
const kostenJahr = kwhJahr!=null ? kwhJahr*ep : null;
// ── Wirkungsgrad ──
const Pa=n('pa'), Pe=n('pe');
const eta = Pa!=null&&Pe!=null&&Pe>0 ? (Pa/Pe)*100 : null;
const verlust = Pa!=null&&Pe!=null ? Pe-Pa : null;
// ── Serienschaltung Widerstände ──
const r_ser = ['rs1','rs2','rs3','rs4'].map(k=>n(k)).filter(v=>v!=null);
const R_ser = r_ser.reduce((a,b)=>a+b, 0) || null;
// ── Parallelschaltung Widerstände ──
const r_par = ['rp1','rp2','rp3','rp4'].map(k=>n(k)).filter(v=>v!=null);
const R_par = r_par.length ? 1/(r_par.reduce((a,b)=>a+1/b, 0)) : null;
// ── Kondensator Ladestrom ──
const Cap=n('cap'), Uc=n('uc'), Tc=n('tc');
const Ic = Cap!=null&&Uc!=null&&Tc!=null ? Cap*(Uc/Tc) : null;
return (
<div>
{/* Info */}
<div style={{ color:'rgba(255,255,255,0.2)', fontFamily:'monospace', fontSize:9,
marginBottom:16, lineHeight:1.8 }}>
Felder ausfüllen → Ergebnis erscheint automatisch · Mindestens 2 bekannte Größen eingeben
</div>
<div style={{ display:'grid', gridTemplateColumns:cols, gap:20 }}>
<div>
{/* Ohmsches Gesetz */}
<Section title="⚡ Ohmsches Gesetz U = R · I">
<div style={{ display:'flex', gap:8, marginBottom:10, flexWrap:'wrap' }}>
<Inp k="u1" label="Spannung" unit="V" placeholder="230"/>
<Inp k="i1" label="Strom" unit="A" placeholder="2"/>
<Inp k="r1" label="Widerstand" unit="Ω" placeholder="115"/>
</div>
<Result label="U – Spannung" value={fmt(ohmRes.U,'V')} highlight={!U1&&ohmRes.U!=null}/>
<Result label="I – Strom" value={fmt(ohmRes.I,'A')} highlight={!I1&&ohmRes.I!=null}/>
<Result label="R – Widerstand" value={fmt(ohmRes.R,'Ω')} highlight={!R1&&ohmRes.R!=null}/>
</Section>
{/* Leistung */}
<Section title="🔋 Leistung P = U · I">
<div style={{ display:'flex', gap:8, marginBottom:10, flexWrap:'wrap' }}>
<Inp k="u2" label="Spannung" unit="V"/>
<Inp k="i2" label="Strom" unit="A"/>
<Inp k="p2" label="Leistung" unit="W"/>
<Inp k="r2" label="Widerstand" unit="Ω"/>
</div>
{leistRes ? <>
<Result label="P – Leistung" value={fmt(leistRes.P,'W')} highlight={!P2}/>
<Result label="U – Spannung" value={fmt(leistRes.U,'V')} highlight={!U2}/>
<Result label="I – Strom" value={fmt(leistRes.I,'A')} highlight={!I2}/>
<Result 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>}
</Section>
{/* Wirkungsgrad */}
<Section title="🔄 Wirkungsgrad η = P_ab / P_zu">
<div style={{ display:'flex', gap:8, marginBottom:10 }}>
<Inp k="pa" label="Abgabe-Leistung" unit="W" placeholder="800"/>
<Inp k="pe" label="Aufnahme-Leistung" unit="W" placeholder="1000"/>
</div>
<Result label="η – Wirkungsgrad" value={eta!=null ? `${eta.toFixed(1)} %` : '—'} highlight={eta!=null}/>
<Result label="Verlustleistung" value={fmt(verlust,'W')}/>
</Section>
</div>
<div>
{/* Stromkosten */}
<Section title="💶 Stromkosten">
<div style={{ display:'flex', gap:8, marginBottom:10, flexWrap:'wrap' }}>
<Inp k="pw" label="Leistung" unit="W" placeholder="100"/>
<Inp k="std" label="Stunden/Tag" unit="h" placeholder="5"/>
<Inp k="tage" label="Tage/Monat" unit="d" placeholder="30"/>
</div>
<div style={{ marginBottom:8 }}>
<div style={{ color:'rgba(255,255,255,0.35)', fontFamily:'monospace', fontSize:9, marginBottom:3 }}>
Strompreis [€/kWh]
</div>
<input type="number" value={preis} onChange={e=>setPreis(e.target.value)}
step="0.01" min="0"
style={{ ...S.inp, fontSize:13, padding:'7px 9px', width:'100%', boxSizing:'border-box' }}/>
</div>
<Result label="kWh/Tag" value={kwhTag!=null ? `${kwhTag.toFixed(3)} kWh` : '—'}/>
<Result label="Kosten/Tag" value={kostenTag!=null ? `${kostenTag.toFixed(3)} €` : '—'}/>
<Result label="kWh/Monat" value={kwhMonat!=null ? `${kwhMonat.toFixed(2)} kWh` : '—'}/>
<Result label="Kosten/Monat" value={kostenMonat!=null ? `${kostenMonat.toFixed(2)} €`: '—'} highlight={kostenMonat!=null}/>
<Result label="kWh/Jahr" value={kwhJahr!=null ? `${kwhJahr.toFixed(1)} kWh` : '—'}/>
<Result label="Kosten/Jahr" value={kostenJahr!=null ? `${kostenJahr.toFixed(2)} €` : '—'} highlight={kostenJahr!=null}/>
</Section>
{/* Widerstände */}
<Section title="🔗 Widerstandsschaltung">
<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={{ 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="Ω"/>)}
</div>
<Result label="Gesamtwiderstand (Serie)" value={r_ser.length>=2 ? fmt(R_ser,'Ω') : '—'} highlight={r_ser.length>=2}/>
</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={{ 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="Ω"/>)}
</div>
<Result label="Gesamtwiderstand (Parallel)" value={r_par.length>=2 ? fmt(R_par,'Ω') : '—'} highlight={r_par.length>=2}/>
</div>
</Section>
{/* Kondensator */}
<Section title="⚡ Kondensator I = C · (ΔU/Δt)">
<div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:10 }}>
<Inp k="cap" label="Kapazität" unit="F" placeholder="0.001"/>
<Inp k="uc" label="Spannung" unit="V" placeholder="230"/>
<Inp k="tc" label="Zeit Δt" unit="s" placeholder="0.02"/>
</div>
<Result label="I – Ladestrom" value={fmt(Ic,'A')} highlight={Ic!=null}/>
</Section>
</div>
</div>
{/* Reset */}
<button onClick={()=>setVals({})}
style={{ ...S.btn('#ff6b9d',true), marginTop:8, fontSize:11, padding:'6px 16px' }}>
✕ Alle Felder leeren
</button>
</div>
);
}
const TOOL_DEFS = [
{id:'cron', label:'⏱ Crontab', desc:'Crontab erklären und erstellen', ready:true,
tabs:[{id:'explain',label:'Erklären'},{id:'build',label:'Erstellen'}],
components:{explain:CronExplainer,build:CronBuilder}},
{id:'elektro', label:'⚡ Elektro', desc:'Ohm, Leistung, Kosten, Widerstände', ready:true, component:ElektroRechner},
{id:'json', label:'{ } JSON', desc:'JSON formatieren', ready:false},
{id:'base64', label:'🔐 Base64', desc:'Text ↔ Base64', ready:false},
{id:'regex', label:'🔍 Regex', desc:'Regex testen', ready:false},