106 lines
4.0 KiB
HTML
106 lines
4.0 KiB
HTML
<div class="chat_area-inner">
|
|
|
|
<button
|
|
onclick="loadMoreMeassges()"
|
|
|
|
id="more_btn"
|
|
data-chatroom-id="{{ chat_room_id }}"
|
|
data-skip="5"
|
|
>Öňki hatlar</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:i - 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 class="form-control" id="order-notes" cols="30" rows="10" name="msg" placeholder="Hatyňyz..."></textarea>
|
|
<!-- <textarea class="form-control" name="msg" required></textarea> -->
|
|
</div>
|
|
|
|
<button class="message_btn" type="submit" data-attach-loading>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 23">
|
|
<g id="paper-plane" transform="translate(0 0)">
|
|
<path id="Path_3270" data-name="Path 3270" d="M8.75,17.612V22.25a.75.75,0,0,0,1.354.444L12.817,19Z" fill="#f37b1c"/>
|
|
<path id="Path_3271" data-name="Path 3271" d="M23.685.139A.75.75,0,0,0,22.9.085L.4,11.835a.75.75,0,0,0,.1,1.375l6.255,2.138L20.083,3.958,9.775,16.377,20.258,19.96A.767.767,0,0,0,20.5,20a.749.749,0,0,0,.742-.639l2.75-18.5a.751.751,0,0,0-.307-.722Z" fill="#f37b1c"/>
|
|
</g>
|
|
</svg>
|
|
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function loadMoreMeassges() {
|
|
$('#more_btn').text('Ýüklenýär...');
|
|
|
|
$(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('Öňki hatlar');
|
|
}
|
|
})
|
|
}
|
|
|
|
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>
|
|
|