Esempio n. 1
0
var Footer = require('./layoutFooter.react');
var Header = require('./layoutHeader.react');
var MainSection = require('./layoutMain.react');
var TodoStore = require('../stores/todoStore');

var TodoApp = React.createClass({
  render: function() {
  	return (
      <div>
        <Header />
        <MainSection
          allTodos={this.props.allTodos}
          areAllComplete={this.props.areAllComplete}
        />
        <Footer allTodos={this.props.allTodos} />
      </div>
  	);
  }
});

module.exports = Marty.createContainer(TodoApp, {
  listenTo: TodoStore,
  fetch: {
    allTodos() {
      return TodoStore.getState()
    },
    areAllComplete() {
      return TodoStore.areAllComplete()
    }
  }
});
Esempio n. 2
0
    )
  }

, _onToggleComplete: function() {
    this.app.todoActions.toggleComplete(this.props.todo)
  }

, _onDoubleClick: function() {
    this.setState({isEditing: true})
  }

  /**
   * Event handler called within TodoTextInput.
   * Defining this here allows TodoTextInput to be used in multiple places
   * in different ways.
   * @param  {string} text
   */
, _onSave: function(text) {
    this.app.todoActions.updateText(this.props.todo.id, text)
    this.setState({isEditing: false})
  }

, _onDestroyClick: function() {
    this.app.todoActions.destroy(this.props.todo.id)
  }

})

module.exports = Marty.createContainer(TodoItem)

    var todos = [];

    for (var key in allTodos) {
      todos.push(<TodoItem key={key} todo={allTodos[key]} />);
    }

    return (
      <section id="main">
        <input
          id="toggle-all"
          type="checkbox"
          onChange={this._onToggleCompleteAll}
          checked={this.props.areAllComplete ? 'checked' : ''}
        />
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul id="todo-list">{todos}</ul>
      </section>
    );
  },

  /**
   * Event handler to mark all TODOs as complete
   */
  _onToggleCompleteAll: function() {
    this.app.todoActions.toggleCompleteAll();
  }

});

module.exports = Marty.createContainer(MainSection);
Esempio n. 4
0
            <label htmlFor="password">Password</label>
            <input type="password"
                   valueLink={this.linkState('password')}
                   className="form-control"
                   id="password"
                   ref="password"
                   placeholder="Password" />
          </div>
          <button type="submit"
                  className="btn btn-default"
                  onClick={this.login}>
            Submit
          </button>
        </div>
        <Link to="home">Home</Link>
      </div>
    )
  }
})

module.exports = Marty.createContainer(Login, {
  listenTo: 'loginStore'
, fetch: {
    loggedIn() {
      return this.app.loginStore.getLoggedIn() ? 'true' : 'false'
    }
  }
})


Esempio n. 5
0
            </Grid>
        </div>);
    }
}

Streams.propTypes = {
    client: React.PropTypes.object.isRequired
};

export default Marty.createContainer(Streams, {
    listenTo: [ StreamStore ],

    fetch: {
        stream_game() {
            return StreamStore.for(this).getStreamGame();
        },

        streams() {
            return StreamStore.for(this).getStreams();
        }
    },

    pending: function () {
        return <div className='loading'>Loading...</div>;
    },

    failed: function(errors) {
        return <div className='error'>Failed to load streams. {errors}</div>;
    }
});
Esempio n. 6
0
                </div>
            </div>;
        } else {
            return <div></div>;
        }
    }
    backClick(event) {
        if (event.target === this.refs.background.getDOMNode()) {
            this.closeModal();
        }
    }
    closeModal() {
        this.app.modalStore.closeModal();
    }
    makeContent() {
        let [type, args] = this.props.modal;
        let component = this.typeComponents[type];
        return React.createElement(component, {args: args, close: this.closeModal.bind(this)});
    }
}
let ModalRenderComponentContainer = Marty.createContainer(ModalRenderComponent, {
    listenTo: 'modalStore',
    fetch: {
        modal() {
            return this.app.modalStore.getModal();
        }
    }
});

export default ModalRenderComponentContainer;
Esempio n. 7
0
        }
    }

    componentDidUpdate(prevProps) {
        var name = decodeURIComponent(this.props.game_name).trim();
        var prevName = decodeURIComponent(prevProps.game_name).trim();

        if (name !== prevName) {
            clientActionCreators.for(this).selectGame(name);
        }
    }
}

