TPS/birzha
TPS
/
birzha
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

messages component - new v2.0

This commit is contained in:
saparatayev 2021-07-01 13:01:24 +05:00
parent 6fa3d7b09e
commit 0c99258d04
4 changed files with 137 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
plugins/tps/birzha/components/Messages.php
View File

@ -7,6 +7,7 @@ use Tps\Birzha\Models\Message;
use Auth;
use Input;
use Carbon\Carbon;
use Flash;
class Messages extends ComponentBase
{
@ -38,13 +39,24 @@ class Messages extends ComponentBase
// Read unread messages
Chatroom::find($chatRoomId)->messages()->where('reciver_id',Auth::user()->id)->where('read_at',null)->update(['read_at'=>Carbon::now()]);
$this->page['result'] = Chatroom::find($chatRoomId)->messages()->latest('send_at')->limit(5)->get()->reverse();
$this->page['currentUserId'] = Auth::user()->id;
$this->page['chat_room_id'] = $chatRoomId;
$this->page['chatRoomPartnerId'] = Chatroom::find($chatRoomId)->users()->where('users.id','!=',Auth::user()->id)->first()->id;
return [
'messages' => Chatroom::find($chatRoomId)->messages,
'chat_area' => $this->renderPartial('@chatroom')
];
}
public function onLoadMore() {
$skipParam = Input::get('skip');
$chatRoomId = Input::get('chatroom_id');
return [
'more_messages' => Chatroom::find($chatRoomId)->messages()->latest('send_at')->skip($skipParam)->limit(5)->get()->reverse(),
'currentUserId' => Auth::user()->id,
'chatRoomId' => $chatRoomId,
'chatRoomPartnerId' => Chatroom::find($chatRoomId)->users()->where('users.id','!=',Auth::user()->id)->first()->id
'skipparam' => $skipParam
];
}
@ -57,6 +69,11 @@ class Messages extends ComponentBase
$newMsg->chatroom_id = Input::get('chatroom_id');
$newMsg->save();
return $this->onChatroom();
$this->page['latestMessage'] = $newMsg->message;
$this->page['latestMessageTime'] = $newMsg->send_at;
return [
'latest_message_area' => $this->renderPartial('@latest_message')
];
}
}

98
plugins/tps/birzha/components/messages/chatroom.htm Normal file
View File

@ -0,0 +1,98 @@
<div class="chat_area-inner">
<button
onclick="loadMoreMeassges()"
id="more_btn"
data-chatroom-id="{{ chat_room_id }}"
data-skip="5"
>Load More</button>
<!-- more_messages_area -->
<!-- end more_messages_area -->
{% for message in result %}
<div class="{{ message.sender_id == currentUserId ? 'my_message' : 'friend_message' }}">
<div class="message_time">{{ message.send_at|date('H:s - d.m.Y') }}</div>
<div class="message_text">
{{ message.message }}
</div>
</div>
{% endfor %}
<!-- latest message -->
<!-- end latest message -->
<form action="#" class="message_form"
data-request="onMessageSend"
data-request-success="showLatestMessage(data)"
>
<input type="hidden" name="reciver_id" value="{{chatRoomPartnerId}}">
<input type="hidden" name="chatroom_id" value="{{chat_room_id}}">
<div class="message_input">
<textarea name="msg" required></textarea>
</div>
<button class="message_btn" type="submit" data-attach-loading>
<img src="{{'assets/images/svg/plane.svg'|theme}}" alt="send">
</button>
</form>
</div>
<script>
function loadMoreMeassges() {
$('#more_btn').text('Loading...');
$(this).request('onLoadMore',{
data: {
chatroom_id: $('#more_btn').attr('data-chatroom-id'),
skip: $('#more_btn').attr('data-skip')
},
success: function(data) {
$.each(data.more_messages,function(index,element) {
$(`
<div class="${ element.sender_id == data.currentUserId ? 'my_message' : 'friend_message' }">
<div class="message_time">
${
new Date(element.send_at).getHours() +
':' +
(new Date(element.send_at).getMinutes() < 10 ? '0' : '') +
new Date(element.send_at).getMinutes() +
' - ' +
new Date(element.send_at).getDate() +
'.' +
(+new Date(element.send_at).getMonth()+1 < 10 ? '0' : '') +
(+new Date(element.send_at).getMonth()+1) +
'.' +
new Date(element.send_at).getFullYear()
}
</div>
<div class="message_text">
${ element.message }
</div>
</div>
`).insertAfter('#more_btn');
});
skip = $('#more_btn').attr('data-skip');
$('#more_btn').attr('data-skip',+skip + 5);
$('#more_btn').text('Load more');
}
})
}
function showLatestMessage(data) {
$('.message_form textarea').val('');
$(data.latest_message_area).insertBefore('.message_form')
var bottom= $('.chat_area-inner').height()+$('.chat_area-inner').prop('scrollHeight');
$('.chat_area-inner').scrollTop(bottom);
}
</script>

