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

Compare commits

merge into: yvachot:master
Branches Tags
yvachot:master
yvachot:frontend_test_general
yvachot:test
yvachot:v1.0
...
pull from: yvachot:test
Branches Tags
yvachot:master
yvachot:frontend_test_general
yvachot:test
yvachot:v1.0
This repository has been archived on 2026-05-01. You can view files and clone it, but you cannot make any changes to it's state, such as pushing and creating new issues, pull requests or comments.

2 commits
master ... test

Author SHA1 Message Date
wilfried
362a1f236b try frontend... 2021-05-30 10:40:48 +02:00
wilfried
1dcf975c97 rr 2021-05-29 23:04:28 +02:00
6 changed files with 94 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,25 +1,52 @@
<!DOCTYPE html> <div class="container-fluid" >
<html> <div class="row">
<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); } <div class="col-md-4">
#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; } <div class="user-list-card">
#messages > li { padding: 0.5rem 1rem; } <div class="user-card"
#messages > li:nth-child(odd) { background: #efefef; }
</style> >
</head> <!---->
<body>
<ul #ulMessages id="messages"> <img src="../../assets/image/user.png" height="25" width="25"/>
</ul> <p class="username">{{username}}</p>
<form id="form" action="">
<input id="input" autocomplete="off" name="message" [(ngModel)]="msg"/><button (click)="sendButtonClick()">Send</button> </div>
</form> </div>
</body>
</html> </div>
<div class="col-md-8">
<div class="chat-header">
<p class="username">General Chat</p>
</div>
<div class="chat-body">
<ul #ulMessages id="messages">
</ul>
</div>
<div class="chat-footer">
<div class="row">
<div class="col-md-10">
<div class="form-group mb-0">
<input type="text" placeholder="Entrez votre message" class="form-control"
[(ngModel)]="msg"/>
</div>
</div>
<div class="col-md-2 text-center align-self-center">
<button class="btn btn-primary btn-bm px-3 " (click)="sendButtonClick()">Envoyer</button>
</div>
</div>
</div>
</div>
</div>
</div>

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

@ -11,7 +11,7 @@ import {MessageService} from "../services/message/message.service";
}) })
export class GeneralComponent implements OnInit { export class GeneralComponent implements OnInit {
private username = sessionStorage.getItem('login'); public username = sessionStorage.getItem('login');
private room = 'general'; private room = 'general';
public msg = ''; public msg = '';

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

@ -24,5 +24,6 @@
<button class="btn btn-sm btn-primary" (click) = "showCredentials()">Connexion Privée</button> <button class="btn btn-sm btn-primary" (click) = "showCredentials()">Connexion Privée</button>
<button class="btn btn-sm btn-primary" (click) = "showCredentials()">Connexion Générale</button> <button class="btn btn-sm btn-primary" (click) = "showCredentials()">Connexion Générale</button>
</div> </div>
<br>
<p class="alert alert-danger" role="alert" *ngIf="errorMessage !== ''">{{errorMessage}}</p>
</div> </div>

2
frontend/src/app/services/auth/auth.service.ts
View file

@ -11,6 +11,8 @@ export class AuthService {
// @ts-ignore // @ts-ignore
islog: boolean; islog: boolean;
// @ts-ignore
public currentUser;
constructor(private messageService: MessageService) { } constructor(private messageService: MessageService) { }

1
frontend/src/app/services/message/message.service.ts
View file

@ -25,3 +25,4 @@ export class MessageService {
} }
} }

95
frontend/src/styles.scss
View file

@ -5,6 +5,7 @@ body {
.container-fluid { .container-fluid {
padding: 50px 200px; padding: 50px 200px;
overflow: hidden; overflow: hidden;
background-color: #87CEEB;
} }
.user-list-card { .user-list-card {
@ -46,64 +47,44 @@ body {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.chat-header {
height: 70px; }
background-color: #E5E5E5;
.chat-header {
height: 70px;
border-radius: 10px;
background-color: #E5E5E5;
display: flex;
justify-content: flex-start;
align-items: center;
.username {
font-size: 20px;
font-weight: 500;
margin-bottom: 0;
margin-left: 20px;
display: flex; display: flex;
justify-content: flex-start; justify-content: center;
align-items: center; align-items: center;
.username {
font-size: 14px;
font-weight: 500;
margin-bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
}
.chat-body {
background-image: url(./assets/image/user.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: calc(100vh - 125px);
overflow-y: auto;
.message-container {
background-color: white;
padding: 7px;
border-radius: 5px;
width: fit-content;
max-width: 90%;
margin-bottom: 15px;
}
.same-user {
display: flex;
justify-content: flex-end;
.message-container {
background-color: lightskyblue;
}
}
}
.chat-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #EDEDED;
padding: 10px 20px;
.form-control {
background-color: white;
border: 1px solid #D8DDEC;
box-sizing: border-box;
font-size: 1rem;
color: black;
}
} }
} }
.chat-body {
background-color: white;
border-radius: 10px;
height: calc(89.5vh - 89.5px);
overflow-y: auto;
}
.chat-footer {
border-radius: 10px;
bottom: 0;
left: 0;
right: 0;
background-color: #EDEDED;
padding: 10px 20px;
}
.modal-footer {
display: block;
}