309 lines
12 KiB
JavaScript
309 lines
12 KiB
JavaScript
var pictures = [];
|
|
var targetSrc = '/assetsclient/images/pd-image.png';
|
|
|
|
var penidngMessage = `<div class="penidngMessage">درحال برسی</div>`;
|
|
var pendingIcon = `<svg width="24" height="24" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 19.25C15.5563 19.25 19.25 15.5563 19.25 11C19.25 6.44365 15.5563 2.75 11 2.75C6.44365 2.75 2.75 6.44365 2.75 11C2.75 15.5563 6.44365 19.25 11 19.25Z" fill="#FDBA74"/><path d="M11.4168 14.6667C11.4168 14.8968 11.2303 15.0833 11.0002 15.0833C10.77 15.0833 10.5835 14.8968 10.5835 14.6667C10.5835 14.4365 10.77 14.25 11.0002 14.25C11.2303 14.25 11.4168 14.4365 11.4168 14.6667Z" fill="white" stroke="white"/><path d="M11 11.916V6.41602V11.916Z" fill="white"/><path d="M11 11.916V6.41602" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>`;
|
|
var confirmMessage = `<div class="confirmedMessage">تایید شد</div>`;
|
|
var confirmIcon = `<svg width="24" height="24" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="5.25" fill="#00C04D"/><path d="M4.66659 7L6.41659 8.75L9.33325 5.25" stroke="white" stroke-linecap="round"/></svg>`;
|
|
var rejectMessage = `<div class="rejectMessage">رد شد</div>`;
|
|
var rejectIcon = `<svg width="24" height="24" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="5.25" fill="#FF5D5D"/><path d="M9.33341 4.66602L4.66675 9.33268" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.66659 4.66602L9.33325 9.33268" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
|
|
|
|
$(document).ready(function () {
|
|
$(document).off('click', '.btnUploadingPD').on('click', '.btnUploadingPD', function (event) {
|
|
event.preventDefault();
|
|
const index = $(this).data('index');
|
|
$('input[type="file"][data-index="' + index + '"]').click();
|
|
});
|
|
|
|
updateButtons();
|
|
|
|
$(document).off('change', '.file-input').on('change', '.file-input', function (e) {
|
|
e.preventDefault();
|
|
|
|
const fileInputFile = this.files[0];
|
|
const indexFileValue = $(this).data('index');
|
|
const validExtensions = ['jpg', 'jpeg', 'png'];
|
|
|
|
const label = $(`#label_${indexFileValue}`).val();
|
|
const pdBox = $(this).closest('.pdBox');
|
|
const img = pdBox.find('.preview-image');
|
|
|
|
if (fileInputFile) {
|
|
const fileName = fileInputFile.name.toLowerCase();
|
|
const extension = fileName.split('.').pop();
|
|
|
|
if (validExtensions.includes(extension)) {
|
|
if (fileInputFile.size > 5000000) {
|
|
showAlertMessage('.alert-msg', 'لطفا فایل حجم کمتر از 5 مگابایت را آپلود کنید.', 3500);
|
|
$(this).val('');
|
|
return;
|
|
}
|
|
|
|
// خواندن فایل و نمایش آن
|
|
const reader = new FileReader();
|
|
reader.onload = function (event) {
|
|
img.attr('src', event.target.result);
|
|
|
|
const base64String = event.target.result.split(',')[1];
|
|
const byteCharacters = atob(base64String);
|
|
const byteNumbers = new Array(byteCharacters.length);
|
|
for (let i = 0; i < byteCharacters.length; i++) {
|
|
byteNumbers[i] = byteCharacters.charCodeAt(i);
|
|
}
|
|
const byteArray = new Uint8Array(byteNumbers);
|
|
const blob = new Blob([byteArray], { type: fileInputFile.type });
|
|
const newFile = new File([blob], fileInputFile.name, { type: fileInputFile.type });
|
|
|
|
let picturesPart = {
|
|
Label: label,
|
|
PictureFile: newFile
|
|
};
|
|
pictures.push(picturesPart);
|
|
};
|
|
|
|
reader.readAsDataURL(fileInputFile);
|
|
|
|
//uploadFile(fileInputFile, indexFileValue, label);
|
|
} else {
|
|
showAlertMessage('.alert-msg', 'فرمت فایل باید یکی از موارد jpeg, jpg یا png باشد.', 3500);
|
|
}
|
|
}
|
|
});
|
|
|
|
$(document).off('click', '.btnDeletingPD').on('click', '.btnDeletingPD', function (event) {
|
|
event.preventDefault();
|
|
const pdBox = $(this).closest('.pdBox');
|
|
const img = pdBox.find('.preview-image');
|
|
const label = pdBox.find('img').data("label");
|
|
|
|
|
|
swal.fire({
|
|
title: "اخطار",
|
|
text: "آیا میخواهید عکس را حذف کنید؟",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
confirmButtonText: "بله",
|
|
cancelButtonText: "خیر",
|
|
confirmButtonColor: '#84cc16',
|
|
reverseButtons: true
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
|
|
if (img.length) {
|
|
img.attr('src',targetSrc);
|
|
}
|
|
showAlertMessage('.alert-success-msg', 'عکس با موفقیت حذف شد.', 3500);
|
|
|
|
|
|
pdBox.removeClass('uploaded');
|
|
removeImage(label);
|
|
|
|
updateButtons();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
var indexCount = 0;
|
|
function uploadFile(file, indexId, label) {
|
|
const formData = new FormData();
|
|
//177 must be replaced with employeeId
|
|
formData.append('command.EmployeeId', 177);
|
|
formData.append('command.Label', label);
|
|
formData.append('command.PictureFile', file);
|
|
|
|
const pdBox = $('input[data-index="' + indexId + '"]').closest('.pdBox');
|
|
const spinner = pdBox.find('.spinner-loading-progress');
|
|
|
|
const percentageText = pdBox.find('.percentageText');
|
|
|
|
spinner.show();
|
|
$('#createUploadingFiles').prop('disabled', true).addClass('disable');
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('POST', saveUploadFileModalAjax, true);
|
|
xhr.setRequestHeader('RequestVerificationToken', antiForgeryToken);
|
|
|
|
const uploadStartTime = new Date().getTime();
|
|
let simulatedProgress = 0;
|
|
let actualProgress = 0;
|
|
let isUploadComplete = false;
|
|
|
|
// Simulate progress every 20ms, gradually increasing the bar until the actual progress is reached
|
|
const progressInterval = setInterval(function () {
|
|
if (simulatedProgress < actualProgress && !isUploadComplete) {
|
|
simulatedProgress += 1; // Gradually increase simulated progress
|
|
spinner.css('width', `${simulatedProgress}%`);
|
|
percentageText.text(`${simulatedProgress}%`);
|
|
}
|
|
|
|
if (simulatedProgress >= 100) {
|
|
clearInterval(progressInterval); // Stop once the progress hits 100%
|
|
}
|
|
}, 30); // Increases by 1% every 20ms, making it smooth
|
|
|
|
// Actual upload progress listener
|
|
xhr.upload.addEventListener('progress', function (e) {
|
|
if (e.lengthComputable) {
|
|
actualProgress = Math.round((e.loaded / e.total) * 100);
|
|
|
|
// If the actual progress is slow, allow the simulated progress to match it naturally
|
|
if (actualProgress >= simulatedProgress) {
|
|
simulatedProgress = actualProgress;
|
|
spinner.css('width', `${simulatedProgress}%`);
|
|
percentageText.text(`${simulatedProgress}%`);
|
|
}
|
|
}
|
|
});
|
|
|
|
// On upload completion
|
|
xhr.onload = function () {
|
|
spinner.css('transition', 'all 2s ease-in');
|
|
|
|
const uploadEndTime = new Date().getTime();
|
|
const timeDiff = uploadEndTime - uploadStartTime;
|
|
const minUploadTime = 2500; // Minimum of 2 seconds for the whole process
|
|
|
|
const response = JSON.parse(xhr.responseText);
|
|
isUploadComplete = true; // Mark the upload as complete
|
|
|
|
const delayTime = Math.max(minUploadTime - timeDiff, 0);
|
|
|
|
setTimeout(function () {
|
|
clearInterval(progressInterval); // Clear the interval when done
|
|
simulatedProgress = 100;
|
|
spinner.css('width', '100%');
|
|
percentageText.text('100%');
|
|
|
|
if (xhr.status === 200 && response.isSuccedded) {
|
|
indexCount++;
|
|
const reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
const pdBox = $('input[data-index="' + indexId + '"]').closest('.pdBox');
|
|
const img = pdBox.find('.preview-image');
|
|
img.attr('src', e.target.result);
|
|
updateButtons();
|
|
pdBox.find('.btnDeletingPD').addClass("unsubmitted");
|
|
pdBox.addClass("uploaded");
|
|
checkStep5();
|
|
|
|
// Verify the correct hidden input is selected
|
|
const label = pdBox.find('img').data("label");
|
|
|
|
let picturesPart = {
|
|
Label: label,
|
|
PictureFile: img.attr('src')
|
|
};
|
|
pictures.push(picturesPart);
|
|
};
|
|
|
|
|
|
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
showAlertMessage('.alert-msg', response.message || 'Error uploading file', 3500);
|
|
$('input[type="file"][data-index="' + indexId + '"]').val('');
|
|
}
|
|
|
|
spinner.css('width', '0%'); // Reset the progress bar
|
|
spinner.hide();
|
|
}, delayTime); // Ensure a minimum of 2 seconds for the full process
|
|
};
|
|
|
|
// Handle upload error
|
|
xhr.onerror = function () {
|
|
clearInterval(progressInterval); // Stop progress on error
|
|
showAlertMessage('.alert-msg', 'مشکلی در آپلود فایل به وجود آمد.', 3500);
|
|
$('input[type="file"][data-index="' + indexId + '"]').val('');
|
|
spinner.css('width', '0%');
|
|
spinner.hide();
|
|
handleActiveUploads();
|
|
};
|
|
|
|
xhr.send(formData);
|
|
|
|
}
|
|
|
|
function showAlertMessage(selector, message, timeout) {
|
|
$(selector).show();
|
|
$(selector + ' p').text(message);
|
|
setTimeout(function () {
|
|
$(selector).hide();
|
|
$(selector + ' p').text('');
|
|
}, timeout);
|
|
}
|
|
|
|
//function removeEmployeeDocumentByLabel(indexId, employeeId) {
|
|
// const label = $(`#label_${indexId}`).val();
|
|
// const pdBox = $('input[data-index="' + indexId + '"]').closest('.pdBox');
|
|
|
|
|
|
// $.ajax({
|
|
// url: deleteFileAjaxUrl,
|
|
// method: 'POST',
|
|
// //177 must be replaced with workshopId
|
|
|
|
// data: { label: label, employeeId: employeeId, workshopId: 177 },
|
|
// headers: { 'RequestVerificationToken': antiForgeryToken },
|
|
// success: function (response) {
|
|
// console.log(response);
|
|
// if (response.isSuccedded) {
|
|
// showAlertMessage('.alert-success-msg', 'تصویر موجود با موفقیت حذف شد.', 3500);
|
|
// $(`#label_${indexId}`).val('');
|
|
// pdBox.find('.btnDeletingPD').removeClass("Unsubmitted");
|
|
// updateButtons();
|
|
|
|
// } else {
|
|
// showAlertMessage('.alert-success-msg', response.message, 3500);
|
|
// }
|
|
// },
|
|
// error: function (response) {
|
|
// showAlertMessage('.alert-msg', response.message, 3500);
|
|
// }
|
|
// });
|
|
//}
|
|
|
|
function removeImage(label) {
|
|
$('.pdBox').each(function () {
|
|
var imgSrc = $(this).find('.pdImageBox .preview-image').attr('src');
|
|
var deleteButton = $(this).find('.btnDeletingPD');
|
|
|
|
if (imgSrc === targetSrc) {
|
|
deleteButton.addClass('disable');
|
|
} else {
|
|
deleteButton.removeClass('disable');
|
|
}
|
|
|
|
|
|
});
|
|
pictures = pictures.filter(image => image.Label !== label);
|
|
}
|
|
|
|
function updateButtons() {
|
|
$('.pdBox').each(function () {
|
|
var imgSrc = $(this).find('.pdImageBox .preview-image').attr('src');
|
|
var deleteButton = $(this).find('.btnDeletingPD');
|
|
|
|
if (imgSrc === targetSrc) {
|
|
deleteButton.addClass('disable');
|
|
} else {
|
|
deleteButton.removeClass('disable');
|
|
}
|
|
});
|
|
}
|
|
|
|
function checkStep5() {
|
|
const saveData = $('.saveData');
|
|
const importantUploadedCount = $(".pdBox.important.uploaded").length;
|
|
|
|
const importantCount = $(".pdBox.important").length;
|
|
const cantSave = importantUploadedCount !== 0 && importantUploadedCount !== importantCount;
|
|
const canSave = importantUploadedCount === 0 || importantUploadedCount === importantCount;
|
|
|
|
if (cantSave) {
|
|
saveData.addClass("disable");
|
|
} else if (canSave) {
|
|
saveData.removeClass("disable");
|
|
}
|
|
}
|