Commit 96349e0c authored by Sascha Pfeiffer's avatar Sascha Pfeiffer

added progress bar for fileupload

Signed-off-by: default avatarSascha Pfeiffer <sascha.pfeiffer@psono.com>
parent 1b981c39
......@@ -68,8 +68,7 @@ var build = function(build_path, type) {
gulp.src([
'src/common/data/css/contentscript.css',
'src/common/data/css/datastore.css',
'src/common/data/css/main.css',
'src/common/data/css/open-secret.css'
'src/common/data/css/main.css'
])
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest(path.join(build_path, 'css')));
......
......@@ -264,7 +264,7 @@ th {
font-family: 'Glyphicons Halflings';
src: url('../../fonts/glyphicons-halflings-regular.eot');
src: url('../../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
src: url('../../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
......
/*fbfbfc*/
.loading-lock {
width: 340px;
height: 260px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
border-radius: 4px;
background-color: #151f2b;
color: #b1b6c1;
text-align: center; }
.loading-lock .loading-lock-logo {
font-size: 90px;
position: relative;
height: 130px; }
.loading-lock .loading-lock-logo .loading-lock-logo-unloaded {
color: #0f1118;
position: absolute;
top: 0;
margin-left: 50%; }
.loading-lock .loading-lock-logo .loading-lock-logo-unloaded i {
margin-left: -100%;
overflow: hidden; }
.loading-lock .loading-lock-logo .loading-lock-logo-loaded {
color: #2dbb93;
position: absolute;
top: 0;
margin-left: 50%; }
.loading-lock .loading-lock-logo .loading-lock-logo-loaded i {
margin-left: -200%;
width: 0;
overflow: hidden; }
......@@ -254,3 +254,37 @@ h1, h2 {
/* CSS fix for angular-ui explained here: https://angular-ui.github.io/bootstrap/ */
.nav, .pagination, .carousel, .panel-title a {
cursor: pointer; }
.loading-lock {
width: 340px;
height: 260px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
border-radius: 4px;
background-color: #151f2b;
color: #b1b6c1;
text-align: center; }
.loading-lock .loading-lock-logo {
font-size: 90px;
position: relative;
height: 130px; }
.loading-lock .loading-lock-logo .loading-lock-logo-unloaded {
color: #0f1118;
position: absolute;
top: 0;
margin-left: 50%; }
.loading-lock .loading-lock-logo .loading-lock-logo-unloaded i {
margin-left: -100%;
overflow: hidden; }
.loading-lock .loading-lock-logo .loading-lock-logo-loaded {
color: #2dbb93;
position: absolute;
top: 0;
margin-left: 50%; }
.loading-lock .loading-lock-logo .loading-lock-logo-loaded i {
margin-left: -200%;
width: 0;
overflow: hidden; }
......@@ -33,8 +33,6 @@
<link href="css/angular-tree-view.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- endbuild -->
<link href="css/open-secret.css" rel="stylesheet">
</head>
<body>
<div ng-controller="OpenSecretCtrl" class="ng-cloak">
......
......@@ -23,6 +23,12 @@
$scope.parent = parent;
$scope.path = path;
$scope.state = {
open_requests: 0,
closed_request: 0,
next_step: '',
processing: false
};
$scope.name = '';
$scope.content = '';
$scope.data = {
......@@ -47,6 +53,21 @@
$scope.bp.selected.onNewModalOpen($scope.bp.selected);
}
});
console.log("activate");
itemBlueprint.register('upload_started', function(max){
$scope.state.processing = true;
$scope.state.open_requests = max;
});
itemBlueprint.register('upload_step_complete', function(next_step){
$scope.state.closed_request = $scope.state.closed_request + 1;
$scope.state.next_step = next_step;
console.log("REGISTERED: " + next_step);
});
itemBlueprint.register('upload_complete', reset);
}
/**
......@@ -59,6 +80,10 @@
*/
function reset() {
$scope.submitted = false;
$scope.state.open_requests = 0;
$scope.state.closed_request = 0;
$scope.state.next_step ='';
$scope.state.processing = false;
}
......@@ -100,12 +125,14 @@
if ($scope.bp.selected.hasOwnProperty('preSave')) {
var onSuccess = function(){
reset();
$uibModalInstance.close($scope.bp.selected);
};
var onError = function(errors) {
for (var i = 0; i < errors.length; i++) {
$scope.errors.push(errors[i]);
reset();
}
};
$scope.bp.selected.preSave($scope.bp.selected, parent, path)
......
......@@ -208,7 +208,8 @@
preSave: function(selected, parent, path){
var file_secret_key = cryptoLibrary.generate_secret_key();
var file_chunk_size = 8*1024*1024; //128*1024*1024; // in bytes. e.g. 128*1024*1024 Bytes = 128 MB
//var file_chunk_size = 8*1024*1024; // in bytes. e.g. 8*1024*1024 Bytes = 8 MB
var file_chunk_size = 128*1024*1024; // in bytes. e.g. 128*1024*1024 Bytes = 128 MB
/**
* Uploads a file in chunks and returns the array of hashs
......@@ -223,21 +224,19 @@
*/
function multi_chunk_upload(shard, file, file_transfer_id, file_secret_key, file_chunk_size) {
var defer = $q.defer();
var secret_promise_array = [];
var time_start = new Date().getTime();
var on_load_end = function(bytes, file_secret_key, chunk_position, is_last, resolve) {
var on_load_end = function(bytes, file_secret_key, chunk_position, resolve) {
registrations['upload_step_complete']('ENCRYPT_FILE_CHUNK');
console.log("on_load_end " + chunk_position + " " + (new Date().getTime() - time_start)/1000);
time_start = new Date().getTime();
var encrypted_bytes = cryptoLibrary.encrypt_file(bytes, file_secret_key);
registrations['upload_step_complete']('HASH_FILE_CHUNK');
console.log("encrypt_file " + chunk_position + " " + (new Date().getTime() - time_start)/1000);
time_start = new Date().getTime();
var hash_blake2b = cryptoLibrary.blake2b(encrypted_bytes);
registrations['upload_step_complete']('UPLOAD_FILE_CHUNK');
console.log("blake2b " + chunk_position + " " + (new Date().getTime() - time_start)/1000);
time_start = new Date().getTime();
......@@ -251,14 +250,14 @@
});
};
var read_file_chunk = function(file, file_slice_start, bytes_to_go, on_load_end, file_secret_key, chunk_position, is_last, resolve) {
var read_file_chunk = function(file, file_slice_start, bytes_to_go, on_load_end, file_secret_key, chunk_position, resolve) {
console.log("read_file_chunk");
var file_reader = new FileReader();
var file_slice;
file_reader.onloadend = function(event) {
var bytes = new Uint8Array(event.target.result);
on_load_end(bytes, file_secret_key, chunk_position, is_last, resolve);
on_load_end(bytes, file_secret_key, chunk_position, resolve);
};
file_slice = file.slice(file_slice_start, file_slice_start + bytes_to_go);
......@@ -267,35 +266,65 @@
};
var chunk_position = 1;
var is_last = false;
var is_first = true;
var file_slice_start = 0;
var chunks = {};
var max_chunks = Math.ceil(file.size / file_chunk_size);
registrations['upload_started'](max_chunks * 4 + 1);
// new sequential approach
function read_next_chunk() {
registrations['upload_step_complete']('READ_FILE_CHUNK');
var defer_single = $q.defer();
while (file_slice_start <= file.size) {
var bytes_to_go = Math.min(file_chunk_size, file.size-file_slice_start);
if (bytes_to_go === 0 && !is_first) {
break;
registrations['upload_complete']();
return defer_single.resolve(chunks);
}
is_last = file_slice_start + bytes_to_go === file.size;
var defer_single = $q.defer();
secret_promise_array.push($q.when(defer_single.promise.then(function(chunk) {
chunks[chunk['chunk_position']] = chunk['hash_blake2b'];
return;
})));
read_file_chunk(file, file_slice_start, bytes_to_go, on_load_end, file_secret_key, chunk_position, is_last, defer_single.resolve);
read_file_chunk(file, file_slice_start, bytes_to_go, on_load_end, file_secret_key, chunk_position, defer_single.resolve);
file_slice_start = file_slice_start + bytes_to_go;
is_first = false;
chunk_position = chunk_position + 1;
}
$q.all(secret_promise_array).then(function() {
defer.resolve(chunks);
});
return $q.when(defer_single.promise.then(function(chunk) {
chunks[chunk['chunk_position']] = chunk['hash_blake2b'];
return read_next_chunk();
}));
}
return defer.promise;
return read_next_chunk();
// old parallel approach
// var secret_promise_array = [];
// var defer = $q.defer();
//
// while (file_slice_start <= file.size) {
// var bytes_to_go = Math.min(file_chunk_size, file.size-file_slice_start);
// if (bytes_to_go === 0 && !is_first) {
// break;
// }
// var defer_single = $q.defer();
// secret_promise_array.push($q.when(defer_single.promise.then(function(chunk) {
// chunks[chunk['chunk_position']] = chunk['hash_blake2b'];
// return;
// })));
// read_file_chunk(file, file_slice_start, bytes_to_go, on_load_end, file_secret_key, chunk_position, defer_single.resolve);
// file_slice_start = file_slice_start + bytes_to_go;
// is_first = false;
// chunk_position = chunk_position + 1;
// }
//
// $q.all(secret_promise_array).then(function() {
// defer.resolve(chunks);
// });
//
// return defer.promise;
}
/**
......
......@@ -33,8 +33,6 @@
<link href="css/angular-tree-view.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- endbuild -->
<link href="css/open-secret.css" rel="stylesheet">
</head>
<body>
<div ng-controller="OpenSecretCtrl" class="ng-cloak">
......
@import "variables";
.loading-lock {
width:340px;
height:260px;
padding:20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
border-radius: 4px;
background-color: $dark-color;
color: $dark-normal-color;
text-align: center;
.loading-lock-logo {
font-size: 90px;
position: relative;
height: 130px;
.loading-lock-logo-unloaded {
color: $dark-background;
position: absolute;
top: 0;
margin-left: 50%;
i {
margin-left: -100%;
overflow: hidden;
}
}
.loading-lock-logo-loaded {
color: $dark-hightlight-color;
position: absolute;
top: 0;
margin-left: 50%;
i {
// width - margin-left == 200%
margin-left: -200%;
width: 0;
overflow: hidden;
}
}
}
.loading-lock-text {
}
}
\ No newline at end of file
......@@ -351,4 +351,60 @@ h1, h2 {
}
/* CSS fix for angular-ui explained here: https://angular-ui.github.io/bootstrap/ */
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
\ No newline at end of file
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
.loading-lock {
width:340px;
height:260px;
padding:20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
border-radius: 4px;
background-color: $dark-color;
color: $dark-normal-color;
text-align: center;
.loading-lock-logo {
font-size: 90px;
position: relative;
height: 130px;
.loading-lock-logo-unloaded {
color: $dark-background;
position: absolute;
top: 0;
margin-left: 50%;
i {
margin-left: -100%;
overflow: hidden;
}
}
.loading-lock-logo-loaded {
color: $dark-hightlight-color;
position: absolute;
top: 0;
margin-left: 50%;
i {
// width - margin-left == 200%
margin-left: -200%;
width: 0;
overflow: hidden;
}
}
}
.loading-lock-text {
}
}
......@@ -36,7 +36,6 @@ self.addEventListener('install', function(event) {
'./css/contentscript.css',
'./css/datastore.css',
'./css/main.css',
'./css/open-secret.css',
'./css/style.css',
'./fonts/FontAwesome.otf',
......
......@@ -3,7 +3,7 @@
<button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">&times;</span></button>
<h3 class="modal-title">{{'NEW' | translate}} {{bp.selected.name | translate}}</h3>
</div>
<div class="modal-body">
<div class="modal-body" ng-if="!state.processing">
<ui-select ng-model="bp.selected" class="form-group" on-select="reset()">
<ui-select-match>
......@@ -251,8 +251,15 @@
<span translate="{{ e }}"></span>
</div>
</div>
<div class="modal-body" ng-if="state.processing">
<uib-progressbar max="state.open_requests" value="state.closed_request" ng-if="state.processing">
<span style="color:white; white-space:nowrap;">{{ state.closed_request }} / {{ state.open_requests }}</span>
</uib-progressbar>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-disabled="form_control.block_submit" type="button" ng-click="submitted=true; save();">OK</button>
<button class="btn btn-primary" ng-disabled="form_control.block_submit || processing" type="button" ng-click="submitted=true; save();">OK</button>
</div>
</form>
\ No newline at end of file
......@@ -22,7 +22,6 @@ self.addEventListener('install', function(event) {
'./css/contentscript.css',
'./css/datastore.css',
'./css/main.css',
'./css/open-secret.css',
'./fonts/FontAwesome.otf',
'./fonts/fontawesome-webfont.eot?v=4.7.0',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment