добавил кнопку для прикрепления картинки к сообщению
This commit is contained in:
parent
f3143c7532
commit
30f4a51707
2 changed files with 217 additions and 192 deletions
|
|
@ -1,56 +1,56 @@
|
|||
<script>
|
||||
import Header from '../Header.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import Time from "svelte-time";
|
||||
import { dayjs } from "svelte-time";
|
||||
import Time from 'svelte-time';
|
||||
import { dayjs } from 'svelte-time';
|
||||
import 'dayjs/locale/ru';
|
||||
import { UserCheck, getLastMessages, MessagePicToUrl } from '$lib/userFunction.js';
|
||||
import createWebSocket from '$lib/websocket';
|
||||
|
||||
dayjs.locale("ru");
|
||||
dayjs.locale('ru');
|
||||
console.clear();
|
||||
|
||||
let userId
|
||||
let socket
|
||||
let messages = [];
|
||||
let messageText = '';
|
||||
let messagePic;
|
||||
|
||||
let userId; //пользователь, который залогинен
|
||||
let socket; //вебсокет
|
||||
|
||||
let messages = []; //массив сообщений, которые отображаются на сайте
|
||||
let messageText = ''; //сообщения для отправки
|
||||
let messagePic; //картинка для отправки
|
||||
|
||||
onMount(async () => {
|
||||
const userData = await UserCheck();
|
||||
let userId = userData.id;
|
||||
let chatId = 2
|
||||
let chatId = 2;
|
||||
const websocketUrl = `ws://localhost:8000/api/chat/ws/${chatId}?user_id=${userId}`;
|
||||
|
||||
messages = await getLastMessages();
|
||||
|
||||
socket = createWebSocket(websocketUrl, (message) => {
|
||||
|
||||
messages = [message, ...messages]
|
||||
messages = [message, ...messages];
|
||||
});
|
||||
});
|
||||
|
||||
async function uploadImages() {
|
||||
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const fileInput = document.getElementById('file');
|
||||
const file = fileInput.files[0];
|
||||
let urlpic = await MessagePicToUrl(file)
|
||||
return urlpic
|
||||
let urlpic;
|
||||
if (file) {
|
||||
urlpic = await MessagePicToUrl(file);
|
||||
} else {
|
||||
urlpic = null;
|
||||
}
|
||||
fileInput.value = null;
|
||||
return urlpic;
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
let messageUrl = await uploadImages();
|
||||
|
||||
let messageUrl = await uploadImages()
|
||||
console.log("юрл - ", messageUrl)
|
||||
if (messageUrl === undefined){
|
||||
messageUrl = null
|
||||
}
|
||||
if (messageText.trim() !== '') {
|
||||
socket.send(JSON.stringify({'message':messageText,"image_url": messageUrl}));
|
||||
if (messageText.trim() !== '' || messageUrl != null) {
|
||||
socket.send(JSON.stringify({ message: messageText, image_url: messageUrl }));
|
||||
messageText = '';
|
||||
}}
|
||||
}
|
||||
}
|
||||
|
||||
let textarea;
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ const updateTextareaSize = () => {
|
|||
// Устанавливаем высоту textarea на основе количества строк
|
||||
textarea.style.height = 'auto'; // Сбрасываем высоту на auto перед измерением
|
||||
textarea.style.height = `${textarea.scrollHeight}px`;
|
||||
console.log(textarea.style.height)
|
||||
console.log(textarea.style.height);
|
||||
};
|
||||
|
||||
function handleKeyPress(event) {
|
||||
|
|
@ -67,55 +67,69 @@ function handleKeyPress(event) {
|
|||
sendMessage(event);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<body class="backgroundPic">
|
||||
|
||||
<div class="DivHeader"><Header /></div>
|
||||
<div>жопа2</div>
|
||||
<div class="divChat">
|
||||
|
||||
<div class="chatBox">
|
||||
|
||||
{#each messages as message}
|
||||
<div class="MsgAll">
|
||||
<img class="MsgAva" src="{message.avatar_image}" alt="ава">
|
||||
<img class="MsgAva" src={message.avatar_image} alt="ава" />
|
||||
<div class="divMessage">
|
||||
<div class="userFiled">
|
||||
<h3 class="MsgName">{message.username}</h3>
|
||||
<Time relative timestamp="{message.created_at}" ></Time>
|
||||
<Time relative timestamp={message.created_at}></Time>
|
||||
</div>
|
||||
|
||||
<p class="MsgMsg">{message.message}</p>
|
||||
|
||||
{#if message.image_url != null}
|
||||
<img class="MsgPic" src="{message.image_url}" alt="">
|
||||
<img class="MsgPic" src={message.image_url} alt="" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
</div>
|
||||
|
||||
<form class="chatSend" on:submit={sendMessage}>
|
||||
<textarea
|
||||
placeholder="Введите сообщение" maxlength="2000" class="chatInput"
|
||||
rows="1" bind:this={textarea} on:input={updateTextareaSize}
|
||||
type="text" bind:value={messageText} on:keypress={handleKeyPress}
|
||||
placeholder="Введите сообщение"
|
||||
maxlength="2000"
|
||||
class="chatInput"
|
||||
rows="1"
|
||||
bind:this={textarea}
|
||||
on:input={updateTextareaSize}
|
||||
type="text"
|
||||
bind:value={messageText}
|
||||
on:keypress={handleKeyPress}
|
||||
></textarea>
|
||||
<input id="fileInput" type="file" accept="image/*" bind:value={messagePic}>
|
||||
<div class="fileInputDiv">
|
||||
<input name="file" id="file" type="file" accept="image/*" bind:value={messagePic} />
|
||||
<label class="attachingImages" for="file"><img src="./attachment.svg" alt=""></label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>жопа4</div>
|
||||
<div>жопа5</div>
|
||||
<div>жопа6</div>
|
||||
<div>жопа7</div>
|
||||
|
||||
</body>
|
||||
|
||||
<style>
|
||||
|
||||
.attachingImages{
|
||||
display: flex;
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#file{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.userFiled {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -155,13 +169,9 @@ function handleKeyPress(event) {
|
|||
|
||||
margin: 3px;
|
||||
transform: translate(90deg);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.chatBox {
|
||||
|
||||
display: flex;
|
||||
flex: 30;
|
||||
flex-direction: column-reverse;
|
||||
|
|
@ -170,13 +180,12 @@ function handleKeyPress(event) {
|
|||
overflow-y: auto;
|
||||
width: 100%;
|
||||
|
||||
|
||||
/* From https://css.glass */
|
||||
background-color: rgba(255, 255, 255, 0.20);
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 30px rgb(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(7px);
|
||||
border: 1px solid rgba(255,255,255,0.43)
|
||||
border: 1px solid rgba(255, 255, 255, 0.43);
|
||||
}
|
||||
|
||||
.DivHeader {
|
||||
|
|
@ -222,12 +231,11 @@ body > *{
|
|||
grid-column: span 3;
|
||||
grid-row: span 3;
|
||||
|
||||
background-color: #563E89;
|
||||
background-color: #563e89;
|
||||
background-image: url(./BPytka.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50vh;
|
||||
background-position-x: 50%;
|
||||
background-position-y: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
17
static/attachment.svg
Normal file
17
static/attachment.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
|
||||
<title>attachment-2</title>
|
||||
<desc>Created with Sketch Beta.</desc>
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-258.000000, -154.000000)" fill="#000000">
|
||||
<path d="M284.562,164.181 L270.325,178.26 C267.966,180.593 264.141,180.593 261.782,178.26 C259.423,175.928 259.423,172.146 261.782,169.813 L274.596,157.141 C276.168,155.586 278.718,155.586 280.291,157.141 C281.863,158.696 281.863,161.218 280.291,162.772 L267.477,175.444 C266.691,176.222 265.416,176.222 264.629,175.444 C263.843,174.667 263.843,173.406 264.629,172.628 L276.02,161.365 L274.596,159.957 L263.206,171.221 C261.633,172.775 261.633,175.297 263.206,176.853 C264.778,178.407 267.328,178.407 268.901,176.852 L281.714,164.181 C284.073,161.849 284.074,158.065 281.715,155.733 C279.355,153.4 275.531,153.4 273.172,155.733 L259.646,169.108 L259.696,169.157 C257.238,172.281 257.455,176.797 260.358,179.668 C263.262,182.539 267.828,182.754 270.987,180.323 L271.036,180.372 L285.986,165.589 L284.562,164.181" id="attachment-2" sketch:type="MSShapeGroup">
|
||||
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Add table
Reference in a new issue