From 25ecfa5df1aeb1cdb8c26623aec7f0f725b60686 Mon Sep 17 00:00:00 2001 From: Miguel Garnacho Velez Date: Wed, 27 Feb 2019 23:42:54 +0100 Subject: [PATCH] Improved the interface Now the basic interface is done --- src/app/app.module.ts | 3 +- src/app/chat-form/chat-form.component.css | 36 +++++++++++++ src/app/chat-form/chat-form.component.html | 9 ++-- src/app/chat-form/chat-form.component.spec.ts | 2 +- src/app/chat-form/chat-form.component.ts | 14 ++++- src/app/chatroom/chatroom.component.css | 44 +++++++++++++++ src/app/chatroom/chatroom.component.html | 15 ++++-- src/app/chatroom/chatroom.component.spec.ts | 2 +- src/app/chatroom/chatroom.component.ts | 13 ++++- src/app/feed/feed.component.css | 9 ++++ src/app/feed/feed.component.html | 8 +-- src/app/feed/feed.component.spec.ts | 2 +- src/app/feed/feed.component.ts | 15 ++++-- src/app/message/message.component.css | 53 +++++++++++++++++++ src/app/message/message.component.html | 21 ++++++-- src/app/message/message.component.spec.ts | 2 +- src/app/message/message.component.ts | 22 ++++++-- src/app/models/chat-message.model.ts | 6 +++ src/app/models/user.model.ts | 5 ++ src/app/navbar/navbar.component.css | 7 --- src/app/navbar/navbar.component.html | 11 ++-- src/app/navbar/navbar.component.ts | 7 ++- src/app/services/chat.service.ts | 50 +++++++++++++++++ src/app/services/user.service.ts | 38 ------------- src/app/user-item/user-item.component.css | 44 +++++++++++++++ src/app/user-item/user-item.component.html | 10 ++-- src/app/user-item/user-item.component.spec.ts | 2 +- src/app/user-item/user-item.component.ts | 6 ++- src/app/user-list/user-list.component.html | 8 +-- src/app/user-list/user-list.component.spec.ts | 2 +- src/app/user-list/user-list.component.ts | 13 +++-- src/styles.css | 5 ++ 32 files changed, 391 insertions(+), 93 deletions(-) create mode 100644 src/app/models/chat-message.model.ts create mode 100644 src/app/models/user.model.ts create mode 100644 src/app/services/chat.service.ts delete mode 100644 src/app/services/user.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 919ad89..6eaa748 100644 --- a/src/app/app.module.ts +++ b/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 { } diff --git a/src/app/chat-form/chat-form.component.css b/src/app/chat-form/chat-form.component.css index e69de29..3b77af7 100644 --- a/src/app/chat-form/chat-form.component.css +++ b/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; +} diff --git a/src/app/chat-form/chat-form.component.html b/src/app/chat-form/chat-form.component.html index c5b5a4b..cb1c105 100644 --- a/src/app/chat-form/chat-form.component.html +++ b/src/app/chat-form/chat-form.component.html @@ -1,3 +1,6 @@ -

- chat-form works! -

+ + + diff --git a/src/app/chat-form/chat-form.component.spec.ts b/src/app/chat-form/chat-form.component.spec.ts index dcd0d41..91d3efc 100644 --- a/src/app/chat-form/chat-form.component.spec.ts +++ b/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(); }); }); diff --git a/src/app/chat-form/chat-form.component.ts b/src/app/chat-form/chat-form.component.ts index 7a1cec2..52e5329 100644 --- a/src/app/chat-form/chat-form.component.ts +++ b/src/app/chat-form/chat-form.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { ChatService } from '../services/chat.service'; @Component({ selector: 'app-chat-form', @@ -6,10 +7,21 @@ import { Component, OnInit } from '@angular/core'; 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(); + } + } } diff --git a/src/app/chatroom/chatroom.component.css b/src/app/chatroom/chatroom.component.css index e69de29..2bc9c87 100644 --- a/src/app/chatroom/chatroom.component.css +++ b/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%; +} diff --git a/src/app/chatroom/chatroom.component.html b/src/app/chatroom/chatroom.component.html index d98717a..1fac508 100644 --- a/src/app/chatroom/chatroom.component.html +++ b/src/app/chatroom/chatroom.component.html @@ -1,3 +1,12 @@ -

