diff --git a/src/lib/chat.js b/src/lib/chat.js index 5cc2c94..381dfa9 100644 --- a/src/lib/chat.js +++ b/src/lib/chat.js @@ -1,41 +1,38 @@ export async function getLastMessages(chatId,msgLoaded){ - const response = await fetch(`http://localhost:8000/api/chat/get_some_messages/${chatId}?messages_loaded=${msgLoaded}&messages_to_get=14`, + const response = await fetch(`http://localhost:8000/api/chat/get_some_messages/${chatId}?messages_loaded=${msgLoaded}&messages_to_get=15`, { method:'GET', credentials:'include' }) - if(response.ok) - { + if(response.ok){ let msgMassive = await response.json(); let localTime for(let i = 0; i < msgMassive.length; i++){ localTime = new Date(msgMassive[i].created_at) msgMassive[i].created_at = localTime - if(msgMassive[i].answer_id != null){ + if(msgMassive[i].answer_id != null){ let answer = await getMessageById(chatId,msgMassive[i].answer_id) msgMassive[i].answerMessage = answer.message //console.log(answer.message) - } + } } msgMassive.reverse(); return msgMassive } - else if(response.status === 404){ - let msg = []; - return msg + else if(response.status === 404){ + console.log(response) } - else if(!response.ok) console.log(response.status) - - } + + } export async function getMessageById(chatId,msgId){ @@ -149,7 +146,8 @@ }); if (response.ok) { - return await response.json(); + let jopa = await response.json(); + return jopa.image_url } else { console.log(response); } diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte index 4baa613..8eee7c4 100644 --- a/src/routes/Header.svelte +++ b/src/routes/Header.svelte @@ -22,10 +22,10 @@
-
+ лого

BP Chat

-
+
{#if isOpen}
- - - + Профиль + Настройки + Выйти
{/if}
@@ -62,6 +62,7 @@ border-bottom: 0; border-top-right-radius: 0; border-top-left-radius: 0; + } header { @@ -84,6 +85,7 @@ border-top-right-radius: 0; border-top-left-radius: 0; margin-top: -1px; + text-decoration: none; } .buttonUser { @@ -116,7 +118,14 @@ } .listItem { + text-decoration: none; font-size: 16px; + color: white; + text-shadow: 0 0 20px white; + background: transparent; + border: 0; + padding-left: 5px; + padding-bottom: 3px; } .avatarDiv { diff --git a/src/routes/Settings/+page.svelte b/src/routes/Settings/+page.svelte index 76cbd3c..c81c110 100644 --- a/src/routes/Settings/+page.svelte +++ b/src/routes/Settings/+page.svelte @@ -1,5 +1,127 @@ -
\ No newline at end of file + +
+ +
+ +
+ +
+
+ +
+
+

Изменение данных

+
+
пинчи
+
данные
+
+
+ + +
+
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte index 4291d89..463127c 100644 --- a/src/routes/chat/+page.svelte +++ b/src/routes/chat/+page.svelte @@ -3,7 +3,7 @@ import { UserCheck } from '$lib/userFunction' import Header from '../Header.svelte'; import createWebSocket from '$lib/websocket'; - import { onMount } from 'svelte'; + import { onMount, tick } from 'svelte'; import Time from 'svelte-time'; import { dayjs } from 'svelte-time'; import 'dayjs/locale/ru'; @@ -28,9 +28,11 @@ let chats = [] //массив чатов, доступных юзеру let pinnedMsg = [] let chatId = null + let scrollableDiv; onMount(async () => { - + + const userData = await UserCheck(); userId = userData.id; if(userId === undefined) @@ -48,7 +50,10 @@ const websocketUrl = `ws://localhost:8000/api/chat/ws/${chatId}?user_id=${userId}` console.log(messages) messages = await getLastMessages(chatId,msgLoaded) + setTimeout(scrollDown,50) + msgLoaded += 15 pinnedMsg = await getPinnedMsg(chatId) + console.log(messages.length) console.log(pinnedMsg, " pinned") console.log(messages, " сообщения") @@ -71,6 +76,7 @@ else{ messages = [...messages, message] + setTimeout(scrollDown,50) } console.log(message, "пришло сообщение") }) @@ -92,7 +98,7 @@ socket.send(JSON.stringify({flag: flag, message: messageText, - image_url: image_url, + image_url: image, answer: answer })); messageText = "" imageFile = undefined @@ -153,6 +159,7 @@ function helperDivShow(event, id) { helperDiv.style.opacity = "1"; helperDiv.style.left = `${x}px`; helperDiv.style.top = `${y}px`; + console.log(x," ", y) } @@ -213,14 +220,30 @@ function helperDivShow(event, id) { function handleFileChange(event) { const file = event.target.files[0]; + image_url = file if (file) { const reader = new FileReader(); - reader.onload = (e) => { + reader.onloadend = (e) => { + + imageFile = e.target.result; + imageShow = true; + }; + reader.readAsDataURL(file); + } + } + + //афк + function handleFileChangeCopy(event) { + const file = event.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onloadend = (e) => { + imageFile = e.target.result; imageShow = true; image_url = imageFile }; - reader.readAsDataURL(file); + } } @@ -230,6 +253,34 @@ function helperDivShow(event, id) { image_url = null } + async function handleScroll(event) { + const { scrollTop, scrollHeight, clientHeight } = event.target + console.log(scrollHeight, ";" ) + if (scrollTop === 0) { // если прокрутка достигла верхней части + console.log("конец") + + const previousScrollHeight = scrollHeight + + + let newMessages = await getLastMessages(chatId,msgLoaded) + console.log(newMessages, "new msg") + messages = [...newMessages, ...messages] + msgLoaded += newMessages.length + + + requestAnimationFrame(() => { + const differentScrollHeight = scrollHeight - previousScrollHeight + console.log(differentScrollHeight, "нынешняя", previousScrollHeight, "предыдущая", scrollHeight, "ныняшняя") + scrollableDiv.scrollTop = differentScrollHeight + console.log(differentScrollHeight) + }) + } + } + + function scrollDown(){ + scrollableDiv.scrollTop = scrollableDiv.scrollHeight; + } + @@ -260,6 +311,13 @@ function helperDivShow(event, id) {
+ +
event.preventDefault()}> + + + +
+ {#if ((chatId != null) && (messages.length === 0))}

В этом чате еще нет сообщений.

@@ -267,7 +325,7 @@ function helperDivShow(event, id) {
{/if} -
+
{#each messages as message}
ава @@ -294,12 +352,6 @@ function helperDivShow(event, id) {
{/each}
- -
event.preventDefault()}> - - - -
{#if (chatId != null)} @@ -325,7 +377,7 @@ function helperDivShow(event, id) {
+ on:change={handleFileChange} style="display: none;">
{/if} @@ -479,7 +531,8 @@ function helperDivShow(event, id) { } .helperDiv{ - position: absolute; + + position: fixed; width: 160px; height: 90px; padding: 5px; @@ -627,6 +680,7 @@ padding-bottom: 10px; .headerDiv{ grid-column: span 3; + z-index: 69; } .gradient{ @@ -642,6 +696,20 @@ padding-bottom: 10px; align-self: center; /* Центрируем по вертикали */ justify-content: center; /* Центрируем по горизонтали */ margin: auto; + border-bottom: 0; + position: relative; +} + +.gradient::before{ + content: ''; + position: absolute; + background-image: url('./noise.png'); + background-repeat: repeat; + width: 100%; + height: 100%; + border-radius: 15px; + opacity: 0.01; + pointer-events: none; } body{ diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte new file mode 100644 index 0000000..e69de29