/** @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 StoryTaskRow = React.createClass({ render: function() { var state = " " + this.props.task.state; return ( {state} {this.props.task.description} ); } }); var StoryTaskTable = React.createClass({ render: function() { var taskNodes = this.props.tasks.map(function (task) { return ; }); return ( {taskNodes}
); } }); var StoryTaskForm = React.createClass({ handleSubmit: React.autoBind(function() { var text = this.refs.text.getDOMNode().value.trim(); this.props.onTaskSubmit({description: text}); this.refs.text.getDOMNode().value = ''; return false; }), render: function() { return (
New task
); } }); var StoryData = React.createClass({ handleTaskSubmit: React.autoBind(function (task) { $.ajax({ url: "/stories/" + this.props.data.id + "/tasks/new", type: "POST", data: task, dataType: 'json', mimeType: 'textPlain' }); }), 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(); var content = this.refs.content.getDOMNode().value.trim(); this.props.onStorySubmit({role: role, necessity: necessity, headline: headline, content: content}); this.refs.role.getDOMNode().value = ''; this.refs.necessity.getDOMNode().value = ''; this.refs.headline.getDOMNode().value = ''; this.refs.content.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') );