chat svelte now have a global variable socket
This commit is contained in:
simplonco
@@ -9,6 +9,7 @@ import { AuthenticationModule } from './auth/42/authentication.module';
|
||||
import { PassportModule } from '@nestjs/passport';
|
||||
import { GameModule } from './game/game.module';
|
||||
import { ChatGateway } from './chat/chat.gateway';
|
||||
import { ChatModule } from './chat/chat.module';
|
||||
|
||||
@Module({
|
||||
imports: [
|
||||
@@ -30,6 +31,7 @@ import { ChatGateway } from './chat/chat.gateway';
|
||||
//avec une classe pour le module
|
||||
synchronize: true,
|
||||
}),
|
||||
ChatModule,
|
||||
// GameModule,
|
||||
],
|
||||
controllers: [AppController],
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
} from '@nestjs/websockets';
|
||||
import { UsersService } from 'src/users/users.service';
|
||||
import { PaginationQueryDto } from 'src/common/dto/pagination-query.dto';
|
||||
import { ChatService } from 'src/chat/chat.service';
|
||||
|
||||
@WebSocketGateway(5000, {
|
||||
path: '/chat',
|
||||
@@ -19,6 +20,7 @@ export class ChatGateway
|
||||
constructor
|
||||
(
|
||||
private usersService: UsersService,
|
||||
private chatService: ChatService,
|
||||
) {}
|
||||
|
||||
@WebSocketServer()
|
||||
@@ -33,11 +35,16 @@ export class ChatGateway
|
||||
console.log('---- client disconnected :', client.id);
|
||||
}
|
||||
|
||||
@SubscribeMessage('')
|
||||
handleMessage(): void {
|
||||
const paginationQuery = new PaginationQueryDto();
|
||||
const users = this.usersService.findAll(paginationQuery);
|
||||
console.log('users :', users);
|
||||
// @UseGuards(AuthenticateGuard)
|
||||
@SubscribeMessage('message')
|
||||
handleMessage(@MessageBody() message: string): void {
|
||||
console.log('-------- msg --------------');
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,16 +1,12 @@
|
||||
//import { Module } from '@nestjs/common';
|
||||
//import { TypeOrmModule } from '@nestjs/typeorm';
|
||||
//import { FriendshipService } from './friendship.service';
|
||||
//import { FriendshipController } from './friendship.controller';
|
||||
//import { Friendship } from './entities/friendship.entity';
|
||||
//import { User } from '../users/entities/user.entity';
|
||||
import { Module } from '@nestjs/common';
|
||||
import { ChatController } from './chat.controller';
|
||||
import { ChatService } from './chat.service';
|
||||
|
||||
//@Module({
|
||||
// imports: [TypeOrmModule.forFeature([Friendship, User])],
|
||||
// providers: [FriendshipService],
|
||||
// controllers: [FriendshipController],
|
||||
// exports: [FriendshipService],
|
||||
//})
|
||||
@Module({
|
||||
providers: [ChatService],
|
||||
controllers: [ChatController],
|
||||
exports: [ChatService],
|
||||
})
|
||||
|
||||
//export class FriendshipsModule {}
|
||||
export class ChatModule {}
|
||||
|
||||
|
||||
@@ -1,204 +1,18 @@
|
||||
//import { HttpException, HttpStatus, Injectable } from '@nestjs/common';
|
||||
import { Injectable } from '@nestjs/common';
|
||||
|
||||
//import { InjectRepository } from '@nestjs/typeorm';
|
||||
//import { User } from 'src/users/entities/user.entity';
|
||||
//import { Repository } from 'typeorm';
|
||||
//import { CreateFriendshipDto } from './dto/create-friendship.dto';
|
||||
//import { Friendship, FriendshipStatus } from './entities/friendship.entity';
|
||||
|
||||
/*
|
||||
@Injectable()
|
||||
export class FriendshipService {
|
||||
export class ChatService {
|
||||
|
||||
constructor(
|
||||
@InjectRepository(Friendship)
|
||||
private readonly friendshipRepository: Repository<Friendship>,
|
||||
@InjectRepository(User)
|
||||
private readonly userRepository: Repository<User>,
|
||||
// @InjectRepository(User)
|
||||
// private readonly userRepository: Repository<User>,
|
||||
) { }
|
||||
|
||||
|
||||
async findOneFriend(friendshipId: string, username: string) {
|
||||
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;
|
||||
async add_message(server, message) {
|
||||
return server.emit('message', message);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@@ -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);
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -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");
|
||||
|
||||
@@ -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 🔓
|
||||
|
||||
@@ -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>
|
||||
@@ -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">⮡</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="⮡">
|
||||
</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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user