From 6c2bbb9431bef3fa4aa73bf304319dc31fb025bc Mon Sep 17 00:00:00 2001
From: uniknow <000-drakon@mail.ru>
Date: Fri, 7 Jun 2024 22:12:02 +0400
Subject: [PATCH] =?UTF-8?q?=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=D1=8E?=
 =?UTF-8?q?=D1=89=D0=B8=D0=B9=20=D0=B2=D0=B5=D0=B1=20=D1=81=D0=BE=D0=BA?=
 =?UTF-8?q?=D0=B5=D1=82=20+=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BE=D1=82=D0=B2=D0=B5=D1=82=D0=B0?=
 =?UTF-8?q?=20=D1=81=D0=BE=D0=BE=D0=B1=D1=89=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/websocket.js         |  16 +-----
 src/routes/chat/+page.svelte | 106 +++++++++++++++++++++++++++++++----
 2 files changed, 98 insertions(+), 24 deletions(-)

diff --git a/src/lib/websocket.js b/src/lib/websocket.js
index 8a76b39..f283d9f 100644
--- a/src/lib/websocket.js
+++ b/src/lib/websocket.js
@@ -68,31 +68,19 @@
 
 export default function createWebSocket(url, token, onMessageCallback) {
     token = token.split(" ")[1]
+    console.log(token)
     const socket = new WebSocket(url, [token])
   
     socket.addEventListener('message', (event) => {
       const jsonData = JSON.parse(event.data);
       onMessageCallback(jsonData);
-      //console.log(jsonData)
+      //console.log(jsonData)S
     });
 
     socket.onopen = (event) => {
         console.log('WebSocket is open now.');
     };
 
-    socket.onmessage = (event) => {
-        console.log('Message from server:', event.data);
-        
-    };
-
-    socket.addEventListener('close', (event) => {
-        if (event.code !== 1000) {
-            console.error(`WebSocket closed unexpectedly: ${event.reason} (Code: ${event.code})`);
-        } else {
-            console.log('WebSocket closed normally');
-        }
-    });
-
     socket.addEventListener('close', (event) =>{
         console.log(event)
     })
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index ecbdf3c..952498b 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -30,6 +30,11 @@
 	let pinnedMsg = []
 	let chatId = null
 	let scrollableDiv;
+	let answerMessageTextShow = false
+	let answerMessageImgShow = false
+	
+	let answerMessage = ""
+	let answerMessageImg = ""
 	
 	onMount(async () => {
 
@@ -93,10 +98,11 @@
 	async function sendMessage() {
 
 		let image = null
-		if(messageText != ""){
-		if(image_url != null){
+		if(image_url != null)
 			image = await uploadImages(image_url)
-		}
+		
+		if((messageText != "") || image != null){
+		
 		console.log(image)
 		
 		socket.send(JSON.stringify({flag: flag,
@@ -108,6 +114,10 @@
 		imageShow = false
 		image_url = null
 		answer = null
+		answerMessageTextShow = false
+		answerMessageImgShow =  false
+	    answerMessage = ""
+		answerMessageImg = ""
 		}
 
 	}
@@ -146,12 +156,19 @@ let y ;
 let showDiv = false;
 let helperDiv
 let pickedId
+let	PickedText = ""
+let	PickedImg  = ""
+let PickedName = ""
 $: console.log(pickedId)
 $: console.log(answer)
+$: console.log(answerMessage)
 
-function helperDivShow(event, id) {
+function helperDivShow(event, id, text, img, username) {
 	event.preventDefault();
 	
+	PickedText = text
+	PickedImg = img
+	PickedName = username
 	pickedId = id
     //showDiv = !showDiv;
 	helperDiv = document.getElementById("helperDiv");
@@ -175,8 +192,17 @@ function helperDivShow(event, id) {
   }
 
   function ansFunc(){
-	console.log("ansFunc");
+
+	answerMessage = PickedText
+	answerMessageImg = PickedImg
+
+	console.log(answerMessage, answerMessageImg)
 	answer = pickedId
+	if(answerMessage != "")
+		answerMessageTextShow = true
+	if(answerMessageImg != null)
+		answerMessageImgShow = true 
+	console.log(answerMessageTextShow, answerMessageImgShow)
   }
 
   async function pinFunc(event){
@@ -256,6 +282,13 @@ function helperDivShow(event, id) {
 	image_url = null
   }
 
+  function deleteAnswer(){
+	answerMessageTextShow = false
+	answerMessageImgShow = false
+	answerMessageImg  = ""
+	answerMessage     = ""
+  }
+
   async function handleScroll(event) {
     const { scrollTop, scrollHeight, clientHeight } = event.target
 	console.log(scrollHeight, ";" )
@@ -334,12 +367,12 @@ function helperDivShow(event, id) {
 								<img class="messageAvatar" src="{message.avatar_image}" alt="ава">
 								<!-- svelte-ignore a11y-click-events-have-key-events -->
 								<!-- svelte-ignore a11y-no-static-element-interactions -->
-								<div class="messageDiv" on:contextmenu={helperDivShow(event,message.id)}>
+								<div class="messageDiv" on:contextmenu={helperDivShow(event,message.id, message.message, message.image_url, message.username)}>
 									
 									<div class="nameAnswerDiv">
 									<h3>{message.username}</h3>
 									{#if message.answerMessage != null}
-									<img src="./icon/answerMsg.png" alt="">
+										<img src="./icon/answerMsg.png" alt="">
 										<p>{message.answerMessage.substr(0, 20)}</p>
 									{/if}
 									</div>
@@ -360,6 +393,21 @@ function helperDivShow(event, id) {
 					<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 					<div class="inputDiv">
 
+						{#if (answerMessageTextShow == true) || (answerMessageImgShow == true)}
+						<div class="answerMessageDiv">
+								{#if answerMessageImgShow == true}
+									<img class="answerMessageImg" src="{answerMessageImg}" alt="">
+								{/if}
+							<div class="answerTextDiv">
+								{#if answerMessageTextShow == true}
+									<div class="answerBlockDiv"><h4 class="answerMessage">{answerMessage}</h4></div>
+								{/if}
+								<div class="answerBlockDiv"><h4 class="answerMessageName">{PickedName}</h4></div>
+							</div>
+							<button on:click={deleteAnswer} class="deleteAnswer">x</button>
+						</div>
+						{/if}
+
 						{#if imageShow == true}
 							<div class="imageDiv">
 								<img src="{imageFile}" alt="" class="imageFile">
@@ -379,7 +427,7 @@ function helperDivShow(event, id) {
 
 						</div>
 
-						 <input type="file" accept=".png, .jpeg, .jpg" id="fileInput" 
+						 <input type="file" accept="image/*" id="fileInput" 
 							    on:change={handleFileChange} style="display: none;">
 						
 					</div>
@@ -402,7 +450,8 @@ function helperDivShow(event, id) {
 						<div class="pinAvatar"><img class="pinnedImg" src="{msg.avatar_image}" alt=""></div>
 						<div class="pinMsg">
 							<h3  class="pinnedMsg">{msg.message}</h3>
-							<img src="{msg.image_url}" class="pinImg" alt=""></div>	
+							<img src="{msg.image_url}" class="pinImg" alt="">
+						</div>	
 					</div>
 				{/each}
 				</div>
@@ -432,6 +481,43 @@ function helperDivShow(event, id) {
     width: 3px;
   }
 
+.deleteAnswer{
+	padding: 0 0 0 10px;
+}
+
+.answerBlockDiv{
+	padding-left:5px;
+	width: 80%;
+	height: 50%;
+	//outline: 1px solid white;
+}
+
+.answerTextDiv{
+	display: flex;
+	flex-direction: column-reverse;
+	justify-content: center;
+	align-items: center;
+}
+
+.answerMessageName{
+	font-size: 1.5rem;
+}
+
+.answerMessageImg{
+	height: 3rem;
+	padding: 0px 0 5px 0;
+
+	border-radius: 13px;
+}
+
+.answerMessageDiv{
+	display: flex;
+	padding: 3px 0 0 5px;
+	//background: red;
+	border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.10727) ;
+	//background-color: red;
+}
+
 .imageDiv{
 	position: relative;
 	padding-top: 5px;
@@ -760,7 +846,7 @@ height: 100%;
         height: 100%; 
 }
 .grid > *{
-	outline: 1px solid white;
+	//outline: 1px solid white;
 	display: flex;
     align-items: center;
     justify-content: center;