/** @jsx React.DOM */ var StateIcon = React.createClass({ render: function() { var icon_names = {"TODO": "icon-check-empty", "DOING": "icon-sign-blank", "DONE": "icon-check"}; return ; } }); var StoryData = React.createClass({ render: function() { if (this.props.data) { return (
Assignee: {this.props.data.Assignee}
{this.props.data.content}
); } return null; } }); var StoryRow = React.createClass({ render: function() { // A little ugly to get a space, but I don't know of any other // way. var state = " " + this.state.state; var sdata = null; if (this.state.content) sdata = ; return ( {state} As a {this.props.story.role}, I {this.props.story.necessity} to {this.props.story.title}
{sdata} ); }, getInitialState: function() { return {state: this.props.story.state, content: null}; }, handleClick: React.autoBind(function(event) { if (!!this.state.content) { this.setState({content: null}); return; } var self = this; $.get('/stories/' + this.props.story.id, null, function (data, textStatus, jqXHR) { self.setState({content: data}); }, 'json'); }), changeState: React.autoBind(function(event) { $.ajax({ url: "/stories/state/", type: "POST", data: {'id': this.props.story.id}, dataType: 'json', mimeType: 'textPlain', success: function(data) { this.setState({state: eval(data).state}); }.bind(this) }); }), moveUp: React.autoBind(function(event) { $.ajax({ url: "/stories/up/", type: "POST", data: {'id': this.props.story.id}, dataType: 'json', mimeType: 'textPlain', success: function (data) { this.props.onMoved(1); }.bind(this) }); }), moveDown: React.autoBind(function(event) { $.ajax({ url: "/stories/down/", type: "POST", data: {'id': this.props.story.id}, dataType: 'json', mimeType: 'textPlain', success: function (data) { this.props.onMoved(-1); }.bind(this) }); }) }); var StoryTable = React.createClass({ loadStoriesFromServer: function() { $.ajax({ url: this.props.url, mimeType: 'textPlain', success: function(data) { this.setState({data: eval(data)}); }.bind(this) }); }, getInitialState: function() { return {data: []}; }, componentWillMount: function() { this.loadStoriesFromServer(); setInterval( this.loadStoriesFromServer.bind(this), this.props.pollInterval ); }, handleMoved: React.autoBind(function(direction) { this.loadStoriesFromServer(); }), render: function() { var storyNodes = this.state.data.map(function (story) { return ; }.bind(this)); return ( {storyNodes}
); } }); var StoryForm = React.createClass({ handleSubmit: React.autoBind(function() { var role = this.refs.role.getDOMNode().value.trim(); var necessity = this.refs.necessity.getDOMNode().value.trim(); var headline = this.refs.headline.getDOMNode().value.trim(); this.props.onStorySubmit({role: role, necessity: necessity, headline: headline}); this.refs.role.getDOMNode().value = ''; this.refs.necessity.getDOMNode().value = ''; this.refs.headline.getDOMNode().value = ''; return false; }), render: function() { return (
New story
As a I to
); } }); var StoryPage = React.createClass({ handleStorySubmit: React.autoBind(function (story) { $.ajax({ url: "/stories/new/", type: "POST", data: story, dataType: 'json', mimeType: 'textPlain' }); }), render: function() { return (
); } }); React.renderComponent( , document.getElementById('content') );