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

2
srcs/requirements/nestjs/api_back/src/app.module.ts
View File

@@ -9,6 +9,7 @@ import { AuthenticationModule } from './auth/42/authentication.module';
import { PassportModule } from '@nestjs/passport'; import { PassportModule } from '@nestjs/passport';
import { GameModule } from './game/game.module'; import { GameModule } from './game/game.module';
import { ChatGateway } from './chat/chat.gateway'; import { ChatGateway } from './chat/chat.gateway';
import { ChatModule } from './chat/chat.module';
@Module({ @Module({
imports: [ imports: [
@@ -30,6 +31,7 @@ import { ChatGateway } from './chat/chat.gateway';
//avec une classe pour le module //avec une classe pour le module
synchronize: true, synchronize: true,
}), }),
ChatModule,
// GameModule, // GameModule,
], ],
controllers: [AppController], controllers: [AppController],

11
srcs/requirements/nestjs/api_back/src/chat/chat.controller.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Controller, Post, Body } from '@nestjs/common';
@Controller('/chat/create')
export class ChatController {
@Post()
async handleSubmit(@Body() formData: any) {
console.log("------ create:");
console.log(formData);
}
}

17
srcs/requirements/nestjs/api_back/src/chat/chat.gateway.ts
View File

@@ -8,6 +8,7 @@ import {
} from '@nestjs/websockets'; } from '@nestjs/websockets';
import { UsersService } from 'src/users/users.service'; import { UsersService } from 'src/users/users.service';
import { PaginationQueryDto } from 'src/common/dto/pagination-query.dto'; import { PaginationQueryDto } from 'src/common/dto/pagination-query.dto';
import { ChatService } from 'src/chat/chat.service';
@WebSocketGateway(5000, { @WebSocketGateway(5000, {
path: '/chat', path: '/chat',
@@ -19,6 +20,7 @@ export class ChatGateway
constructor constructor
( (
private usersService: UsersService, private usersService: UsersService,
private chatService: ChatService,
) {} ) {}
@WebSocketServer() @WebSocketServer()
@@ -33,11 +35,16 @@ export class ChatGateway
console.log('---- client disconnected :', client.id); console.log('---- client disconnected :', client.id);
} }
@SubscribeMessage('') // @UseGuards(AuthenticateGuard)
handleMessage(): void { @SubscribeMessage('message')
const paginationQuery = new PaginationQueryDto(); handleMessage(@MessageBody() message: string): void {
const users = this.usersService.findAll(paginationQuery); console.log('-------- msg --------------');
console.log('users :', users); console.log(message);
// const paginationQuery = new PaginationQueryDto();
// const users = this.usersService.findAll(paginationQuery);
// console.log('users :', users);
// this.server.emit('message', message);
this.chatService.add_message(this.server, message);
} }
} }

22
srcs/requirements/nestjs/api_back/src/chat/chat.module.ts
View File

@@ -1,16 +1,12 @@
//import { Module } from '@nestjs/common'; import { Module } from '@nestjs/common';
//import { TypeOrmModule } from '@nestjs/typeorm'; import { ChatController } from './chat.controller';
//import { FriendshipService } from './friendship.service'; import { ChatService } from './chat.service';
//import { FriendshipController } from './friendship.controller';
//import { Friendship } from './entities/friendship.entity';
//import { User } from '../users/entities/user.entity';
//@Module({ @Module({
// imports: [TypeOrmModule.forFeature([Friendship, User])], providers: [ChatService],
// providers: [FriendshipService], controllers: [ChatController],
// controllers: [FriendshipController], exports: [ChatService],
// exports: [FriendshipService], })
//})
//export class FriendshipsModule {} export class ChatModule {}

198
srcs/requirements/nestjs/api_back/src/chat/chat.service.ts
View File

