From 55349a6eaf058cba28ce0b284317653bbfcd1295 Mon Sep 17 00:00:00 2001 From: Sara Cousin Date: Mon, 27 Apr 2020 00:57:57 +0200 Subject: [PATCH] WIP: Community feature --- src/app/app-routing.module.ts | 10 ++ src/app/app.module.ts | 4 +- src/app/community/community.component.css | 53 ++++++++- src/app/community/community.component.html | 128 +++++---------------- src/app/community/community.component.ts | 26 +++-- src/app/header/header.component.css | 1 + src/app/header/header.component.html | 2 +- src/app/message/message.component.css | 46 ++++++++ src/app/message/message.component.html | 22 ++++ src/app/message/message.component.spec.ts | 25 ++++ src/app/message/message.component.ts | 15 +++ src/app/services/chat.service.spec.ts | 16 +++ src/app/services/chat.service.ts | 35 ++++++ src/styles.css | 4 +- 14 files changed, 273 insertions(+), 114 deletions(-) create mode 100644 src/app/message/message.component.css create mode 100644 src/app/message/message.component.html create mode 100644 src/app/message/message.component.spec.ts create mode 100644 src/app/message/message.component.ts create mode 100644 src/app/services/chat.service.spec.ts create mode 100644 src/app/services/chat.service.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index be80289..de5a547 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 @@ -38,7 +43,12 @@ const routes: Routes = [ { path: '', component: GettingStartedComponent + }, + { + path: 'messages', + component: MessageComponent } + ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6c6fcd7..b652bea 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -57,6 +57,7 @@ import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core'; import { GeocodeService } from './services/geocode.service'; import { ResetpasswordComponent } from './resetpassword/resetpassword.component'; import { ThankyouComponent } from './thankyou/thankyou.component'; +import { MessageComponent } from './message/message.component'; @NgModule({ @@ -73,7 +74,8 @@ import { ThankyouComponent } from './thankyou/thankyou.component'; LoginComponent, SignupComponent, ResetpasswordComponent, - ThankyouComponent + ThankyouComponent, + MessageComponent, ], imports: [ BrowserModule, diff --git a/src/app/community/community.component.css b/src/app/community/community.component.css index 2264c5a..bf9f511 100644 --- a/src/app/community/community.component.css +++ b/src/app/community/community.component.css @@ -1,4 +1,53 @@ -body { + +.liste{ + display: flex; + flex-direction: line; + justify-content: space-between; + margin: 2em; +} +.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: 0 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; +} + +.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 +87,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 3bf70cd..d5c0ce9 100644 --- a/src/app/community/community.component.html +++ b/src/app/community/community.component.html @@ -1,108 +1,32 @@ - -
-
-
-
-

Discussions

-
+
+
+
+
- -
-
- -
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 +
+
+
    +
  • Explain how you feel
    • +
  • Tell your story
    • +
  • How did your situation changed during the isolation
    • +
+
+
+
    +
  • Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, fjfjjfut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
    • +
  • Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, fjfjjfut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
    • +
  • Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, fjfjjfut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
    • +
  • Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, fjfjjfut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
    • +
  • Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, fjfjjfut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
    • +
  • Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, fjfjjfut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
    • +
  • Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, fjfjjfut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
    • + +
+
\ No newline at end of file diff --git a/src/app/community/community.component.ts b/src/app/community/community.component.ts index 063f1fa..5fa7b0f 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 d006438..4b7db3f 100644 --- a/src/app/header/header.component.css +++ b/src/app/header/header.component.css @@ -40,6 +40,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 17e1b7a..0f56475 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -11,7 +11,7 @@ class="nav__link" skipLocationChange>{{'NAV.COMMUNITY' | translate}}
  • {{ 'NAV.PREVENTIVEMEASURES' | translate}}
    • -
  • Messages
  • {{ 'NAV.LOGIN' | translate }}
    • diff --git a/src/app/message/message.component.css b/src/app/message/message.component.css new file mode 100644 index 0000000..64430d1 --- /dev/null +++ b/src/app/message/message.component.css @@ -0,0 +1,46 @@ +.listContact{ + min-width: 10rem; + height: 100vh; + position: sticky; + text-align: center; + top: 0; + left: 0; + box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); + display: inline-block; +} +.contacts{ + list-style: none; + margin-top: 3em; + padding: 0; + height: 75vh; + max-height: 600px; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.user{ + padding: 2em; + text-decoration: none; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); + border-radius: 65px; + display: block; + margin: 0 1.5em; + color: black; + background-color: white; +} +.talks{ + display: flex; + flex-direction: column; + justify-content: space-between; + margin: 2em; +} +.message{ + 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; +} \ No newline at end of file diff --git a/src/app/message/message.component.html b/src/app/message/message.component.html new file mode 100644 index 0000000..8a79b4d --- /dev/null +++ b/src/app/message/message.component.html @@ -0,0 +1,22 @@ +
    +
    +
      +
    • Ana, Psycologist
      • +
    • Ana, Psycologist
      • +
    • Ana, Psycologist
      • +
    • Ana, Psycologist
      • +
    +
    + +
    Rechercher un correspondant
    + +
    +
      +
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem saepe et odio consectetur iste aut deleniti numquam id? Consectetur laborum cum fuga et placeat necessitatibus sequi aspernatur optio eos temporibus!
      • +
    • Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, fjfjjfut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
      • +
    • Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, fjfjjfut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
      • +
    • Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, fjfjjfut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
      • +
    +
    + +
    diff --git a/src/app/message/message.component.spec.ts b/src/app/message/message.component.spec.ts new file mode 100644 index 0000000..e860163 --- /dev/null +++ b/src/app/message/message.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MessageComponent } from './message.component'; + +describe('MessageComponent', () => { + let component: MessageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MessageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MessageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/message/message.component.ts b/src/app/message/message.component.ts new file mode 100644 index 0000000..099f2fe --- /dev/null +++ b/src/app/message/message.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-message', + templateUrl: './message.component.html', + styleUrls: ['./message.component.css'] +}) +export class MessageComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/services/chat.service.spec.ts b/src/app/services/chat.service.spec.ts new file mode 100644 index 0000000..4d8abdf --- /dev/null +++ b/src/app/services/chat.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ChatService } from './chat.service'; + +describe('ChatService', () => { + let service: ChatService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ChatService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/chat.service.ts b/src/app/services/chat.service.ts new file mode 100644 index 0000000..15ad779 --- /dev/null +++ b/src/app/services/chat.service.ts @@ -0,0 +1,35 @@ +import { Injectable } from '@angular/core'; +import { AngularFirestore } from '@angular/fire/firestore'; +import { Router } from '@angular/router'; +import { firestore } from 'firebase/app'; +import { map, switchMap } from 'rxjs/operators'; +import { Observable, combineLatest, of } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class ChatService { + + constructor( + private afs: AngularFirestore, + private router: Router, + ) { } + + get(chatId) { + return this.afs + .collection('chats') + .doc(chatId) + .snapshotChanges() + .pipe( + map( doc => { + // FIXME: ça ne devrait pas être nécessaire de cast la list retournée... + return { id: doc.payload.id, ...doc.payload.data() as {}} + }) + ); + } + getAll(){ + return this.afs + .collection('chats') + .snapshotChanges(); + } +} diff --git a/src/styles.css b/src/styles.css index 1a2b432..dc50dad 100644 --- a/src/styles.css +++ b/src/styles.css @@ -5,7 +5,9 @@ font-weight: regular; margin: 0; } - +.app-root{ + background-color: #FFFAE7; +} a:visited { color: inherit; } \ No newline at end of file -- GitLab