changed layout for a store variable

This commit is contained in:
hugogogo
2023-01-09 14:44:01 +01:00
parent 45edd2f25f
commit 94ec37b847
22 changed files with 1160 additions and 2157 deletions

View File

@@ -63,6 +63,16 @@ export class ChatController {
return res.status(HttpStatus.OK).json({ room_name: joinRoomDto.room_name, message: response }); return res.status(HttpStatus.OK).json({ room_name: joinRoomDto.room_name, message: response });
} }
@UseGuards(AuthenticateGuard)
@UseGuards(TwoFactorGuard)
@Post('change')
async changeRoom(@Body() joinRoomDto: joinRoomDto, @Req() req, @Res() res): Promise<object>
{
console.log("- in changeRoom controller");
const response = await this.chatService.setCurrentRoom(req.user, joinRoomDto.room_name);
return res.status(HttpStatus.OK).json({ room_name: joinRoomDto.room_name, message: response });
}
@UseGuards(AuthenticateGuard) @UseGuards(AuthenticateGuard)
@UseGuards(TwoFactorGuard) @UseGuards(TwoFactorGuard)
@Post('leave') @Post('leave')

View File

@@ -33,7 +33,6 @@ export class ChatGateway
joinRoom(@ConnectedSocket() socket, @MessageBody() room_name: string): void joinRoom(@ConnectedSocket() socket, @MessageBody() room_name: string): void
{ {
console.log('- in joinRoom gateway'); console.log('- in joinRoom gateway');
console.log(room_name);
socket.join(room_name); socket.join(room_name);
} }
@@ -42,7 +41,6 @@ export class ChatGateway
{ {
console.log('- in handleMessage gateway'); console.log('- in handleMessage gateway');
let room_name = await this.chatService.getCurrentRoom(socket.username); let room_name = await this.chatService.getCurrentRoom(socket.username);
console.log('room_name:', room_name);
socket.to(room_name).emit('message', socket.username, message); socket.to(room_name).emit('message', socket.username, message);
this.chatService.addMessageToCurrentRoom(socket.username, message); this.chatService.addMessageToCurrentRoom(socket.username, message);
} }

View File

@@ -138,8 +138,6 @@ export class ChatService {
newChatroom.messages = [{ name: "SERVER", message: `creation of room ${createRoomDto.room_name}` }]; newChatroom.messages = [{ name: "SERVER", message: `creation of room ${createRoomDto.room_name}` }];
this.chatroomRepository.save(newChatroom); this.chatroomRepository.save(newChatroom);
this.setCurrentRoom(user, createRoomDto.room_name)
return "successfull room creation"; return "successfull room creation";
} }
@@ -157,8 +155,6 @@ export class ChatService {
const rooms = await this.getMyRooms(user); const rooms = await this.getMyRooms(user);
const allRooms = await this.getAllRooms(); const allRooms = await this.getAllRooms();
this.setCurrentRoom(user, joinRoomDto.room_name)
return "successfull joining room"; return "successfull joining room";
} }

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -1,11 +1,12 @@
<script lang="ts"> <script lang="ts">
import { layout } from './Store_chat';
export let color; export let color;
export let layout;
</script> </script>
<div class="{layout} chat_box" style="background-color: {color};"> <div class="{$layout} chat_box" style="background-color: {color};">
<slot></slot> <slot></slot>
</div> </div>

View File

