добавил кнопку для прикрепления картинки к сообщению
This commit is contained in:
parent
f3143c7532
commit
30f4a51707
2 changed files with 217 additions and 192 deletions
|
|
@ -1,233 +1,241 @@
|
|||
<script>
|
||||
import Header from '../Header.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
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");
|
||||
console.clear();
|
||||
import Header from '../Header.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
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';
|
||||
|
||||
let userId
|
||||
let socket
|
||||
let messages = [];
|
||||
let messageText = '';
|
||||
let messagePic;
|
||||
dayjs.locale('ru');
|
||||
console.clear();
|
||||
|
||||
|
||||
|
||||
onMount(async() => {
|
||||
const userData = await UserCheck();
|
||||
let userId = userData.id;
|
||||
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]
|
||||
});
|
||||
});
|
||||
let userId; //пользователь, который залогинен
|
||||
let socket; //вебсокет
|
||||
|
||||
async function uploadImages(){
|
||||
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const file = fileInput.files[0];
|
||||
let urlpic = await MessagePicToUrl(file)
|
||||
return urlpic
|
||||
}
|
||||
let messages = []; //массив сообщений, которые отображаются на сайте
|
||||
let messageText = ''; //сообщения для отправки
|
||||
let messagePic; //картинка для отправки
|
||||
|
||||
async function sendMessage() {
|
||||
onMount(async () => {
|
||||
const userData = await UserCheck();
|
||||
let userId = userData.id;
|
||||
let chatId = 2;
|
||||
const websocketUrl = `ws://localhost:8000/api/chat/ws/${chatId}?user_id=${userId}`;
|
||||
|
||||
let messageUrl = await uploadImages()
|
||||
console.log("юрл - ", messageUrl)
|
||||
if (messageUrl === undefined){
|
||||
messageUrl = null
|
||||
}
|
||||
if (messageText.trim() !== '') {
|
||||
socket.send(JSON.stringify({'message':messageText,"image_url": messageUrl}));
|
||||
messageText = '';
|
||||
}}
|
||||
messages = await getLastMessages();
|
||||
|
||||
let textarea;
|
||||
socket = createWebSocket(websocketUrl, (message) => {
|
||||
messages = [message, ...messages];
|
||||
});
|
||||
});
|
||||
|
||||
const updateTextareaSize = () => {
|
||||
// Устанавливаем высоту textarea на основе количества строк
|
||||
textarea.style.height = 'auto'; // Сбрасываем высоту на auto перед измерением
|
||||
textarea.style.height = `${textarea.scrollHeight}px`;
|
||||
console.log(textarea.style.height)
|
||||
};
|
||||
async function uploadImages() {
|
||||
const fileInput = document.getElementById('file');
|
||||
const file = fileInput.files[0];
|
||||
let urlpic;
|
||||
if (file) {
|
||||
urlpic = await MessagePicToUrl(file);
|
||||
} else {
|
||||
urlpic = null;
|
||||
}
|
||||
fileInput.value = null;
|
||||
return urlpic;
|
||||
}
|
||||
|
||||
function handleKeyPress(event) {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
// Если нажат Enter и не нажат Shift, отправляем сообщение
|
||||
sendMessage(event);
|
||||
}
|
||||
}
|
||||
async function sendMessage() {
|
||||
let messageUrl = await uploadImages();
|
||||
|
||||
|
||||
if (messageText.trim() !== '' || messageUrl != null) {
|
||||
socket.send(JSON.stringify({ message: messageText, image_url: messageUrl }));
|
||||
messageText = '';
|
||||
}
|
||||
}
|
||||
|
||||
let textarea;
|
||||
|
||||
const updateTextareaSize = () => {
|
||||
// Устанавливаем высоту textarea на основе количества строк
|
||||
textarea.style.height = 'auto'; // Сбрасываем высоту на auto перед измерением
|
||||
textarea.style.height = `${textarea.scrollHeight}px`;
|
||||
console.log(textarea.style.height);
|
||||
};
|
||||
|
||||
function handleKeyPress(event) {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
// Если нажат Enter и не нажат Shift, отправляем сообщение
|
||||
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="ава">
|
||||
<div class="divMessage">
|
||||
<div class="userFiled">
|
||||
<h3 class="MsgName">{message.username}</h3>
|
||||
<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="">
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<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="ава" />
|
||||
<div class="divMessage">
|
||||
<div class="userFiled">
|
||||
<h3 class="MsgName">{message.username}</h3>
|
||||
<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="" />
|
||||
{/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}
|
||||
></textarea>
|
||||
<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 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}
|
||||
></textarea>
|
||||
<input id="fileInput" type="file" accept="image/*" bind:value={messagePic}>
|
||||
</form>
|
||||
</div>
|
||||
<div>жопа4</div>
|
||||
<div>жопа5</div>
|
||||
<div>жопа6</div>
|
||||
<div>жопа7</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div>жопа4</div>
|
||||
<div>жопа5</div>
|
||||
<div>жопа6</div>
|
||||
<div>жопа7</div>
|
||||
</body>
|
||||
|
||||
<style>
|
||||
|
||||
.userFiled{
|
||||
display: flex;
|
||||
justify-content:flex-start;
|
||||
}
|
||||
.MsgName{
|
||||
.attachingImages{
|
||||
display: flex;
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.MsgPic{
|
||||
margin-left: 1vw;
|
||||
margin-bottom: 1vh;
|
||||
width: 80%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
|
||||
#file{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.MsgAva{
|
||||
height: 6vh;
|
||||
min-height: 50px;
|
||||
width: auto;
|
||||
border: 2px solid rgba(255, 255, 255, 0.6);
|
||||
border-radius: 10px;
|
||||
margin: 0.25vw;
|
||||
}
|
||||
.userFiled {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.MsgName {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.MsgAll{
|
||||
display: flex;
|
||||
flex: 90;
|
||||
}
|
||||
.MsgPic {
|
||||
margin-left: 1vw;
|
||||
margin-bottom: 1vh;
|
||||
width: 80%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.divMessage{
|
||||
background-color:rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0px 30px rgba(0, 0, 0,0.2);
|
||||
.MsgAva {
|
||||
height: 6vh;
|
||||
min-height: 50px;
|
||||
width: auto;
|
||||
border: 2px solid rgba(255, 255, 255, 0.6);
|
||||
border-radius: 10px;
|
||||
margin: 0.25vw;
|
||||
}
|
||||
|
||||
margin: 3px;
|
||||
transform:translate(90deg);
|
||||
|
||||
}
|
||||
.MsgAll {
|
||||
display: flex;
|
||||
flex: 90;
|
||||
}
|
||||
|
||||
|
||||
.divMessage {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0px 30px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.chatBox{
|
||||
|
||||
display: flex;
|
||||
flex: 30;
|
||||
flex-direction:column-reverse;
|
||||
align-items:flex-start;
|
||||
margin: 3px;
|
||||
transform: translate(90deg);
|
||||
}
|
||||
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
|
||||
.chatBox {
|
||||
display: flex;
|
||||
flex: 30;
|
||||
flex-direction: column-reverse;
|
||||
align-items: flex-start;
|
||||
|
||||
/* From https://css.glass */
|
||||
background-color: rgba(255, 255, 255, 0.20);
|
||||
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)
|
||||
}
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
|
||||
.DivHeader{
|
||||
grid-column: 3 span;
|
||||
border: 0!important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* From https://css.glass */
|
||||
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);
|
||||
}
|
||||
|
||||
.chatSend{
|
||||
display: flex;
|
||||
flex: 2;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.DivHeader {
|
||||
grid-column: 3 span;
|
||||
border: 0 !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chatInput{
|
||||
width: 100%;
|
||||
resize: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.chatSend {
|
||||
display: flex;
|
||||
flex: 2;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.divChat{
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
.chatInput {
|
||||
width: 100%;
|
||||
resize: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body{
|
||||
display: grid;
|
||||
grid-template-columns: 25vw 50vw 25vw; /* 2 колонки с равным распределением ширины */
|
||||
grid-template-rows: 10vh 80vh 10vh;
|
||||
}
|
||||
.divChat {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body > *{
|
||||
border: 1px solid black;
|
||||
}
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 25vw 50vw 25vw; /* 2 колонки с равным распределением ширины */
|
||||
grid-template-rows: 10vh 80vh 10vh;
|
||||
}
|
||||
|
||||
*{
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
body > * {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.backgroundPic{
|
||||
grid-column: span 3;
|
||||
grid-row: span 3;
|
||||
* {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
background-color: #563E89;
|
||||
background-image: url(./BPytka.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size:50vh;
|
||||
background-position-x:50%;
|
||||
background-position-y:50%;
|
||||
}
|
||||
.backgroundPic {
|
||||
grid-column: span 3;
|
||||
grid-row: span 3;
|
||||
|
||||
</style>
|
||||
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