This commit is contained in:
2023-09-17 17:18:56 +03:00
parent 8e6312f1ad
commit d09ca59279
6 changed files with 152 additions and 27 deletions

View File

@@ -666,6 +666,30 @@
border-radius: 10px;
}
/*file classes*/
.file_border_cont{
padding: 5%;
width: 95%;
height: 100%;
}
.left_part_file_w{
width: 20%;
height: 100%;
float: left;
}
.right_part_file_w{
width: 80%;
height: 100%;
color: #FFFFFF;
font-size: 14px;
float: right;
}
/*end*/
.container_text_message.left{
border: 1px solid #FF613A;
background: #FFFFFF;

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="#FFF"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg>

After

Width:  |  Height:  |  Size: 577 B

View File

@@ -117,23 +117,104 @@ function countLetters () {
//
// }
function attachFilemeassge (el,id_ticket=null,sender,receiver){
let file = el.files[0];
let reader = new FileReader();
// function getBase64(file,el) {
// const reader = new FileReader()
// let file_new = null
// let file_new_p = new Promise(function () {
// reader.readAsDataURL(file)
// reader.onload = function () {
// file_new = JSON.stringify({
// 'file': reader.result,
// 'file_type': el.type,
// 'file_name': el.name
// })
//
// }
//
// })
// file_new_p.then(function (){
// return file_new
// })
// }
//
// async function fileListToBase64(fileList) {
// const files_for_data = []
//
// for (let i = 0; i < fileList.length; i++) {
// let el = fileList[i]
// files_for_data.push(getBase64(fileList[i],el))
// }
//
// return await Promise.all(files_for_data)
// }
function getBase64(file,el) {
const reader = new FileReader()
return new Promise(resolve => {
reader.onload = ev => {
resolve(file_new = JSON.stringify({
'file': reader.result,
'file_type': el.type,
'file_name': el.name
})
)
}
reader.readAsDataURL(file)
})
}
async function fileListToBase64(fileList) {
// create function which return resolved promise
// with data:base64 string
// here will be array of promisified functions
const promises = []
// loop through fileList with for loop
for (let i = 0; i < fileList.length; i++) {
let el = fileList[i]
promises.push(getBase64(fileList[i],el))
}
// array with base64 strings
return await Promise.all(promises)
}
async function attachFilemeassge (el,id_ticket=null,sender,receiver){
// let file = el.files[0];
let fileList = el.files;
const files_for_data = await fileListToBase64(fileList)
let data = files_for_data
sendMessage(id_ticket,sender,receiver,data)
// let reader = new FileReader();
// let mas_for_for_each = []
// for (let i = 0;i < el.files.length;i++){
// let file_for_data_url_opert = el.files[i]
//
// reader.readAsDataURL(file_for_data_url_opert);
// reader.onload = function() {
// // console.log(reader.result);
// let file = JSON.stringify({
// 'file': reader.result,
// 'file_type': el.files[i].type,
// 'file_name': el.files[i].name
// })
// files_for_data.push(file)
// };
//
// reader.onerror = function() {
// console.log(reader.error);
// };
//
// }
reader.readAsDataURL(file);
reader.onload = function() {
// console.log(reader.result);
let data = reader.result
sendMessage(id_ticket,sender,receiver,data,file)
};
reader.onerror = function() {
console.log(reader.error);
};
}
@@ -212,9 +293,9 @@ function selectedUserMessenger (ticket_id=null,user_id=null){
}
function sendMessage(id_ticket=null,sender,receiver,img_post=null,file=null){
function sendMessage(id_ticket=null,sender,receiver,files=null){
// import {sendMessageSocket} from "./chat_sockets";
if (!img_post){
if (!files){
event.preventDefault()
}
let text = document.querySelector(".enter-message-inp").value
@@ -222,7 +303,7 @@ function sendMessage(id_ticket=null,sender,receiver,img_post=null,file=null){
let img = document.querySelector(".attach-file-btn-message").dataset["file_img"]
if (img_post){
if (files){
let data = {}
if (id_ticket === null){
@@ -230,11 +311,7 @@ function sendMessage(id_ticket=null,sender,receiver,img_post=null,file=null){
'sender': sender,
'receiver': receiver,
'text': '',
'file': JSON.stringify({
'file': img_post,
'file_type': file.type,
'file_name': file.name
})
'files': files
}
} else {
data = {
@@ -242,11 +319,7 @@ function sendMessage(id_ticket=null,sender,receiver,img_post=null,file=null){
'sender': sender,
'receiver': receiver,
'text': '',
'file': JSON.stringify({
'file': img_post,
'file_type': file.type,
'file_name': file.name
})
'files': files
}
}

View File

@@ -62,7 +62,7 @@
</div>
<div class="right-part-block-enter-message">
{# <button class="attach-file-btn-message" onclick="attachFilemeassge(event,this,null,{{ user.id }},{{ cur_receiver.id }})"></button>#}
<input style="display: none;" type="file" onchange="attachFilemeassge(this,null,{{ user.id }},{{ cur_receiver.id }})" id="id_choce_file">
<input style="display: none;" type="file" onchange="attachFilemeassge(this,null,{{ user.id }},{{ cur_receiver.id }})" id="id_choce_file" multiple>
<label for="id_choce_file" class="attach-file-btn-message"></label>
<button class="send-message" onclick="sendMessage(null,{{ user.id }},{{ cur_receiver.id }})"></button>
{# <button class="send-message" onclick="send_ws_msg('message')"></button>#}

View File

@@ -1,7 +1,7 @@
{% load static %}
{% include "widgets/w_file.html" %}
{% if not messages and ticket %}
{% include "widgets/w_message.html" %}
{% else %}

View File

@@ -0,0 +1,27 @@
{% load static %}
{% load tt_chat %}
<div style="width: 100%;">
<div class="container-message_support_chat {% get_msg_side user ticket msg %}">
<div class="block_avatar_message {% get_msg_side user ticket msg %}">
<img src="{% static "delete_later/Avatar.png" %}">
</div>
<div class="block_text_message {% get_msg_side user ticket msg %}">
<div class="container_text_message {% get_msg_side user ticket msg %}">
<div class="file_border_cont">
<div class="left_part_file_w">
<a href="{% static "/img/svg/loader.svg" %}" download><img src="{% static "/img/svg/download_file.svg" %}" style="height:35px"></a>
</div>
<div class="right_part_file_w">
<div>фывыфв</div>
<div>1234 кб</div>
</div>
<div class="clear_both"></div>
</div>
</div>
<div class="data_send_message {% get_msg_side user ticket msg %}">
<span>{% if msg %}{{ msg.modifiedDT }}{% else %}{{ ticket.modifiedDT }}{% endif %}</span>
</div>
</div>
</div>
</div>