Improved the interface

Now the basic interface is done

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { NavbarComponent } from './navbar/navbar.component';
 import { UserItemComponent } from './user-item/user-item.component';
 import { UserListComponent } from './user-list/user-list.component';
 import { SettingsComponent } from './settings/settings.component';
+import { ChatService } from './services/chat.service';
 
 const routes: Routes = [
   {
@@ -89,7 +90,7 @@ const routes: Routes = [
     ToastrModule.forRoot(),
     BrowserAnimationsModule //required for toastr
   ],
-  providers: [AuthService],
+  providers: [AuthService , ChatService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/chat-form/chat-form.component.css

@@ -0,0 +1,36 @@
+
+.chatInput{
+    width: calc(100vw - 195px);
+    border-radius: 5px;
+    margin: 5px;
+    padding: 5px;
+    font-size: 1.3em;
+    font-family: 'Open Sans', sans-serif;
+    background-color: #eee;
+    color: #000;
+    transition: 0.1s ease-out;
+}
+
+.chatInput:focus{
+    background-color: #E4F1FE;
+    color: #222;
+    transition: 0.2s ease-in;
+}
+
+.chatButton{
+    width: 150px;
+    border-radius: 5px;
+    margin: 0px;
+    padding: 10px;
+    padding: 8px 24px;
+    font-size: 1.3em;
+    font-family: 'Droid Sans', sans-serif;
+    background-color: #2A2845;
+    color: white;
+    transition: 0.2s ease-out;
+    min-width: 50px;
+}
+
+.chatButton:hover{
+    background-color: #444;
+}

src/app/chat-form/chat-form.component.html

@@ -1,3 +1,6 @@
-<p>
-  chat-form works!
-</p>
+<input 
+    class="chatInput" 
+    [(ngModel)]="message" 
+    (keydown)="handleSubmit($event)"/>
+
+<button class="chatButton" (click)=send()>Send</button>

src/app/chat-form/chat-form.component.spec.ts

@@ -19,7 +19,7 @@ describe('ChatFormComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should be created', () => {
     expect(component).toBeTruthy();
   });
 });

src/app/chat-form/chat-form.component.ts

@@ -1,15 +1,27 @@
 import { Component, OnInit } from '@angular/core';
+import { ChatService } from '../services/chat.service';
 
 @Component({
   selector: 'app-chat-form',
   templateUrl: './chat-form.component.html',
   styleUrls: ['./chat-form.component.css']
 })
 export class ChatFormComponent implements OnInit {
+  message: string;
 
-  constructor() { }
+  constructor(private chat: ChatService) { }
 
   ngOnInit() {
   }
 
+  send() {
+    this.chat.sendMessage(this.message);
+    this.message = '';
+  }
+
+  handleSubmit(event) {
+    if (event.keyCode === 13) {
+      this.send();
+    }
+  }
 }

src/app/chatroom/chatroom.component.css

@@ -0,0 +1,44 @@
+.mainContent{
+    display: flex;
+    height: calc(100vh - 100px);
+}
+
+.userListWrapper {
+    background-color: #2A2845;
+    color: #fff;
+    display: flex;
+    font-family: "Open Sans", sans-serif;
+    font-size: 1.2em;
+    flex: 1;
+    order: 1;
+    padding:20px 0px 40px 30px;
+    border-right: 1px solid #222;
+}
+
+.feedWrapper {
+    background-color: #fff;
+    background: 
+        linear-gradient(181deg, rgba(100,200,255,0.6), rgba(0, 0, 0, 0.9)),
+        url('../../assets/images/Solid_Pattern.png') center center no-repeat;
+    font-family: "Open Sans", sans-serif;
+    font-size: 1.2em;
+    flex: 5;
+    order: 2;
+    overflow-y: scroll;
+    padding:20px 0px 0px 24px;
+}
+
+.chatFormWrapper {
+    height: 50px;
+    background-color: #7C4DFF;
+}
+
+#scroll-style::-webkit-scrollbar-track
+{
+	border-radius: 10px;
+	background-color: #F5F5F5;
+}
+
+app-user-list {
+    width: 100%;
+}

src/app/chatroom/chatroom.component.html

@@ -1,3 +1,12 @@
-<p>
-  chatroom works!
-</p>
+<div class="mainContent">
+  <div class="userListWrapper">
+    <app-user-list></app-user-list>
+  </div>
+  <div #scroller class="feedWrapper">
+    <app-feed></app-feed>
+  </div>
+</div>
+
+<div class="chatFormWrapper">
+  <app-chat-form></app-chat-form>
+</div>

src/app/chatroom/chatroom.component.spec.ts

@@ -19,7 +19,7 @@ describe('ChatroomComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should be created', () => {
     expect(component).toBeTruthy();
   });
 });

src/app/chatroom/chatroom.component.ts

@@ -1,15 +1,24 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
 
 @Component({
   selector: 'app-chatroom',
   templateUrl: './chatroom.component.html',
   styleUrls: ['./chatroom.component.css']
 })
