2017-08-22 21:49:48 +02:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import { connect } from 'react-redux';
|
2017-08-25 15:43:54 +02:00
|
|
|
import selectTorrent, { UNION, SUBTRACT, EXCLUSIVE } from '../actions/selection';
|
2017-08-25 04:49:24 +02:00
|
|
|
import { formatBitrate } from '../bitrate';
|
2017-09-10 14:36:24 +02:00
|
|
|
import Ratio from './ratio';
|
2017-09-10 14:56:21 +02:00
|
|
|
import TorrentProgress from './torrent_progress';
|
2017-08-23 14:52:08 +02:00
|
|
|
|
2017-08-22 21:49:48 +02:00
|
|
|
class TorrentTable extends Component {
|
|
|
|
render() {
|
2017-08-25 15:43:54 +02:00
|
|
|
const { selection, torrents, dispatch } = this.props;
|
2018-01-02 23:05:50 +01:00
|
|
|
const name_style = {
|
|
|
|
maxWidth: `${window.innerWidth * 0.25}px`,
|
|
|
|
textOverflow: 'ellipsis',
|
|
|
|
overflowX: 'hidden',
|
|
|
|
whiteSpace: 'nowrap'
|
|
|
|
};
|
2017-08-22 21:49:48 +02:00
|
|
|
return (
|
2017-12-29 08:07:40 +01:00
|
|
|
<table className="table torrents">
|
2017-08-22 21:49:48 +02:00
|
|
|
<thead>
|
|
|
|
<tr>
|
2017-08-26 01:59:53 +02:00
|
|
|
<th style={{width: "1px"}}>
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
checked={selection.length === Object.values(torrents).length}
|
|
|
|
onChange={e => {
|
|
|
|
if (selection.length > 0) {
|
|
|
|
dispatch(selectTorrent([], EXCLUSIVE));
|
|
|
|
} else {
|
|
|
|
dispatch(selectTorrent(Object.keys(torrents), EXCLUSIVE));
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</th>
|
2018-01-02 23:11:23 +01:00
|
|
|
<th style={name_style}>name</th>
|
2018-01-02 22:57:32 +01:00
|
|
|
<th style={{ minWidth: '75px' }}>up</th>
|
|
|
|
<th style={{ minWidth: '75px' }}>down</th>
|
2017-12-29 08:07:40 +01:00
|
|
|
<th style={{width: "18rem"}}>
|
|
|
|
<span class="ratio">
|
|
|
|
<span>ratio</span>
|
|
|
|
<span></span>
|
|
|
|
<span></span>
|
|
|
|
</span>
|
|
|
|
</th>
|
2017-09-10 14:56:21 +02:00
|
|
|
<th>progress</th>
|
2017-08-22 21:49:48 +02:00
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
2017-11-12 20:30:24 +01:00
|
|
|
{Object.values(torrents).slice().sort((a, b) => a.name.localeCompare(b.name)).map(t =>
|
2017-08-22 21:49:48 +02:00
|
|
|
<tr
|
|
|
|
key={t.id}
|
2017-09-10 14:56:21 +02:00
|
|
|
className={`torrent ${
|
2017-08-25 02:01:15 +02:00
|
|
|
t.status
|
|
|
|
} ${
|
2017-08-25 15:43:54 +02:00
|
|
|
selection.indexOf(t.id) !== -1 ? "selected" : ""
|
2017-08-25 02:01:15 +02:00
|
|
|
}`}
|
2017-08-22 21:49:48 +02:00
|
|
|
>
|
2017-08-23 14:42:00 +02:00
|
|
|
<td>
|
2017-08-25 02:01:15 +02:00
|
|
|
<input
|
|
|
|
type="checkbox"
|
2017-08-25 15:43:54 +02:00
|
|
|
checked={selection.indexOf(t.id) !== -1}
|
2017-08-25 02:01:15 +02:00
|
|
|
onChange={e =>
|
2017-08-26 01:59:53 +02:00
|
|
|
dispatch(selectTorrent([t.id], e.target.checked ? UNION : SUBTRACT))
|
2017-08-25 15:43:54 +02:00
|
|
|
}
|
2017-08-25 02:01:15 +02:00
|
|
|
/>
|
2017-08-23 14:42:00 +02:00
|
|
|
</td>
|
2018-01-02 23:11:23 +01:00
|
|
|
<td style={name_style}>
|
2017-08-25 02:01:15 +02:00
|
|
|
<a
|
2017-08-25 15:43:54 +02:00
|
|
|
href={`/torrents/${t.id}`}
|
2017-08-25 02:01:15 +02:00
|
|
|
onClick={e => {
|
|
|
|
e.preventDefault();
|
2017-08-26 01:59:53 +02:00
|
|
|
dispatch(selectTorrent([t.id], EXCLUSIVE));
|
2017-08-25 02:01:15 +02:00
|
|
|
}}
|
2017-08-25 15:43:54 +02:00
|
|
|
>{t.name}</a>
|
2017-08-22 21:49:48 +02:00
|
|
|
</td>
|
2017-08-23 14:52:08 +02:00
|
|
|
<td>{formatBitrate(t.rate_up)}</td>
|
|
|
|
<td>{formatBitrate(t.rate_down)}</td>
|
2017-09-10 14:36:24 +02:00
|
|
|
<td><Ratio up={t.transferred_up} down={t.transferred_down} /></td>
|
2017-09-10 14:56:21 +02:00
|
|
|
<td><TorrentProgress torrent={t} /></td>
|
2017-08-22 21:49:48 +02:00
|
|
|
</tr>
|
|
|
|
)}
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-25 02:01:15 +02:00
|
|
|
export default connect(state => ({
|
|
|
|
torrents: state.torrents,
|
2017-08-25 15:43:54 +02:00
|
|
|
selection: state.selection,
|
2017-08-25 02:01:15 +02:00
|
|
|
router: state.router
|
|
|
|
}))(TorrentTable);
|