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

wip fixed history

Browse Source
This commit is contained in:
simplonco
2023-01-18 05:23:54 +01:00
parent 035eb2a46a
commit 030dbb62a5
16 changed files with 81 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_box_css.svelte
View File

@@ -2,8 +2,6 @@
import { layout } from './Store_chat'; import { layout } from './Store_chat';
export let color;
</script> </script>
<!-- <!--

8
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { layout } from './Store_chat'; import { layout, history } 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';
@@ -24,7 +24,6 @@
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)
{ {
if ($layout.length === 0) if ($layout.length === 0)
@@ -39,6 +38,11 @@
layouts = [$layout, layouts[0]]; layouts = [$layout, layouts[0]];
} }
$: set_layouts($layout); $: set_layouts($layout);
*/
$: {
$layout = $history[0];
console.log($history);
}
</script> </script>

39
srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte
View File

@@ -1,29 +1,40 @@
<!--
<Button
bind:layout
new_layout=""
my_class=""
my_title=""
>
value
</Button>
-->
<script lang="ts"> <script lang="ts">
import { layout } from './Store_chat'; import { history, add_history, back_history } from './Store_chat';
import { writable } from 'svelte/store';
export let my_class = ""; export let my_class = "";
export let my_title = ""; export let my_title = "";
export let new_layout = ""; export let new_layout = "";
let layout = writable("");
function update_layout() { function update_layout() {
layout.set(new_layout); console.log("my_class:", my_class);
if (my_class.includes("back"))
{
console.log("back history");
back_history();
}
else if (new_layout !== "")
{
console.log("add history:", new_layout);
add_history(new_layout);
}
else
{
console.log("add history home default");
add_history("home");
}
} }
$: {
$layout;
update_layout();
}
</script> </script>
<button on:click={update_layout} on:click title={my_title} class={my_class}> <button on:click title={my_title} class={my_class}>
<p><slot></slot></p> <p><slot></slot></p>
</button> </button>

5
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_close.svelte
View File

@@ -1,14 +1,11 @@
<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 back = "";
</script> </script>
<div class="grid_box"> <div class="grid_box">
<Button new_layout={back} my_class="chat"> <Button new_layout="home" my_class="chat">
chat chat
</Button> </Button>
</div> </div>

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

