aheathershaw/blue-twilight
1
0
Fork 0
Code Issues 32 Pull Requests Releases 15 Wiki Activity

#9: Single-file album upload is now working with Bootstrap v4

Browse Source
This commit is contained in:
Andy Heathershaw 2017-03-31 22:05:57 +01:00
parent 8201f1df8b
commit 8b9e8f0229
3 changed files with 70 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
resources/assets/js/albums.js
View File

@ -19,18 +19,18 @@ function UploadPhotosViewModel(album_id, queue_token, language, urls) {
this.computed = {
// a computed getter
failedPercentage: function () {
return ((this.imagesFailed() / this.imagesTotal()) * 100).toFixed(2) + '%';
return ((this.imagesFailed / this.imagesTotal) * 100).toFixed(2) + '%';
},
successfulPercentage: function () {
return ((self.imagesUploaded() / self.imagesTotal()) * 100).toFixed(2) + '%';
return ((self.imagesUploaded / self.imagesTotal) * 100).toFixed(2) + '%';
}
};
this.methods = {
// This method is called when an image is uploaded - regardless if it fails or not
onUploadCompleted: function () {
this.currentStatus = language.upload_status
.replace(':current', (self.imagesUploaded + self.imagesFailed))
.replace(':total', self.imagesTotal);
.replace(':current', (this.imagesUploaded + this.imagesFailed))
.replace(':total', this.imagesTotal);
if ((this.imagesFailed + this.imagesUploaded) >= this.imagesTotal) {
this.isUploadInProgress = false;
@ -52,16 +52,16 @@ function UploadPhotosViewModel(album_id, queue_token, language, urls) {
// This method is called when an uploaded image succeeds
onUploadSuccessful: function (data, file_name) {
if (data.is_successful) {
self.imagesUploaded++;
this.imagesUploaded++;
// Don't add to statusMessages() array so user only sees errors
/*self.statusMessages.push({
'message_class': 'text-success',
'message_text': language.image_uploaded.replace(':file_name', file_name)
});*/
self.onUploadCompleted();
this.onUploadCompleted();
}
else {
self.onUploadFailed(data, file_name);
this.onUploadFailed(data, file_name);
}
},
uploadFile: function uploadImageFile(formObject, imageFile) {
@ -116,7 +116,7 @@ function UploadPhotosViewModel(album_id, queue_token, language, urls) {
}
// Upload the file
this.uploadFile($(this), file);
this.uploadFile(event.target, file);
}
// Prevent standard form upload

12
resources/views/themes/base/admin/show_album.blade.php
View File

@ -12,7 +12,7 @@
<div class="container">
<div class="row">
<div class="col">
<a class="pull-right btn btn-default" href="{{ $album->url() }}" target="_blank"><i class="fa fa-fw fa-eye"></i> @lang('admin.open_album')</a>
<a class="pull-right btn btn-secondary" href="{{ $album->url() }}" target="_blank"><i class="fa fa-fw fa-eye"></i> @lang('admin.open_album')</a>
<h1 class="page-title">{{ $album->name }}</h1>
<p>{{ $album->description }}</p>
@ -361,6 +361,16 @@
//ko.applyBindings(editViewModel, document.getElementById('photos-tab'));
//ko.applyBindings(viewModel, document.getElementById('upload-tab'));
var appUpload = new Vue(viewModel);
appUpload.$watch('isUploadInProgress', function(value) {
if (value)
{
$('#upload-progress-modal').modal('show');
}
else if (this.statusMessages.length == 0)
{
$('#upload-progress-modal').modal('hide');
}
});
})
</script>
@endpush

71
resources/views/themes/base/partials/album_upload_tab.blade.php
View File

@ -16,8 +16,7 @@
])
</div>
<div class="row">
<div class="col-sm-5" style="margin-bottom: 20px;">
<div style="margin-bottom: 20px;">
<form action="{{ route('photos.store') }}" method="POST" enctype="multipart/form-data" v-on:submit="uploadIndividualFiles">
{{ csrf_field() }}
<input type="hidden" name="album_id" value="{{ $album->id }}"/>
@ -36,36 +35,6 @@
</form>
</div>
<div class="col-sm-5">
<div class="text-center" data-bind="visible: isUploadInProgress">
<p><b>@lang('admin.is_uploading')</b></p>
<div class="progress">
<div class="progress-bar progress-bar-success" data-bind="style: { width: successfulPercentage() }">
<span class="sr-only"><span class="percentage-success" data-bind="text: successfulPercentage"></span></span>
</div>
<div class="progress-bar progress-bar-danger" data-bind="style: { width: failedPercentage() }">
<span class="sr-only"><span class="percentage-danger" data-bind="text: failedPercentage"></span></span>
</div>
</div>
<p data-bind="text: currentStatus"></p>
</div>
<div data-bind="visible: statusMessages().length > 0">
<p data-bind="visible: !isUploadInProgress()" class="text-danger" style="font-weight: bold">
<span data-bind="text: imagesFailed"></span> @lang('admin.upload_file_number_failed')
</p>
<p data-bind="visible: imagesUploaded() > 0">
@lang('admin.upload_file_failed_continue')<br /><br/>
<a href="{{ route('albums.analyse', ['id' => $album->id, 'queue_token' => $queue_token]) }}" class="btn btn-primary">@lang('forms.continue_action')</a>
</p>
<ul data-bind="foreach: statusMessages">
<li data-bind="css: message_class, text: message_text"></li>
</ul>
</div>
</div>
</div>
<hr/>
<h4>@lang('admin.upload_bulk_heading')</h4>
<p>@lang('admin.upload_bulk_text')</p>
@ -92,4 +61,42 @@
</div>
</form>
@endif
{{-- Single-file upload progress modal --}}
<div class="modal" id="upload-progress-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">@lang('admin.is_uploading')</h5>
</div>
<div class="modal-body">
<div class="text-center">
<div class="progress">
<div class="progress-bar progress-bar-success" v-bind:style="{ width: successfulPercentage }">
<span class="sr-only"><span class="percentage-success" v-text="successfulPercentage"></span></span>
</div>
<div class="progress-bar progress-bar-danger" v-bind:style="{ width: failedPercentage }">
<span class="sr-only"><span class="percentage-danger" v-text="failedPercentage"></span></span>
</div>
</div>
<p v-text="currentStatus"></p>
</div>
<div v-if="statusMessages.length > 0">
<p v-if="!isUploadInProgress" class="text-danger" style="font-weight: bold">
<span v-text="imagesFailed"></span> @lang('admin.upload_file_number_failed')
</p>
<p v-if="imagesUploaded > 0">
@lang('admin.upload_file_failed_continue')<br /><br/>
<a href="{{ route('albums.analyse', ['id' => $album->id, 'queue_token' => $queue_token]) }}" class="btn btn-primary">@lang('forms.continue_action')</a>
</p>
<ul v-for="message in statusMessages">
<li v-bind:class="{ message: message.message_class }" v-text="message.message_text"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>