1- import React , { Dispatch , SetStateAction , useState } from "react" ;
1+ import React , { Dispatch , SetStateAction } from "react" ;
22import { Button , Grid , InputLabel , TextField , Typography } from "@material-ui/core" ;
33import { TemperatureDropdown } from "./TemperatureDropdown" ;
4+ import { OptimizationMetadata } from "../models" ;
45
56interface Properties {
67 temperatureKey : string ,
78 setTemperatureKey : Dispatch < SetStateAction < string > >
9+ optimizationMetadata : OptimizationMetadata ,
10+ setOptimizationMetadata : ( om : OptimizationMetadata ) => void
811}
912
10- export const MetaDataContainer = ( { temperatureKey, setTemperatureKey} : Properties ) => {
13+ export const MetaDataContainer = ( { temperatureKey, setTemperatureKey, optimizationMetadata , setOptimizationMetadata } : Properties ) => {
1114
15+ const {
16+ gridInvestCostTemplate,
17+ gridOperatingCostTemplate,
18+ pumpInvestCostTemplate,
19+ heatGenerationCost,
20+ lifespanOfResources,
21+ wacc,
22+ electricityCost,
23+ electricalEfficiency,
24+ hydraulicEfficiency,
25+ insulationThickness
26+ } = optimizationMetadata ;
1227
13- const [ insulationThickness , setInsulationThickness ] = useState ( 0 ) ;
14- const [ pressureDropPerOutput , setPressureDropPerOutput ] = useState ( 0 )
28+ const SPACING = 3
1529
30+ const dispatchChange = ( val : string , prop : string ) => {
31+ const opt = { ...optimizationMetadata } ;
32+ let valToInsert : ( string | number ) = val ;
33+ if ( isNumberProp ( prop ) ) {
34+ if ( ! Number . isNaN ( val ) && val !== "" ) {
35+ valToInsert = getAsNumber ( val ) ;
36+ // @ts -ignore
37+ opt [ prop ] = valToInsert ;
38+ setOptimizationMetadata ( opt )
39+ }
40+ } else {
41+ // @ts -ignore
42+ opt [ prop ] = valToInsert ;
43+ setOptimizationMetadata ( opt )
44+ }
45+ }
1646
47+ const isNumberProp = ( prop : string ) => {
48+ const numberProps = [
49+ "heatGenerationCost" ,
50+ "lifespanOfResources" ,
51+ "wacc" ,
52+ "electricityCost" ,
53+ "electricalEfficiency" ,
54+ "hydraulicEfficiency" ,
55+ "insulationThickness" ]
56+ return numberProps . includes ( prop )
57+ }
58+
59+ const getAsNumber = ( val : string ) : number => {
60+ return Number . parseFloat ( val ) ;
61+ }
1762
1863 return < Grid
1964 container
2065 direction = "row"
2166 justify = "center"
2267 alignItems = "center"
68+ spacing = { SPACING }
2369 >
2470 < Grid container
25- direction = "row" item xs = { 7 } spacing = { 3 } >
71+ direction = "row"
72+ alignContent = "center"
73+ justify = "center" item xs = { 7 } spacing = { SPACING } >
2674 < Grid item xs = { 12 } >
2775 < Typography className = { "header-form" } color = "textSecondary" gutterBottom >
2876 Hier kannst du gegebenenfalls die Meta Daten anpassen
@@ -31,30 +79,142 @@ export const MetaDataContainer = ({temperatureKey, setTemperatureKey}: Propertie
3179 </ Grid >
3280
3381 < Grid container
34- direction = "row" item xs = { 7 } spacing = { 3 } >
82+ direction = "row" item xs = { 7 } spacing = { SPACING } >
83+ < Grid item xs = { 6 }
84+ alignContent = "center"
85+ justify = "center" >
86+ < InputLabel > Isolationsdicke</ InputLabel >
87+ </ Grid >
3588 < Grid item xs = { 6 } >
36- < InputLabel > Druckverlust pro Output</ InputLabel >
37- { /*<TextField id="outlined-basic" label="Isolationsdicke" type="number" variant="outlined" placeholder="127.30"/>*/ }
89+ < TextField id = "outlined-basic" type = "number" variant = "outlined" placeholder = "127.30"
90+ value = { insulationThickness }
91+ onChange = { ( e ) => dispatchChange ( e . target . value , "insulationThickness" ) } />
92+
3893 </ Grid >
94+ </ Grid >
95+
96+ < Grid container
97+ direction = "row" item xs = { 7 } spacing = { SPACING } >
3998 < Grid item xs = { 6 } >
40- < TextField id = "outlined-basic" variant = "outlined" type = "number"
41- placeholder = "127.30" />
99+ < InputLabel > Netzinvestitionskosten Template (f(Durchmesser) = [€/m])</ InputLabel >
100+ </ Grid >
101+ < Grid item xs = { 6 } >
102+ < TextField id = "outlined-basic" type = "text" variant = "outlined" placeholder = "3*d"
103+ value = { gridInvestCostTemplate }
104+ onChange = { ( e ) => dispatchChange ( e . target . value , "gridInvestCostTemplate" ) } />
105+
42106 </ Grid >
43107 </ Grid >
44108
45109 < Grid container
46- direction = "row" item xs = { 7 } spacing = { 3 } >
110+ direction = "row" item xs = { 7 } spacing = { SPACING } >
47111 < Grid item xs = { 6 } >
48- < InputLabel > Isolationsdicke</ InputLabel >
112+ < InputLabel > Netzoperationskosten Template (f(Netzinvestitionskosten) = [€/a])</ InputLabel >
113+ </ Grid >
114+ < Grid item xs = { 6 } >
115+ < TextField id = "outlined-basic" type = "text" variant = "outlined" placeholder = "3*cost"
116+ value = { gridOperatingCostTemplate }
117+ onChange = { ( e ) => dispatchChange ( e . target . value , "gridOperatingCostTemplate" ) } />
118+
119+ </ Grid >
120+ </ Grid >
121+
122+ < Grid container
123+ direction = "row" item xs = { 7 } spacing = { SPACING } >
124+ < Grid item xs = { 6 } >
125+ < InputLabel > Pumpeninvestitionskosten Template (f(Leistung) = [€/kW])</ InputLabel >
126+ </ Grid >
127+ < Grid item xs = { 6 } >
128+ < TextField id = "outlined-basic" type = "text" variant = "outlined" placeholder = "3*d"
129+ value = { pumpInvestCostTemplate }
130+ onChange = { ( e ) => dispatchChange ( e . target . value , "pumpInvestCostTemplate" ) } />
131+
132+ </ Grid >
133+ </ Grid >
134+
135+ < Grid container
136+ direction = "row" item xs = { 7 } spacing = { SPACING } >
137+ < Grid item xs = { 6 } >
138+ < InputLabel > Heizkosten [€/kWh])</ InputLabel >
139+ </ Grid >
140+ < Grid item xs = { 6 } >
141+ < TextField id = "outlined-basic" type = "text" variant = "outlined" placeholder = "0.12"
142+ value = { heatGenerationCost }
143+ onChange = { ( e ) => dispatchChange ( e . target . value , "heatGenerationCost" ) } />
144+
145+ </ Grid >
146+ </ Grid >
147+
148+ < Grid container
149+ direction = "row" item xs = { 7 } spacing = { SPACING } >
150+ < Grid item xs = { 6 } >
151+ < InputLabel > Lebensspanne der Ressourcen [a]</ InputLabel >
152+ </ Grid >
153+ < Grid item xs = { 6 } >
154+ < TextField id = "outlined-basic" type = "text" variant = "outlined" placeholder = "25"
155+ value = { lifespanOfResources }
156+ onChange = { ( e ) => dispatchChange ( e . target . value , "lifespanOfResources" ) } />
157+
158+ </ Grid >
159+ </ Grid >
160+
161+ < Grid container
162+ direction = "row" item xs = { 7 } spacing = { SPACING } >
163+ < Grid item xs = { 6 } >
164+ < InputLabel > Weighted Average Cost of Capital [%]</ InputLabel >
165+ </ Grid >
166+ < Grid item xs = { 6 } >
167+ < TextField id = "outlined-basic" type = "text" variant = "outlined" placeholder = "15"
168+ value = { wacc }
169+ onChange = { ( e ) => dispatchChange ( e . target . value , "wacc" ) } />
170+
171+ </ Grid >
172+ </ Grid >
173+
174+ < Grid container
175+ direction = "row" item xs = { 7 } spacing = { SPACING } >
176+ < h3 > Pumpen</ h3 >
177+ </ Grid >
178+
179+ < Grid container
180+ direction = "row" item xs = { 7 } spacing = { SPACING } >
181+ < Grid item xs = { 6 } >
182+ < InputLabel > Elektrizitätskosten Pumpstation [ct/kWh]</ InputLabel >
183+ </ Grid >
184+ < Grid item xs = { 6 } >
185+ < TextField id = "outlined-basic" type = "text" variant = "outlined" placeholder = "15"
186+ value = { electricityCost }
187+ onChange = { ( e ) => dispatchChange ( e . target . value , "electricityCost" ) } />
188+
189+ </ Grid >
190+ </ Grid >
191+ < Grid container
192+ direction = "row" item xs = { 7 } spacing = { SPACING } >
193+ < Grid item xs = { 6 } >
194+ < InputLabel > Elektrische Effizienz (Pumpe)</ InputLabel >
195+ </ Grid >
196+ < Grid item xs = { 6 } >
197+ < TextField id = "outlined-basic" type = "text" variant = "outlined" placeholder = "15"
198+ value = { electricalEfficiency }
199+ onChange = { ( e ) => dispatchChange ( e . target . value , "electricalEfficiency" ) } />
200+
201+ </ Grid >
202+ </ Grid >
203+ < Grid container
204+ direction = "row" item xs = { 7 } spacing = { SPACING } >
205+ < Grid item xs = { 6 } >
206+ < InputLabel > Hydraulische Effizienz (Pumpe)</ InputLabel >
49207 </ Grid >
50208 < Grid item xs = { 6 } >
51- < TextField id = "outlined-basic" type = "number" variant = "outlined" placeholder = "127.30" />
209+ < TextField id = "outlined-basic" type = "text" variant = "outlined" placeholder = "15"
210+ value = { hydraulicEfficiency }
211+ onChange = { ( e ) => dispatchChange ( e . target . value , "hydraulicEfficiency" ) } />
52212
53213 </ Grid >
54214 </ Grid >
55215
56216 < Grid container
57- direction = "row" item xs = { 7 } spacing = { 3 } >
217+ direction = "row" item xs = { 7 } spacing = { SPACING } >
58218 < Grid item xs = { 6 } >
59219 < InputLabel > Temperaturreihe</ InputLabel >
60220 </ Grid >
@@ -63,7 +223,7 @@ export const MetaDataContainer = ({temperatureKey, setTemperatureKey}: Propertie
63223 </ Grid >
64224 </ Grid >
65225
66- < Grid container direction = "row" item xs = { 7 } spacing = { 1 } >
226+ < Grid container direction = "row" item xs = { 7 } spacing = { SPACING } >
67227 < Grid item xs = { 12 } >
68228 < Button variant = "contained" onClick = { ( ) => {
69229 } } >
0 commit comments