From 8e98a7bff7f049cadd3df02af67ac5e38a278bd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Fri, 4 Sep 2015 14:54:39 +0200
Subject: [PATCH] show overall progress

---
 js/app.js                                     |  1 -
 .../file_drag_and_drop_preview.js             |  2 +-
 .../file_drag_and_drop_preview_iterator.js    | 43 +++++++++++--------
 .../file_drag_and_drop_preview_progress.js    | 38 ++++++++++++++++
 .../react_s3_fine_uploader.js                 |  1 -
 .../ikonotv_accordion_list_item.js            |  3 --
 .../whitelabel/wallet/wallet_routes.js        |  2 +-
 js/third_party/ga.js                          |  1 -
 sass/ascribe_uploader.scss                    |  8 ++++
 9 files changed, 72 insertions(+), 27 deletions(-)
 create mode 100644 js/components/ascribe_uploader/file_drag_and_drop_preview_progress.js

diff --git a/js/app.js b/js/app.js
index 6dcf58bf..addd0494 100644
--- a/js/app.js
+++ b/js/app.js
@@ -45,7 +45,6 @@ requests.defaults({
 
 
 class AppGateway {
-
     start() {
         let settings;
         let subdomain = window.location.host.split('.')[0];
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
index 9c6cdbdd..05c4a688 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
@@ -72,7 +72,7 @@ let FileDragAndDropPreview = React.createClass({
 
         if(this.props.areAssetsEditable) {
            removeBtn = (<div className="delete-file">
-                            <span 
+                            <span
                                 className="glyphicon glyphicon-remove text-center"
                                 aria-hidden="true"
                                 title={getLangText('Remove file')}
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
index 39ee67f7..09dd3eb7 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
@@ -3,6 +3,8 @@
 import React from 'react';
 
 import FileDragAndDropPreview from './file_drag_and_drop_preview';
+import FileDragAndDropPreviewProgress from './file_drag_and_drop_preview_progress';
+
 
 let FileDragAndDropPreviewIterator = React.createClass({
     propTypes: {
@@ -16,26 +18,29 @@ let FileDragAndDropPreviewIterator = React.createClass({
     },
 
     render() {
-        if(this.props.files) {
+        if(this.props.files && this.props.files.length > 0) {
             return (
-                <div>
-                    {this.props.files.map((file, i) => {
-                        if(file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1) {
-                            return (
-                                <FileDragAndDropPreview
-                                    key={i}
-                                    file={file}
-                                    handleDeleteFile={this.props.handleDeleteFile}
-                                    handleCancelFile={this.props.handleCancelFile}
-                                    handlePauseFile={this.props.handlePauseFile}
-                                    handleResumeFile={this.props.handleResumeFile}
-                                    areAssetsDownloadable={this.props.areAssetsDownloadable}
-                                    areAssetsEditable={this.props.areAssetsEditable}/>
-                            );
-                        } else {
-                            return null;
-                        }
-                    })}
+                <div className="file-drag-and-drop-preview-iterator">
+                    <div>
+                        {this.props.files.map((file, i) => {
+                            if(file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1) {
+                                return (
+                                    <FileDragAndDropPreview
+                                        key={i}
+                                        file={file}
+                                        handleDeleteFile={this.props.handleDeleteFile}
+                                        handleCancelFile={this.props.handleCancelFile}
+                                        handlePauseFile={this.props.handlePauseFile}
+                                        handleResumeFile={this.props.handleResumeFile}
+                                        areAssetsDownloadable={this.props.areAssetsDownloadable}
+                                        areAssetsEditable={this.props.areAssetsEditable}/>
+                                );
+                            } else {
+                                return null;
+                            }
+                        })}
+                    </div>
+                    {/* <FileDragAndDropPreviewProgress files={this.props.files} /> */}
                 </div>
             );
         } else {
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_progress.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_progress.js
new file mode 100644
index 00000000..2d99104f
--- /dev/null
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_progress.js
@@ -0,0 +1,38 @@
+'use strict';
+
+import React from 'react';
+
+let FileDragAndDropPreviewProgress = React.createClass({
+    propTypes: {
+        files: React.PropTypes.array
+    },
+
+    calcOverallProgress() {
+        let overallProgress = 0;
+        let sizeOfAllFiles = 0;
+        let files = this.props.files.filter((file) => file.status !== 'deleted' || file.status !== 'canceled');
+        console.log(this.props.files.filter);
+
+        for(let i = 0; i < files.length; i++) {
+            sizeOfAllFiles += files[i].size;
+        }
+
+        for(let i = 0; i < files.length; i++) {
+            overallProgress += files[i].size / sizeOfAllFiles * files[i].progress;
+        }
+
+
+        return overallProgress.toFixed(2);
+    },
+
+    render() {
+        return (
+            <span
+                className="file-drag-and-drop-progress-time">
+                Overall progress: {this.calcOverallProgress()}%
+            </span>
+        );
+    }
+});
+
+export default FileDragAndDropPreviewProgress;
\ No newline at end of file
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index 8ecaf40b..31b1590a 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -461,7 +461,6 @@ var ReactS3FineUploader = React.createClass({
     },
 
     onProgress(id, name, uploadedBytes, totalBytes) {
-
         let newState = React.addons.update(this.state, {
             filesToUpload: { [id]: {
                 progress: { $set: (uploadedBytes / totalBytes) * 100} }
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ascribe_accordion_list/ikonotv_accordion_list_item.js b/js/components/whitelabel/wallet/components/ikonotv/ascribe_accordion_list/ikonotv_accordion_list_item.js
index c0a239cb..b716914a 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ascribe_accordion_list/ikonotv_accordion_list_item.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ascribe_accordion_list/ikonotv_accordion_list_item.js
@@ -1,7 +1,6 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
 
 import AccordionListItemPiece from '../../../../../ascribe_accordion_list/accordion_list_item_piece';
 
@@ -17,8 +16,6 @@ import IkonotvSubmitButton from '../ascribe_buttons/ikonotv_submit_button';
 
 import AclProxy from '../../../../../acl_proxy';
 
-import AclButton from '../../../../../ascribe_buttons/acl_button';
-
 import { getLangText } from '../../../../../../utils/lang_utils';
 import { mergeOptions } from '../../../../../../utils/general_utils';
 
diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js
index 40f092d6..62c1d255 100644
--- a/js/components/whitelabel/wallet/wallet_routes.js
+++ b/js/components/whitelabel/wallet/wallet_routes.js
@@ -71,7 +71,7 @@ let ROUTES = {
             <Route name="logout" path="logout" handler={LogoutContainer} />
             <Route name="signup" path="signup" handler={SignupContainer} />
             <Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
-            <Route name="request_loan" path="request_loan" handler={IkonotvRequestLoan}/>
+            <Route name="request_loan" path="request_loan" handler={IkonotvRequestLoan} headerTitle="SEND NEW CONTRACT"/>
             <Route name="register_piece" path="register_piece" handler={RegisterPiece} headerTitle="+ NEW WORK"/>
             <Route name="pieces" path="collection" handler={IkonotvPieceList} headerTitle="COLLECTION"/>
             <Route name="piece" path="pieces/:pieceId" handler={IkonotvPieceContainer} />
diff --git a/js/third_party/ga.js b/js/third_party/ga.js
index 52832623..f95450cb 100644
--- a/js/third_party/ga.js
+++ b/js/third_party/ga.js
@@ -3,7 +3,6 @@
 import alt from '../alt';
 import EventActions from '../actions/event_actions';
 
-
 class GoogleAnalyticsHandler {
     constructor() {
         this.bindActions(EventActions);
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index 2aab021a..e3b5d1c1 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -29,6 +29,14 @@
     }
 }
 
+.file-drag-and-drop-preview-iterator {
+    text-align: right;
+
+    > div:first-child {
+        text-align: center;
+    }
+}
+
 .file-drag-and-drop .file-drag-and-drop-dialog > p:first-child {
     font-size: 1.5em !important;