Initial commit

source/scripts/components/FloodApp.js

@@ -0,0 +1,26 @@
+var React = require('react');
+var FilterBar = require('./filter-bar/FilterBar');
+var TorrentList = require('./torrent-list/TorrentList');
+
+var FloodApp = React.createClass({
+
+    getInitialState: function() {
+        return null;
+    },
+
+    componentDidMount: function() {
+
+    },
+
+    render: function() {
+
+        return (
+            <div className="flood">
+                <FilterBar />
+                <TorrentList />
+            </div>
+        );
+    }
+});
+
+module.exports = FloodApp;

source/scripts/components/action-bar/Action.js

@@ -0,0 +1,19 @@
+var React = require('react');
+
+var Action = React.createClass({
+
+    getInitialState: function() {
+        return null;
+    },
+
+    render: function() {
+
+        var classString = 'action action--' + this.props.slug;
+
+        return (
+            <span className={classString} onClick={this.props.clickHandler}>{this.props.label}</span>
+        );
+    }
+});
+
+module.exports = Action;

source/scripts/components/action-bar/ActionBar.js

@@ -0,0 +1,29 @@
+var React = require('react');
+var Action = require('./Action.js');
+
+var FilterBar = React.createClass({
+
+    getInitialState: function() {
+
+        return null;
+    },
+
+    handleClick: function(event) {
+        console.log('click ' + event.target);
+    },
+
+    render: function() {
+
+        return (
+            <nav className="filter-bar">
+                <div className="actions">
+                    <Action label="Add Torrent" slug="add-torrent" clickHandler={this.handleClick} />
+                    <Action label="Remove Torrent" slug="remove-torrent" clickHandler={this.handleClick} />
+                </div>
+            </nav>
+        );
+    }
+});
+
+
+module.exports = FilterBar;

source/scripts/components/filter-bar/ClientStats.js

@@ -0,0 +1,93 @@
+var React = require('react');
+var ClientStore = require('../../stores/ClientStore');
+var format = require('../../helpers/formatData');
+
+var getClientStats = function() {
+    return {
+        clientStats: ClientStore.getStats()
+    }
+}
+
+var Speed = React.createClass({
+    getInitialState: function() {
+        return null;
+    },
+
+    render: function() {
+        return (
+            <span className="speed">
+                {this.props.value}
+                <em className="unit">{this.props.unit}</em>
+            </span>
+        );
+    }
+});
+
+var DataTransferred = React.createClass({
+    getInitialState: function() {
+        return null;
+    },
+
+    render: function() {
+        return (
+            <span className="transferred">
+                {this.props.value}
+                <em className="unit">{this.props.unit}</em>
+            </span>
+        );
+    }
+});
+
+var ClientStats = React.createClass({
+
+    getInitialState: function() {
+        return {
+            clientStats: {
+                speed: {
+                    upload: 0,
+                    download: 0
+                },
+                transferred: {
+                    upload: 0,
+                    download: 0
+                }
+            }
+        };
+    },
+
+    componentDidMount: function() {
+        ClientStore.addChangeListener(this._onChange);
+    },
+
+    componentWillUnmount: function() {
+        ClientStore.removeChangeListener(this._onChange);
+    },
+
+    render: function() {
+
+        var uploadSpeed = format.data(this.state.clientStats.speed.upload, '/s');
+        var uploadTotal = format.data(this.state.clientStats.transferred.upload);
+        var downloadSpeed = format.data(this.state.clientStats.speed.download, '/s');
+        var downloadTotal = format.data(this.state.clientStats.transferred.download);
+
+        return (
+            <div className="client-stats filter-bar__item">
+                <div className="client-stat client-stat--upload">
+                    <Speed value={uploadSpeed.value} unit={uploadSpeed.unit} />
+                    <DataTransferred value={uploadTotal.value} unit={uploadTotal.unit} />
+                </div>
+                <div className="client-stat client-stat--download">
+                    <Speed value={downloadSpeed.value} unit={downloadSpeed.unit} />
+                    <DataTransferred value={downloadTotal.value} unit={downloadTotal.unit} />
+                </div>
+            </div>
+        );
+    },
+
+    _onChange: function() {
+        this.setState(getClientStats);
+    }
+
+});
+
+module.exports = ClientStats;

source/scripts/components/filter-bar/FilterBar.js

@@ -0,0 +1,28 @@
+var React = require('react');
+var ClientStats = require('./ClientStats');
+var StatusFilter = require('./StatusFilter');
+
+var FilterBar = React.createClass({
+
+    getInitialState: function() {
+
+        return null;
+    },
+
+    handleClick: function(event) {
+        console.log('click ' + event.target);
+    },
+
+    render: function() {
+
+        return (
+            <nav className="filter-bar">
+                <ClientStats />
+                <StatusFilter />
+            </nav>
+        );
+    }
+});
+
+
+module.exports = FilterBar;

source/scripts/components/filter-bar/StatusFilter.js

