wip send msg

srcs/requirements/svelte/api_front/src/pieces/chat/Chat.html

@@ -1,127 +0,0 @@
-
-<div class="close" id="chat_box">
-	<!--
-	classes:
-		 1. close       -> layout close
-		 2. home        -> layout home
-		 3. room        -> layout room
-		 4. new         -> layout new
-		 5. settings    -> layout settings
-		 6. room_set    -> layout room_set
-		 7. protected   -> layout protected
-		 8. create      -> layout create
-		 9. mute        -> layout mute
-		10. user        -> layout user
-		11. _blocked    -> for user layout : user is blocked
-		12. _muted      -> for user layout : user is muted
-		13. _admin      -> for user layout : you are admin
-		14. _room_set   -> for user layout : comes from room_set
-		15. _settings   -> for user layout : comes from settings
-
-	classes for layout must replace the entire previous class
-	but classes starting with "_" must be added to existing class
-	-->
-
-	<p      class="chat_item chat_create"        id="chat_create"                                                       >create</p>
-	<p      class="chat_item chat_user"          id="chat_user"                                                         >&lt;user_name&gt;</p>
-
-
-	<!-- --------------------------------
-		PANELS
-
-		- HOME
-		- MSG
-		- NEW
-		- SETTINGS
-		- ROOM SET
-		- PROTECTED
-		- CREATE
-		- USER
-		- MUTE
-		- WRITE
-	--------------------------------- -->
-
-
-</div>
-
-<style>
-	@import './chat_style/chat__global.css';
-
-	@import './chat_style/layout_close.css';
-	@import './chat_style/layout_home.css';
-	@import './chat_style/layout_room.css';
-	@import './chat_style/layout_new.css';
-	@import './chat_style/layout_settings.css';
-	@import './chat_style/layout_room_set.css';
-	@import './chat_style/layout_protected.css';
-	@import './chat_style/layout_create.css';
-	@import './chat_style/layout_user.css';
-	@import './chat_style/layout_mute.css';
-
-	@import './chat_style/chat_panels.css';
-	@import './chat_style/chat_buttons.css';
-	@import './chat_style/chat_back.css';
-	@import './chat_style/chat_close.css';
-	@import './chat_style/chat_write.css';
-	@import './chat_style/chat_msg.css';
-	@import './chat_style/chat_blocked.css';
-	@import './chat_style/chat_form.css';
-
-
-	/*
-		 GRID
-	 */
-
-	#chat_box * {
-		display: flex;
-		flex-direction: column;
-		position: relative;
-		box-sizing: border-box;
-		padding: 0px;
-		margin: auto;
-	}
-	#chat_box .chat_item {
-		display: none;
-		/*
-		border: 1px solid black;
-		*/
-		width: 100%;
-		height: 100%;
-	}
-
-	.chat_item#chat_chat            { grid-area: chat;}
-	.chat_item#chat_close           { grid-area: close;}
-	.chat_item#chat_new             { grid-area: new;}
-	.chat_item#chat_settings        { grid-area: settings;}
-	.chat_item#chat_room_name       { grid-area: room_name;}
-	.chat_item#chat_send            { grid-area: send;}
-	.chat_item#chat_create          { grid-area: create;}
-	.chat_item#chat_user            { grid-area: user;}
-	.chat_item#chat_back            { grid-area: back;}
-	.chat_item#chat_panel_home      { grid-area: panel_home;}
-	.chat_item#chat_panel_new       { grid-area: panel_new;}
-	.chat_item#chat_panel_msg       { grid-area: panel_msg;}
-	.chat_item#chat_panel_write     { grid-area: panel_write;}
-	.chat_item#chat_panel_settings  { grid-area: panel_settings;}
-	.chat_item#chat_panel_room_set  { grid-area: panel_room_set;}
-	.chat_item#chat_panel_protected { grid-area: panel_protected;}
-	.chat_item#chat_panel_create    { grid-area: panel_create;}
-	.chat_item#chat_panel_user      { grid-area: panel_user;}
-	.chat_item#chat_panel_mute      { grid-area: panel_mute;}
-
-	#chat_box {
-		display: grid;
-		position: fixed;
-		bottom: 20px;
-		right: 20px;
-
-		gap: 5px;
-		padding: 5px;
-		width: 300px;
-		height: 400px;
-
-		border: 1px solid black;
-	}
-
-</style>
-

srcs/requirements/svelte/api_front/src/pieces/chat/Chat_button.svelte

@@ -1,6 +1,12 @@
 
 <!--
-	<Button bind:layout={layout} new_layout="" my_title="">
+	<Button
+		bind:layout
+		new_layout=""
+		on_click={}
+		my_class=""
+		my_title=""
+	>
 		value
 	</Button>
 -->
@@ -11,6 +17,7 @@
 	export let my_title = "";
 	export let layout = "";
 	export let new_layout = "";
+	export let on_click = "";
 
 	function update_layout() {
 		layout = new_layout;
@@ -19,7 +26,7 @@
 
 </script>
 
-<button class={my_class} on:click={update_layout} title={my_title}>
+<button on:click={update_layout} on:click={on_click} title={my_title} class={my_class}>
 	<p><slot></slot></p>
 </button>
 

srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte

@@ -5,6 +5,31 @@
 	export let layout = "";
 	export let back = "";
 
+	let msg = "";
+	let text_area;
+
+	function send_msg()
+	{
+		msg = msg.trim();
+
+		if (msg.length > 0) {
+			//socket.emit('sendmsg', msg);
+			add_message("me", msg);
+		}
+
+		msg = "";
+		text_area.focus();
+	}
+
+	function send_msg_if(evt)
+	{
+		if (evt.shiftKey && evt.key === "Enter")
+		{
+			evt.preventDefault();
+			send_msg();
+		}
+	}
+
 </script>
 
 <div class="grid_box">
@@ -59,12 +84,18 @@
 
 	<!-- write -->
 	<div class="panel_write">
-		<div class="text_area" id="chat_msg_write" contenteditable="true">
+		<div
+			class="text_area"
+			bind:innerHTML={msg}
+			bind:this={text_area}
+			on:keypress={send_msg_if}
+			contenteditable="true"
+		>
 		</div>
 	</div>
 
 	<!-- send -->
-	<Button my_class="send">
+	<Button my_class="send" on_click={send_msg}>
 		send
 	</Button>