сетинги и еще что то
This commit is contained in:
parent
442b292c09
commit
f8fa0a4f72
4 changed files with 316 additions and 17 deletions
|
|
@ -20,6 +20,12 @@
|
|||
}
|
||||
else{
|
||||
msgMassive.reverse();
|
||||
let utc = msgMassive[0].created_at
|
||||
console.log(utc)
|
||||
let newutc = new Date(utc)
|
||||
console.log(utc)
|
||||
console.log(newutc)
|
||||
|
||||
return msgMassive
|
||||
}
|
||||
}
|
||||
|
|
@ -33,7 +39,6 @@
|
|||
|
||||
}
|
||||
|
||||
|
||||
export async function getMessageById(chatId,msgId){
|
||||
|
||||
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>
|
||||
import { blur } from 'svelte/transition';
|
||||
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>
|
||||
|
||||
<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="mainDiv">
|
||||
|
|
@ -16,11 +76,33 @@
|
|||
<div class="changingData">
|
||||
<h1>Изменение данных</h1>
|
||||
<div class="divisionChangingData">
|
||||
<div>пинчи</div>
|
||||
<div>данные</div>
|
||||
<div class="avatarDiv">
|
||||
<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 class="finishButton">
|
||||
<button>Подтвердить</button>
|
||||
<button on:click={changingData}>Подтвердить</button>
|
||||
<button>Отменить</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,6 +115,111 @@
|
|||
|
||||
<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{
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
|
|
@ -66,12 +253,14 @@
|
|||
.divisionChangingData{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.divisionChangingData > div{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
padding: 0 0 10% 0;
|
||||
}
|
||||
|
||||
.division{
|
||||
|
|
@ -92,10 +281,23 @@
|
|||
}
|
||||
|
||||
.mainDiv{
|
||||
position: relative;
|
||||
height: 90%;
|
||||
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{
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
|
|
|
|||
|
|
@ -38,6 +38,9 @@
|
|||
|
||||
let answerMessage = ""
|
||||
let answerMessageImg = ""
|
||||
let currentChat;
|
||||
let pickedChatName = ""
|
||||
let pickedChatImg = ""
|
||||
|
||||
onMount(async () => {
|
||||
|
||||
|
|
@ -51,9 +54,15 @@
|
|||
async function handleChatUrlChange() {
|
||||
// Проверяем, что текущий хэш соответствует шаблону для чата
|
||||
if (window.location.hash.startsWith('#id=')) {
|
||||
|
||||
chatId = window.location.hash.slice(4);
|
||||
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)
|
||||
setTimeout(scrollDown,50)
|
||||
|
|
@ -329,11 +338,14 @@ function helperDivShow(event, id, text, img, username) {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="jopa">
|
||||
|
||||
<div class="gradient">
|
||||
|
||||
|
||||
<div class="chatDiv">
|
||||
|
||||
<img class="backgroundYtka" src="BPytka.png" alt="">
|
||||
|
||||
<!-- 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>
|
||||
|
|
@ -359,7 +371,7 @@ function helperDivShow(event, id, text, img, username) {
|
|||
<div class="nameAnswerDiv">
|
||||
<h3>{message.username}</h3>
|
||||
{#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>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -425,6 +437,7 @@ function helperDivShow(event, id, text, img, username) {
|
|||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div><div class="gradient">
|
||||
{#if pinnedMsg == null}
|
||||
<div class="noMsgDiv">
|
||||
|
|
@ -436,11 +449,12 @@ function helperDivShow(event, id, text, img, username) {
|
|||
<div class="pinnedMain">
|
||||
{#each pinnedMsg as msg}
|
||||
<div class="pinDiv">
|
||||
<div class="pinAvatar"><img class="pinnedImg" src="{msg.avatar_image}" alt=""></div>
|
||||
<h3 class="pinName">{msg.username}</h3>
|
||||
<div class="pinMsg">
|
||||
<h3 class="pinnedMsg">{msg.message}</h3>
|
||||
<img src="{msg.image_url}" class="pinImg" alt="">
|
||||
</div>
|
||||
<div class="pinAvatar"><img class="pinnedImg" src="{msg.avatar_image}" alt=""></div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -457,6 +471,50 @@ function helperDivShow(event, id, text, img, username) {
|
|||
|
||||
<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 {
|
||||
background: linear-gradient(45deg, var(--blue), var(--purple));
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -510,6 +568,7 @@ function helperDivShow(event, id, text, img, username) {
|
|||
.imageDiv{
|
||||
position: relative;
|
||||
padding-top: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.imageDelete{
|
||||
|
|
@ -524,18 +583,28 @@ function helperDivShow(event, id, text, img, username) {
|
|||
}
|
||||
|
||||
.imageFile{
|
||||
border-radius: 15px;
|
||||
border-radius: 12px;
|
||||
height: auto;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.pinName{
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.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{
|
||||
width: 10%;
|
||||
margin-right: 15px;
|
||||
margin-top: -30px;
|
||||
}
|
||||
|
||||
.pinImg{
|
||||
|
|
@ -551,14 +620,19 @@ function helperDivShow(event, id, text, img, username) {
|
|||
}
|
||||
|
||||
.pinnedMsg{
|
||||
display: flex;
|
||||
width: 90%;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.pinDiv{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
//background-color: red;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.pinnedMain{
|
||||
|
|
@ -612,7 +686,7 @@ function helperDivShow(event, id, text, img, username) {
|
|||
}
|
||||
|
||||
.helperDiv{
|
||||
|
||||
z-index: 727;
|
||||
position: fixed;
|
||||
width: 160px;
|
||||
height: 90px;
|
||||
|
|
@ -779,6 +853,7 @@ padding-bottom: 10px;
|
|||
}
|
||||
|
||||
.chatDiv{
|
||||
z-index: 2;
|
||||
//background-color: red;
|
||||
width: 100%;
|
||||
height: 99%;
|
||||
|
|
@ -805,6 +880,7 @@ padding-bottom: 10px;
|
|||
}
|
||||
|
||||
.gradient{
|
||||
z-index: 1;
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
linear-gradient(#101010, #101010) padding-box,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue