From 5fcc22500c241724f67540edf2d5f47f57aed5c8 Mon Sep 17 00:00:00 2001 From: isaacsquires Date: Tue, 21 Feb 2023 17:55:27 +0000 Subject: [PATCH 1/6] format --- src/features/stack/Electrode.js | 623 ++++++++++++++++---------------- 1 file changed, 311 insertions(+), 312 deletions(-) diff --git a/src/features/stack/Electrode.js b/src/features/stack/Electrode.js index 1e5fa47..de8b239 100644 --- a/src/features/stack/Electrode.js +++ b/src/features/stack/Electrode.js @@ -1,7 +1,7 @@ -import { React, useEffect} from 'react'; -import { useSelector, useDispatch } from 'react-redux'; -import { WetMassBox } from './components/wetMassBox'; -import { valueReturn, validate } from './stackFunctions'; +import { React, useEffect } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { WetMassBox } from "./components/wetMassBox"; +import { valueReturn, validate } from "./stackFunctions"; import { setAThickness, setCThickness, @@ -29,10 +29,10 @@ import { setAAMThickness, setCAMMass, setCAMThickness, -} from './stackSlice'; +} from "./stackSlice"; -import styles from './Stack.module.css'; -import './../../App.css' +import styles from "./Stack.module.css"; +import "./../../App.css"; export function Electrode() { const Area = useSelector(selectArea); @@ -41,407 +41,406 @@ export function Electrode() { const CCCMass = useSelector(selectCCCMass); const ACCMass = useSelector(selectACCMass); const ACCThickness = useSelector(selectACCThickness); - const TotalCathodeThickness = useSelector(selectTotalCathodeThickness) - const TotalAnodeThickness = useSelector(selectTotalAnodeThickness) - const LowRateCapacity = useSelector(selectLowRateCapacity) - const Stack = useSelector(selectStack) + const TotalCathodeThickness = useSelector(selectTotalCathodeThickness); + const TotalAnodeThickness = useSelector(selectTotalAnodeThickness); + const LowRateCapacity = useSelector(selectLowRateCapacity); + const Stack = useSelector(selectStack); const dispatch = useDispatch(); useEffect(() => { - syncElectrode()}, [Stack]) - - function syncElectrode(){ - var LRCap = Stack.npRatio * LowRateCapacity - if (ActiveElectrode === 'cathode'){ - var anodeAMMass = LRCap / (Stack.anode.activeMaterial.theoreticSpecificCapacity*1e3) - var anodeBMass = Stack.anode.binder.massPercentDrySlurry * anodeAMMass / (1 - Stack.anode.binder.massPercentDrySlurry - Stack.anode.conductiveAdditive.massPercentDrySlurry) - var anodeCAMass = Stack.anode.conductiveAdditive.massPercentDrySlurry * anodeAMMass / (1 - Stack.anode.binder.massPercentDrySlurry - Stack.anode.conductiveAdditive.massPercentDrySlurry) - dispatch(setAAMMass(anodeAMMass)) - - var anodeAMThickness = anodeAMMass *1e6 / (Stack.anode.activeMaterial.density * (Area * (1e-3)**2)) - var anodeBThickness = anodeBMass*1e6 / (Stack.anode.binder.density * (Area * (1e-3)**2)) - var anodeCAThickness = anodeCAMass*1e6 / (Stack.anode.conductiveAdditive.density * (Area * (1e-3)**2)) - dispatch(setAAMThickness(anodeAMThickness)) - - var anodeThickness = (anodeAMThickness + anodeBThickness + anodeCAThickness) / (1 - Stack.anode.porosity) - var anodeEThickness = Stack.anode.porosity * anodeThickness - var anodeEMass = anodeEThickness*1e-6 * Stack.anode.electrolyte.density * (Area * (1e-3)**2) - var anodeMass = Number(anodeAMMass+anodeBMass+anodeCAMass+anodeEMass) - - dispatch(setAThickness(anodeThickness)) - dispatch(setTotalAnodeMass(anodeMass+ACCMass)) - dispatch(setTotalAnodeThickness(anodeThickness+ACCThickness)) - } - else if(ActiveElectrode === 'anode'){ - var cathodeAMMass = LRCap / (Stack.cathode.activeMaterial.theoreticSpecificCapacity*1e3) - var cathodeBMass = Stack.cathode.binder.massPercentDrySlurry * cathodeAMMass / (1 - Stack.cathode.binder.massPercentDrySlurry - Stack.cathode.conductiveAdditive.massPercentDrySlurry) - var cathodeCAMass = Stack.cathode.conductiveAdditive.massPercentDrySlurry * cathodeAMMass / (1 - Stack.cathode.binder.massPercentDrySlurry - Stack.cathode.conductiveAdditive.massPercentDrySlurry) - dispatch(setCAMMass(cathodeCAMass)) - - var cathodeAMThickness = cathodeAMMass *1e6 / (Stack.cathode.activeMaterial.density * (Area * (1e-3)**2)) - var cathodeBThickness = cathodeBMass*1e6 / (Stack.cathode.binder.density * (Area * (1e-3)**2)) - var cathodeCAThickness = cathodeCAMass*1e6 / (Stack.cathode.conductiveAdditive.density *(Area * (1e-3)**2)) - dispatch(setCAMThickness(cathodeAMThickness)) - - var cathodeThickness = (cathodeAMThickness + cathodeBThickness + cathodeCAThickness) / (1 - Stack.cathode.porosity) - var cathodeEThickness = Stack.cathode.porosity * cathodeThickness - var cathodeEMass = cathodeEThickness*1e-6 * Stack.cathode.electrolyte.density * (Area * (1e-3)**2) - var cathodeMass = Number(cathodeAMMass+cathodeBMass+cathodeCAMass+cathodeEMass) - - dispatch(setCThickness(cathodeThickness)) - dispatch(setTotalCathodeMass(cathodeMass+CCCMass)) - dispatch(setTotalCathodeThickness(cathodeThickness+CCCThickness)) + syncElectrode(); + }, [Stack]); + + function syncElectrode() { + var LRCap = Stack.npRatio * LowRateCapacity; + if (ActiveElectrode === "cathode") { + var anodeAMMass = + LRCap / (Stack.anode.activeMaterial.theoreticSpecificCapacity * 1e3); + var anodeBMass = + (Stack.anode.binder.massPercentDrySlurry * anodeAMMass) / + (1 - + Stack.anode.binder.massPercentDrySlurry - + Stack.anode.conductiveAdditive.massPercentDrySlurry); + var anodeCAMass = + (Stack.anode.conductiveAdditive.massPercentDrySlurry * anodeAMMass) / + (1 - + Stack.anode.binder.massPercentDrySlurry - + Stack.anode.conductiveAdditive.massPercentDrySlurry); + dispatch(setAAMMass(anodeAMMass)); + + var anodeAMThickness = + (anodeAMMass * 1e6) / + (Stack.anode.activeMaterial.density * (Area * 1e-3 ** 2)); + var anodeBThickness = + (anodeBMass * 1e6) / (Stack.anode.binder.density * (Area * 1e-3 ** 2)); + var anodeCAThickness = + (anodeCAMass * 1e6) / + (Stack.anode.conductiveAdditive.density * (Area * 1e-3 ** 2)); + dispatch(setAAMThickness(anodeAMThickness)); + + var anodeThickness = + (anodeAMThickness + anodeBThickness + anodeCAThickness) / + (1 - Stack.anode.porosity); + var anodeEThickness = Stack.anode.porosity * anodeThickness; + var anodeEMass = + anodeEThickness * + 1e-6 * + Stack.anode.electrolyte.density * + (Area * 1e-3 ** 2); + var anodeMass = Number( + anodeAMMass + anodeBMass + anodeCAMass + anodeEMass + ); + + dispatch(setAThickness(anodeThickness)); + dispatch(setTotalAnodeMass(anodeMass + ACCMass)); + dispatch(setTotalAnodeThickness(anodeThickness + ACCThickness)); + } else if (ActiveElectrode === "anode") { + var cathodeAMMass = + LRCap / (Stack.cathode.activeMaterial.theoreticSpecificCapacity * 1e3); + var cathodeBMass = + (Stack.cathode.binder.massPercentDrySlurry * cathodeAMMass) / + (1 - + Stack.cathode.binder.massPercentDrySlurry - + Stack.cathode.conductiveAdditive.massPercentDrySlurry); + var cathodeCAMass = + (Stack.cathode.conductiveAdditive.massPercentDrySlurry * + cathodeAMMass) / + (1 - + Stack.cathode.binder.massPercentDrySlurry - + Stack.cathode.conductiveAdditive.massPercentDrySlurry); + dispatch(setCAMMass(cathodeCAMass)); + + var cathodeAMThickness = + (cathodeAMMass * 1e6) / + (Stack.cathode.activeMaterial.density * (Area * 1e-3 ** 2)); + var cathodeBThickness = + (cathodeBMass * 1e6) / + (Stack.cathode.binder.density * (Area * 1e-3 ** 2)); + var cathodeCAThickness = + (cathodeCAMass * 1e6) / + (Stack.cathode.conductiveAdditive.density * (Area * 1e-3 ** 2)); + dispatch(setCAMThickness(cathodeAMThickness)); + + var cathodeThickness = + (cathodeAMThickness + cathodeBThickness + cathodeCAThickness) / + (1 - Stack.cathode.porosity); + var cathodeEThickness = Stack.cathode.porosity * cathodeThickness; + var cathodeEMass = + cathodeEThickness * + 1e-6 * + Stack.cathode.electrolyte.density * + (Area * 1e-3 ** 2); + var cathodeMass = Number( + cathodeAMMass + cathodeBMass + cathodeCAMass + cathodeEMass + ); + + dispatch(setCThickness(cathodeThickness)); + dispatch(setTotalCathodeMass(cathodeMass + CCCMass)); + dispatch(setTotalCathodeThickness(cathodeThickness + CCCThickness)); } } + if (ActiveElectrode === "none") { + return ( +
+
+
+
+
+

Choose your cell type

+
+
- if(ActiveElectrode === 'none'){ - return( -
-
-
-
-

- Choose your cell type -

-
-
- - -
-
- -
-
-
+
+ -
-
-
+
+ -
+
-
-
-
- ) +
+
+ + ); } -// CATHODE HALF CELL - - else if(ActiveElectrode === 'cathode'){ - return( -
-
-
+ // CATHODE HALF CELL + else if (ActiveElectrode === "cathode") { + return ( +
-

- Cathode -

-
+
+
+

Cathode

+
-
-

- Area / mm2 -

- dispatch(setArea(e.target.value))} - value={String(valueReturn(Area))} - > - -
+
+

+ Area / mm2 +

+ dispatch(setArea(e.target.value))} + value={String(valueReturn(Area))} + > +
-
-

- Current collector thickness / µm -

- dispatch(setCCCThickness((e.target.value)))} - value={String(valueReturn(CCCThickness))} - onBlur={(e) => validate(e)} - > - -
-
-

