Preliminary GUI for defining custom strategies

(relates to #34)

public/js/components/strategy/CreateStrategy.jsx

@@ -0,0 +1,33 @@
+var React          = require('react');
+
+var CreateStrategy = React.createClass({
+
+    render: function() {
+        return (
+            <div className="line pam mhl bg-blue-xlt">
+                <div className="unit r-size1of2">
+                    <form>
+                        <fieldset>
+                            <legend>New strategy</legend>
+                            <div className="formelement">
+                                <label for="strategy_name" className="t4">Name</label>
+                                <div class="input">
+                                    <input id="trategy_name" type="text" name="name" />
+                                </div>
+                            </div>
+                            <div className="formelement">
+                                <a href="#add">+ Add required parameter</a>
+                            </div>
+                            <div className="actions">
+                                <input type="submit" value="Save" className="primary mrs" />
+                                <button onClick={this.props.handleCancelNewStrategy}>Cancel</button>
+                            </div>
+                        </fieldset>
+                    </form>
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = CreateStrategy;

public/js/components/strategy/Strategy.jsx

@@ -1,17 +1,19 @@
 var React          = require('react');
 
-var StrategyList = React.createClass({
+var Strategy = React.createClass({
     propTypes: {
-        strategies: React.PropTypes.array.isRequired
+        strategy: React.PropTypes.object.isRequired
     },
 
     render: function() {
-        return (<div>
-
-                {JSON.stringify(this.props.strategies)}
+        return (
+            <div className="line mal">
+                <div className="unit r-size1of3">
+                    {this.props.strategy.name}
                 </div>
-            );
+            </div>
+        );
     }
 });
 
-module.exports = StrategyList;
+module.exports = Strategy;

public/js/components/strategy/StrategyComponent.jsx

@@ -1,27 +1,71 @@
 var React          = require('react'),
-    strategyStore  = require('../../stores/StrategyStore');
+    StrategyList   = require('./StrategyList'),
+    CreateStrategy = require('./CreateStrategy'),
+    strategyStore  = require('../../stores/StrategyStore'),
+    ErrorMessages  = require('../ErrorMessages');
 
 var StrategyComponent = React.createClass({
     getInitialState: function() {
         return {
             createView: false,
-            strategies: []
+            strategies: [],
+            errors: []
         };
     },
 
     componentDidMount: function () {
         strategyStore.getStrategies().then(function(res) {
             this.setState({strategies: res.strategies});
-        }.bind(this));
+        }.bind(this), this.initError);
+    },
+
+    initError: function() {
+        this.handleError("Could not load inital strategies from server");
+    },
+
+    clearErrors: function() {
+        this.setState({errors: []});
+    },
+
+    handleError: function(error) {
+        var errors = this.state.errors.concat([error]);
+        this.setState({errors: errors});
+    },
+
+    handleNewStrategy: function() {
+        this.setState({createView: true});
+    },
+
+    handleCancelNewStrategy: function() {
+        this.setState({createView: false});
     },
 
     render: function() {
         return (
             <div>
-                <h1>Strategies</h1>
-                {JSON.stringify(this.state.strategies)}
+                <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() : null}
+
+                <StrategyList strategies={this.state.strategies} />
             </div>
             );
+    },
+
+    renderCreateView: function() {
+        return (<CreateStrategy handleCancelNewStrategy={this.handleCancelNewStrategy} />)
     }
 });
 

public/js/components/strategy/StrategyList.jsx

@@ -0,0 +1,19 @@
+var React = require('react'),
+    Strategy = require('./Strategy');
+
+var StrategyList = React.createClass({
+    propTypes: {
+        strategies: React.PropTypes.array.isRequired
+    },
+
+    render: function() {
+        var strategyNodes = this.props.strategies.map(function(strategy) {
+            return <Strategy strategy={strategy} />;
+        });
+        return (
+            <div>{strategyNodes}</div>
+            );
+    }
+});
+
+module.exports = StrategyList;