Merge pull request #57 from TessyPowder/master

Add summary progress bar and counter for uploaded chunks

Author: e-alfred

js/ng-flow-standalone.js

@@ -638,6 +638,16 @@
       return ret;
     },
 
+    /**
+     * Returns the count of files in the queue
+     * @function
+     * @returns {number}
+     */
+    getFilesCount: function () {
+      var count = this.files.length;
+      return count;
+    },
+
     /**
      * Returns the total size of all files in bytes.
      * @function
@@ -968,6 +978,22 @@
       return this._prevProgress;
     },
 
+    /**
+     * Get current number of complete chunks
+     * @function
+     * @returns {number} from 0 to chunks.length
+     */
+    completeChunks: function () {
+      var completeChunks = 0;
+
+      each(this.chunks, function (c) {
+        if(c.progress() === 1){
+          completeChunks++;
+        }
+      });
+      return completeChunks;
+    },
+
     /**
      * Indicates if file is being uploaded at the moment
      * @function
@@ -1922,4 +1948,4 @@ angular.module('flow.transfers', ['flow.init'])
   };
 }]);
 angular.module('flow', ['flow.provider', 'flow.init', 'flow.events', 'flow.btn',
-  'flow.drop', 'flow.transfers', 'flow.img', 'flow.dragEvents']);
+  'flow.drop', 'flow.transfers', 'flow.img', 'flow.dragEvents']);

templates/main.php

@@ -17,6 +17,7 @@
     <a class="btn btn-small btn-danger" ng-click="$flow.pause()"><?= $l->t('Pause'); ?></a>
     <a class="btn btn-small btn-info" ng-click="$flow.cancel()"><?= $l->t('Cancel'); ?></a>
     <span class="label label-info"><?= $l->t('Size'); ?>: {{$flow.getSize() | bytes}}</span>
+    <span class="label label-info" ng-if="$flow.getFilesCount() != 0"><?= $l->t('Progress'); ?>: {{$flow.progress()*100 | number:2}}%</span>
     <span class="label label-info" ng-if="$flow.isUploading()"><?= $l->t('Uploading'); ?>...</span>
   </p>
   <table class="table table-hover table-bordered table-striped" flow-transfers>
@@ -32,7 +33,7 @@
     <tr ng-repeat="file in transfers">
       <td>{{$index+1}}</td>
       <td title="UID: {{file.uniqueIdentifier}}">{{file.relativePath}}</td>
-      <td title="Chunks: {{file.chunks.length}}"><span ng-if="file.isUploading()">{{file.size*file.progress() | bytes}}/</span>{{file.size | bytes}}</td>
+      <td title="Chunks: {{file.completeChunks()}} / {{file.chunks.length}}"><span ng-if="file.isUploading()">{{file.size*file.progress() | bytes}}/</span>{{file.size | bytes}}</td>
       <td>
         <div class="btn-group" ng-if="!file.isComplete() || file.error">
           <progress max="1" value="{{file.progress()}}" title="{{file.progress()}}" ng-if="file.isUploading()" style="width:auto; height:auto; display:inline"></progress>