@@ -1,14 +1,12 @@
<script lang="ts"> <script lang="ts">
import { msgs, layout, allowed_chars } from './Store_chat'; import { history, add_history, msgs, allowed_chars } from './Store_chat';
import { change_room, create_room } from './Request_rooms'; import { change_room, create_room } from './Request_rooms';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import type { FetchResponse } from './Types_chat'; import type { FetchResponse } from './Types_chat';
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 back = "";
let allowed_chars = 'loading...'; let allowed_chars = 'loading...';
//let regex; //let regex;
onMount(async() => { onMount(async() => {
@@ -55,7 +53,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button new_layout={back} my_class="back icon" my_title="go back {back}"> <Button my_class="back icon" my_title="go back {$history[1]}">
back back
</Button> </Button>

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

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { layout, msgs, user, current_room } from './Store_chat'; import { history, add_history, msgs, user, current_room } from './Store_chat';
import { change_room, get_room_messages, get_my_rooms } from './Request_rooms'; import { change_room, get_room_messages, get_my_rooms } from './Request_rooms';
import { to_print } from './Utils_chat'; import { to_print } from './Utils_chat';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
@@ -22,7 +22,7 @@
if (room.protection && !room.allowed) if (room.protection && !room.allowed)
{ {
await current_room.set(room); await current_room.set(room);
layout.set("password"); add_history("password");
} }
else else
{ {

8
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_invite.svelte
View File

@@ -1,12 +1,10 @@
<script lang="ts"> <script lang="ts">
import { layout, user, current_room } from './Store_chat'; import { history, add_history, user, current_room } from './Store_chat';
import { get_all_users, invite_user } from './Request_rooms'; import { get_all_users, invite_user } from './Request_rooms';
import { to_print } from './Utils_chat'; import { to_print } from './Utils_chat';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
export let back = "";
let users = get_all_users(); let users = get_all_users();
// invite user in this room // invite user in this room
@@ -15,7 +13,7 @@
to_print("inside invite_this_user"); to_print("inside invite_this_user");
invite_user(username); invite_user(username);
layout.set("room"); add_history("room");
} }
</script> </script>
@@ -23,7 +21,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button new_layout={back} my_class="back icon" my_title="go back {back}"> <Button my_class="back icon" my_title="go back {$history[1]}">
back back
</Button> </Button>

10
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_mute.svelte
View File

@@ -1,12 +1,10 @@
<script lang="ts"> <script lang="ts">
import { layout, settings_user } from './Store_chat'; import { history, add_history, settings_user } from './Store_chat';
import { set_mute, get_unmute } from './Request_rooms'; import { set_mute, get_unmute } from './Request_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 back = "";
let response: FetchResponse; let response: FetchResponse;
let show_error = false; let show_error = false;
@@ -52,13 +50,13 @@
if (response.status >= 300 || response.error) if (response.status >= 300 || response.error)
show_error = response.error; show_error = response.error;
else else
layout.set("room"); add_history("room");
} }
async function unmute() async function unmute()
{ {
get_unmute($settings_user.name); get_unmute($settings_user.name);
layout.set("room"); add_history("room");
} }
</script> </script>
@@ -66,7 +64,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button new_layout={back} my_class="back icon" my_title="go back {back}"> <Button my_class="back icon" my_title="go back {$history[1]}">
back back
</Button> </Button>

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

@@ -1,12 +1,10 @@
<script lang="ts"> <script lang="ts">
import { layout, msgs, user, socket, current_room } from './Store_chat'; import { history, add_history, msgs, user, socket, current_room } from './Store_chat';
import { join_room, change_room, get_room_messages, get_all_rooms } from './Request_rooms'; import { join_room, change_room, get_room_messages, get_all_rooms } from './Request_rooms';
import { to_print } from './Utils_chat'; import { to_print } from './Utils_chat';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
export let back = "";
let rooms = get_all_rooms(); let rooms = get_all_rooms();
// join the room // join the room
@@ -18,7 +16,7 @@
if (updated_room.protection) if (updated_room.protection)
{ {
current_room.set(updated_room); current_room.set(updated_room);
layout.set("password"); add_history("password");
} }
else else
await change_room(updated_room); await change_room(updated_room);
@@ -29,7 +27,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button new_layout={back} my_class="back icon" my_title="go back {back}"> <Button my_class="back icon" my_title="go back {$history[1]}">
back back
</Button> </Button>

5
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_password.svelte
View File

@@ -1,13 +1,12 @@
<script lang="ts"> <script lang="ts">
import { layout, current_room } from './Store_chat'; import { history, add_history, current_room } from './Store_chat';
import { change_room, validate_password, change_password, add_password, remove_password } from './Request_rooms'; import { change_room, validate_password, change_password, add_password, remove_password } from './Request_rooms';
import type { FetchResponse } from './Types_chat'; import type { FetchResponse } from './Types_chat';
import { to_print } from './Utils_chat'; import { to_print } from './Utils_chat';
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 back = "";
export let mode = "validate"; export let mode = "validate";
let password_state = ""; let password_state = "";
@@ -61,7 +60,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button new_layout={back} my_class="back icon" my_title="go back {back}"> <Button my_class="back icon" my_title="go back {$history[1]}">
back back
</Button> </Button>

6
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte
View File

@@ -1,11 +1,9 @@
<script> <script>
import { layout, socket, msgs, add_msg, current_room } from './Store_chat'; import { history, add_history, socket, msgs, add_msg, current_room } 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';
export let back = "";
let msg = ""; let msg = "";
let text_area; let text_area;
@@ -35,7 +33,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button new_layout={back} my_class="back icon" my_title="go back {back}"> <Button my_class="back icon" my_title="go back {$history[1]}">
back back
</Button> </Button>

10
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room_set.svelte
View File

@@ -1,13 +1,11 @@
<script lang="ts"> <script lang="ts">
import { layout, current_room, settings_user } from './Store_chat'; import { history, add_history, current_room, settings_user } from './Store_chat';
import { get_room_users, leave_room, get_is_admin, set_current_room, set_settings_user } from './Request_rooms'; import { get_room_users, leave_room, get_is_admin, set_current_room, set_settings_user } from './Request_rooms';
import { User } from './Types_chat'; import { User } from './Types_chat';
import { to_print } from './Utils_chat'; import { to_print } from './Utils_chat';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
export let back = "";
let users: User[] = get_room_users(); let users: User[] = get_room_users();
let is_admin = false; let is_admin = false;
@@ -23,14 +21,14 @@
to_print("in user_profile"); to_print("in user_profile");
settings_user.set(room_user); settings_user.set(room_user);
set_settings_user(room_user.name); set_settings_user(room_user.name);
layout.set("user"); add_history("user");
} }
function user_leave_room() function user_leave_room()
{ {
to_print("in leave_room"); to_print("in leave_room");
leave_room(); leave_room();
layout.set("home"); add_history("home");
} }
</script> </script>
@@ -38,7 +36,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button new_layout={back} my_class="back icon" my_title="go back {back}"> <Button my_class="back icon" my_title="go back {$history[1]}">
back back
</Button> </Button>

8
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_settings.svelte
View File

