42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rooms now change properly in home

Browse Source
This commit is contained in:
hugogogo
2023-01-09 16:10:37 +01:00
parent 94ec37b847
commit e71e555ea4
8 changed files with 276 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_create.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { msgs, layout } from './Store_chat';
import { change_room } from './Rooms';
import { change_room, create_room } from './Request_rooms';
import Button from './Element_button.svelte';
import Warning from './Element_warning.svelte';
@@ -21,27 +21,11 @@
if (!formIsValid)
return;
let formData = {
room_name: room_name,
room_type: room_type,
};
console.log("formData:", formData);
// send the new room
const response = await fetch('/api/v2/chat/create', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData),
});
// get response status and message
response_status = response.status;
response_data = await response.json();
if (response_data.message)
response_message = response_data.message;
const response = await create_room(room_name, room_type);
// go to room
if (response_status === 200 && response_message === "successfull room creation")
if (response.status === 200 && response.message === "successfull room creation")
{
await change_room(room_name);
}

25
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte
View File

@@ -1,31 +1,18 @@
<script>
import { layout, msgs, user } from './Store_chat';
import { join_room, change_room, get_room_messages } from './Rooms';
import { change_room, get_room_messages, get_all_rooms } from './Request_rooms';
import { onMount } from 'svelte';
import Button from './Element_button.svelte';
let rooms = [];
// ask api for the rooms
const get_rooms = fetch('/api/v2/chat/myrooms')
.then(resp => resp.json())
.then(data =>
{
console.log("data.rooms:", data.rooms);
for (let room of data.rooms)
console.log(room.name);
rooms = data.rooms;
});
let rooms = get_all_rooms();
// go to clicked room
async function go_to_room(evt)
{
console.log("inside go_to_room");
let room_name = {
room_name: evt.target.innerText,
}
await change_room(room_name);
await change_room(evt.target.innerText);
await get_room_messages();
}
</script>
@@ -54,10 +41,10 @@
<div class="__show_if_only_child">
<p class="__center">/ you have no chat room yet /</p>
</div>
{#await get_rooms}
{#await rooms}
<!-- promise is pending -->
<p>rooms are loaded...</p>
{:then}
{:then rooms}
{#each rooms as room}
<Button my_class="list" on_click={go_to_room}>
{room.name}

7
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_new.svelte
View File

@@ -1,7 +1,7 @@
<script>
import { layout, msgs, user, socket } from './Store_chat';
import { join_room, change_room, get_room_messages } from './Rooms';
import { join_room, change_room, get_room_messages } from './Request_rooms';
import Button from './Element_button.svelte';
export let back = "";
@@ -23,12 +23,9 @@
async function join_rooms(evt)
{
console.log("inside join_room");
let room_name = {
room_name: evt.target.innerText,
}
let room_name = evt.target.innerText;
await join_room(room_name);
await get_room_messages();
await change_room(room_name);
}

101
srcs/requirements/svelte/api_front/src/pieces/chat/Request_rooms.ts Normal file
View File

@@ -0,0 +1,101 @@
import { msgs, user, layout, socket } from './Store_chat';
export async function get_room_messages()
{
console.log("in get_room_messages");
const response = await fetch('/api/v2/chat/messages');
const data = await response.json();
const messages = data.messages;
messages.forEach(function(item) {
if (item.name === user.username) {
item.name = "me";
}
});
msgs.set(messages);
}
export async function create_room(room_name, room_type)
{
console.log("in create_room");
let formData = {
room_name: room_name,
room_type: room_type,
};
// send the new room
const response = await fetch('/api/v2/chat/create', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(form_data),
});
// get response status and message
let response_status = response.status;
let data = await response.json();
let response_message = "";
if (data.message)
response_message = data.message;
return {
status: response_status,
message: response_message
};
}
export async function join_room(room_name)
{
console.log("in join_room");
let name = {
room_name: room_name,
}
const response = await fetch('/api/v2/chat/join', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(name),
});
let data = await response.json();
console.log(data.message);
socket.emit('join', room_name);
}
export async function change_room(room_name)
{
console.log("in change_room");
let name = {
room_name: room_name,
}
const response = await fetch('/api/v2/chat/change', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(name),
});
let data = await response.json();
console.log(data.message);
await get_room_messages();
layout.set("room");
}
export async function get_all_rooms()
{
console.log("in get_all_rooms");
// ask api for the rooms
const response = await fetch('/api/v2/chat/myrooms');
const data = await response.json();
console.log("data.rooms:", data.rooms);
for (let room of data.rooms)
console.log(room.name);
let rooms = data.rooms;
return rooms;
}

44
srcs/requirements/svelte/api_front/src/pieces/chat/Rooms.ts
View File

@@ -1,44 +0,0 @@
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");
}