@@ -1,204 +1,18 @@
//import { HttpException, HttpStatus, Injectable } from '@nestjs/common';
import { Injectable } from '@nestjs/common'; import { Injectable } from '@nestjs/common';
//import { InjectRepository } from '@nestjs/typeorm'; //import { InjectRepository } from '@nestjs/typeorm';
//import { User } from 'src/users/entities/user.entity'; //import { User } from 'src/users/entities/user.entity';
//import { Repository } from 'typeorm'; //import { Repository } from 'typeorm';
//import { CreateFriendshipDto } from './dto/create-friendship.dto';
//import { Friendship, FriendshipStatus } from './entities/friendship.entity';
/*
@Injectable() @Injectable()
export class FriendshipService { export class ChatService {
constructor( constructor(
@InjectRepository(Friendship) // @InjectRepository(User)
private readonly friendshipRepository: Repository<Friendship>, // private readonly userRepository: Repository<User>,
@InjectRepository(User)
private readonly userRepository: Repository<User>,
) { } ) { }
async add_message(server, message) {
async findOneFriend(friendshipId: string, username: string) { return server.emit('message', message);
const friendship = await this.friendshipRepository.find({ where: { id: +friendshipId, senderUsername: username, status: FriendshipStatus.ACCEPTED } });
if (!friendship)
throw new HttpException(`The requested friend not found.`, HttpStatus.NOT_FOUND);
return friendship;
}
async findOneBlocked(friendshipId: string, username: string) {
const friendship = await this.friendshipRepository.find({ where: { id: +friendshipId, senderUsername: username, status: FriendshipStatus.BLOCKED } });
if (!friendship)
throw new HttpException(`The requested blocked not found.`, HttpStatus.NOT_FOUND);
return friendship;
}
async findAllFriends(username: string) {
const friendship = await this.friendshipRepository
.createQueryBuilder('friendship')
.where('friendship.status = :status', { status: FriendshipStatus.ACCEPTED })
.andWhere('friendship.receiverUsername = :addressee', { addressee: username })
.orWhere('friendship.senderUsername = :requester', { requester: username })
.andWhere('friendship.status = :status', { status: FriendshipStatus.ACCEPTED })
.getMany();
for (const friend of friendship)
console.log("FRIENDSHIP : " + friend.status);
return friendship;
}
async findAllBlockedFriends(username: string) {
const friendships : Friendship[] = await this.friendshipRepository
.createQueryBuilder('friendship')
.where('friendship.senderUsername = :requestee', { requestee: username })
.andWhere('friendship.status = :status', { status: FriendshipStatus.BLOCKED })
.getMany();
let partialFriendship : Partial<Friendship>[] = [];
for (const friendship of friendships) {
partialFriendship.push({id: friendship.id, date: friendship.date, senderUsername: friendship.senderUsername, receiverUsername: friendship.receiverUsername, status: friendship.status});
}
return partialFriendship;
}
async findAllPendantRequestsForFriendship(username: string) {
const friendship = await this.friendshipRepository
.createQueryBuilder('friendship')
.where('friendship.senderUsername = :requestee', { requestee: username })
.andWhere('friendship.status = :status', { status: FriendshipStatus.REQUESTED })
.getMany();
let partialFriendship : Partial<Friendship>[] = [];
for (const friend of friendship) {
console.log("FRIENDSHIP : " + friend);
partialFriendship.push({id: friend.id, senderUsername: friend.senderUsername, receiverUsername: friend.receiverUsername, status: friend.status});
}
console.log("Pendant requests : " + partialFriendship);
return partialFriendship;
}
async findAllReceivedRequestsForFriendship(username: string) {
const friendship = await this.friendshipRepository
.createQueryBuilder('friendship')
.where('friendship.receiverUsername = :addressee', { addressee: username })
.andWhere('friendship.status = :status', { status: FriendshipStatus.REQUESTED })
.getMany();
let partialFriendship : Partial<Friendship>[] = [];
for (const friend of friendship) {
partialFriendship.push({id: friend.id, senderUsername: friend.senderUsername, receiverUsername: friend.receiverUsername, status: friend.status});
}
return partialFriendship;
}
async create(createFriendshipDto: CreateFriendshipDto, creator : User) : Promise <Partial<Friendship>> {
console.log("DTO : \n")
console.log({...createFriendshipDto})
const receiver = await this.userRepository.findOneBy({username: createFriendshipDto.receiverUsername});
if (!receiver)
throw new HttpException(`The addressee does not exist.`, HttpStatus.NOT_FOUND);
if (createFriendshipDto.status !== FriendshipStatus.REQUESTED && createFriendshipDto.status !== FriendshipStatus.BLOCKED)
throw new HttpException(`The status is not valid.`, HttpStatus.NOT_FOUND);
const friendship = await this.friendshipRepository.findOneBy({ sender: creator, receiver: receiver });
if (friendship) {
if (friendship.status && friendship.status === FriendshipStatus.ACCEPTED)
throw new HttpException(`The friendship request has already been accepted.`, HttpStatus.OK);
else if (friendship.status && friendship.status === FriendshipStatus.REQUESTED)
throw new HttpException(`The friendship request has already been sent the ${friendship.date}.`, HttpStatus.OK);
else if (friendship.status && friendship.status === FriendshipStatus.BLOCKED)
throw new HttpException(`We can't do that`, HttpStatus.OK);
else if (friendship.status && friendship.status === FriendshipStatus.DECLINED)
throw new HttpException(`The request has been declined.`, HttpStatus.OK);
}
const newFriendship = new Friendship();
newFriendship.sender = creator;
newFriendship.senderUsername = creator.username;
newFriendship.receiver = receiver;
newFriendship.receiverUsername = receiver.username;
newFriendship.status = createFriendshipDto.status;
const savedFriendship = this.friendshipRepository.save(newFriendship);
const partialFriendship : Partial<Friendship> = {
id : (await savedFriendship).id,
date : (await savedFriendship).date,
receiverUsername: (await savedFriendship).receiverUsername,
status : (await savedFriendship).status
}
console.log({...partialFriendship})
return partialFriendship;
}
async acceptFriendship(relationshipId: string, user: User) {
const relation = await this.friendshipRepository.findOneBy({ id: +relationshipId });
if (!relation)
throw new HttpException(`The requested relationship not found.`, HttpStatus.NOT_FOUND);
if (relation.sender.id === user.id) {
throw new HttpException(`You can't accept your own request.`, HttpStatus.NOT_FOUND);
}
relation.status = FriendshipStatus.ACCEPTED;
const savedFriendship = this.friendshipRepository.save(relation);
const partialFriendship : Partial<Friendship> = {
id : (await savedFriendship).id,
date : (await savedFriendship).date,
receiverUsername: (await savedFriendship).receiverUsername,
status : (await savedFriendship).status
}
return partialFriendship;
}
async declineFriendship(relationshipId: string, user: User) {
const relation = await this.friendshipRepository.findOneBy({ id: +relationshipId });
if (!relation)
throw new HttpException(`The requested relationship not found.`, HttpStatus.NOT_FOUND);
if (relation.sender.id === user.id) {
throw new HttpException(`You can't accept your own request.`, HttpStatus.NOT_FOUND);
}
relation.status = FriendshipStatus.DECLINED;
const savedFriendship = this.friendshipRepository.save(relation);
const partialFriendship : Partial<Friendship> = {
id : (await savedFriendship).id,
date : (await savedFriendship).date,
receiverUsername: (await savedFriendship).receiverUsername,
status : (await savedFriendship).status
}
return partialFriendship
}
async blockFriendship(relationshipId: string, user: User) {
const relation = await this.friendshipRepository.findOneBy({ id: +relationshipId });
if (!relation)
throw new HttpException(`The requested relationship not found.`, HttpStatus.NOT_FOUND);
if (relation.sender.id === user.id) {
throw new HttpException(`You can't accept your own request.`, HttpStatus.NOT_FOUND);
}
relation.status = FriendshipStatus.BLOCKED;
const savedFriendship = this.friendshipRepository.save(relation);
const partialFriendship : Partial<Friendship> = {
id : (await savedFriendship).id,
date : (await savedFriendship).date,
receiverUsername: (await savedFriendship).receiverUsername,
status : (await savedFriendship).status
}
return partialFriendship
}
async removeFriendship(relationshipId: string, user : User) {
const friendship = await this.friendshipRepository.findOneBy({ id: +relationshipId });
if (!friendship)
throw new HttpException(`Your friend could not be deleted.`, HttpStatus.NOT_FOUND);
if (friendship.sender.id !== user.id || friendship.receiver.id !== user.id) {
throw new HttpException(`You can't do that.`, HttpStatus.FORBIDDEN);
}
return this.friendshipRepository.remove(friendship);
}
async findIfUserIsBlockedOrHasBlocked(userConnectedId: string, userToFindId: string) {
console.log("finding if user is blocked")
const friendship = await this.friendshipRepository
.createQueryBuilder('friendship')
.where('friendship.senderUsername = :requestee', { requestee: userConnectedId })
.orWhere('friendship.senderUsername = :requesteeBis', { requesteeBis: userToFindId })
.andWhere('friendship.status = :status', { status: FriendshipStatus.BLOCKED })
.getOne();
if (friendship) {
console.log('we are blocked in friendship.service')
return true;
}
return false;
} }
} }
*/

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 */ /* 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} // (267:0) {:else}
function create_else_block$6(ctx) { function create_else_block$6(ctx) {
@@ -2008,7 +2008,7 @@ var app = (function () {
const writable_props = ['routes', 'prefix', 'restoreScrollState']; const writable_props = ['routes', 'prefix', 'restoreScrollState'];
Object_1.keys($$props).forEach(key => { 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) { function routeEvent_handler(event) {
@@ -2292,7 +2292,7 @@ var app = (function () {
/* src/pieces/Header.svelte generated by Svelte v3.53.1 */ /* 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"; const file$u = "src/pieces/Header.svelte";
// (27:39) // (27:39)
@@ -2551,7 +2551,7 @@ var app = (function () {
const writable_props = []; const writable_props = [];
Object.keys($$props).forEach(key => { 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('/'); const click_handler = () => push('/');
@@ -3506,10 +3506,10 @@ var app = (function () {
button = element("button"); button = element("button");
p = element("p"); p = element("p");
if (default_slot) default_slot.c(); 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); add_location(p, file$q, 24, 1, 416);
attr_dev(button, "title", /*my_title*/ ctx[1]); 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); add_location(button, file$q, 23, 0, 327);
}, },
l: function claim(nodes) { l: function claim(nodes) {
@@ -3565,7 +3565,7 @@ var app = (function () {
attr_dev(button, "title", /*my_title*/ ctx[1]); 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); attr_dev(button, "class", button_class_value);
} }
}, },
@@ -7853,7 +7853,20 @@ var app = (function () {
connect: lookup, 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 */ /* 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"; const file$m = "src/pieces/chat/Layout_room.svelte";
function get_each_context$4(ctx, list, i) { function get_each_context$4(ctx, list, i) {
@@ -7862,7 +7875,7 @@ var app = (function () {
return child_ctx; 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) { function create_default_slot_4$2(ctx) {
let t; let t;
@@ -7882,14 +7895,14 @@ var app = (function () {
block, block,
id: create_default_slot_4$2.name, id: create_default_slot_4$2.name,
type: "slot", 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 ctx
}); });
return block; 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) { function create_default_slot_3$4(ctx) {
let t; let t;
@@ -7909,14 +7922,14 @@ var app = (function () {
block, block,
id: create_default_slot_3$4.name, id: create_default_slot_3$4.name,
type: "slot", 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 ctx
}); });
return block; 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) { function create_default_slot_2$8(ctx) {
let t; let t;
@@ -7936,14 +7949,14 @@ var app = (function () {
block, block,
id: create_default_slot_2$8.name, id: create_default_slot_2$8.name,
type: "slot", 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 ctx
}); });
return block; return block;
} }
// (65:4) <Msg name={msg.name}> // (74:4) <Msg name={msg.name}>
function create_default_slot_1$8(ctx) { function create_default_slot_1$8(ctx) {
let html_tag; let html_tag;
let raw_value = /*msg*/ ctx[4].content + ""; let raw_value = /*msg*/ ctx[4].content + "";
@@ -7972,14 +7985,14 @@ var app = (function () {
block, block,
id: create_default_slot_1$8.name, id: create_default_slot_1$8.name,
type: "slot", type: "slot",
source: "(65:4) <Msg name={msg.name}>", source: "(74:4) <Msg name={msg.name}>",
ctx ctx
}); });
return block; return block;
} }
// (64:3) {#each msgs as msg} // (73:3) {#each msgs as msg}
function create_each_block$4(ctx) { function create_each_block$4(ctx) {
let msg_1; let msg_1;
let current; let current;
@@ -8029,14 +8042,14 @@ var app = (function () {
block, block,
id: create_each_block$4.name, id: create_each_block$4.name,
type: "each", type: "each",
source: "(64:3) {#each msgs as msg}", source: "(73:3) {#each msgs as msg}",
ctx ctx
}); });
return block; 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) { function create_default_slot$a(ctx) {
let t; let t;
@@ -8056,7 +8069,7 @@ var app = (function () {
block, block,
id: create_default_slot$a.name, id: create_default_slot$a.name,
type: "slot", 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 ctx
}); });
@@ -8183,17 +8196,17 @@ var app = (function () {
t4 = space(); t4 = space();
create_component(button3.$$.fragment); create_component(button3.$$.fragment);
attr_dev(div0, "class", "msg_thread svelte-1quyp80"); 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"); 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, "class", "text_area svelte-1quyp80");
attr_dev(div2, "contenteditable", "true"); attr_dev(div2, "contenteditable", "true");
if (/*msg*/ ctx[4] === void 0) add_render_callback(() => /*div2_input_handler*/ ctx[10].call(div2)); 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"); 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"); 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) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); 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) { function instance$p($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props; let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('Layout_room', slots, []); 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 { layout = "" } = $$props;
let { back = "" } = $$props; let { back = "" } = $$props;
let msg = ""; let msg = "";
@@ -8382,10 +8402,13 @@ var app = (function () {
} }
function send_msg() { function send_msg() {
console.log("user:");
console.log(user);
console.log(user.username);
$$invalidate(4, msg = msg.trim()); $$invalidate(4, msg = msg.trim());
if (msg.length > 0) { if (msg.length > 0) {
//socket.emit('sendmsg', msg); socket$1.emit('message', msg);
add_msg("me", msg); add_msg("me", msg);
} }
@@ -8403,7 +8426,7 @@ var app = (function () {
const writable_props = ['layout', 'back']; const writable_props = ['layout', 'back'];
Object.keys($$props).forEach(key => { 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) { function button0_layout_binding(value) {
@@ -8441,7 +8464,8 @@ var app = (function () {
$$self.$capture_state = () => ({ $$self.$capture_state = () => ({
Button: Chat_button, Button: Chat_button,
Msg: Chat_msg, Msg: Chat_msg,
io: lookup, socket: socket$1,
user,
layout, layout,
back, back,
msg, msg,
@@ -10325,9 +10349,11 @@ var app = (function () {
} }
/* src/pieces/chat/Layout_create.svelte generated by Svelte v3.53.1 */ /* 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"; 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) { function create_default_slot_2$3(ctx) {
let t; let t;
@@ -10347,14 +10373,14 @@ var app = (function () {
block, block,
id: create_default_slot_2$3.name, id: create_default_slot_2$3.name,
type: "slot", 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 ctx
}); });
return block; return block;
} }
// (18:1) <Button my_class="create deactivate"> // (32:1) <Button my_class="create deactivate">
function create_default_slot_1$3(ctx) { function create_default_slot_1$3(ctx) {
let t; let t;
@@ -10374,14 +10400,14 @@ var app = (function () {
block, block,
id: create_default_slot_1$3.name, id: create_default_slot_1$3.name,
type: "slot", type: "slot",
source: "(18:1) <Button my_class=\\\"create deactivate\\\">", source: "(32:1) <Button my_class=\\\"create deactivate\\\">",
ctx ctx
}); });
return block; 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) { function create_default_slot$5(ctx) {
let t; let t;
@@ -10401,7 +10427,7 @@ var app = (function () {
block, block,
id: create_default_slot$5.name, id: create_default_slot$5.name,
type: "slot", 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 ctx
}); });
@@ -10446,12 +10472,10 @@ var app = (function () {
let t16; let t16;
let input4; let input4;
let t17; let t17;
let p5;
let t19;
let input5; let input5;
let t20;
let input6;
let current; let current;
let mounted;
let dispose;
function button0_layout_binding(value) { function button0_layout_binding(value) {
/*button0_layout_binding*/ ctx[2](value); /*button0_layout_binding*/ ctx[2](value);
@@ -10541,75 +10565,65 @@ var app = (function () {
t16 = space(); t16 = space();
input4 = element("input"); input4 = element("input");
t17 = space(); t17 = space();
p5 = element("p");
p5.textContent = "confirm password :";
t19 = space();
input5 = element("input"); input5 = element("input");
t20 = space(); attr_dev(p0, "class", "svelte-111r258");
input6 = element("input"); add_location(p0, file$h, 53, 26, 1353);
attr_dev(p0, "class", "svelte-1cmnkcw");
add_location(p0, file$h, 30, 26, 546);
attr_dev(label0, "for", "chat_name"); 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"); attr_dev(input0, "id", "chat_name");
input0.required = true; 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, "id", "chat_public");
attr_dev(input1, "type", "radio"); attr_dev(input1, "type", "radio");
attr_dev(input1, "name", "chat_create_type"); attr_dev(input1, "name", "chat_create_type");
input1.checked = true; input1.checked = true;
attr_dev(input1, "class", "svelte-1cmnkcw"); attr_dev(input1, "class", "svelte-111r258");
add_location(input1, file$h, 33, 3, 638); add_location(input1, file$h, 56, 3, 1445);
attr_dev(p1, "class", "svelte-1cmnkcw"); attr_dev(p1, "class", "svelte-111r258");
add_location(p1, file$h, 34, 43, 752); add_location(p1, file$h, 57, 43, 1559);
attr_dev(label1, "for", "chat_public"); attr_dev(label1, "for", "chat_public");
attr_dev(label1, "class", "_radio svelte-1cmnkcw"); attr_dev(label1, "class", "_radio svelte-111r258");
add_location(label1, file$h, 34, 3, 712); add_location(label1, file$h, 57, 3, 1519);
attr_dev(input2, "id", "chat_private"); attr_dev(input2, "id", "chat_private");
attr_dev(input2, "type", "radio"); attr_dev(input2, "type", "radio");
attr_dev(input2, "name", "chat_create_type"); attr_dev(input2, "name", "chat_create_type");
attr_dev(input2, "class", "svelte-1cmnkcw"); attr_dev(input2, "class", "svelte-111r258");
add_location(input2, file$h, 36, 3, 801); add_location(input2, file$h, 59, 3, 1608);
attr_dev(p2, "class", "svelte-1cmnkcw"); attr_dev(p2, "class", "svelte-111r258");
add_location(p2, file$h, 37, 44, 909); add_location(p2, file$h, 60, 44, 1716);
attr_dev(label2, "for", "chat_private"); attr_dev(label2, "for", "chat_private");
attr_dev(label2, "class", "_radio svelte-1cmnkcw"); attr_dev(label2, "class", "_radio svelte-111r258");
add_location(label2, file$h, 37, 3, 868); add_location(label2, file$h, 60, 3, 1675);
attr_dev(input3, "id", "chat_protected"); 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, "type", "radio");
attr_dev(input3, "name", "chat_create_type"); attr_dev(input3, "name", "chat_create_type");
add_location(input3, file$h, 39, 3, 961); add_location(input3, file$h, 62, 3, 1768);
attr_dev(p3, "class", "svelte-1cmnkcw"); attr_dev(p3, "class", "svelte-111r258");
add_location(p3, file$h, 40, 46, 1101); add_location(p3, file$h, 63, 46, 1908);
attr_dev(label3, "for", "chat_protected"); attr_dev(label3, "for", "chat_protected");
attr_dev(label3, "class", "_radio svelte-1cmnkcw"); attr_dev(label3, "class", "_radio svelte-111r258");
add_location(label3, file$h, 40, 3, 1058); add_location(label3, file$h, 63, 3, 1865);
attr_dev(p4, "class", "svelte-1cmnkcw"); attr_dev(p4, "class", "svelte-111r258");
add_location(p4, file$h, 43, 27, 1206); add_location(p4, file$h, 66, 27, 2013);
attr_dev(label4, "for", "chat_pswd"); 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, "id", "chat_pswd");
attr_dev(input4, "type", "password"); attr_dev(input4, "type", "password");
attr_dev(input4, "placeholder", "minimum 8 characters"); attr_dev(input4, "placeholder", "minimum 8 characters");
attr_dev(input4, "minlength", "8"); attr_dev(input4, "minlength", "8");
add_location(input4, file$h, 44, 4, 1245); add_location(input4, file$h, 67, 4, 2052);
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);
attr_dev(div0, "class", "__to_show"); attr_dev(div0, "class", "__to_show");
add_location(div0, file$h, 42, 3, 1155); add_location(div0, file$h, 65, 3, 1962);
attr_dev(input6, "type", "submit"); attr_dev(input5, "type", "submit");
input6.value = "⮡"; input5.value = "⮡";
attr_dev(input6, "class", "svelte-1cmnkcw"); attr_dev(input5, "class", "svelte-111r258");
add_location(input6, file$h, 48, 3, 1405); add_location(input5, file$h, 69, 3, 2154);
attr_dev(form, "class", "svelte-1cmnkcw"); add_location(form, file$h, 51, 2, 1262);
add_location(form, file$h, 28, 2, 495); attr_dev(div1, "class", "panel panel_create __border_top svelte-111r258");
attr_dev(div1, "class", "panel panel_create"); add_location(div1, file$h, 41, 1, 717);
add_location(div1, file$h, 27, 1, 460); attr_dev(div2, "class", "grid_box svelte-111r258");
attr_dev(div2, "class", "grid_box svelte-1cmnkcw"); add_location(div2, file$h, 23, 0, 372);
add_location(div2, file$h, 9, 0, 115);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); 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(label4, p4);
append_dev(div0, t16); append_dev(div0, t16);
append_dev(div0, input4); append_dev(div0, input4);
append_dev(div0, t17); append_dev(form, t17);
append_dev(div0, p5); append_dev(form, input5);
append_dev(div0, t19);
append_dev(div0, input5);
append_dev(form, t20);
append_dev(form, input6);
current = true; current = true;
if (!mounted) {
dispose = listen_dev(form, "submit", prevent_default(handleSubmit), false, true, false);
mounted = true;
}
}, },
p: function update(ctx, [dirty]) { p: function update(ctx, [dirty]) {
const button0_changes = {}; const button0_changes = {};
@@ -10712,6 +10727,8 @@ var app = (function () {
destroy_component(button0); destroy_component(button0);
destroy_component(button1); destroy_component(button1);
destroy_component(button2); destroy_component(button2);
mounted = false;
dispose();
} }
}; };
@@ -10726,6 +10743,16 @@ var app = (function () {
return block; 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) { function instance$k($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props; let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('Layout_create', slots, []); validate_slots('Layout_create', slots, []);
@@ -10734,7 +10761,7 @@ var app = (function () {
const writable_props = ['layout', 'back']; const writable_props = ['layout', 'back'];
Object.keys($$props).forEach(key => { 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) { function button0_layout_binding(value) {
@@ -10752,7 +10779,7 @@ var app = (function () {
if ('back' in $$props) $$invalidate(1, back = $$props.back); 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 => { $$self.$inject_state = $$props => {
if ('layout' in $$props) $$invalidate(0, layout = $$props.layout); if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
@@ -13961,54 +13988,53 @@ var app = (function () {
let { $$slots: slots = {}, $$scope } = $$props; let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('Chat', slots, []); validate_slots('Chat', slots, []);
let { color = "transparent" } = $$props; let { color = "transparent" } = $$props;
const socket = lookup(`http://${'transcendance'}:${'8080'}`, { path: '/chat' });
onMount(async => { onMount(async => {
socket.on('connect', function () { socket$1.on('connect', function () {
console.log("socket.io connected"); console.log("socket.io connected");
}); });
socket.on('disconnect', function () { socket$1.on('disconnect', function () {
console.log("socket.io disconnected"); console.log("socket.io disconnected");
}); });
socket.on('connect_error', function () { socket$1.on('connect_error', function () {
console.log("socket.io connect_error"); console.log("socket.io connect_error");
}); });
socket.on('connect_timeout', function () { socket$1.on('connect_timeout', function () {
console.log("socket.io connect_timeout"); console.log("socket.io connect_timeout");
}); });
socket.on('error', function () { socket$1.on('error', function () {
console.log("socket.io error"); console.log("socket.io error");
}); });
socket.on('reconnect', function () { socket$1.on('reconnect', function () {
console.log("socket.io reconnect"); console.log("socket.io reconnect");
}); });
socket.on('reconnect_attempt', function () { socket$1.on('reconnect_attempt', function () {
console.log("socket.io reconnect_attempt"); console.log("socket.io reconnect_attempt");
}); });
socket.on('reconnecting', function () { socket$1.on('reconnecting', function () {
console.log("socket.io reconnecting"); console.log("socket.io reconnecting");
}); });
socket.on('reconnect_error', function () { socket$1.on('reconnect_error', function () {
console.log("socket.io reconnect_error"); console.log("socket.io reconnect_error");
}); });
socket.on('reconnect_failed', function () { socket$1.on('reconnect_failed', function () {
console.log("socket.io reconnect_failed"); console.log("socket.io reconnect_failed");
}); });
socket.on('ping', function () { socket$1.on('ping', function () {
console.log("socket.io ping"); console.log("socket.io ping");
}); });
socket.on('pong', function () { socket$1.on('pong', function () {
console.log("socket.io pong"); console.log("socket.io pong");
}); });
}); });
@@ -14023,7 +14049,7 @@ var app = (function () {
if ('color' in $$props) $$invalidate(0, color = $$props.color); 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 => { $$self.$inject_state = $$props => {
if ('color' in $$props) $$invalidate(0, color = $$props.color); 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'; import Layouts from './Chat_layouts.svelte';
export let color = "transparent"; export let color = "transparent";
import { onMount } from 'svelte';
/* web sockets with socket.io /* web sockets with socket.io
*/ */
import { onMount } from 'svelte'; import { socket } from './Chat_socket.svelte';
import io from 'socket.io-client';
const socket = io(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`, {
path: '/chat'
});
onMount(async => { onMount(async => {
socket.on('connect', function(){ socket.on('connect', function(){
console.log("socket.io connected"); 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) { .list:not(:hover) {
background-color: rgb(240, 240, 240); background-color: rgb(240, 240, 240);
@@ -77,14 +77,14 @@
} }
/* for transparent btn /* .transparent
*/ */
.transparent:not(:hover) { .transparent:not(:hover) {
background-color: transparent; background-color: transparent;
} }
/* for deactivated btn /* .deactivated
*/ */
.deactivate { .deactivate {
background-color: transparent; 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 { .icon p {
display: none; display: none;
@@ -107,7 +140,7 @@
} }
/* for 3 dots btn /* .dots
*/ */
.dots::after { .dots::after {
content: '\2807'; content: '\2807';
@@ -123,7 +156,7 @@
} }
/* for close btn /* .close
*/ */
.close::before { .close::before {
content: ""; content: "";
@@ -136,7 +169,7 @@
} }
/* for back btn /* .back
*/ */
.back::before { .back::before {
content: ""; content: "";
@@ -151,7 +184,7 @@
} }
/* for blocked user /* .blocked
https://www.fileformat.info/info/unicode/category/So/list.htm https://www.fileformat.info/info/unicode/category/So/list.htm
U+1F512 LOCK 🔒 U+1F512 LOCK 🔒
U+1F513 OPEN 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 layout = "";
export let back = ""; 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> </script>
<div class="grid_box"> <div class="grid_box">
@@ -25,8 +39,17 @@
</Button> </Button>
<!-- panel_create --> <!-- panel_create -->
<div class="panel panel_create"> <div class="panel panel_create __border_top">
<form> <!--
<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: --> <!-- name: -->
<label for="chat_name"><p>new room name :</p></label> <label for="chat_name"><p>new room name :</p></label>
<input id="chat_name" required> <input id="chat_name" required>
@@ -43,14 +66,11 @@
<div class="__to_show"> <div class="__to_show">
<label for="chat_pswd"><p>choose a password :</p></label> <label for="chat_pswd"><p>choose a password :</p></label>
<input id="chat_pswd" type="password" placeholder="minimum 8 characters" minlength="8"> <input id="chat_pswd" type="password" placeholder="minimum 8 characters" minlength="8">
<p>confirm password :</p>
<input type="password">
</div> </div>
<input type="submit" value="&#x2BA1"> <input type="submit" value="&#x2BA1">
</form> </form>
</div> </div>
</div> </div>
<style> <style>
@@ -71,19 +91,19 @@
/* radio elements style check /* radio elements style check
*/ */
form input[type=radio] { .panel input[type=radio] {
display: none; display: none;
} }
form label._radio { .panel label._radio {
margin: 0px 20px 0px auto; margin: 0px 20px 0px auto;
padding-right: 10px; padding-right: 10px;
cursor: pointer; cursor: pointer;
} }
form label._radio p { .panel label._radio p {
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
} }
form label._radio::after { .panel label._radio::after {
content: ""; content: "";
position: absolute; position: absolute;
top: calc(50% - 6px); top: calc(50% - 6px);
@@ -95,7 +115,7 @@
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
} }
form input[type=radio]:checked .panel input[type=radio]:checked
+ label._radio::after { + label._radio::after {
background-color: rgb(200, 200, 200); background-color: rgb(200, 200, 200);
} }
@@ -103,7 +123,7 @@
/* submit /* submit
*/ */
form input[type=submit] { .panel input[type=submit] {
margin-top: 20px; margin-top: 20px;
} }

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

@@ -39,7 +39,7 @@
placeholder placeholder
</Button> </Button>
<Button bind:layout new_layout="room" my_class="list"> <Button bind:layout new_layout="room" my_class="list">
join room room
</Button> </Button>
<Button bind:layout new_layout="room" my_class="list"> <Button bind:layout new_layout="room" my_class="list">
one room 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 Button from './Chat_button.svelte';
import Msg from './Chat_msg.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 layout = "";
export let back = ""; export let back = "";
@@ -19,10 +25,13 @@
function send_msg() function send_msg()
{ {
msg = msg.trim(); console.log("user:");
console.log(user);
console.log(user.username);
msg = msg.trim();
if (msg.length > 0) { if (msg.length > 0) {
//socket.emit('sendmsg', msg); socket.emit('message', msg);
add_msg("me", msg); add_msg("me", msg);
} }