uniknow/chat_front_svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

добавил кнопку для прикрепления картинки к сообщению

Browse source
This commit is contained in:
UNIKNOW 2024-03-03 00:11:17 +04:00
parent f3143c7532
commit 30f4a51707
2 changed files with 217 additions and 192 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
src/routes/chatPage/+page.svelte
View file

@ -1,56 +1,56 @@
<script> <script>
import Header from '../Header.svelte'; import Header from '../Header.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Time from "svelte-time"; import Time from 'svelte-time';
import { dayjs } from "svelte-time"; import { dayjs } from 'svelte-time';
import 'dayjs/locale/ru'; import 'dayjs/locale/ru';
import { UserCheck, getLastMessages, MessagePicToUrl } from '$lib/userFunction.js'; import { UserCheck, getLastMessages, MessagePicToUrl } from '$lib/userFunction.js';
import createWebSocket from '$lib/websocket'; import createWebSocket from '$lib/websocket';
dayjs.locale("ru"); dayjs.locale('ru');
console.clear(); console.clear();
let userId let userId; //пользователь, который залогинен
let socket let socket; //вебсокет
let messages = [];
let messageText = '';
let messagePic;
let messages = []; //массив сообщений, которые отображаются на сайте
let messageText = ''; //сообщения для отправки
let messagePic; //картинка для отправки
onMount(async () => { onMount(async () => {
const userData = await UserCheck(); const userData = await UserCheck();
let userId = userData.id; let userId = userData.id;
let chatId = 2 let chatId = 2;
const websocketUrl = `ws://localhost:8000/api/chat/ws/${chatId}?user_id=${userId}`; const websocketUrl = `ws://localhost:8000/api/chat/ws/${chatId}?user_id=${userId}`;
messages = await getLastMessages(); messages = await getLastMessages();
socket = createWebSocket(websocketUrl, (message) => { socket = createWebSocket(websocketUrl, (message) => {
messages = [message, ...messages];
messages = [message, ...messages]
}); });
}); });
async function uploadImages() { async function uploadImages() {
const fileInput = document.getElementById('file');
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0]; const file = fileInput.files[0];
let urlpic = await MessagePicToUrl(file) let urlpic;
return urlpic if (file) {
urlpic = await MessagePicToUrl(file);
} else {
urlpic = null;
}
fileInput.value = null;
return urlpic;
} }
async function sendMessage() { async function sendMessage() {
let messageUrl = await uploadImages();
let messageUrl = await uploadImages() if (messageText.trim() !== '' || messageUrl != null) {
console.log("юрл - ", messageUrl) socket.send(JSON.stringify({ message: messageText, image_url: messageUrl }));
if (messageUrl === undefined){
messageUrl = null
}
if (messageText.trim() !== '') {
socket.send(JSON.stringify({'message':messageText,"image_url": messageUrl}));
messageText = ''; messageText = '';
}} }
}
let textarea; let textarea;
@ -58,7 +58,7 @@ const updateTextareaSize = () => {
// Устанавливаем высоту textarea на основе количества строк // Устанавливаем высоту textarea на основе количества строк
textarea.style.height = 'auto'; // Сбрасываем высоту на auto перед измерением textarea.style.height = 'auto'; // Сбрасываем высоту на auto перед измерением
textarea.style.height = `${textarea.scrollHeight}px`; textarea.style.height = `${textarea.scrollHeight}px`;
console.log(textarea.style.height) console.log(textarea.style.height);
}; };
function handleKeyPress(event) { function handleKeyPress(event) {
@ -67,55 +67,69 @@ function handleKeyPress(event) {
sendMessage(event); sendMessage(event);
} }
} }
</script> </script>
<body class="backgroundPic"> <body class="backgroundPic">
<div class="DivHeader"><Header /></div> <div class="DivHeader"><Header /></div>
<div>жопа2</div> <div>жопа2</div>
<div class="divChat"> <div class="divChat">
<div class="chatBox"> <div class="chatBox">
{#each messages as message} {#each messages as message}
<div class="MsgAll"> <div class="MsgAll">
<img class="MsgAva" src="{message.avatar_image}" alt="ава"> <img class="MsgAva" src={message.avatar_image} alt="ава" />
<div class="divMessage"> <div class="divMessage">
<div class="userFiled"> <div class="userFiled">
<h3 class="MsgName">{message.username}</h3> <h3 class="MsgName">{message.username}</h3>
<Time relative timestamp="{message.created_at}" ></Time> <Time relative timestamp={message.created_at}></Time>
</div> </div>
<p class="MsgMsg">{message.message}</p> <p class="MsgMsg">{message.message}</p>
{#if message.image_url != null} {#if message.image_url != null}
<img class="MsgPic" src="{message.image_url}" alt=""> <img class="MsgPic" src={message.image_url} alt="" />
{/if} {/if}
</div> </div>
</div> </div>
{/each} {/each}
</div> </div>
<form class="chatSend" on:submit={sendMessage}> <form class="chatSend" on:submit={sendMessage}>
<textarea <textarea
placeholder="Введите сообщение" maxlength="2000" class="chatInput" placeholder="Введите сообщение"
rows="1" bind:this={textarea} on:input={updateTextareaSize} maxlength="2000"
type="text" bind:value={messageText} on:keypress={handleKeyPress} class="chatInput"
rows="1"
bind:this={textarea}
on:input={updateTextareaSize}
type="text"
bind:value={messageText}
on:keypress={handleKeyPress}
></textarea> ></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> </form>
</div> </div>
<div>жопа4</div> <div>жопа4</div>
<div>жопа5</div> <div>жопа5</div>
<div>жопа6</div> <div>жопа6</div>
<div>жопа7</div> <div>жопа7</div>
</body> </body>
<style> <style>
.attachingImages{
display: flex;
width: 10vw;
height: 10vw;
background-color: rgba(255, 255, 255, 0.1);
}
#file{
display: none;
}
.userFiled { .userFiled {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -155,13 +169,9 @@ function handleKeyPress(event) {
margin: 3px; margin: 3px;
transform: translate(90deg); transform: translate(90deg);
} }
.chatBox { .chatBox {
display: flex; display: flex;
flex: 30; flex: 30;
flex-direction: column-reverse; flex-direction: column-reverse;
@ -170,13 +180,12 @@ function handleKeyPress(event) {
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
/* From https://css.glass */ /* From https://css.glass */
background-color: rgba(255, 255, 255, 0.20); background-color: rgba(255, 255, 255, 0.2);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 4px 30px rgb(0, 0, 0, 0.5); box-shadow: 0 4px 30px rgb(0, 0, 0, 0.5);
backdrop-filter: blur(7px); backdrop-filter: blur(7px);
border: 1px solid rgba(255,255,255,0.43) border: 1px solid rgba(255, 255, 255, 0.43);
} }
.DivHeader { .DivHeader {
@ -222,12 +231,11 @@ body > *{
grid-column: span 3; grid-column: span 3;
grid-row: span 3; grid-row: span 3;
background-color: #563E89; background-color: #563e89;
background-image: url(./BPytka.png); background-image: url(./BPytka.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 50vh; background-size: 50vh;
background-position-x: 50%; background-position-x: 50%;
background-position-y: 50%; background-position-y: 50%;
} }
</style> </style>

17
static/attachment.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB