chat.volt

{% extends 'base.volt' %}

{% block css %}
    {{ stylesheet_link('css/chat.css') }}
{% endblock %}

{% block content %}
    <div id="page-wrapper">
        <div class="container" style="padding-top: 20px;">
            <div class="row">
                <div class="col-lg-3">
                    <!-- <div class="btn-panel btn-panel-conversation">
                        <a href="" class="btn  col-lg-6 send-message-btn " role="button"><i class="fa fa-search"></i> Search</a>
                        <a href="" class="btn  col-lg-6  send-message-btn pull-right" role="button"><i class="fa fa-plus"></i> New Message</a>
                    </div> -->
                </div>

                <div class="col-lg-offset-1 col-lg-7">
                    <div class="btn-panel btn-panel-msg">
                        <a href="" class="btn col-lg-3  send-message-btn pull-right" role="button"><i class="fa fa-send"></i> Enviar Proposta</a>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="message-wrap col-lg-8">

                    <!-- tab-content -->
                    <div class="tab-content">

                        {% if newChat is defined %}
                        <!-- tab-content -->
                        <div class="tab-pane" id="msg-conv-0" data-id="{{ newChat['conversation_id'] }}" data-user="{{ newChat['user'].user_id }}" >
                            <div class="msg-wrap" onscroll="loadOlderMessages(this)"></div>

                            <div class="send-wrap">
                                <textarea class="form-control send-message" rows="3" placeholder="Digite para começar a conversa..."></textarea>
                            </div>

                            <div class="btn-panel">
                                <!-- <a href="" class=" col-lg-3 btn   send-message-btn " role="button"><i class="fa fa-cloud-upload"></i> Add Files</a> -->
                                <!-- <a href="" class=" col-lg-4 text-right btn   send-message-btn pull-right" role="button"><i class="fa fa-plus"></i> Enviar</a> -->
                            </div>
                        </div>
                        <!-- / tab-content -->
                        {% endif %}

                        {% for key,conversation in conversations %}
                        <!-- tab-content -->
                        <div class="tab-pane" id="msg-conv-{{ (key + 1) }}" data-id="{{ conversation['conversation_id'] }}" data-user="{{ conversation['user'].user_id }}" >
                            <div class="msg-wrap" onscroll="loadOlderMessages(this)"></div>

                            <div class="send-wrap">
                                <textarea class="form-control send-message" rows="3" placeholder="Escreva sua resposta..."></textarea>
                            </div>

                            <div class="btn-panel">
                                <!-- <a href="" class=" col-lg-3 btn   send-message-btn " role="button"><i class="fa fa-cloud-upload"></i> Add Files</a> -->
                                <!-- <a href="" class=" col-lg-4 text-right btn   send-message-btn pull-right" role="button"><i class="fa fa-plus"></i> Enviar</a> -->
                            </div>
                        </div>
                        <!-- / tab-content -->
                        {% endfor %}

                    </div>
                    <!-- / tab-content -->

                </div>

                <!-- conversations -->
                <div class="conversation-wrap col-lg-3">

                    {% if newChat is defined %}
                    <div class="media conversation">
                        <a href="#msg-conv-0" data-id="{{ newChat['conversation_id'] }}" data-user="{{ newChat['user'].user_id }}" data-toggle="tab">
                            <img class="media-object avatar" style="width: 50px; height: 50px; border-radius: 50%;" src="{{ newChat['user'].image }}">
                        </a>
                        <div class="media-body">
                            <h5 class="media-heading">{{ newChat['user'].nome }}</h5>
                            <small></small>
                        </div>
                    </div>
                    {% endif %}

                    {% for key,conversation in conversations %}
                    <div class="media conversation">
                        <a href="#msg-conv-{{ (key + 1) }}" data-id="{{ conversation['conversation_id'] }}" data-user="{{ conversation['user'].user_id }}" data-toggle="tab">
                            <img class="media-object avatar" style="width: 50px; height: 50px; border-radius: 50%;" src="{{ conversation['user'].image }}">
                        </a>
                        <div class="media-body">
                            <h5 class="media-heading">{{ conversation['user'].nome }}</h5>
                            <small>{{ conversation['content'] }}</small>
                        </div>
                    </div>
                    {% endfor %}

                </div>
                <!-- / conversations -->
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ javascript_include('http://momentjs.com/downloads/moment-with-locales.min.js') }}

    <script type="text/javascript">

    /**
     * Info User logado
     *
     */
    var userName = "{{ user['nome'] }}";
    var userImage = "{{ user['image'] }}";


    /**
     * Simular click na primeira conversa
     *
     */
    $(function() {
        $('.conversation-wrap div:first-child a').trigger('click');
    });


    /**
     * Append message to box by Id
     *
     * @param   string   conversationId  Id do Chat
     */
    function loadOlderMessages(element) {
        var $box = $(element);

        // Check if is top
        if ($box.scrollTop() <= 0) {
            var conversationId = $box.parents('.tab-pane').attr('data-id');

            var firstId = $box.find('div.msg:first-child').attr('data-id');

            $.getJSON('{{ url("chat/messages") }}', {conversation_id: conversationId, filter_id_lt: firstId, limit: 50}, function(json, textStatus) {
                if (json.success) {

                    $.each(json.messages, function(key, value) {
                        $box.addMessage(value.message_id, value.createdAt, value.from_user.image, value.from_user.nome, value.content, 'prepend');
                    });
                }
            });
        }
    }


    /**
     * Enviar mensagem
     *
     */
    function sendMessage(input)
    {
        // Capturar janela do chat
        var chatBox = $(input).parents('.tab-pane:first');

        var conversationId = chatBox.attr('data-id');

        var userId = chatBox.attr('data-user');

        var content = $(input).val();

        if ($(input).val() != '') {
            $(input).attr('disabled', true);

            $.post('{{ url("chat/sendMessage") }}', {conversation_id: conversationId, to_user_id: userId, content: content}, function(json, textStatus, xhr) {
                if (json.success) {
                    chatBox.find('.msg-wrap').addMessage(json.message_id, false, userImage, userName, content, 'append');
                    chatBox.find('.msg-wrap').scrollBox();
                    chatBox.find('.msg-wrap').updateTab();
                }
            }, 'json');

            // Esvaziar input
            $(input).val('').attr('disabled', false);

            return false;
        }
    }
    $('.send-wrap .send-message').on('keypress', function(e) {
        if (e.keyCode == 13) {
            e.preventDefault();

            sendMessage(this);
        }
    });


    /**
     * Varrer novas mensagens
     */
    function refreshChats()
    {
        $('.tab-pane').each(function() {
            var chatDiv = $(this);

            var ajaxData = {};

            ajaxData.conversation_id = $(this).attr('data-id');

            if ($(this).find('div.msg-wrap .msg').length > 0) {
                ajaxData.filter_id_gt = $(this).find('div.msg-wrap .msg:last-child').attr('data-id');
            }

            $.getJSON('{{ url("chat/messages") }}', ajaxData, function(json, textStatus) {
                if (json.success && json.messages.length > 0) {

                    $.each(json.messages.reverse(), function(key, value) {
                        chatDiv.find('.msg-wrap').addMessage(value.message_id, value.createdAt, value.from_user.image, value.from_user.nome, value.content, 'append');
                    });

                    chatDiv.find('.msg-wrap').scrollBox();
                    chatDiv.find('.msg-wrap').updateTab();
                }
            });
        });
    }
    setInterval(refreshChats, 2000);


    /**
     * Jquery Add Msg Function
     *
     */
    jQuery.fn.extend({
        addMessage: function(messageId, createdAt, userImage, userName, msgContent, action) {
            moment.locale('pt-br');

            if (createdAt) {
                var createdAtMoment = moment(createdAt, 'YYYY-MM-DD HH:mm:ss');
            } else {
                var createdAtMoment = moment();
            }

            var msgHtml  = '<div class="media msg" data-id="' + messageId + '">';
                msgHtml += '<a class="pull-left" href="#">';
                        msgHtml += '<img class="media-object avatar" style="width: 32px; height: 32px; border-radius: 50%" src="' + userImage + '">';
                    msgHtml += '</a>';
                    msgHtml += '<div class="media-body">';
                        msgHtml += '<small class="pull-right time"><i class="fa fa-clock-o"></i> ' + createdAtMoment.fromNow() + '</small>';
                        msgHtml += '<h5 class="media-heading">' + userName + '</h5>';
                        msgHtml += '<small class="col-lg-10 msg-content">' + msgContent + '</small>';
                    msgHtml += '</div>';
                msgHtml += '</div>';

            if (action == 'append') {
                $(this).append(msgHtml);
            } else {
                $(this).prepend(msgHtml);
            }
        }
    });


    /**
     * Rolar box
     *
     */
    jQuery.fn.extend({
        scrollBox: function() {
            if (this[0] !== undefined) {
                var scrollHeight = this[0].scrollHeight;

                $(this).animate({scrollTop: scrollHeight}, 600);
            }
        }
    });


    /**
     * Atualizar mensagem do navegador de abas
     *
     */
    jQuery.fn.extend({
        updateTab: function() {
            var lastText = $(this).find('.msg:last-child .media-body .msg-content').text();

            var conversationId = $(this).parents('.tab-pane').attr('data-id');

            $('a[data-id="' + conversationId + '"]').parents('.conversation').find('.media-body small').text(lastText);
        }
    });
    </script>
{% endblock %}