wip invite users

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

@@ -15,6 +15,7 @@
 	import CreateLayout    from './Layout_create.svelte';
 	import MuteLayout      from './Layout_mute.svelte';
 	import UserLayout      from './Layout_user.svelte';
+	import InviteLayout    from './Layout_invite.svelte';
 
 	import Button from './Element_button.svelte';
 
@@ -79,6 +80,9 @@
 	{:else if $layout === "user"}
 		<UserLayout back={layouts[1]} />
 
+	{:else if $layout === "invite"}
+		<InviteLayout back={layouts[1]} />
+
 	{/if}
 
 </ChatBox>

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+
+	import { layout, user, current_room_name } from './Store_chat';
+	import { get_all_users } from './Request_rooms';
+	import Button from './Element_button.svelte';
+
+	export let back = "";
+
+	let users = get_all_users();
+
+	// invite user in this room
+	async function invite_user()
+	{
+		console.log("inside invite_user");
+
+//		console.log("room:", room);
+//		const updated_room = await join_room(room);
+//		console.log("updated room:", updated_room);
+//		await change_room(updated_room);
+	}
+
+</script>
+
+<div class="grid_box">
+
+	<!-- back -->
+	<Button new_layout={back} my_class="back icon" my_title="go back {back}">
+		back
+	</Button>
+
+	<!-- new -->
+	<Button my_class="invite deactivate">
+		invite
+	</Button>
+
+	<!-- close -->
+	<Button new_layout="close" my_class="close icon">
+		close
+	</Button>
+
+	<!-- room_name -->
+	<Button my_class="room_name deactivate __border_top">
+		{$current_room_name}
+	</Button>
+
+	<!-- panel_new -->
+	<div class="panel panel_invite __border_top">
+		<p>invite someone in this room :</p>
+		<div>
+			<div class="__show_if_only_child">
+				<p class="__center">/ there is no one to invite yet /</p>
+			</div>
+			{#await users}
+				<p>users are loading...</p>
+			{:then users}
+				{#each users as user}
+					<Button my_class="list" on_click={invite_user}>
+						{user.username}
+					</Button>
+				{/each}
+			{/await}
+		</div>
+	</div>
+
+</div>
+
+<style>
+
+	/* grid layout "new"
+	*/
+	.grid_box :global(.back        ) {grid-area: back;}
+	.grid_box :global(.invite      ) {grid-area: invite;}
+	.grid_box :global(.close       ) {grid-area: close;}
+	.grid_box :global(.room_name   ) {grid-area: room_name;}
+	.grid_box :global(.panel_invite) {grid-area: panel_invite;}
+	.grid_box {
+		grid:
+			' back         invite       close        ' auto
+			' room_name    room_name    room_name    ' auto
+			' panel_invite panel_invite panel_invite ' 1fr
+			/ auto         1fr          auto         ;
+	}
+
+
+</style>
+

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

@@ -45,6 +45,9 @@
 			<Button on_click={user_leave_room}>
 				leave
 			</Button>
+			<Button new_layout="invite">
+				invite someone
+			</Button>
 		{/if}
 		<p>room users :</p>
 		<div class="room_users">

srcs/requirements/svelte/api_front/src/pieces/chat/Request_rooms.ts

@@ -134,4 +134,15 @@ export async function leave_room()
 	});
 }
 
+export async function get_all_users()
+{
+	console.log("in get_all_users");
+
+	const response = await fetch('/api/v2/chat/users');
+	const data = await response.json();
+	console.log("users:", data.users);
+
+	return data.users;
+}
+