- Current collector mass / g -

- dispatch(setCCCMass(e.target.value))} - onBlur={(e) => validate(e)} - > - +

Current collector thickness / µm

+ dispatch(setCCCThickness(e.target.value))} + value={String(valueReturn(CCCThickness))} + onBlur={(e) => validate(e)} + >
-

- Cathode + current collector thickness / µm -

- dispatch(setTotalCathodeThickness(e.target.value))} - value={(valueReturn(TotalCathodeThickness))} - onBlur={(e) => validate(e)} - > - -
+

Current collector mass / g

+ dispatch(setCCCMass(e.target.value))} + onBlur={(e) => validate(e)} + > +
- +
+

+ Cathode + current collector thickness / µm +

+ + dispatch(setTotalCathodeThickness(e.target.value)) + } + value={valueReturn(TotalCathodeThickness)} + onBlur={(e) => validate(e)} + > +
- -
-
+ +
+ + ); + } - ) -} - -// ANODE HALF CELL - -else if(ActiveElectrode === 'anode'){ - return( -
-
-
+ // ANODE HALF CELL + else if (ActiveElectrode === "anode") { + return ( +
-

- Anode -

-
- -
-

- Area / mm2 -

- dispatch(setArea(e.target.value))} - value={String(valueReturn(Area))} - > - +
+
+

Anode

-

- Current collector thickness / µm -

- dispatch(setACCThickness((e.target.value)))} - value={String(valueReturn(ACCThickness))} - onBlur={(e) => validate(e)} - > - -
+

+ Area / mm2 +

+ dispatch(setArea(e.target.value))} + value={String(valueReturn(Area))} + > +
-
-

- Current collector mass / g -

- dispatch(setACCMass(e.target.value))} - onBlur={(e) => validate(e)} - > - +

Current collector thickness / µm

+ dispatch(setACCThickness(e.target.value))} + value={String(valueReturn(ACCThickness))} + onBlur={(e) => validate(e)} + >
-

- Anode + current collector thickness / µm -

- dispatch(setTotalAnodeThickness(e.target.value))} - value={(valueReturn(TotalAnodeThickness))} - onBlur={(e) => validate(e)} - > - -
- - +

Current collector mass / g

+ dispatch(setACCMass(e.target.value))} + onBlur={(e) => validate(e)} + > +
-
-
+
+

+ Anode + current collector thickness / µm +

+ + dispatch(setTotalAnodeThickness(e.target.value)) + } + value={valueReturn(TotalAnodeThickness)} + onBlur={(e) => validate(e)} + > +
- + +
+ + ); + } - ) -} - -// FULL CELL - - else if(ActiveElectrode === 'both'){ - return( -
-
-
+ // FULL CELL + else if (ActiveElectrode === "both") { + return ( +
+
+
-

- Cathode -

+

Cathode

-

+

Area / mm2 -

- + dispatch(setArea(e.target.value))} value={String(valueReturn(Area))} - > - + >
-

- Current collector thickness / µm -

- Current collector thickness / µm

+ dispatch(setCCCThickness((e.target.value)))} + onChange={(e) => dispatch(setCCCThickness(e.target.value))} value={String(valueReturn(CCCThickness))} onBlur={(e) => validate(e)} - > - + >
- -
-

- Current collector mass / g -

- +

Current collector mass / g

+ dispatch(setCCCMass(e.target.value))} onBlur={(e) => validate(e)} - > - -
+ > +
-
-

+

+

Cathode + current collector thickness / µm -

- + dispatch(setTotalCathodeThickness(e.target.value))} - value={(valueReturn(TotalCathodeThickness))} + onChange={(e) => + dispatch(setTotalCathodeThickness(e.target.value)) + } + value={valueReturn(TotalCathodeThickness)} onBlur={(e) => validate(e)} - > - + >
- - -
+ +
- - -
-
+
+
-

- Anode -

+

Anode

-

+

Area / mm2 -

- + dispatch(setArea(e.target.value))} value={String(valueReturn(Area))} - > - -
- -
-

- Current collector thickness / µm -

- +
+ +
+

Current collector thickness / µm

+ dispatch(setACCThickness((e.target.value)))} + onChange={(e) => dispatch(setACCThickness(e.target.value))} value={String(valueReturn(ACCThickness))} onBlur={(e) => validate(e)} - > - + >
- -
-

- Current collector mass / g -

- +

Current collector mass / g

+ dispatch(setACCMass(e.target.value))} onBlur={(e) => validate(e)} - > - -
+ > +
-
-

+

+

Anode + current collector thickness / µm -

- + dispatch(setTotalAnodeThickness(e.target.value))} - value={(valueReturn(TotalAnodeThickness))} + onChange={(e) => + dispatch(setTotalAnodeThickness(e.target.value)) + } + value={valueReturn(TotalAnodeThickness)} onBlur={(e) => validate(e)} - > - + >
- - -
+ +
- - -
- - ) +
+ ); } - } From 693c21de38e4bad692b81ed8a0a46b9847c7cbb6 Mon Sep 17 00:00:00 2001 From: isaacsquires Date: Tue, 21 Feb 2023 18:43:18 +0000 Subject: [PATCH 2/6] refactor electrode into component --- src/features/cell/Cell.module.css | 54 ++-- src/features/stack/Electrode.js | 250 +----------------- src/features/stack/Stack.module.css | 58 ++-- src/features/stack/components/electrodeBox.js | 121 +++++++++ src/features/stack/components/reset.js | 20 ++ 5 files changed, 204 insertions(+), 299 deletions(-) create mode 100644 src/features/stack/components/electrodeBox.js create mode 100644 src/features/stack/components/reset.js diff --git a/src/features/cell/Cell.module.css b/src/features/cell/Cell.module.css index 8ac08f0..af51c9a 100644 --- a/src/features/cell/Cell.module.css +++ b/src/features/cell/Cell.module.css @@ -1,37 +1,35 @@ -.resultsSection{ - background-color: var(--blue); - color: var(--black); - margin-bottom: 20px; - border: 2px solid transparent; - border-radius: 5px; - align-self: center; - width: auto; - margin-left: auto; - margin-right: auto; +.resultsSection { + background-color: var(--blue); + color: var(--black); + margin-bottom: 20px; + border: 2px solid transparent; + border-radius: 5px; + align-self: center; + width: auto; + margin-left: auto; + margin-right: auto; } -.title{ - font-size: 20px; - margin-top: 5px; - margin-bottom: 5px; +.title { + font-size: 20px; + margin-top: 5px; + margin-bottom: 5px; } -.subtitle{ - font-size: 16px; - margin-top: 5px; - margin-bottom: 5px; +.subtitle { + font-size: 16px; + margin-top: 5px; + margin-bottom: 5px; } -.resultTitle{ - font-size: 18px; +.resultTitle { + font-size: 18px; } -.result{ - font-size: 18px; - background-color: rgba(255, 255, 255, 0.149); - border: 2px solid transparent; - border-radius: 5px; - margin-top: 5px; +.result { + font-size: 18px; + background-color: rgba(255, 255, 255, 0.149); + border: 2px solid transparent; + border-radius: 5px; + margin-top: 5px; } - - diff --git a/src/features/stack/Electrode.js b/src/features/stack/Electrode.js index de8b239..7646f03 100644 --- a/src/features/stack/Electrode.js +++ b/src/features/stack/Electrode.js @@ -33,6 +33,7 @@ import { import styles from "./Stack.module.css"; import "./../../App.css"; +import { ElectrodeBox } from "./components/electrodeBox"; export function Electrode() { const Area = useSelector(selectArea); @@ -184,137 +185,8 @@ export function Electrode() { } // CATHODE HALF CELL - else if (ActiveElectrode === "cathode") { - return ( -
-
-
-
-

Cathode

-
- -
-

- Area / mm2 -

- dispatch(setArea(e.target.value))} - value={String(valueReturn(Area))} - > -
- -
-

Current collector thickness / µm

- dispatch(setCCCThickness(e.target.value))} - value={String(valueReturn(CCCThickness))} - onBlur={(e) => validate(e)} - > -
- -
-

Current collector mass / g

- dispatch(setCCCMass(e.target.value))} - onBlur={(e) => validate(e)} - > -
- -
-

- Cathode + current collector thickness / µm -

- - dispatch(setTotalCathodeThickness(e.target.value)) - } - value={valueReturn(TotalCathodeThickness)} - onBlur={(e) => validate(e)} - > -
- - -
-
-
- ); - } - - // ANODE HALF CELL - else if (ActiveElectrode === "anode") { - return ( -
-
-
-
-

Anode

-
- -
-

- Area / mm2 -

- dispatch(setArea(e.target.value))} - value={String(valueReturn(Area))} - > -
- -
-

