шум в чате, небольшой рефактор названий, визуал в сетингах
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){
|
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',
|
method:'GET',
|
||||||
credentials:'include'
|
credentials:'include'
|
||||||
})
|
})
|
||||||
|
|
||||||
if(response.ok)
|
if(response.ok){
|
||||||
{
|
|
||||||
let msgMassive = await response.json();
|
let msgMassive = await response.json();
|
||||||
let localTime
|
let localTime
|
||||||
for(let i = 0; i < msgMassive.length; i++){
|
for(let i = 0; i < msgMassive.length; i++){
|
||||||
|
|
@ -27,11 +26,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
else if(response.status === 404){
|
else if(response.status === 404){
|
||||||
let msg = [];
|
console.log(response)
|
||||||
return msg
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
else if(!response.ok)
|
else if(!response.ok)
|
||||||
console.log(response.status)
|
console.log(response.status)
|
||||||
|
|
||||||
|
|
@ -149,7 +146,8 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
return await response.json();
|
let jopa = await response.json();
|
||||||
|
return jopa.image_url
|
||||||
} else {
|
} else {
|
||||||
console.log(response);
|
console.log(response);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -22,10 +22,10 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<div class="avatarDiv">
|
<a href="chat" class="avatarDiv">
|
||||||
<img class="siteAvatar" src="./BP-NEON.png" alt="лого" />
|
<img class="siteAvatar" src="./BP-NEON.png" alt="лого" />
|
||||||
<h2>BP Chat</h2>
|
<h2>BP Chat</h2>
|
||||||
</div>
|
</a>
|
||||||
|
|
||||||
<div class="userUser">
|
<div class="userUser">
|
||||||
<button
|
<button
|
||||||
|
|
@ -35,14 +35,14 @@
|
||||||
on:click={dropDown}
|
on:click={dropDown}
|
||||||
>
|
>
|
||||||
<h3>{Nickname}</h3>
|
<h3>{Nickname}</h3>
|
||||||
<div><img class="userAvatar" src={userImage} alt="аватарка" /></div>
|
<div><img class="userAvatar" src={userImage} alt="аватарка"/></div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{#if isOpen}
|
{#if isOpen}
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<button class="listItem">Профиль</button>
|
<a href="/profile" class="listItem">Профиль</a>
|
||||||
<button class="listItem">Настройки</button>
|
<a href="/settings" class="listItem">Настройки</a>
|
||||||
<button on:click={handleLogout} class="listItem">Выйти</button>
|
<a on:click={handleLogout} class="listItem">Выйти</a>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -62,6 +62,7 @@
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
|
@ -84,6 +85,7 @@
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttonUser {
|
.buttonUser {
|
||||||
|
|
@ -116,7 +118,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem {
|
.listItem {
|
||||||
|
text-decoration: none;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 20px white;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-bottom: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatarDiv {
|
.avatarDiv {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,127 @@
|
||||||
<script>
|
<script>
|
||||||
import Header from '../Header.svelte';
|
import Header from './../Header.svelte';
|
||||||
</script>
|
</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 { UserCheck } from '$lib/userFunction'
|
||||||
import Header from '../Header.svelte';
|
import Header from '../Header.svelte';
|
||||||
import createWebSocket from '$lib/websocket';
|
import createWebSocket from '$lib/websocket';
|
||||||
import { onMount } from 'svelte';
|
import { onMount, tick } 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';
|
||||||
|
|
@ -28,9 +28,11 @@
|
||||||
let chats = [] //массив чатов, доступных юзеру
|
let chats = [] //массив чатов, доступных юзеру
|
||||||
let pinnedMsg = []
|
let pinnedMsg = []
|
||||||
let chatId = null
|
let chatId = null
|
||||||
|
let scrollableDiv;
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
|
|
||||||
|
|
||||||
const userData = await UserCheck();
|
const userData = await UserCheck();
|
||||||
userId = userData.id;
|
userId = userData.id;
|
||||||
if(userId === undefined)
|
if(userId === undefined)
|
||||||
|
|
@ -48,7 +50,10 @@
|
||||||
const websocketUrl = `ws://localhost:8000/api/chat/ws/${chatId}?user_id=${userId}`
|
const websocketUrl = `ws://localhost:8000/api/chat/ws/${chatId}?user_id=${userId}`
|
||||||
console.log(messages)
|
console.log(messages)
|
||||||
messages = await getLastMessages(chatId,msgLoaded)
|
messages = await getLastMessages(chatId,msgLoaded)
|
||||||
|
setTimeout(scrollDown,50)
|
||||||
|
msgLoaded += 15
|
||||||
pinnedMsg = await getPinnedMsg(chatId)
|
pinnedMsg = await getPinnedMsg(chatId)
|
||||||
|
console.log(messages.length)
|
||||||
|
|
||||||
console.log(pinnedMsg, " pinned")
|
console.log(pinnedMsg, " pinned")
|
||||||
console.log(messages, " сообщения")
|
console.log(messages, " сообщения")
|
||||||
|
|
@ -71,6 +76,7 @@
|
||||||
else{
|
else{
|
||||||
|
|
||||||
messages = [...messages, message]
|
messages = [...messages, message]
|
||||||
|
setTimeout(scrollDown,50)
|
||||||
}
|
}
|
||||||
console.log(message, "пришло сообщение")
|
console.log(message, "пришло сообщение")
|
||||||
})
|
})
|
||||||
|
|
@ -92,7 +98,7 @@
|
||||||
|
|
||||||
socket.send(JSON.stringify({flag: flag,
|
socket.send(JSON.stringify({flag: flag,
|
||||||
message: messageText,
|
message: messageText,
|
||||||
image_url: image_url,
|
image_url: image,
|
||||||
answer: answer }));
|
answer: answer }));
|
||||||
messageText = ""
|
messageText = ""
|
||||||
imageFile = undefined
|
imageFile = undefined
|
||||||
|
|
@ -153,6 +159,7 @@ function helperDivShow(event, id) {
|
||||||
helperDiv.style.opacity = "1";
|
helperDiv.style.opacity = "1";
|
||||||
helperDiv.style.left = `${x}px`;
|
helperDiv.style.left = `${x}px`;
|
||||||
helperDiv.style.top = `${y}px`;
|
helperDiv.style.top = `${y}px`;
|
||||||
|
console.log(x," ", y)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -213,14 +220,30 @@ function helperDivShow(event, id) {
|
||||||
|
|
||||||
function handleFileChange(event) {
|
function handleFileChange(event) {
|
||||||
const file = event.target.files[0];
|
const file = event.target.files[0];
|
||||||
|
image_url = file
|
||||||
if (file) {
|
if (file) {
|
||||||
const reader = new FileReader();
|
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;
|
imageFile = e.target.result;
|
||||||
imageShow = true;
|
imageShow = true;
|
||||||
image_url = imageFile
|
image_url = imageFile
|
||||||
};
|
};
|
||||||
reader.readAsDataURL(file);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -230,6 +253,34 @@ function helperDivShow(event, id) {
|
||||||
image_url = null
|
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>
|
</script>
|
||||||
|
|
||||||
<svelte:window on:click={hideHelperDiv} />
|
<svelte:window on:click={hideHelperDiv} />
|
||||||
|
|
@ -260,6 +311,13 @@ function helperDivShow(event, id) {
|
||||||
|
|
||||||
<div class="chatDiv">
|
<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))}
|
{#if ((chatId != null) && (messages.length === 0))}
|
||||||
<div class="noMsgDiv">
|
<div class="noMsgDiv">
|
||||||
<h2 class="noMsg1">В этом чате еще нет сообщений.</h2>
|
<h2 class="noMsg1">В этом чате еще нет сообщений.</h2>
|
||||||
|
|
@ -267,7 +325,7 @@ function helperDivShow(event, id) {
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="msgDiv">
|
<div class="msgDiv" bind:this={scrollableDiv} on:scroll={handleScroll}>
|
||||||
{#each messages as message}
|
{#each messages as message}
|
||||||
<div class="messageMain">
|
<div class="messageMain">
|
||||||
<img class="messageAvatar" src="{message.avatar_image}" alt="ава">
|
<img class="messageAvatar" src="{message.avatar_image}" alt="ава">
|
||||||
|
|
@ -294,12 +352,6 @@ function helperDivShow(event, id) {
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</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)}
|
{#if (chatId != null)}
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||||
|
|
@ -325,7 +377,7 @@ function helperDivShow(event, id) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input type="file" accept=".png, .jpeg, .jpg" id="fileInput"
|
<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>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
@ -479,7 +531,8 @@ function helperDivShow(event, id) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.helperDiv{
|
.helperDiv{
|
||||||
position: absolute;
|
|
||||||
|
position: fixed;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
height: 90px;
|
height: 90px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
|
@ -627,6 +680,7 @@ padding-bottom: 10px;
|
||||||
|
|
||||||
.headerDiv{
|
.headerDiv{
|
||||||
grid-column: span 3;
|
grid-column: span 3;
|
||||||
|
z-index: 69;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient{
|
.gradient{
|
||||||
|
|
@ -642,6 +696,20 @@ padding-bottom: 10px;
|
||||||
align-self: center; /* Центрируем по вертикали */
|
align-self: center; /* Центрируем по вертикали */
|
||||||
justify-content: center; /* Центрируем по горизонтали */
|
justify-content: center; /* Центрируем по горизонтали */
|
||||||
margin: auto;
|
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{
|
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