芝麻web文件管理V1.00

编辑当前文件:/home/lekhnath/silverray.com.au/Modules/LiveChat/resources/views/index.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
  <title>Messages</title>

</head>

<div class="main-content">
        <section class="section">
          <div class="section-header">
            <h1>Chat Box : I am {{ $auth_user->name }}</h1>
          </div>

<form action="{{ route('send-new-message') }}" method="POST">
                @csrf
                <div class="form-group">
                    <select name="receiver_id" id="" class="form-control">
                        <option value="">Select User</option>
                        @foreach ($user_list as $list_item)
                            <option value="{{ $list_item->id }}">{{ $list_item->name }}</option>
                        @endforeach
                    </select>
                </div>

<button class="btn btn-primary">Send Message</button>

</form>

</div>

<div class="card-body">
                    <ul class="list-unstyled list-unstyled-border" id="contact_list">
                        @foreach ($contact_list as $contact_item)
                            <li class="media" onclick="loadChatBody('{{ $contact_item->id }}')">
                                <img alt="image" class="me-3 rounded-circle" width="50" src="https://www.gravatar.com/avatar/75d23af433e0cea4c0e45a56dba18b30">
                                <div class="media-body">
                                    <div class="mt-0 mb-1 font-weight-bold">{{ $contact_item?->name }} - <b class="new_message_count_{{ $contact_item->id }} {{ $contact_item?->new_message == 0 ? 'd-none' : '' }}">{{ $contact_item?->new_message }}</b></div>

<div class="text-small font-weight-600 text-muted active_status_{{ $contact_item->id }}"><i class="fas fa-circle"></i> Offline </div>

</div>
                            </li>
                        @endforeach

</ul>
                  </div>
                </div>
              </div>
                <div class="col-md-8">
                    <input type="hidden" id="active_contact_id">
                    <div class="card chat-box" id="mychatbox">

</div>
                </div>

</div>
          </div>
        </section>
      </div>
      <footer class="main-footer">
        <div class="footer-left">
          Copyright © 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
        </div>
        <div class="footer-right">

</div>
      </footer>
    </div>
  </div>

@if ($errors->any())
      @foreach ($errors->all() as $error)
          <script>
              toastr.error('{{ $error }}');
          </script>
      @endforeach
  @endif

let contact_list = <?php echo json_encode($contact_list); ?>;

Echo.channel(`private-livechat.${auth_user_id}`)
            .listen('.live-chat', (res) => {
                toastr.success('You have received new message');

/*at first need to check the sender id is already available in contact list or not, if not need to push the contact item in list*/

let is_exist = contact_list.find(list_item => list_item.id == res.sender_id);

if(is_exist){
                    let active_contact_id = $("#active_contact_id").val()

/*if selected user and new message sender id is same, request to latest message list and append on message body */

if(active_contact_id == res.sender_id){
                        $.ajax({
                            type : 'get',
                            url : "{{ url('/load-latest-message') }}" + "/" + active_contact_id,
                            success : function(response){
                                $(".chat-content").html(response);
                                scrollToBottomFunc();
                            },
                            error : function(error){
                                alert("server error")
                            }
                        })
                    }else{
                        let new_message_count = $(".new_message_count_"+res.sender_id).html();
                        new_message_count = parseInt(new_message_count) + parseInt(1);
                        $(".new_message_count_"+res.sender_id).html(new_message_count)
                        $(".new_message_count_"+res.sender_id).removeClass('d-none')

}
                }else{
                    /*get new sender info and push to existing list*/
                    $.ajax({
                            type : 'get',
                            url : "{{ url('/get-new-contact-sender') }}" + "/" + res.sender_id,
                            success : function(response){

let contact_author = response.contact_author

contact_list.push({
                                        id : contact_author.id,
                                        name : contact_author.name,
                                        email : contact_author.email,
                                        last_message : 'last_message',
                                        image : contact_author.image,
                                        new_message : 'new_message',
                                    });

let new_list_item = `<li class="media" onclick="loadChatBody('${contact_author.id}')">
                                        <img alt="image" class="me-3 rounded-circle" width="50" src="https://www.gravatar.com/avatar/75d23af433e0cea4c0e45a56dba18b30">
                                        <div class="media-body">
                                            <div class="mt-0 mb-1 font-weight-bold">${contact_author.name} - <b class="new_message_count_${contact_author.id}">1</b></div>
                                            <div class="text-success text-small font-600-bold"><i class="fas fa-circle"></i> Online </div>

{{-- <div class="text-small font-weight-600 text-muted"><i class="fas fa-circle"></i> Offline</div> --}}
                                        </div>
                                    </li>`

$("#contact_list").prepend(new_list_item);

},
                            error : function(error){
                                alert("server error")
                            }
                        })

}

});

Echo.join(`trackactiveuser`)
                .here((users) => {

let user_id_sets = new Set(users.map(user => user.id));

contact_list.forEach(function(contact_item) {
                        let is_user_exist = user_id_sets.has(contact_item.id);
                        if(is_user_exist){
                            $(".active_status_"+ contact_item.id).addClass("font-600-bold text-success")
                            $(".active_status_"+ contact_item.id).removeClass("font-weight-600 text-muted")
                            $(".active_status_"+ contact_item.id).html(`<i class="fas fa-circle"></i> Online`)
                        }
                    });

})
                .joining((user) => {

contact_list.forEach(function(contact_item) {
                        if(contact_item.id == user.id){
                            $(".active_status_"+ contact_item.id).addClass("font-600-bold text-success")
                            $(".active_status_"+ contact_item.id).removeClass("font-weight-600 text-muted")
                            $(".active_status_"+ contact_item.id).html(`<i class="fas fa-circle"></i> Online`)
                        }
                    });

})
                .leaving((user) => {

contact_list.forEach(function(contact_item) {
                        if(contact_item.id == user.id){
                            $(".active_status_"+ contact_item.id).removeClass("font-600-bold text-success")
                            $(".active_status_"+ contact_item.id).addClass("font-weight-600 text-muted")
                            $(".active_status_"+ contact_item.id).html(`<i class="fas fa-circle"></i> Offline`)
                        }
                    });

})
                .error((error) => {
                    console.error(error);
                });

</script>
    <script>

(function($) {
            "use strict";

})(jQuery);

function loadChatBody(contact_id){
            $(".new_message_count_"+contact_id).html(0)
            $(".new_message_count_"+contact_id).addClass('d-none')
            $.ajax({
                type : 'get',
                url : "{{ url('/load-message-box') }}" + "/" + contact_id,
                success : function(response){
                    $("#mychatbox").html(response);
                    scrollToBottomFunc();
                    $("#active_contact_id").val(contact_id)
                },
                error : function(error){
                    alert("server error")
                }
            })
        }

function scrollToBottomFunc() {
            $('.chat-content').animate({
                scrollTop: $('.chat-content').get(0).scrollHeight
            }, 50);
        }
    </script>

@stack('js')

</body>
</html>