From f8fa0a4f727ee382a3bfa255aa1d79899ef17fea Mon Sep 17 00:00:00 2001
From: uniknow <000-drakon@mail.ru>
Date: Wed, 12 Jun 2024 23:36:43 +0400
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B5=D1=82=D0=B8=D0=BD=D0=B3=D0=B8=20?=
 =?UTF-8?q?=D0=B8=20=D0=B5=D1=89=D0=B5=20=D1=87=D1=82=D0=BE=20=D1=82=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/chat.js                  |   9 +-
 src/lib/settings.js              |  16 +++
 src/routes/Settings/+page.svelte | 210 ++++++++++++++++++++++++++++++-
 src/routes/chat/+page.svelte     |  98 +++++++++++++--
 4 files changed, 316 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/settings.js
diff --git a/src/lib/chat.js b/src/lib/chat.js
index 4ecf07d..7e8b4a0 100644
--- a/src/lib/chat.js
+++ b/src/lib/chat.js
@@ -6,7 +6,7 @@
      method:'GET',
      credentials:'include',
      headers: {'accept': 'application/json',
-     'Authorization': token,
+               'Authorization': token,
      },
    })
 
@@ -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
      }
    }
@@ -32,7 +38,6 @@
     console.log(response.status)
     
    }
- 
 
  export async function getMessageById(chatId,msgId){
 
diff --git a/src/lib/settings.js b/src/lib/settings.js
new file mode 100644
index 0000000..67206df
--- /dev/null
+++ b/src/lib/settings.js
@@ -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)
+    }
+}
diff --git a/src/routes/Settings/+page.svelte b/src/routes/Settings/+page.svelte
index c81c110..c82a517 100644
--- a/src/routes/Settings/+page.svelte
+++ b/src/routes/Settings/+page.svelte
@@ -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:
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index fbf5f0f..0667eaa 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -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="gradient">
+			<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>
+						<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,
