From 5379e830bb6aaa733a73f2719ee0c893bff81305 Mon Sep 17 00:00:00 2001
From: John Furrow <johnf@mesosphere.io>
Date: Sat, 21 Nov 2015 14:16:00 -0800
Subject: [PATCH] Add torrent details panel

---
 .../sass/objects/_torrent-details-panel.scss  |  51 ++++
 .../components/torrent-list/TorrentDetails.js | 241 ++++++++++++++++++
 2 files changed, 292 insertions(+)
 create mode 100644 client/source/sass/objects/_torrent-details-panel.scss
 create mode 100644 client/source/scripts/components/torrent-list/TorrentDetails.js

diff --git a/client/source/sass/objects/_torrent-details-panel.scss b/client/source/sass/objects/_torrent-details-panel.scss
new file mode 100644
index 00000000..1cc1c649
--- /dev/null
+++ b/client/source/sass/objects/_torrent-details-panel.scss
@@ -0,0 +1,51 @@
+.torrent-details {
+  background: $torrent-details--background;
+  box-shadow: -1px 0 0 $torrent-details--border;
+  height: 100%;
+  width: 40%;
+  overflow: auto;
+  padding: $spacing-unit;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translateX(0);
+  transition: transform 0.5s;
+  z-index: 2;
+
+  &.torrent-details-enter {
+    transform: translateX(100%);
+  }
+
+  &.torrent-details-enter-active {
+    transform: translateX(0);
+  }
+
+  &.torrent-details-leave {
+    transform: translateX(100%);
+  }
+
+  &__transfer-data {
+
+    .transfer-data {
+      display: inline-block;
+      margin-right: 10px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .icon {
+      height: 12px;
+      width: 12px;
+    }
+  }
+
+  &__table {
+    width: 100%;
+
+    thead {
+      text-align: left;
+    }
+  }
+}
diff --git a/client/source/scripts/components/torrent-list/TorrentDetails.js b/client/source/scripts/components/torrent-list/TorrentDetails.js
new file mode 100644
index 00000000..269567be
--- /dev/null
+++ b/client/source/scripts/components/torrent-list/TorrentDetails.js
@@ -0,0 +1,241 @@
+import _ from 'lodash';
+import classNames from 'classnames';
+import {connect} from 'react-redux';
+import React from 'react';
+import CSSTransitionGroup from 'react-addons-css-transition-group';
+
+import format from '../../util/formatData';
+import Icon from '../icons/Icon';
+import clientSelector from '../../selectors/clientSelector';
+
+const methodsToBind = [
+  'getSidePanel',
+  'getEta',
+  'getRatio'
+];
+
+class TorrentDetails extends React.Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      selectedTorrentHash: null
+    };
+
+    methodsToBind.forEach((method) => {
+      this[method] = this[method].bind(this);
+    });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.visible === true) {
+      let nextHash = nextProps.selectedTorrents[0];
+      if (this.state.selectedTorrentHash !== nextHash) {
+        this.setState({
+          selectedTorrentHash: nextHash,
+          selectedTorrent: _.find(nextProps.torrents, torrent => {
+            return torrent.hash === nextHash;
+          })
+        });
+      }
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    if (nextProps.visible === true || (nextProps.visible !== this.props.visible)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  getPeerList() {
+    let torrentDetails = this.props.torrentDetails[
+      this.state.selectedTorrentHash
+    ];
+
+    let peerList = null;
+    let peerCount = 0;
+
+    if (torrentDetails) {
+      peerList = torrentDetails.map(function(peer, index) {
+        let downloadRate = format.data(peer.downloadRate, '/s');
+        let uploadRate = format.data(peer.uploadRate, '/s');
+        return (
+          <tr key={index}>
+            <td>{peer.address}</td>
+            <td>
+              {downloadRate.value}
+              <em className="unit">{downloadRate.unit}</em>
+            </td>
+            <td>
+              {uploadRate.value}
+              <em className="unit">{uploadRate.unit}</em>
+            </td>
+          </tr>
+        );
+      });
+      peerCount = peerList.length;
+    }
+
+    return (
+      <table className="torrent-details__table">
+        <thead>
+          <tr>
+            <th>Peers {peerCount}</th>
+            <th>DL</th>
+            <th>UL</th>
+          </tr>
+        </thead>
+        <tbody>
+          {peerList}
+        </tbody>
+      </table>
+    )
+  }
+
+  getEta(eta) {
+    if (eta === 'Infinity') {
+      return '∞';
+    } else if (eta.years > 0) {
+      return (
+        <span>
+          <span className="torrent__details--segment">
+            {eta.years}<em className="unit">yr</em>
+          </span>
+          <span className="torrent__details--segment">
+            {eta.weeks}<em className="unit">wk</em>
+          </span>
+        </span>
+      );
+    } else if (eta.weeks > 0) {
+      return (
+        <span>
+          <span className="torrent__details--segment">
+            {eta.weeks}<em className="unit">wk</em>
+          </span>
+          <span className="torrent__details--segment">
+            {eta.days}<em className="unit">d</em>
+          </span>
+        </span>
+      );
+    } else if (eta.days > 0) {
+      return (
+        <span>
+          <span className="torrent__details--segment">
+            {eta.days}<em className="unit">d</em>
+          </span>
+          <span className="torrent__details--segment">
+            {eta.hours}<em className="unit">hr</em>
+          </span>
+        </span>
+      );
+    } else if (eta.hours > 0) {
+      return (
+        <span>
+          <span className="torrent__details--segment">
+            {eta.hours}<em className="unit">hr</em>
+          </span>
+          <span className="torrent__details--segment">
+            {eta.minutes}<em className="unit">m</em>
+          </span>
+        </span>
+      );
+    } else if (eta.minutes > 0) {
+      return (
+        <span>
+          <span className="torrent__details--segment">
+            {eta.minutes}<em className="unit">m</em>
+          </span>
+          <span className="torrent__details--segment">
+            {eta.seconds}<em className="unit">s</em>
+          </span>
+        </span>
+      );
+    } else {
+      return (
+        <span>
+          {eta.seconds}<em className="unit">s</em>
+        </span>
+      );
+    }
+  }
+
+  getRatio(ratio) {
+    ratio = ratio / 1000;
+    let precision = 1;
+
+    if (ratio < 10) {
+      precision = 2;
+    } else if (ratio < 100) {
+      precision = 0;
+    }
+
+    return ratio.toFixed(precision);
+  }
+
+  getSidePanel() {
+    if (!this.props.visible) {
+      return null;
+    }
+
+    let torrent = this.state.selectedTorrent;
+    let added = new Date(torrent.added * 1000);
+    let addedString = (added.getMonth() + 1) + '/' + added.getDate() + '/' +
+      added.getFullYear();
+    let completed = format.data(torrent.bytesDone);
+    let downloadRate = format.data(torrent.downloadRate, '/s');
+    let downloadTotal = format.data(torrent.downloadTotal);
+    let eta = this.getEta(torrent.eta);
+    let ratio = this.getRatio(torrent.ratio);
+    let totalSize = format.data(torrent.sizeBytes);
+    let uploadRate = format.data(torrent.uploadRate, '/s');
+    let uploadTotal = format.data(torrent.uploadTotal);
+
+    return (
+      <div className="torrent-details" key={this.props.visible}>
+        <div className="torrent-details__actions">
+          Dropdown
+        </div>
+        <ul className="torrent-details__transfer-data">
+          <li className="transfer-data transfer-data--download">
+            <Icon icon="download" />
+            {downloadRate.value}
+            <em className="unit">{downloadRate.unit}</em>
+          </li>
+          <li className="transfer-data transfer-data--upload">
+            <Icon icon="upload" />
+            {uploadRate.value}
+            <em className="unit">{uploadRate.unit}</em>
+          </li>
+          <li className="transfer-data transfer-data--ratio">
+            <Icon icon="ratio" />
+            1<em className="unit">yr</em>
+          </li>
+          <li className="transfer-data transfer-data--eta">
+            <Icon icon="download" />
+            1<em className="unit">yr</em>
+          </li>
+        </ul>
+        <div className="torrent-details__peers">
+          {this.getPeerList()}
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <CSSTransitionGroup
+        transitionEnterTimeout={500}
+        transitionLeaveTimeout={500}
+        transitionName="torrent-details">
+        {this.getSidePanel()}
+      </CSSTransitionGroup>
+    );
+  }
+
+}
+
+export default connect(clientSelector)(TorrentDetails);