New configuration screen with React

.gitignore

@@ -0,0 +1,11 @@
+# Ignore build generated files
+build/
+dist/
+dist.zip
+
+# Ignore waf lock file
+.lock-waf*
+
+# Ignore installed node modules
+node_modules/
+Online-Workout-Manager/public/javascripts/build.js

Online-Workout-Manager/client/Constants.js

@@ -0,0 +1,3 @@
+exports.ItemTypes = {
+    KNIGHT: 'knight'
+};

Online-Workout-Manager/client/InlineEdit.js

@@ -0,0 +1,57 @@
+var React = require('react');
+
+// could be a controlled input
+var InlineEdit = React.createClass({
+    getInitialState: function(){
+        return {
+            editing: this.props.editing,
+            text: this.props.text
+        };
+    },
+    propTypes:{
+        text: React.PropTypes.string,
+        editing: React.PropTypes.bool,
+        onChange: React.PropTypes.func
+    },
+
+    getDefaultProps: function(){
+        return {
+            text: "Some Words",
+            editing: false,
+            onChange: function(){}
+        };
+    },
+    handleEdit: function(e){
+        e.stopPropagation();
+        this.setState({editing: true});
+    },
+    handleFinish: function(){
+        this.setState({editing: false});
+        this.props.onChange(this.state.text);
+    },
+    _keyAction: function(e){
+        if(e.keyCode === 13) {
+            // Enter to save
+            this.setState({text: e.target.value, editing: false});
+            this.props.onChange(e.target.value);
+        } else if(e.keyCode === 27) {
+            // ESC to cancel
+            this.handleFinish();
+        }
+    },
+    render: function() {
+        return(
+            <span onClick={this.handleEdit}>
+                {this.state.editing ? (<input
+                    type="text"
+                    onKeyDown={this._keyAction}
+                    onBlur={this.handleFinish}
+                    defaultValue={this.state.text}
+                    ref="textField" />): this.state.text}
+            </span>
+
+        );
+    }
+});
+
+module.exports = InlineEdit;

Online-Workout-Manager/client/Move.js