-export class ChatroomComponent implements OnInit {
+export class ChatroomComponent implements OnInit, AfterViewChecked {
+  @ViewChild('scroller') private feedContainer: ElementRef;
 
   constructor() { }
 
   ngOnInit() {
   }
 
+  scrollToBottom(): void {
+    this.feedContainer.nativeElement.scrollTop
+    = this.feedContainer.nativeElement.scrollHeight;
+  }
+
+  ngAfterViewChecked() {
+    this.scrollToBottom();
+  }
 }

src/app/feed/feed.component.css

@@ -0,0 +1,9 @@
+.feed{
+    display: flex;
+    flex-direction: column;
+}
+
+.message{
+    flex-direction: column;
+    margin: 10px 0;
+}

src/app/feed/feed.component.html

@@ -1,3 +1,5 @@
-<p>
-  feed works!
-</p>
+<div class="feed">
+  <div *ngFor="let message of feed | async" class="message">
+    <app-message [chatMessage]=message></app-message>
+  </div>
+</div>

src/app/feed/feed.component.spec.ts

@@ -19,7 +19,7 @@ describe('FeedComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should be created', () => {
     expect(component).toBeTruthy();
   });
 });

src/app/feed/feed.component.ts

@@ -1,15 +1,24 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnChanges } from '@angular/core';
+import { ChatService } from '../services/chat.service';
+import { Observable } from 'rxjs';
+import { ChatMessage } from '../models/chat-message.model';
 
 @Component({
   selector: 'app-feed',
   templateUrl: './feed.component.html',
   styleUrls: ['./feed.component.css']
 })
-export class FeedComponent implements OnInit {
+export class FeedComponent implements OnInit, OnChanges {
+  feed: Observable<ChatMessage[]>;
 
-  constructor() { }
+  constructor(private chat: ChatService) { }
 
   ngOnInit() {
+    this.feed = this.chat.getMessages();
+  }
+
+  ngOnChanges() {
+    this.feed = this.chat.getMessages();
   }
 
 }

src/app/message/message.component.css

@@ -0,0 +1,53 @@
+.messageContainer{
+    display: flex;
+    height: auto;
+    width: 70%;
+    min-width: 400px;
+    border-radius: 5px;
+    align-items:stretch;
+    background-color: #eee;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.23);
+}
+
+.isOwnMessageContainer{
+    background-color: #01579B;
+}
+
+.messageData{
+    flex: 1;
+    padding: 10px;
+    font-size: 0.7em;
+}
+
+.sender{
+    display: block;
+    color: #222;
+    font-weight: bold;
+}
+
+.isOwnSender{
+    color: #E1F5FE;
+}
+
+.timestamp {
+    color: #555;
+    font-style: italic;
+}
+
+.isOwnTimestamp{
+    color: #4FC3F7;
+}
+
+.messageContent{
+    height: auto;
+    flex: 9;
+    background-color: #fff;
+    padding: 10px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+.isOwnMessageContent{
+    background-color: #E3F2FD;
+    color: #01579B;
+}

src/app/message/message.component.html

@@ -1,3 +1,18 @@
-<p>
-  message works!
-</p>
+<div class="messageContainer"
+    [ngClass]="{'isOwnMessageContainer':isOwnMessage}">
+    <div class="messageData"
+        [ngClass]="{'isOwnMessageData':isOwnMessage}">
+        <span class="sender"
+            [ngClass]="{'isOwnSender':isOwnMessage}">
+            {{ userName }}
+        </span>
+        <span class="timestamp" 
+            [ngClass] = "{'isOwnTimestamp':isOwnMessage}">
+            {{ timeStamp | date:'medium' }}
+        </span>
+    </div>
+    <div class="messageContent"
+        [ngClass]="{'isOwnMessageContent':isOwnMessage}">
+        {{ messageContent }}
+    </div>
+</div>

src/app/message/message.component.spec.ts

@@ -19,7 +19,7 @@ describe('MessageComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should be created', () => {
     expect(component).toBeTruthy();
   });
 });

src/app/message/message.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { ChatService } from '../services/chat.service';
+import { ChatMessage } from '../models/chat-message.model';
 
 @Component({
   selector: 'app-message',
@@ -7,9 +9,23 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MessageComponent implements OnInit {
 
-  constructor() { }
+  @Input() chatMessage: ChatMessage;
+  userName: string;
+  messageContent: string;
+  timeStamp: Date = new Date();
+  isOwnMessage: boolean;
+  ownEmail: string;
 
-  ngOnInit() {
+  constructor() {
+    /* authService.authUser().subscribe(user => {
+      this.userName = user.userName;
+      this.isOwnMessage = true;
+    }); */
   }
 
+  ngOnInit(chatMessage = this.chatMessage) {
+    this.messageContent = chatMessage.message;
+    this.timeStamp = chatMessage.timeSent;
+    this.userName = chatMessage.userName;
+  }
 }

src/app/models/chat-message.model.ts

@@ -0,0 +1,6 @@
+export class ChatMessage {
+    $key?: string;
+    userName?: string;
+    message?: string;
+    timeSent?: Date = new Date();
+}

src/app/models/user.model.ts

@@ -0,0 +1,5 @@
+export class User {
+    uid?: string;
+    username?: string;
+    status?: string;
+}