шум в чате, небольшой рефактор названий, визуал в сетингах
This commit is contained in:
parent
d1f22bcc3f
commit
68374a8890
5 changed files with 231 additions and 34 deletions
|
|
@ -1,13 +1,12 @@
|
|||
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++){
|
||||
|
|
@ -27,11 +26,9 @@
|
|||
}
|
||||
|
||||
else if(response.status === 404){
|
||||
let msg = [];
|
||||
return msg
|
||||
console.log(response)
|
||||
}
|
||||
|
||||
|
||||
else if(!response.ok)
|
||||
console.log(response.status)
|
||||
|
||||
|
|
@ -149,7 +146,8 @@
|
|||
});
|
||||
|
||||
if (response.ok) {
|
||||
return await response.json();
|
||||
let jopa = await response.json();
|
||||
return jopa.image_url
|
||||
} else {
|
||||
console.log(response);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,10 +22,10 @@
|
|||
</script>
|
||||
|
||||
<header>
|
||||
<div class="avatarDiv">
|
||||
<a href="chat" class="avatarDiv">
|
||||
<img class="siteAvatar" src="./BP-NEON.png" alt="лого" />
|
||||
<h2>BP Chat</h2>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="userUser">
|
||||
<button
|
||||
|
|
@ -35,14 +35,14 @@
|
|||
on:click={dropDown}
|
||||
>
|
||||
<h3>{Nickname}</h3>
|
||||
<div><img class="userAvatar" src={userImage} alt="аватарка" /></div>
|
||||
<div><img class="userAvatar" src={userImage} alt="аватарка"/></div>
|
||||
</button>
|
||||
|
||||
{#if isOpen}
|
||||
<div class="dropdown">
|
||||
<button class="listItem">Профиль</button>
|
||||
<button class="listItem">Настройки</button>
|
||||
<button on:click={handleLogout} class="listItem">Выйти</button>
|
||||
<a href="/profile" class="listItem">Профиль</a>
|
||||
<a href="/settings" class="listItem">Настройки</a>
|
||||
<a on:click={handleLogout} class="listItem">Выйти</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,127 @@
|
|||
<script>
|
||||
import Header from '../Header.svelte';
|
||||
import Header from './../Header.svelte';
|
||||
</script>
|
||||
|
||||
<Header />
|
||||
<body>
|
||||
<div class="header"> <Header/> </div>
|
||||
|
||||
<div class="mainDiv">
|
||||
|
||||
<div class="gradient">
|
||||
|
||||
<div class="division">
|
||||
<div class="buttonDiv">
|
||||
<button class="button">Аккаунт</button>
|
||||
</div>
|
||||
<div class="changingData">
|
||||
<h1>Изменение данных</h1>
|
||||
<div class="divisionChangingData">
|
||||
<div>пинчи</div>
|
||||
<div>данные</div>
|
||||
</div>
|
||||
<div class="finishButton">
|
||||
<button>Подтвердить</button>
|
||||
<button>Отменить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.button{
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
linear-gradient(#101010, #101010) padding-box,
|
||||
var(--gradient) border-box;
|
||||
border-radius: 15px;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
margin: 10px 0 0 10px;
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.buttonDiv{
|
||||
width: 20%;
|
||||
}
|
||||
.changingData{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
linear-gradient(#101010, #101010) padding-box,
|
||||
var(--gradient) border-box;
|
||||
border-radius: 15px;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
margin: 10px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.divisionChangingData{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.divisionChangingData > div{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.division{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.finishButton{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 10%;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.mainDiv{
|
||||
height: 90%;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.gradient{
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
linear-gradient(#101010, #101010) padding-box,
|
||||
var(--gradient) border-box;
|
||||
border-radius: 15px;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
|
||||
display: flex; /* Добавляем для центрирования по вертикали и горизонтали */
|
||||
align-self: center; /* Центрируем по вертикали */
|
||||
justify-content: center; /* Центрируем по горизонтали */
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body{
|
||||
display: flexbox;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:window on:click={hideHelperDiv} />
|
||||
|
|
@ -260,6 +311,13 @@ function helperDivShow(event, id) {
|
|||
|
||||
<div class="chatDiv">
|
||||
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div id="helperDiv" class="helperDiv" on:contextmenu={(event) => event.preventDefault()}>
|
||||
<button on:click={ansFunc} class="helpDiv"><img class="helpImg" src="./icon/answer.png" alt="ans"><p class="ans">Ответить</p></button>
|
||||
<button on:click={pinFunc} class="helpDiv"><img class="helpImg" src="./icon/pin.png" alt="pin"><p class="pin">Закрепить</p></button>
|
||||
<button on:click={delFunc} class="helpDiv"><img class="helpImg" src="./icon/trash.png" alt="del"><p class="del">Удалить</p></button>
|
||||
</div>
|
||||
|
||||
{#if ((chatId != null) && (messages.length === 0))}
|
||||
<div class="noMsgDiv">
|
||||
<h2 class="noMsg1">В этом чате еще нет сообщений.</h2>
|
||||
|
|
@ -267,7 +325,7 @@ function helperDivShow(event, id) {
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="msgDiv">
|
||||
<div class="msgDiv" bind:this={scrollableDiv} on:scroll={handleScroll}>
|
||||
{#each messages as message}
|
||||
<div class="messageMain">
|
||||
<img class="messageAvatar" src="{message.avatar_image}" alt="ава">
|
||||
|
|
@ -294,12 +352,6 @@ function helperDivShow(event, id) {
|
|||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div id="helperDiv" class="helperDiv" on:contextmenu={(event) => event.preventDefault()}>
|
||||
<button on:click={ansFunc} class="helpDiv"><img class="helpImg" src="./icon/answer.png" alt="ans"><p class="ans">Ответить</p></button>
|
||||
<button on:click={pinFunc} class="helpDiv"><img class="helpImg" src="./icon/pin.png" alt="pin"><p class="pin">Закрепить</p></button>
|
||||
<button on:click={delFunc} class="helpDiv"><img class="helpImg" src="./icon/trash.png" alt="del"><p class="del">Удалить</p></button>
|
||||
</div>
|
||||
|
||||
{#if (chatId != null)}
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
|
|
@ -325,7 +377,7 @@ function helperDivShow(event, id) {
|
|||
</div>
|
||||
|
||||
<input type="file" accept=".png, .jpeg, .jpg" id="fileInput"
|
||||
bind:this={imageFile} on:change={handleFileChange} style="display: none;">
|
||||
on:change={handleFileChange} style="display: none;">
|
||||
|
||||
</div>
|
||||
{/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{
|
||||
|
|
|
|||
0
src/routes/profile/+page.svelte
Normal file
0
src/routes/profile/+page.svelte
Normal file
Loading…
Add table
Reference in a new issue