yvachot/chatless
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Example of Chat General

Browse source
This commit is contained in:
NyxiumYuuki 2021-05-29 00:03:40 +02:00
parent 4e2e779a09
commit 3eabc8e329
2 changed files with 23 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/general/general.component.html
View file

@ -16,7 +16,8 @@
</style> </style>
</head> </head>
<body> <body>
<ul id="messages"></ul> <ul #ulMessages id="messages">
</ul>
<form id="form" action=""> <form id="form" action="">
<input id="input" autocomplete="off" name="message" [(ngModel)]="msg"/><button (click)="sendButtonClick()">Send</button> <input id="input" autocomplete="off" name="message" [(ngModel)]="msg"/><button (click)="sendButtonClick()">Send</button>
</form> </form>

29
frontend/src/app/general/general.component.ts
View file

@ -1,8 +1,7 @@
import {Component, Inject, Input, OnInit} from '@angular/core'; import {Component, ElementRef, Inject, Input, OnInit, ViewChild} from '@angular/core';
import {ChatInfo, ChatService} from "../services/chat/chat.service"; import {ChatInfo, ChatService} from "../services/chat/chat.service";
import {AuthService} from "../services/auth/auth.service";
import {MessageService} from "../services/message/message.service";
import {environment} from "../../environments/environment"; import {environment} from "../../environments/environment";
import {DatePipe} from "@angular/common";
@Component({ @Component({
selector: 'app-general', selector: 'app-general',
@ -15,23 +14,37 @@ export class GeneralComponent implements OnInit {
private room = 'general'; private room = 'general';
public msg = ''; public msg = '';
constructor(private chatservice: ChatService) {} // @ts-ignore
@ViewChild('ulMessages') ulMsg: ElementRef;
constructor(private chatservice: ChatService, private pipe: DatePipe) {}
ngOnInit() { ngOnInit() {
console.log('General working'); console.log('General working');
this.chatservice.setUrl(environment.urlCG); this.chatservice.setUrl(environment.urlCG);
this.chatservice.onNewMessage().subscribe(infos => { this.chatservice.setRoom(this.room);
console.log('message : '+infos); this.chatservice.onNewMessage(this.room).subscribe((infos: ChatInfo[]) => {
for(let data of infos){
if(data !== undefined && data.date !== undefined){
if(data.username === 'Server'){
this.ulMsg.nativeElement.insertAdjacentHTML('beforeend', '<li><span class="text-danger">'+data.message+'</span></li>');
}
else{
this.ulMsg.nativeElement.insertAdjacentHTML('beforeend','<li><span class="text-primary">['+this.pipe.transform(data.date, 'dd/MM/yyyy HH:MM:ss')+'] </span><span class="text-success">'+data.username+' </span>:<span class="text-secondary"> '+data.message+'</span></li>');
}
}
}
window.scrollTo(0, document.body.scrollHeight);
}); });
} }
sendButtonClick(){ sendButtonClick(){
console.log('Button working'); console.log('Button working');
if(this.msg){ if(this.msg && this.username){
this.chatservice.sendMessage(this.username, this.room, this.msg); this.chatservice.sendMessage(this.username, this.room, this.msg);
console.log(this.username, this.room, this.msg); console.log(this.username, this.room, this.msg);
this.msg = ''; this.msg = '';
} }
} }
} }