@@ -2,6 +2,7 @@
import Debug from './tmp_debug.svelte'; import Debug from './tmp_debug.svelte';
import { layout } from './Store_chat';
import ChatBox from './Chat_box_css.svelte'; import ChatBox from './Chat_box_css.svelte';
import CloseLayout from './Layout_close.svelte'; import CloseLayout from './Layout_close.svelte';
@@ -22,66 +23,68 @@
export let color; export let color;
let room = ""; let room = "";
let admin = false; let admin = false;
let layout = "close";
let layouts = ["home", "home"]; let layouts = ["home", "home"];
/* hold previous version of layout, to go back /* hold previous version of layout, to go back
*/ */
function set_layouts(layout) function set_layouts($layout)
{ {
console.log("layouts:", layouts); console.log("layouts:", layouts);
if (layout === "close") console.log("layout:", $layout);
if ($layout.length === 0)
layout.set(layouts[0]);
else if ($layout === "close")
return; return;
if (layout === layouts[0]) else if ($layout === layouts[0])
return; return;
if (layout === layouts[1]) else if ($layout === layouts[1])
layouts = [layout, "home"]; layouts = [$layout, "home"];
else else
layouts = [layout, layouts[0]]; layouts = [$layout, layouts[0]];
console.log("- layouts:", layouts); console.log("- layouts:", layouts);
} }
$: set_layouts(layout); $: set_layouts($layout);
</script> </script>
<ChatBox layout={layout} color={color}> <ChatBox color={color}>
{#if layout === "home"} {#if $layout === "home"}
<HomeLayout bind:layout /> <HomeLayout />
{:else if layout === "close"} {:else if $layout === "close"}
<CloseLayout bind:layout back={layouts[0]} /> <CloseLayout back={layouts[0]} />
{:else if layout === "room"} {:else if $layout === "room"}
<RoomLayout bind:layout back={layouts[1]} /> <RoomLayout back={layouts[1]} />
{:else if layout === "new"} {:else if $layout === "new"}
<NewLayout bind:layout back={layouts[1]} /> <NewLayout back={layouts[1]} />
{:else if layout === "settings"} {:else if $layout === "settings"}
<SettingsLayout bind:layout back={layouts[1]} /> <SettingsLayout back={layouts[1]} />
{:else if layout === "room_set"} {:else if $layout === "room_set"}
<RoomsetLayout bind:layout back={layouts[1]} /> <RoomsetLayout back={layouts[1]} />
{:else if layout === "protected"} {:else if $layout === "protected"}
<ProtectedLayout bind:layout back={layouts[1]} /> <ProtectedLayout back={layouts[1]} />
{:else if layout === "create"} {:else if $layout === "create"}
<CreateLayout bind:layout back={layouts[1]} /> <CreateLayout back={layouts[1]} />
{:else if layout === "mute"} {:else if $layout === "mute"}
<MuteLayout bind:layout back={layouts[1]} /> <MuteLayout back={layouts[1]} />
{:else if layout === "user"} {:else if $layout === "user"}
<UserLayout bind:layout back={layouts[1]} /> <UserLayout back={layouts[1]} />
{/if} {/if}
</ChatBox> </ChatBox>
<!-- TMP DEBUG --> <!-- TMP DEBUG -->
<Debug bind:layout bind:layouts /> <Debug bind:layouts />
<style></style> <style></style>

View File

@@ -12,14 +12,15 @@
<script lang="ts"> <script lang="ts">
import { layout } from './Store_chat';
export let my_class = ""; export let my_class = "";
export let my_title = ""; export let my_title = "";
export let layout = "";
export let new_layout = ""; export let new_layout = "";
export let on_click = ""; export let on_click = "";
function update_layout() { function update_layout() {
layout = new_layout; layout.set(new_layout);
} }
</script> </script>

View File

@@ -1,13 +1,14 @@
<script lang="ts"> <script lang="ts">
import { layout } from './Store_chat';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
export let layout = "";
export let back = ""; export let back = "";
</script> </script>
<div class="grid_box"> <div class="grid_box">
<Button bind:layout new_layout={back} my_class="chat"> <Button new_layout={back} my_class="chat">
chat chat
</Button> </Button>
</div> </div>

View File

@@ -1,9 +1,10 @@
<script lang="ts"> <script lang="ts">
import { socket } from './Store_chat'; import { msgs, layout } from './Store_chat';
import { change_room } from './Rooms';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
import Warning from './Element_warning.svelte'; import Warning from './Element_warning.svelte';
export let layout = "";
export let back = ""; export let back = "";
let room_name: string; let room_name: string;
@@ -38,14 +39,12 @@
response_data = await response.json(); response_data = await response.json();
if (response_data.message) if (response_data.message)
response_message = response_data.message; response_message = response_data.message;
console.log("response:", response_data, "status:", response_status, "message:", response_message);
// join socket room
socket.emit('join', room_name);
// go to room // go to room
if (response_status === 200 && response_message === "successfull room creation") if (response_status === 200 && response_message === "successfull room creation")
layout = "room"; {
await change_room(room_name);
}
} }
</script> </script>
@@ -53,7 +52,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}"> <Button new_layout={back} my_class="back icon" my_title="go back {back}">
back back
</Button> </Button>
@@ -63,7 +62,7 @@
</Button> </Button>
<!-- close --> <!-- close -->
<Button bind:layout new_layout="close" my_class="close icon"> <Button new_layout="close" my_class="close icon">
close close
</Button> </Button>

