From 57565185b040428ed63fd6e4a431b7ffdde1145f Mon Sep 17 00:00:00 2001
From: ivaosthu <ivar.conradi.osthus@finn.no>
Date: Sat, 10 Dec 2016 16:03:53 +0100
Subject: [PATCH] Add slider for strategy-type 'percentage'

---
 .../feature/form/strategy-configure.jsx       | 34 ++++++++++++-------
 .../form/strategy-input-persentage.jsx        | 15 ++++++++
 2 files changed, 37 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/component/feature/form/strategy-input-persentage.jsx

diff --git a/frontend/src/component/feature/form/strategy-configure.jsx b/frontend/src/component/feature/form/strategy-configure.jsx
index ab44195399..8fa9273d43 100644
--- a/frontend/src/component/feature/form/strategy-configure.jsx
+++ b/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 => (
-                <Textfield
-                    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 keys.map(field => {
+                if (strategyDefinition.parametersTemplate[field] === 'percentage') {
+                    return (<StrategyInputPersentage
+                        field={field}
+                        onChange={this.handleConfigChange.bind(this, field)}
+                        value={this.props.strategy.parameters[field]} />);
+                } else {
+                    return (
+                        <Textfield
+                            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;
     }
diff --git a/frontend/src/component/feature/form/strategy-input-persentage.jsx b/frontend/src/component/feature/form/strategy-input-persentage.jsx
new file mode 100644
index 0000000000..43c63a633a
--- /dev/null
+++ b/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>
+);