Closed #12

Better settings and blurred main

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

@@ -16,10 +16,6 @@
     flex-grow: 1;
 }
 
-.chatInput:disabled {
-    background-color: gray;
-}
-
 .chatInput:focus{
     background-color: #E4F1FE;
     color: #222;

src/app/chatroom/chatroom.component.css

@@ -1,13 +1,21 @@
 .mainContent{
     display: flex;
     height: calc(100vh - 50px);
+    background-color: #7C4DFF;
 }
 
 .chat {
     display: flex;
     flex: 5;
     order: 2;
     flex-direction: column;
+    transition: 0.3s ;
+}
+
+.blurred {
+    color: rgba(0, 0, 0, 0.25);
+    filter: blur(4px) brightness(50%);
+    transition: 0.3s;
 }
 
 .userListWrapper {

src/app/chatroom/chatroom.component.html

@@ -2,7 +2,7 @@
   <div class="userListWrapper">
     <app-user-list></app-user-list>
   </div>
-  <div class="chat"> 
+  <div class="chat" [ngClass]="{'blurred':!active}"> 
     <div #scroller class="feedWrapper">
       <app-feed></app-feed>
     </div>

src/app/chatroom/chatroom.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
+import { ChatService } from '../services/chat.service';
 
 @Component({
   selector: 'app-chatroom',
@@ -8,7 +9,13 @@ import { Component, OnInit, ViewChild, ElementRef, AfterViewChecked } from '@ang
 export class ChatroomComponent implements OnInit, AfterViewChecked {
   @ViewChild('scroller') private feedContainer: ElementRef;
 
-  constructor() { }
+  active : boolean = false;
+
+  constructor(private chat : ChatService) { 
+    this.chat.isChatActive().subscribe(active => {
+      this.active = active;
+    });
+  }
 
   ngOnInit() {
   }

src/app/message/message.component.ts

@@ -13,8 +13,8 @@ export class MessageComponent implements OnInit {
   userName: string;
   messageContent: string;
   timeStamp: Date = new Date();
+
   isOwnMessage: boolean;
-  ownEmail: string;
 
   constructor(private chatService : ChatService) {
      chatService.getUser().subscribe(user => {

src/app/services/chat.service.ts

@@ -4,6 +4,7 @@ import { Observable, of, BehaviorSubject } from 'rxjs';
 import { ChatMessage } from '../models/chat-message.model';
 import { RdfService } from './rdf.service';
 import { User } from '../models/user.model';
+import { ToastrService } from 'ngx-toastr';
 
 const fileClient = require('solid-file-client');
 @Injectable()
@@ -18,7 +19,7 @@ export class ChatService {
 
   friends: Array<User> = new Array<User>();
 
-  constructor(private rdf : RdfService) {
+  constructor(private rdf : RdfService, private toastr : ToastrService) {
     this.rdf.getSession();
     this.loadUserData().then(response => {
       this.loadFriends();
@@ -74,7 +75,13 @@ export class ChatService {
   }
 
   private async loadMessagesFromTo(user1 : User, user2 : User) {
-    (await this.rdf.getElementsFromContainer(await this.getChatUrl(user1, user2))).forEach(async element => {
+    let messages = (await this.rdf.getElementsFromContainer(await this.getChatUrl(user1, user2)))
+    if (!messages) {
+      this.toastr.error("Please make sure the other user has clicked on your chat", "Could not load messages");
+      this.isActive.next(false);
+      return;
+    }
+    messages.forEach(async element => {
       const url = element.value + "#message";
       await this.rdf.fetcher.load(url);
       const sender = this.rdf.getValueFromSchema("sender", url);

src/app/settings/settings.component.css

@@ -1,41 +1,55 @@
 
 .settingsFormWrapper {
     display: flex;
+    flex-direction: column;
+    font-family: "Open Sans", sans-serif;
+    width: 100%;
+    height: calc(100vh - 50px);
+    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;
+}
+
+h2 {
+    margin-top: 0.2em;
+    margin-bottom: 0.4em;
+}
+
+.setting {
+    margin: 5em;
+    padding: 1em;
+    border-radius: 1em;
     background-color: #7C4DFF;
+    box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.67);
+}
+
+.group {
+    display: flex;
+    margin: 0.6rm;
 }
 
-.addFriendInput{
+.textInput {
     border-radius: 5px;
-    margin: 5px;
-    padding: 5px;
+    margin: 0.3em;
+    padding: 0.2em;
     font-size: 1.3em;
     font-family: 'Open Sans', sans-serif;
     background-color: #eee;
     color: #000;
-    transition: 0.1s ease-out;
     flex-grow: 1;
 }
 
-.addFriendInput:focus{
-    background-color: #E4F1FE;
-    color: #222;
-    transition: 0.2s ease-in;
-}
-
-.addFriendButton{
+.button {
     width: 150px;
     border-radius: 5px;
     margin: 0px;
-    padding: 10px;
-    padding: 8px 24px;
+    padding: 0.3em;
+    padding: 0.3em 0.4em;
     font-size: 1.3em;
     font-family: 'Droid Sans', sans-serif;
     background-color: #2A2845;
     color: white;
     transition: 0.2s ease-out;
     min-width: 50px;
 }
-
-.addFriendButton:hover{
-    background-color: #444;
-}

src/app/settings/settings.component.html

@@ -1,8 +1,11 @@
 <div class="settingsFormWrapper">
-  <input class="addFriendInput"
-        [(ngModel)]="webId"
-        (keydown)="handleSubmit($event)"
-        placeholder="Enter your friend's WebID"/>
-
-    <button class="addFriendButton" (click)=send()>Send</button>
+  <div class="setting">
+      <h2>Add a friend</h2>
+      <div class="group">
+          <input class="textInput"
+          [(ngModel)]="webId" (keydown)="handleSubmit($event)"
+          placeholder="Enter your friend's WebID"/>
+          <button class="button" (click)=addFriend()>Add friend</button>
+      </div>
+  </div>
 </div>

src/app/settings/settings.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ChatService } from '../services/chat.service';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-settings',
@@ -10,19 +11,25 @@ export class SettingsComponent implements OnInit {
 
   webId : string;
 
-  constructor(private chat : ChatService) { }
+  constructor(private chat : ChatService, private toastr : ToastrService) { }
 
   ngOnInit() {
   }
 
-  send() {
-    this.chat.addFriend(this.webId);
-    this.webId = '';
+  addFriend() {
+    if (!this.webId) {
+      this.toastr.error("Please add a webId", "Wrong input");
+    } else if (this.webId.trim() === "") {
+      this.toastr.error("Please add a webId", "Wrong input");
+    } else {
+      this.chat.addFriend(this.webId.trim());
+      this.webId = "";
+    }
   }
 
   handleSubmit(event) {
     if (event.keyCode === 13) {
-      this.send();
+      this.addFriend();
     }
   }