wip divide chat.svelte into pieces

README.md

@@ -1,3 +1,4 @@
+
 ### Pour lancer le docker :
 
 - Il faut un fichier .env qu'on ne doit pas push, donc je ne le push pas.

srcs/docker-compose.yml

@@ -42,6 +42,7 @@ services:
     restart: unless-stopped
     volumes:
       - ./requirements/nginx/conf/default.conf:/etc/nginx/conf.d/default.conf:ro
+      - ./requirements/nginx/conf/nginx.conf:/etc/nginx/nginx.conf:ro
     command: [nginx-debug, "-g", "daemon off;"]
     ports:
       - "8080:8080"

srcs/requirements/nestjs/api_back/src/app.module.ts

@@ -34,7 +34,7 @@ import { ChatGateway } from './chat/chat.gateway';
   controllers: [AppController],
   providers: [
 		AppService,
-  	ChatGateway,
+			ChatGateway,
 	],
 })
 export class AppModule {}

srcs/requirements/nestjs/api_back/src/chat/chat.gateway.ts

@@ -9,30 +9,18 @@ import {
 } from '@nestjs/websockets';
 
 @WebSocketGateway({
-	path: '/chat',
+	path: '/api/v2/chat',
 	cors: {
 		origin: '*',
 	},
 })
-
-/*
-export class ChatGateway {
-*/
 export class ChatGateway implements OnGatewayConnection {
-	@WebSocketServer()
+  @WebSocketServer()
-	server;
+  server;
 
 	handleConnection(client) {
 		console.log('------------------------ Client connected:', client.id);
 	}
 
-/*
-	@SubscribeMessage('message')
-	handleMessage(@MessageBody() message: string): void {
-		console.log("message received:");
-		console.log(`[${message}]`);
-		this.server.emit('message', message);
-	}
-*/
 }
 

srcs/requirements/nginx/conf/default.conf

