General renamed to message component

This commit is contained in:
NyxiumYuuki 2021-05-30 18:25:55 +02:00
parent 5027493910
commit 0034b66391
4 changed files with 0 additions and 111 deletions

View file

@ -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>

View file

@ -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();
});
});

View file

@ -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 = '';
}
}
}