Web/chat/chat_script.js

$(document).ready(function (){

	let users = $('.users');
	let send= $('#btn-send');
	let message= $('#new_message');
	let form =$('#form');
	let chat_pic= $('.chat_history_user_pic');
	let chat_name= $('.chat_history_user_info');
	let chat_id =$('.chat_history_user_id');
	let user_id= $('.user_id');
	let chat_history= $('.chat_history_chat');

	message.keyup(function(){
		if(message.val()!= ''){
			send.prop("disabled", false);
			//send.css("background-color", "blue");
		} else {
			send.prop("disabled", true);
			//send.css("background-color", 'gray');
		}
	});

	let loadMessages= function(user1_id, user2_id){
		//chat_history.empty();
		$.ajax({ url:'php/get_messages.php',
				method: 'POST',
				dataType:'json',
				data: {
					user1: user1_id,
					user2: user2_id
				}, 
				dataType: 'json',
				success: function(result){
					chat_history.empty();
					if(result != ''){
						for(let i=0; i<result.length; i++){
							$(".chat_history_none").remove();
							if(result[i].chat_sent_by == user1_id){
								let item='<div class="chat_history_chat_sent"><small>'+result[i].chat_date+'</small><h4>'+result[i].chat_message+'</h4></div>';
								chat_history.append(item);
							} else {
								let item='<div class="chat_history_chat_received"><small>'+result[i].chat_date+'</small><h4>'+result[i].chat_message+'</h4></div>';
								chat_history.append(item);
							}
						}
					} else{
						let item='<div class="chat_history_none"><p>Nincsennek még üzenetek.</p></div>';
						chat_history.append(item);
					}
				}, 
				error: function(result){
					console.log(result);
				}
		})
	}  
	let sendMessage= function(user1_id, user2_id){
			$.ajax({ url:'php/new_message.php',
					data: {
						new_message: message.val(),
						user_id: user1_id,
						user_2: user2_id, 
					},
					dataType: 'text',
					method:'POST',
					success: function(result){
						let parsed= jQuery.parseJSON(result);
						$(".chat_history_none").remove();
						let item='<div class="chat_history_chat_sent"><small>'+parsed.time+'</small><h4>'+parsed.message+'</h4></div>';
						chat_history.append(item);

					}, 
					error: function(result){
						console.log(result);
					}

			});
			message.val('');
	}
			let getUsers= function(option){
				$.ajax({url:'php/get_users.php',
								method:'POST',
								dataType: 'json',
								data: {
									id: user_id.html()
								},
								success: function(data){
									for(let i=0; i<data.length; i++) {
										if(data[i].unread > 0){
											if(option === 1){
												let item = '<span class="users_user_info" id="user'+data[i].id+'"><b>'+data[i].name+' ('+data[i].unread+' új)</b></span>';
												$('#user'+data[i].id).replaceWith(item);
											}else{
												let item = '<div class="users_user listitem list-group-item waves-effect" id="'+data[i].id+'" onClick="scrollDown();"><span class="users_user_pic"><img src="'+data[i].userimg+'" class="listitemimg circle"></span><span class="users_user_info" id="user'+data[i].id+'"><b>'+data[i].name+' ('+data[i].unread+' új)</b></span><span class="users_user_id">'+data[i].id+'</span></div>';
												users.append(item);
											}
										}else{
											if(option === 1){
												let item = '<span class="users_user_info" id="user'+data[i].id+'">'+data[i].name+'</span>';
												$('#user'+data[i].id).replaceWith(item);
											}else{
												let item = '<div class="users_user listitem list-group-item waves-effect" id="'+data[i].id+'" onClick="scrollDown();"><span class="users_user_pic"><img src="'+data[i].userimg+'" class="listitemimg circle"></span><span class="users_user_info" id="user'+data[i].id+'">'+data[i].name+'</span><span class="users_user_id">'+data[i].id+'</span></div>';
												users.append(item);
											}
										}
									
									}
									let single_user= $('.users_user');
									for(let i=0; i<single_user.length; i++){
										$(single_user[i]).click(function(e){
											message.prop('disabled', false);
											let pic= e.target.firstChild.firstChild.src;
											let id = e.target.id;
											let name= e.target.children[1].innerHTML;
											chat_id.html(id);					
											chat_pic.css('background-image', 'url('+data[i].userimg+')');
											chat_name[0].innerHTML= name;
											loadMessages(user_id.html(), id);
										}) 
									}
								}, error: function(){
									console.log('error');
								}
							}); 
			}
	getUsers();
	setInterval(function() {
		getUsers(1);
		loadMessages(user_id.html(), document.getElementsByClassName("chat_history_user_id")[0].innerHTML);
	}, 3000);
	send.click(function(e){
		e.preventDefault();
		sendMessage(user_id.html(),chat_id.html());
	}) 
});