export default Marty.createContainer(Contents, {
    listenTo: [ ClientStore ],

    fetch: {
        client() {
            return ClientStore.for(this).getClient();
        }
    },

    pending: function () {
        return <div className='loading'>Loading...</div>;
    },

    failed: function(errors) {
        return <div className='error'>Failed to load client. {errors}</div>;
    }
});
Esempio n. 8
0
let React = require('react');
let Radium = require('Radium');
let Marty = require('marty');
let CodeActionCreators = require('../actions/codeActionCreators');

let styles = {
  cursor: 'pointer',
  ':hover': {
    backgroundColor: '#eee8d5'
  }
}

class Clickable extends React.Component {
  handleClick(){
    let lineNumber = this.props.lineNumber
    this.app.codeActionCreators.clickLine(lineNumber);
  }
  render(){
    return(
      <div onClick={this.handleClick.bind(this)} style={[styles]}>
        {this.props.children}
      </div>
    );
  }
}

module.exports = Marty.createContainer(Radium.Enhancer(Clickable));
Esempio n. 9
0

  render() {
    return (
      <div>
        <select ref="vizType" defaultValue={"histogram"}>
          <option value="histogram">Histogram</option>
          <option value="timeline">Timeline</option>
        </select>
        <button onClick={this.handleClick.bind(this)}>Add viz</button>
        {
          this.props.visualizations.entrySeq().map(viz => 
            <VizContainer key={viz[0]} vizId={viz[0]}>
              {VizFactory.createComponent(viz[1].type, viz[1].data)}
            </VizContainer>
          )
        }
      </div>
    );
  }

}

module.exports = Marty.createContainer(App, {
  listenTo: VizMgrStore,
  fetch: {
    visualizations() {
      return VizMgrStore.getVisualizations();
    }
  },
});
Esempio n. 10
0
import {createContainer} from 'marty';
import React from 'react';
import isoMarty from './isoflux';

import EchoStore from './EchoStore';

class EchoComponent extends React.Component {
  render() {
    return (
      <div>{this.props.echo}</div>
    );
  }
}

export default createContainer(EchoComponent, {
  listenTo: EchoStore.name,
  fetch: {
    echo() {
      return EchoStore.getEcho(this.props.value);
    }
  }
});
Esempio n. 11
0
const Marty = require('marty');
const ProjectList = require('./ProjectList');

module.exports = Marty.createContainer(ProjectList, {
  listenTo: [ 'TaskStore' ],
  fetch: {
    projects() {
      return this.app.TaskStore.getProjects();
    }
  },
  pending(results) {
    return this.done(results);
  }
});
Esempio n. 12
0
              <li className='room'>
                <a href="javascript:void(0)"
                   onClick={_.partial(this.navigateToRoom, room.id)}>
                   {room.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  },
  navigateToRoom(roomId) {
    NavigationActionCreators.for(this).navigateToRoom(roomId);
  }
});

module.exports = Marty.createContainer(Home, {
  listenTo: RoomsStore,
  fetch: {
    rooms() {
      return RoomsStore.for(this).getAll();
    }
  },
  pending() {
    return <div className='pending'>Loading rooms...</div>;
  },
  failed(errors) {
    return <div className='error'>Failed to load rooms. {errors}</div>;
  }
});
Esempio n. 13
0
import React from 'react';
import Marty from 'marty';
import UserStore from 'stores/UserStore';

class Dashboard extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <main className="Dashboard">
        <h3>{ `Welcome, ${this.props.user.username}!` }</h3>
      </main>
    );
  }
}

export default Marty.createContainer(Dashboard, {
  listenTo: UserStore,
  fetch: {
    user() {
      return UserStore.getUser();
    }
  }
});
Esempio n. 14
0
          onClick={this._onClearCompletedClick}>
          Clear completed ({completed})
        </button>
    }

    return (
      <footer id="footer">
        <span id="todo-count">
          <strong>
            {itemsLeft}
          </strong>
          {itemsLeftPhrase}
        </span>
        {clearCompletedButton}
      </footer>
    )
  }

  /**
   * Event handler to delete all completed TODOs
   */
, _onClearCompletedClick: function() {
    this.app.todoActions.destroyCompleted()
  }

})

module.exports = Marty.createContainer(Footer)


Esempio n. 15
0
   */
  render: function() {
    return (
      <header id="header">
        <h1>todos</h1>
        <TodoTextInput
          id="new-todo"
          placeholder="What needs to be done?"
          onSave={this._onSave}
        />
      </header>
    )
  }

  /**
   * Event handler called within TodoTextInput.
   * Defining this here allows TodoTextInput to be used in multiple places
   * in different ways.
   * @param {string} text
   */