@@ -1,20 +1,18 @@
<script lang="ts"> <script lang="ts">
import { layout, settings_user } from './Store_chat'; import { history, add_history, settings_user } from './Store_chat';
import { list_block_user } from './Request_rooms'; import { list_block_user } from './Request_rooms';
import { User } from './Types_chat'; import { User } from './Types_chat';
import { to_print } from './Utils_chat'; import { to_print } from './Utils_chat';
import Button from './Element_button.svelte'; import Button from './Element_button.svelte';
export let back = "";
let users: User[] = list_block_user(); let users: User[] = list_block_user();
async function user_profile(room_user: string) async function user_profile(room_user: string)
{ {
to_print("in user_profile"); to_print("in user_profile");
await settings_user.set(room_user); await settings_user.set(room_user);
layout.set("user"); add_history("user");
} }
</script> </script>
@@ -22,7 +20,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button new_layout={back} my_class="back icon" my_title="go back {back}"> <Button my_class="back icon" my_title="go back {$history[1]}">
back back
</Button> </Button>

16
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_user.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { layout, current_room, settings_user } from './Store_chat'; import { history, add_history, current_room, settings_user } from './Store_chat';
import { get_is_admin, make_admin, set_block_user, remove_block_user } from './Request_rooms'; import { get_is_admin, make_admin, set_block_user, remove_block_user } from './Request_rooms';
import type { FetchResponse } from './Types_chat'; import type { FetchResponse } from './Types_chat';
import { to_print } from './Utils_chat'; import { to_print } from './Utils_chat';
@@ -9,8 +9,6 @@
import { invited_username } from '../store_invitation'; import { invited_username } from '../store_invitation';
import Warning from './Element_warning.svelte'; import Warning from './Element_warning.svelte';
export let back = "";
let is_admin = false; let is_admin = false;
get_is_admin().then(response => is_admin = response); get_is_admin().then(response => is_admin = response);
@@ -35,13 +33,13 @@
{ {
to_print("in block_user"); to_print("in block_user");
await set_block_user($settings_user.name); await set_block_user($settings_user.name);
layout.set("room"); add_history("room");
} }
async function unblock_user() async function unblock_user()
{ {
to_print("in unblock_user"); to_print("in unblock_user");
await remove_block_user($settings_user.name); await remove_block_user($settings_user.name);
layout.set("room"); add_history("room");
} }
async function get_list_block_user() async function get_list_block_user()
{ {
@@ -56,7 +54,7 @@
if (response.status >= 300 || response.error) if (response.status >= 300 || response.error)
show_error = response.error; show_error = response.error;
else else
layout.set("room"); add_history("room");
} }
</script> </script>
@@ -64,7 +62,7 @@
<div class="grid_box"> <div class="grid_box">
<!-- back --> <!-- back -->
<Button new_layout={back} my_class="back icon" my_title="go back {back}"> <Button my_class="back icon" my_title="go back {$history[1]}">
back back
</Button> </Button>
@@ -79,7 +77,7 @@
</Button> </Button>
<!-- room_name --> <!-- room_name -->
{#if back === "room_set"} {#if $history[1] === "room_set"}
<Button my_class="room_name deactivate __border_top"> <Button my_class="room_name deactivate __border_top">
{$current_room.client_name} {$current_room.client_name}
</Button> </Button>
@@ -107,7 +105,7 @@
</Button> </Button>
{/if} {/if}
{#if is_admin && back === "room_set" && $current_room.type !== "direct"} {#if is_admin && $history[1] === "room_set" && $current_room.type !== "direct"}
{#if !$settings_user.isadmin} {#if !$settings_user.isadmin}
<Button on:click={make_user_admin}> <Button on:click={make_user_admin}>
make admin make admin

2
srcs/requirements/svelte/api_front/src/pieces/chat/Request_rooms.ts
View File

@@ -61,7 +61,7 @@ export async function change_room(room: Room): Promise<FetchResponse>
set_client_name_on_room(room); set_client_name_on_room(room);
current_room.set(room); current_room.set(room);
layout.set("room"); add_history("room");
return response; return response;
} }

16
srcs/requirements/svelte/api_front/src/pieces/chat/Store_chat.ts
View File

@@ -7,6 +7,7 @@ export let all_rooms = writable<Room[]>([]);
export let current_room = writable<Room>(); export let current_room = writable<Room>();
export let settings_user = writable<User>(); export let settings_user = writable<User>();
export let layout = writable("close"); export let layout = writable("close");
export let history = writable<string[]>(["close", "home"]);
export let user; export let user;
export let socket; export let socket;
@@ -19,3 +20,18 @@ export function add_msg(name: string, message: string)
msgs.update(msgs => [...msgs, { name: "me", message: message }]); msgs.update(msgs => [...msgs, { name: "me", message: message }]);
} }
export function add_history(str: string)
{
history.update(history => [str, ...history]);
}
export function back_history()
{
history.update(history =>
{
if (history.length > 2)
return history.slice(1);
else
return ["home", "home"];
});
}