proekton.com/chat/templates/chat_customer.html

{% extends 'partials/base.html' %}
{% load staticfiles %}
{% load thumbnail %}
{% block content %}
    {% include 'partials/header.html' %}
    <div class="container mainScore">
        <div class="row">
            <div class="col-lg-12 allProjects">
                <h1>Чат</h1>
            </div>
            <div class="btnReadyBlock disTab">
                <div class="triangle1"></div>
                <div class="col-lg-6 col-lg-offset-3 tabsChat">
                    <div class="profileTabs2">
                        <ul class="nav nav-tabs nav-justified">
                            <li role="presentation" class="active">
                                <a href="#tab1" data-toggle="tab">Личные</a>
                            </li>
                            <li role="presentation">
                                <a href="#tab2" data-toggle="tab">Исполнители</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="tab-content">
                <!-- Tab1 (contacts block)-->
                <div class="chatBlock disTab tab-pane fade in active" id="tab1">
                    <div class="col-lg-3 wrMessages">
                        <div class="messageBlock box-sizing disTab">
                            <p>Контакты</p>
                            {% for contact in contacts_users %}
                                <div class="message messd user-block" data-id="{{ contact.pk }}">
                                    <div class="imgMess">
                                        {% thumbnail contact.avatar "60x60" crop="center" as im %}
                                            <img src="{{ im.url }}" alt="mess-image">
                                        {% endthumbnail %}
                                    </div>
                                    <p class="nameMess">
                                        <a href="#">{{ contact.username }} {{ contact.username }}</a>
                                    </p>
                                    <a href="javascript:void(0)" class="conMess">Контакты</a>
                                    <span>0</span>
                                    <a href="javascript:void(0)" class="deleteMess">
                                        Удалить контакт
                                    </a>
                                </div>
                            {% endfor %}

                        </div>
                    </div>
                    <div class="col-lg-6 commChat" id="contact-chat">
                        <div id="message-chat-space">
                        </div>
                        <form id="contact-chat-form">
                            <input type="hidden" value="{{ request.user.pk }}" name="senderId" id="senderId"/>
                            <input type="hidden" value="" name="recipentId" id="recipentId"/>

                            <textarea id="chat" name="chat_message" class="box-sizing"></textarea>
                            <div class="bunChat">
                                <div class="setChat box-sizing">
                                    <p>Прикрепить файл</p>
							<span>
								Не более 10 файлов с общим объемом 500мб
							</span>
                                </div>

                                <a id="contact-chat-add-message" href="javascript:void(0)">отправить</a>

                            </div>
                        </form>

                    </div>
                    <div class="col-lg-3 wrChat1">
                        <div class="textAreaBlock2 box-sizing disTab">
                            <p>Для заметок</p>
                            <textarea id="chat2"></textarea>
                            <a href="javascript:void()">сохранить</a>
                        </div>
                    </div>
                </div>
                <!-- End block Tab1(contacts block)-->

                <!-- Tab2 (chat order block)-->
                <div class="chatBlock disTab tab-pane fade" id="tab2">
                    <div class="col-lg-3 wrMessages">
                        <div class="messageBlock box-sizing disTab">
                            <p>Заказы</p>
                            {% for order in orders %}
                                <div class="orderBlock box-sizing order-block"
                                     data-recipent-id="{{ order.order.contractor.pk }}" data-id="{{ order.order.id }}">
                                    <span class="dimovChat"></span>
                                    <p class="titleOB">{{ order }}</p>
                                    <div class="hideOBB">
                                        <p class="pOB">
                                            <span>Испонитель:</span> {{ order.order.contractor.get_full_name }}
                                        </p>
                                        <a href="javascript:void(0)" class="linkChat11">
                                            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                                            Полное описание заказа
                                        </a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>

                    </div>
                    <div class="col-lg-6 commChat">
                        <div id="message-chat-order-space">
                        </div>

                        <form id="chat-order-add" style="display:none;">
                            <input type="hidden" name="senderId" id="senderId" value="{{ request.user.pk }}"/>
                            <input type="hidden" name="recipentId" id="recipentId" value=""/>
                            <input type="hidden" name="orderId" id="orderId" value=""/>
                            <textarea id="chat" class="box-sizing"></textarea>
                            <div class="bunChat">
                                <div class="setChat box-sizing">
                                    <p>Прикрепить файл</p>
							<span>
								Не более 10 файлов с общим объемом 500мб
							</span>
                                </div>
                                <a href="javascript:void(0)" id="order-chat-add-message">отправить</a>
                            </div>
                        </form>


                    </div>
                    <div class="col-lg-3 wrstepschat" id="order-stages-tab">
                        <p>Этапы работы</p>
                        <div class="stepssBlock box-sizing disTab">
                            <p class="titleStepss">1 / Согласование условий</p>
                            <p class="textStepss">
                                Обсуджение задания и условий выполнения работы. Подтверждение заказа исполнителем.
                            </p>
                        </div>

                        <div id="order-stages"></div>

                        <div class="stepssBlock box-sizing disTab">
                            <p class="titleStepss">2 / Резервирование</p>
                            <p class="textStepss">
                                Резервирование заказчиком суммы оплаты по заказ. Деньги перечисляются и хранятся на
                                сайте.
                            </p>

                            <div class="textAreaBlock2 FFD box-sizing disTab">
                                <a href="#" data-toggle="modal" data-target="#reserve-stage-modal">Зарезирвировать</a>
                            </div>

                        </div>

                        <!-- Зарезервировать средства (модальное окно)-->
                        <div id="reserve-stage-modal" class="modal fade">
                            <div class="modal-dialog" style="width:900px;">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                                        </button>
                                        <h4 class="modal-title">Зарезервировать средства</h4>
                                    </div>

                                    <div class="modal-body">
                                        <div class="textAreaBlock2 text-nn box-sizing disTab">
                                        </div>

                                        <div class="searchF1 polsF1 polsFF links-filter">
                                            <input class="btn-submit-link" type="submit" value="Сохранить">
                                        </div>
                                    </div>
                                    <div class="modal-footer"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Конец блока  -->

                        <div class="stepssBlock box-sizing disTab">
                            <p class="titleStepss">3 / Выполнение работы</p>
                            <p class="textStepss">
                                Процесс выполнения задания в заказе до получения заказчиком итогового результата работы.
                            </p>
                        </div>


                        <div class="textAreaBlock2 box-sizing disTab">
                            <p>Для заметок</p>
                            <textarea id="chat2"></textarea>
                            <a href="javascript:void()">сохранить</a>
                        </div>


                        <div class="closeChat closeChat1">
                            <a href="#" data-toggle="modal" data-target="#review-add">
                                Закрыть проект<br>и оставить отзыв
                            </a>
                        </div>


                        <!-- Review add -->


                        <div id="review-add" class="modal fade" role="dialog">
                            <div class="modal-dialog" role="document" style="width:900px;">
                                <div class="modal-content">

                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                                        </button>
                                        <h4 class="modal-title">Оставить отзыв</h4>
                                    </div>
                                    <form id="review-adds-form"  method="POST">{% csrf_token %}
                                        <div class="modal-body">
                                            <div style="height: 250px;">

                                                <div class="text-nn box-sizing disTab">
                                                    <input type="radio" value="positive"
                                                           name="type">Положительный

                                                    <input type="radio" value="negative"
                                                           name="type">Отрицательный

                                                    <input type="radio" value="neutral"
                                                           name="type">Нейтральный
                                                </div>

                                                <div class="textAreaBlock2 text-nn box-sizing disTab">
                                                    <textarea cols="40"  name="text" rows="10"></textarea>
                                                    <input type="hidden" name="from_customer" value="{{ request.user.pk }}" />
                                                    <input type="hidden" name="target_contractor" id="targetContractorId" />
                                                    <input type="hidden" name="project" id="projectReviewId"  />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть
                                            </button>
                                            <button type="submit" id="order-review-add" class="btn btn-primary">Оставить отзыв</button>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                        <!-- -->

                    </div>
                </div>
                <!-- End block (chat order block) -->


            </div>


            {% include 'partials/footer.html' %}
        </div>
    </div>