, _onSave: function(text) {
    if (text.trim()){
      this.app.todoActions.create(text)
    }
  }

})

module.exports = Marty.createContainer(Header)

Esempio n. 16
0
                  <div className='message-text'>
                    {message.text}
                  </div>
                </li>
              );
            })}
          </ul>
          <NewMessage roomId={room.id} />
        </div>
      </div>
    );
  }
});

module.exports = Marty.createContainer(Room, {
  listenTo: [RoomsStore, MessagesStore],
  fetch: {
    room() {
      return RoomsStore.for(this).getRoom(this.props.id)
    },
    messages() {
      return MessagesStore.for(this).getMessagesForRoom(this.props.id)
    }
  },
  pending() {
    return <div className='loading'>Loading...</div>;
  },
  failed(errors) {
    return <div className='error'>Failed to load room. {errors}</div>;
  }
});
Esempio n. 17
0
        id.value = '';
        name.value = '';
    }
    render() {
        return (
            <div>
                <h1>Users</h1>
                {this.props.users && this.props.users.map((user) => {
                    return <User key={user.id} {...user} />;
                })}
                <form onSubmit={this.onSubmit.bind(this)}>
                    <input type='text' placeholder='id' name='id' ref='id' />
                    <input type='text' placeholder='name' name='name' ref='name' />
                    <input type="submit" value="Submit" />
                </form>
            </div>
        )
    }
}

Users.contextTypes = Marty.contextTypes;

export default Marty.createContainer(Users, {
    listenTo: 'userStore',
    fetch: {
        users() {
            return this.context.app.userStore.getUsers()
        }
    }
});
Esempio n. 18
0
          </div>
        </div>
      );

      if (!this.props.hasLoadedUser) {
        UserActions.getUserData();
      }
    } else {
      root = <LogIn/>;
      this.context.router.transitionTo('root');
    }

    return(
      <div className="RtTrainer container-fluid">
        { root }
      </div>
    );
  }
}

RtTrainer.contextTypes = { router: React.PropTypes.func.isRequired };

export default Marty.createContainer(RtTrainer, {
  listenTo: UserStore,
  fetch: {
    hasLoadedUser() {
      return UserStore.hasLoadedUser();
    }
  }
});
Esempio n. 19
0
        {this.renderWaveform()}
      </div>
    );
  }
}


AudioRenderer.propTypes = {
  type: PropTypes.oneOf(['div','3d']),
  height: PropTypes.number.isRequired,
  width: PropTypes.number.isRequired
};
AudioRenderer.defaultProps = {
  type: '3d'
};

export default Marty.createContainer(AudioRenderer, {
  listenTo: 'SongStore',
  fetch: {
    audio() {
      return this.app.SongStore.getAudio();
    },
    samples() {
      return this.app.SongStore.getSamples(this.props.width);
    }
  },
  pending() {
    return <div>Rendering...</div>;
  }
});
Esempio n. 20
0
        <ListGroup>
          {_.map(this.props.presentations, (presentation) => {
             return(
                 <ListGroupItemLink to="annotations" params={{presentationId: presentation.id, annotationId: 1}}>
                   {presentation.name}
                 </ListGroupItemLink>);
          })}
        </ListGroup>
        <Button bsStyle="primary">Create</Button>
      </div>
    );
  }
}

module.exports = Marty.createContainer(Presentation, {
  listenTo: 'presentationStore',
  fetch: {
    presentations() {
      return this.app.presentationStore.getPresentations();
    },
    failed(errors) {
      return <div className="Presentation-Failed">{errors}</div>
    },
    pending() {
      return this.done({
        presentations: {}
      });
    }
  }
});
Esempio n. 21
0
let React = require('react');
let Marty = require('marty');
let Button = require('react-bootstrap/lib/Button');

let styles = {
  position: 'fixed',
  backgroundColor: '#002b36',
  color: '#93a1a1',
  width: 'inherit',
  height: '100%'
}

class SideBar extends React.Component {
  render() {
    return (
      <div style={styles}>
        <h1>{this.props.text}</h1>
        <Button onClick={this.handleClick.bind(this)}>Next</Button>
      </div>
    );
  }
  handleClick(event) {
    let newID = parseInt(this.props.annotationId) + 1;
    this.app.navigationActionCreators.navigateToAnnotation(this.props.annotationId, newID);
  }
}

module.exports = Marty.createContainer(SideBar);