/** @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({ changeState: React.autoBind(function(event) { $.post("/tasks/state", {'id': this.props.task.id}) .done(function (data, textStatus, jqXHR) { if (data.status == "ok") this.setState({state: data.state}); }.bind(this)); }), getInitialState: function () { return {state: this.props.task.state}; }, moveUp: React.autoBind(function(event) { $.post("/tasks/up", {'id': this.props.task.id}); }), moveDown: React.autoBind(function(event) { $.post("/tasks/down", {'id': this.props.task.id}); }), render: function() { return ( {" "} {this.state.state} {this.props.task.description} ); } }); var StoryTaskTable = React.createClass({ render: function() { var taskNodes = this.props.tasks.map(function (task) { return ; }.bind(this)); 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) { task.storyId = this.props.data.id; $.post("/stories/tasks/new", task); }), render: function() { var taskTable = null; if (this.props.data.tasks) taskTable = ; if (this.props.data) { return (
Assignee: {this.props.data.assignee}
{this.props.data.content}
{taskTable}
); } return null; } }); var StoryRow = React.createClass({ render: function() { var sdata = null; if (this.state.content) sdata = ; return ( {" "} {this.state.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; } $.get('/stories/' + this.props.story.id) .done(function (data, textStatus, jqXHR) { this.setState({content: data}); }.bind(this), 'json'); }), changeState: React.autoBind(function(event) { $.post("/stories/state", {'id': this.props.story.id}) .done(function(data, textStatus, jqXHR) { if (data.status == "ok") this.setState({state: data.state}); }.bind(this)); }), moveUp: React.autoBind(function(event) { $.post("/stories/up", {'id': this.props.story.id}) .done(function (data, textStatus, jqXHR) { if (data.status == "ok") this.props.onMoved(1); }.bind(this)); }), moveDown: React.autoBind(function(event) { $.post("/stories/down", {'id': this.props.story.id}) .done(function (data) { if (data.status == "ok") this.props.onMoved(-1); }.bind(this)); }) }); var StoryTable = React.createClass({ handleMoved: React.autoBind(function(direction) { this.props.onStoryMoved(direction); }), render: function() { var storyNodes = this.props.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({ loadStoriesFromServer: function() { $.get(this.props.url) .done(function(data) { this.setState({data: data}); }.bind(this)); }, getInitialState: function() { return {data: []}; }, componentWillMount: function() { this.loadStoriesFromServer(); setInterval( this.loadStoriesFromServer.bind(this), this.props.pollInterval ); }, handleStoryMoved: React.autoBind(function (direction) { this.loadStoriesFromServer(); }), handleStorySubmit: React.autoBind(function (story) { $.post("/stories/new", story) .done(function (data, textStatus, jqXHR) { if (data.status == "ok") this.loadStoriesFromServer(); }.bind(this)) .fail(function (jqXHR, textStatus, errorThrown) { alert("error: " + errorThrown); }.bind(this)); }), render: function() { return (
); } }); React.renderComponent( , document.getElementById('content') );