You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
304 lines
10 KiB
304 lines
10 KiB
{% extends 'partials/base.html' %}
|
|
{% load staticfiles %}
|
|
{% 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">
|
|
<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 customer_contacts %}
|
|
|
|
<div class="message messd user-block" data-id="{{ contact.recipent_id}}">
|
|
<div class="imgMess">
|
|
<img src="{% static 'img/mess.png' %}" alt="mess-image">
|
|
</div>
|
|
<p class="nameMess">
|
|
<a href="#">Тестовый контакт</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="text" value="{{ request.user.pk }}" name="senderId" id="senderId" />
|
|
<input type="text" 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="messageBlock box-sizing disTab">
|
|
<p>Контакты</p>
|
|
<div class="message">
|
|
<div class="imgMess">
|
|
<img src="img/mess.png" alt="mess-image">
|
|
</div>
|
|
<p class="nameMess">
|
|
<a href="#">Иванов Петр Иванович</a>
|
|
</p>
|
|
<a href="javascript:void(0)" class="conMess">Контакты</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 startChat">
|
|
<div class="insetSC1">
|
|
Начало:
|
|
<span>Срок сдачи:</span>
|
|
</div>
|
|
<div class="insetSC2">
|
|
13.0.2016
|
|
<span>13.0.2016</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 documentsChat">
|
|
<p>Входящие документы</p>
|
|
<ul>
|
|
<li>
|
|
Архитерурное 2.jpg
|
|
<span>7мб</span>
|
|
<div></div>
|
|
</li>
|
|
</ul>
|
|
<a href="javascript:void(0)">
|
|
Распечатать с помощью ресурса
|
|
</a>
|
|
</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="javascript:void(0)">
|
|
Закрыть проект<br>и оставить отзыв
|
|
</a>
|
|
</div>
|
|
<div class="closeChat closeChat2">
|
|
<a href="javascript:void(0)">
|
|
Закрыть проект<br>и оставить отзыв
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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-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>
|
|
{# <p class="pOB">#}
|
|
{# <span>Чаты:</span> Иванов, Петров, Пенкин#}
|
|
{# </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">
|
|
{% for msg in chat_messages %}
|
|
{# <div class="col-lg-12 insetCommChat {% if msg.sender.pk == request.user.pk %}youChat{% endif %}">#}
|
|
{# <div class="topCommChat">#}
|
|
{# <p class="nameCommChat {% if msg.sender.pk == request.user.pk %}greenNCC{% endif %}">{{ msg.sender.get_full_name }}</p>#}
|
|
{# <span>{{ msg.created }}</span>#}
|
|
{# </div>#}
|
|
{# <p class="textCommChat">{{ msg }}</p>#}
|
|
{# </div>#}
|
|
{% endfor %}
|
|
</div>
|
|
<form id="chat-order-add">
|
|
<input type="text" name="senderId" value="{{ request.user.pk }}"/>
|
|
<input type="text" name="recipentId" id="recipentId" value="" />
|
|
<input type="text" 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)">отправить</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="col-lg-3 wrTAB">
|
|
<div class="textAreaBlock2 box-sizing disTab">
|
|
<p>Для заметок</p>
|
|
<textarea id="chat2" ></textarea>
|
|
<a href="javascript:void()">сохранить</a>
|
|
</div>
|
|
<div class="linkChatB box-sizing disTab">
|
|
<a href="javascript:void(0)">предложить проект</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% include 'partials/footer.html' %}
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block js_block %}
|
|
|
|
<script type="text/javascript">
|
|
|
|
$(function(){
|
|
var socket = new SocketHandler();
|
|
var form = document.getElementById('message_form');
|
|
|
|
$('.order-block').on('click',function(){
|
|
var orderId = $(this).attr('data-id');
|
|
$("#chat-order-add #orderId").val(orderId);
|
|
var inbox = document.getElementById('message-chat-order-space');
|
|
inbox.innerHTML = '';
|
|
socket.send_order_message(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 = '';
|
|
socket.send_contact_message(userId);
|
|
});
|
|
|
|
$('#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("");
|
|
});
|
|
});
|
|
|
|
var SocketHandler = function(){
|
|
var url = 'ws://127.0.0.1:8888/chat';
|
|
var sock = new WebSocket(url);
|
|
var intervalId;
|
|
sock.onopen = function(){
|
|
console.log("Start connect");
|
|
intervalId = setInterval(function(){sock.send('{"dummy": 1}');}, 150000);
|
|
};
|
|
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-order-space');
|
|
}else if(message.answer_type == 'order'){
|
|
inbox= document.getElementById('message-chat-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 %}
|
|
|