blallo/receptor
1
0
Fork 0
Code Issues Pull Requests Releases 3 Wiki Activity

Merge pull request #40 from Luminarys/master

Browse Source 
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
1 changed files with 77 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/ui/torrent_table.js
View File

@ -1,8 +1,8 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import FontAwesome from 'react-fontawesome';
import selectTorrent, { UNION, SUBTRACT, EXCLUSIVE } from '../actions/selection';
import { formatBitrate } from '../bitrate';
import Ratio from './ratio';
import { formatBitrate, formatAmount } from '../bitrate';
import TorrentProgress from './torrent_progress';
const name_style = {
@ -24,6 +24,9 @@ class _Torrent extends Component {
render() {
const { dispatch, selection, torrent } = this.props;
const t = torrent;
const up = t.transferred_up;
const down = t.transferred_down;
const ratio = up / down;
return (
<tr
className={`torrent ${
@ -52,7 +55,9 @@ class _Torrent extends Component {
</td>
<td>{formatBitrate(t.rate_up)}</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>
</tr>
);
@ -66,9 +71,62 @@ const Torrent = connect((state, props) => {
};
})(_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 {
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() {
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 (
<table className="table torrents">
<thead>
@ -86,21 +144,26 @@ class TorrentTable extends Component {
}}
/>
</th>
<th style={name_style}>name</th>
<th style={{ minWidth: '75px' }}>up</th>
<th style={{ minWidth: '75px' }}>down</th>
<th style={{width: "18rem"}}>
<span className="ratio">
<span>ratio</span>
<span></span>
<span></span>
</span>
<th
style={name_style}
onClick={e => {
e.preventDefault();
this.updateSort("name");
}}
>
name
{sortBy === "name" ? sortArrow : null}
</th>
<th>progress</th>
{sortCol("up", "65px")}
{sortCol("down", "85px")}
{sortCol("ratio", "95px")}
{sortCol("ul", "65px")}
{sortCol("dl", "75px")}
{sortCol("progress", "115px")}
</tr>
</thead>
<tbody>
{Object.values(torrents).slice().sort((a, b) => a.name.localeCompare(b.name)).map(t =>
{Object.values(torrents).slice().sort(comparator).map(t =>
<Torrent
dispatch={dispatch}
id={t.id}