View File

@@ -1,16 +1,11 @@
<script> <script>
import { layout, msgs, user } from './Store_chat';
import { join_room, change_room, get_room_messages } from './Rooms';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
import { msgs, user } from './Store_chat';
export let layout;
let rooms = [ let rooms = [];
{room_name: 'my room'},
{room_name: 'better room'},
{room_name: 'best room'},
{room_name: 'ho room'},
];
// ask api for the rooms // ask api for the rooms
const get_rooms = fetch('/api/v2/chat/myrooms') const get_rooms = fetch('/api/v2/chat/myrooms')
@@ -23,26 +18,14 @@
rooms = data.rooms; rooms = data.rooms;
}); });
// get room messages // go to clicked room
function get_room_messages() async function go_to_room(evt)
{ {
console.log("in get_room_messages"); console.log("inside go_to_room");
const messages = fetch('/api/v2/chat/messages') let room_name = {
.then(resp => resp.json()) room_name: evt.target.innerText,
.then(data =>
{
console.log(data.messages);
data.messages.forEach(function(item) {
if (item.name === user.username) {
item.name = "me";
} }
}); await change_room(room_name);
//msgs.update(msgs => msgs.concat(data.messages));
msgs.update(msgs => msgs = data.messages);
});
// go to room
layout = "room";
} }
</script> </script>
@@ -50,17 +33,17 @@
<div class="grid_box"> <div class="grid_box">
<!-- settings --> <!-- settings -->
<Button bind:layout new_layout="settings" my_class="settings dots icon"> <Button new_layout="settings" my_class="settings dots icon">
settings settings
</Button> </Button>
<!-- new --> <!-- new -->
<Button bind:layout new_layout="new" my_class="new transparent"> <Button new_layout="new" my_class="new transparent">
new new
</Button> </Button>
<!-- close --> <!-- close -->
<Button bind:layout new_layout="close" my_class="close icon"> <Button new_layout="close" my_class="close icon">
close close
</Button> </Button>
@@ -76,7 +59,7 @@
<p>rooms are loaded...</p> <p>rooms are loaded...</p>
{:then} {:then}
{#each rooms as room} {#each rooms as room}
<Button my_class="list" on_click={get_room_messages}> <Button my_class="list" on_click={go_to_room}>
{room.name} {room.name}
</Button> </Button>
{/each} {/each}

View File

@@ -1,7 +1,8 @@
<script> <script>
import { layout } from './Store_chat';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
export let layout = "";
export let back = ""; export let back = "";
</script> </script>
@@ -9,7 +10,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}"> <Button new_layout={back} my_class="back icon" my_title="go back {back}">
back back
</Button> </Button>
@@ -19,7 +20,7 @@
</Button> </Button>
<!-- close --> <!-- close -->
<Button bind:layout new_layout="close" my_class="close icon"> <Button new_layout="close" my_class="close icon">
close close
</Button> </Button>

View File

