General renamed to message component
This commit is contained in:
parent
5027493910
commit
0034b66391
4 changed files with 0 additions and 111 deletions
|
|
@ -1,25 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Socket.IO chat</title>
|
||||
<style>
|
||||
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
|
||||
|
||||
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
|
||||
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
|
||||
#input:focus { outline: none; }
|
||||
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
|
||||
|
||||
#messages { list-style-type: none; margin: 0; padding: 0; }
|
||||
#messages > li { padding: 0.5rem 1rem; }
|
||||
#messages > li:nth-child(odd) { background: #efefef; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul #ulMessages id="messages">
|
||||
</ul>
|
||||
<form id="form" action="">
|
||||
<input id="input" autocomplete="off" name="message" [(ngModel)]="msg"/><button (click)="sendButtonClick()">Send</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { GeneralComponent } from './general.component';
|
||||
|
||||
describe('GeneralComponent', () => {
|
||||
let component: GeneralComponent;
|
||||
let fixture: ComponentFixture<GeneralComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ GeneralComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(GeneralComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
||||
import {ChatInfo, ChatService} from "../services/chat/chat.service";
|
||||
import {environment} from "../../environments/environment";
|
||||
import {DatePipe} from "@angular/common";
|
||||
import {MessageService} from "../services/message/message.service";
|
||||
|
||||
@Component({
|
||||
selector: 'app-general',
|
||||
templateUrl: './general.component.html',
|
||||
styleUrls: ['./general.component.scss']
|
||||
})
|
||||
export class GeneralComponent implements OnInit {
|
||||
|
||||
private username = sessionStorage.getItem('login');
|
||||
private room = 'general';
|
||||
public msg = '';
|
||||
|
||||
// @ts-ignore
|
||||
@ViewChild('ulMessages') ulMsg: ElementRef;
|
||||
|
||||
|
||||
constructor(private chatservice: ChatService, private pipe: DatePipe, private messageservice: MessageService) {}
|
||||
|
||||
ngOnInit() {
|
||||
console.log('General working');
|
||||
this.messageservice.sendMessage(environment.urlCL,'getUsers', {username: this.username}).subscribe(
|
||||
data => {
|
||||
if (data.status !== 'ok'){
|
||||
console.log(data.data.reason);
|
||||
}
|
||||
else{
|
||||
console.log(data.data);
|
||||
}
|
||||
}
|
||||
);
|
||||
this.chatservice.setUrl(environment.urlCG);
|
||||
this.chatservice.setRoom(this.room);
|
||||
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(){
|
||||
console.log('Button working');
|
||||
if(this.msg && this.username){
|
||||
this.chatservice.sendMessage(this.username, this.room, this.msg);
|
||||
console.log(this.username, this.room, this.msg);
|
||||
this.msg = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in a new issue