Merge a7a7872 into 3bd0a8a

e2e/src/login.e2e-spec.ts

@@ -1,6 +1,6 @@
 import { LoginPage } from './login.po';
 
-describe('workspace-project App', () => {
+describe('Login page test', () => {
   let page: LoginPage;
 
   beforeEach(() => {

src/app/app.component.html

@@ -1 +1,6 @@
-<router-outlet></router-outlet>
+<div class="chatRoom">
+    <div class="chatHeaderWrapper">
+      <app-navbar></app-navbar>
+    </div>
+    <router-outlet></router-outlet>
+</div>

src/app/app.module.ts

@@ -23,8 +23,8 @@ import { MessageComponent } from './message/message.component';
 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 = [
   {
@@ -49,6 +49,16 @@ const routes: Routes = [
     component: CardComponent,
     canActivate: [AuthGuard],
   },
+  {
+    path: 'chat',
+    component: ChatroomComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'settings',
+    component: SettingsComponent,
+    canActivate: [AuthGuard],
+  },
   {
     path: 'register',
     component: RegisterComponent
@@ -69,7 +79,8 @@ const routes: Routes = [
     MessageComponent,
     NavbarComponent,
     UserItemComponent,
-    UserListComponent
+    UserListComponent,
+    SettingsComponent
   ],
   imports: [
     BrowserModule,
@@ -79,7 +90,7 @@ const routes: Routes = [
     ToastrModule.forRoot(),
     BrowserAnimationsModule //required for toastr
   ],
-  providers: [AuthService],
+  providers: [AuthService , ChatService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/card/card.component.html

@@ -1,30 +1,4 @@
 <div class="profile-container">
-  <!-- EXAMPLE TOP NAV -->
-  <div class="topnav">
-    <div class="logo">Solid</div>
-    <div class="menu-item">
-      <div>
-        <i class="far fa-compass"></i>
-      </div>
-      Menu Item 1
-    </div>
-    <div class="menu-item">
-      <div>
-        <i class="far fa-comment"></i>
-      </div>
-      Menu Item 2
-    </div>
-    <div class="menu-item">
-      <div>
-        <i class="fas fa-sliders-h"></i>
-      </div>
-      Menu Item 3
-    </div>
-
-    <div class="profile-menu" (click)="logout()">
-      <img [src]="profileImage" />
-    </div>
-  </div>
   <h1>Profile</h1>
 
   <!-- LOADING IMAGE -->

src/app/card/card.component.ts

@@ -46,7 +46,6 @@ export class CardComponent implements OnInit  {
     } catch (error) {
       console.log(`Error: ${error}`);
     }
-
   }
 
   // Submits the form, and saves the profile data using the auth/rdf service

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/login/login.component.ts

@@ -25,7 +25,7 @@ export class LoginComponent implements OnInit {
   ngOnInit() {
     // If we're authenticated, go to profile
     if (localStorage.getItem('solid-auth-client')) {
-      this.router.navigateByUrl('/card');
+      this.router.navigateByUrl('/chat');
     }
 
     this.identityProviders = this.auth.getIdentityProviders();