highly improve discussion perfs + fix initial sound playing and erratic scrolling
This commit is contained in:
parent
48e8eacc34
commit
fb919ff59f
|
@ -45,8 +45,9 @@ function verifReceived()
|
|||
|
||||
/**
|
||||
* Cette fonction permet de scroller au dernier message
|
||||
* @param force: bool : should we force the scroll
|
||||
*/
|
||||
function scrollDownDiscussion()
|
||||
function scrollDownDiscussion(force)
|
||||
{
|
||||
var discussion_height = jQuery('.discussion-container').innerHeight();
|
||||
var discussion_scroll_height = jQuery('.discussion-container')[0].scrollHeight;
|
||||
|
@ -54,7 +55,7 @@ function scrollDownDiscussion()
|
|||
var scroll_before_end = discussion_scroll_height - (discussion_scroll_top + discussion_height);
|
||||
|
||||
//On scroll uniquement si on a pas remonté plus haut que la moitié de la fenetre de discussion
|
||||
if (scroll_before_end <= discussion_height / 2)
|
||||
if (force || scroll_before_end <= discussion_height / 2)
|
||||
{
|
||||
jQuery('.discussion-container').animate({scrollTop: 1000000});
|
||||
}
|
||||
|
@ -115,8 +116,8 @@ jQuery(document).ready(function()
|
|||
var form = jQuery(this);
|
||||
var message = form.find('textarea').val();
|
||||
var formData = new FormData(form[0]);
|
||||
jQuery('.discussion-container').find('#send-message-spiner').remove();
|
||||
jQuery('.discussion-container').append('<div class="text-center" id="send-message-spiner"><i class="fa fa-spinner fa-spin"></i></div>');
|
||||
jQuery('.discussion-container').find('#send-message-spinner').remove();
|
||||
jQuery('.discussion-container').append('<div class="text-center" id="send-message-spinner"><i class="fa fa-spinner fa-spin"></i></div>');
|
||||
scrollDownDiscussion();
|
||||
jQuery.ajax({
|
||||
url: form.attr('action'),
|
||||
|
@ -130,7 +131,7 @@ jQuery(document).ready(function()
|
|||
if (!data.success)
|
||||
{
|
||||
showMessage(data.message.replace(/</g, "<").replace(/>/g, ">"), 0);
|
||||
jQuery('.discussion-container').find('#send-message-spiner').remove();
|
||||
jQuery('.discussion-container').find('#send-message-spinner').remove();
|
||||
}
|
||||
}
|
||||
}).done(function()
|
||||
|
|
|
@ -161,6 +161,19 @@ namespace controllers\internals;
|
|||
return $this->get_model()->gets_by_origin_and_user($id_user, $origin);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return receiveds for an origin and a user since a date.
|
||||
*
|
||||
* @param int $id_user : User id
|
||||
* @param string $since : Date we want messages since format Y-m-d H:i:s
|
||||
* @param string $origin : Number who sent the message
|
||||
* @return array
|
||||
*/
|
||||
public function gets_since_date_by_origin_and_user(int $id_user, string $since, string $origin)
|
||||
{
|
||||
return $this->get_model()->gets_since_date_by_origin_and_user($id_user, $since, $origin);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get number of sended SMS for every date since a date for a specific user.
|
||||
*
|
||||
|
|
|
@ -254,6 +254,20 @@ namespace controllers\internals;
|
|||
{
|
||||
return $this->get_model()->gets_before_date_for_number_and_user($id_user, $date, $number);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get messages scheduled after a date for a number and a user.
|
||||
*
|
||||
* @param int $id_user : User id
|
||||
* @param $date : Date after which we want messages
|
||||
* @param string $number : Number for which we want messages
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function gets_after_date_for_number_and_user(int $id_user, $date, string $number)
|
||||
{
|
||||
return $this->get_model()->gets_after_date_for_number_and_user($id_user, $date, $number);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all messages to send and the number to use to send theme.
|
||||
|
|
|
@ -132,6 +132,19 @@ namespace controllers\internals;
|
|||
{
|
||||
return $this->get_model()->gets_by_destination_and_user($id_user, $origin);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return sendeds for a destination and a user since a date.
|
||||
*
|
||||
* @param int $id_user : User id
|
||||
* @param string $since : Date we want messages since format Y-m-d H:i:s
|
||||
* @param string $origin : Number who sent the message
|
||||
* @return array
|
||||
*/
|
||||
public function gets_since_date_by_destination_and_user(int $id_user, string $since, string $origin)
|
||||
{
|
||||
return $this->get_model()->gets_since_date_by_destination_and_user($id_user, $since, $origin);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return sended for an uid and an adapter.
|
||||
|
|
|
@ -98,17 +98,34 @@ namespace controllers\publics;
|
|||
*
|
||||
* @param string $number : Le numéro cible
|
||||
* @param string $transaction_id : Le numéro unique de la transaction ajax (sert à vérifier si la requete doit être prise en compte)
|
||||
* @param ?int $since : La date à partir de laquelle on veut les messages, sous forme de timestamp
|
||||
*/
|
||||
public function get_messages($number, $transaction_id)
|
||||
public function get_messages($number, $transaction_id, ?int $since = null)
|
||||
{
|
||||
$now = new \DateTime();
|
||||
$now = $now->format('Y-m-d H:i:s');
|
||||
|
||||
$id_user = $_SESSION['user']['id'];
|
||||
|
||||
$sendeds = $this->internal_sended->gets_by_destination_and_user($id_user, $number);
|
||||
$receiveds = $this->internal_received->gets_by_origin_and_user($id_user, $number);
|
||||
$scheduleds = $this->internal_scheduled->gets_before_date_for_number_and_user($id_user, $now, $number);
|
||||
if ($since && !($since = date('Y-m-d H:i:s', $since)))
|
||||
{
|
||||
echo json_encode(['transaction_id' => $transaction_id, 'messages' => [], 'error' => true, 'error_message' => 'Not a valid date.']);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($since)
|
||||
{
|
||||
$sendeds = $this->internal_sended->gets_since_date_by_destination_and_user($id_user, $since, $number);
|
||||
$receiveds = $this->internal_received->gets_since_date_by_origin_and_user($id_user, $since, $number);
|
||||
$scheduleds = $this->internal_scheduled->gets_after_date_for_number_and_user($id_user, $since, $number);
|
||||
}
|
||||
else
|
||||
{
|
||||
$sendeds = $this->internal_sended->gets_by_destination_and_user($id_user, $number);
|
||||
$receiveds = $this->internal_received->gets_by_origin_and_user($id_user, $number);
|
||||
$scheduleds = $this->internal_scheduled->gets_before_date_for_number_and_user($id_user, $now, $number);
|
||||
}
|
||||
|
||||
$messages = [];
|
||||
|
||||
|
@ -125,6 +142,7 @@ namespace controllers\publics;
|
|||
}
|
||||
|
||||
$message = [
|
||||
'uid' => 'sended-' . $sended['id'],
|
||||
'date' => htmlspecialchars($sended['at']),
|
||||
'text' => htmlspecialchars($sended['text']),
|
||||
'type' => 'sended',
|
||||
|
@ -154,10 +172,10 @@ namespace controllers\publics;
|
|||
}
|
||||
|
||||
$messages[] = [
|
||||
'uid' => 'received-' . $received['id'],
|
||||
'date' => htmlspecialchars($received['at']),
|
||||
'text' => htmlspecialchars($received['text']),
|
||||
'type' => 'received',
|
||||
'md5' => md5($received['at'] . $received['text']),
|
||||
'medias' => $medias,
|
||||
];
|
||||
}
|
||||
|
@ -165,7 +183,7 @@ namespace controllers\publics;
|
|||
foreach ($scheduleds as $scheduled)
|
||||
{
|
||||
$medias = [];
|
||||
if ($sended['mms'])
|
||||
if ($scheduled['mms'])
|
||||
{
|
||||
$medias = $this->internal_media->gets_for_scheduled($scheduled['id']);
|
||||
foreach ($medias as &$media)
|
||||
|
@ -175,6 +193,7 @@ namespace controllers\publics;
|
|||
}
|
||||
|
||||
$messages[] = [
|
||||
'uid' => 'scheduled-' . $scheduled['id'],
|
||||
'date' => htmlspecialchars($scheduled['at']),
|
||||
'text' => htmlspecialchars($scheduled['text']),
|
||||
'type' => 'inprogress',
|
||||
|
@ -188,10 +207,24 @@ namespace controllers\publics;
|
|||
return strtotime($a['date']) - strtotime($b['date']);
|
||||
});
|
||||
|
||||
//On récupère uniquement les 25 derniers messages sur l'ensemble
|
||||
$messages = \array_slice($messages, -25);
|
||||
//Sans limite de temps, on récupère uniquement les 25 derniers messages sur l'ensemble pour limiter la charge
|
||||
if (!$since)
|
||||
{
|
||||
$messages = \array_slice($messages, -25);
|
||||
}
|
||||
|
||||
echo json_encode(['transaction_id' => $transaction_id, 'messages' => $messages]);
|
||||
$response = [
|
||||
'transaction_id' => $transaction_id,
|
||||
'messages' => $messages,
|
||||
];
|
||||
|
||||
if ($messages)
|
||||
{
|
||||
$new_limit_date = (new \DateTime($messages[count($messages) - 1]['date']))->getTimestamp(); //Use latest message as the new limit date to search
|
||||
$response['new_limit_date'] = $new_limit_date;
|
||||
}
|
||||
|
||||
echo json_encode($response);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
|
|
@ -178,6 +178,34 @@ namespace models;
|
|||
|
||||
return $this->_run_query($query, $params);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return sendeds for an origin and a user since a date.
|
||||
*
|
||||
* @param int $id_user : User id
|
||||
* @param string $since : Date we want messages since
|
||||
* @param string $origin : Number who sent the message
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function gets_since_date_by_origin_and_user(int $id_user, string $since, string $origin)
|
||||
{
|
||||
$query = '
|
||||
SELECT *
|
||||
FROM received
|
||||
WHERE id_user = :id_user
|
||||
AND origin = :origin
|
||||
AND at > :since
|
||||
';
|
||||
|
||||
$params = [
|
||||
'id_user' => $id_user,
|
||||
'origin' => $origin,
|
||||
'since' => $since,
|
||||
];
|
||||
|
||||
return $this->_run_query($query, $params);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get number of sended SMS for every date since a date for a specific user.
|
||||
|
|
|
@ -233,6 +233,63 @@ namespace models;
|
|||
|
||||
return $this->_run_query($query, $params);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get messages scheduled after a date for a number and a user.
|
||||
*
|
||||
* @param int $id_user : User id
|
||||
* @param $date : Date after which we want messages
|
||||
* @param string $number : Number for which we want messages
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function gets_after_date_for_number_and_user(int $id_user, $date, string $number)
|
||||
{
|
||||
$query = '
|
||||
SELECT *
|
||||
FROM scheduled
|
||||
WHERE at > :date
|
||||
AND id_user = :id_user
|
||||
AND (
|
||||
id IN (
|
||||
SELECT id_scheduled
|
||||
FROM scheduled_number
|
||||
WHERE number = :number
|
||||
)
|
||||
OR id IN (
|
||||
SELECT id_scheduled
|
||||
FROM scheduled_contact
|
||||
WHERE id_contact IN (
|
||||
SELECT id
|
||||
FROM contact
|
||||
WHERE number = :number
|
||||
)
|
||||
)
|
||||
OR id IN (
|
||||
SELECT id_scheduled
|
||||
FROM scheduled_group
|
||||
WHERE id_group IN (
|
||||
SELECT id_group
|
||||
FROM `group_contact`
|
||||
WHERE id_contact IN (
|
||||
SELECT id
|
||||
FROM contact
|
||||
WHERE number = :number
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
';
|
||||
|
||||
$params = [
|
||||
'id_user' => $id_user,
|
||||
'date' => $date,
|
||||
'number' => $number,
|
||||
];
|
||||
|
||||
return $this->_run_query($query, $params);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get scheduleds before a date.
|
||||
|
|
|
@ -112,6 +112,35 @@ namespace models;
|
|||
|
||||
return $this->_run_query($query, $params);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Return sendeds for an destination and a user since a date.
|
||||
*
|
||||
* @param int $id_user : User id
|
||||
* @param string $since : Date we want messages since
|
||||
* @param string $destination : Number who sent the message
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function gets_since_date_by_destination_and_user(int $id_user, string $since, string $destination)
|
||||
{
|
||||
$query = '
|
||||
SELECT *
|
||||
FROM sended
|
||||
WHERE id_user = :id_user
|
||||
AND destination = :destination
|
||||
AND at > :since
|
||||
';
|
||||
|
||||
$params = [
|
||||
'id_user' => $id_user,
|
||||
'destination' => $destination,
|
||||
'since' => $since,
|
||||
];
|
||||
|
||||
return $this->_run_query($query, $params);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return sended for an uid and an adapter.
|
||||
|
|
|
@ -54,7 +54,10 @@
|
|||
'list_json' => '/discussion/json/',
|
||||
'show' => '/discussion/show/{number}/',
|
||||
'send' => '/discussion/send/{csrf}/',
|
||||
'get_messages' => '/discussion/getmessage/{number}/{transaction_id}/',
|
||||
'get_messages' => [
|
||||
'/discussion/getmessage/{number}/{transaction_id}/',
|
||||
'/discussion/getmessage/{number}/{transaction_id}/{since}/',
|
||||
],
|
||||
],
|
||||
|
||||
'Event' => [
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-lg-12 discussion-container">
|
||||
<div class="text-center"><i class="fa fa-spinner fa-spin"></i></div>
|
||||
<div class="text-center" id="load-message-spinner"><i class="fa fa-spinner fa-spin"></i></div>
|
||||
</div>
|
||||
<div class="col-lg-12 message-input-container">
|
||||
<div class="discussion-message message-input">
|
||||
|
@ -57,22 +57,35 @@
|
|||
jQuery(document).ready(function () {
|
||||
|
||||
var alreadyReceivedMessages = [];
|
||||
var limit_date = false;
|
||||
|
||||
/**
|
||||
* Cette fonction vérifie régulièrement les sms pour mettre à jour l'affichage
|
||||
*/
|
||||
function getmessages ()
|
||||
{
|
||||
ajaxTransactionId = Date.now();
|
||||
jQuery.getJSON(HTTP_PWD + "/discussion/getmessage/<?php echo htmlspecialchars(urlencode($number)); ?>/" + ajaxTransactionId , function( data ) {
|
||||
ajaxTransactionId = Date.now();
|
||||
if (limit_date == false)
|
||||
{
|
||||
var first_load = true;
|
||||
url = HTTP_PWD + "/discussion/getmessage/<?php echo htmlspecialchars(urlencode($number)); ?>/" + ajaxTransactionId;
|
||||
limit_date = Date.now(); //After first load, we will only search for new messages
|
||||
}
|
||||
else
|
||||
{
|
||||
var first_load = false;
|
||||
url = HTTP_PWD + "/discussion/getmessage/<?php echo htmlspecialchars(urlencode($number)); ?>/" + ajaxTransactionId + "/" + limit_date + "/";
|
||||
}
|
||||
|
||||
jQuery.getJSON(url, function( data ) {
|
||||
|
||||
if (data.transaction_id != ajaxTransactionId)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
jQuery('.discussion-container').html('');
|
||||
}
|
||||
|
||||
jQuery('.discussion-container #load-message-spinner').remove();
|
||||
jQuery('.discussion-container #send-message-spinner').remove();
|
||||
|
||||
$.each(data.messages, function(key, message) {
|
||||
|
||||
|
@ -87,6 +100,10 @@
|
|||
{
|
||||
return '<div class="discussion-message-media"><a href="' + mediaUrl + '" target="_blank"><img src="' + mediaUrl + '"/></a></div>';
|
||||
}
|
||||
else if (['webm', 'ogg', 'ogv', 'mp4'].includes(extension))
|
||||
{
|
||||
return '<video controls class="discussion-message-media"><source src="' + mediaUrl + '"/></video>';
|
||||
}
|
||||
else
|
||||
{
|
||||
return '<div class="discussion-message-media"><a href="' + mediaUrl + '" target="_blank">Voir le fichier ' + (Number(index) + 1) + '</a></div>';
|
||||
|
@ -106,10 +123,10 @@
|
|||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
if (alreadyReceivedMessages.indexOf(message.md5) == -1)
|
||||
if (alreadyReceivedMessages.indexOf(message.uid) == -1 && !first_load) //If new message received and not first time loading
|
||||
{
|
||||
playReceptionSound();
|
||||
alreadyReceivedMessages.push(message.md5);
|
||||
alreadyReceivedMessages.push(message.uid);
|
||||
}
|
||||
|
||||
break;
|
||||
|
@ -140,8 +157,17 @@
|
|||
}
|
||||
|
||||
jQuery('.discussion-container').append(texte);
|
||||
});
|
||||
scrollDownDiscussion();
|
||||
});
|
||||
|
||||
//Update limit_date if set
|
||||
if (data.new_limit_date !== undefined)
|
||||
{
|
||||
limit_date = data.new_limit_date;
|
||||
}
|
||||
|
||||
if (data.messages.length) {
|
||||
scrollDownDiscussion(first_load);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -155,9 +181,6 @@
|
|||
var messageInputContainer = jQuery('.message-input-container').outerHeight();
|
||||
var footerHeight = jQuery('footer').outerHeight();
|
||||
|
||||
console.log(windowHeight);
|
||||
console.log(containerPosition.top);
|
||||
|
||||
var containerHeight = Math.floor(windowHeight - (containerPosition.top + messageInputContainer) - 20); //-20 px for aesthetic
|
||||
|
||||
jQuery('.discussion-container').outerHeight(containerHeight);
|
||||
|
|
Loading…
Reference in New Issue