Current collector thickness / µm

- dispatch(setACCThickness(e.target.value))} - value={String(valueReturn(ACCThickness))} - onBlur={(e) => validate(e)} - > -
- -
-

Current collector mass / g

- dispatch(setACCMass(e.target.value))} - onBlur={(e) => validate(e)} - > -
- -
-

- Anode + current collector thickness / µm -

- - dispatch(setTotalAnodeThickness(e.target.value)) - } - value={valueReturn(TotalAnodeThickness)} - onBlur={(e) => validate(e)} - > -
- - -
-
-
- ); + else if (ActiveElectrode === "cathode" || ActiveElectrode === "anode") { + return ; } // FULL CELL @@ -322,123 +194,11 @@ export function Electrode() { return (
-
-
-

Cathode

-
- -
-

- Area / mm2 -

- dispatch(setArea(e.target.value))} - value={String(valueReturn(Area))} - > -
- -
-

Current collector thickness / µm

- dispatch(setCCCThickness(e.target.value))} - value={String(valueReturn(CCCThickness))} - onBlur={(e) => validate(e)} - > -
- -
-

Current collector mass / g

- dispatch(setCCCMass(e.target.value))} - onBlur={(e) => validate(e)} - > -
- -
-

- Cathode + current collector thickness / µm -

- - dispatch(setTotalCathodeThickness(e.target.value)) - } - value={valueReturn(TotalCathodeThickness)} - onBlur={(e) => validate(e)} - > -
- - -
+
-
-
-

Anode

-
- -
-

- Area / mm2 -

- dispatch(setArea(e.target.value))} - value={String(valueReturn(Area))} - > -
- -
-

Current collector thickness / µm

- dispatch(setACCThickness(e.target.value))} - value={String(valueReturn(ACCThickness))} - onBlur={(e) => validate(e)} - > -
- -
-

Current collector mass / g

- dispatch(setACCMass(e.target.value))} - onBlur={(e) => validate(e)} - > -
- -
-

- Anode + current collector thickness / µm -

