548 lines
24 KiB
PHP
548 lines
24 KiB
PHP
<style>
|
|
|
|
.aw-chat-head img{
|
|
cursor:pointer;
|
|
}
|
|
|
|
.scrollhint .item .single-user-content img,.scrollhint .item .sender-message-box img{
|
|
width:100%;
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- Support and Chat Fixed Buttons -->
|
|
<div class="chat-message-box position-fixed">
|
|
|
|
|
|
<!-- Chat Drop Down -->
|
|
<div class="ui floating bg-dark-green-color chat-widget-wrapper icon dropdown button">
|
|
<img src="{{ asset('images/icons/Vector 386.png') }}" alt="Chat Icon">
|
|
|
|
<div class="menu chat-menu">
|
|
<div id="chat-feature-widget" class="ui transition chat-feature-widget">
|
|
<div class="header d-flex justify-content-between align-items-center text-white">
|
|
<p class="chat-popup-label text-light">Chats</p>
|
|
<img class="remove-chat" src="{{ asset('images/icons/Vector (3).svg') }}" alt="Cross Chat Icon">
|
|
</div>
|
|
|
|
<div class="aw-chats">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- User Inbox menu -->
|
|
<div id="inbox" class="ui transition hidden chat-feature-widget inbox-wrapper">
|
|
<div class="header aw-chat-head d-flex align-items-center" style="justify-content: space-between;">
|
|
<img id="back-to-users" src="{{ asset('images/icons/Vector 387.png') }}" alt="Back To Chat">
|
|
<p class="chat-popup-label text-light">James</p>
|
|
<img id="close-chat" src="{{ asset('images/icons/Vector (3).svg') }}" alt="Close Chat">
|
|
</div>
|
|
<div class="scrollhint">
|
|
|
|
|
|
<!--<div class="item">-->
|
|
<!-- <div class="single-user-content d-flex">-->
|
|
<!-- <div class="chat-user-img-box receiver-message-box d-flex">-->
|
|
<!-- <img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">-->
|
|
<!-- <p>Typing...</p>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!--</div>-->
|
|
|
|
</div>
|
|
<div class="outer-message-input-box">
|
|
<div class="inner-message-input d-flex align-items-center justify-content-between">
|
|
<input id="aw-sms" type="text" class="border-0" placeholder="Type a reply">
|
|
<p class="input-action d-flex align-items-center">
|
|
<!--<img src="{{ asset('images/icons/gif.png') }}" alt="Gif">-->
|
|
<!--<img src="{{ asset('images/icons/emoji.png') }}" alt="Emoji">-->
|
|
<img src="{{ asset('images/icons/attachment.png') }}" alt="Attachment">
|
|
<input type="file" id="file-picker" class="file-picker">
|
|
<i class="fa fa-paper-plane-o send-icon" aria-hidden="true"></i>
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End -->
|
|
|
|
|
|
|
|
<!-- Support Drop down -->
|
|
<div class="ui floating bg-dark-green-color support-widget-wrapper icon dropdown button ">
|
|
<img src="images/icons/support.svg" alt="Support Icon">
|
|
<div class="menu support-widget">
|
|
<div class="header support-header mt-0 text-center">
|
|
<h2 class="color-dark-green">Help & Support</h2>
|
|
</div>
|
|
<div class="support-facilities-box d-flex justify-content-between flex-wrap">
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/faq-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green">FAQ</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/laptop-minimalistic-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green">Using Kundo</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/launch-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green text-wrap">Launching Kundo</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/setting-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green text-wrap">Technical Settings</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/data-mapping-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green ">Integration</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/open-door-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green text-wrap">Privacy & Policy</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/news-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green text-wrap">News & Updates</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/graduate-cap-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green ">Training</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header contact-us-header text-center">
|
|
<h2 class="color-dark-green">Contact Us</h2>
|
|
</div>
|
|
|
|
<div class="contact-us-box d-flex justify-content-center">
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/email-14-svgrepo-com (1) 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green text-wrap">Technical Questions</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/about-filled-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green">About Kundo</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<!-- End -->
|
|
|
|
</div>
|
|
|
|
<!-- End -->
|
|
|
|
<audio style="display:none;" id="messageSound" src="{{asset('assets/noti.wav')}}" preload="auto"></audio>
|
|
|
|
|
|
<script src="https://chat.rapidev.tech/socket.io/socket.io.js"></script>
|
|
<script>
|
|
|
|
var customer_id = false;
|
|
var startData = false;
|
|
var localId = false;
|
|
|
|
var customers = [];
|
|
|
|
const socket = io('https://chat.rapidev.tech/', {
|
|
withCredentials: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
// Event listener for successful connection
|
|
socket.on('connect', () => {
|
|
console.log('Connected to the server with socket ID:', socket.id);
|
|
customer_id = socket.id;
|
|
|
|
localId = "{{auth()->user()->id}}";
|
|
|
|
socket.emit('register', localId);
|
|
console.log(localId);
|
|
|
|
|
|
|
|
});
|
|
|
|
// Optionally, handle the disconnect event
|
|
socket.on('disconnect', (reason) => {
|
|
console.log('Disconnected from the server:', reason);
|
|
customer_id = false;
|
|
if (reason === 'io server disconnect') {
|
|
// The server disconnected the client, try to reconnect
|
|
socket.connect();
|
|
}
|
|
});
|
|
|
|
function loadChats(){
|
|
$.ajax({
|
|
url: "{{route('chatgroups.get')}}",
|
|
method: 'GET',
|
|
success: function(response) {
|
|
console.log(response);
|
|
|
|
var html = '';
|
|
|
|
for(var i=0;i<response.length;i++){
|
|
|
|
var chat = response[i];
|
|
|
|
chat['isFirst'] = true;
|
|
|
|
customers[chat.id] = chat;
|
|
|
|
html += ` <div class="item open-inbox" data-chat="${chat.id}" data-customer="${chat.customer_id}" data-subject="${chat.subject}" data-user="${chat.user_id}">
|
|
<div class="single-user-content d-flex">
|
|
<div class="chat-user-img-box">
|
|
<img src="{{ asset('images/Avatar.png') }}" class="aw-avatar" alt="Dummy User">
|
|
</div>
|
|
<div class="user-message-detail">
|
|
<p class="recepient-message-detail">${chat.name} <span>Sep 27</span></p>
|
|
<p class="text-wrap descriptive-message">${chat.subject}</p>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
|
|
|
|
}
|
|
|
|
$('.aw-chats').html(html);
|
|
|
|
// Update action box with fetched content
|
|
// $('.action-box').html(response);
|
|
},
|
|
error: function(error) {
|
|
console.log('Error fetching action box content:', error);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log(socket);
|
|
document.addEventListener('DOMContentLoaded', (event) => {
|
|
|
|
loadChats()
|
|
|
|
var activeChat = false;
|
|
var inbox = $('#inbox .scrollhint');
|
|
|
|
$('#close-chat').click(function(){
|
|
|
|
Swal.fire({
|
|
title: 'Are you sure?',
|
|
text: "Do you want to close this chat?",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#3085d6',
|
|
cancelButtonColor: '#d33',
|
|
confirmButtonText: 'Yes'
|
|
}).then((result) => {
|
|
if (result.isConfirmed && activeChat) {
|
|
|
|
|
|
|
|
$.ajax({
|
|
url: '{{ route("CloseChat") }}',
|
|
type: 'POST',
|
|
data: {
|
|
_token: '{{csrf_token()}}',
|
|
chat_id: activeChat.id
|
|
},
|
|
success: function(response) {
|
|
console.log(response);
|
|
|
|
Swal.fire({
|
|
title: 'Success',
|
|
text: "Chat is closed.",
|
|
icon: 'success',
|
|
showCancelButton: false,
|
|
confirmButtonColor: '#3085d6',
|
|
//cancelButtonColor: '#d33',
|
|
confirmButtonText: 'OK'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
loadChats();
|
|
$('#back-to-users').click();
|
|
}
|
|
});
|
|
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.log(xhr.responseText);
|
|
}
|
|
});
|
|
|
|
console.log('chat closed');
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$(document).on('click', '.open-inbox', async function() {
|
|
inbox.html(null);
|
|
|
|
var chat = customers[$(this).data('chat')];
|
|
|
|
var messages = await getMessage(chat.id);
|
|
console.log(messages);
|
|
|
|
if(messages){
|
|
|
|
for(var i=0;i<messages.length;i++){
|
|
var sms = messages[i];
|
|
|
|
var content = sms.message;
|
|
|
|
if(sms.type == 'image'){
|
|
content = '<img src="'+sms.message+'"/>';
|
|
}
|
|
|
|
if(sms.type == 'file'){
|
|
content = '<a target="_blank" href="'+sms.message+'"> View File </a>';
|
|
}
|
|
|
|
if(sms.from == "user"){
|
|
|
|
|
|
//<img src="{{ asset('images/Avatar.png') }}" class="aw-avatar" alt="Dummy User">
|
|
inbox.append(` <div class="item">
|
|
<div class="single-user-content d-flex">
|
|
<div class="chat-user-img-box receiver-message-box d-flex">
|
|
|
|
<p>${content}</p>
|
|
</div>
|
|
</div>
|
|
</div>`);
|
|
}else{
|
|
inbox.append(` <div class="item d-flex justify-content-end">
|
|
<div class="sender-message-box text-white">
|
|
<p>${content}</p>
|
|
</div>
|
|
</div>`);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
$('.chat-popup-label').text(chat.name);
|
|
|
|
activeChat = chat;
|
|
|
|
if(chat.isFirst){
|
|
|
|
}
|
|
|
|
console.log(activeChat);
|
|
|
|
slideTransition('#chat-feature-widget', 'left', true);
|
|
slideTransition('#inbox', 'right', false);
|
|
});
|
|
|
|
$('.send-icon').click(async function(){
|
|
|
|
var sms = $('#aw-sms').val();
|
|
|
|
const fileInput = document.getElementById("file-picker");
|
|
const file = fileInput.files[0];
|
|
var type = "text";
|
|
|
|
if(sms != "" || file){
|
|
|
|
console.log(activeChat.id);
|
|
const formData = new FormData();
|
|
|
|
if (file) {
|
|
formData.append("file", file); // Append the selected file
|
|
|
|
// Check the file type
|
|
const fileType = file.type;
|
|
if (fileType.startsWith("image/")) {
|
|
console.log("This is an image file.");
|
|
type = "image";
|
|
} else {
|
|
type = "file";
|
|
}
|
|
}
|
|
|
|
|
|
formData.append('chat_id', activeChat.id); // Static value as per your example
|
|
formData.append('from', 'company'); // Assuming a static value for simplicity
|
|
formData.append('message', sms);
|
|
formData.append('type', type);
|
|
|
|
|
|
// API endpoint
|
|
const apiUrl = 'https://kundesone.no/api/chat/send-message';
|
|
|
|
// Fetch API to send the FormData
|
|
fetch(apiUrl, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
|
|
var sms = data.data;
|
|
var content = sms.message;
|
|
|
|
console.log('Success:', data,'chat message',{
|
|
sms:content,
|
|
id:activeChat.id,
|
|
type:sms.type
|
|
|
|
},
|
|
activeChat.customer_id);
|
|
|
|
socket.emit('chat message',
|
|
{
|
|
sms:content,
|
|
id:activeChat.id,
|
|
type:sms.type
|
|
|
|
},
|
|
activeChat.customer_id
|
|
);
|
|
|
|
|
|
|
|
if(sms.type == 'image'){
|
|
content = '<img src="'+content+'"/>';
|
|
}
|
|
|
|
if(sms.type == 'file'){
|
|
content = '<a target="_blank" href="'+content+'"> View File </a>';
|
|
}
|
|
|
|
inbox.append(` <div class="item d-flex justify-content-end">
|
|
<div class="sender-message-box text-white">
|
|
<p>${content}</p>
|
|
</div>
|
|
</div>`);
|
|
|
|
$('#aw-sms').val("");
|
|
|
|
scrollToBottom();
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
async function getMessage(chat_id) {
|
|
const apiUrl = 'https://kundesone.no/api/chat/getMessages';
|
|
try {
|
|
const response = await fetch(apiUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json' // Assuming the server expects JSON
|
|
},
|
|
body: JSON.stringify({ chat_id: chat_id })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
|
|
const messages = await response.json();
|
|
return messages;
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
socket.on('chat message', function(msg) {
|
|
playMessageSound();
|
|
|
|
if(msg.id == activeChat.id){
|
|
//<img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
inbox.append(` <div class="item">
|
|
<div class="single-user-content d-flex">
|
|
<div class="chat-user-img-box receiver-message-box d-flex">
|
|
|
|
<p>${msg.sms}</p>
|
|
</div>
|
|
</div>
|
|
</div>`);
|
|
|
|
}
|
|
|
|
console.log(msg);
|
|
// var item = document.createElement('li');
|
|
// item.textContent = msg;
|
|
// document.getElementById('messages').appendChild(item);
|
|
// window.scrollTo(0, document.body.scrollHeight);
|
|
|
|
scrollToBottom();
|
|
});
|
|
|
|
|
|
socket.on('start_chat', function(msg) {
|
|
console.log(msg);
|
|
});
|
|
|
|
});
|
|
|
|
|
|
function scrollToBottom() {
|
|
var $div = $('.scrollhint');
|
|
$div.scrollTop($div.prop("scrollHeight"));
|
|
}
|
|
|
|
function playMessageSound() {
|
|
var sound = document.getElementById('messageSound');
|
|
|
|
sound.play();
|
|
}
|
|
|
|
|
|
|
|
|
|
</script> |