@@ -0,0 +1,55 @@
+;
+var React = require('react');
+var PropTypes = React.PropTypes;
+var ItemTypes = require('./Constants').ItemTypes;
+var DragSource = require('react-dnd').DragSource;
+
+var knightSource = {
+    beginDrag: function (props) {
+        return {keyId: props.keyId};
+    }
+};
+
+function collect(connect, monitor) {
+    return {
+        connectDragSource: connect.dragSource(),
+        isDragging: monitor.isDragging()
+    }
+}
+
+var Move = React.createClass({
+    propTypes: {
+        keyId: PropTypes.number.isRequired,
+        connectDragSource: PropTypes.func.isRequired,
+        isDragging: PropTypes.bool.isRequired
+    },
+    render: function() {
+        var connectDragSource = this.props.connectDragSource;
+        var isDragging = this.props.isDragging;
+        return connectDragSource(
+            <div style={{
+                    opacity: isDragging ? 0.5 : 1
+                 }}
+                 >
+                <span onClick={this.props.onClick}>
+                    {this.props.move.type == "reps" ? <span className="glyphicon glyphicon-repeat"></span> : <span className="glyphicon glyphicon-time"></span>}&nbsp;
+                    {this.props.move.name}&nbsp;
+                    {this.props.move.type == "reps" ? "x" + this.props.move.value : this.props.move.value + "s"}
+                </span>
+                <div className="pull-right">
+                    <button type="button" className="btn btn-link btn-xs" onClick={this.props.onClick}>
+                        <span className="glyphicon glyphicon-pencil"></span>
+                    </button>
+                    <button type="button" className="btn btn-link btn-xs" onClick={this.props.copyMove}>
+                        <span className="glyphicon glyphicon-duplicate"></span>
+                    </button>
+                    <button type="button" className="btn btn-link btn-xs" onClick={this.props.removeMove}>
+                        <span className="glyphicon glyphicon-trash"></span>
+                    </button>
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = DragSource(ItemTypes.KNIGHT, knightSource, collect)(Move);

Online-Workout-Manager/client/MoveForm.js

@@ -0,0 +1,56 @@
+;
+var React = require('react');
+
+var MoveForm = React.createClass({
+    handleChange: function(nameOfChange, event) {
+        var data = {};
+        data[nameOfChange] = event.target.value;
+        this.setState(data);
+    },
+    getInitialState: function(){
+        return {
+            name: this.props.move.name,
+            type: this.props.move.type,
+            value: this.props.move.value
+        };
+    },
+    handleSave: function(){
+        this.props.editMove({
+            name:this.state.name,
+            type:this.state.type,
+            value:this.state.value
+        });
+    },
+    setType: function(type){
+        this.setState({type: type});
+    },
+    render: function() {
+        return (
+            <div className="form-inline">
+                <div className="form-group">
+                    <div className="btn-group" role="group">
+                        <button type="button"
+                                className={"btn " + (this.state.type == "reps" ? "btn-info" : "btn-default")}
+                                onClick={this.setType.bind(this, "reps")}>
+                            <span className="glyphicon glyphicon-repeat"></span> Reps
+                        </button>
+                        <button type="button"
+                                className={"btn " + (this.state.type == "time" ? "btn-info" : "btn-default")}
+                                onClick={this.setType.bind(this, "time")}>
+                            <span className="glyphicon glyphicon-time"></span> Time
+                        </button>
+                    </div>
+                </div>
+                <div className="form-group">
+                    <input type="text" className="form-control" placeholder="What" onChange={this.handleChange.bind(this, 'name')} value={this.state.name}/>
+                </div>
+                <div className="form-group">
+                    <input type="number" className="form-control" placeholder="Value" onChange={this.handleChange.bind(this, 'value')} value={this.state.value}/>
+                </div>
+                <button type="button" className="btn btn-success" onClick={this.handleSave}>Done</button>
+            </div>
+        );
+    }
+});
+
+module.exports = MoveForm;

Online-Workout-Manager/client/MoveHolder.js

@@ -0,0 +1,71 @@
+;
+var React = require('react');
+var Move = require('./Move');
+var MoveForm = require('./MoveForm');
+var ItemTypes = require('./Constants').ItemTypes;
+var DropTarget = require('react-dnd').DropTarget;
+var PropTypes = React.PropTypes;
+
+var squareTarget = {
+    drop: function (props, monitor) {
+        props.moveMove(monitor.getItem().keyId)
+    }
+};
+
+function collect(connect, monitor) {
+    return {
+        connectDropTarget: connect.dropTarget(),
+        isOver: monitor.isOver()
+    };
+}
+
+var MoveHolder = React.createClass({
+    propTypes: {
+        keyId: PropTypes.number.isRequired,
+        isOver: PropTypes.bool.isRequired,
+        moveMove: PropTypes.func.isRequired
+    },
+    getDefaultProps: function(){return {
+        'editAtInit':false
+    }},
+    getInitialState: function() {
+        return {editing:this.props.editAtInit};
+    },
+    edit: function(){
+        this.setState({editing: true});
+    },
+    done: function(data){
+        this.setState({editing: false});
+        this.props.editMove(data);
+    },
+    render: function() {
+        // var key = this.props.key;
+        var connectDropTarget = this.props.connectDropTarget;
+        var isOver = this.props.isOver;
+        return connectDropTarget(
+            <li className="list-group-item icons-on-hover" style={{
+                position: 'relative',
+                width: '100%',
+                height: '100%'
+              }}>
+                {this.state.editing ?
+                    <MoveForm editMove={this.done} move={this.props.move} />:<Move {...this.props} onClick={this.edit} />
+                }
+                {isOver &&
+                <div style={{
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    height: '10%',
+                    width: '100%',
+                    zIndex: 1,
+                    opacity: 0.5,
+                    backgroundColor: 'yellow',
+                  }} />
+                }
+            </li>
+        );
+    }
+});
+
+module.exports = DropTarget(ItemTypes.KNIGHT, squareTarget, collect)(MoveHolder);

Online-Workout-Manager/client/Workout.js

@@ -0,0 +1,60 @@
+;
+var React = require('react');
+var MoveHolder = require('./MoveHolder');
+var InlineEdit = require('./InlineEdit');
+
+var Workout = React.createClass({
+    getInitialState: function() {
+        return {editing: false};
+    },
+    edit: function(){
+        this.setState({'editing': !this.state.editing});
+    },
+    render: function() {
+        var drop = null;
+        if (this.state.editing) {
+            return (
+                <ul className="list-group">
+                    <li className="list-group-item list-group-item-info" onClick={this.edit}>
+                        <InlineEdit
+                            text={this.props.workout.title}
+                            onChange={this.props.renameWorkout} />
+                        <div className="pull-right">
+                            <button type="button" className="btn btn-link btn-xs" onClick={this.props.removeWorkout}>
+                                <span className="glyphicon glyphicon-trash"></span>
+                            </button>
+                        </div>
+                    </li>
+
+                    {this.props.workout.moves.map(function (object, i) {
+                        return <MoveHolder key={i} move={object} keyId={i}
+                                           removeMove={this.props.removeMove.bind(this, i)}
+                                           addMove={this.props.addMove.bind(this, i)}
+                                           copyMove={this.props.copyMove.bind(this, i)}
+                                           editMove={this.props.editMove.bind(this, i)}
+                                           moveMove={this.props.moveMove.bind(this, i)}
+                        />
+                    }, this)}
+
+                    <li className="list-group-item list-group-item-info">
+                        <a onClick={this.props.addMove}><span className="glyphicon glyphicon-plus"></span> Add move</a>
+                    </li>
+                </ul>
+            );
+
+
+        } else {
+            return (
+                <ul className="list-group">
+                    <li className="list-group-item list-group-item-info" onClick={this.edit}>
+                        <InlineEdit
+                            text={this.props.workout.title}
+                            onChange={this.props.renameWorkout} />
+                    </li>
+                </ul>
+            );
+        }
+    }
+});
+
+module.exports = Workout;