- - dispatch(setTotalAnodeThickness(e.target.value)) - } - value={valueReturn(TotalAnodeThickness)} - onBlur={(e) => validate(e)} - > -
- - -
+
); diff --git a/src/features/stack/Stack.module.css b/src/features/stack/Stack.module.css index 032bad1..3d488d8 100644 --- a/src/features/stack/Stack.module.css +++ b/src/features/stack/Stack.module.css @@ -1,15 +1,15 @@ -.electrodeSection{ - background-color: var(--blue); - margin-bottom: 20px; - border: 2px solid transparent; - border-radius: 5px; - align-self: center; - width: auto; - margin-left: auto; - margin-right: auto; -} - -.subElectrodeSection{ +.electrodeSection { + background-color: var(--blue); + margin-bottom: 20px; + border: 2px solid transparent; + border-radius: 5px; + align-self: center; + width: auto; + margin-left: auto; + margin-right: auto; +} + +.subElectrodeSection { background-color: rgba(98, 42, 42, 0.1); border-radius: 5px; display: none; @@ -20,16 +20,16 @@ margin-top: 20px; } -.moreBtn{ +.moreBtn { background-color: rgba(42, 98, 67, 0.1); border-radius: 5px; } -.moreBtn:hover{ +.moreBtn:hover { cursor: pointer; } -.cathode{ +.cathode { background-color: var(--blue); border-radius: 5px; grid-column: span 6; @@ -41,7 +41,7 @@ margin-right: auto; } -.anode{ +.anode { background-color: var(--blue); border-radius: 5px; grid-column: span 6; @@ -53,7 +53,7 @@ margin-right: auto; } -.selector{ +.selector { background-color: var(--blue); border-radius: 5px; grid-column: span 6; @@ -65,7 +65,7 @@ margin-right: auto; } -.subElectrodeBox{ +.subElectrodeBox { background-color: rgba(61, 54, 189, 0.1); border-radius: 5px; grid-column: span 12; @@ -75,32 +75,32 @@ grid-template-rows: 1fr; } -.subElectrodeTitle{ +.subElectrodeTitle { font-size: 10pt; margin-top: 5px; font-weight: 800; } -.subElectrodeSubTitle{ +.subElectrodeSubTitle { font-size: 10pt; margin-top: 5px; font-weight: 600; } -.subElectrodeData{ +.subElectrodeData { font-size: 10pt; text-align: left; margin-top: 2px; margin-bottom: 2px; } -.title{ +.title { font-size: 18px; padding-left: 16px; padding-right: 16px; } -.button{ +.button { appearance: none; background: none; font-size: 22px; @@ -112,8 +112,10 @@ background-color: rgba(255, 255, 255, 0.5); border-radius: 5px; transition: all 0.15s; + margin-right: auto; + margin-left: auto; } -.button:hover{ +.button:hover { background-color: rgba(255, 255, 255, 0.55); } @@ -121,7 +123,11 @@ background-color: rgba(0, 0, 0, 0.1); } -.syncButton{ +.smallButton { + font-size: 18px; +} + +.syncButton { appearance: none; background: none; font-size: 14px; @@ -134,7 +140,7 @@ border-radius: 5px; transition: all 0.15s; } -.syncButton:hover{ +.syncButton:hover { border: 2px solid rgba(0, 0, 0, 0.1); } diff --git a/src/features/stack/components/electrodeBox.js b/src/features/stack/components/electrodeBox.js new file mode 100644 index 0000000..52e440e --- /dev/null +++ b/src/features/stack/components/electrodeBox.js @@ -0,0 +1,121 @@ +import { React } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import styles from "./../Stack.module.css"; +import { ResetElectrodes } from "./reset"; +import { valueReturn, validate } from "../stackFunctions"; +import { WetMassBox } from "./wetMassBox"; +import { + setAThickness, + setCThickness, + setArea, + selectArea, + selectActiveElectrode, + setActiveElectrode, + setCCCThickness, + selectCCCThickness, + selectCCCMass, + setCCCMass, + selectACCMass, + setACCMass, + setTotalCathodeMass, + setTotalCathodeThickness, + selectTotalCathodeThickness, + setTotalAnodeMass, + setTotalAnodeThickness, + selectTotalAnodeThickness, + selectLowRateCapacity, + selectStack, + selectACCThickness, + setACCThickness, + setAAMMass, + setAAMThickness, + setCAMMass, + setCAMThickness, +} from "./../stackSlice"; + +export function ElectrodeBox(props) { + const ActiveElectrode = props.electrode; + const Area = useSelector(selectArea); + const CCCThickness = useSelector(selectCCCThickness); + const CCCMass = useSelector(selectCCCMass); + const ACCMass = useSelector(selectACCMass); + const ACCThickness = useSelector(selectACCThickness); + const TotalCathodeThickness = useSelector(selectTotalCathodeThickness); + const TotalAnodeThickness = useSelector(selectTotalAnodeThickness); + const setCCThickness = + ActiveElectrode === "cathode" ? setCCCThickness : setACCThickness; + const CCThickness = + ActiveElectrode === "cathode" ? CCCThickness : ACCThickness; + const setCCMass = ActiveElectrode === "cathode" ? setCCCMass : setACCMass; + const CCMass = ActiveElectrode === "cathode" ? CCCMass : ACCMass; + const setTotalThickness = + ActiveElectrode === "cathode" + ? setTotalCathodeThickness + : setTotalAnodeThickness; + const TotalThickness = + ActiveElectrode === "cathode" ? TotalCathodeThickness : TotalAnodeThickness; + const dispatch = useDispatch(); + return ( +
+
+
+
+

{ActiveElectrode}

+
+ +
+

+ Area / mm2 +

+ dispatch(setArea(e.target.value))} + value={String(valueReturn(Area))} + > +
+ +
+

Current collector thickness / µm

+ dispatch(setCCThickness(e.target.value))} + value={String(valueReturn(CCThickness))} + onBlur={(e) => validate(e)} + > +
+ +
+

Current collector mass / g

+ dispatch(setCCMass(e.target.value))} + onBlur={(e) => validate(e)} + > +
+ +
+

+ {ActiveElectrode} + current collector thickness / µm +

+ dispatch(setTotalThickness(e.target.value))} + value={valueReturn(TotalThickness)} + onBlur={(e) => validate(e)} + > +
+ + + + +
+
+
+ ); +} diff --git a/src/features/stack/components/reset.js b/src/features/stack/components/reset.js new file mode 100644 index 0000000..0481ed3 --- /dev/null +++ b/src/features/stack/components/reset.js @@ -0,0 +1,20 @@ +import { React } from "react"; +import { useDispatch } from "react-redux"; +import styles from "./../Stack.module.css"; +import { setActiveElectrode } from "./../stackSlice"; + +export function ResetElectrodes() { + const dispatch = useDispatch(); + return ( +
+
+ +
+
+ ); +} From 1522d31e7f8fe6b7f2a1f6c140037c2c1c7e8e64 Mon Sep 17 00:00:00 2001 From: isaacsquires Date: Tue, 21 Feb 2023 18:45:58 +0000 Subject: [PATCH 3/6] dry mass as default --- src/features/stack/components/electrodeBox.js | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/features/stack/components/electrodeBox.js b/src/features/stack/components/electrodeBox.js index 52e440e..62fa4a4 100644 --- a/src/features/stack/components/electrodeBox.js +++ b/src/features/stack/components/electrodeBox.js @@ -31,6 +31,10 @@ import { setAAMThickness, setCAMMass, setCAMThickness, + setDryCathodeMass, + setDryAnodeMass, + selectDryCathodeMass, + selectDryAnodeMass, } from "./../stackSlice"; export function ElectrodeBox(props) { @@ -42,6 +46,8 @@ export function ElectrodeBox(props) { const ACCThickness = useSelector(selectACCThickness); const TotalCathodeThickness = useSelector(selectTotalCathodeThickness); const TotalAnodeThickness = useSelector(selectTotalAnodeThickness); + const DryCathodeMass = useSelector(selectDryCathodeMass); + const DryAnodeMass = useSelector(selectDryAnodeMass); const setCCThickness = ActiveElectrode === "cathode" ? setCCCThickness : setACCThickness; const CCThickness = @@ -54,6 +60,9 @@ export function ElectrodeBox(props) { : setTotalAnodeThickness; const TotalThickness = ActiveElectrode === "cathode" ? TotalCathodeThickness : TotalAnodeThickness; + const setDryMass = + ActiveElectrode === "cathode" ? setDryCathodeMass : setDryAnodeMass; + const DryMass = ActiveElectrode === "cathode" ? DryCathodeMass : DryAnodeMass; const dispatch = useDispatch(); return (
@@ -111,6 +120,19 @@ export function ElectrodeBox(props) { >
+
+

+ {ActiveElectrode} + current collector mass / g +

+ dispatch(setDryMass(e.target.value))} + value={valueReturn(DryMass)} + onBlur={(e) => validate(e)} + > +
+ From 8cc1fcb7cbf4c1df854b3b6aafef1d5c3f3ac0aa Mon Sep 17 00:00:00 2001 From: isaacsquires Date: Wed, 22 Feb 2023 10:48:16 +0000 Subject: [PATCH 4/6] cleaning up --- src/features/stack/Electrode.js | 2 +- src/features/stack/components/electrodeBox.js | 12 - src/features/stack/components/wetMassBox.js | 216 ++++++++++-------- 3 files changed, 119 insertions(+), 111 deletions(-) diff --git a/src/features/stack/Electrode.js b/src/features/stack/Electrode.js index 7646f03..237c9df 100644 --- a/src/features/stack/Electrode.js +++ b/src/features/stack/Electrode.js @@ -184,7 +184,7 @@ export function Electrode() { ); } - // CATHODE HALF CELL + // HALF CELL else if (ActiveElectrode === "cathode" || ActiveElectrode === "anode") { return ; } diff --git a/src/features/stack/components/electrodeBox.js b/src/features/stack/components/electrodeBox.js index 62fa4a4..101b12a 100644 --- a/src/features/stack/components/electrodeBox.js +++ b/src/features/stack/components/electrodeBox.js @@ -5,32 +5,20 @@ import { ResetElectrodes } from "./reset"; import { valueReturn, validate } from "../stackFunctions"; import { WetMassBox } from "./wetMassBox"; import { - setAThickness, - setCThickness, setArea, selectArea, - selectActiveElectrode, - setActiveElectrode, setCCCThickness, selectCCCThickness, selectCCCMass, setCCCMass, selectACCMass, setACCMass, - setTotalCathodeMass, setTotalCathodeThickness, selectTotalCathodeThickness, - setTotalAnodeMass, setTotalAnodeThickness, selectTotalAnodeThickness, - selectLowRateCapacity, - selectStack, selectACCThickness, setACCThickness, - setAAMMass, - setAAMThickness, - setCAMMass, - setCAMThickness, setDryCathodeMass, setDryAnodeMass, selectDryCathodeMass, diff --git a/src/features/stack/components/wetMassBox.js b/src/features/stack/components/wetMassBox.js index 9562cfe..a28f4b5 100644 --- a/src/features/stack/components/wetMassBox.js +++ b/src/features/stack/components/wetMassBox.js @@ -1,117 +1,137 @@ -import { React} from 'react'; -import { useSelector, useDispatch } from 'react-redux'; -import styles from './../Stack.module.css'; -import {valueReturn, validate} from './../stackFunctions' +import { React } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import styles from "./../Stack.module.css"; +import { valueReturn, validate } from "./../stackFunctions"; import { - selectTotalCathodeMass, - selectTotalAnodeMass, - selectWetMassMode, - selectDryCathodeMass, - selectDryAnodeMass, - selectCPorosity, - selectAPorosity, - setAPorosity, - setTotalAnodeMass, - setTotalCathodeMass, - setWetMassMode, - setDryAnodeMass, - setDryCathodeMass, - setCPorosity, + selectTotalCathodeMass, + selectTotalAnodeMass, + selectWetMassMode, + selectDryCathodeMass, + selectDryAnodeMass, + selectCPorosity, + selectAPorosity, + setAPorosity, + setTotalAnodeMass, + setTotalCathodeMass, + setWetMassMode, + setDryAnodeMass, + setDryCathodeMass, + setCPorosity, +} from "./../stackSlice"; -} from './../stackSlice' +export function WetMassBox(electrode) { + electrode = electrode.electrode; + const TotalCathodeMass = useSelector(selectTotalCathodeMass); + const TotalAnodeMass = useSelector(selectTotalAnodeMass); + const WetMassMode = useSelector(selectWetMassMode); + const DryCathodeMass = useSelector(selectDryCathodeMass); + const DryAnodeMass = useSelector(selectDryAnodeMass); + const CPorosity = useSelector(selectCPorosity); + const APorosity = useSelector(selectAPorosity); + const dispatch = useDispatch(); - - export function WetMassBox (electrode){ - electrode = electrode.electrode - const TotalCathodeMass = useSelector(selectTotalCathodeMass) - const TotalAnodeMass = useSelector(selectTotalAnodeMass) - const WetMassMode = useSelector(selectWetMassMode) - const DryCathodeMass = useSelector(selectDryCathodeMass) - const DryAnodeMass = useSelector(selectDryAnodeMass) - const CPorosity = useSelector(selectCPorosity) - const APorosity = useSelector(selectAPorosity) - const dispatch = useDispatch(); - - function wetMassDropdown(electrode){ - return( -
-
{WetMassMode+' '+electrode+' + current collector mass / g'}
-
- {['Wet', 'Dry'].map(l => { - return( -
dispatch(setWetMassMode(l))}> - {l} -
- ) - }) - } - -
+ function wetMassDropdown(electrode) { + return ( +
+
+ {WetMassMode + " " + electrode + " + current collector mass / g"}
- ) - } +
+ {["Wet", "Porosity"].map((l) => { + return ( +
dispatch(setWetMassMode(l))} + > + {l} +
+ ); + })} +
+
+ ); + } - if (electrode==='cathode'){ - return ( -
-
- {wetMassDropdown(electrode)} -
-
- +
{wetMassDropdown(electrode)}
+
+ dispatch(WetMassMode==='Wet' ? setTotalCathodeMass(e.target.value) : setDryCathodeMass(e.target.value))} + value={ + WetMassMode === "Wet" + ? String(valueReturn(TotalCathodeMass)) + : String(valueReturn(DryCathodeMass)) + } + onChange={(e) => + dispatch( + WetMassMode === "Wet" + ? setTotalCathodeMass(e.target.value) + : setDryCathodeMass(e.target.value) + ) + } onBlur={(e) => validate(e)} - > - -
-
-
+
+ - + dispatch(setCPorosity(e.target.value))} - hidden={WetMassMode==='Wet' ? true : ''}> - -
-
- ) - } - else if (electrode==='anode'){ - return ( -
-
- - {wetMassDropdown(electrode)} -
-
- +
+
+ ); + } else if (electrode === "anode") { + return ( +
+
{wetMassDropdown(electrode)}
+
+ dispatch(WetMassMode==='Wet' ? setTotalAnodeMass(e.target.value) : setDryAnodeMass(e.target.value))} + value={ + WetMassMode === "Wet" + ? String(valueReturn(TotalAnodeMass)) + : String(valueReturn(DryAnodeMass)) + } + onChange={(e) => + dispatch( + WetMassMode === "Wet" + ? setTotalAnodeMass(e.target.value) + : setDryAnodeMass(e.target.value) + ) + } onBlur={(e) => validate(e)} - > - -
-
-
+
+ - + dispatch(setAPorosity(e.target.value))} - hidden={WetMassMode==='Wet' ? true : ''}> - -
-
- ) - } - } \ No newline at end of file + hidden={WetMassMode === "Wet" ? true : ""} + > +
+
+ ); + } +} From e69d91cdfa4b0d46fa1cfcb943c9813102303c17 Mon Sep 17 00:00:00 2001 From: isaacsquires Date: Wed, 22 Feb 2023 14:59:34 +0000 Subject: [PATCH 5/6] Dry electrode as optional, porosity shown --- src/App.css | 102 +++--- src/features/stack/Electrode.js | 38 +-- src/features/stack/Stack.module.css | 15 + src/features/stack/components/wetMassBox.js | 175 ++++------- src/features/stack/stackSlice.js | 324 +++++++++++--------- 5 files changed, 330 insertions(+), 324 deletions(-) diff --git a/src/App.css b/src/App.css index 7068e2d..81e5986 100644 --- a/src/App.css +++ b/src/App.css @@ -7,13 +7,13 @@ pointer-events: none; } -.title{ +.title { margin-top: 40px; margin-bottom: 40px; font-size: 40px; } -.subtitle{ +.subtitle { font-size: 20px; margin-bottom: 40px; } @@ -62,14 +62,13 @@ height: 100%; /* grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); */ - } -.invalid{ +.invalid { color: red; } -[class^="box-row"]{ +[class^="box-row"] { grid-column: span 12; grid-row: span 1; padding-bottom: 10px; @@ -78,80 +77,79 @@ align-items: start; } -.box-1{ - grid-column : span 1; - } +.box-1 { + grid-column: span 1; +} -.box-2{ - grid-column : span 2; - } -.box-3{ - grid-column : span 3; - } +.box-2 { + grid-column: span 2; +} +.box-3 { + grid-column: span 3; +} -.box-4{ - grid-column : span 4; - } +.box-4 { + grid-column: span 4; +} -.box-6{ - grid-column : span 6; - } +.box-6 { + grid-column: span 6; +} -.box-8{ - grid-column : span 8; - } +.box-8 { + grid-column: span 8; +} -.box-12{ - grid-column : span 12; - } +.box-12 { + grid-column: span 12; +} -.box-row-3{ +.box-row-3 { grid-row: span 3; } -.box-row-4{ +.box-row-4 { grid-row: span 4; } -.box-12-row-3{ +.box-12-row-3 { grid-column: span 12; grid-row: span 3; } -.box-12-row-4{ +.box-12-row-4 { grid-column: span 12; grid-row: span 4; } -.box-2-offset-1{ - grid-column : 2 / span 2; - } +.box-2-offset-1 { + grid-column: 2 / span 2; +} -.box-6-offset-3{ +.box-6-offset-3 { grid-column: 4 / span 6; } -.box-4-offset-4{ +.box-4-offset-4 { grid-column: 5 / span 4; } -.box-8-offset-2{ +.box-8-offset-2 { grid-column: 3 / span 8; } - -.box-row-12{ +.box-row-12 { grid-template-rows: repeat(12, 1fr); } -.sticky{ +.sticky { position: sticky !important; top: 0 !important; position: -webkit-sticky; height: auto !important; } -.dropdown{ +.dropdown { font-size: 18px; background-color: rgba(251, 251, 251, 0.5); border-radius: 5px; @@ -162,24 +160,23 @@ margin-left: auto; margin-right: auto; } -.dropdown:hover{ +.dropdown:hover { cursor: pointer; background-color: rgba(251, 251, 251, 0.55); } -.dropdown:focus > .dropdownItems{ - display:block +.dropdown:focus > .dropdownItems { + display: block; } - -.dropdownItems{ - display:none; +.dropdownItems { + display: none; width: auto; margin-left: auto; margin-right: auto; } -.dropdownItem{ +.dropdownItem { background-color: rgba(251, 251, 251, 0.5); border-radius: 5px; margin-top: 5px; @@ -188,19 +185,18 @@ margin-right: auto; } -.dropdownItem:hover{ +.dropdownItem:hover { background-color: rgba(251, 251, 251, 0.7); border-radius: 5px; margin-top: 5px; } -@media only screen and (max-width: 1200px) { - - [class^="box-"]{ +@media only screen and (max-width: 1400px) { + [class^="box-"] { grid-column: span 12; } } -.show{ +.show { display: inline !important; -} \ No newline at end of file +} diff --git a/src/features/stack/Electrode.js b/src/features/stack/Electrode.js index 237c9df..12cadf3 100644 --- a/src/features/stack/Electrode.js +++ b/src/features/stack/Electrode.js @@ -1,34 +1,23 @@ import { React, useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; -import { WetMassBox } from "./components/wetMassBox"; -import { valueReturn, validate } from "./stackFunctions"; import { - setAThickness, - setCThickness, - setArea, selectArea, selectActiveElectrode, setActiveElectrode, - setCCCThickness, selectCCCThickness, selectCCCMass, - setCCCMass, selectACCMass, - setACCMass, setTotalCathodeMass, setTotalCathodeThickness, - selectTotalCathodeThickness, setTotalAnodeMass, setTotalAnodeThickness, - selectTotalAnodeThickness, selectLowRateCapacity, selectStack, selectACCThickness, - setACCThickness, - setAAMMass, - setAAMThickness, - setCAMMass, - setCAMThickness, + updateCPorosity, + updateAPorosity, + updateCWetMass, + updateAWetMass, } from "./stackSlice"; import styles from "./Stack.module.css"; @@ -42,14 +31,13 @@ export function Electrode() { const CCCMass = useSelector(selectCCCMass); const ACCMass = useSelector(selectACCMass); const ACCThickness = useSelector(selectACCThickness); - const TotalCathodeThickness = useSelector(selectTotalCathodeThickness); - const TotalAnodeThickness = useSelector(selectTotalAnodeThickness); const LowRateCapacity = useSelector(selectLowRateCapacity); const Stack = useSelector(selectStack); const dispatch = useDispatch(); useEffect(() => { syncElectrode(); + updatePorosityOrWetMass(); }, [Stack]); function syncElectrode() { @@ -67,7 +55,6 @@ export function Electrode() { (1 - Stack.anode.binder.massPercentDrySlurry - Stack.anode.conductiveAdditive.massPercentDrySlurry); - dispatch(setAAMMass(anodeAMMass)); var anodeAMThickness = (anodeAMMass * 1e6) / @@ -77,7 +64,6 @@ export function Electrode() { var anodeCAThickness = (anodeCAMass * 1e6) / (Stack.anode.conductiveAdditive.density * (Area * 1e-3 ** 2)); - dispatch(setAAMThickness(anodeAMThickness)); var anodeThickness = (anodeAMThickness + anodeBThickness + anodeCAThickness) / @@ -92,7 +78,6 @@ export function Electrode() { anodeAMMass + anodeBMass + anodeCAMass + anodeEMass ); - dispatch(setAThickness(anodeThickness)); dispatch(setTotalAnodeMass(anodeMass + ACCMass)); dispatch(setTotalAnodeThickness(anodeThickness + ACCThickness)); } else if (ActiveElectrode === "anode") { @@ -109,7 +94,6 @@ export function Electrode() { (1 - Stack.cathode.binder.massPercentDrySlurry - Stack.cathode.conductiveAdditive.massPercentDrySlurry); - dispatch(setCAMMass(cathodeCAMass)); var cathodeAMThickness = (cathodeAMMass * 1e6) / @@ -120,7 +104,6 @@ export function Electrode() { var cathodeCAThickness = (cathodeCAMass * 1e6) / (Stack.cathode.conductiveAdditive.density * (Area * 1e-3 ** 2)); - dispatch(setCAMThickness(cathodeAMThickness)); var cathodeThickness = (cathodeAMThickness + cathodeBThickness + cathodeCAThickness) / @@ -135,12 +118,21 @@ export function Electrode() { cathodeAMMass + cathodeBMass + cathodeCAMass + cathodeEMass ); - dispatch(setCThickness(cathodeThickness)); dispatch(setTotalCathodeMass(cathodeMass + CCCMass)); dispatch(setTotalCathodeThickness(cathodeThickness + CCCThickness)); } } + function updatePorosityOrWetMass() { + if (Stack.wetMassMode === "Wet") { + dispatch(updateCPorosity()); + dispatch(updateAPorosity()); + } else { + dispatch(updateCWetMass()); + dispatch(updateAWetMass()); + } + } + if (ActiveElectrode === "none") { return (
diff --git a/src/features/stack/Stack.module.css b/src/features/stack/Stack.module.css index 3d488d8..4f29500 100644 --- a/src/features/stack/Stack.module.css +++ b/src/features/stack/Stack.module.css @@ -98,6 +98,17 @@ font-size: 18px; padding-left: 16px; padding-right: 16px; + margin-right: auto; + margin-left: auto; + border-radius: 5px; +} + +.clickable { + cursor: pointer; +} + +.clickable:hover { + background-color: rgba(255, 255, 255, 0.1); } .button { @@ -123,6 +134,10 @@ background-color: rgba(0, 0, 0, 0.1); } +.button:disabled { + background-color: rgba(0, 0, 0, 0.1); +} + .smallButton { font-size: 18px; } diff --git a/src/features/stack/components/wetMassBox.js b/src/features/stack/components/wetMassBox.js index a28f4b5..162ae15 100644 --- a/src/features/stack/components/wetMassBox.js +++ b/src/features/stack/components/wetMassBox.js @@ -6,16 +6,16 @@ import { selectTotalCathodeMass, selectTotalAnodeMass, selectWetMassMode, - selectDryCathodeMass, - selectDryAnodeMass, selectCPorosity, selectAPorosity, + selectAEDensity, + selectCEDensity, + setCEDensity, + setAEDensity, setAPorosity, setTotalAnodeMass, setTotalCathodeMass, setWetMassMode, - setDryAnodeMass, - setDryCathodeMass, setCPorosity, } from "./../stackSlice"; @@ -24,114 +24,75 @@ export function WetMassBox(electrode) { const TotalCathodeMass = useSelector(selectTotalCathodeMass); const TotalAnodeMass = useSelector(selectTotalAnodeMass); const WetMassMode = useSelector(selectWetMassMode); - const DryCathodeMass = useSelector(selectDryCathodeMass); - const DryAnodeMass = useSelector(selectDryAnodeMass); const CPorosity = useSelector(selectCPorosity); const APorosity = useSelector(selectAPorosity); + const CEDensity = useSelector(selectCEDensity); + const AEDensity = useSelector(selectAEDensity); const dispatch = useDispatch(); - function wetMassDropdown(electrode) { - return ( -
-
- {WetMassMode + " " + electrode + " + current collector mass / g"} -
-
- {["Wet", "Porosity"].map((l) => { - return ( -
dispatch(setWetMassMode(l))} - > - {l} -
- ); - })} -
-
- ); - } + const WetMass = electrode === "cathode" ? TotalCathodeMass : TotalAnodeMass; + const Porosity = electrode === "cathode" ? CPorosity : APorosity; + const Density = electrode === "cathode" ? CEDensity : AEDensity; + + const setWetMass = + electrode === "cathode" ? setTotalCathodeMass : setTotalAnodeMass; + const setPorosity = electrode === "cathode" ? setCPorosity : setAPorosity; + const setDensity = electrode === "cathode" ? setCEDensity : setAEDensity; - if (electrode === "cathode") { - return ( -
-
{wetMassDropdown(electrode)}
-
- - dispatch( - WetMassMode === "Wet" - ? setTotalCathodeMass(e.target.value) - : setDryCathodeMass(e.target.value) - ) - } - onBlur={(e) => validate(e)} - > -
-
- - dispatch(setCPorosity(e.target.value))} - hidden={WetMassMode === "Wet" ? true : ""} - > -
+ return ( + <> +
+

dispatch(setWetMassMode("Wet"))} + > + Electrolyte + {electrode} + current collector mass / g +

+ dispatch(setWetMass(e.target.value))} + onBlur={(e) => validate(e)} + disabled={WetMassMode === "Wet" ? false : true} + >
- ); - } else if (electrode === "anode") { - return ( -
-
{wetMassDropdown(electrode)}
-
- - dispatch( - WetMassMode === "Wet" - ? setTotalAnodeMass(e.target.value) - : setDryAnodeMass(e.target.value) - ) - } - onBlur={(e) => validate(e)} - > -
-
- - dispatch(setAPorosity(e.target.value))} - hidden={WetMassMode === "Wet" ? true : ""} - > -
+
+

dispatch(setWetMassMode("Dry"))} + > + Porosity +

+ dispatch(setPorosity(e.target.value))} + onBlur={(e) => validate(e)} + disabled={WetMassMode === "Dry" ? false : true} + > +
+ +
+

dispatch(setWetMassMode("Dry"))} + > + Electrolyte density / g m-3 +

+ dispatch(setDensity(e.target.value))} + onBlur={(e) => validate(e)} + disabled={WetMassMode === "Dry" ? false : true} + >
- ); - } + + ); } diff --git a/src/features/stack/stackSlice.js b/src/features/stack/stackSlice.js index 97115fe..085c0e7 100644 --- a/src/features/stack/stackSlice.js +++ b/src/features/stack/stackSlice.js @@ -1,4 +1,4 @@ -import { createSlice } from '@reduxjs/toolkit'; +import { createSlice } from "@reduxjs/toolkit"; const initialState = { cathode: { @@ -24,11 +24,12 @@ const initialState = { electrolyte: { mass: 0, thickness: 0, - density: 1.2e6, // g/m3 + density: 1e6, // g/m3 }, - porosity: 0.3, - wetMass: 30e-3, // in g + dryMass: 4.95e-3, // in g thickness: 100, // in µm + wetMass: 5e-3, + totalThickness: 100 + 10, }, anode: { activeMaterial: { @@ -55,9 +56,10 @@ const initialState = { thickness: 0, density: 1.2e6, }, - porosity: 0.3, - wetMass: 22e-3, + dryMass: 2.95e-3, thickness: 100, // in µm + wetMass: 3e-3, + totalThickness: 100 + 10, }, separator: { massLoading: 16.5, @@ -65,50 +67,73 @@ const initialState = { density: 0.9e6, }, cathodeCC: { - mass: 2.1e-3, + mass: 1e-4, thickness: 10, //in um }, anodeCC: { - mass: 2.1e-3, + mass: 1e-4, thickness: 10, // in µm }, - area: (10**2 *1/4 * Math.PI).toPrecision(4), + area: 1, averageVoltage: 3, lowRateCapacity: 5, // mAh measuredCapacity: 2, //mAh - totalCathodeMass: Number((27 * (0.25 * 100e-6 * Math.PI)).toPrecision(2)) + 30e-3, // Cathode wet mass + CCC mass - dryCathodeMass: Number((27 * (0.25 * 100e-6 * Math.PI)).toPrecision(2)) + 27.17e-3, // Cathode dry mass + CCC mass - totalCathodeThickness: 10 + 100, // Cathode + CCC - totalAnodeMass: 22e-3 + 2.1e-3, // anode wet mas + ACC mass - dryAnodeMass: 0.02127, - totalAnodeThickness: 10+100, npRatio: 1, - activeElectrode: 'none', + activeElectrode: "none", showSubElectrode: false, - wetMassMode: 'Wet' + wetMassMode: "Wet", }; +initialState.cathode.porosity = calculatePorosity( + initialState.area, + initialState.cathodeCC.thickness, + initialState.cathode.thickness, + initialState.cathode.wetMass, + initialState.cathode.electrolyte.density +); + +initialState.anode.porosity = calculatePorosity( + initialState.area, + initialState.anodeCC.thickness, + initialState.anode.thickness, + initialState.anode.wetMass, + initialState.anode.electrolyte.density +); + +function calculatePorosity( + area, + CCThickness, + totalThickness, + wetMass, + dryMass, + electrolyteDensity +) { + const totalVolume = (totalThickness - CCThickness) * area * 1e-12; // in m3 + const massElectrolyte = wetMass - dryMass; // in g + const volumeElectrolyte = massElectrolyte / electrolyteDensity; // in m3 + return (volumeElectrolyte / totalVolume).toPrecision(3); +} + +function calculateWetMass( + area, + CCThickness, + totalThickness, + dryMass, + electrolyteDensity, + porosity +) { + const totalVolume = (totalThickness - CCThickness) * area * 1e-12; // in m3 + const volumeElectrolyte = porosity * totalVolume; // in m3 + const massElectrolyte = volumeElectrolyte * electrolyteDensity; // in g + return dryMass + massElectrolyte; +} + export const stackSlice = createSlice({ - name: 'stack', + name: "stack", initialState, reducers: { - setCWetMass: (state, action) => { - state.cathode.wetMass = action.payload; - }, - setAWetMass: (state, action) => { - state.anode.wetMass = action.payload; - }, - setCThickness: (state, action) => { - state.cathode.thickness = action.payload; - }, - setAThickness: (state, action) => { - state.anode.thickness = action.payload; - }, setArea: (state, action) => { - state.area = action.payload; - }, - setArealEnergyDensity: (state, action) => { - state.arealEnergyDensity= action.payload; + state.area = action.payload; }, setActiveElectrode: (state, action) => { state.activeElectrode = action.payload; @@ -118,30 +143,30 @@ export const stackSlice = createSlice({ }, setCCCMass: (state, action) => { state.cathodeCC.mass = action.payload; - state.cathodeCC.massLoading = action.payload / (state.cathode.area*(1e-3)**2); }, setACCThickness: (state, action) => { state.anodeCC.thickness = action.payload; }, setACCMass: (state, action) => { state.anodeCC.mass = action.payload; - state.anodeCC.massLoading = action.payload / (state.cathode.area*(1e-3)**2); }, setTotalCathodeMass: (state, action) => { - state.totalCathodeMass = action.payload; - state.cathode.wetMass = action.payload - state.cathodeCC.mass + state.cathode.wetMass = action.payload; }, setTotalCathodeThickness: (state, action) => { - state.totalCathodeThickness = action.payload; - state.cathode.thickness = action.payload - state.cathodeCC.thickness + state.cathode.totalThickness = action.payload; }, setTotalAnodeMass: (state, action) => { - state.totalAnodeMass = action.payload; - state.anode.wetMass = action.payload - state.anodeCC.mass + state.anode.wetMass = action.payload; }, setTotalAnodeThickness: (state, action) => { - state.totalAnodeThickness = action.payload; - state.anode.thickness = action.payload - state.anodeCC.thickness + state.anode.totalThickness = action.payload; + }, + setDryCathodeMass: (state, action) => { + state.cathode.dryMass = action.payload; + }, + setDryAnodeMass: (state, action) => { + state.anode.dryMass = action.payload; }, setAvgVoltage: (state, action) => { state.averageVoltage = action.payload; @@ -152,134 +177,151 @@ export const stackSlice = createSlice({ setMeasuredCapacity: (state, action) => { state.measuredCapacity = action.payload; }, - // SUBELECTRODE PROPERTIES - // Active material - setCAMMass: (state, action) => { - state.cathode.activeMaterial.mass = action.payload; - }, - setCAMThickness: (state, action) => { - state.cathode.activeMaterial.thickness = action.payload; - }, - setAAMMass: (state, action) => { - state.anode.activeMaterial.mass = action.payload; - }, - setAAMThickness: (state, action) => { - state.anode.activeMaterial.thickness = action.payload; - }, - // Binder - setCBMass: (state, action) => { - state.cathode.binder.mass = action.payload; - }, - setCBThickness: (state, action) => { - state.cathode.binder.thickness = action.payload; - }, - setABMass: (state, action) => { - state.anode.binder.mass = action.payload; - }, - setABThickness: (state, action) => { - state.anode.binder.thickness = action.payload; - }, - // Conductive additive - setCCAMass: (state, action) => { - state.cathode.conductiveAdditive.mass = action.payload; - }, - setCCAThickness: (state, action) => { - state.cathode.conductiveAdditive.thickness = action.payload; - }, - setACAMass: (state, action) => { - state.anode.conductiveAdditive.mass = action.payload; - }, - setACAThickness: (state, action) => { - state.anode.conductiveAdditive.thickness = action.payload; - }, - // Electrolyte - setCEMass: (state, action) => { - state.cathode.electrolyte.mass = action.payload; - }, - setCEThickness: (state, action) => { - state.cathode.electrolyte.thickness = action.payload; - }, - setCEDensity: (state, action) => { - state.cathode.electrolyte.density = action.payload; - }, - setAEMass: (state, action) => { - state.anode.electrolyte.mass = action.payload; - }, - setAEThickness: (state, action) => { - state.anode.electrolyte.thickness = action.payload; - }, setCPorosity: (state, action) => { state.cathode.porosity = action.payload; - state.cathode.wetMass = state.dryCathodeMass - state.cathodeCC.mass + Number(state.cathode.electrolyte.density) * Number(state.cathode.porosity) * Number(state.area * (1e-3)**2) * Number(state.cathode.thickness * 1e-6) - state.totalCathodeMass = Number(state.cathode.wetMass.toPrecision(3)) + Number(state.cathodeCC.mass) }, setAPorosity: (state, action) => { state.anode.porosity = action.payload; - state.anode.wetMass = state.dryAnodeMass - state.anodeCC.mass + Number(state.anode.electrolyte.density) * Number(state.anode.porosity) * Number(state.area * (1e-3)**2) * Number(state.anode.thickness * 1e-6) - state.totalAnodeMass = Number(state.anode.wetMass.toPrecision(3)) + Number(state.anodeCC.mass) }, - setShowSubelectrode: (state, action) => { - state.showSubElectrode = Boolean(action.payload); + setCEDensity: (state, action) => { + state.cathode.electrolyte.density = action.payload; + }, + setAEDensity: (state, action) => { + state.anode.electrolyte.density = action.payload; }, setWetMassMode: (state, action) => { state.wetMassMode = action.payload; }, - setDryCathodeMass: (state, action) => { - state.dryCathodeMass = action.payload; - state.cathode.wetMass = Number(action.payload) - state.cathodeCC.mass + Number(state.cathode.electrolyte.density) * Number(state.cathode.porosity) * Number(state.area * (1e-3)**2) * Number(state.cathode.thickness * 1e-6) - state.totalCathodeMass = Number(state.cathode.wetMass.toPrecision(3)) + Number(state.cathodeCC.mass) - }, - setDryAnodeMass: (state, action) => { - state.dryAnodeMass = action.payload; - state.anode.wetMass = Number(action.payload) - state.anodeCC.mass + Number(state.anode.electrolyte.density) * Number(state.anode.porosity) * Number(state.area * (1e-3)**2) * Number(state.anode.thickness * 1e-6) - state.totalAnodeMass = Number(state.anode.wetMass.toPrecision(3)) + Number(state.anodeCC.mass) + updateCPorosity: (state) => { + state.cathode.porosity = calculatePorosity( + state.area, + state.cathodeCC.thickness, + state.cathode.totalThickness, + state.cathode.wetMass, + state.cathode.dryMass, + state.cathode.electrolyte.density + ); + }, + updateAPorosity: (state) => { + state.anode.porosity = calculatePorosity( + state.area, + state.anodeCC.thickness, + state.anode.totalThickness, + state.anode.wetMass, + state.anode.dryMass, + state.anode.electrolyte.density + ); + }, + updateCWetMass: (state) => { + state.cathode.wetMass = calculateWetMass( + state.area, + state.cathodeCC.thickness, + state.cathode.totalThickness, + state.cathode.dryMass, + state.cathode.electrolyte.density, + state.cathode.porosity + ); + }, + updateAWetMass: (state) => { + state.anode.wetMass = calculateWetMass( + state.area, + state.anodeCC.thickness, + state.anode.totalThickness, + state.anode.dryMass, + state.anode.electrolyte.density, + state.anode.porosity + ); }, -}, + }, }); -export const { setCWetMass, setAWetMass, setCThickness, setAThickness, - setArea, setArealEnergyDensity, setActiveElectrode, - setCCCThickness, setCCCMass, setTotalCathodeMass, setTotalCathodeThickness, - setAvgVoltage, setLowRateCapacity, setMeasuredCapacity, setACCMass, - setACCThickness, setTotalAnodeMass, setTotalAnodeThickness, - setCAMMass, setCAMThickness, setAAMMass, setAAMThickness, - setCBMass, setCBThickness, setABMass, setABThickness, - setCCAMass, setCCAThickness, setACAMass, setACAThickness, - setCEMass, setCEThickness, setAEMass, setAEThickness, - setCPorosity, setAPorosity, setShowSubelectrode, setDryCathodeMass, - setWetMassMode, setCEDensity, setDryAnodeMass } = stackSlice.actions; - +export const { + setCWetMass, + setAWetMass, + setCThickness, + setAThickness, + setArea, + setArealEnergyDensity, + setActiveElectrode, + setCCCThickness, + setCCCMass, + setTotalCathodeMass, + setTotalCathodeThickness, + setAvgVoltage, + setLowRateCapacity, + setMeasuredCapacity, + setACCMass, + setACCThickness, + setTotalAnodeMass, + setTotalAnodeThickness, + setCAMMass, + setCAMThickness, + setAAMMass, + setAAMThickness, + setCBMass, + setCBThickness, + setABMass, + setABThickness, + setCCAMass, + setCCAThickness, + setACAMass, + setACAThickness, + setCEMass, + setCEThickness, + setAEMass, + setAEThickness, + setCPorosity, + setAPorosity, + setShowSubelectrode, + setDryCathodeMass, + setWetMassMode, + setCEDensity, + setAEDensity, + setDryAnodeMass, + updateCPorosity, + updateAPorosity, + updateCWetMass, + updateAWetMass, +} = stackSlice.actions; export const selectCWetMass = (state) => state.stack.cathode.wetMass; export const selectAWetMass = (state) => state.stack.anode.wetMass; export const selectCThickness = (state) => state.stack.cathode.thickness; export const selectAThickness = (state) => state.stack.anode.thickness; export const selectArea = (state) => state.stack.area; -export const selectArealEnergyDensity = (state) => state.stack.arealEnergyDensity; +export const selectArealEnergyDensity = (state) => + state.stack.arealEnergyDensity; export const selectSMassLoading = (state) => state.stack.separator.massLoading; export const selectSThickness = (state) => state.stack.separator.thickness; -export const selectCCCMassLoading = (state) => state.stack.cathodeCC.massLoading; +export const selectCCCMassLoading = (state) => + state.stack.cathodeCC.massLoading; export const selectCCCMass = (state) => state.stack.cathodeCC.mass; export const selectACCMassLoading = (state) => state.stack.anodeCC.massLoading; export const selectACCMass = (state) => state.stack.anodeCC.mass; export const selectCCCThickness = (state) => state.stack.cathodeCC.thickness; export const selectACCThickness = (state) => state.stack.anodeCC.thickness; export const selectSMass = (state) => state.stack.separator.mass; -export const selectTotalCathodeMass = (state) => state.stack.totalCathodeMass; -export const selectTotalCathodeThickness = (state) => state.stack.totalCathodeThickness; -export const selectTotalAnodeMass = (state) => state.stack.totalAnodeMass; -export const selectTotalAnodeThickness = (state) => state.stack.totalAnodeThickness; +export const selectTotalCathodeMass = (state) => state.stack.cathode.wetMass; +export const selectTotalCathodeThickness = (state) => + state.stack.cathode.totalThickness; +export const selectTotalAnodeMass = (state) => state.stack.anode.wetMass; +export const selectTotalAnodeThickness = (state) => + state.stack.anode.totalThickness; export const selectAvgVoltage = (state) => state.stack.averageVoltage; export const selectLowRateCapacity = (state) => state.stack.lowRateCapacity; export const selectMeasuredCapacity = (state) => state.stack.measuredCapacity; -export const selectStack = (state) => state.stack -export const selectShowSubElectrode = (state) => state.stack.showSubElectrode -export const selectWetMassMode = (state) => state.stack.wetMassMode -export const selectDryCathodeMass = (state) => state.stack.dryCathodeMass -export const selectDryAnodeMass = (state) => state.stack.dryAnodeMass +export const selectStack = (state) => state.stack; +export const selectShowSubElectrode = (state) => state.stack.showSubElectrode; +export const selectWetMassMode = (state) => state.stack.wetMassMode; +export const selectDryCathodeMass = (state) => state.stack.cathode.dryMass; +export const selectDryAnodeMass = (state) => state.stack.anode.dryMass; + +export const selectCPorosity = (state) => state.stack.cathode.porosity; +export const selectAPorosity = (state) => state.stack.anode.porosity; -export const selectCPorosity = (state) => state.stack.cathode.porosity -export const selectAPorosity = (state) => state.stack.anode.porosity +export const selectCEDensity = (state) => + state.stack.cathode.electrolyte.density; +export const selectAEDensity = (state) => state.stack.anode.electrolyte.density; export const selectActiveElectrode = (state) => state.stack.activeElectrode; From 5a39d79abd859a40d58ca80ce2a5a355cb946037 Mon Sep 17 00:00:00 2001 From: isaacsquires Date: Wed, 22 Feb 2023 15:21:36 +0000 Subject: [PATCH 6/6] fix initialisation issue --- src/features/stack/Electrode.js | 80 +++++++++---------- src/features/stack/components/electrodeBox.js | 4 +- src/features/stack/components/wetMassBox.js | 47 +++++------ src/features/stack/stackSlice.js | 12 +-- 4 files changed, 67 insertions(+), 76 deletions(-) diff --git a/src/features/stack/Electrode.js b/src/features/stack/Electrode.js index 12cadf3..0608efc 100644 --- a/src/features/stack/Electrode.js +++ b/src/features/stack/Electrode.js @@ -1,38 +1,20 @@ import { React, useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; -import { - selectArea, - selectActiveElectrode, - setActiveElectrode, - selectCCCThickness, - selectCCCMass, - selectACCMass, - setTotalCathodeMass, - setTotalCathodeThickness, - setTotalAnodeMass, - setTotalAnodeThickness, - selectLowRateCapacity, - selectStack, - selectACCThickness, - updateCPorosity, - updateAPorosity, - updateCWetMass, - updateAWetMass, -} from "./stackSlice"; +import * as stackSlice from "./stackSlice"; import styles from "./Stack.module.css"; import "./../../App.css"; import { ElectrodeBox } from "./components/electrodeBox"; export function Electrode() { - const Area = useSelector(selectArea); - const ActiveElectrode = useSelector(selectActiveElectrode); - const CCCThickness = useSelector(selectCCCThickness); - const CCCMass = useSelector(selectCCCMass); - const ACCMass = useSelector(selectACCMass); - const ACCThickness = useSelector(selectACCThickness); - const LowRateCapacity = useSelector(selectLowRateCapacity); - const Stack = useSelector(selectStack); + const Area = useSelector(stackSlice.selectArea); + const ActiveElectrode = useSelector(stackSlice.selectActiveElectrode); + const CCCThickness = useSelector(stackSlice.selectCCCThickness); + const CCCMass = useSelector(stackSlice.selectCCCMass); + const ACCMass = useSelector(stackSlice.selectACCMass); + const ACCThickness = useSelector(stackSlice.selectACCThickness); + const LowRateCapacity = useSelector(stackSlice.selectLowRateCapacity); + const Stack = useSelector(stackSlice.selectStack); const dispatch = useDispatch(); useEffect(() => { @@ -78,8 +60,10 @@ export function Electrode() { anodeAMMass + anodeBMass + anodeCAMass + anodeEMass ); - dispatch(setTotalAnodeMass(anodeMass + ACCMass)); - dispatch(setTotalAnodeThickness(anodeThickness + ACCThickness)); + dispatch(stackSlice.setWetAnodeMass(anodeMass + ACCMass)); + dispatch( + stackSlice.setTotalAnodeThickness(anodeThickness + ACCThickness) + ); } else if (ActiveElectrode === "anode") { var cathodeAMMass = LRCap / (Stack.cathode.activeMaterial.theoreticSpecificCapacity * 1e3); @@ -118,18 +102,28 @@ export function Electrode() { cathodeAMMass + cathodeBMass + cathodeCAMass + cathodeEMass ); - dispatch(setTotalCathodeMass(cathodeMass + CCCMass)); - dispatch(setTotalCathodeThickness(cathodeThickness + CCCThickness)); + dispatch(stackSlice.setWetCathodeMass(cathodeMass + CCCMass)); + dispatch( + stackSlice.setTotalCathodeThickness(cathodeThickness + CCCThickness) + ); } } function updatePorosityOrWetMass() { - if (Stack.wetMassMode === "Wet") { - dispatch(updateCPorosity()); - dispatch(updateAPorosity()); - } else { - dispatch(updateCWetMass()); - dispatch(updateAWetMass()); + if (Stack.wetMassMode === "Wet" && ActiveElectrode === "cathode") { + dispatch(stackSlice.updateCPorosity()); + } else if (Stack.wetMassMode === "Wet" && ActiveElectrode === "anode") { + dispatch(stackSlice.updateAPorosity()); + } else if (Stack.wetMassMode === "Dry" && ActiveElectrode === "cathode") { + dispatch(stackSlice.updateCWetMass()); + } else if (Stack.wetMassMode === "Dry" && ActiveElectrode === "anode") { + dispatch(stackSlice.updateAWetMass()); + } else if (Stack.wetMassMode === "Dry" && ActiveElectrode === "both") { + dispatch(stackSlice.updateCWetMass()); + dispatch(stackSlice.updateAWetMass()); + } else if (Stack.wetMassMode === "Wet" && ActiveElectrode === "both") { + dispatch(stackSlice.updateCPorosity()); + dispatch(stackSlice.updateAPorosity()); } } @@ -148,7 +142,9 @@ export function Electrode() {
@@ -156,7 +152,9 @@ export function Electrode() {
@@ -164,7 +162,9 @@ export function Electrode() {
diff --git a/src/features/stack/components/electrodeBox.js b/src/features/stack/components/electrodeBox.js index 101b12a..a568769 100644 --- a/src/features/stack/components/electrodeBox.js +++ b/src/features/stack/components/electrodeBox.js @@ -103,7 +103,7 @@ export function ElectrodeBox(props) { className={styles.button} aria-label="Set thickness" onChange={(e) => dispatch(setTotalThickness(e.target.value))} - value={valueReturn(TotalThickness)} + value={String(valueReturn(TotalThickness))} onBlur={(e) => validate(e)} >
@@ -116,7 +116,7 @@ export function ElectrodeBox(props) { className={styles.button} aria-label="Set dry mass" onChange={(e) => dispatch(setDryMass(e.target.value))} - value={valueReturn(DryMass)} + value={String(valueReturn(DryMass))} onBlur={(e) => validate(e)} >
diff --git a/src/features/stack/components/wetMassBox.js b/src/features/stack/components/wetMassBox.js index 162ae15..77f2d39 100644 --- a/src/features/stack/components/wetMassBox.js +++ b/src/features/stack/components/wetMassBox.js @@ -2,32 +2,17 @@ import { React } from "react"; import { useSelector, useDispatch } from "react-redux"; import styles from "./../Stack.module.css"; import { valueReturn, validate } from "./../stackFunctions"; -import { - selectTotalCathodeMass, - selectTotalAnodeMass, - selectWetMassMode, - selectCPorosity, - selectAPorosity, - selectAEDensity, - selectCEDensity, - setCEDensity, - setAEDensity, - setAPorosity, - setTotalAnodeMass, - setTotalCathodeMass, - setWetMassMode, - setCPorosity, -} from "./../stackSlice"; +import * as stackSlice from "./../stackSlice"; export function WetMassBox(electrode) { electrode = electrode.electrode; - const TotalCathodeMass = useSelector(selectTotalCathodeMass); - const TotalAnodeMass = useSelector(selectTotalAnodeMass); - const WetMassMode = useSelector(selectWetMassMode); - const CPorosity = useSelector(selectCPorosity); - const APorosity = useSelector(selectAPorosity); - const CEDensity = useSelector(selectCEDensity); - const AEDensity = useSelector(selectAEDensity); + const TotalCathodeMass = useSelector(stackSlice.selectTotalCathodeMass); + const TotalAnodeMass = useSelector(stackSlice.selectTotalAnodeMass); + const WetMassMode = useSelector(stackSlice.selectWetMassMode); + const CPorosity = useSelector(stackSlice.selectCPorosity); + const APorosity = useSelector(stackSlice.selectAPorosity); + const CEDensity = useSelector(stackSlice.selectCEDensity); + const AEDensity = useSelector(stackSlice.selectAEDensity); const dispatch = useDispatch(); const WetMass = electrode === "cathode" ? TotalCathodeMass : TotalAnodeMass; @@ -35,16 +20,20 @@ export function WetMassBox(electrode) { const Density = electrode === "cathode" ? CEDensity : AEDensity; const setWetMass = - electrode === "cathode" ? setTotalCathodeMass : setTotalAnodeMass; - const setPorosity = electrode === "cathode" ? setCPorosity : setAPorosity; - const setDensity = electrode === "cathode" ? setCEDensity : setAEDensity; + electrode === "cathode" + ? stackSlice.setWetCathodeMass + : stackSlice.setWetAnodeMass; + const setPorosity = + electrode === "cathode" ? stackSlice.setCPorosity : stackSlice.setAPorosity; + const setDensity = + electrode === "cathode" ? stackSlice.setCEDensity : stackSlice.setAEDensity; return ( <>

dispatch(setWetMassMode("Wet"))} + onClick={() => dispatch(stackSlice.setWetMassMode("Wet"))} > Electrolyte + {electrode} + current collector mass / g

@@ -61,7 +50,7 @@ export function WetMassBox(electrode) {

dispatch(setWetMassMode("Dry"))} + onClick={() => dispatch(stackSlice.setWetMassMode("Dry"))} > Porosity

@@ -79,7 +68,7 @@ export function WetMassBox(electrode) {

dispatch(setWetMassMode("Dry"))} + onClick={() => dispatch(stackSlice.setWetMassMode("Dry"))} > Electrolyte density / g m-3

diff --git a/src/features/stack/stackSlice.js b/src/features/stack/stackSlice.js index 085c0e7..68d8843 100644 --- a/src/features/stack/stackSlice.js +++ b/src/features/stack/stackSlice.js @@ -54,7 +54,7 @@ const initialState = { electrolyte: { mass: 0, thickness: 0, - density: 1.2e6, + density: 1e6, }, dryMass: 2.95e-3, thickness: 100, // in µm @@ -89,6 +89,7 @@ initialState.cathode.porosity = calculatePorosity( initialState.cathodeCC.thickness, initialState.cathode.thickness, initialState.cathode.wetMass, + initialState.cathode.dryMass, initialState.cathode.electrolyte.density ); @@ -97,6 +98,7 @@ initialState.anode.porosity = calculatePorosity( initialState.anodeCC.thickness, initialState.anode.thickness, initialState.anode.wetMass, + initialState.anode.dryMass, initialState.anode.electrolyte.density ); @@ -150,13 +152,13 @@ export const stackSlice = createSlice({ setACCMass: (state, action) => { state.anodeCC.mass = action.payload; }, - setTotalCathodeMass: (state, action) => { + setWetCathodeMass: (state, action) => { state.cathode.wetMass = action.payload; }, setTotalCathodeThickness: (state, action) => { state.cathode.totalThickness = action.payload; }, - setTotalAnodeMass: (state, action) => { + setWetAnodeMass: (state, action) => { state.anode.wetMass = action.payload; }, setTotalAnodeThickness: (state, action) => { @@ -245,14 +247,14 @@ export const { setActiveElectrode, setCCCThickness, setCCCMass, - setTotalCathodeMass, + setWetCathodeMass, setTotalCathodeThickness, setAvgVoltage, setLowRateCapacity, setMeasuredCapacity, setACCMass, setACCThickness, - setTotalAnodeMass, + setWetAnodeMass, setTotalAnodeThickness, setCAMMass, setCAMThickness,