0.0.21

static/css/styles(boris).css

@@ -471,4 +471,87 @@
 
 .insert_users{
     min-height: 440px;
+}
+
+/*messgae*/
+
+
+.container-message_support_chat{
+    width: 60%;
+    height: 90px;
+    margin-bottom: 70px;
+    margin-left: 20px;
+}
+
+.container-message_support_chat.left{
+    float: left;
+}
+
+.container-message_support_chat.right{
+    float: right;
+}
+
+.block_avatar_message{
+    width: 15%;
+    float: left;
+    /*margin-right: 20px;*/
+}
+
+.block_avatar_message > img{
+    width: 30px;
+    height: 30px;
+}
+
+.block_text_message{
+    width: 85%;
+    float: right;
+}
+
+.container_text_message{
+    width: 100%;
+    height: 60px;
+    border-radius: 10px;
+}
+
+.container_text_message.border{
+    border: 1px solid #FF613A;
+    background: #FFFFFF;
+}
+
+.container_text_message.background{
+    background: #FF613A;
+    border: none;
+}
+
+.text_message{
+    font-size: 12px;
+    padding: 15px;
+    /*text-wrap: wrap;*/
+    overflow-wrap: break-word;
+    display: block;
+}
+
+
+.container_text_message.background > span{
+    color: #FFFFFF;
+}
+
+.container_text_message.border > span{
+    color: #272424;
+}
+
+.data_send_message{
+    margin-top: 10px;
+    font-size: 12px;
+    width: 100%;
+    height: 20px;
+    color: #000000;
+}
+
+.data_send_message.left{
+    text-align: left;
+}
+
+.data_send_message.right{
+    text-align: right;
 }

static/js/user_profile(boris).js

@@ -144,4 +144,30 @@ function createTicket (el) {
 
 function selectedUserMessenger (el){
     el.classList.toggle("select")
+}
+
+function sendMessage(id_ticket,sender,reciever,text){
+    event.preventDefault()
+
+    $.ajax({
+        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
+        url: '/ru/messages/create_ticket/',
+        type: "POST",
+        // async: true,
+        cache: false,
+        processData: false,
+        contentType: false,
+        // enctype: 'json',
+        data: formData,
+        success: function(data){
+
+            document.querySelector(".insert-tech-place").innerHTML = data.html;
+
+        },
+        error: function (data){
+
+            document.querySelector(".insert-tech-place").innerHTML = data.responseJSON.html;
+
+        }
+    });
 }

templates/widgets/w_message.html

@@ -1,4 +1,31 @@
 {% load static %}
-<div>
+<div class="container-message_support_chat{% if msg.sender == ticket.manager %} left{% else %} right{% endif %}">
-
+    <div class="block_avatar_message">
+        <img src="{% static "delete_later/Avatar.png" %}">
+    </div>
+    <div class="block_text_message">
+        <div class="container_text_message{% if msg.sender == ticket.manager %} border{% else %} background{% endif %}">
+            <span class="text_message">
+                {{ msg.text }}
+            </span>
+        </div>
+        <div class="data_send_message{% if msg.sender == ticket.manager %} left{% else %} right{% endif %}">
+            <span>{{ msg.modifiedDT }}</span>
+        </div>
+    </div>
+</div>
+<div class="container-message_support_chat{% if msg.sender == ticket.manager %} left{% else %} right{% endif %}">
+    <div class="block_avatar_message">
+        <img src="{% static "delete_later/Avatar.png" %}">
+    </div>
+    <div class="block_text_message">
+        <div class="container_text_message{% if msg.sender == ticket.manager %} border{% else %} background{% endif %}">
+            <span class="text_message">
+                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+            </span>
+        </div>
+        <div class="data_send_message{% if msg.sender == ticket.manager %} left{% else %} right{% endif %}">
+            <span>8:00 PM</span>
+        </div>
+    </div>
 </div>