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.
 
 
 
 
 
 

616 lines
31 KiB

{% 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 class="stepssBlock box-sizing disTab">#}
{# <p class="textStepss">#}
{# Какое кол-во этапов подразумевает работа? <input type="text" id="countStage" size="3"/>#}
{# </p>#}
{# <div id="formsetStage" class="numberStepp box-sizing" style="display: none;">#}
{# <div class="insetNumStepp" id="stage1">#}
{# <p class="titleNumStepp">#}
{# <span>Этап </span>#}
{# </p>#}
{# <div class="textAreaBlock2 box-sizing disTab">#}
{# <form class="new-stages-form">#}
{# <label>Название</label>#}
{# <input type="text" name="name" />#}
{# <label>Результат</label>#}
{# <input type="text" name="result" />#}
{# <label>Стоимость</label>#}
{# <input type="text" name="cost" />#}
{# <input type="hidden" name="order" class="orderStagesInput"/>#}
{# </form>#}
{# </div>#}
{# </div>#}
{##}
{# </div>#}
{##}
{# </div>#}
{# <div class="textAreaBlock2 FFD box-sizing disTab">#}
{# <a href="javascript:void()">согласовать</a>#}
{# </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="linkChatB box-sizing disTab">
<a href="javascript:void(0)">предложить проект</a>
</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" 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){
$.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);
},
})
});
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);
$("#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);
{# $.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="hidden" 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" id="stage-form-'+ v.pos +'">' +#}
{# '<label for="">Название</label><input class="form-control" type="text" value="'+ v.name +'" />' +#}
{# '<label for="">Цена</label><input class="form-control" type="text" value="'+ v.cost +'" />' +#}
{# '<input class="form-control" type="hidden" value="'+ v.order +'" />' +#}
{# '<label for="">Срок</label><input class="form-control" type="text" value="'+ v.term +'" />' +#}
{# '<label for="">Результат</label><input class="form-control" type="text" 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="javascript:void()" data-order-id="'+ orderId +'" id="addStagesForm">отправить на согласование</a> </div>';#}
{# }#}
{# htmlInbox = htmlInboxStage + htmlInbox;#}
{# $("#order-stages").html(htmlInbox);#}
{# }#}
{# });#}
});
// Вытащить сообщения для конактов
$('.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-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 %}