Add priority meter to files

client/source/scripts/components/filesystem/DirectoryFileList.js

@@ -2,8 +2,61 @@ import React from 'react';
 
 import File from '../icons/File';
 import format from '../../util/formatData';
+import PriorityMeter from './PriorityMeter';
+import TorrentActions from '../../actions/TorrentActions';
+
+const MAX_LEVEL = 2;
+const METHODS_TO_BIND = ['handlePriorityChange', 'processPriorities'];
 
 export default class DirectoryFiles extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      priorities: {},
+      files: null
+    };
+
+    METHODS_TO_BIND.forEach((method) => {
+      this[method] = this[method].bind(this);
+    });
+  }
+
+  componentWillMount() {
+    this.processPriorities();
+  }
+
+  handlePriorityChange(fileIndex) {
+    let priorities = this.state.priorities;
+    let priorityLevel = priorities[fileIndex];
+
+    if (priorityLevel == null) {
+      return;
+    }
+
+    if (priorityLevel++ >= MAX_LEVEL) {
+      priorityLevel = 0;
+    }
+
+    priorities[fileIndex] = priorityLevel;
+
+    this.setState({priorities});
+
+    TorrentActions.setFilePriority(this.props.hash, [fileIndex], priorityLevel);
+  }
+
+  processPriorities() {
+    let priorities = this.state.priorities;
+
+    this.props.branch.forEach(function (file, index) {
+      if (priorities[file.index] == null) {
+        priorities[file.index] = Number(file.priority);
+      }
+    });
+
+    this.setState({priorities});
+  }
+
   render() {
     let branch = Object.assign([], this.props.branch);
 
@@ -11,22 +64,26 @@ export default class DirectoryFiles extends React.Component {
       return a.filename.localeCompare(b.filename);
     });
 
-    let files = branch.map((file, fileIndex) => {
+    let files = branch.map((file, index) => {
       let fileSize = format.data(file.sizeBytes, '', 1);
 
       return (
         <div className="directory-tree__node directory-tree__node--file file"
-          key={`${fileIndex}`} title={file.filename}>
+          key={`${index}`} title={file.filename}>
           <div className="file__detail file__name">
             <File />
             {file.filename}
           </div>
-          <div className="file__detail file__size">
+          <div className="file__detail file__detail--size">
             {fileSize.value}
             <em className="unit">{fileSize.unit}</em>
           </div>
-          <div className="file__detail file__priority">
-            {file.priority}
+          <div className="file__detail file__detail--size">
+            {file.percentComplete}%
+          </div>
+          <div className="file__detail file__detail--priority">
+            <PriorityMeter level={this.state.priorities[file.index]}
+              fileIndex={file.index} onChange={this.handlePriorityChange} />
           </div>
         </div>
       );

client/source/scripts/components/filesystem/DirectoryTree.js

@@ -3,9 +3,20 @@ import React from 'react';
 import DirectoryFileList from './DirectoryFileList';
 import DirectoryTreeNode from './DirectoryTreeNode';
 
+const METHODS_TO_BIND = ['getDirectoryTreeDomNodes'];
+
 export default class DirectoryTree extends React.Component {
+  constructor() {
+    super();
+
+    METHODS_TO_BIND.forEach((method) => {
+      this[method] = this[method].bind(this);
+    });
+  }
+
   getDirectoryTreeDomNodes(tree, depth = 0) {
     let index = 0;
+    let hash = this.props.hash;
     depth++;
 
     return Object.keys(tree).map((branchName) => {
@@ -14,12 +25,13 @@ export default class DirectoryTree extends React.Component {
 
       if (branchName === 'files') {
         return (
-          <DirectoryFileList branch={branch} key={`${index}${depth}`} />
+          <DirectoryFileList branch={branch} hash={hash}
+            key={`${index}${depth}`} />
         );
       } else {
         return (
           <DirectoryTreeNode depth={depth} directoryName={branchName}
-            subTree={branch} key={`${index}${depth}`} />
+            hash={hash} subTree={branch} key={`${index}${depth}`} />
         );
       }
     });

client/source/scripts/components/filesystem/DirectoryTreeNode.js

@@ -24,7 +24,8 @@ export default class DirectoryTreeNode extends React.Component {
     if (this.state.expanded) {
       return (
         <div className="directory-tree__node directory-tree__node--group">
-          <DirectoryTree tree={this.props.subTree} depth={this.props.depth} />
+          <DirectoryTree tree={this.props.subTree} depth={this.props.depth}
+            hash={this.props.hash} />
         </div>
       );
     } else {

client/source/scripts/components/filesystem/PriorityMeter.js

@@ -0,0 +1,42 @@
+import classnames from 'classnames';
+import React from 'react';
+
+const MAX_LEVEL = 2;
+
+const METHODS_TO_BIND = ['handleClick'];
+
+export default class PriorityMeter extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      level: null
+    };
+
+    METHODS_TO_BIND.forEach((method) => {
+      this[method] = this[method].bind(this);
+    });
+  }
+
+  getLevel() {
+    if (this.state.level == null) {
+      return this.props.level;
+    } else {
+      return this.state.level;
+    }
+  }
+
+  handleClick() {
+    this.props.onChange(this.props.fileIndex);
+  }
+
+  render() {
+    let level = this.props.level;
+
+    return (
+      <div className="priority-meter__wrapper" onClick={this.handleClick}>
+        <div className={`priority-meter priority-meter--level-${level}`}/>
+      </div>
+    );
+  }
+}