|
|
|
@ -1,7 +1,8 @@ |
|
|
|
{% extends 'partials/base.html' %} |
|
|
|
{% extends 'partials/base.html' %} |
|
|
|
{% load staticfiles %} |
|
|
|
{% load staticfiles %} |
|
|
|
|
|
|
|
{% load thumbnail %} |
|
|
|
{% block content %} |
|
|
|
{% block content %} |
|
|
|
{% include 'partials/header.html' %} |
|
|
|
{% include 'partials/header.html' %} |
|
|
|
<div class="container mainScore"> |
|
|
|
<div class="container mainScore"> |
|
|
|
<div class="row"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-lg-12 allProjects"> |
|
|
|
<div class="col-lg-12 allProjects"> |
|
|
|
@ -27,14 +28,15 @@ |
|
|
|
<div class="col-lg-3 wrMessages"> |
|
|
|
<div class="col-lg-3 wrMessages"> |
|
|
|
<div class="messageBlock box-sizing disTab"> |
|
|
|
<div class="messageBlock box-sizing disTab"> |
|
|
|
<p>Контакты</p> |
|
|
|
<p>Контакты</p> |
|
|
|
{% for contact in customer_contacts %} |
|
|
|
{% for contact in contacts_users %} |
|
|
|
|
|
|
|
<div class="message messd user-block" data-id="{{ contact.pk }}"> |
|
|
|
<div class="message messd user-block" data-id="{{ contact.recipent_id}}"> |
|
|
|
|
|
|
|
<div class="imgMess"> |
|
|
|
<div class="imgMess"> |
|
|
|
<img src="{% static 'img/mess.png' %}" alt="mess-image"> |
|
|
|
{% thumbnail contact.avatar "60x60" crop="center" as im %} |
|
|
|
|
|
|
|
<img src="{{ im.url }}" alt="mess-image"> |
|
|
|
|
|
|
|
{% endthumbnail %} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<p class="nameMess"> |
|
|
|
<p class="nameMess"> |
|
|
|
<a href="#">Тестовый контакт</a> |
|
|
|
<a href="#">{{ contact.username }} {{ contact.username }}</a> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<a href="javascript:void(0)" class="conMess">Контакты</a> |
|
|
|
<a href="javascript:void(0)" class="conMess">Контакты</a> |
|
|
|
<span>0</span> |
|
|
|
<span>0</span> |
|
|
|
@ -50,8 +52,8 @@ |
|
|
|
<div id="message-chat-space"> |
|
|
|
<div id="message-chat-space"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<form id="contact-chat-form"> |
|
|
|
<form id="contact-chat-form"> |
|
|
|
<input type="text" value="{{ request.user.pk }}" name="senderId" id="senderId" /> |
|
|
|
<input type="text" value="{{ request.user.pk }}" name="senderId" id="senderId"/> |
|
|
|
<input type="text" value="" name="recipentId" id="recipentId" /> |
|
|
|
<input type="text" value="" name="recipentId" id="recipentId"/> |
|
|
|
|
|
|
|
|
|
|
|
<textarea id="chat" name="chat_message" class="box-sizing"></textarea> |
|
|
|
<textarea id="chat" name="chat_message" class="box-sizing"></textarea> |
|
|
|
<div class="bunChat"> |
|
|
|
<div class="bunChat"> |
|
|
|
@ -127,7 +129,8 @@ |
|
|
|
<div class="messageBlock box-sizing disTab"> |
|
|
|
<div class="messageBlock box-sizing disTab"> |
|
|
|
<p>Заказы</p> |
|
|
|
<p>Заказы</p> |
|
|
|
{% for order in orders %} |
|
|
|
{% for order in orders %} |
|
|
|
<div class="orderBlock box-sizing order-block" data-id="{{ order.order.id }}"> |
|
|
|
<div class="orderBlock box-sizing order-block" |
|
|
|
|
|
|
|
data-recipent-id="{{ order.order.contractor.pk }}" data-id="{{ order.order.id }}"> |
|
|
|
<span class="dimovChat"></span> |
|
|
|
<span class="dimovChat"></span> |
|
|
|
<p class="titleOB"> |
|
|
|
<p class="titleOB"> |
|
|
|
{{ order }} |
|
|
|
{{ order }} |
|
|
|
@ -136,35 +139,35 @@ |
|
|
|
<p class="pOB"> |
|
|
|
<p class="pOB"> |
|
|
|
<span>Испонитель:</span> {{ order.order.contractor.get_full_name }} |
|
|
|
<span>Испонитель:</span> {{ order.order.contractor.get_full_name }} |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
{# <p class="pOB">#} |
|
|
|
{# <p class="pOB">#} |
|
|
|
{# <span>Чаты:</span> Иванов, Петров, Пенкин#} |
|
|
|
{# <span>Чаты:</span> Иванов, Петров, Пенкин#} |
|
|
|
{# </p>#} |
|
|
|
{# </p>#} |
|
|
|
<a href="javascript:void(0)" class="linkChat11"> |
|
|
|
<a href="javascript:void(0)" class="linkChat11"> |
|
|
|
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> |
|
|
|
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> |
|
|
|
Полное описание заказа |
|
|
|
Полное описание заказа |
|
|
|
</a> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{% endfor%} |
|
|
|
{% endfor %} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-lg-6 commChat"> |
|
|
|
<div class="col-lg-6 commChat"> |
|
|
|
<div id="message-chat-order-space"> |
|
|
|
<div id="message-chat-order-space"> |
|
|
|
{% for msg in chat_messages %} |
|
|
|
{% for msg in chat_messages %} |
|
|
|
{# <div class="col-lg-12 insetCommChat {% if msg.sender.pk == request.user.pk %}youChat{% endif %}">#} |
|
|
|
{# <div class="col-lg-12 insetCommChat {% if msg.sender.pk == request.user.pk %}youChat{% endif %}">#} |
|
|
|
{# <div class="topCommChat">#} |
|
|
|
{# <div class="topCommChat">#} |
|
|
|
{# <p class="nameCommChat {% if msg.sender.pk == request.user.pk %}greenNCC{% endif %}">{{ msg.sender.get_full_name }}</p>#} |
|
|
|
{# <p class="nameCommChat {% if msg.sender.pk == request.user.pk %}greenNCC{% endif %}">{{ msg.sender.get_full_name }}</p>#} |
|
|
|
{# <span>{{ msg.created }}</span>#} |
|
|
|
{# <span>{{ msg.created }}</span>#} |
|
|
|
{# </div>#} |
|
|
|
{# </div>#} |
|
|
|
{# <p class="textCommChat">{{ msg }}</p>#} |
|
|
|
{# <p class="textCommChat">{{ msg }}</p>#} |
|
|
|
{# </div>#} |
|
|
|
{# </div>#} |
|
|
|
{% endfor %} |
|
|
|
{% endfor %} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<form id="chat-order-add"> |
|
|
|
<form id="chat-order-add"> |
|
|
|
<input type="text" name="senderId" value="{{ request.user.pk }}"/> |
|
|
|
<input type="text" name="senderId" id="senderId" value="{{ request.user.pk }}"/> |
|
|
|
<input type="text" name="recipentId" id="recipentId" value="" /> |
|
|
|
<input type="text" name="recipentId" id="recipentId" value=""/> |
|
|
|
<input type="text" name="orderId" id="orderId" value="" /> |
|
|
|
<input type="text" name="orderId" id="orderId" value=""/> |
|
|
|
<textarea id="chat" class="box-sizing"></textarea> |
|
|
|
<textarea id="chat" class="box-sizing"></textarea> |
|
|
|
<div class="bunChat"> |
|
|
|
<div class="bunChat"> |
|
|
|
<div class="setChat box-sizing"> |
|
|
|
<div class="setChat box-sizing"> |
|
|
|
@ -173,14 +176,14 @@ |
|
|
|
Не более 10 файлов с общим объемом 500мб |
|
|
|
Не более 10 файлов с общим объемом 500мб |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<a href="javascript:void(0)">отправить</a> |
|
|
|
<a href="javascript:void(0)" id="order-chat-add-message">отправить</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</form> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-lg-3 wrTAB"> |
|
|
|
<div class="col-lg-3 wrTAB"> |
|
|
|
<div class="textAreaBlock2 box-sizing disTab"> |
|
|
|
<div class="textAreaBlock2 box-sizing disTab"> |
|
|
|
<p>Для заметок</p> |
|
|
|
<p>Для заметок</p> |
|
|
|
<textarea id="chat2" ></textarea> |
|
|
|
<textarea id="chat2"></textarea> |
|
|
|
<a href="javascript:void()">сохранить</a> |
|
|
|
<a href="javascript:void()">сохранить</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="linkChatB box-sizing disTab"> |
|
|
|
<div class="linkChatB box-sizing disTab"> |
|
|
|
@ -198,20 +201,34 @@ |
|
|
|
{% block js_block %} |
|
|
|
{% block js_block %} |
|
|
|
<script type="text/javascript"> |
|
|
|
<script type="text/javascript"> |
|
|
|
|
|
|
|
|
|
|
|
$(function(){ |
|
|
|
$(function () { |
|
|
|
|
|
|
|
var currentChatUser = {{ request.user.pk }}; |
|
|
|
var socket = new SocketHandler(); |
|
|
|
var socket = new SocketHandler(); |
|
|
|
var form = document.getElementById('message_form'); |
|
|
|
var form = document.getElementById('message_form'); |
|
|
|
var csrftoken = getCookie('csrftoken'); |
|
|
|
var csrftoken = getCookie('csrftoken'); |
|
|
|
|
|
|
|
|
|
|
|
$('.order-block').on('click',function(){ |
|
|
|
$('.order-block').on('click', function () { |
|
|
|
var orderId = $(this).attr('data-id'); |
|
|
|
var orderId = $(this).attr('data-id'); |
|
|
|
|
|
|
|
var recipentId = $(this).attr('data-recipent-id'); |
|
|
|
$("#chat-order-add #orderId").val(orderId); |
|
|
|
$("#chat-order-add #orderId").val(orderId); |
|
|
|
alert(orderId); |
|
|
|
$("#chat-order-add #recipentId").val(recipentId); |
|
|
|
var inbox = document.getElementById('message-chat-order-space'); |
|
|
|
var inbox = document.getElementById('message-chat-order-space'); |
|
|
|
inbox.innerHTML = ''; |
|
|
|
inbox.innerHTML = ''; |
|
|
|
{# socket.send_order_message(orderId);#} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$.ajax({ |
|
|
|
|
|
|
|
url: '/api/message', |
|
|
|
|
|
|
|
type: 'GET', |
|
|
|
|
|
|
|
data: {csrfmiddlewaretoken: csrftoken, 'order': orderId}, |
|
|
|
|
|
|
|
dataType: 'json', |
|
|
|
|
|
|
|
success: function (json) { |
|
|
|
|
|
|
|
$.each(json.results, function (i, v) { |
|
|
|
|
|
|
|
inbox.innerHTML += '<div class="col-lg-12 insetCommChat"><div class="topCommChat">' + |
|
|
|
|
|
|
|
'<p class="nameCommChat">Иванов</p> <span>13.0.2016</span></div>' + |
|
|
|
|
|
|
|
'<p class="textCommChat">' + v.text + '</p></div>'; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Вытащить сообщения для конактов |
|
|
|
// Вытащить сообщения для конактов |
|
|
|
@ -223,14 +240,23 @@ |
|
|
|
$.ajax({ |
|
|
|
$.ajax({ |
|
|
|
url: '/api/message', |
|
|
|
url: '/api/message', |
|
|
|
type: 'GET', |
|
|
|
type: 'GET', |
|
|
|
data: {csrfmiddlewaretoken: csrftoken, 'recipent__id': userId}, |
|
|
|
data: { |
|
|
|
|
|
|
|
csrfmiddlewaretoken: csrftoken, |
|
|
|
|
|
|
|
'operand': 'in', |
|
|
|
|
|
|
|
'sender_id': currentChatUser, |
|
|
|
|
|
|
|
'recipent_id': userId |
|
|
|
|
|
|
|
}, |
|
|
|
dataType: 'json', |
|
|
|
dataType: 'json', |
|
|
|
success: function (json) { |
|
|
|
success: function (json) { |
|
|
|
$.each(json.results, function (i, v) { |
|
|
|
$.each(json.results, function (i, v) { |
|
|
|
console.log(v.sender.id); |
|
|
|
var senderName = 'Вы'; |
|
|
|
console.log(v.recipent.id); |
|
|
|
var className = 'youChat'; |
|
|
|
inbox.innerHTML += '<div class="col-lg-12 insetCommChat"><div class="topCommChat">' + |
|
|
|
if (v.sender.id == userId) { |
|
|
|
'<p class="nameCommChat">Иванов</p> <span>13.0.2016</span></div>' + |
|
|
|
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>'; |
|
|
|
'<p class="textCommChat">' + v.text + '</p></div>'; |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -238,7 +264,7 @@ |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
$('#contact-chat-add-message').on('click', function(){ |
|
|
|
$('#contact-chat-add-message').on('click', function () { |
|
|
|
var chatMessage = $("#chat").val(); |
|
|
|
var chatMessage = $("#chat").val(); |
|
|
|
var recipentId = $("#recipentId").val(); |
|
|
|
var recipentId = $("#recipentId").val(); |
|
|
|
var senderId = $("#senderId").val(); |
|
|
|
var senderId = $("#senderId").val(); |
|
|
|
@ -254,35 +280,61 @@ |
|
|
|
|
|
|
|
|
|
|
|
$("#chat").val(""); |
|
|
|
$("#chat").val(""); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$('#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 userId = '{{ request.user.pk }}'; |
|
|
|
|
|
|
|
|
|
|
|
var SocketHandler = function(){ |
|
|
|
var SocketHandler = function () { |
|
|
|
var url = 'ws://127.0.0.1:8888/chat/' + userId + '/'; |
|
|
|
var url = 'ws://127.0.0.1:8888/chat/' + userId + '/'; |
|
|
|
var sock = new WebSocket(url); |
|
|
|
var sock = new WebSocket(url); |
|
|
|
var intervalId; |
|
|
|
var intervalId; |
|
|
|
sock.onopen = function(){ |
|
|
|
sock.onopen = function () { |
|
|
|
console.log("Start connect"); |
|
|
|
console.log("Start connect"); |
|
|
|
intervalId = setInterval(function(){sock.send('{"dummy": 1}');}, 150); |
|
|
|
intervalId = setInterval(function () { |
|
|
|
|
|
|
|
sock.send('{"dummy": 1}'); |
|
|
|
|
|
|
|
}, 150); |
|
|
|
}; |
|
|
|
}; |
|
|
|
sock.onmessage = function(event){ |
|
|
|
sock.onmessage = function (event) { |
|
|
|
console.log(event.data); |
|
|
|
console.log(event.data); |
|
|
|
alert(event.data); |
|
|
|
alert(event.data); |
|
|
|
var message = JSON.parse(event.data); |
|
|
|
var message = JSON.parse(event.data); |
|
|
|
var inbox; |
|
|
|
var inbox; |
|
|
|
if (message.answer_type == 'contact'){ |
|
|
|
if (message.answer_type == 'contact') { |
|
|
|
inbox= document.getElementById('message-chat-order-space'); |
|
|
|
inbox = document.getElementById('message-chat-order-space'); |
|
|
|
}else if(message.answer_type == 'order'){ |
|
|
|
} else if (message.answer_type == 'order') { |
|
|
|
inbox= document.getElementById('message-chat-space'); |
|
|
|
inbox = document.getElementById('message-chat-space'); |
|
|
|
} |
|
|
|
} |
|
|
|
inbox.innerHTML += '<div class="col-lg-12 insetCommChat"><div class="topCommChat">' + |
|
|
|
inbox.innerHTML += '<div class="col-lg-12 insetCommChat"><div class="topCommChat">' + |
|
|
|
'<p class="nameCommChat">Иванов</p> <span>13.0.2016</span></div>' + |
|
|
|
'<p class="nameCommChat">Иванов</p> <span>13.0.2016</span></div>' + |
|
|
|
'<p class="textCommChat">' + message.msg +'</p></div>'; |
|
|
|
'<p class="textCommChat">' + message.msg + '</p></div>'; |
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
this.send_order_message = function(orderId){ |
|
|
|
this.send_order_message = function (orderId) { |
|
|
|
var data = { |
|
|
|
var data = { |
|
|
|
"format_type": "order_message", |
|
|
|
"format_type": "order_message", |
|
|
|
"order_id": orderId |
|
|
|
"order_id": orderId |
|
|
|
@ -291,7 +343,7 @@ |
|
|
|
console.log(data); |
|
|
|
console.log(data); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
this.send_contact_message = function(userId){ |
|
|
|
this.send_contact_message = function (userId) { |
|
|
|
var data = { |
|
|
|
var data = { |
|
|
|
"format_type": "add_message", |
|
|
|
"format_type": "add_message", |
|
|
|
"user_id": userId |
|
|
|
"user_id": userId |
|
|
|
@ -300,16 +352,16 @@ |
|
|
|
console.log(data); |
|
|
|
console.log(data); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
this.add_contact_message = function(messageData){ |
|
|
|
this.add_contact_message = function (messageData) { |
|
|
|
console.log(messageData); |
|
|
|
console.log(messageData); |
|
|
|
sock.send(JSON.stringify(messageData)); |
|
|
|
sock.send(JSON.stringify(messageData)); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
this.send_message = function(form){ |
|
|
|
this.send_message = function (form) { |
|
|
|
var elements = form.elements; |
|
|
|
var elements = form.elements; |
|
|
|
var data = {}; |
|
|
|
var data = {}; |
|
|
|
var i=0; |
|
|
|
var i = 0; |
|
|
|
for(var i; i< elements.length; i++){ |
|
|
|
for (var i; i < elements.length; i++) { |
|
|
|
if (elements[i].name == 'message') { |
|
|
|
if (elements[i].name == 'message') { |
|
|
|
data[elements[i].name] = elements[i].value; |
|
|
|
data[elements[i].name] = elements[i].value; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -322,5 +374,5 @@ |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|
{% endblock %} |
|
|
|
{% endblock %} |
|
|
|
|