@@ -0,0 +1,40 @@
+var React = require('react');
+
+var ClientStats = React.createClass({
+
+    getInitialState: function() {
+
+        return null;
+    },
+
+    render: function() {
+
+        var filters = [
+            'All',
+            'Downloading',
+            'Completed',
+            'Active',
+            'Inactive',
+            'Error'
+        ];
+
+        var filterEls = filters.map(function(filter) {
+
+            var filterSlug = filter.toLowerCase();
+            var classString = 'status-filter__item status-filter__item--' + filterSlug;
+
+            return (
+                <li className={classString}>{filter}</li>
+            );
+        });
+
+        return (
+            <ul className="status-filter filter-bar__item">
+                {filterEls}
+            </ul>
+        );
+    }
+
+});
+
+module.exports = ClientStats;

source/scripts/components/torrent-list/Torrent.js

@@ -0,0 +1,65 @@
+var React = require('react');
+var TorrentActions = require('../../actions/TorrentActions.js');
+var format = require('../../helpers/formatData');
+
+var Torrent = React.createClass({
+
+    getInitialState: function() {
+
+        return null;
+    },
+
+    render: function() {
+
+        var torrent = this.props.data;
+
+        var uploadRate = format.data(torrent.uploadRate, '/s');
+        var uploadTotal = format.data(torrent.uploadTotal);
+        var downloadRate = format.data(torrent.downloadRate, '/s');
+        var downloadTotal = format.data(torrent.downloadTotal);
+
+        return (
+            <li className="torrent">
+                <span className="torrent__detail--primary">{torrent.name}</span>
+                <ul className="torrent__details torrent__detail--secondary">
+                    <li className="torrent__detail--secondary--sub">{torrent.state}</li>
+                    <li className="torrent__detail--secondary--sub">
+                        {uploadRate.value}
+                        <em className="unit">{uploadRate.unit}</em>
+                    </li>
+                    <li className="torrent__detail--secondary--sub">
+                        {uploadTotal.value}
+                        <em className="unit">{uploadTotal.unit}</em>
+                    </li>
+                    <li className="torrent__detail--secondary--sub">
+                        {downloadRate.value}
+                        <em className="unit">{downloadRate.unit}</em>
+                    </li>
+                    <li className="torrent__detail--secondary--sub">
+                        {downloadTotal.value}
+                        <em className="unit">{downloadTotal.unit}</em>
+                    </li>
+                    <li className="torrent__detail--secondary--sub">
+                        {torrent.ratio}
+                    </li>
+                    <li className="torrent__detail--secondary--sub" onClick={this._onStart}>
+                        Start
+                    </li>
+                    <li className="torrent__detail--secondary--sub" onClick={this._onStop}>
+                        Stop
+                    </li>
+                </ul>
+            </li>
+        );
+    },
+
+    _onStop: function() {
+        TorrentActions.stop(this.props.data.hash);
+    },
+
+    _onStart: function() {
+        TorrentActions.start(this.props.data.hash);
+    }
+});
+
+module.exports = Torrent;

source/scripts/components/torrent-list/TorrentList.js

@@ -0,0 +1,65 @@
+var React = require('react');
+var Torrent = require('./Torrent');
+var TorrentStore = require('../../stores/TorrentStore.js')
+
+var getTorrentList = function() {
+    return {
+        allTorrents: TorrentStore.getAll()
+    }
+}
+
+var TorrentList = React.createClass({
+
+    getInitialState: function() {
+
+        return {
+            allTorrents: []
+        };
+    },
+
+    componentDidMount: function() {
+        TorrentStore.addChangeListener(this._onChange);
+    },
+
+    componentWillUnmount: function() {
+        TorrentStore.removeChangeListener(this._onChange);
+    },
+
+    render: function() {
+
+        var torrents = this.state.allTorrents;
+
+        var torrentList = torrents.map(function(torrent) {
+
+            return (
+                <Torrent key={torrent.hash} data={torrent} />
+            );
+        });
+
+        return (
+            <ul className="torrent__list">
+                <header className="torrent__header">
+                    <span className="torrent__detail--primary">Name</span>
+                    <div className="torrent__detail--secondary">
+                        <span className="torrent__detail--secondary--sub">State</span>
+                        <span className="torrent__detail--secondary--sub">Up</span>
+                        <span className="torrent__detail--secondary--sub">&nbsp;</span>
+                        <span className="torrent__detail--secondary--sub">Down</span>
+                        <span className="torrent__detail--secondary--sub">&nbsp;</span>
+                        <span className="torrent__detail--secondary--sub">Ratio</span>
+                        <span className="torrent__detail--secondary--sub">Start</span>
+                        <span className="torrent__detail--secondary--sub">Stop</span>
+                    </div>
+                </header>
+                {torrentList}
+            </ul>
+        );
+    },
+
+    _onChange: function() {
+        this.setState(getTorrentList);
+    }
+
+});
+
+module.exports = TorrentList;