71
plugins/tps/birzha/components/messages/default.htm
View File

@ -37,26 +37,9 @@
{% endfor %}
</div>
<div class="chat_area">
<div class="chat_area-inner">
<div class="chat_area" id="chatroom">
<form action="#" class="message_form"
data-request="onMessageSend"
data-request-success="showMessages(data)"
>
<input type="hidden" name="reciver_id">
<input type="hidden" name="chatroom_id">
<div class="message_input">
<textarea name="msg" required></textarea>
</div>
<button class="message_btn" type="submit" data-attach-loading>
<img src="{{'assets/images/svg/plane.svg'|theme}}" alt="send">
</button>
</form>
</div>
<!-- chat_area -->
</div>
</div>
@ -66,47 +49,15 @@
<!-- Chat end ======================================================== -->
{% put scripts %}
<script>
function showMessages(data) {
$('.unread-messages-count').empty();
<script>
function showMessages(data) {
$('.my_message,.friend_message').remove();
$('#chatroom').html(data.chat_area);
var bottom= $('.chat_area-inner').height()+$('.chat_area-inner').prop('scrollHeight');
$('.chat_area-inner').scrollTop(bottom);
$.each(data.messages, function(index, element) {
$('.chat_area-inner').append(`
<div class="${ element.sender_id == data.currentUserId ? 'my_message' : 'friend_message'}">
<div class="message_time">
${
new Date(element.send_at).getHours() +
':' +
(new Date(element.send_at).getMinutes() < 10 ? '0' : '') +
new Date(element.send_at).getMinutes() +
' - ' +
new Date(element.send_at).getDate() +
'.' +
(+new Date(element.send_at).getMonth()+1 < 10 ? '0' : '') +
(+new Date(element.send_at).getMonth()+1) +
'.' +
new Date(element.send_at).getFullYear()
}
</div>
<div class="message_text">
${element.message}
</div>
</div>
`);
});
$('.person').removeClass('active');
$(`.person[data-id="${data.chatRoomId}"]`).addClass('active');
$('.chat_area form input[name="reciver_id"]').val(data.chatRoomPartnerId);
$('.chat_area form input[name="chatroom_id"]').val(data.chatRoomId);
$('.chat_area form textarea').val('');
var bottom= $('.chat_area-inner').height()+$('.chat_area-inner').prop('scrollHeight');
$('.chat_area-inner').scrollTop(bottom);
}
</script>
$('.unread-messages-count').text('');
}
</script>
{% endput %}

6
plugins/tps/birzha/components/messages/latest_message.htm Normal file
View File

@ -0,0 +1,6 @@
<div class="my_message">
<div class="message_time">{{ latestMessageTime|date('H:s - d.m.Y') }}</div>
<div class="message_text">
{{ latestMessage }}
</div>
</div>