Implement torrent selection

scss/main.scss

@@ -37,6 +37,10 @@
     background-image: linear-gradient(to right, lighten($brand-success, 20), $brand-success);
   }
 
+  &.selected {
+    background-color: lighten($brand-warning, 20);
+  }
+
   background-repeat: no-repeat;
   background-position: left bottom;
 }

src/ui/navigation.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 
 export default function render(props) {
   return <nav className="navbar navbar-light navbar-toggleable-xl">
-    <span className="navbar-brand">receptor</span>
+    <Link to="/" className="navbar-brand">receptor</Link>
     <div className="navbar-collapse collapse">
       <ul className="navbar-nav mr-auto">
         <li className="nav-item">

src/ui/torrent_details.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import { connect } from 'react-redux';
 
-export default function add_torrent(props) {
+function torrent_details(props) {
   return (
     <div>
       <h3>Torrent details</h3>
@@ -8,3 +9,4 @@ export default function add_torrent(props) {
   );
 }
 
+export default connect(state => ({ router: state.router }))(torrent_details);

src/ui/torrent_table.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { push } from 'react-router-redux';
 import { connect } from 'react-redux';
 
 function formatBitrate(bitrate) {
@@ -13,9 +14,44 @@ function formatBitrate(bitrate) {
   }
 }
 
+function activeTorrents(router) {
+  const { pathname } = router.location;
+  if (pathname.indexOf("/torrents/") !== 0) {
+    return [];
+  } else {
+    return pathname.slice("/torrents/".length).split(",");
+  }
+}
+
+const EXCLUSIVE = 1, UNION = 2, SUBTRACT = 3;
+
+function selectTorrent(dispatch, t, router, action = UNION) {
+  let active = activeTorrents(router);
+  switch (action) {
+    case EXCLUSIVE:
+      active = [t.id];
+      break;
+    case UNION:
+      if (active.indexOf(t.id) === -1) {
+        active = [...active, t.id];
+      }
+      break;
+    case SUBTRACT:
+      if (active.indexOf(t.id) !== -1) {
+        active = active.filter(a => a != t.id);
+      }
+      break;
+  }
+  const url = active.length === 0 ? "/" : `/torrents/${active.join(',')}`;
+  if (url !== router.location) {
+    dispatch(push(url));
+  }
+}
+
 class TorrentTable extends Component {
   render() {
-    const { torrents } = this.props;
+    const { torrents, router, dispatch } = this.props;
+    const active = activeTorrents(router);
     return (
       <table className="table">
         <thead>
@@ -24,27 +60,45 @@ class TorrentTable extends Component {
             <th>name</th>
             <th>up</th>
             <th>down</th>
+            <th>ratio</th>
           </tr>
         </thead>
         <tbody>
           {Object.values(torrents).map(t =>
             <tr
               key={t.id}
-              className={`torrent ${t.status}`}
+              className={`torrent ${
+                t.status
+              } ${
+                active.indexOf(t.id) !== -1 ? "selected" : ""
+              }`}
               style={{
                 backgroundSize: `${t.progress * 100}% 3px`
               }}
             >
               <td>
-                <input type="checkbox" />
+                <input
+                  type="checkbox"
+                  checked={active.indexOf(t.id) !== -1}
+                  onChange={e =>
+                    selectTorrent(dispatch,
+                      t, router, e.target.checked ? UNION : SUBTRACT)}
+                />
               </td>
               <td>
-                <a href="#">
+                <a
+                  href="#"
+                  onClick={e => {
+                    e.preventDefault();
+                    selectTorrent(dispatch, t, router, EXCLUSIVE);
+                  }}
+                >
                   {t.name}
                 </a>
               </td>
               <td>{formatBitrate(t.rate_up)}</td>
               <td>{formatBitrate(t.rate_down)}</td>
+              <td>{(t.transferred_up / t.transferred_down).toFixed(2)}</td>
             </tr>
           )}
         </tbody>
@@ -53,4 +107,7 @@ class TorrentTable extends Component {
   }
 }
 
-export default connect(state => ({ torrents: state.torrents }))(TorrentTable);
+export default connect(state => ({
+  torrents: state.torrents,
+  router: state.router
+}))(TorrentTable);