{% endblock %}

{% block js_block %}
    <script type="text/javascript">

        $(function () {
            var currentChatUser = {{ request.user.pk }};
            var socket = new SocketHandler();
            var form = document.getElementById('message_form');
            var csrftoken = getCookie('csrftoken');

            function getStages(orderId) {

                $.ajax({
                    url: '/api/stages/',
                    type: 'GET',
                    data: {csrfmiddlewaretoken: csrftoken, 'order': orderId},
                    dataType: 'json',
                    success: function (json) {
                        var stageCount = json.results.length;
                        if (stageCount == 0) {
                            stageCountVal = 1;
                        } else {
                            stageCountVal = stageCount;
                        }

                        var htmlInbox = "";

                        var htmlInboxStage = '<p class="textStepss">Какое кол-во этапов подразумевает работа? ' +
                                '<input type="text" id="countStage" value="' + stageCountVal + '"size="3"/></p>';

                        if (stageCount == 0) {
                            htmlInboxStage += '<div class="numberStepp box-sizing" id="stage1">' +
                                    '<p>Этап <span class="stage-span-id">1</span></p><form class="new-stages-form" id="stage-form">' +
                                    '<label for="">Название</label><input class="form-control" name="name" type="text"  />' +
                                    '<label for="">Цена</label><input class="form-control" name="cost" type="text"  />' +
                                    '<input class="form-control" name="order" type="text" value="' + orderId + '" class="orderStagesInput"/> />' +
                                    '<label for="">Срок</label><input class="form-control" name="term" type="text" />' +
                                    '<label for="">Результат</label><input class="form-control" name="result" type="text"  />' +
                                    '</form></div>';
                        }
                        var statusNotAgreed = true;
                        $.each(json.results, function (i, v) {
                            if (v.status == "not_agreed") {
                                htmlInbox += '<div class="numberStepp box-sizing">' +
                                        '<p>Этап</p><form class="update-stages-form" data-stage-id="' + v.id + '" id="stage-form-' + v.pos + '">' +
                                        '<label for="">Название</label><input class="form-control" type="text" name="name" value="' + v.name + '" />' +
                                        '<label for="">Цена</label><input class="form-control" type="text" name="cost" value="' + v.cost + '" />' +
                                        '<input class="form-control" type="hidden" name="order" value="' + v.order + '" />' +
                                        '<label for="">Срок</label><input class="form-control" type="text" name="term" value="' + v.term + '" />' +
                                        '<label for="">Результат</label><input class="form-control" type="text" name="result" value="' + v.result + '" />' +
                                        '</form></div>';
                            } else {
                                statusNotAgreed = false;
                                htmlInboxStage = "";
                                htmlInbox += '<div class="numberStepp box-sizing"><div class="insetNumStepp">' +
                                        '<p class="titleNumStepp"><span>Этап ' + v.pos + '</span>' + v.name + '</p>' +
                                        '<p class="textNumStepp">Результаты этапа:' + v.result + '</p><div>' +
                                        '<p>до 16.03.2015</p><span>' + v.cost + '<i class="fa fa-rub"></i></span></div></div></div>';

                            }
                        });

                        if (statusNotAgreed) {
                            htmlInbox += '<div class="box-sizing disTab" style="text-align:center;"><div class="checkbox"><input type="checkbox" style="opacity:1">Перейти в режим безопасной сделки' +
                                    '</div></div><div class="textAreaBlock2 box-sizing disTab">' +
                                    '<a href="#" data-order-id="' + orderId + '" id="addStagesForm">отправить на согласование</a> </div>';
                        }
                        htmlInbox = htmlInboxStage + htmlInbox;
                        $("#order-stages").html(htmlInbox);
                    }
                });
            }

            setTimeout(function () {
                $(".user-block").first().trigger('click');
            }, 10);

            setTimeout(function () {
                $(".order-block").first().trigger('click');
            }, 100);

            $("#order-stages").on('click', "#addStagesForm", function (e) {
                e.preventDefault();
                $(".new-stages-form").each(function (i, v) {
                    console.log($(this).serialize());

                    $.ajax({
                        url: '/api/stages/',
                        type: 'POST',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'))
                        },
                        data: $(this).serialize(),
                        dataType: 'json',
                        success: function (json) {
                            console.log(json);

                        },
                        error: function (e) {
                            console.log('error');
                            console.log(e);
                        }
                    });

                });

                $(".update-stages-form").each(function (i, v) {
                    var currentStageId = parseInt($(this).attr('data-stage-id'));
                    $.ajax({
                        url: '/api/stages/' + currentStageId + '/',
                        type: 'PUT',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'))
                        },
                        data: $(this).serialize(),
                        dataType: 'json',
                        success: function (json) {
                            console.log(json);
                        },
                        error: function (e) {
                            console.log('error');
                            console.log(e);
                        }
                    });
                });


                var currentOrderId = $(this).attr('data-order-id');
                currentOrderId = parseInt(currentOrderId);
                getStages(currentOrderId);


            });

            $('#order-stages-tab').on('change', '#countStage', function () {
                var countStage = parseInt($(this).val());
                var updateFormStages = $(".update-stages-form");
                var limitCount = countStage + 1;
                for (var i = 2; i < limitCount; i++) {
                    var stageCopy = $("#stage1").clone().attr("id", "stage" + i).addClass("stages_form");
                    $("#stage1").after(stageCopy);
                }
            });

            $('.order-block').on('click', function () {
                $("#chat-order-add").css("display", "block");
                $("#formsetStage").css("display", "block");

                $('.order-block').each(function () {
                    $(this).removeClass('orAct');
                });

                $(this).addClass('orAct');
                var orderId = $(this).attr('data-id');
                var recipentId = $(this).attr('data-recipent-id');
                $("#chat-order-add #orderId").val(orderId);
                $("#projectReviewId").val(orderId);
                $("#targetContractorId").val(recipentId);
                $("#chat-order-add #recipentId").val(recipentId);
                $(".orderStagesInput").val(orderId);
                var inbox = document.getElementById('message-chat-order-space');
                inbox.innerHTML = '';
                $.ajax({
                    url: '/api/message',
                    type: 'GET',
                    data: {csrfmiddlewaretoken: csrftoken, 'order': orderId},
                    dataType: 'json',
                    success: function (json) {
                        $.each(json.results, function (i, v) {
                            var senderName = 'Вы';
                            var className = 'youChat';

                            if (v.sender.id !== currentChatUser) {
                                senderName = v.sender.username;
                                className = '';
                            }

                            inbox.innerHTML += '<div class="col-lg-12 insetCommChat ' + className + '"><div class="topCommChat">' +
                                    '<p class="nameCommChat">' + senderName + '</p><span>' + v.created + '</span></div>' +
                                    '<p class="textCommChat">' + v.text + '</p></div>';
                        });
                    }
                });
                getStages(orderId);
            });

            // Вытащить сообщения для конактов
            $('.user-block').on('click', function () {
                var userId = $(this).attr('data-id');
                $("#contact-chat-form #recipentId").val(userId);
                var inbox = document.getElementById('message-chat-space');
                inbox.innerHTML = '';
                $.ajax({
                    url: '/api/message',
                    type: 'GET',
                    data: {
                        csrfmiddlewaretoken: csrftoken,
                        'operand': 'in',
                        'sender_id': currentChatUser,
                        'recipent_id': userId
                    },
                    dataType: 'json',
                    success: function (json) {
                        $.each(json.results, function (i, v) {
                            var senderName = 'Вы';
                            var className = 'youChat';
                            if (v.sender.id == userId) {
                                senderName = v.sender.username;
                                className = '';
                            }
                            inbox.innerHTML += '<div class="col-lg-12 insetCommChat  ' + className + '"><div class="topCommChat">' +
                                    '<p class="nameCommChat">' + senderName + '</p> <span>' + v.created + '</span></div>' +
                                    '<p class="textCommChat">' + v.text + '</p></div>';
                        });
                    }
                });

            });

            $('#contact-chat-add-message').on('click', function () {
                var chatMessage = $("#chat").val();
                var recipentId = $("#recipentId").val();
                var senderId = $("#senderId").val();

                socket.add_contact_message({
                    "format_type": "add_message_contact",
                    "data": {
                        "sender_id": senderId,
                        "recipent_id": recipentId,
                        "chat_message": chatMessage,
                    }
                });

                $("#chat").val("");
            });

            $('#order-review-add').on('click', function(){
               alert('add review');
            });

            $('#order-chat-add-message').on('click', function () {
                var chatMessage = $("#chat-order-add #chat").val();
                var recipentId = $("#chat-order-add #recipentId").val();
                var senderId = $("#chat-order-add #senderId").val();
                var orderId = $("#chat-order-add #orderId").val();

                socket.add_contact_message({
                    "format_type": "add_message_order",
                    "data": {
                        "sender_id": senderId,
                        "recipent_id": recipentId,
                        "chat_message": chatMessage,
                        "order_id": orderId,

                    }
                });

                $("#chat-order-add #chat").val("");
            });

        });


        var userId = '{{ request.user.pk }}';
        var SocketHandler = function () {
            var url = 'ws://127.0.0.1:8888/chat/' + userId + '/';
            var sock = new WebSocket(url);
            var intervalId;
            sock.onopen = function () {
                console.log("Start connect");
                intervalId = setInterval(function () {
                    sock.send('{"dummy": 1}');
                }, 150);
            };
            sock.onmessage = function (event) {
                console.log(event.data);
                var message = JSON.parse(event.data);
                var inbox;
                if (message.answer_type == 'contact') {
                    inbox = document.getElementById('message-chat-space');
                } else if (message.answer_type == 'order' || message.answer_type == 'add_order') {
                    inbox = document.getElementById('message-chat-order-space')
                }
                inbox.innerHTML += '<div class="col-lg-12 insetCommChat"><div class="topCommChat">' +
                        '<p class="nameCommChat">Иванов</p> <span>13.0.2016</span></div>' +
                        '<p class="textCommChat">' + message.msg + '</p></div>';

            };

            this.send_order_message = function (orderId) {
                var data = {
                    "format_type": "order_message",
                    "order_id": orderId
                }
                sock.send(JSON.stringify(data));
                console.log(data);
            };

            this.send_contact_message = function (userId) {
                var data = {
                    "format_type": "add_message",
                    "user_id": userId
                }
                sock.send(JSON.stringify(data));
                console.log(data);
            };

            this.add_contact_message = function (messageData) {
                console.log(messageData);
                sock.send(JSON.stringify(messageData));
            };

            this.send_message = function (form) {
                var elements = form.elements;
                var data = {};
                var i = 0;
                for (var i; i < elements.length; i++) {
                    if (elements[i].name == 'message') {
                        data[elements[i].name] = elements[i].value;
                    }
                }
                sock.send(JSON.stringify(data));
                var textareaMessage = document.getElementById("message");
                textareaMessage.value = "";

            }
        }

    </script>
{% endblock %}