CreateStrategy form now supports multiple params #34

public/js/components/strategy/CreateStrategy.jsx

@@ -2,21 +2,52 @@ var React          = require('react');
 
 var CreateStrategy = React.createClass({
 
+    getInitialState: function() {
+        return {
+            parameters: []
+        };
+    },
+
+
+    onSubmit: function(event) {
+        event.preventDefault();
+        console.log(event);
+    },
+
+    handleAddParam: function(event) {
+        event.preventDefault();
+        var id = this.state.parameters.length + 1;
+        var params = this.state.parameters.concat([{id:id, name: "param_" + id, label: "Parameter " +id}]);
+        this.setState({parameters: params});
+    },
+
     render: function() {
+        var parameters = (this.state.parameters.map(function(param) {
+            return <div className="formelement">
+                <label className="t4">{param.label}</label>
+                <div className="input">
+                    <input type="text" name={param.name} />
+                </div>
+            </div>
+        }));
+
         return (
-            <div className="line pam mhl bg-blue-xlt">
+            <div className="line pam bg-blue-xlt">
                 <div className="unit r-size1of2">
-                    <form>
+                    <form onSubmit={this.onSubmit}>
                         <fieldset>
-                            <legend>New strategy</legend>
+                            <legend>Create strategy</legend>
                             <div className="formelement">
                                 <label for="strategy_name" className="t4">Name</label>
-                                <div class="input">
+                                <div className="input">
                                     <input id="trategy_name" type="text" name="name" />
                                 </div>
                             </div>
+
+                            {parameters}
+
                             <div className="formelement">
-                                <a href="#add">+ Add required parameter</a>
+                                <a href="#add" onClick={this.handleAddParam}>+ Add required parameter</a>
                             </div>
                             <div className="actions">
                                 <input type="submit" value="Save" className="primary mrs" />

public/js/components/strategy/StrategyComponent.jsx

@@ -43,21 +43,11 @@ var StrategyComponent = React.createClass({
     render: function() {
         return (
             <div>
-                <div className="line">
-                    <div className="unit r-size1of4">
-                        <h2>Strategies</h2>
-                    </div>
-
-                    <div className="unit r-size3of4 rightify prl ptm">
-                        <button className="" onClick={this.handleNewStrategy}>Create Strategy</button>
-                    </div>
-                </div>
-
                 <ErrorMessages errors={this.state.errors} onClearErrors={this.clearErrors} />
 
-                <hr />
+                 {this.state.createView ? this.renderCreateView() : this.renderCreateButton()}
 
-                {this.state.createView ? this.renderCreateView() : null}
+                <hr />
 
                 <StrategyList strategies={this.state.strategies} />
             </div>
@@ -66,6 +56,14 @@ var StrategyComponent = React.createClass({
 
     renderCreateView: function() {
         return (<CreateStrategy handleCancelNewStrategy={this.handleCancelNewStrategy} />)
+    },
+
+    renderCreateButton: function() {
+        return (
+            <p className="">
+                <button className="" onClick={this.handleNewStrategy}>Create strategy</button>
+            </p>
+            );
     }
 });