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

#9: The progress bar when uploading is now working correctly. The delete album screen has been updated to Bootstrap v4. Alerts are now dismissable.

Browse Source
This commit is contained in:
Andy Heathershaw
2017-04-08 09:41:41 +01:00
parent 8b9e8f0229
commit c1740be802
9 changed files with 231 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
public/js/blue-twilight.js
View File

@@ -1,3 +1,148 @@
/**
* This model is used by admin/show_album.blade.php to handle photo uploads.
* @param album_id ID of the album the photos are being uploaded to
* @param queue_token Unique token of the upload queue to save the photos to
* @param language Array containing language strings
* @param urls Array containing URLs
* @constructor
*/
function UploadPhotosViewModel(album_id, queue_token, language, urls) {
this.el = '#upload-tab';
this.data = {
currentStatus: '',
imagesFailed: 0,
imagesTotal: 0,
imagesUploaded: 0,
isBulkUploadInProgress: false,
isUploadInProgress: false,
statusMessages: []
};
this.computed = {
failedPercentage: function () {
var result = 0;
if (this.imagesTotal > 0)
{
result = (this.imagesFailed / this.imagesTotal) * 100;
}
return result.toFixed(2) + '%';
},
successfulPercentage: function () {
var result = 0;
if (this.imagesTotal > 0)
{
result = (this.imagesUploaded / this.imagesTotal) * 100;
}
return result.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', (this.imagesUploaded + this.imagesFailed))
.replace(':total', this.imagesTotal);
if ((this.imagesFailed + this.imagesUploaded) >= this.imagesTotal) {
this.isUploadInProgress = false;
if (this.imagesFailed === 0 && this.imagesUploaded > 0) {
window.location = urls.analyse;
}
}
},
// This method is called when an uploaded image fails
onUploadFailed: function (data, file_name) {
this.imagesFailed++;
this.statusMessages.push({
'message_class': 'text-danger',
'message_text': language.image_failed.replace(':file_name', file_name)
});
this.onUploadCompleted();
},
// This method is called when an uploaded image succeeds
onUploadSuccessful: function (data, file_name) {
if (data.is_successful) {
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)
});*/
this.onUploadCompleted();
}
else {
this.onUploadFailed(data, file_name);
}
},
uploadFile: function uploadImageFile(formObject, imageFile) {
var self = this;
var formData = new FormData();
formData.append('album_id', album_id);
formData.append('queue_token', queue_token);
formData.append('photo[]', imageFile, imageFile.name);
$.ajax(
{
contentType: false,
data: formData,
error: function (data) {
self.onUploadFailed(data, imageFile.name);
},
method: $(formObject).attr('method'),
processData: false,
success: function (data) {
self.onUploadSuccessful(data, imageFile.name);
},
url: $(formObject).attr('action')
}
);
this.isUploadInProgress = true;
this.currentStatus = language.upload_status
.replace(':current', 0)
.replace(':total', this.imagesTotal);
},
uploadIndividualFiles: function(event) {
var fileSelect = $('input[type=file]', event.target);
// Get the selected files
var files = fileSelect[0].files;
// Reset statistics
this.currentStatus = '';
this.statusMessages = [];
this.imagesUploaded = 0;
this.imagesFailed = 0;
this.imagesTotal = files.length;
this.isUploadInProgress = true;
// Loop through each of the selected files and upload them individually
for (var i = 0; i < files.length; i++)
{
var file = files[i];
// We're only interested in image files
if (!file.type.match('image.*'))
{
alert(language.not_an_image_file.replace(':file_name', file.name));
this.onUploadFailed(null, file.name);
continue;
}
// Upload the file
this.uploadFile(event.target, file);
}
// Prevent standard form upload
event.preventDefault();
return false;
}
};
}
/*!
* jQuery JavaScript Library v3.2.0
* https://jquery.com/
@@ -22961,131 +23106,3 @@ var Popover = function ($) {
}(jQuery);
}();
/**
* This model is used by admin/show_album.blade.php to handle photo uploads.
* @param album_id ID of the album the photos are being uploaded to
* @param queue_token Unique token of the upload queue to save the photos to
* @param language Array containing language strings
* @param urls Array containing URLs
* @constructor
*/
function UploadPhotosViewModel(album_id, queue_token, language, urls) {
this.el = '#upload-tab';
this.data = {
currentStatus: '',
imagesFailed: 0,
imagesTotal: 0,
isBulkUploadInProgress: false,
isUploadInProgress: false,
statusMessages: []
};
this.computed = {
// a computed getter
failedPercentage: function () {
return ((this.imagesFailed() / this.imagesTotal()) * 100).toFixed(2) + '%';
},
successfulPercentage: function () {
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);
if ((this.imagesFailed + this.imagesUploaded) >= this.imagesTotal) {
this.isUploadInProgress = false;
if (this.imagesFailed == 0 && this.imagesUploaded > 0) {
window.location = urls.analyse;
}
}
},
// This method is called when an uploaded image fails
onUploadFailed: function (data, file_name) {
this.imagesFailed++;
this.statusMessages.push({
'message_class': 'text-danger',
'message_text': language.image_failed.replace(':file_name', file_name)
});
this.onUploadCompleted();
},
// This method is called when an uploaded image succeeds
onUploadSuccessful: function (data, file_name) {
if (data.is_successful) {
self.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();
}
else {
self.onUploadFailed(data, file_name);
}
},
uploadFile: function uploadImageFile(formObject, imageFile) {
var self = this;
var formData = new FormData();
formData.append('album_id', album_id);
formData.append('queue_token', queue_token);
formData.append('photo[]', imageFile, imageFile.name);
$.ajax(
{
contentType: false,
data: formData,
error: function (data) {
self.onUploadFailed(data, imageFile.name);
},
method: $(formObject).attr('method'),
processData: false,
success: function (data) {
self.onUploadSuccessful(data, imageFile.name);
},
url: $(formObject).attr('action')
}
);
this.isUploadInProgress = true;
},
uploadIndividualFiles: function(event) {
var fileSelect = $('input[type=file]', event.target);
// Get the selected files
var files = fileSelect[0].files;
// Reset statistics
this.currentStatus = '';
this.statusMessages = [];
this.imagesUploaded = 0;
this.imagesFailed = 0;
this.imagesTotal = files.length;
this.isUploadInProgress = true;
// Loop through each of the selected files and upload them individually
for (var i = 0; i < files.length; i++)
{
var file = files[i];
// We're only interested in image files
if (!file.type.match('image.*'))
{
alert(language.not_an_image_file.replace(':file_name', file.name));
this.onUploadFailed(null, file.name);
continue;
}
// Upload the file
this.uploadFile($(this), file);
}
// Prevent standard form upload
event.preventDefault();
return false;
}
};
}

16
public/js/blue-twilight.min.js vendored
View File

File diff suppressed because one or more lines are too long