diff --git a/src/ui/torrent_table.js b/src/ui/torrent_table.js
index 49412a2..0299427 100644
--- a/src/ui/torrent_table.js
+++ b/src/ui/torrent_table.js
@@ -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 (
{formatBitrate(t.rate_up)} |
{formatBitrate(t.rate_down)} |
- |
+ {isFinite(ratio) ? `${ratio.toFixed(2)}` : "∞"} |
+ {formatAmount(up)} |
+ {formatAmount(down)} |
|
);
@@ -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
+ ?
+ : ;
+
+ const sortCol = (name, minWidth) => {
+ e.preventDefault();
+ this.updateSort(name)
+ }}
+ >
+ {name}
+ {sortBy === name ? sortArrow : null}
+ | ;
+
return (
@@ -86,21 +144,26 @@ class TorrentTable extends Component {
}}
/>
- name |
- up |
- down |
-
-
- ratio
-
-
-
+ | {
+ e.preventDefault();
+ this.updateSort("name");
+ }}
+ >
+ name
+ {sortBy === "name" ? sortArrow : null}
|
- progress |
+ {sortCol("up", "65px")}
+ {sortCol("down", "85px")}
+ {sortCol("ratio", "95px")}
+ {sortCol("ul", "65px")}
+ {sortCol("dl", "75px")}
+ {sortCol("progress", "115px")}
- {Object.values(torrents).slice().sort((a, b) => a.name.localeCompare(b.name)).map(t =>
+ {Object.values(torrents).slice().sort(comparator).map(t =>