mirror of
https://github.com/zoriya/flood.git
synced 2026-05-31 10:22:44 +00:00
Rearrange app directory structure
This commit is contained in:
John Furrow
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
export default class ProgressBar extends React.Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render() {
|
||||
let percent = this.props.percent;
|
||||
let className = 'progress-bar';
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="progress-bar__fill" style={{width: percent + '%'}}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
|
||||
import format from '../../helpers/formatData';
|
||||
import ProgressBar from './ProgressBar';
|
||||
|
||||
const methodsToBind = [
|
||||
'handleClick',
|
||||
'handleRightClick'
|
||||
];
|
||||
|
||||
export default class Torrent extends React.Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
methodsToBind.forEach((method) => {
|
||||
this[method] = this[method].bind(this);
|
||||
});
|
||||
}
|
||||
|
||||
getEta(eta) {
|
||||
if (eta === 'Infinity') {
|
||||
return '∞';
|
||||
} else if (eta.years > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.years}<em className="unit">yr</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.weeks}<em className="unit">wk</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else if (eta.weeks > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.weeks}<em className="unit">wk</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.days}<em className="unit">d</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else if (eta.days > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.days}<em className="unit">d</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.hours}<em className="unit">hr</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else if (eta.hours > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.hours}<em className="unit">hr</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.minutes}<em className="unit">m</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else if (eta.minutes > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.minutes}<em className="unit">m</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.seconds}<em className="unit">s</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<span>
|
||||
{eta.seconds}<em className="unit">s</em>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
getRatio(ratio) {
|
||||
ratio = ratio / 1000;
|
||||
let precision = 1;
|
||||
|
||||
if (ratio < 10) {
|
||||
precision = 2;
|
||||
} else if (ratio < 100) {
|
||||
precision = 0;
|
||||
}
|
||||
|
||||
return ratio.toFixed(precision);
|
||||
}
|
||||
|
||||
handleClick(event) {
|
||||
this.props.handleClick(this.props.data.hash, event);
|
||||
}
|
||||
|
||||
handleRightClick(event) {
|
||||
console.log(event);
|
||||
}
|
||||
|
||||
render() {
|
||||
let torrent = this.props.data;
|
||||
|
||||
let added = new Date(torrent.added * 1000);
|
||||
let addedString = (added.getMonth() + 1) + '/' + added.getDate() + '/' +
|
||||
added.getFullYear();
|
||||
let completed = format.data(torrent.bytesDone);
|
||||
let downloadRate = format.data(torrent.downloadRate, '/s');
|
||||
let downloadTotal = format.data(torrent.downloadTotal);
|
||||
let eta = this.getEta(torrent.eta);
|
||||
let ratio = this.getRatio(torrent.ratio);
|
||||
let totalSize = format.data(torrent.sizeBytes);
|
||||
let uploadRate = format.data(torrent.uploadRate, '/s');
|
||||
let uploadTotal = format.data(torrent.uploadTotal);
|
||||
|
||||
let classes = classNames({
|
||||
'torrent': true,
|
||||
'is-selected': this.props.selected,
|
||||
'is-stopped': torrent.status.indexOf('is-stopped') > -1,
|
||||
'is-paused': torrent.status.indexOf('is-paused') > -1,
|
||||
'is-actively-downloading': downloadRate.value > 0,
|
||||
'is-downloading': torrent.status.indexOf('is-downloading') > -1,
|
||||
'is-seeding': torrent.status.indexOf('is-seeding') > -1,
|
||||
'is-completed': torrent.status.indexOf('is-completed') > -1,
|
||||
'is-checking': torrent.status.indexOf('is-checking') > -1,
|
||||
'is-active': torrent.status.indexOf('is-active') > -1,
|
||||
'is-inactive': torrent.status.indexOf('is-inactive') > -1
|
||||
});
|
||||
|
||||
return (
|
||||
<li
|
||||
className={classes}
|
||||
onMouseDown={this.handleClick}
|
||||
onContextMenu={this.handleRightClick}>
|
||||
<ul className="torrent__details">
|
||||
<li className="torrent__details--primary">
|
||||
{torrent.name}
|
||||
</li>
|
||||
<li className="torrent__details--secondary">
|
||||
<ul className="torrent__details">
|
||||
<li className="torrent__details--eta">
|
||||
{eta}
|
||||
</li>
|
||||
<li className="torrent__details--speed">
|
||||
{downloadRate.value}
|
||||
<em className="unit">{downloadRate.unit}</em>
|
||||
</li>
|
||||
<li className="torrent__details--speed">
|
||||
{uploadRate.value}
|
||||
<em className="unit">{uploadRate.unit}</em>
|
||||
</li>
|
||||
<li className="torrent__details--ratio">
|
||||
{ratio}
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="torrent__details torrent__details--tertiary">
|
||||
<li className="torrent__details--completed">
|
||||
<span className="torrent__details__label">Downloaded</span>
|
||||
{torrent.percentComplete}
|
||||
<em className="unit">%</em>
|
||||
—
|
||||
{completed.value}
|
||||
<em className="unit">{completed.unit}</em>
|
||||
</li>
|
||||
<li className="torrent__details--uploaded">
|
||||
<span className="torrent__details__label">Uploaded</span>
|
||||
{uploadTotal.value}
|
||||
<em className="unit">{uploadTotal.unit}</em>
|
||||
</li>
|
||||
<li className="torrent__details--size">
|
||||
<span className="torrent__details__label">Size</span>
|
||||
{totalSize.value}
|
||||
<em className="unit">{totalSize.unit}</em>
|
||||
</li>
|
||||
<li className="torrent__details--added">
|
||||
<span className="torrent__details__label">Added</span>
|
||||
{addedString}
|
||||
</li>
|
||||
</ul>
|
||||
<ProgressBar percent={torrent.percentComplete} />
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
|
||||
import UIActions from '../../actions/UIActions';
|
||||
|
||||
class HeaderItem extends React.Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
let isSorted = this.props.sortCriteria.property === this.props.propertylet;
|
||||
|
||||
let classes = classNames({
|
||||
'is-sorted': isSorted,
|
||||
'is-sorted--asc': isSorted && (this.props.sortCriteria.direction === 'asc'),
|
||||
'is-sorted--desc': isSorted && (this.props.sortCriteria.direction === 'desc'),
|
||||
'torrent__header__item': true,
|
||||
'torrent__detail--primary': this.props.primary,
|
||||
'torrent__detail--secondary--sub': !this.props.primary
|
||||
});
|
||||
|
||||
classes += ' torrent__detail--' + this.props.slug;
|
||||
|
||||
return (
|
||||
<span className={classes} onClick={this._onClick}>{this.props.label}</span>
|
||||
);
|
||||
}
|
||||
|
||||
_onClick() {
|
||||
let newDirection = this.props.sortCriteria.direction === 'asc' ? 'desc' : 'asc';
|
||||
UIActions.sortTorrents(this.props.propertylet, newDirection);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default class TorrentListHeader extends React.Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="torrent__header">
|
||||
<HeaderItem primary="true" label="Name" slug="name" propertylet="name" sortCriteria={this.props.sortCriteria} />
|
||||
<div className="torrent__detail--secondary">
|
||||
<HeaderItem label="Up" slug="speed" propertylet="uploadRate" sortCriteria={this.props.sortCriteria} />
|
||||
<HeaderItem label="Down" slug="speed" propertylet="downloadRate" sortCriteria={this.props.sortCriteria} />
|
||||
<HeaderItem label="ETA" slug="eta" propertylet="eta" sortCriteria={this.props.sortCriteria} />
|
||||
<HeaderItem label="Completed" slug="completed" propertylet="percentComplete" sortCriteria={this.props.sortCriteria} />
|
||||
<HeaderItem label="Size" slug="size" propertylet="sizeBytes" sortCriteria={this.props.sortCriteria} />
|
||||
<HeaderItem label="Ratio" slug="ratio" propertylet="ratio" sortCriteria={this.props.sortCriteria} />
|
||||
<HeaderItem label="Peers" slug="peers" propertylet="name" sortCriteria={this.props.sortCriteria} />
|
||||
<HeaderItem label="Seeds" slug="seeds" propertylet="name" sortCriteria={this.props.sortCriteria} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user