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

Merge branch 'frontend_test_general' into 'master'

Browse source 
Frontend test general

See merge request groupe100idee/chatless!4
This commit is contained in:
Yûki Vachot 2021-05-30 18:24:25 +02:00
commit c652958324
11 changed files with 46 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

7
backend/service-message/server.js
View file

@ -82,6 +82,13 @@ io.on('connection',socket => {
socket.on("disconnect", function() { socket.on("disconnect", function() {
console.log(`${getUsername} left the chat.`); console.log(`${getUsername} left the chat.`);
socket.broadcast.emit('general',[{
username: 'Server',
date: new Date(),
channel: 'general',
message: `${getUsername} left the chat.`
}]);
}); });
} }
}); });

8
frontend/src/app/app-routing.module.ts
View file

@ -1,16 +1,16 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import {LoginComponent} from "./login/login.component"; import {LoginComponent} from "./login/login.component";
import {GeneralComponent} from "./general/general.component"; import {ChatComponent} from "./chat/chat.component";
const routes: Routes = [ const routes: Routes = [
{ {
path: 'login', path: '',
component: LoginComponent, component: LoginComponent,
}, },
{ {
path: 'general', path: 'chat',
component: GeneralComponent, component: ChatComponent,
} }
]; ];

8
frontend/src/app/app.module.ts
View file

@ -5,15 +5,19 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component'; import { LoginComponent } from './login/login.component';
import { GeneralComponent } from './general/general.component';
import {CommonModule, DatePipe} from "@angular/common"; import {CommonModule, DatePipe} from "@angular/common";
import { PrivateComponent } from './private/private.component';
import { ChatComponent } from './chat/chat.component';
import { MessageComponent } from './message/message.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
LoginComponent, LoginComponent,
GeneralComponent PrivateComponent,
ChatComponent,
MessageComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

25
frontend/src/app/general/general.component.html
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>

0
frontend/src/app/general/general.component.scss
View file

25
frontend/src/app/general/general.component.spec.ts
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();
});
});

61
frontend/src/app/general/general.component.ts
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 = '';
}
}
}

20
frontend/src/app/login/login.component.html
View file

@ -2,27 +2,21 @@
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title">Veuillez-vous authentifier :</h4> <h4 class="modal-title">Veuillez-vous authentifier :</h4>
</div> </div>
<form>
<div class="modal-body"> <div class="modal-body">
<div class="row"> <div class="row">
<div class="col-md-10"> <div class="col-md-10">
<div class="form-group mb-0"> <div class="form-group mb-0">
<input type="text" <input class="form-control" type="text" required="" [(ngModel)]="login" autocomplete="login" name="login">
placeholder="Entrez votre login" <input class="form-control" type="password" required="" [(ngModel)]="password" autocomplete="password" name="password">
class="form-control"
[(ngModel)]="login">
<input type="text"
placeholder="Entrez votre password"
class="form-control"
[(ngModel)]="password">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-sm btn-primary" (click) = "showCredentials()">Connexion Privée</button> <input class="btn btn-sm btn-primary" name="button-connexion" (click)="showCredentials()" type="submit" value="Se connecter">
<button class="btn btn-sm btn-primary" (click) = "showCredentials()">Connexion Générale</button>
</div> </div>
</form>
<br>
<div class="alert alert-danger" *ngIf="errorMessage!==''">{{errorMessage}}</div>
</div> </div>

10
frontend/src/app/login/login.component.ts
View file

@ -20,16 +20,16 @@ export class LoginComponent implements OnInit {
} }
showCredentials(): void { showCredentials(): void {
console.log('Login :', this.login); // console.log('Login :', this.login);
console.log('Password :', this.password); // console.log('Password :', this.password);
this.auth.sendAuthentication(this.login, this.password).subscribe(data => { this.auth.sendAuthentication(this.login, this.password).subscribe(data => {
this.auth.finalizeAuthentication(data); this.auth.finalizeAuthentication(data);
if (this.auth.islog === true) { if (this.auth.islog) {
sessionStorage.setItem('login', this.login); sessionStorage.setItem('login', this.login);
this.router.navigateByUrl('/general'); this.router.navigateByUrl('/chat');
} else { } else {
this.errorMessage = data.data.reason; this.errorMessage = data.data.reason;
console.log(this.errorMessage); //console.log(this.errorMessage);
} }
}); });

5
frontend/src/app/services/chat/chat.service.ts
View file

@ -49,6 +49,11 @@ export class ChatService {
}); });
} }
leaveRoom(): void {
// @ts-ignore
this.socket?.disconnect();
}
onNewMessage(room: string): Observable<ChatInfo[]> { onNewMessage(room: string): Observable<ChatInfo[]> {
return new Observable(observer => { return new Observable(observer => {
// @ts-ignore // @ts-ignore

8
frontend/src/styles.scss
View file

@ -12,7 +12,8 @@ body {
border-radius: 10px; border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
height: calc(100vh - 100px); height: calc(100vh - 100px);
padding: 10px; padding: 0;
overflow-y: auto;
.user-card { .user-card {
display: flex; display: flex;
@ -28,6 +29,7 @@ body {
font-weight: 500; font-weight: 500;
margin-bottom: 0; margin-bottom: 0;
display: flex; display: flex;
margin-left: 5px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
@ -64,11 +66,11 @@ body {
} }
.chat-body { .chat-body {
background-image: url(./assets/image/user.png); background-color: white;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
height: calc(100vh - 125px); height: calc(89vh - 125px);
overflow-y: auto; overflow-y: auto;
.message-container { .message-container {