136 lines
4.9 KiB
JavaScript
136 lines
4.9 KiB
JavaScript
var previousDate = new Date("1970-01-01 00:00:00");
|
|
var previousTime = "00:00";
|
|
var gettingMessages = false;
|
|
var previousType = "robot";
|
|
|
|
$(document).ready(function() {
|
|
setInterval(loadMessages, 1000);
|
|
sayEmpty();
|
|
$(".chat-field").hide();
|
|
});
|
|
|
|
// This function loads the new messages and runs the addMessages function to show them.
|
|
function loadMessages() {
|
|
// If the function is not running elsewhere, run it here.
|
|
if (!gettingMessages) {
|
|
gettingMessages = true;
|
|
// Get the messages.
|
|
$.post(
|
|
"API/loadMessages.php",
|
|
$("#lastIDForm").serialize()
|
|
).done(function (data) {
|
|
// Post the messages in the chat.
|
|
if (data && data != "[]") {
|
|
messages = JSON.parse(data);
|
|
addMessages(messages);
|
|
$("#lastID").val(messages[messages.length - 1].messageID);
|
|
}
|
|
gettingMessages = false;
|
|
});
|
|
} else {
|
|
setTimeout(loadMessages, 500);
|
|
}
|
|
}
|
|
|
|
// Send a message to a friend of the user.
|
|
function sendMessage() {
|
|
$.post(
|
|
"API/sendMessage.php",
|
|
$("#sendMessageForm").serialize()
|
|
).done(function(response) {
|
|
if (response == "frozen") {
|
|
alert("Je account is bevroren, dus je kan niet chat berichten versturen. Contacteer een admin als je denkt dat dit onjuist is.");
|
|
}
|
|
// Load messages if the message has been send, so it shows in the chat.
|
|
loadMessages();
|
|
});
|
|
|
|
$("#newContent").val("");
|
|
}
|
|
|
|
// Add messages to the chat.
|
|
function addMessages(messages) {
|
|
var messagesText = "";
|
|
|
|
// Loop over all the messages.
|
|
for(var i in messages) {
|
|
// Initialize message variables.
|
|
var thisDate = new Date(messages[i].creationdate.replace(/ /,"T"));
|
|
var thisTime = thisDate.getHours() + ":" + thisDate.getMinutes();
|
|
var type;
|
|
thisDate.setHours(0,0,0,0);
|
|
|
|
// See where the message has been send from, so it shows on the right side.
|
|
if (messages[i].destination == $(".destinationID").val()) {
|
|
type = "chat-message-self";
|
|
} else {
|
|
type = "chat-message-other";
|
|
}
|
|
|
|
// If it is the first message, open the message box and maybe add a year.
|
|
if (i == 0) {
|
|
if (thisDate.getTime() > previousDate.getTime()) {
|
|
messagesText += '\
|
|
<div class="day-message"> \
|
|
<div class="day-message-content">\
|
|
' + days[thisDate.getDay()] + " " + thisDate.getDate() + " " + months[thisDate.getMonth()] + " " + thisDate.getFullYear() + '\
|
|
</div> \
|
|
</div>';
|
|
}
|
|
previousDate = thisDate;
|
|
messagesText += '<div class="chat-message"><div class="' + type + '">';
|
|
// If it is not the first message, and has a different date/time/type then the previous message,
|
|
} else if (type != previousType || thisTime != previousTime || thisDate.getTime() > previousDate.getTime()) {
|
|
// Close the previous message.
|
|
messagesText += '<div class="chat-time">\
|
|
' + thisTime + '\
|
|
</div></div></div>';
|
|
|
|
previousTime = thisTime;
|
|
previousType = type;
|
|
// If the date is different, add a new date.
|
|
if (thisDate > previousDate) {
|
|
previousDate = thisDate;
|
|
messagesText += '\
|
|
<div class="day-message"> \
|
|
<div class="day-message-content">\
|
|
' + days[thisDate.getDay()] + " " + thisDate.getDate() + " " + months[thisDate.getMonth()] + " " + thisDate.getFullYear() + '\
|
|
</div> \
|
|
</div>';
|
|
}
|
|
|
|
// Open the new message.
|
|
messagesText += '<div class="chat-message"><div class="' + type + '">';
|
|
}
|
|
|
|
// Add the content of the message in the new box.
|
|
messagesText += fancyText(messages[i].content) + "<br />";
|
|
}
|
|
|
|
// Close the last message
|
|
messagesText += '<div class="chat-time">\
|
|
' + thisTime + '\
|
|
</div></div></div>';
|
|
|
|
// Add all the new created messaged to the chat.
|
|
$("#chat-history").append(messagesText);
|
|
|
|
// Scroll down, so the user can see the new messages.
|
|
$("#chat-history").scrollTop($("#chat-history")[0].scrollHeight - $('#chat-history')[0].clientHeight);
|
|
}
|
|
|
|
// Switch to a different user.
|
|
function switchUser(userID) {
|
|
previousDate = new Date("1970-01-01 00:00:00");
|
|
$(".chat-field").show();
|
|
$(".destinationID").val(userID);
|
|
$("#chat-history").html("");
|
|
$("#lastID").val("");
|
|
$("#chat-recent-panel .friend-item").removeClass("active-friend-chat");
|
|
$("#friend-item-" + userID).addClass("active-friend-chat");
|
|
}
|
|
|
|
// Insert a message in the chat, this is used when it is empty.
|
|
function sayEmpty() {
|
|
$("#chat-history").html("Probeer ook eens foto's en video's te sturen");
|
|
} |