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

chat svelte now have a global variable socket

Browse Source
This commit is contained in:
simplonco
2023-01-04 18:21:01 +01:00
parent 61bd289981
commit 1c2d202ec1
13 changed files with 277 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
srcs/requirements/svelte/api_front/public/build/bundle.js
View File

@@ -1228,7 +1228,7 @@ var app = (function () {
/* node_modules/svelte-spa-router/Router.svelte generated by Svelte v3.53.1 */
const { Error: Error_1, Object: Object_1, console: console_1$9 } = globals;
const { Error: Error_1, Object: Object_1, console: console_1$b } = globals;
// (267:0) {:else}
function create_else_block$6(ctx) {
@@ -2008,7 +2008,7 @@ var app = (function () {
const writable_props = ['routes', 'prefix', 'restoreScrollState'];
Object_1.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$9.warn(`<Router> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$b.warn(`<Router> was created with unknown prop '${key}'`);
});
function routeEvent_handler(event) {
@@ -2292,7 +2292,7 @@ var app = (function () {
/* src/pieces/Header.svelte generated by Svelte v3.53.1 */
const { console: console_1$8 } = globals;
const { console: console_1$a } = globals;
const file$u = "src/pieces/Header.svelte";
// (27:39)
@@ -2551,7 +2551,7 @@ var app = (function () {
const writable_props = [];
Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$8.warn(`<Header> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$a.warn(`<Header> was created with unknown prop '${key}'`);
});
const click_handler = () => push('/');
@@ -3506,10 +3506,10 @@ var app = (function () {
button = element("button");
p = element("p");
if (default_slot) default_slot.c();
attr_dev(p, "class", "svelte-b72wpv");
attr_dev(p, "class", "svelte-1qngx3f");
add_location(p, file$q, 24, 1, 416);
attr_dev(button, "title", /*my_title*/ ctx[1]);
attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[0]) + " svelte-b72wpv"));
attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[0]) + " svelte-1qngx3f"));
add_location(button, file$q, 23, 0, 327);
},
l: function claim(nodes) {
@@ -3565,7 +3565,7 @@ var app = (function () {
attr_dev(button, "title", /*my_title*/ ctx[1]);
}
if (!current || dirty & /*my_class*/ 1 && button_class_value !== (button_class_value = "" + (null_to_empty(/*my_class*/ ctx[0]) + " svelte-b72wpv"))) {
if (!current || dirty & /*my_class*/ 1 && button_class_value !== (button_class_value = "" + (null_to_empty(/*my_class*/ ctx[0]) + " svelte-1qngx3f"))) {
attr_dev(button, "class", button_class_value);
}
},
@@ -7853,7 +7853,20 @@ var app = (function () {
connect: lookup,
});
/* src/pieces/chat/Chat_socket.svelte generated by Svelte v3.53.1 */
const address = `http://${'transcendance'}:${'8080'}`;
const socket$1 = lookup(address, { path: '/chat' });
const userPomise = fetch(`${address}/api/v2/user`).then(x => x.json());
let user;
userPomise.then(data => {
user = data;
});
/* src/pieces/chat/Layout_room.svelte generated by Svelte v3.53.1 */
const { console: console_1$9 } = globals;
const file$m = "src/pieces/chat/Layout_room.svelte";
function get_each_context$4(ctx, list, i) {
@@ -7862,7 +7875,7 @@ var app = (function () {
return child_ctx;
}
// (47:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
// (56:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
function create_default_slot_4$2(ctx) {
let t;
@@ -7882,14 +7895,14 @@ var app = (function () {
block,
id: create_default_slot_4$2.name,
type: "slot",
source: "(47:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
source: "(56:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
ctx
});
return block;
}
// (52:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
// (61:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
function create_default_slot_3$4(ctx) {
let t;
@@ -7909,14 +7922,14 @@ var app = (function () {
block,
id: create_default_slot_3$4.name,
type: "slot",
source: "(52:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
source: "(61:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
ctx
});
return block;
}
// (57:1) <Button bind:layout new_layout="close" my_class="close icon">
// (66:1) <Button bind:layout new_layout="close" my_class="close icon">
function create_default_slot_2$8(ctx) {
let t;
@@ -7936,14 +7949,14 @@ var app = (function () {
block,
id: create_default_slot_2$8.name,
type: "slot",
source: "(57:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
source: "(66:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
ctx
});
return block;
}
// (65:4) <Msg name={msg.name}>
// (74:4) <Msg name={msg.name}>
function create_default_slot_1$8(ctx) {
let html_tag;
let raw_value = /*msg*/ ctx[4].content + "";
@@ -7972,14 +7985,14 @@ var app = (function () {
block,
id: create_default_slot_1$8.name,
type: "slot",
source: "(65:4) <Msg name={msg.name}>",
source: "(74:4) <Msg name={msg.name}>",
ctx
});
return block;
}
// (64:3) {#each msgs as msg}
// (73:3) {#each msgs as msg}
function create_each_block$4(ctx) {
let msg_1;
let current;
@@ -8029,14 +8042,14 @@ var app = (function () {
block,
id: create_each_block$4.name,
type: "each",
source: "(64:3) {#each msgs as msg}",
source: "(73:3) {#each msgs as msg}",
ctx
});
return block;
}
// (82:1) <Button my_class="send" on_click={send_msg}>
// (91:1) <Button my_class="send" on_click={send_msg}>
function create_default_slot$a(ctx) {
let t;
@@ -8056,7 +8069,7 @@ var app = (function () {
block,
id: create_default_slot$a.name,
type: "slot",
source: "(82:1) <Button my_class=\\\"send\\\" on_click={send_msg}>",
source: "(91:1) <Button my_class=\\\"send\\\" on_click={send_msg}>",
ctx
});
@@ -8183,17 +8196,17 @@ var app = (function () {
t4 = space();
create_component(button3.$$.fragment);
attr_dev(div0, "class", "msg_thread svelte-1quyp80");
add_location(div0, file$m, 62, 2, 1045);
add_location(div0, file$m, 71, 2, 1256);
attr_dev(div1, "class", "panel panel_msg svelte-1quyp80");
add_location(div1, file$m, 61, 1, 1013);
add_location(div1, file$m, 70, 1, 1224);
attr_dev(div2, "class", "text_area svelte-1quyp80");
attr_dev(div2, "contenteditable", "true");
if (/*msg*/ ctx[4] === void 0) add_render_callback(() => /*div2_input_handler*/ ctx[10].call(div2));
add_location(div2, file$m, 71, 2, 1218);
add_location(div2, file$m, 80, 2, 1429);
attr_dev(div3, "class", "panel_write svelte-1quyp80");
add_location(div3, file$m, 70, 1, 1190);
add_location(div3, file$m, 79, 1, 1401);
attr_dev(div4, "class", "grid_box svelte-1quyp80");
add_location(div4, file$m, 43, 0, 625);
add_location(div4, file$m, 52, 0, 836);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -8371,6 +8384,13 @@ var app = (function () {
function instance$p($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('Layout_room', slots, []);
socket$1.on('message', data => {
console.log("received msg :");
console.log(data);
add_msg("other", data);
});
let { layout = "" } = $$props;
let { back = "" } = $$props;
let msg = "";
@@ -8382,10 +8402,13 @@ var app = (function () {
}
function send_msg() {
console.log("user:");
console.log(user);
console.log(user.username);
$$invalidate(4, msg = msg.trim());
if (msg.length > 0) {
//socket.emit('sendmsg', msg);
socket$1.emit('message', msg);
add_msg("me", msg);
}
@@ -8403,7 +8426,7 @@ var app = (function () {
const writable_props = ['layout', 'back'];
Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_room> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$9.warn(`<Layout_room> was created with unknown prop '${key}'`);
});
function button0_layout_binding(value) {
@@ -8441,7 +8464,8 @@ var app = (function () {
$$self.$capture_state = () => ({
Button: Chat_button,
Msg: Chat_msg,
io: lookup,
socket: socket$1,
user,
layout,
back,
msg,
@@ -10325,9 +10349,11 @@ var app = (function () {
}
/* src/pieces/chat/Layout_create.svelte generated by Svelte v3.53.1 */
const { console: console_1$8 } = globals;
const file$h = "src/pieces/chat/Layout_create.svelte";
// (13:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
// (27:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
function create_default_slot_2$3(ctx) {
let t;
@@ -10347,14 +10373,14 @@ var app = (function () {
block,
id: create_default_slot_2$3.name,
type: "slot",
source: "(13:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
source: "(27:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
ctx
});
return block;
}
// (18:1) <Button my_class="create deactivate">
// (32:1) <Button my_class="create deactivate">
function create_default_slot_1$3(ctx) {
let t;
@@ -10374,14 +10400,14 @@ var app = (function () {
block,
id: create_default_slot_1$3.name,
type: "slot",
source: "(18:1) <Button my_class=\\\"create deactivate\\\">",
source: "(32:1) <Button my_class=\\\"create deactivate\\\">",
ctx
});
return block;
}
// (23:1) <Button bind:layout new_layout="close" my_class="close icon">
// (37:1) <Button bind:layout new_layout="close" my_class="close icon">
function create_default_slot$5(ctx) {
let t;
@@ -10401,7 +10427,7 @@ var app = (function () {
block,
id: create_default_slot$5.name,
type: "slot",
source: "(23:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
source: "(37:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
ctx
});
@@ -10446,12 +10472,10 @@ var app = (function () {
let t16;
let input4;
let t17;
let p5;
let t19;
let input5;
let t20;
let input6;
let current;
let mounted;
let dispose;
function button0_layout_binding(value) {
/*button0_layout_binding*/ ctx[2](value);
@@ -10541,75 +10565,65 @@ var app = (function () {
t16 = space();
input4 = element("input");
t17 = space();
p5 = element("p");
p5.textContent = "confirm password :";
t19 = space();
input5 = element("input");
t20 = space();
input6 = element("input");
attr_dev(p0, "class", "svelte-1cmnkcw");
add_location(p0, file$h, 30, 26, 546);
attr_dev(p0, "class", "svelte-111r258");
add_location(p0, file$h, 53, 26, 1353);
attr_dev(label0, "for", "chat_name");
add_location(label0, file$h, 30, 3, 523);
add_location(label0, file$h, 53, 3, 1330);
attr_dev(input0, "id", "chat_name");
input0.required = true;
add_location(input0, file$h, 31, 3, 580);
add_location(input0, file$h, 54, 3, 1387);
attr_dev(input1, "id", "chat_public");
attr_dev(input1, "type", "radio");
attr_dev(input1, "name", "chat_create_type");
input1.checked = true;
attr_dev(input1, "class", "svelte-1cmnkcw");
add_location(input1, file$h, 33, 3, 638);
attr_dev(p1, "class", "svelte-1cmnkcw");
add_location(p1, file$h, 34, 43, 752);
attr_dev(input1, "class", "svelte-111r258");
add_location(input1, file$h, 56, 3, 1445);
attr_dev(p1, "class", "svelte-111r258");
add_location(p1, file$h, 57, 43, 1559);
attr_dev(label1, "for", "chat_public");
attr_dev(label1, "class", "_radio svelte-1cmnkcw");
add_location(label1, file$h, 34, 3, 712);
attr_dev(label1, "class", "_radio svelte-111r258");
add_location(label1, file$h, 57, 3, 1519);
attr_dev(input2, "id", "chat_private");
attr_dev(input2, "type", "radio");
attr_dev(input2, "name", "chat_create_type");
attr_dev(input2, "class", "svelte-1cmnkcw");
add_location(input2, file$h, 36, 3, 801);
attr_dev(p2, "class", "svelte-1cmnkcw");
add_location(p2, file$h, 37, 44, 909);
attr_dev(input2, "class", "svelte-111r258");
add_location(input2, file$h, 59, 3, 1608);
attr_dev(p2, "class", "svelte-111r258");
add_location(p2, file$h, 60, 44, 1716);
attr_dev(label2, "for", "chat_private");
attr_dev(label2, "class", "_radio svelte-1cmnkcw");
add_location(label2, file$h, 37, 3, 868);
attr_dev(label2, "class", "_radio svelte-111r258");
add_location(label2, file$h, 60, 3, 1675);
attr_dev(input3, "id", "chat_protected");
attr_dev(input3, "class", "__check_change_next svelte-1cmnkcw");
attr_dev(input3, "class", "__check_change_next svelte-111r258");
attr_dev(input3, "type", "radio");
attr_dev(input3, "name", "chat_create_type");
add_location(input3, file$h, 39, 3, 961);
attr_dev(p3, "class", "svelte-1cmnkcw");
add_location(p3, file$h, 40, 46, 1101);
add_location(input3, file$h, 62, 3, 1768);
attr_dev(p3, "class", "svelte-111r258");
add_location(p3, file$h, 63, 46, 1908);
attr_dev(label3, "for", "chat_protected");
attr_dev(label3, "class", "_radio svelte-1cmnkcw");
add_location(label3, file$h, 40, 3, 1058);
attr_dev(p4, "class", "svelte-1cmnkcw");
add_location(p4, file$h, 43, 27, 1206);
attr_dev(label3, "class", "_radio svelte-111r258");
add_location(label3, file$h, 63, 3, 1865);
attr_dev(p4, "class", "svelte-111r258");
add_location(p4, file$h, 66, 27, 2013);
attr_dev(label4, "for", "chat_pswd");
add_location(label4, file$h, 43, 4, 1183);
add_location(label4, file$h, 66, 4, 1990);
attr_dev(input4, "id", "chat_pswd");
attr_dev(input4, "type", "password");
attr_dev(input4, "placeholder", "minimum 8 characters");
attr_dev(input4, "minlength", "8");
add_location(input4, file$h, 44, 4, 1245);
attr_dev(p5, "class", "svelte-1cmnkcw");
add_location(p5, file$h, 45, 4, 1338);
attr_dev(input5, "type", "password");
add_location(input5, file$h, 46, 4, 1368);
add_location(input4, file$h, 67, 4, 2052);
attr_dev(div0, "class", "__to_show");
add_location(div0, file$h, 42, 3, 1155);
attr_dev(input6, "type", "submit");
input6.value = "⮡";
attr_dev(input6, "class", "svelte-1cmnkcw");
add_location(input6, file$h, 48, 3, 1405);
attr_dev(form, "class", "svelte-1cmnkcw");
add_location(form, file$h, 28, 2, 495);
attr_dev(div1, "class", "panel panel_create");
add_location(div1, file$h, 27, 1, 460);
attr_dev(div2, "class", "grid_box svelte-1cmnkcw");
add_location(div2, file$h, 9, 0, 115);
add_location(div0, file$h, 65, 3, 1962);
attr_dev(input5, "type", "submit");
input5.value = "⮡";
attr_dev(input5, "class", "svelte-111r258");
add_location(input5, file$h, 69, 3, 2154);
add_location(form, file$h, 51, 2, 1262);
attr_dev(div1, "class", "panel panel_create __border_top svelte-111r258");
add_location(div1, file$h, 41, 1, 717);
attr_dev(div2, "class", "grid_box svelte-111r258");
add_location(div2, file$h, 23, 0, 372);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -10649,13 +10663,14 @@ var app = (function () {
append_dev(label4, p4);
append_dev(div0, t16);
append_dev(div0, input4);
append_dev(div0, t17);
append_dev(div0, p5);
append_dev(div0, t19);
append_dev(div0, input5);
append_dev(form, t20);
append_dev(form, input6);
append_dev(form, t17);
append_dev(form, input5);
current = true;
if (!mounted) {
dispose = listen_dev(form, "submit", prevent_default(handleSubmit), false, true, false);
mounted = true;
}
},
p: function update(ctx, [dirty]) {
const button0_changes = {};
@@ -10712,6 +10727,8 @@ var app = (function () {
destroy_component(button0);
destroy_component(button1);
destroy_component(button2);
mounted = false;
dispose();
}
};
@@ -10726,6 +10743,16 @@ var app = (function () {
return block;
}
function handleSubmit(evt) {
let formIsValid = evt.target.checkValidity();
console.log("----- formIsValid:");
console.log(formIsValid);
if (formIsValid) {
fetch('/api/v2/chat/create', { method: 'POST', body: evt.target });
}
}
function instance$k($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('Layout_create', slots, []);
@@ -10734,7 +10761,7 @@ var app = (function () {
const writable_props = ['layout', 'back'];
Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Layout_create> was created with unknown prop '${key}'`);
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$8.warn(`<Layout_create> was created with unknown prop '${key}'`);
});
function button0_layout_binding(value) {
@@ -10752,7 +10779,7 @@ var app = (function () {
if ('back' in $$props) $$invalidate(1, back = $$props.back);
};
$$self.$capture_state = () => ({ Button: Chat_button, layout, back });
$$self.$capture_state = () => ({ Button: Chat_button, layout, back, handleSubmit });
$$self.$inject_state = $$props => {
if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
@@ -13961,54 +13988,53 @@ var app = (function () {
let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('Chat', slots, []);
let { color = "transparent" } = $$props;
const socket = lookup(`http://${'transcendance'}:${'8080'}`, { path: '/chat' });
onMount(async => {
socket.on('connect', function () {
socket$1.on('connect', function () {
console.log("socket.io connected");
});
socket.on('disconnect', function () {
socket$1.on('disconnect', function () {
console.log("socket.io disconnected");
});
socket.on('connect_error', function () {
socket$1.on('connect_error', function () {
console.log("socket.io connect_error");
});
socket.on('connect_timeout', function () {
socket$1.on('connect_timeout', function () {
console.log("socket.io connect_timeout");
});
socket.on('error', function () {
socket$1.on('error', function () {
console.log("socket.io error");
});
socket.on('reconnect', function () {
socket$1.on('reconnect', function () {
console.log("socket.io reconnect");
});
socket.on('reconnect_attempt', function () {
socket$1.on('reconnect_attempt', function () {
console.log("socket.io reconnect_attempt");
});
socket.on('reconnecting', function () {
socket$1.on('reconnecting', function () {
console.log("socket.io reconnecting");
});
socket.on('reconnect_error', function () {
socket$1.on('reconnect_error', function () {
console.log("socket.io reconnect_error");
});
socket.on('reconnect_failed', function () {
socket$1.on('reconnect_failed', function () {
console.log("socket.io reconnect_failed");
});
socket.on('ping', function () {
socket$1.on('ping', function () {
console.log("socket.io ping");
});
socket.on('pong', function () {
socket$1.on('pong', function () {
console.log("socket.io pong");
});
});
@@ -14023,7 +14049,7 @@ var app = (function () {
if ('color' in $$props) $$invalidate(0, color = $$props.color);
};
$$self.$capture_state = () => ({ Layouts: Chat_layouts, color, onMount, io: lookup, socket });
$$self.$capture_state = () => ({ Layouts: Chat_layouts, color, onMount, socket: socket$1 });
$$self.$inject_state = $$props => {
if ('color' in $$props) $$invalidate(0, color = $$props.color);

2
srcs/requirements/svelte/api_front/public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

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

@@ -3,14 +3,12 @@
import Layouts from './Chat_layouts.svelte';
export let color = "transparent";
import { onMount } from 'svelte';
/* web sockets with socket.io
*/
import { onMount } from 'svelte';
import io from 'socket.io-client';
const socket = io(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`, {
path: '/chat'
});
import { socket } from './Chat_socket.svelte';
onMount(async => {
socket.on('connect', function(){
console.log("socket.io connected");

49
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_button.svelte
View File

@@ -67,7 +67,7 @@
}
/* for btn list
/* .list
*/
.list:not(:hover) {
background-color: rgb(240, 240, 240);
@@ -77,14 +77,14 @@
}
/* for transparent btn
/* .transparent
*/
.transparent:not(:hover) {
background-color: transparent;
}
/* for deactivated btn
/* .deactivated
*/
.deactivate {
background-color: transparent;
@@ -92,7 +92,40 @@
}
/* for icon
/* .border
*/
.border {
border: 1px solid rgb(150, 150, 150);
}
/* .light
*/
.light {
background-color: rgb(233, 233, 233);
}
.light.border {
border: 1px solid rgb(204, 204, 204);
}
.light:hover {
background-color: rgb(220, 220, 220);
}
.light.border:hover {
border-color: rgb(200, 200, 200);
}
.light:active {
background-color: rgb(210, 210, 210);
}
/* .thin
*/
.thin p {
padding: 5px;
}
/* .icon
*/
.icon p {
display: none;
@@ -107,7 +140,7 @@
}
/* for 3 dots btn
/* .dots
*/
.dots::after {
content: '\2807';
@@ -123,7 +156,7 @@
}
/* for close btn
/* .close
*/
.close::before {
content: "";
@@ -136,7 +169,7 @@
}
/* for back btn
/* .back
*/
.back::before {
content: "";
@@ -151,7 +184,7 @@
}
/* for blocked user
/* .blocked
https://www.fileformat.info/info/unicode/category/So/list.htm
U+1F512 LOCK 🔒
U+1F513 OPEN LOCK 🔓

17
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_socket.svelte Normal file
View File

@@ -0,0 +1,17 @@
<script context="module">
import io from 'socket.io-client';
const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
export const socket = io(address, {
path: '/chat'
});
const userPomise = fetch(`${address}/api/v2/user`).then((x) => x.json());
export let user
userPomise.then((data) => {
user = data;
});
</script>

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

@@ -5,6 +5,20 @@
export let layout = "";
export let back = "";
function handleSubmit(evt)
{
let formIsValid = evt.target.checkValidity();
console.log("----- formIsValid:");
console.log(formIsValid);
if (formIsValid)
{
fetch('/api/v2/chat/create', {
method: 'POST',
body: evt.target,
})
}
}
</script>
<div class="grid_box">
@@ -25,8 +39,17 @@
</Button>
<!-- panel_create -->
<div class="panel panel_create">
<form>
<div class="panel panel_create __border_top">
<!--
<form action="/api/v2/chat/create" method="post" onsubmit="return submit();">
<Button on_click={submit} my_class="border light thin">&#x2BA1</Button>
<form bind:this={form} onsubmit="return my_submit();">
<form action="/api/v2/chat/create" method="post" on:submit|stopPropagation>
<form action="/api/v2/chat/create" method="post">
<form action="/api/v2/chat/create" method="post" on:submit|preventDefault>
<form bind:this={form} on:submit|preventDefault={handleSubmit}>
-->
<form on:submit|preventDefault={handleSubmit}>
<!-- name: -->
<label for="chat_name"><p>new room name :</p></label>
<input id="chat_name" required>
@@ -43,14 +66,11 @@
<div class="__to_show">
<label for="chat_pswd"><p>choose a password :</p></label>
<input id="chat_pswd" type="password" placeholder="minimum 8 characters" minlength="8">
<p>confirm password :</p>
<input type="password">
</div>
<input type="submit" value="&#x2BA1">
</form>
</div>
</div>
<style>
@@ -71,19 +91,19 @@
/* radio elements style check
*/
form input[type=radio] {
.panel input[type=radio] {
display: none;
}
form label._radio {
.panel label._radio {
margin: 0px 20px 0px auto;
padding-right: 10px;
cursor: pointer;
}
form label._radio p {
.panel label._radio p {
margin-top: 0px;
margin-bottom: 0px;
}
form label._radio::after {
.panel label._radio::after {
content: "";
position: absolute;
top: calc(50% - 6px);
@@ -95,7 +115,7 @@
box-sizing: border-box;
cursor: pointer;
}
form input[type=radio]:checked
.panel input[type=radio]:checked
+ label._radio::after {
background-color: rgb(200, 200, 200);
}
@@ -103,7 +123,7 @@
/* submit
*/
form input[type=submit] {
.panel input[type=submit] {
margin-top: 20px;
}

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

@@ -39,7 +39,7 @@
placeholder
</Button>
<Button bind:layout new_layout="room" my_class="list">
join room
room
</Button>
<Button bind:layout new_layout="room" my_class="list">
one room

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

@@ -3,7 +3,13 @@
import Button from './Chat_button.svelte';
import Msg from './Chat_msg.svelte';
import io from 'socket.io-client';
import { socket, user } from './Chat_socket.svelte';
socket.on('message', (data) => {
console.log("received msg :");
console.log(data);
add_msg("other", data);
});
export let layout = "";
export let back = "";
@@ -19,10 +25,13 @@
function send_msg()
{
msg = msg.trim();
console.log("user:");
console.log(user);
console.log(user.username);
msg = msg.trim();
if (msg.length > 0) {
//socket.emit('sendmsg', msg);
socket.emit('message', msg);
add_msg("me", msg);
}