- chatroom works! -

+
+
+ +
+
+ +
+
+ +
+ +
\ No newline at end of file diff --git a/src/app/chatroom/chatroom.component.spec.ts b/src/app/chatroom/chatroom.component.spec.ts index eb41893..8217e83 100644 --- a/src/app/chatroom/chatroom.component.spec.ts +++ b/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(); }); }); diff --git a/src/app/chatroom/chatroom.component.ts b/src/app/chatroom/chatroom.component.ts index 5369c3c..cbc6d1a 100644 --- a/src/app/chatroom/chatroom.component.ts +++ b/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(); + } } diff --git a/src/app/feed/feed.component.css b/src/app/feed/feed.component.css index e69de29..c34bfc1 100644 --- a/src/app/feed/feed.component.css +++ b/src/app/feed/feed.component.css @@ -0,0 +1,9 @@ +.feed{ + display: flex; + flex-direction: column; +} + +.message{ + flex-direction: column; + margin: 10px 0; +} \ No newline at end of file diff --git a/src/app/feed/feed.component.html b/src/app/feed/feed.component.html index 229abb4..bf3cb92 100644 --- a/src/app/feed/feed.component.html +++ b/src/app/feed/feed.component.html @@ -1,3 +1,5 @@ -

- feed works! -

+
+
+ +
+
\ No newline at end of file diff --git a/src/app/feed/feed.component.spec.ts b/src/app/feed/feed.component.spec.ts index 4101160..95f4bf0 100644 --- a/src/app/feed/feed.component.spec.ts +++ b/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(); }); }); diff --git a/src/app/feed/feed.component.ts b/src/app/feed/feed.component.ts index a9de1bd..857000c 100644 --- a/src/app/feed/feed.component.ts +++ b/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; - constructor() { } + constructor(private chat: ChatService) { } ngOnInit() { + this.feed = this.chat.getMessages(); + } + + ngOnChanges() { + this.feed = this.chat.getMessages(); } } diff --git a/src/app/message/message.component.css b/src/app/message/message.component.css index e69de29..3fce31b 100644 --- a/src/app/message/message.component.css +++ b/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; +} \ No newline at end of file diff --git a/src/app/message/message.component.html b/src/app/message/message.component.html index 9bee74c..77386e0 100644 --- a/src/app/message/message.component.html +++ b/src/app/message/message.component.html @@ -1,3 +1,18 @@ -

- message works! -

+
+
+ + {{ userName }} + + + {{ timeStamp | date:'medium' }} + +
+
+ {{ messageContent }} +
+
\ No newline at end of file diff --git a/src/app/message/message.component.spec.ts b/src/app/message/message.component.spec.ts index e860163..f30b0cf 100644 --- a/src/app/message/message.component.spec.ts +++ b/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(); }); }); diff --git a/src/app/message/message.component.ts b/src/app/message/message.component.ts index b5a44fe..637f878 100644 --- a/src/app/message/message.component.ts +++ b/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; + } } diff --git a/src/app/models/chat-message.model.ts b/src/app/models/chat-message.model.ts new file mode 100644 index 0000000..24b115f --- /dev/null +++ b/src/app/models/chat-message.model.ts @@ -0,0 +1,6 @@ +export class ChatMessage { + $key?: string; + userName?: string; + message?: string; + timeSent?: Date = new Date(); +} diff --git a/src/app/models/user.model.ts b/src/app/models/user.model.ts new file mode 100644 index 0000000..9cf31de --- /dev/null +++ b/src/app/models/user.model.ts @@ -0,0 +1,5 @@ +export class User { + uid?: string; + username?: string; + status?: string; +} diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css index 81822de..4fe541d 100644 --- a/src/app/navbar/navbar.component.css +++ b/src/app/navbar/navbar.component.css @@ -1,9 +1,6 @@ .topnav { - position:absolute; - top:0; - left:0; width: 100%; background-color: #7C4DFF; height: 50px; @@ -54,10 +51,6 @@ .topnav .profile-menu { float: right; - display: inline-block; - width: 50px; - height: 50px; - background-color: rgba(0,0,0,0.25); } .topnav .profile-menu img { diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html index 6804ea5..5e4da59 100644 --- a/src/app/navbar/navbar.component.html +++ b/src/app/navbar/navbar.component.html @@ -17,10 +17,13 @@
- Solid Profile + Solid Profile + + +
+ +
+ Sing out -
- -
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts index 8646ace..2bab9ac 100644 --- a/src/app/navbar/navbar.component.ts +++ b/src/app/navbar/navbar.component.ts @@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; import { AuthService } from '../services/solid.auth.service'; import { SolidSession } from '../models/solid-session.model'; -import { UserService } from '../services/user.service'; @Component({ selector: 'app-navbar', @@ -10,13 +9,13 @@ import { UserService } from '../services/user.service'; styleUrls: ['./navbar.component.css'] }) export class NavbarComponent implements OnInit { + user: Observable; - profileImage: string; - constructor(private authService: AuthService, private userService : UserService) { } + constructor(private authService: AuthService) { } ngOnInit() { - this.profileImage = this.userService.profilePicture(); + } logout() { diff --git a/src/app/services/chat.service.ts b/src/app/services/chat.service.ts new file mode 100644 index 0000000..f5d9349 --- /dev/null +++ b/src/app/services/chat.service.ts @@ -0,0 +1,50 @@ +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; + +import { ChatMessage } from '../models/chat-message.model'; +import { RdfService } from './rdf.service'; +import { User } from '../models/user.model'; + +@Injectable() +export class ChatService { + + chatMessages: Observable; + + constructor(private rdf : RdfService) { + + } + + getUser() { + return this.getUsers().subscribe(users => { + return users[0]; + }); + } + + getUsers() : Observable { + var users = new Array(); + return new Observable(); + } + + sendMessage(msg: string) { + const timestamp = this.getTimeStamp(); + this.chatMessages = this.getMessages(); + this.chatMessages.toPromise(); + } + + getMessages(): Observable { + var messages = new Array(); + return new Observable(); + } + + getTimeStamp() { + const now = new Date(); + const date = now.getUTCFullYear() + '/' + + (now.getUTCMonth() + 1) + '/' + + now.getUTCDate(); + const time = now.getUTCHours() + ':' + + now.getUTCMinutes() + ':' + + now.getUTCSeconds(); + + return (date + ' ' + time); + } +} diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts deleted file mode 100644 index a06e81a..0000000 --- a/src/app/services/user.service.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { Injectable } from '@angular/core'; -import { SolidProfile } from '../models/solid-profile.model'; -import { RdfService } from './rdf.service'; -import { AuthService } from './solid.auth.service'; - -@Injectable({ - providedIn: 'root' -}) -export class UserService { - - profile: SolidProfile; - - constructor(private rdf: RdfService, private auth: AuthService) { - - } - - ngOnInit() { - this.loadProfile(); - } - - // Loads the profile from the rdf service and handles the response - async loadProfile() { - try { - const profile = await this.rdf.getProfile(); - if (profile) { - this.profile = profile; - this.auth.saveOldUserData(profile); - } - } catch (error) { - console.log(`Error: ${error}`); - } - } - - profilePicture(): string { - return this.profile ? this.profile.image : '/assets/images/profile.png'; - } - -} diff --git a/src/app/user-item/user-item.component.css b/src/app/user-item/user-item.component.css index e69de29..afd5453 100644 --- a/src/app/user-item/user-item.component.css +++ b/src/app/user-item/user-item.component.css @@ -0,0 +1,44 @@ +.userItem{ + height: auto; + padding: 10px; + width: 90%; + margin-top: 10px; + border-radius: 1px; + align-items:flex-start; + background-color: #201835; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + color: #A098A5; + border-radius: 8px; + transition: ease-in 0.2s; +} + +.userItem:hover{ + background-color: #453968; + color: #ddd; + transition: ease-in 0.1s; +} + +.online{ + background-color: #0FA; +} + +.busy{ + background-color: #FB0; +} + +.offline{ + background-color: #888; +} + +.status{ + border: 1px solid black; + display: inline-block; + min-width: 10px; + min-height: 10px; + border-radius: 50%; + margin: 10px 12px 0px 10px; +} + +.userName{ + display: inline-block; +} \ No newline at end of file diff --git a/src/app/user-item/user-item.component.html b/src/app/user-item/user-item.component.html index 51d7fef..3f8b254 100644 --- a/src/app/user-item/user-item.component.html +++ b/src/app/user-item/user-item.component.html @@ -1,3 +1,7 @@ -

- user-item works! -

+
+ + + + {{user.displayName}} + +
\ No newline at end of file diff --git a/src/app/user-item/user-item.component.spec.ts b/src/app/user-item/user-item.component.spec.ts index f2b19e9..0ac1adc 100644 --- a/src/app/user-item/user-item.component.spec.ts +++ b/src/app/user-item/user-item.component.spec.ts @@ -19,7 +19,7 @@ describe('UserItemComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('should be created', () => { expect(component).toBeTruthy(); }); }); diff --git a/src/app/user-item/user-item.component.ts b/src/app/user-item/user-item.component.ts index ad61fb8..cb77311 100644 --- a/src/app/user-item/user-item.component.ts +++ b/src/app/user-item/user-item.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 { User } from '../models/user.model'; @Component({ selector: 'app-user-item', @@ -7,6 +9,8 @@ import { Component, OnInit } from '@angular/core'; }) export class UserItemComponent implements OnInit { + @Input() user: User; + constructor() { } ngOnInit() { diff --git a/src/app/user-list/user-list.component.html b/src/app/user-list/user-list.component.html index fea7a8d..9d11b21 100644 --- a/src/app/user-list/user-list.component.html +++ b/src/app/user-list/user-list.component.html @@ -1,3 +1,5 @@ -

- user-list works! -

+
+ + +
\ No newline at end of file diff --git a/src/app/user-list/user-list.component.spec.ts b/src/app/user-list/user-list.component.spec.ts index 9d52180..ddbb30f 100644 --- a/src/app/user-list/user-list.component.spec.ts +++ b/src/app/user-list/user-list.component.spec.ts @@ -19,7 +19,7 @@ describe('UserListComponent', () => { fixture.detectChanges(); }); - it('should create', () => { + it('should be created', () => { expect(component).toBeTruthy(); }); }); diff --git a/src/app/user-list/user-list.component.ts b/src/app/user-list/user-list.component.ts index 96074f3..5346d42 100644 --- a/src/app/user-list/user-list.component.ts +++ b/src/app/user-list/user-list.component.ts @@ -1,15 +1,18 @@ import { Component, OnInit } from '@angular/core'; +import { User } from '../models/user.model'; +import { ChatService } from '../services/chat.service'; @Component({ selector: 'app-user-list', templateUrl: './user-list.component.html', styleUrls: ['./user-list.component.css'] }) -export class UserListComponent implements OnInit { +export class UserListComponent { + users: User[]; - constructor() { } - - ngOnInit() { + constructor(chat: ChatService) { + chat.getUsers().subscribe(users => { + this.users = users; + }); } - } diff --git a/src/styles.css b/src/styles.css index e400169..5047796 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,3 +1,8 @@ + +body { + margin : 0px; +} + /* You can add global styles to this file, and also import other style files */ button.wide-button { width: 360px;