106 lines
4.8 KiB
PHP
106 lines
4.8 KiB
PHP
@extends('portal::layouts.customer')
|
|
@section('title', __('portal::lang.chat_with_specialist'))
|
|
@section('content')
|
|
<section class="content portal-chat-page">
|
|
<div class="portal-chat-header">
|
|
<a href="{{ action([\Modules\Portal\Http\Controllers\Customer\CommunicationController::class, 'index']) }}" class="portal-chat-back">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</a>
|
|
<div class="portal-chat-title">
|
|
<strong>{{ $specialist['name'] }}</strong>
|
|
<small id="portal-chat-presence" class="{{ !empty($specialist['is_online']) ? 'text-success' : 'text-muted' }}">
|
|
@if(!empty($presenceEnabled))
|
|
<span class="portal-presence-dot {{ !empty($specialist['is_online']) ? 'online' : 'offline' }}"></span>
|
|
{{ !empty($specialist['is_online']) ? __('portal::lang.online_now') : __('portal::lang.offline') }}
|
|
@else
|
|
@lang('portal::lang.your_specialist')
|
|
@endif
|
|
</small>
|
|
</div>
|
|
@if(!empty($specialist['mobile']))
|
|
<a href="tel:{{ preg_replace('/\s+/', '', $specialist['mobile']) }}" class="portal-chat-call">
|
|
<i class="fas fa-phone"></i>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
|
|
<div id="portal-chat-messages" class="portal-chat-messages" data-room-id="{{ $room_id }}"></div>
|
|
|
|
<form id="portal-chat-form" class="portal-chat-form" data-send-url="{{ action([\Modules\Portal\Http\Controllers\Customer\CommunicationController::class, 'sendMessage'], [$room_id]) }}">
|
|
@csrf
|
|
<input type="text" id="portal-chat-input" class="form-control" placeholder="@lang('portal::lang.type_message')" maxlength="5000" autocomplete="off">
|
|
<button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane"></i></button>
|
|
</form>
|
|
</section>
|
|
@endsection
|
|
|
|
@section('javascript')
|
|
<script>
|
|
(function () {
|
|
var roomId = {{ $room_id }};
|
|
var messagesUrl = '{{ action([\Modules\Portal\Http\Controllers\Customer\CommunicationController::class, 'messages'], [$room_id]) }}';
|
|
var markReadUrl = '{{ action([\Modules\Portal\Http\Controllers\Customer\CommunicationController::class, 'markRead'], [$room_id]) }}';
|
|
var presenceUrl = '{{ action([\Modules\Portal\Http\Controllers\Customer\CommunicationController::class, 'specialistPresence'], [$specialist['id']]) }}';
|
|
var heartbeatUrl = '{{ action([\Modules\Portal\Http\Controllers\Customer\CommunicationController::class, 'heartbeat']) }}';
|
|
var onlineLabel = @json(__('portal::lang.online_now'));
|
|
var offlineLabel = @json(__('portal::lang.offline'));
|
|
var presenceEnabled = {{ !empty($presenceEnabled) ? 'true' : 'false' }};
|
|
var $box = $('#portal-chat-messages');
|
|
var lastCount = 0;
|
|
|
|
function renderMessages(items) {
|
|
var html = '';
|
|
items.forEach(function (m) {
|
|
html += '<div class="portal-chat-bubble ' + (m.is_mine ? 'mine' : 'theirs') + '">' +
|
|
'<div class="portal-chat-body">' + $('<div>').text(m.body).html() + '</div>' +
|
|
'<div class="portal-chat-time">' + (m.created_at || '') + '</div></div>';
|
|
});
|
|
$box.html(html);
|
|
if (items.length !== lastCount) {
|
|
$box.scrollTop($box[0].scrollHeight);
|
|
lastCount = items.length;
|
|
}
|
|
}
|
|
|
|
function loadMessages() {
|
|
$.get(messagesUrl, function (data) {
|
|
renderMessages(data);
|
|
});
|
|
}
|
|
|
|
loadMessages();
|
|
$.post(markReadUrl, {_token: $('meta[name="csrf-token"]').attr('content')});
|
|
setInterval(loadMessages, 8000);
|
|
|
|
if (presenceEnabled) {
|
|
function refreshPresence() {
|
|
$.get(presenceUrl, function (data) {
|
|
var $el = $('#portal-chat-presence');
|
|
var online = !!data.is_online;
|
|
$el.toggleClass('text-success', online).toggleClass('text-muted', !online);
|
|
$el.find('.portal-presence-dot').toggleClass('online', online).toggleClass('offline', !online);
|
|
$el.contents().filter(function () { return this.nodeType === 3; }).remove();
|
|
$el.append(document.createTextNode(online ? onlineLabel : offlineLabel));
|
|
});
|
|
$.post(heartbeatUrl, {_token: $('meta[name="csrf-token"]').attr('content')});
|
|
}
|
|
setInterval(refreshPresence, 20000);
|
|
setInterval(function () {
|
|
$.post(heartbeatUrl, {_token: $('meta[name="csrf-token"]').attr('content')});
|
|
}, 60000);
|
|
}
|
|
|
|
$('#portal-chat-form').on('submit', function (e) {
|
|
e.preventDefault();
|
|
var $input = $('#portal-chat-input');
|
|
var body = $.trim($input.val());
|
|
if (!body) return;
|
|
$.post($(this).data('send-url'), {_token: $('meta[name="csrf-token"]').attr('content'), body: body}, function () {
|
|
$input.val('');
|
|
loadMessages();
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
@endsection
|