сетинги и еще что то
This commit is contained in:
parent
442b292c09
commit
f8fa0a4f72
4 changed files with 316 additions and 17 deletions
|
|
@ -6,7 +6,7 @@
|
||||||
method:'GET',
|
method:'GET',
|
||||||
credentials:'include',
|
credentials:'include',
|
||||||
headers: {'accept': 'application/json',
|
headers: {'accept': 'application/json',
|
||||||
'Authorization': token,
|
'Authorization': token,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -20,6 +20,12 @@
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
msgMassive.reverse();
|
msgMassive.reverse();
|
||||||
|
let utc = msgMassive[0].created_at
|
||||||
|
console.log(utc)
|
||||||
|
let newutc = new Date(utc)
|
||||||
|
console.log(utc)
|
||||||
|
console.log(newutc)
|
||||||
|
|
||||||
return msgMassive
|
return msgMassive
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -33,7 +39,6 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export async function getMessageById(chatId,msgId){
|
export async function getMessageById(chatId,msgId){
|
||||||
|
|
||||||
let token = localStorage.getItem('BPChat')
|
let token = localStorage.getItem('BPChat')
|
||||||
|
|
|
||||||
16
src/lib/settings.js
Normal file
16
src/lib/settings.js
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
export async function getAvatarHistory(token){
|
||||||
|
|
||||||
|
let response = fetch(`https://docs.black-phoenix.ru/api/users/avatars`,{
|
||||||
|
method: 'GET',
|
||||||
|
credentials:'include',
|
||||||
|
headers: {'Authorization': token },
|
||||||
|
})
|
||||||
|
|
||||||
|
if(response.ok){
|
||||||
|
let data = await response.json();
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
console.log(response)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,8 +1,68 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { blur } from 'svelte/transition';
|
||||||
import Header from './../Header.svelte';
|
import Header from './../Header.svelte';
|
||||||
|
import { UserCheck } from '$lib/userFunction';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import { getAvatarHistory } from '$lib/settings'
|
||||||
|
|
||||||
|
let userName
|
||||||
|
let userEmail
|
||||||
|
let newAvatarVisualize
|
||||||
|
let avatarHistory
|
||||||
|
|
||||||
|
let newName = ""
|
||||||
|
let newEmail = ""
|
||||||
|
let newPassword = ""
|
||||||
|
let newAvatar = ""
|
||||||
|
|
||||||
|
let showSubmitFiled = false
|
||||||
|
onMount(async () => {
|
||||||
|
let token = localStorage.getItem('BPChat')
|
||||||
|
|
||||||
|
let userData = await UserCheck()
|
||||||
|
//console.log(userData)
|
||||||
|
avatarHistory = await getAvatarHistory(token)
|
||||||
|
console.log(avatarHistory)
|
||||||
|
userName = userData.username
|
||||||
|
userEmail = userData.email
|
||||||
|
console.log(`история аватарок ${avatarHistory}`)
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleFileChange(event) {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
newAvatar = file
|
||||||
|
if (file) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onloadend = (e) => {
|
||||||
|
|
||||||
|
newAvatarVisualize = e.target.result;
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function changingData(){
|
||||||
|
showSubmitFiled = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function Submit(){
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
{#if showSubmitFiled}
|
||||||
|
<div class="backgroundBlur"></div>
|
||||||
|
<div class="submitPassword">
|
||||||
|
<h2>Введите старый пароль</h2>
|
||||||
|
<input type="password" id="oldPassword" placeholder="Старый пароль">
|
||||||
|
<button on:click={Submit}>Отправить</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
<div class="header"> <Header/> </div>
|
<div class="header"> <Header/> </div>
|
||||||
|
|
||||||
<div class="mainDiv">
|
<div class="mainDiv">
|
||||||
|
|
@ -16,11 +76,33 @@
|
||||||
<div class="changingData">
|
<div class="changingData">
|
||||||
<h1>Изменение данных</h1>
|
<h1>Изменение данных</h1>
|
||||||
<div class="divisionChangingData">
|
<div class="divisionChangingData">
|
||||||
<div>пинчи</div>
|
<div class="avatarDiv">
|
||||||
<div>данные</div>
|
<h2>изменить аватарку</h2>
|
||||||
|
<button class="changeAvatar" on:click={() => document.getElementById('fileInput').click()}>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<input type="file" accept="image/*" id="fileInput"
|
||||||
|
on:change={handleFileChange} style="display: none;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="textDiv">
|
||||||
|
<div>
|
||||||
|
<h3>ник</h3>
|
||||||
|
<input type="text" placeholder={userName}>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>почта</h3>
|
||||||
|
<input type="text" placeholder={userEmail}>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>новый пароль</h2>
|
||||||
|
<input type="text" placeholder="новый пароль">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="finishButton">
|
<div class="finishButton">
|
||||||
<button>Подтвердить</button>
|
<button on:click={changingData}>Подтвердить</button>
|
||||||
<button>Отменить</button>
|
<button>Отменить</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -33,6 +115,111 @@
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
||||||
|
button{
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backgroundBlur{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#oldPassword{
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submitPassword{
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 69;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
width: 400px;
|
||||||
|
height: 600px;
|
||||||
|
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background:
|
||||||
|
linear-gradient(#101010, #101010) padding-box,
|
||||||
|
var(--gradient) border-box;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changeAvatar{
|
||||||
|
width: 75px;
|
||||||
|
height: 75px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background:
|
||||||
|
linear-gradient(#101010, #101010) padding-box,
|
||||||
|
var(--gradient) border-box;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatarDiv{
|
||||||
|
height: 60%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background:
|
||||||
|
linear-gradient(#101010, #101010) padding-box,
|
||||||
|
var(--gradient) border-box;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 80%;
|
||||||
|
height: 2em;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
box-shadow:
|
||||||
|
4px 4px 15px rgba($color: #5e2a83, $alpha: 0.38),
|
||||||
|
-4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
outline: none;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
transition: 0.5s ease-in;
|
||||||
|
box-shadow: 0 0 transparent;
|
||||||
|
}
|
||||||
|
input:not(:focus) {
|
||||||
|
transition: 0.5s ease-in-out;
|
||||||
|
box-shadow:
|
||||||
|
4px 4px 15px rgba($color: #5e2a83, $alpha: 0.38),
|
||||||
|
-4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
|
||||||
|
//background-repeat: no-repeat;
|
||||||
|
//background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textDiv{
|
||||||
|
height: 60%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
//background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
.button{
|
.button{
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
background:
|
background:
|
||||||
|
|
@ -66,12 +253,14 @@
|
||||||
.divisionChangingData{
|
.divisionChangingData{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divisionChangingData > div{
|
.divisionChangingData > div{
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 100%;
|
padding: 0 0 10% 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.division{
|
.division{
|
||||||
|
|
@ -92,10 +281,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainDiv{
|
.mainDiv{
|
||||||
|
position: relative;
|
||||||
height: 90%;
|
height: 90%;
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mainDiv::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;
|
||||||
|
}
|
||||||
|
|
||||||
.gradient{
|
.gradient{
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
background:
|
background:
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,9 @@
|
||||||
|
|
||||||
let answerMessage = ""
|
let answerMessage = ""
|
||||||
let answerMessageImg = ""
|
let answerMessageImg = ""
|
||||||
|
let currentChat;
|
||||||
|
let pickedChatName = ""
|
||||||
|
let pickedChatImg = ""
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
|
|
||||||
|
|
@ -51,9 +54,15 @@
|
||||||
async function handleChatUrlChange() {
|
async function handleChatUrlChange() {
|
||||||
// Проверяем, что текущий хэш соответствует шаблону для чата
|
// Проверяем, что текущий хэш соответствует шаблону для чата
|
||||||
if (window.location.hash.startsWith('#id=')) {
|
if (window.location.hash.startsWith('#id=')) {
|
||||||
|
|
||||||
chatId = window.location.hash.slice(4);
|
chatId = window.location.hash.slice(4);
|
||||||
msgLoaded = 0
|
msgLoaded = 0
|
||||||
console.log(chatId, " chatId", msgLoaded)
|
console.log(chatId, " chatId")
|
||||||
|
|
||||||
|
currentChat = chats.find(chat => chat.chat_id == chatId)
|
||||||
|
console.log(currentChat, " текущий чат")
|
||||||
|
pickedChatName = currentChat.chat_name
|
||||||
|
pickedChatImg = currentChat.avatar_image
|
||||||
|
|
||||||
messages = await getLastMessages(chatId,msgLoaded)
|
messages = await getLastMessages(chatId,msgLoaded)
|
||||||
setTimeout(scrollDown,50)
|
setTimeout(scrollDown,50)
|
||||||
|
|
@ -329,11 +338,14 @@ function helperDivShow(event, id, text, img, username) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
<div class="jopa">
|
||||||
|
|
||||||
<div class="gradient">
|
<div class="gradient">
|
||||||
|
|
||||||
|
|
||||||
<div class="chatDiv">
|
<div class="chatDiv">
|
||||||
|
|
||||||
|
<img class="backgroundYtka" src="BPytka.png" alt="">
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
<div id="helperDiv" class="helperDiv" on:contextmenu={(event) => event.preventDefault()}>
|
<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={ansFunc} class="helpDiv"><img class="helpImg" src="./icon/answer.png" alt="ans"><p class="ans">Ответить</p></button>
|
||||||
|
|
@ -359,7 +371,7 @@ function helperDivShow(event, id, text, img, username) {
|
||||||
<div class="nameAnswerDiv">
|
<div class="nameAnswerDiv">
|
||||||
<h3>{message.username}</h3>
|
<h3>{message.username}</h3>
|
||||||
{#if message.answer_message != null}
|
{#if message.answer_message != null}
|
||||||
<img src="./icon/answerMsg.png" alt="">
|
<img class="answerLogo" src="./icon/answerMsg.png" alt="разделитель">
|
||||||
<p>{message.answer_message.substr(0, 20)}</p>
|
<p>{message.answer_message.substr(0, 20)}</p>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -425,6 +437,7 @@ function helperDivShow(event, id, text, img, username) {
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div><div class="gradient">
|
<div><div class="gradient">
|
||||||
{#if pinnedMsg == null}
|
{#if pinnedMsg == null}
|
||||||
<div class="noMsgDiv">
|
<div class="noMsgDiv">
|
||||||
|
|
@ -436,11 +449,12 @@ function helperDivShow(event, id, text, img, username) {
|
||||||
<div class="pinnedMain">
|
<div class="pinnedMain">
|
||||||
{#each pinnedMsg as msg}
|
{#each pinnedMsg as msg}
|
||||||
<div class="pinDiv">
|
<div class="pinDiv">
|
||||||
<div class="pinAvatar"><img class="pinnedImg" src="{msg.avatar_image}" alt=""></div>
|
<h3 class="pinName">{msg.username}</h3>
|
||||||
<div class="pinMsg">
|
<div class="pinMsg">
|
||||||
<h3 class="pinnedMsg">{msg.message}</h3>
|
<h3 class="pinnedMsg">{msg.message}</h3>
|
||||||
<img src="{msg.image_url}" class="pinImg" alt="">
|
<img src="{msg.image_url}" class="pinImg" alt="">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="pinAvatar"><img class="pinnedImg" src="{msg.avatar_image}" alt=""></div>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -457,6 +471,50 @@ function helperDivShow(event, id, text, img, username) {
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
||||||
|
.answerLogo{
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backgroundYtka{
|
||||||
|
z-index: -1;
|
||||||
|
position: absolute;
|
||||||
|
padding: 15px;
|
||||||
|
height: 100%;
|
||||||
|
filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jopa{
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pickedChatDiv{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
//background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pickedChatImg{
|
||||||
|
//z-index: 0;
|
||||||
|
//position: absolute;
|
||||||
|
//top: -10%;
|
||||||
|
//left: 10%;
|
||||||
|
border-radius: 25px;
|
||||||
|
//width: auto;
|
||||||
|
height: 75px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.pickedChatName{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
//z-index: 1;
|
||||||
|
//position: absolute;
|
||||||
|
//top: -35px;
|
||||||
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: linear-gradient(45deg, var(--blue), var(--purple));
|
background: linear-gradient(45deg, var(--blue), var(--purple));
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
@ -510,6 +568,7 @@ function helperDivShow(event, id, text, img, username) {
|
||||||
.imageDiv{
|
.imageDiv{
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.imageDelete{
|
.imageDelete{
|
||||||
|
|
@ -524,18 +583,28 @@ function helperDivShow(event, id, text, img, username) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.imageFile{
|
.imageFile{
|
||||||
border-radius: 15px;
|
border-radius: 12px;
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pinName{
|
||||||
|
margin: 0 0 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.pinMsg{
|
.pinMsg{
|
||||||
width: 90%;
|
width: 80%;
|
||||||
|
background-color: #ffffff0a;
|
||||||
|
border-radius: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 55px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pinAvatar{
|
.pinAvatar{
|
||||||
width: 10%;
|
margin-top: -30px;
|
||||||
margin-right: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pinImg{
|
.pinImg{
|
||||||
|
|
@ -551,14 +620,19 @@ function helperDivShow(event, id, text, img, username) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pinnedMsg{
|
.pinnedMsg{
|
||||||
display: flex;
|
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pinDiv{
|
.pinDiv{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
//background-color: red;
|
//background-color: red;
|
||||||
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pinnedMain{
|
.pinnedMain{
|
||||||
|
|
@ -612,7 +686,7 @@ function helperDivShow(event, id, text, img, username) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.helperDiv{
|
.helperDiv{
|
||||||
|
z-index: 727;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
height: 90px;
|
height: 90px;
|
||||||
|
|
@ -779,6 +853,7 @@ padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatDiv{
|
.chatDiv{
|
||||||
|
z-index: 2;
|
||||||
//background-color: red;
|
//background-color: red;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 99%;
|
height: 99%;
|
||||||
|
|
@ -805,6 +880,7 @@ padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient{
|
.gradient{
|
||||||
|
z-index: 1;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
background:
|
background:
|
||||||
linear-gradient(#101010, #101010) padding-box,
|
linear-gradient(#101010, #101010) padding-box,
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue