diff --git a/src/app/chat-form/chat-form.component.css b/src/app/chat-form/chat-form.component.css index 306b293..cc20772 100644 --- a/src/app/chat-form/chat-form.component.css +++ b/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; diff --git a/src/app/chatroom/chatroom.component.css b/src/app/chatroom/chatroom.component.css index 032a077..b15b96e 100644 --- a/src/app/chatroom/chatroom.component.css +++ b/src/app/chatroom/chatroom.component.css @@ -1,6 +1,7 @@ .mainContent{ display: flex; height: calc(100vh - 50px); + background-color: #7C4DFF; } .chat { @@ -8,6 +9,13 @@ 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 { diff --git a/src/app/chatroom/chatroom.component.html b/src/app/chatroom/chatroom.component.html index 615e2a4..71e7c35 100644 --- a/src/app/chatroom/chatroom.component.html +++ b/src/app/chatroom/chatroom.component.html @@ -2,7 +2,7 @@
-
+
diff --git a/src/app/chatroom/chatroom.component.ts b/src/app/chatroom/chatroom.component.ts index cbc6d1a..7e6c562 100644 --- a/src/app/chatroom/chatroom.component.ts +++ b/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() { } diff --git a/src/app/message/message.component.ts b/src/app/message/message.component.ts index 7982513..eb73b89 100644 --- a/src/app/message/message.component.ts +++ b/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 => { diff --git a/src/app/services/chat.service.ts b/src/app/services/chat.service.ts index 61049e4..24a071d 100644 --- a/src/app/services/chat.service.ts +++ b/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 = new Array(); - 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); diff --git a/src/app/settings/settings.component.css b/src/app/settings/settings.component.css index 943f34b..ea3cf20 100644 --- a/src/app/settings/settings.component.css +++ b/src/app/settings/settings.component.css @@ -1,33 +1,51 @@ .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; @@ -35,7 +53,3 @@ transition: 0.2s ease-out; min-width: 50px; } - -.addFriendButton:hover{ - background-color: #444; -} \ No newline at end of file diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index d1440fe..8084d81 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -1,8 +1,11 @@
- - - +
+

Add a friend

+
+ + +
+
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts index db34f62..642c5e3 100644 --- a/src/app/settings/settings.component.ts +++ b/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(); } }