Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

GUI for createing strategies with parametersTemplate #34

Browse Source
This commit is contained in:
ivaosthu 2014-11-02 22:39:52 +01:00 committed by Ivar Conradi Østhus
parent d88e9abcea
commit 497395ae39
4 changed files with 144 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
public/js/components/strategy/CreateStrategy.jsx
View File

@ -1,64 +0,0 @@
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 bg-blue-xlt">
<div className="unit r-size1of2">
<form onSubmit={this.onSubmit}>
<fieldset>
<legend>Create strategy</legend>
<div className="formelement">
<label for="strategy_name" className="t4">Name</label>
<div className="input">
<input id="trategy_name" type="text" name="name" />
</div>
</div>
{parameters}
<div className="formelement">
<a href="#add" onClick={this.handleAddParam}>+ 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;

13
public/js/components/strategy/StrategyComponent.jsx
View File

@ -1,6 +1,6 @@
var React = require('react'),
StrategyList = require('./StrategyList'),
CreateStrategy = require('./CreateStrategy'),
StrategyForm = require('./StrategyForm'),
strategyStore = require('../../stores/StrategyStore'),
ErrorMessages = require('../ErrorMessages');
@ -40,6 +40,15 @@ var StrategyComponent = React.createClass({
this.setState({createView: false});
},
handleSave: function(strategy) {
var strategies = this.state.strategies.concat([strategy]);
this.setState({
createView: false,
strategies: strategies
});
console.log("Saved strategy: ", strategy);
},
render: function() {
return (
<div>
@ -55,7 +64,7 @@ var StrategyComponent = React.createClass({
},
renderCreateView: function() {
return (<CreateStrategy handleCancelNewStrategy={this.handleCancelNewStrategy} />)
return (<StrategyForm handleCancelNewStrategy={this.handleCancelNewStrategy} handleSave={this.handleSave} />)
},
renderCreateButton: function() {

132
public/js/components/strategy/StrategyForm.jsx Normal file
View File

@ -0,0 +1,132 @@
var React = require('react');
var StrategyForm = React.createClass({
getDefaultProps: function() {
return {
maxParams: 4
};
},
getInitialState: function() {
return {
parameters: []
};
},
onSubmit: function(event) {
event.preventDefault();
var strategy = {};
strategy.name = this.refs.strategy_name.getDOMNode().value.trim();
strategy.parametersTemplate = {};
var that = this;
this.state.parameters.forEach(function(parameter) {
var name = that.refs[parameter.name].getDOMNode().value.trim();
if(name) {
strategy.parametersTemplate[name] = "string";
}
});
this.props.handleSave(strategy);
},
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});
},
handleRemoveParam: function(event) {
event.preventDefault();
var id = this.state.parameters.length + 1;
var params = this.state.parameters.slice(0, -1);
this.setState({parameters: params});
},
render: function() {
return (
<div className="line pam bg-blue-xlt">
<div className="unit r-size1of2">
<form onSubmit={this.onSubmit}>
<fieldset>
<legend>Create strategy</legend>
<div className="formelement">
<label htmlFor="strategy_name" className="t4">Name</label>
<div className="input">
<input
id="trategy_name"
ref="strategy_name"
type="text"
name="name"
placeholder="Strategy name"
/>
</div>
</div>
{this.renderParameters()}
{this.renderRemoveLink()}
<div className="actions">
<input type="submit" value="Save" className="primary mrs" />
<button onClick={this.props.handleCancelNewStrategy} className="mrs">Cancel</button>
{this.renderAddLink()}
</div>
</fieldset>
</form>
</div>
</div>
);
},
renderParameters: function() {
return this.state.parameters.map(function(param) {
return (
<div className="formelement" key={param.name}>
<label className="t4">{param.label}</label>
<div className="input">
<div className="line">
<div className="unit size2of3">
<input
type="text"
name={param.name}
ref={param.name}
placeholder="Parameter name"
/>
</div>
<div className="unit size1of3">
<select defaultValue="string">
<option value="string">string</option>
</select>
</div>
</div>
</div>
</div>
)
});
},
renderAddLink: function() {
if(this.state.parameters.length < this.props.maxParams) {
return <a href="#add" onClick={this.handleAddParam}>+ Add required parameter</a>;
}
},
renderRemoveLink: function() {
if(this.state.parameters.length > 0) {
return (
<div className="formelement mtn">
<a href="#add" className="negative" onClick={this.handleRemoveParam}>- Remove parameter</a>
</div>
);
}
}
});
module.exports = StrategyForm;

2
webpack.config.js
View File

@ -17,7 +17,7 @@ module.exports = {
module: {
loaders: [
{ test: /\.jsx$/, loader: 'jsx' }
{ test: /\.jsx$/, loader: 'jsx?harmony' }
]
},