Merge pull request #40 from Luminarys/master

Implement column sorting
This commit is contained in:
Drew DeVault 2018-03-13 09:18:52 -04:00 committed by GitHub
commit c7ac45dc3a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,8 +1,8 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import FontAwesome from 'react-fontawesome';
import selectTorrent, { UNION, SUBTRACT, EXCLUSIVE } from '../actions/selection'; import selectTorrent, { UNION, SUBTRACT, EXCLUSIVE } from '../actions/selection';
import { formatBitrate } from '../bitrate'; import { formatBitrate, formatAmount } from '../bitrate';
import Ratio from './ratio';
import TorrentProgress from './torrent_progress'; import TorrentProgress from './torrent_progress';
const name_style = { const name_style = {
@ -24,6 +24,9 @@ class _Torrent extends Component {
render() { render() {
const { dispatch, selection, torrent } = this.props; const { dispatch, selection, torrent } = this.props;
const t = torrent; const t = torrent;
const up = t.transferred_up;
const down = t.transferred_down;
const ratio = up / down;
return ( return (
<tr <tr
className={`torrent ${ className={`torrent ${
@ -52,7 +55,9 @@ class _Torrent extends Component {
</td> </td>
<td>{formatBitrate(t.rate_up)}</td> <td>{formatBitrate(t.rate_up)}</td>
<td>{formatBitrate(t.rate_down)}</td> <td>{formatBitrate(t.rate_down)}</td>
<td><Ratio up={t.transferred_up} down={t.transferred_down} /></td> <td>{isFinite(ratio) ? `${ratio.toFixed(2)}` : "∞"}</td>
<td>{formatAmount(up)}</td>
<td>{formatAmount(down)}</td>
<td><TorrentProgress torrent={t} /></td> <td><TorrentProgress torrent={t} /></td>
</tr> </tr>
); );
@ -66,9 +71,62 @@ const Torrent = connect((state, props) => {
}; };
})(_Torrent); })(_Torrent);
const comparators = {
"name": (a, b) => a.name.localeCompare(b.name),
"up": (a, b) => a.up - b.up,
"down": (a, b) => a.down - b.down,
"ul": (a, b) => a.transferred_up - b.transferred_up,
"dl": (a, b) => a.transferred_down - b.transferred_down,
"ratio": (a, b) => {
const ratioA = a.transferred_up/a.transferred_down;
const ratioB = b.transferred_up/b.transferred_down;
if (!isFinite(ratioA - ratioB)) {
return !isFinite(ratioA) ? 1 : -1;
} else {
return ratioA - ratioB;
}
},
"progress": (a, b) => a.progress - b.progress,
}
class TorrentTable extends Component { class TorrentTable extends Component {
constructor() {
super();
this.state = {
sortBy: "name",
sortAsc: true,
};
}
updateSort(column) {
if (column === this.state.sortBy) {
this.setState({ sortBy: column, sortAsc: !this.state.sortAsc});
} else {
this.setState({ sortBy: column, sortAsc: this.state.sortAsc});
}
}
render() { render() {
const { selection, torrents, dispatch } = this.props; const { selection, torrents, dispatch } = this.props;
const { sortBy, sortAsc } = this.state;
const comparator = (a, b) => comparators[sortBy](a, b) * (sortAsc ? 1 : -1);
const arrowStyle = { marginLeft: "5px", marginRight: "5px" };
const sortArrow = sortAsc === true
? <FontAwesome name="angle-up" style={arrowStyle} />
: <FontAwesome name="angle-down" style={arrowStyle} />;
const sortCol = (name, minWidth) => <th
style={{ minWidth }}
onClick={e => {
e.preventDefault();
this.updateSort(name)
}}
>
{name}
{sortBy === name ? sortArrow : null}
</th>;
return ( return (
<table className="table torrents"> <table className="table torrents">
<thead> <thead>
@ -86,21 +144,26 @@ class TorrentTable extends Component {
}} }}
/> />
</th> </th>
<th style={name_style}>name</th> <th
<th style={{ minWidth: '75px' }}>up</th> style={name_style}
<th style={{ minWidth: '75px' }}>down</th> onClick={e => {
<th style={{width: "18rem"}}> e.preventDefault();
<span className="ratio"> this.updateSort("name");
<span>ratio</span> }}
<span></span> >
<span></span> name
</span> {sortBy === "name" ? sortArrow : null}
</th> </th>
<th>progress</th> {sortCol("up", "65px")}
{sortCol("down", "85px")}
{sortCol("ratio", "95px")}
{sortCol("ul", "65px")}
{sortCol("dl", "75px")}
{sortCol("progress", "115px")}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{Object.values(torrents).slice().sort((a, b) => a.name.localeCompare(b.name)).map(t => {Object.values(torrents).slice().sort(comparator).map(t =>
<Torrent <Torrent
dispatch={dispatch} dispatch={dispatch}
id={t.id} id={t.id}