@@ -1,8 +1,9 @@
<script> <script>
import { layout, msgs, user, socket } from './Store_chat';
import { join_room, change_room, get_room_messages } from './Rooms';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
import { msgs, user, socket } from './Store_chat';
export let layout = "";
export let back = ""; export let back = "";
let rooms = []; let rooms = [];
@@ -19,45 +20,16 @@
}); });
// join the room // join the room
function join_rooms(evt) async function join_rooms(evt)
{ {
console.log("inside join_rooms"); console.log("inside join_room");
let room_name = { let room_name = {
room_name: evt.target.innerText, room_name: evt.target.innerText,
} }
// join room await join_room(room_name);
fetch('/api/v2/chat/join', await get_room_messages();
{ await change_room(room_name);
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(room_name),
})
.then(resp => resp.json())
.then(data =>
{
console.log(data);
});
// join socket room
socket.emit('join', room_name);
// get messages from room
const messages = fetch('/api/v2/chat/messages')
.then(resp => resp.json())
.then(data =>
{
console.log(data.messages);
data.messages.forEach(function(item) {
if (item.name === user.username) {
item.name = "me";
}
});
msgs.update(msgs => msgs = data.messages);
});
// go to room
layout = "room";
} }
</script> </script>
@@ -65,7 +37,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}"> <Button new_layout={back} my_class="back icon" my_title="go back {back}">
back back
</Button> </Button>
@@ -75,13 +47,13 @@
</Button> </Button>
<!-- close --> <!-- close -->
<Button bind:layout new_layout="close" my_class="close icon"> <Button new_layout="close" my_class="close icon">
close close
</Button> </Button>
<!-- panel_new --> <!-- panel_new -->
<div class="panel panel_new __border_top"> <div class="panel panel_new __border_top">
<Button bind:layout new_layout="create" my_class="create"> <Button new_layout="create" my_class="create">
create create
</Button> </Button>
<p>join room :</p> <p>join room :</p>

View File

@@ -1,7 +1,8 @@
<script> <script>
import { layout } from './Store_chat';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
export let layout = "";
export let back = ""; export let back = "";
</script> </script>
@@ -9,7 +10,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}"> <Button new_layout={back} my_class="back icon" my_title="go back {back}">
back back
</Button> </Button>
@@ -19,7 +20,7 @@
</Button> </Button>
<!-- close --> <!-- close -->
<Button bind:layout new_layout="close" my_class="close icon"> <Button new_layout="close" my_class="close icon">
close close
</Button> </Button>

View File

@@ -1,26 +1,21 @@
<script> <script>
import { layout, socket, msgs, add_msg } from './Store_chat';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
import Msg from './Element_msg.svelte'; import Msg from './Element_msg.svelte';
import { socket, msgs } from './Store_chat';
export let layout = "";
export let back = ""; export let back = "";
let msg = ""; let msg = "";
let text_area; let text_area;
function add_local_msg(message)
{
msgs.update(msgs => [...msgs, { name: "me", message: message }]);
}
function send_msg() function send_msg()
{ {
msg = msg.trim(); msg = msg.trim();
if (msg.length > 0) { if (msg.length > 0) {
socket.emit('message', msg); socket.emit('message', msg);
add_local_msg(msg); add_msg("me", msg);
console.log(msgs);
} }
msg = ""; msg = "";
@@ -41,17 +36,17 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}"> <Button new_layout={back} my_class="back icon" my_title="go back {back}">
back back
</Button> </Button>
<!-- room_name --> <!-- room_name -->
<Button bind:layout new_layout="room_set" my_class="room_name transparent"> <Button new_layout="room_set" my_class="room_name transparent">
&lt;room_name&gt; &lt;room_name&gt;
</Button> </Button>
<!-- close --> <!-- close -->
<Button bind:layout new_layout="close" my_class="close icon"> <Button new_layout="close" my_class="close icon">
close close
</Button> </Button>

View File

@@ -1,7 +1,8 @@
<script> <script>
import { layout } from './Store_chat';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
export let layout = "";
export let back = ""; export let back = "";
</script> </script>
@@ -9,7 +10,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}"> <Button new_layout={back} my_class="back icon" my_title="go back {back}">
back back
</Button> </Button>
@@ -19,13 +20,13 @@
</Button> </Button>
<!-- close --> <!-- close -->
<Button bind:layout new_layout="close" my_class="close icon"> <Button new_layout="close" my_class="close icon">
close close
</Button> </Button>
<!-- panel_room_set --> <!-- panel_room_set -->
<div class="panel panel_room_set __border_top"> <div class="panel panel_room_set __border_top">
<Button bind:layout new_layout="create" my_class="create"> <Button new_layout="create" my_class="create">
leave leave
</Button> </Button>
<p>room users :</p> <p>room users :</p>
@@ -35,16 +36,16 @@
</div> </div>
<!-- placeholders <!-- placeholders
------------- --> ------------- -->
<Button bind:layout new_layout="user" my_class="list"> <Button new_layout="user" my_class="list">
user 1 user 1
</Button> </Button>
<Button bind:layout new_layout="user" my_class="list blocked"> <Button new_layout="user" my_class="list blocked">
user 2 user 2
</Button> </Button>
<Button bind:layout new_layout="user" my_class="list"> <Button new_layout="user" my_class="list">
user 3 user 3
</Button> </Button>
<Button bind:layout new_layout="user" my_class="list"> <Button new_layout="user" my_class="list">
user 4 user 4
</Button> </Button>
<!-- END placeholders --> <!-- END placeholders -->

