diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 5961dc3e4943843c23a0ee36c170986c3f6547ba..6247d5f9e841876897314d7c8b3f7eeb82b06e66 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -8,6 +8,7 @@ import { ProfessionalContactComponent } from './professional-contact/professiona import { PreventiveMeasuresComponent } from './preventive-measures/preventive-measures.component'; import { LoginComponent } from './login/login.component'; import { SignupComponent } from './signup/signup.component'; +import { MessageComponent } from './message/message.component'; const routes: Routes = [ @@ -19,6 +20,10 @@ const routes: Routes = [ path: 'community', component: CommunityComponent }, + { + path: 'community/:id', + component: CommunityComponent + }, { path: 'preventive-measures', component: PreventiveMeasuresComponent @@ -42,7 +47,12 @@ const routes: Routes = [ { path: '', component: GettingStartedComponent + }, + { + path: 'messages', + component: MessageComponent } + ]; @NgModule({ diff --git a/src/app/community/community.component.css b/src/app/community/community.component.css index 2264c5a43a6d4ed72f9fbdd0528a867447a75b08..fd9deb5a5930c7516d292754a7c57d73281edcfb 100644 --- a/src/app/community/community.component.css +++ b/src/app/community/community.component.css @@ -1,4 +1,58 @@ -body { + +.liste{ + display: flex; + flex-direction: line; + justify-content: space-between; + margin: 2em; +} + +.categories { + justify-content: center; +} +.newTopic{ + padding: 1em 1em; + text-decoration: none; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); + border-radius: 65px; + display: block; + margin-left: auto; + margin-right: auto; + background-color: #2E3192; + color: white; +} +.category{ + padding: 1em 1em; + text-decoration: none; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); + border-radius: 65px; + display: inline-block; + margin: 1.5em 1.5em; +} +.post{ + padding: 1em 0; + text-decoration: none; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); + border-radius: 65px; + display: block; + margin: 2em 0; + padding: 2em; + background-color: white; + /* text-align: start; */ +} + +.category.feeling{ + background-color: #FF9848; +} +.category.stories{ + background-color: #999FDE; +} +.category.covid{ + background-color: #EBDDFF; +} + + + +/* body { background-color: #74EBD5; background-image: linear-gradient(90deg, #74EBD5 0%, #9FACE6 100%); @@ -38,4 +92,4 @@ body { input::placeholder { font-size: 0.9rem; color: #999; - } \ No newline at end of file + } */ \ No newline at end of file diff --git a/src/app/community/community.component.html b/src/app/community/community.component.html index 639041a376f76d486e3b7b9a0407f3c64d0bb15a..daf94c5fcc39e877d4085f2ba290ce7c4aa4c754 100644 --- a/src/app/community/community.component.html +++ b/src/app/community/community.component.html @@ -1,12 +1,8 @@ - -
-
-
-
-

Discussions

-
+
+
+
    -
    + {{time | europeanDate}}

    {{ message }}

    @@ -25,85 +20,31 @@
-
- -
-
- -
user -
-
-

Test which is a new approach all solutions

-
-

12:00 PM | Aug 13

-
-
- - -
-
-
-

Test which is a new approach to have all solutions

-
-

12:00 PM | Aug 13

-
-
+
--> - -
user -
-
-

Test, which is a new approach to have

-
-

12:00 PM | Aug 13

-
-
- - -
-
-
-

Apollo University, Delhi, India Test

-
-

12:00 PM | Aug 13

-
-
- - -
user -
-
-

Test, which is a new approach

-
-

12:00 PM | Aug 13

-
-
- - -
-
-
-

Apollo University, Delhi, India Test

-
-

12:00 PM | Aug 13

-
-
- -
- - -
-
- -
- -
-
-
+
+ Create a new topic +
+
+ +
+
+ +
+ +
- diff --git a/src/app/community/community.component.ts b/src/app/community/community.component.ts index 063f1fad92988f308db4241d1e8e6de741bc3e06..5fa7b0fa19d2f33b31b70d5ee7ad35d414d40a03 100644 --- a/src/app/community/community.component.ts +++ b/src/app/community/community.component.ts @@ -1,5 +1,8 @@ import { Component, OnInit } from '@angular/core'; import * as jsonData from '../../assets/messages.json'; +import { ChatService } from '../services/chat.service.js'; +import { ActivatedRoute } from '@angular/router'; +import { Observable } from 'rxjs'; @Component({ selector: 'app-community', @@ -7,22 +10,31 @@ import * as jsonData from '../../assets/messages.json'; styleUrls: ['./community.component.css'] }) export class CommunityComponent implements OnInit { + chat: Observable users: string[]; messages: any[] = (jsonData as any).default; - constructor() { + constructor( + public chatService: ChatService, + private router: ActivatedRoute) { this.users = this.messages.map(data => { - console.log(data.name); + // console.log(data.name); return data.name; }); } - - name = 'Adele'; - message = 'Hello from the other side !'; - time = Date(); - ngOnInit(): void { console.log(this.users ); + if(this.router.snapshot.paramMap.has('id')){ + const chatId = this.router.snapshot.paramMap.get('id'); + this.chat = this.chatService.get(chatId); + } else { + this.chatService.getAll().subscribe(res => { + console.log('Les résultats de la query firebase'); + for (let rec of res) { + console.log(rec.payload.doc.data()) + } + }) + } } } diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css index afd23758d68d7125b1898e568c48bf551b903da5..9d75e5b79b294fe4f4adb2f545f103ac4915eae5 100644 --- a/src/app/header/header.component.css +++ b/src/app/header/header.component.css @@ -48,6 +48,7 @@ border-radius: 65px; display: block; margin: 0 1.5em; + color: black; } .exit { background-color: #FC5C14; diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 8e4517193f3c7cc1c7cb854e04f2f1b0b432d5d6..a1aa8599271d0836dbe8541c3dce626c9600765b 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -7,8 +7,10 @@