changed layout for a store variable
This commit is contained in:
@@ -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')
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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">
|
||||||
<room_name>
|
<room_name>
|
||||||
</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>
|
||||||
|
|
||||||
|
|||||||
@@ -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 -->
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
44
srcs/requirements/svelte/api_front/src/pieces/chat/Rooms.ts
Normal file
44
srcs/requirements/svelte/api_front/src/pieces/chat/Rooms.ts
Normal 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");
|
||||||
|
}
|
||||||
|
|
||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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"); });
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -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 }]);
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user