Add slider for strategy-type 'percentage'

frontend/src/component/feature/form/strategy-configure.jsx

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { Textfield, Button, Card, CardTitle, CardText, CardActions, CardMenu, IconButton }  from 'react-mdl';
 import { Link } from 'react-router';
+import StrategyInputPersentage from './strategy-input-persentage';
 
 const style = {
     flex: '1',
@@ -39,18 +40,27 @@ class StrategyConfigure extends React.Component {
             if (keys.length === 0) {
                 return null;
             }
-            return keys.map(field => (
+            return keys.map(field => {
-                <Textfield
+                if (strategyDefinition.parametersTemplate[field] === 'percentage') {
-                    floatingLabel
+                    return (<StrategyInputPersentage
-                    rows={2}
+                        field={field}
-                    style={{ width: '100%' }}
+                        onChange={this.handleConfigChange.bind(this, field)}
-                    key={field}
+                        value={this.props.strategy.parameters[field]} />);
-                    name={field}
+                } else {
-                    label={field}
+                    return (
-                    onChange={this.handleConfigChange.bind(this, field)}
+                        <Textfield
-                    value={this.props.strategy.parameters[field]}
+                            floatingLabel
-                />
+                            rows={2}
-            ));
+                            style={{ width: '100%' }}
+                            key={field}
+                            name={field}
+                            label={field}
+                            onChange={this.handleConfigChange.bind(this, field)}
+                            value={this.props.strategy.parameters[field]}
+                        />
+                    );
+                }
+            });
         }
         return null;
     }

frontend/src/component/feature/form/strategy-input-persentage.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Slider }  from 'react-mdl';
+
+const labelStyle = {
+    margin: '0',
+    color: '#3f51b5',
+    fontSize: '12px',
+};
+
+export default ({ field, value, onChange }) => (
+    <div>
+        <label style={labelStyle}>{field}: {value}%</label>
+        <Slider min={0} max={100} defaultValue={value} value={value} onChange={onChange} label={field} />
+    </div>
+);