View File

@@ -1,7 +1,8 @@
<script> <script>
import { layout } from './Store_chat';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
export let layout = "";
export let back = ""; export let back = "";
</script> </script>
@@ -9,7 +10,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}"> <Button new_layout={back} my_class="back icon" my_title="go back {back}">
back back
</Button> </Button>
@@ -19,7 +20,7 @@
</Button> </Button>
<!-- close --> <!-- close -->
<Button bind:layout new_layout="close" my_class="close icon"> <Button new_layout="close" my_class="close icon">
close close
</Button> </Button>

View File

@@ -1,7 +1,8 @@
<script> <script>
import { layout } from './Store_chat';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
export let layout = "";
export let back = ""; export let back = "";
let mute = "mute"; let mute = "mute";
@@ -13,7 +14,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}"> <Button new_layout={back} my_class="back icon" my_title="go back {back}">
back back
</Button> </Button>
@@ -23,7 +24,7 @@
</Button> </Button>
<!-- close --> <!-- close -->
<Button bind:layout new_layout="close" my_class="close icon"> <Button new_layout="close" my_class="close icon">
close close
</Button> </Button>

View File

@@ -0,0 +1,44 @@
import { msgs, layout } from './Store_chat';
export async function get_room_messages()
{
console.log("in get_room_messages");
const response = await fetch('/api/v2/chat/messages');
const messages = await response.json();
console.log(messages);
messages.forEach(function(item) {
if (item.name === user.username) {
item.name = "me";
}
});
msgs.set(messages);
}
export async function join_room(room_name)
{
console.log("in change_room");
console.log(room_name);
const response = await fetch('/api/v2/chat/join', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(room_name),
});
console.log(await response.json().message);
}
export async function change_room(room_name)
{
console.log("in change_room");
console.log(room_name);
const response = await fetch('/api/v2/chat/change', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(room_name),
});
console.log(await response.json().message);
layout.set("room");
}

View File

@@ -1,7 +1,6 @@
import io from 'socket.io-client'; import io from 'socket.io-client';
import { set_socket, set_user } from './Store_chat'; import { set_socket, set_user } from './Store_chat';
import { socket_events } from './Socket_events'; import { socket_events } from './Socket_events';
import { connection_states } from './Socket_states';
const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`; const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
@@ -22,7 +21,19 @@ export async function init_socket()
}); });
set_socket(socket); set_socket(socket);
connection_states(socket); 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"); });
socket_events(socket); socket_events(socket);
} }

View File

@@ -1,16 +0,0 @@
export function connection_states(socket)
{
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"); });
}

View File

@@ -1,6 +1,7 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
export let msgs = writable([]); export let msgs = writable([]);
export let layout = writable("close");
export let user; export let user;
export let socket; export let socket;
@@ -8,3 +9,7 @@ export let socket;
export function set_user(new_user) { user = new_user; } export function set_user(new_user) { user = new_user; }
export function set_socket(new_socket) { socket = new_socket; } export function set_socket(new_socket) { socket = new_socket; }
export function add_msg(name: string, message: string)
{
msgs.update(msgs => [...msgs, { name: "me", message: message }]);
}