epic/play-with-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files synchronously and add more description

Browse Source
This commit is contained in:
Marcos Lilljedahl
2017-07-13 13:54:00 -03:00
parent aaa55785ba
commit a6fdfcaa7d
3 changed files with 50 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
www/assets/app.js
View File

@@ -33,15 +33,27 @@
$scope.isInstanceBeingDeleted = false; $scope.isInstanceBeingDeleted = false;
$scope.uploadProgress = 0; $scope.uploadProgress = 0;
$scope.uploadFiles = function (files) {
if (files && files.length) { $scope.uploadFiles = function (files, invalidFiles) {
for (var i = 0; i < files.length; i++) { let total = files.length;
Upload.upload({url: '/sessions/' + $scope.sessionId + '/instances/' + $scope.selectedInstance.name + '/uploads', data: {file: files[i]}, method: 'POST'}) let uploadFile = function() {
.then(function(){}, function(){}, function(evt) { let file = files.shift();
$scope.uploadProgress = parseInt(100.0 * evt.loaded / evt.total); if (!file){
}); $scope.uploadMessage = "";
} $scope.uploadProgress = 0;
return
}
$scope.uploadMessage = "Uploading file(s) " + (total - files.length) + "/"+ total + " : " + file.name;
let upload = Upload.upload({url: '/sessions/' + $scope.sessionId + '/instances/' + $scope.selectedInstance.name + '/uploads', data: {file: file}, method: 'POST'})
.then(function(){}, function(){}, function(evt) {
$scope.uploadProgress = parseInt(100.0 * evt.loaded / evt.total);
});
// process next file
upload.finally(uploadFile);
} }
uploadFile();
} }
var selectedKeyboardShortcuts = KeyboardShortcutService.getCurrentShortcuts(); var selectedKeyboardShortcuts = KeyboardShortcutService.getCurrentShortcuts();

23
www/assets/style.css
View File

@@ -35,6 +35,29 @@ md-card-content.terminal-container {
margin-top: 50px; margin-top: 50px;
} }
.uploadStatus .bottom-block {
display: block;
position: relative;
background-color: rgba(255, 235, 169, 0.25);
height: 30px;
width: 100%;
}
.uploadStatus .bottom-block > span {
display: inline-block;
padding: 8px;
font-size: 0.9em;
}
.uploadStatus {
display: block;
position: relative;
width: 100%;
border: 2px solid #aad1f9;
transition: opacity 0.1s linear;
border-top: 0px;
}
.disconnected { .disconnected {
background-color: #FDF4B6; background-color: #FDF4B6;
} }

9
www/index.html
View File

@@ -72,7 +72,7 @@
<div flex></div> <div flex></div>
</md-content> </md-content>
<md-content flex layout="column" ng-repeat="instance in instances" ng-show="instance.name == selectedInstance.name" ngf-drop="uploadFiles($files)" class="drop-box" ngf-drag-over-class="'dragover'" ngf-multiple="true"> <md-content flex layout="column" ng-repeat="instance in instances" ng-show="instance.name == selectedInstance.name" ngf-drop class="drop-box" ngf-drag-over-class="'dragover'" ngf-max-size="100000000" ngf-change="uploadFiles($files, $invalidFiles)" ngf-multiple="true">
<md-card class="stats" md-theme="default" md-theme-watch> <md-card class="stats" md-theme="default" md-theme-watch>
<md-card-title> <md-card-title>
<md-card-title-text> <md-card-title-text>
@@ -106,8 +106,13 @@
<md-button class="md-warn md-raised" ng-click="deleteInstance(instance)" ng-disabled="isInstanceBeingDeleted">{{deleteInstanceBtnText}}</md-button> <md-button class="md-warn md-raised" ng-click="deleteInstance(instance)" ng-disabled="isInstanceBeingDeleted">{{deleteInstanceBtnText}}</md-button>
</md-card-actions> </md-card-actions>
</md-card> </md-card>
<md-progress-linear md-mode="determinate" ng-hide="uploadProgress == 0 || uploadProgress == 100" value="{{uploadProgress}}"></md-progress-linear>
<md-card flex md-theme="default" md-theme-watch > <md-card flex md-theme="default" md-theme-watch >
<div ng-show="uploadMessage" class="uploadStatus">
<md-progress-linear md-mode="determinate" value="{{uploadProgress}}"></md-progress-linear>
<div class="bottom-block">
<span>{{uploadMessage}}</span>
</div>
</div>
<md-card-content flex id="terminal-{{instance.name}}" class="terminal-container"> <md-card-content flex id="terminal-{{instance.name}}" class="terminal-container">
</md-card-content> </md-card-content>
</md-card> </md-card>