Files
Backend-Api/ServiceHost/wwwroot/AssetsClient/pages/RollCall/js/EmployeeUploadPicture.js
2024-09-18 21:07:23 +03:30

324 lines
13 KiB
JavaScript

$(document).ready(function () {
$('.loadingButton').on('click', function () {
var button = $(this);
var loadingDiv = button.find('.loading');
loadingDiv.show();
});
$('.desktop-btn, .mobile-btn').on('click', function () {
var id = $(this).attr('id').split('_')[1];
var isActive = $(this).hasClass('btn-deactive') ? 'deactive' : 'active';
togglePersonnelStatus(id, isActive);
});
loadInfoCount();
});
function loadDataAjax() {
let pageIndex = Number($('#pageIndex').val());
var b = pageIndex % 30;
var html = '';
console.log(pageIndex);
if (b === 0 && pageIndex > 0) {
$.ajax({
async: false,
contentType: 'charset=utf-8',
dataType: 'json',
type: 'GET',
url: loadEmployeeUploadDataAjax,
data: {
pageIndex: pageIndex
},
headers: { "RequestVerificationToken": `${antiForgeryToken}` },
success: function (response) {
if (response.pageIndex > 0) {
var n = pageIndex + 1;
var dataLoad = response.data.personnelInfoViewModels;
dataLoad.forEach(function(item) {
html += `
<div id="Section_${item.employeeId}" class="Rtable-row align-items-center position-relative ${
(item.isActiveString === "false" && item.hasUploadedImage === "false") ? `deactive` : ``} ${item.Black ? `disable` : ``}">
<div class="Rtable-cell d-md-block d-none width1">
<div class="Rtable-cell--heading">
ردیف
</div>
<div class="Rtable-cell--content">
<span class="d-flex justify-content-center align-items-center justify-content-center">
${n}
</span>
</div>
</div>
<div class="Rtable-cell d-md-block d-none width2">
<div class="Rtable-cell--heading">نام و نام خانوادگی</div>
<div class="Rtable-cell--content">`;
if (item.hasUploadedImage === "true") {
html += `<img id="ImageEmployee_${item.employeeId}" src="data:image/jpeg;base64,${item.imagePath}" class="img-avatar" />`;
}
else
{
html += `<img id="ImageEmployee_${item.employeeId}" src="/AssetsClient/images/Credits.png" class="img-avatar" alt="">`;
}
html += `${item.employeeFullName}
</div>
</div>
<div class="Rtable-cell d-md-block d-none width3">
<div class="Rtable-cell--heading">کد ملی</div>
<div class="Rtable-cell--content">${item.nationalCode}</div>
</div>
<div class="Rtable-cell d-md-block d-none width4">
<div class="Rtable-cell--heading">وضعیت عکس</div>
<div class="Rtable-cell--content">`;
if (item.hasUploadedImage === "true") {
html += `<p id="TextUpload_${item.employeeId}" class="m-0">عکس پرسنل آپلود شده است</p>`;
}
else {
html += `<p id="TextUpload_${item.employeeId}" class="m-0 text-danger">عکس پرسنل آپلود نشده است</p>`;
}
html += `</div>
</div>
<div class="Rtable-cell d-md-block d-none width5">
<div class="Rtable-cell--content align-items-center d-flex d-md-block text-end">`;
var isActive = item.isActiveString === "true" ? "deactive" : "active";
html += `<button class="desktop-btn ${(item.isActiveString === "true"
? `btn-deactive`
: item.hasUploadedImage === "false"
? `btn-active disable`
: `btn-active`)}"
type="button"
style="width: 95px;"
id="togglePersonnelStatus_${item.id}_desktop">
<div id="IsActiveString_${item.id}_desktop">
${item.isActiveString === "true" ? `غیر فعال کردن` : `فعال کردن`}
</div>
</button>
<button class="btn-upload" type="button" onclick='ModalUploadPics(${item.employeeId})' id="uploadMobileBTN_${item.employeeId}" style="width: 95px;">
${item.hasUploadedImage === "true" ? `ویرایش عکس` : `بارگذاری عکس`}
</button>
</div>
</div>
<div class="table-rollcall-mobile w-100 d-flex d-md-none align-items-center justify-content-between">
<div class="d-flex justify-content-center align-items-center justify-content-between">
<div class="Rtable-cell--content">
<span class="d-flex justify-content-center align-items-center justify-content-center" style="width: 30px;height: 30px;">
${n}
</span>
</div>
<div class="Rtable-cell--content">
<span class="mx-2">`;
if (item.hasUploadedImage === "true") {
html += `<img id="ImageEmployeeMobile_${item.employeeId}" src="data:image/jpeg;base64,${item.imagePath}" class="img-avatar" />`;
}
else {
html += `<img id="ImageEmployeeMobile_${item.employeeId}" src="/AssetsClient/images/Credits.png" class="img-avatar" alt="">`;
}
html += `</span>
</div>
<div class="Rtable-cell--content my-auto">
<div class="title-mobile" style="width: 132px;">${item.employeeFullName}</div>
<div class="content-mobile">`;
if (item.hasUploadedImage === "true") {
html += `<p id="TextUploadMobile_${item.employeeId}" class="m-0">عکس پرسنل آپلود شده است</p>`;
}
else {
html += `<p id="TextUploadMobile_${item.employeeId}" class="m-0 text-danger">عکس پرسنل آپلود نشده است</p>`;
}
html += `</div>
</div>
</div>
<div class="Rtable-cell--content d-flex justify-content-end align-items-center">
<div class="Rtable-cell--heading d-block text-center" style="width: 100px;">
<div class="Rtable-cell--content align-items-center d-block text-end">
<button class="btn-upload-mobile text-nowrap w-100" type="button" id="uploadMobileBTNMobile_${item.employeeId}" onclick='ModalUploadPics(${item.employeeId})'>
${item.hasUploadedImage === "true" ? `ویرایش عکس` : `بارگذاری عکس`}
</button>
<button
class="mobile-btn text-nowrap mt-1 w-100 ${item.isActiveString === "true" ? `btn-deactive` : item.hasUploadedImage === "false" ? `btn-active disable` : `btn-active`}"
type="button"
id="togglePersonnelStatus_${item.id}_mobile"
style="padding: 9px 8px; font-weight: 600; font-size: 10px;">
<div id="IsActiveString_${item.id}_mobile">
${item.isActiveString === "true" ? `غیر فعال کردن` : `فعال کردن`}
</div>
</button>
</div>
</div>
</div>
</div>
</div>`;
n += 1;
});
$('#ajaxDataLoad').append(html);
var newPageIndex = pageIndex + response.pageIndex;
$('#pageIndex').val(newPageIndex);
}
},
failure: function (response) {
console.log(5, response);
}
});
}
}
$('.goToTop').on('click', function () {
$('html, body').animate({ scrollTop: 0 }, 360);
return false;
});
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 600) {
loadDataAjax();
}
if ($(this).scrollTop() > 100) {
$('.goToTop').show().fadeIn();
} else {
$('.goToTop').fadeOut().hide();
}
});
function loadInfoCount() {
$.ajax({
async: false,
dataType: 'json',
url: loadInfoCountAjax,
type: 'GET',
success: function (response) {
if (response.isSuccedded) {
$('#maxPersonValid').text(response.maxPersonValid);
$('#isTrueActiveCount').text(response.isTrueActiveCount);
$('#isFalseActiveCount').text(response.isFalseActiveCount);
} else {
$('.alert-msg').show();
$('.alert-msg p').text(response.message);
setTimeout(function () {
$('.alert-msg').hide();
$('.alert-msg p').text('');
}, 3500);
}
},
error: function (err) {
console.log(err);
}
});
}
function ModalUploadPics(employeeID)
{
$.ajax({
async: false,
dataType: 'json',
url: checkModalTakeImageAjax,
type: 'GET',
success: function (response) {
if (response.isSuccedded) {
window.location.href = `#showmodal=/Client/Company/RollCall/EmployeeUploadPicture?employeeId=${employeeID}&handler=ModalTakeImages`;
} else {
$('.alert-msg').show();
$('.alert-msg p').text(response.message);
setTimeout(function () {
$('.alert-msg').hide();
$('.alert-msg p').text('');
}, 3500);
}
},
error: function (err) {
console.log(err);
}
});
}
function togglePersonnelStatus(id, type) {
var urlType = "";
switch (type) {
case 'deactive':
urlType = deActivePersonnelAjax;
break;
case 'active':
urlType = activePersonnelAjax;
break;
default:
return;
}
const buttonDesktop = $(`#togglePersonnelStatus_${id}_desktop`);
const buttonMobile = $(`#togglePersonnelStatus_${id}_mobile`);
if (type === "deactive") {
swal.fire({
title: "اخطار",
text: "در صورت غیر فعال کردن این پرسنل، حقوق این ماه ایشان محاسبه نخواهد شد. آیا مطمئن هستید؟",
icon: "warning",
showCancelButton: true,
confirmButtonText: "بله",
cancelButtonText: "خیر",
confirmButtonColor: '#84cc16',
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
actionPersonnelStatus(urlType, id, type, buttonDesktop, buttonMobile);
} else {
return;
}
});
} else {
actionPersonnelStatus(urlType, id, type, buttonDesktop, buttonMobile);
}
}
function actionPersonnelStatus(url, id, type, buttonDesktop, buttonMobile) {
$.ajax({
async: false,
dataType: 'json',
type: 'POST',
url: url,
headers: { "RequestVerificationToken": antiForgeryToken },
data: { id: id },
success: function (response) {
if (response.isSuccedded) {
$('.alert-success-msg').show();
$('.alert-success-msg p').text(response.message);
setTimeout(function () {
$('.alert-success-msg').hide();
$('.alert-success-msg p').text('');
}, 2000);
loadInfoCount();
// Toggle both desktop and mobile buttons
if (type === "deactive") {
$(`#IsActiveString_${id}_desktop`).text('فعال کردن');
$(`#IsActiveString_${id}_mobile`).text('فعال کردن');
buttonDesktop.removeClass('btn-deactive').addClass('btn-active');
buttonMobile.removeClass('btn-deactive').addClass('btn-active');
} else {
$(`#IsActiveString_${id}_desktop`).text('غیر فعال کردن');
$(`#IsActiveString_${id}_mobile`).text('غیر فعال کردن');
buttonDesktop.removeClass('btn-active').addClass('btn-deactive');
buttonMobile.removeClass('btn-active').addClass('btn-deactive');
}
} else {
$('.alert-msg').show();
$('.alert-msg p').text(response.message);
setTimeout(function () {
$('.alert-msg').hide();
$('.alert-msg p').text('');
}, 3500);
}
},
error: function (err) {
console.log(err);
}
});
}