sriramphanib/WebBuild
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

change

Browse Source
This commit is contained in:
sriram
2023-03-13 08:13:18 +00:00
parent b6c4e025bc
commit 0da601e691
36 changed files with 215 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wwwroot/platform/connect/components/chat.js
+53 -33
View File
@@ -1030,17 +1030,17 @@ var Unibase;
if (response.result.messageDeliveredDate != null) {
var b = Unibase.Platform.Helpers.DateTimeHelper.Instance().formatServerDateTime(response.result.messageDeliveredDate);
var ddate = Unibase.Platform.Helpers.DateTimeHelper.Instance().formatLocalDateTimeWithT(b);
var html = `<li class="list-group-item px-1 py-2 flex-between-center position-relative delivered-user">
<a href="javascript:;" class="d-flex align-items-center c-gap-10 w-100 mnw-0">
<div class="media-body flex-grow-1 mnw-0 d-flex flex-column justify-content-center"><div class="flex-between-center c-gap-10 text-dark font-weight-500 font-15" title="${ddate}"><span class="text-truncate">${ddate}</span></div>
var html = `<li class="list-group-item px-1 py-2 flex-between-center position-relative delivered-user">
<a href="javascript:;" class="d-flex align-items-center c-gap-10 w-100 mnw-0">
<div class="media-body flex-grow-1 mnw-0 d-flex flex-column justify-content-center"><div class="flex-between-center c-gap-10 text-dark font-weight-500 font-15" title="${ddate}"><span class="text-truncate">${ddate}</span></div>
<div class="user-about hidden"></div></div></a></li>`;
$('.delivereduserslist').html(html).removeClass('hidden');
if (response.result.messageReadDate != null) {
var b = Unibase.Platform.Helpers.DateTimeHelper.Instance().formatServerDateTime(response.result.messageReadDate);
var rdate = Unibase.Platform.Helpers.DateTimeHelper.Instance().formatLocalDateTimeWithT(b);
var html = `<li class="list-group-item px-1 py-2 flex-between-center position-relative delivered-user">
<a href="javascript:;" class="d-flex align-items-center c-gap-10 w-100 mnw-0">
<div class="media-body flex-grow-1 mnw-0 d-flex flex-column justify-content-center"><div class="flex-between-center c-gap-10 text-dark font-weight-500 font-15" title="${rdate}"><span class="text-truncate">${rdate}</span></div>
var html = `<li class="list-group-item px-1 py-2 flex-between-center position-relative delivered-user">
<a href="javascript:;" class="d-flex align-items-center c-gap-10 w-100 mnw-0">
<div class="media-body flex-grow-1 mnw-0 d-flex flex-column justify-content-center"><div class="flex-between-center c-gap-10 text-dark font-weight-500 font-15" title="${rdate}"><span class="text-truncate">${rdate}</span></div>
<div class="user-about hidden"></div></div></a></li>`;
$('.readuserslist').html(html).removeClass('hidden');
}
@@ -1061,9 +1061,9 @@ var Unibase;
if (contact != null) {
const contactName = contact.contactName;
const avatarHtml = instance._chatTemplate.getUserAvatarHtml(contact);
deliveredUsersHtml += `<li class="list-group-item px-1 py-2 flex-between-center position-relative delivered-user" id="deliveredUser_${recievedusers[i]}">
<a href="javascript:;" class="d-flex align-items-center c-gap-10 w-100 mnw-0">${avatarHtml}
<div class="media-body flex-grow-1 mnw-0 d-flex flex-column justify-content-center"><div class="flex-between-center c-gap-10 text-dark font-weight-500 font-15" title="${contactName}"><span class="text-truncate">${contactName}</span></div>
deliveredUsersHtml += `<li class="list-group-item px-1 py-2 flex-between-center position-relative delivered-user" id="deliveredUser_${recievedusers[i]}">
<a href="javascript:;" class="d-flex align-items-center c-gap-10 w-100 mnw-0">${avatarHtml}
<div class="media-body flex-grow-1 mnw-0 d-flex flex-column justify-content-center"><div class="flex-between-center c-gap-10 text-dark font-weight-500 font-15" title="${contactName}"><span class="text-truncate">${contactName}</span></div>
<div class="user-about hidden"></div></div></a></li>`;
}
}
@@ -1079,9 +1079,9 @@ var Unibase;
const contact = Chat.grpdetails.find(x => x.recipientId == readusers[i]);
const contactName = contact.contactName;
const avatarHtml = instance._chatTemplate.getUserAvatarHtml(contact);
readUserHtml += `<li class="list-group-item px-1 py-2 flex-between-center position-relative delivered-user" id="readUser_${readusers[i]}">
<a href="javascript:;" class="d-flex align-items-center c-gap-10 w-100 mnw-0">${avatarHtml}
<div class="media-body flex-grow-1 mnw-0 d-flex flex-column justify-content-center"><div class="flex-between-center c-gap-10 text-dark font-weight-500 font-15" title="${contactName}"><span class="text-truncate">${contactName}</span></div>
readUserHtml += `<li class="list-group-item px-1 py-2 flex-between-center position-relative delivered-user" id="readUser_${readusers[i]}">
<a href="javascript:;" class="d-flex align-items-center c-gap-10 w-100 mnw-0">${avatarHtml}
<div class="media-body flex-grow-1 mnw-0 d-flex flex-column justify-content-center"><div class="flex-between-center c-gap-10 text-dark font-weight-500 font-15" title="${contactName}"><span class="text-truncate">${contactName}</span></div>
<div class="user-about hidden"></div></div></a></li>`;
}
$('.readuserslist').html(readUserHtml).removeClass('hidden');
@@ -2994,11 +2994,31 @@ var Unibase;
audio: true
}).then(function (stream) {
gumStream = stream;
recorder.ondataavailable = function (e) {
chunks.push(e.data);
let blob = new Blob(chunks, { type: 'audio/webm' });
var reader = new FileReader();
reader.addEventListener("load", function () {
var audiofile = Chat.Instance().dataURLtoFile(reader.result, Chat.Instance().getUniqueAudioName());
var item = {
Files: audiofile,
Index: Chat.attachments.length
};
Chat.attachments.push(item);
Chat.Instance().sendfiles();
}, false);
reader.readAsDataURL(blob);
};
recorder.start();
});
$('.voicemsg-send-btn').click(function () {
document.getElementById('minutes').innerText = '0';
document.getElementById('seconds').innerText = '0';
$('.record_div').addClass('hidden');
if (recorder.state != 'inactive') {
recorder.stop();
gumStream.getAudioTracks()[0].stop();
}
clearInterval(x);
});
}
@@ -3137,18 +3157,18 @@ var Unibase;
let popUpHtml = '';
if (!jQuery.isEmptyObject(config)) {
const buttons = config.buttons;
popUpHtml += `<div class="modal fade chat-popup biz-custom-scrollbar" id="chatPopUp" ${!Chat.isFullScreen ? 'data-backdrop="false"' : ''}>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
${config.message && `<div class="modal-body pa-10">
<div class="chat-popup-msg font-weight-500 text-dark">${config.message}</div>
</div>`}
${config.buttons && `<div class="modal-footer pa-10">
<a href="javascript:;" class="${buttons.cancel.className || 'btn btn-outline-danger'} btn-sm cancel-btn" id="chatPopupCancelBtn">${buttons.cancel.label || 'Close'}</a>
<a href="javascript:;" class="${buttons.confirm.className || 'btn btn-primary'} btn-sm confirm-btn" id="chatPopupConfirmBtn">${buttons.confirm.label || 'Save'}</a>
</div>`}
</div>
</div>
popUpHtml += `<div class="modal fade chat-popup biz-custom-scrollbar" id="chatPopUp" ${!Chat.isFullScreen ? 'data-backdrop="false"' : ''}>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
${config.message && `<div class="modal-body pa-10">
<div class="chat-popup-msg font-weight-500 text-dark">${config.message}</div>
</div>`}
${config.buttons && `<div class="modal-footer pa-10">
<a href="javascript:;" class="${buttons.cancel.className || 'btn btn-outline-danger'} btn-sm cancel-btn" id="chatPopupCancelBtn">${buttons.cancel.label || 'Close'}</a>
<a href="javascript:;" class="${buttons.confirm.className || 'btn btn-primary'} btn-sm confirm-btn" id="chatPopupConfirmBtn">${buttons.confirm.label || 'Save'}</a>
</div>`}
</div>
</div>
</div>`;
popUpHtml += '<div class="modal-backdrop fade show position-absolute chat-popup-backdrop" id="chatPopupBackdrop"></div>';
$('#chatAppWrap').append(popUpHtml);
@@ -3191,15 +3211,15 @@ var Unibase;
else {
contact = Chat.AllContacts.find(x => x.chatGroupId == Chat.chatGroupId);
}
const popupHtml = `<div class="modal fade chat-img-preview-modal chat-popup panel-preview" id="chatImgPreviewModal" tabindex="-1" role="dialog" data-backdrop="false">
<div class="modal-dialog h-100 my-0" role="document">
<div class="modal-content h-100">
<div class="modal-body h-100">
<img src="${contact.photoUrl}" class="preview-img img-fluid" onerror="ReloadImage(event)" data-dynamic="1" data-loaded="0">
</div>
</div>
</div>
</div>
const popupHtml = `<div class="modal fade chat-img-preview-modal chat-popup panel-preview" id="chatImgPreviewModal" tabindex="-1" role="dialog" data-backdrop="false">
<div class="modal-dialog h-100 my-0" role="document">
<div class="modal-content h-100">
<div class="modal-body h-100">
<img src="${contact.photoUrl}" class="preview-img img-fluid" onerror="ReloadImage(event)" data-dynamic="1" data-loaded="0">
</div>
</div>
</div>
</div>
<div class="modal-backdrop fade show position-absolute" id="chatPopupBackdrop"></div>`;
$('#chatAppWrap').append(popupHtml);
$('#chatImgPreviewModal').modal();
wwwroot/platform/connect/components/chat.template.js
+22 -3
View File
@@ -143,6 +143,7 @@ var Unibase;
<section class="message-info chat-flex-column h-100 hidden" id="messageInfoSection"></section>
</div>${isFullScreen ? this.getChatFullScreenHtml() : ''}
<div class="webcam hidden"></div>
<div class="audio_controls hidden" style="position:absolute;top:85%;left:10%;"></div>
</div>`;
return _template;
}
@@ -221,6 +222,18 @@ var Unibase;
</a>
</div>
</div>
<div class="record_div ml-6 hidden" style="position: absolute;background-color: #b5c9a6;width: 96%;height: 48px;border-radius: 10px;font-size: 20px;z-index: 1;display: flex;">
<span class="ml-10 ">Recording.......</span>
<span class="" style="width: 30px;">
<ul style="display:flex;">
<li><span id="minutes"></span></li>
<p>:</p>
<li><span id="seconds"></span></li>
</ul>
</span>
<a href="javascript:;" class="btn btn-icon btn-primary btn-rounded d-30 voicemsg-send-btn cursor-pointer mt-10 ml-120">
<span class="btn-icon-wrap"><i class="las la-paper-plane msg-option font-20"></i></span></a>
</div>
<div class="msg-option-container d-flex align-items-center c-gap-15 font-20">
<div class="msg-compose-options align-items-center c-gap-15">
<div class="btn-file msg-option attachments-btn cursor-pointer">
@@ -251,6 +264,11 @@ var Unibase;
<span class="btn-icon-wrap"> <i class="las la-paper-plane msg-option font-20"></i></span>
</a>
</div>
<div class="voicemsg_icon" id="recordaudio">
<a href="javascript:;" class="btn btn-icon btn-primary btn-rounded d-30 msg-send-btn" onclick="Unibase.Platform.Connect.Components.Chat.Instance().voicemsg()">
<span class="btn-icon-wrap"><i class="fa fa-microphone msg-option font-20"></i></span>
</a>
</div>
</div>
</div>
<div class="msg-multiaction-btns hidden">
@@ -477,6 +495,7 @@ var Unibase;
return _template;
}
getprofilebody() {
var imginput = '';
var contact = Components.Chat.contacts.find(x => x.contactId == Components.Chat.contactId);
if (Components.Chat.contactId == 0) {
contact = Components.Chat.recentChats.find(x => x.chatGroupId == Components.Chat.chatGroupId);
@@ -490,9 +509,9 @@ var Unibase;
let avatarHtml = this.getUserAvatarHtml(contact, false, true);
avatarHtml = avatarHtml.replace('avatar-sm', 'avatar-xl d-100');
if (!Components.Chat.isPrivate) {
avatarHtml += '<input type="file" id="profileImageInput" class="Profile_image hidden" onchange="Unibase.Platform.Connect.Components.Chat.Instance().changeProfileImage(this);" accept="image/png,image/jpeg">';
imginput = '<span class="btn btn-icon btn-icon-circle btn-primary btn-xs d-20" style="position:absolute;top:10%;z-index:1;left:56%;"><i class="fa fa-pencil"></i></span><input type="file" id="profileImageInput" class="Profile_image hidden" onchange="Unibase.Platform.Connect.Components.Chat.Instance().changeProfileImage(this);" accept="image/png,image/jpeg">';
}
const template = `<div class="profile-details-wrap" id="profileDetailsWrap"><div class="user-profile-info flex-center flex-column r-gap-10" id="userProfileInfo"><label class="profile-header-img flex-center flex-shrink-0 my-0 cursor-pointer" for="profileImageInput" imgchatUser_${Components.Chat.chatGroupId} title="Upload Image">${avatarHtml}</label>
const template = `<div class="profile-details-wrap" id="profileDetailsWrap"><div class="user-profile-info flex-center flex-column r-gap-10" id="userProfileInfo"><label class="profile-header-img flex-center flex-shrink-0 my-0 cursor-pointer" for="profileImageInput" imgchatUser_${Components.Chat.chatGroupId} title="Upload Image">${imginput}</label>${avatarHtml}
<div class="div-user-group-Name d-flex flex-column justify-content-center mnw-0 r-gap-5 w-100">
<div class="profile-name-wrap position-relative flex-center c-gap-10"><span class="Profile_name grpname_${Components.Chat.chatGroupId} font-weight-500 font-18 text-center text-dark">${contactName}</span><div class="edit-group-input-wrap position-relative mb-5 hidden" id="editGroupInputWrap"><input type="text" class="custom-chat-input text-dark font-weight-500 edit_groupdetailsInput pr-30" value="${contactName} " data-prevvalue="${contactName} "></a>
<a href="javascript:;" class="save_changes btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-26" onclick="Unibase.Platform.Connect.Components.Chat.Instance().changeGroupName();"><span class="btn-icon-wrap"><i class="icon dripicons-checkmark"></i></span></a></div><a href="javascript:;" class="edit_grpdetails btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-26 hidden" onclick="Unibase.Platform.Connect.Components.Chat.Instance().EditgroupDetails('${contactName}');"><span class="btn-icon-wrap"><i class="fa fa-pencil font-14"></i></span></a></div>
@@ -638,7 +657,7 @@ var Unibase;
return _template;
}
getUserAvatarHtml(contactInfo, isOnlineVisible = false, isPrivateWindow = false) {
let avatarHtml = '<div class="media-img-wrap avatar ImagePng_' + contactInfo.chatGroupId + ' avatar-sm flex-shrink-0">';
let avatarHtml = '<div class="media-img-wrap avatar ImagePng_' + contactInfo.chatGroupId + ' avatar-sm flex-shrink-0 cursor-pointer" onclick="Unibase.Platform.Connect.Components.Chat.Instance().showProfileImgPreview()" title="Preview Profile">';
if (!contactInfo.photoUrl) {
let avatarTxt = "";
let headingTxt = contactInfo.contactName;