@@ -12,11 +12,16 @@ server {
 		proxy_pass http://backend_dev:3000;
 	}
 	location /chat {
-		proxy_set_header Host $host;
+	#	proxy_set_header Host $host;
-		proxy_set_header X-Real-IP $remote_addr;
+	#	proxy_set_header X-Real-IP $remote_addr;
-		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+	#	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-		proxy_set_header X-Forwarded-Proto $scheme;
+	#	proxy_set_header X-Forwarded-Proto $scheme;
+	#	proxy_pass http://backend_dev:8080/api/v2/chat;
 		proxy_pass http://backend_dev:8080/api/v2/chat;
+		proxy_http_version 1.1;
+		proxy_set_header Upgrade $http_upgrade;
+		proxy_set_header Connection $connection_upgrade;
+		proxy_set_header Host $host;
 	}
 	location / {
 		proxy_set_header Host $host;

srcs/requirements/nginx/conf/nginx.conf

@@ -0,0 +1,37 @@
+
+user  nginx;
+worker_processes  auto;
+
+error_log  /var/log/nginx/error.log notice;
+pid        /var/run/nginx.pid;
+
+
+events {
+    worker_connections  1024;
+}
+
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+    #tcp_nopush     on;
+
+    keepalive_timeout  65;
+
+	map $http_upgrade $connection_upgrade {
+		default upgrade;
+		''      close;
+	}
+
+    #gzip  on;
+
+    include /etc/nginx/conf.d/*.conf;
+}

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

@@ -1,6 +1,8 @@
 
 <script lang="ts">
 
+	import Debug from './tmp_debug.svelte';
+
 	import Button from './Chat_button.svelte';
 
 	import HomeLayout      from './Layout_home.svelte';
@@ -17,12 +19,45 @@
 	*/
 	import { onMount } from 'svelte';
 	import io from 'socket.io-client';
-	const socket = io('http://transcendance:8080/chat', {
+	const socket = io('http://transcendance:8080', {
-		path: '/chat/socket.io'
+		path: '/chat'
 	});
 	onMount(async => {
-		socket.on('connect', () => {
+		socket.on('connect', function(){
-			console.log("client connection");
+			console.log("socket.io connected");
+		});
+		socket.on('disconnect', function(){
+			console.log("socket.io disconnected");
+		});
+		socket.on('connect_error', function(){
+			console.log("socket.io connect_error");
+		});
+		socket.on('connect_timeout', function(){
+			console.log("socket.io connect_timeout");
+		});
+		socket.on('error', function(){
+			console.log("socket.io error");
+		});
+		socket.on('reconnect', function(){
+			console.log("socket.io reconnect");
+		});
+		socket.on('reconnect_attempt', function(){
+			console.log("socket.io reconnect_attempt");
+		});
+		socket.on('reconnecting', function(){
+			console.log("socket.io reconnecting");
+		});
+		socket.on('reconnect_error', function(){
+			console.log("socket.io reconnect_error");
+		});
+		socket.on('reconnect_failed', function(){
+			console.log("socket.io reconnect_failed");
+		});
+		socket.on('ping', function(){
+			console.log("socket.io ping");
+		});
+		socket.on('pong', function(){
+			console.log("socket.io pong");
 		});
 	});
 
@@ -89,31 +124,10 @@
 
 	{/if}
 
-
 </div>
 
-<!-- TEMP for test -->
+<!-- TMP DEBUG -->
-<div style="display: flex; flex-direction: column; font-size: 12px; position: fixed; top: 20px; left: 20px; background-color: white;">
+<Debug bind:layout />
-	<p>temp, for testing :</p>
-	<button on:click={function(){layout = "close"    }}>close</button>
-	<button on:click={function(){layout = "home"     }}>home</button>
-	<button on:click={function(){layout = "room"     }}>room</button>
-	<button on:click={function(){layout = "new"      }}>new</button>
-	<button on:click={function(){layout = "settings" }}>settings</button>
-	<button on:click={function(){layout = "room_set" }}>room_set</button>
-	<button on:click={function(){layout = "protected"}}>protected</button>
-	<button on:click={function(){layout = "create"   }}>create</button>
-	<button on:click={function(){layout = "mute"     }}>mute</button>
-	<button on:click={function(){
-		layouts = ["settings", "settings"];
-		layout = "user";
-	}}>user from settings</button>
-	<button on:click={function(){
-		layouts = ["room_set", "room_set"];
-		layout = "user";
-	}}>user from room_set</button>
-</div>
-<!-- END TEMP for test -->
 
 <style>
 

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

@@ -0,0 +1,267 @@
+
+<script lang="ts">
+
+	import Debug from './tmp_debug.svelte';
+
+	import Button from './Chat_button.svelte';
+
+	import HomeLayout      from './Layout_home.svelte';
+	import RoomLayout      from './Layout_room.svelte';
+	import NewLayout       from './Layout_new.svelte';
+	import SettingsLayout  from './Layout_settings.svelte';
+	import RoomsetLayout   from './Layout_room_set.svelte';
+	import ProtectedLayout from './Layout_protected.svelte';
+	import CreateLayout    from './Layout_create.svelte';
+	import MuteLayout      from './Layout_mute.svelte';
+	import UserLayout      from './Layout_user.svelte';
+
+	/* web sockets with socket.io
+	*/
+	import { onMount } from 'svelte';
+	import io from 'socket.io-client';
+	const socket = io('http://transcendance:8080', {
+		path: '/chat/socket.io'
+	});
+	onMount(async => {
+		socket.on('connect', function(){
+			console.log("socket.io connected");
+		});
+		socket.on('disconnect', function(){
+			console.log("socket.io disconnected");
+		});
+		socket.on('connect_error', function(){
+			console.log("socket.io connect_error");
+		});
+		socket.on('connect_timeout', function(){
+			console.log("socket.io connect_timeout");
+		});
+		socket.on('error', function(){
+			console.log("socket.io error");
+		});
+		socket.on('reconnect', function(){
+			console.log("socket.io reconnect");
+		});
+		socket.on('reconnect_attempt', function(){
+			console.log("socket.io reconnect_attempt");
+		});
+		socket.on('reconnecting', function(){
+			console.log("socket.io reconnecting");
+		});
+		socket.on('reconnect_error', function(){
+			console.log("socket.io reconnect_error");
+		});
+		socket.on('reconnect_failed', function(){
+			console.log("socket.io reconnect_failed");
+		});
+		socket.on('ping', function(){
+			console.log("socket.io ping");
+		});
+		socket.on('pong', function(){
+			console.log("socket.io pong");
+		});
+	});
+
+	/* global variables
+	*/
+	export let color = "transparent";
+	let room = "";
+	let admin = false;
+	let layout = "close";
+	let layouts = ["home", "home"];
+
+	/* hold previous version of layout, to go back
+	*/
+	function set_layouts(layout)
+	{
+		if (layout === "close")
+			return;
+		if (layout === layouts[0])
+			return;
+		if (layout === layouts[1])
+			layouts = [layout, "home"];
+		else
+			layouts = [layout, layouts[0]];
+	}
+	$: set_layouts(layout);
+
+</script>
+
+<div class="{layout} chat_box" style="background-color: {color};">
+
+	{#if layout === "home"}
+		<HomeLayout bind:layout />
+
+	{:else if layout === "room"}
+		<RoomLayout bind:layout back={layouts[1]} />
+
+	{:else if layout === "new"}
+		<NewLayout bind:layout back={layouts[1]} />
+
+	{:else if layout === "settings"}
+		<SettingsLayout bind:layout back={layouts[1]} />
+
+	{:else if layout === "room_set"}
+		<RoomsetLayout bind:layout back={layouts[1]} />
+
+	{:else if layout === "protected"}
+		<ProtectedLayout bind:layout back={layouts[1]} />
+
+	{:else if layout === "create"}
+		<CreateLayout bind:layout back={layouts[1]} />
+
+	{:else if layout === "mute"}
+		<MuteLayout bind:layout back={layouts[1]} />
+
+	{:else if layout === "user"}
+		<UserLayout bind:layout back={layouts[1]} />
+
+	{:else}
+		<div class="grid_box">
+			<Button bind:layout new_layout={layouts[0]} my_class="chat">
+				chat
+			</Button>
+		</div>
+
+	{/if}
+
+</div>
+
+<!-- TMP DEBUG -->
+<Debug bind:layout />
+
+<style>
+
+	/* chat_box and default style
+	*/
+	.chat_box {
+		display: flex;
+		position: fixed;
+		bottom: 20px;
+		right: 20px;
+		padding: 5px;
+		width: 300px;
+		height: 400px;
+		border: 1px solid black;
+	}
+
+
+	/* style if chat_box is closed
+	*/
+	.chat {grid-area: chat;}
+	.chat_box.close .grid_box {
+		gap: 0px;
+		grid:
+			' chat ' auto
+			/ auto ;
+	}
+	.chat_box.close {
+		padding: 0px;
+		width: auto;
+		height: auto;
+	}
+
+
+
+
+	/* * * * * * * * * * * * * * * * * * * * *
+		GLOBAL STYLES
+	*/
+
+
+	/* Hide scrollbar
+	*/
+	.chat_box :global(*) {
+		-ms-overflow-style: none;  /* IE and Edge */
+		scrollbar-width: none;  /* Firefox */
+	}
+	.chat_box :global(*::-webkit-scrollbar) {
+		display: none;  /* Chrome, Safari and Opera */
+	}
+
+
+	/* for grid_box and all childrens
+	*/
+	.chat_box :global(.grid_box) {
+		display: grid;
+		margin: 0px;
+		gap: 5px;
+		width: 100%;
+		height: 100%;
+	}
+	.chat_box :global(.grid_box *) {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		box-sizing: border-box;
+	}
+
+
+	/* all p
+	*/
+	.chat_box :global(.grid_box p) {
+		padding: 10px;
+		font-size: 15px;
+	}
+
+
+	/* all panel
+	*/
+	.chat_box :global(.panel) {
+		overflow-y: scroll;
+	}
+	.chat_box :global(.panel > *) {
+		margin-top: 10px;
+		margin-bottom: 10px;
+	}
+
+
+
+
+	/* * * * * * * * * * * * * * * * * * * * *
+		GLOBAL UTILITIES
+	*/
+
+
+	/* __show_if_only_child
+	*/
+	.chat_box :global(.__show_if_only_child) {
+		display: none;
+	}
+	.chat_box :global(.__show_if_only_child:only-child) {
+		display: flex;
+		color: rgb(100, 100, 100);
+	}
+
+
+	/* __center
+	*/
+	.chat_box :global(.__center) {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+
+	/* __border_top
+	*/
+	.chat_box :global(.__border_top) {
+		border-top: 1px solid black;
+	}
+
+
+	/* __check_change_next
+	*/
+	.chat_box :global(.__check_change_next:checked ~ .__to_show) {
+		display: flex;
+	}
+	.chat_box :global(.__check_change_next:checked ~ .__to_block),
+	.chat_box :global(.__check_change_next:checked ~ .__to_block *) {
+		pointer-events: none;
+		color: rgb(100, 100, 100);
+	}
+	.chat_box :global(.__to_show) {
+		display: none;
+	}
+
+
+</style>
+

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

@@ -0,0 +1,24 @@
+<script>
+	export let layout;
+</script>
+
+<div style="display: flex; flex-direction: column; font-size: 12px; position: fixed; top: 20px; left: 20px; background-color: white;">
+	<p>temp, for testing :</p>
+	<button on:click={function(){layout = "close"    }}>close</button>
+	<button on:click={function(){layout = "home"     }}>home</button>
+	<button on:click={function(){layout = "room"     }}>room</button>
+	<button on:click={function(){layout = "new"      }}>new</button>
+	<button on:click={function(){layout = "settings" }}>settings</button>
+	<button on:click={function(){layout = "room_set" }}>room_set</button>
+	<button on:click={function(){layout = "protected"}}>protected</button>
+	<button on:click={function(){layout = "create"   }}>create</button>
+	<button on:click={function(){layout = "mute"     }}>mute</button>
+	<button on:click={function(){
+		layouts = ["settings", "settings"];
+		layout = "user";
+	}}>user from settings</button>
+	<button on:click={function(){
+		layouts = ["room_set", "room_set"];
+		layout = "user";
+	}}>user from room_set</button>
+</div>