reordered settings - clarified launch angle and numerical analysis se…

…ctions
jcw780 · May 30, 2020 · 1122df7 · 1122df7
1 parent 5a36bf5
commit 1122df7
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 30 deletions.
diff --git a/src/App.css b/src/App.css
@@ -54,4 +54,13 @@ body{
 .popover{
   max-width: 100%! important;
   z-index: 900! important;
+}
+
+.btn-group-toggle{
+  display: flex! important;
+}
+
+.row{
+  margin-left: 0! important;
+  margin-right: 0! important;
 }
diff --git a/src/SettingsBar.tsx b/src/SettingsBar.tsx
@@ -9,13 +9,14 @@ class CalculationRadio extends React.Component<{settings: T.settingsT}, {value:
         super(props);
         this.state = {value: this.props.settings.calculationSettings.calculationMethod};
     }
-    setCalcMethod = (event) => {
+    private setCalcMethod = (event) => {
         const value = parseInt(event.target.value);
         this.props.settings.calculationSettings.calculationMethod = value;
         this.setState({value: parseInt(event.target.value)});
     }
     render(){
         return(
+            <Container style={{paddingLeft: '1rem', paddingRight: '1rem'}}>
             <ToggleButtonGroup toggle vertical type="radio" name="radio" value={this.state.value}>
                 <ToggleButton onChange={this.setCalcMethod} type="radio" value={0} variant="secondary">
                 Adams-Bashforth 5
@@ -30,6 +31,7 @@ class CalculationRadio extends React.Component<{settings: T.settingsT}, {value:
                 Runge-Kutta 4
                 </ToggleButton>
             </ToggleButtonGroup>
+            </Container>
         );
     }
 }
@@ -51,20 +53,11 @@ export class SettingsBar extends React.Component<settingsBarProps, settingsBarSt
     }
     private forms = {
         graphs : {
-            distance : [
-                ['min', 'Minimum Distance'], ['max', 'Maximum Distance'], ['stepSize', 'Step Size']
-            ]
+            distance : [['min', 'Minimum Distance'], ['max', 'Maximum Distance'], ['stepSize', 'Step Size']]
         },
-        calculations : [
-            ['min', 'Minimum Launch Angle', '°'], ['max', 'Maximum Launch Angle', '°'], 
-            ['precision', 'Launch Angle Increment', '°'], ['timeStep', 'Calculation Time Step', 's']
-        ]
-    }
-    calcSettingsFinder = (id) => {
-        if(id === 'timeStep'){
-            return this.props.settings.calculationSettings.timeStep;
-        }else{
-            return this.props.settings.calculationSettings.launchAngle[id];
+        calculations : {
+            launchAngle : [['min', 'Minimum', '°'], ['max', 'Maximum', '°'], ['precision', 'Increment', '°']],
+            numericalMethod : [['timeStep', 'Time Step', 's']]
         }
     }
     render(){
@@ -84,20 +77,33 @@ export class SettingsBar extends React.Component<settingsBarProps, settingsBarSt
             });
         }
         const handleCalculationChange = (value: string, id: string) : void | string => {
+            if(value === ''){return 'error';}
+            const numValue = parseFloat(value);
+            this.props.settings.calculationSettings.launchAngle[id] = numValue;
+        }
+        const handleNumericalMethodChange = (value: string, id: string) : void | string => {
             if(value === ''){return 'error';}
             const numValue = parseFloat(value);
             if(id === 'timeStep'){
                 if(numValue <= 0){return 'error';}
                 this.props.settings.calculationSettings.timeStep = numValue;
-            }else{
-                this.props.settings.calculationSettings.launchAngle[id] = numValue;
             }
         }
-        const generateCalculationForm = () => {
-            return this.forms.calculations.map((value, i) => {
+        const generateLaunchAngleForm = () => {
+            return this.forms.calculations.launchAngle.map((value, i) => {
+                const initialValue = this.props.settings.calculationSettings.launchAngle[value[0]];
+                return(
+                    <ParameterForm newValue={String(initialValue)} controlId={value[0]} key={i}
+                    label={value[1]} type="number" handleValueChange={handleCalculationChange} labelWidth={3} append={value[2]}/>
+                );
+            });
+        }
+        const generateNumericalMethodForm = () => {
+            return this.forms.calculations.numericalMethod.map((value, i) => {
+                const initialValue = this.props.settings.calculationSettings[value[0]];
                 return(
-                    <ParameterForm newValue={String(this.calcSettingsFinder(value[0]))} controlId={value[0]} key={i}
-                    label={value[1]} type="number" handleValueChange={handleCalculationChange} labelWidth={5} append={value[2]}/>
+                    <ParameterForm newValue={String(initialValue)} controlId={value[0]} key={i}
+                    label={value[1]} type="number" handleValueChange={handleNumericalMethodChange} labelWidth={3} append={value[2]}/>
                 );
             });
         }
@@ -111,15 +117,10 @@ export class SettingsBar extends React.Component<settingsBarProps, settingsBarSt
         if(this.props.settings.format.shortNames){shortNamesDefault=["0"];}
 
         const handleColorChange = (value: string, id: string) : void | string => {
-            if(value === ''){
-                return 'error';
-            }
+            if(value === ''){return 'error';}
             const numValues = parseFloat(value) / 100;
-            if(numValues > 1 || numValues < 0){
-                return 'error';
-            }
+            if(numValues > 1 || numValues < 0){return 'error';}
             this.props.settings.format.colors[id] = numValues;
-            //console.log(this.props.settings.format.colors[id]);
         }
 
         return(<>
@@ -158,11 +159,12 @@ export class SettingsBar extends React.Component<settingsBarProps, settingsBarSt
                         <Row>
                             <Col style={{padding: 0}}>
                                 <h4>Launch Angle</h4>
-                                {generateCalculationForm()}
+                                {generateLaunchAngleForm()}
                             </Col>
-                            <Col sm="5" style={{paddingRight: 0, paddingLeft: 0}}>
-                                <h4>Numerical Method</h4>
+                            <Col sm="6" style={{paddingRight: 0, paddingLeft: 0}}>
+                                <h4>Numerical Analysis</h4>
                                 <CalculationRadio settings={this.props.settings}/>
+                                {generateNumericalMethodForm()}
                             </Col>
                         </Row>
                     </Col>