From f9ef6c2669916448ab86bad7b245b880b8b51e36 Mon Sep 17 00:00:00 2001 From: trivernis Date: Sat, 18 Jan 2020 18:19:26 +0100 Subject: [PATCH 1/6] Refactor profile and self service --- src/app/app.component.ts | 2 +- .../components/profile/profile.component.ts | 4 +- src/app/models/user.ts | 36 +++-- src/app/services/profile/profile.service.ts | 149 +++++++++--------- src/app/services/selfservice/self.service.ts | 110 +++++++------ 5 files changed, 164 insertions(+), 137 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index f332f7b..df671f7 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -15,7 +15,7 @@ export class AppComponent implements OnInit { ngOnInit() { this.data.currentUserInfo.subscribe(user => { if (user.loggedIn !== true) { - this.selfservice.checkIfLoggedIn(); + this.selfservice.checkIfLoggedIn().subscribe(); } }); } diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts index b1a9aba..948e830 100644 --- a/src/app/components/profile/profile.component.ts +++ b/src/app/components/profile/profile.component.ts @@ -58,9 +58,7 @@ export class ProfileComponent implements OnInit { this.userProfile = response; // tslint:disable-next-line:max-line-length this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(this.userProfile.userID, this.self); - if (this.userProfile.userID === this.self.userID) { - this.ownProfile = true; - } else {this.ownProfile = false; } + this.ownProfile = this.userProfile.userID === this.self.userID; this.rankname = this.levellist.getLevelName(this.userProfile.level); } else { this.profileNotFound = true; } this.loading = false; diff --git a/src/app/models/user.ts b/src/app/models/user.ts index 25c1773..c4658ca 100644 --- a/src/app/models/user.ts +++ b/src/app/models/user.ts @@ -46,19 +46,29 @@ export class User { } catch (err) { console.error(err); } - this.friends = userDataResponse.friends - .map(friend => new FriendInfo( - friend.id, friend.name, - friend.level, - this.buildProfilePictureUrl(friend.profilePicture) - )); - this.groups = userDataResponse.groups - .map(group => new GroupInfo(group.id, group.name)); - this.chatIDs = userDataResponse.chats.map(chat => chat.id); - this.sentRequestUserIDs = userDataResponse.sentRequests - .map(request => request.receiver.id); - this.receivedRequests = userDataResponse.receivedRequests - .map(request => new FriendRequest(request.id, request.sender.id, request.sender.handle, request.sender.name)); + if (userDataResponse.friends) { + this.friends = userDataResponse.friends + .map(friend => new FriendInfo( + friend.id, friend.name, + friend.level, + this.buildProfilePictureUrl(friend.profilePicture) + )); + } + if (userDataResponse.groups) { + this.groups = userDataResponse.groups + .map(group => new GroupInfo(group.id, group.name)); + } + if (userDataResponse.chats) { + this.chatIDs = userDataResponse.chats.map(chat => chat.id); + } + if (userDataResponse.sentRequests) { + this.sentRequestUserIDs = userDataResponse.sentRequests + .map(request => request.receiver.id); + } + if (userDataResponse.receivedRequests) { + this.receivedRequests = userDataResponse.receivedRequests + .map(request => new FriendRequest(request.id, request.sender.id, request.sender.handle, request.sender.name)); + } } buildProfilePictureUrl(path: string): string { diff --git a/src/app/services/profile/profile.service.ts b/src/app/services/profile/profile.service.ts index 1eecb07..b1df34f 100644 --- a/src/app/services/profile/profile.service.ts +++ b/src/app/services/profile/profile.service.ts @@ -1,92 +1,97 @@ -import { Injectable } from '@angular/core'; -import { Http } from '@angular/http'; -import { Post } from 'src/app/models/post'; -import { Author } from 'src/app/models/author'; -import { environment } from 'src/environments/environment'; -import { User } from 'src/app/models/user'; -import { Observable, Subject } from 'rxjs'; -import { Activity } from 'src/app/models/activity'; +import {Injectable} from '@angular/core'; +import {HttpClient} from '@angular/common/http'; +import {Post} from 'src/app/models/post'; +import {Author} from 'src/app/models/author'; +import {environment} from 'src/environments/environment'; +import {User} from 'src/app/models/user'; +import {Subject} from 'rxjs'; +import {Activity} from 'src/app/models/activity'; +import {BaseService} from '../base.service'; + +const graphqlGetProfileQuery = `query($userId: ID) { + getUser(userId:$userId){ + id + handle + name + profilePicture + points + level + friendCount + groupCount + joinedAt + friends{ + id + } + posts{ + id, + content, + htmlContent, + upvotes, + downvotes, + userVote, + deletable, + activity{ + id + name + description + points + }, + author{ + name, + handle, + profilePicture + id}, + createdAt + } + } +}`; @Injectable({ providedIn: 'root' }) -export class ProfileService { +export class ProfileService extends BaseService { + + constructor(private http: HttpClient) { + super(); + } public proflile: Subject = new Subject(); - constructor(private http: Http) { } + /** + * Builds the request body of a getProfile request + * @param id + */ + private static buildGetProfileBody(id: string): any { + return { + query: graphqlGetProfileQuery, + variables: { + userId: id, + } + }; + } + /** + * Returns the data for the specified user. + * @param userId + */ public getUserData(userId: string) { const headers = new Headers(); headers.set('Content-Type', 'application/json'); - // return this.renderProfile(this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId))); - this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId)).subscribe(result => { - // push onto subject - this.proflile.next(this.renderProfile(result.json())); + this.http.post(environment.graphQLUrl, ProfileService.buildGetProfileBody(userId)).subscribe(result => { + this.proflile.next(this.getProfileData(result)); return this.proflile; }); } - public buildGetProfileJson(id: string): any { - const body = {query: `query($userId: ID) { - getUser(userId:$userId){ - id - handle - name - profilePicture - points - level - friendCount - groupCount - joinedAt - friends{ - id - } - posts{ - id, - content, - htmlContent, - upvotes, - downvotes, - userVote, - deletable, - activity{ - id - name - description - points - }, - author{ - name, - handle, - profilePicture - id}, - createdAt - } - } - }`, variables: { - userId: id, - }}; - return body; - } - - public renderProfile(response: any): User { + /** + * Returns a userinstance filled with profile data + * @param response + */ + public getProfileData(response: any): User { const posts = new Array(); const profile = new User(); - if (response.data.getUser != null) { - - profile.userID = response.data.getUser.id; - profile.username = response.data.getUser.name; - profile.handle = response.data.getUser.handle; - profile.points = response.data.getUser.points; - profile.level = response.data.getUser.level; - profile.friendCount = response.data.getUser.friendCount; - profile.groupCount = response.data.getUser.groupCount; - if (response.data.getUser.profilePicture) { - profile.profilePicture = environment.greenvironmentUrl + response.data.getUser.profilePicture; - } else { - profile.profilePicture = 'assets/images/default-profilepic.svg'; - } + if (response.data.getUser) { + profile.assignFromResponse(response.data.getUser); const temp = new Date(Number(response.data.getUser.joinedAt)); const date = temp.toLocaleString('en-GB'); profile.joinedAt = date; diff --git a/src/app/services/selfservice/self.service.ts b/src/app/services/selfservice/self.service.ts index efb8fb6..133f8ad 100644 --- a/src/app/services/selfservice/self.service.ts +++ b/src/app/services/selfservice/self.service.ts @@ -1,41 +1,87 @@ -import { Injectable, EventEmitter, Output } from '@angular/core'; -import {Http, URLSearchParams, Headers} from '@angular/http'; -import { User } from 'src/app/models/user'; -import { DatasharingService } from '../datasharing.service'; +import {Injectable} from '@angular/core'; +import {User} from 'src/app/models/user'; +import {DatasharingService} from '../datasharing.service'; import {Router} from '@angular/router'; -import { environment } from 'src/environments/environment'; -import { FriendRequest } from 'src/app/models/friendRequest'; -import { FriendInfo } from 'src/app/models/friendinfo'; -import { GroupInfo } from 'src/app/models/groupinfo'; +import {environment} from 'src/environments/environment'; +import {FriendRequest} from 'src/app/models/friendRequest'; +import {FriendInfo} from 'src/app/models/friendinfo'; +import {HttpClient} from '@angular/common/http'; +import {tap} from 'rxjs/operators'; +import {BaseService} from '../base.service'; + +const getSelfGraphqlQuery = `{ + getSelf{ + id, + name, + email, + handle, + points, + level, + profilePicture, + receivedRequests{id, sender{name, handle, id}}, + sentRequests{receiver{id}}, + friends { + id, + name, + level, + profilePicture, + }, + groups { + id, + name + }, + chats{ + id + }, + settings + } +}`; @Injectable({ providedIn: 'root' }) -export class SelfService { +export class SelfService extends BaseService { + + constructor(private http: HttpClient, private data: DatasharingService) { + super(); + } - constructor(private http: Http, private data: DatasharingService, private router: Router) { } + /** + * Builds the getself request body + */ + private static buildGetSelfBody(): any { + return { + query: getSelfGraphqlQuery, variables: {} + }; + } + /** + * Checks if the user is still logged in + */ public checkIfLoggedIn() { const url = environment.graphQLUrl; const headers = new Headers(); headers.set('Content-Type', 'application/json'); - return this.http.post(url, this.buildJson()) - .subscribe(response => { + return this.http.post(url, SelfService.buildGetSelfBody(), {headers: this.headers}) + .pipe(tap(response => { this.stillLoggedIn(); - this.updateUserInfo(response.json()); + this.updateUserInfo(response); }, error => { this.notLoggedIn(); - // this.fakeLogin(); - } - ); + })); } + public stillLoggedIn() { } public notLoggedIn() { } + /** + * Updates the info on a user + * @param response + */ public updateUserInfo(response: any) { const user = new User(); user.assignFromResponse(response.data.getSelf); @@ -63,36 +109,4 @@ export class SelfService { this.data.changeUserInfo(user); } - - public buildJson(): any { - const body = {query: `{ - getSelf{ - id, - name, - email, - handle, - points, - level, - profilePicture, - receivedRequests{id, sender{name, handle, id}}, - sentRequests{receiver{id}}, - friends { - id, - name, - level, - profilePicture, - }, - groups { - id, - name - }, - chats{ - id - }, - settings - } - }`, variables: { - }}; - return body; - } } From 454917efdd46265bfec13a98a7a2b560ee7d403b Mon Sep 17 00:00:00 2001 From: trivernis Date: Sat, 18 Jan 2020 18:28:54 +0100 Subject: [PATCH 2/6] Change error clearing to occur on input change --- src/app/components/feed/feed.component.html | 2 +- src/app/components/feed/feed.component.ts | 13 ++++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index dac9442..c8339e5 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -7,7 +7,7 @@ infinite-scroll - + diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts index ff21e52..599c45e 100644 --- a/src/app/components/feed/feed.component.ts +++ b/src/app/components/feed/feed.component.ts @@ -49,9 +49,6 @@ export class FeedComponent implements OnInit { }); this.feedService.getPosts('NEW'); this.feedService.posts.subscribe(response => { - if (response.length > 0) { - // this.loading = false; - } this.parentSelectedPostList = response; }); this.feedService.newPostsAvailable.subscribe(response => { @@ -104,4 +101,14 @@ export class FeedComponent implements OnInit { getErrorMessage() { return this.errorMessage; } + + /** + * Executed when the text in the input field changes. + */ + private onTextInputChange() { + if (this.errorOccurred) { + this.errorOccurred = false; + this.errorMessage = ''; + } + } } From f4a456ace47c041b3559399f163df6555a002b3e Mon Sep 17 00:00:00 2001 From: trivernis Date: Sat, 18 Jan 2020 18:33:11 +0100 Subject: [PATCH 3/6] Fix event callback being private --- src/app/components/feed/feed.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts index 599c45e..baf1aa8 100644 --- a/src/app/components/feed/feed.component.ts +++ b/src/app/components/feed/feed.component.ts @@ -105,7 +105,7 @@ export class FeedComponent implements OnInit { /** * Executed when the text in the input field changes. */ - private onTextInputChange() { + onTextInputChange() { if (this.errorOccurred) { this.errorOccurred = false; this.errorMessage = ''; From 168c737665539d4f53d186c4213c6cdb7cf02f4a Mon Sep 17 00:00:00 2001 From: trivernis Date: Sat, 18 Jan 2020 19:38:01 +0100 Subject: [PATCH 4/6] Move file upload handling to self service --- .../components/profile/profile.component.ts | 18 ++++----- .../models/interfaces/IFileUploadResult.ts | 5 +++ src/app/services/selfservice/self.service.ts | 38 +++++-------------- 3 files changed, 21 insertions(+), 40 deletions(-) create mode 100644 src/app/models/interfaces/IFileUploadResult.ts diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts index 948e830..e73df0b 100644 --- a/src/app/components/profile/profile.component.ts +++ b/src/app/components/profile/profile.component.ts @@ -8,7 +8,7 @@ import { ProfileService } from 'src/app/services/profile/profile.service'; import { HttpClient } from '@angular/common/http'; import { environment } from 'src/environments/environment'; import {MatSnackBar} from '@angular/material/snack-bar'; -import { reduce } from 'rxjs/operators'; +import {SelfService} from '../../services/selfservice/self.service'; @Component({ selector: 'app-profile', @@ -33,7 +33,8 @@ export class ProfileComponent implements OnInit { private router: Router, private requestService: RequestService, private data: DatasharingService, - private profileService: ProfileService) { + private profileService: ProfileService, + private selfService: SelfService) { router.events.forEach((event) => { // check if the user is on the profile page (of userY) and routes to the page of userY (e.g. his own page) if (event instanceof NavigationEnd) { @@ -69,18 +70,13 @@ export class ProfileComponent implements OnInit { user.allowedToSendRequest = false; this.requestService.sendFriendRequest(user); } - onFileInput(event) { - console.log(event.target.files[0]); - const formData: any = new FormData(); - formData.append('profilePicture', event.target.files[0]); - this.http.post(environment.greenvironmentUrl + '/upload', formData).subscribe( - (response: any) => { + onFileInput(event) { + this.selfService.changeProfilePicture(event.target.files[0]).subscribe((response) => { this.userProfile.profilePicture = environment.greenvironmentUrl + response.fileName; - }, - (error) => { + }, (error) => { this._snackBar.open('failed to upload picture', 'okay', { - duration: 3000 + duration: 3000 }); }); } diff --git a/src/app/models/interfaces/IFileUploadResult.ts b/src/app/models/interfaces/IFileUploadResult.ts new file mode 100644 index 0000000..fe564c6 --- /dev/null +++ b/src/app/models/interfaces/IFileUploadResult.ts @@ -0,0 +1,5 @@ +export interface IFileUploadResult { + success: boolean; + fileName?: string; + error?: string; +} diff --git a/src/app/services/selfservice/self.service.ts b/src/app/services/selfservice/self.service.ts index 133f8ad..d2c4a22 100644 --- a/src/app/services/selfservice/self.service.ts +++ b/src/app/services/selfservice/self.service.ts @@ -8,6 +8,7 @@ import {FriendInfo} from 'src/app/models/friendinfo'; import {HttpClient} from '@angular/common/http'; import {tap} from 'rxjs/operators'; import {BaseService} from '../base.service'; +import {IFileUploadResult} from '../../models/interfaces/IFileUploadResult'; const getSelfGraphqlQuery = `{ getSelf{ @@ -65,17 +66,18 @@ export class SelfService extends BaseService { return this.http.post(url, SelfService.buildGetSelfBody(), {headers: this.headers}) .pipe(tap(response => { - this.stillLoggedIn(); this.updateUserInfo(response); - }, error => { - this.notLoggedIn(); })); } - public stillLoggedIn() { - } - - public notLoggedIn() { + /** + * Uploads a file as a profile picture + * @param file + */ + public changeProfilePicture(file: any) { + const formData: any = new FormData(); + formData.append('profilePicture', file); + return this.http.post(environment.greenvironmentUrl + '/upload', formData); } /** @@ -87,26 +89,4 @@ export class SelfService extends BaseService { user.assignFromResponse(response.data.getSelf); this.data.changeUserInfo(user); } - - public fakeLogin() { - const user: User = new User(); - let friendRequest: FriendRequest = new FriendRequest(); - user.loggedIn = true; - user.userID = 1; - user.username = 'Rapier'; - user.handle = 'rapier123'; - user.email = 'r@r.com'; - user.points = 100; - user.level = 3; - user.friends.push(new FriendInfo(1, 'Freund77', 4, 'lalala')); - - friendRequest = new FriendRequest(); - friendRequest.id = 10; - friendRequest.senderUserID = 99; - friendRequest.senderUsername = 'Löwe'; - friendRequest.senderHandle = 'loewe123'; - user.receivedRequests.push(friendRequest); - - this.data.changeUserInfo(user); - } } From d99310c9b64499600fa64b37327a3097b3a5159a Mon Sep 17 00:00:00 2001 From: trivernis Date: Sat, 18 Jan 2020 22:11:02 +0100 Subject: [PATCH 5/6] Add File upload dialog --- src/app/app.module.ts | 13 ++- .../fileUpload/fileUpload.component.sass | 23 ++++++ .../fileUpload/fileUpload.component.ts | 79 +++++++++++++++++++ .../fileUploadDialog.component.html | 16 ++++ .../components/profile/profile.component.html | 44 ++++------- .../components/profile/profile.component.sass | 10 +-- .../components/profile/profile.component.ts | 24 +++--- 7 files changed, 162 insertions(+), 47 deletions(-) create mode 100644 src/app/components/profile/fileUpload/fileUpload.component.sass create mode 100644 src/app/components/profile/fileUpload/fileUpload.component.ts create mode 100644 src/app/components/profile/fileUpload/fileUploadDialog.component.html diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e696687..33487a8 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -65,8 +65,9 @@ import {MatDialogModule} from '@angular/material/dialog'; import {MatTooltipModule} from '@angular/material/tooltip'; import {MatExpansionModule} from '@angular/material/expansion'; import {MatDatepickerModule} from '@angular/material/datepicker'; -import {MatNativeDateModule} from '@angular/material/'; +import {MatNativeDateModule, MatProgressBarModule} from '@angular/material/'; import {MatSnackBarModule} from '@angular/material/snack-bar'; +import {DialogFileUploadComponent} from './components/profile/fileUpload/fileUpload.component'; const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} }; @@ -107,6 +108,7 @@ const appRoutes: Routes = [ GroupComponent, DialogCreateEventComponent, UserlistComponent, + DialogFileUploadComponent, ], imports: [ BrowserModule, @@ -124,7 +126,7 @@ const appRoutes: Routes = [ MatIconModule, BrowserAnimationsModule, MatSliderModule, - MatFormFieldModule , + MatFormFieldModule, MatInputModule, ReactiveFormsModule, MatToolbarModule, @@ -151,8 +153,13 @@ const appRoutes: Routes = [ MatExpansionModule, MatDatepickerModule, MatSnackBarModule, + MatProgressBarModule, + ], + entryComponents: [ + DialogCreateGroupComponent, + DialogCreateEventComponent, + DialogFileUploadComponent ], - entryComponents: [ DialogCreateGroupComponent, DialogCreateEventComponent ], providers: [], bootstrap: [AppComponent] }) diff --git a/src/app/components/profile/fileUpload/fileUpload.component.sass b/src/app/components/profile/fileUpload/fileUpload.component.sass new file mode 100644 index 0000000..a515920 --- /dev/null +++ b/src/app/components/profile/fileUpload/fileUpload.component.sass @@ -0,0 +1,23 @@ +@import '../../../../styles/greenvironment-material-theme' + +.dialogFormField + width: 100% + +.confirmationButton + background-color: $primary-color + +.uploadDialogContent + overflow: hidden + text-align: center + +#inputPreview + max-width: 75% + max-height: 100% + width: auto + clip-path: circle() + mask-mode: luminance + +#inputPreviewWrapper + margin: auto + text-align: center + max-height: 512px diff --git a/src/app/components/profile/fileUpload/fileUpload.component.ts b/src/app/components/profile/fileUpload/fileUpload.component.ts new file mode 100644 index 0000000..fe24bb1 --- /dev/null +++ b/src/app/components/profile/fileUpload/fileUpload.component.ts @@ -0,0 +1,79 @@ +import {Component, EventEmitter} from '@angular/core'; +import {MatDialogRef} from '@angular/material/dialog'; +import {SelfService} from '../../../services/selfservice/self.service'; +import {environment} from '../../../../environments/environment'; +import {BehaviorSubject} from 'rxjs'; + +@Component({ + selector: 'file-upload-dialog', + templateUrl: 'fileUploadDialog.component.html', + styleUrls: ['./fileUpload.component.sass'], +}) +export class DialogFileUploadComponent { + public errorOccurred = false; + public uploading = false; + private errorMessage: string; + public profilePictureUrl: BehaviorSubject; + private file; + public localFileUrl; + + constructor(public dialogRef: MatDialogRef, private selfService: SelfService) { + this.profilePictureUrl = new BehaviorSubject(null); + } + + /** + * Getter for the error message + */ + getErrorMessage() { + return this.errorMessage; + } + + /** + * Fired when the cancel button of the dialog is pressed + */ + onCancelClicked() { + this.dialogRef.close(); + } + + /** + * Fired when the ok button was pressed + */ + onOkClicked() { + this.errorOccurred = false; + this.uploading = true; + this.selfService.changeProfilePicture(this.file).subscribe((response) => { + this.uploading = false; + if (response.success) { + this.profilePictureUrl.next(environment.greenvironmentUrl + response.fileName); + this.dialogRef.close(); + } else { + this.errorMessage = response.error; + this.errorOccurred = true; + } + }, (error) => { + this.uploading = false; + this.errorOccurred = true; + console.log(error); + if (error.error) { + this.errorMessage = error.error.error; + } else { + this.errorMessage = 'Failed to upload the profile picture.'; + } + }); + } + + /** + * Fired when the input of the file select changes. + * @param event + */ + onFileInputChange(event) { + this.errorOccurred = false; + this.errorMessage = ''; + this.file = event.target.files[0]; + const reader = new FileReader(); + reader.onload = (e: any) => { + this.localFileUrl = e.target.result; + }; + reader.readAsDataURL(this.file); + } +} diff --git a/src/app/components/profile/fileUpload/fileUploadDialog.component.html b/src/app/components/profile/fileUpload/fileUploadDialog.component.html new file mode 100644 index 0000000..7edfd5c --- /dev/null +++ b/src/app/components/profile/fileUpload/fileUploadDialog.component.html @@ -0,0 +1,16 @@ +
+

Upload a new Profile picture!

+
+ +
+

Preview:

+ +
+ +
+ {{getErrorMessage()}} +
+ + +
+
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index cc5263c..75bbfb7 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -3,27 +3,26 @@ -
- +
+ camera_alt -
- + {{userProfile.username}} - - -
+ +
@{{userProfile.handle}} -
+
@@ -45,19 +44,18 @@ -
- +
+ camera_alt -
{{userProfile.username}} @{{userProfile.handle}} - @@ -72,20 +70,9 @@
- +
- -
@@ -94,4 +81,3 @@
- \ No newline at end of file diff --git a/src/app/components/profile/profile.component.sass b/src/app/components/profile/profile.component.sass index c6f8e7e..91a0d65 100644 --- a/src/app/components/profile/profile.component.sass +++ b/src/app/components/profile/profile.component.sass @@ -8,7 +8,7 @@ overflow: scroll overflow-x: hidden -#profile +#profile padding: 2em max-width: 1200px margin: 0 auto @@ -32,14 +32,14 @@ font-size: 14px margin-left: calc(100px + 0.5em) .info - margin-right: 1em + margin-right: 1em font-size: 14px #username margin: 0 0.5em #handle font-size: 14px -#icon +#icon display: none position: absolute z-index: 11 @@ -71,9 +71,7 @@ $mat-card-header-size: 100px !default z-index: 10 object-fit: cover - - #postlist margin: 0.5em auto padding: 0 - max-width: 690px \ No newline at end of file + max-width: 690px diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts index e73df0b..17a7a62 100644 --- a/src/app/components/profile/profile.component.ts +++ b/src/app/components/profile/profile.component.ts @@ -9,13 +9,14 @@ import { HttpClient } from '@angular/common/http'; import { environment } from 'src/environments/environment'; import {MatSnackBar} from '@angular/material/snack-bar'; import {SelfService} from '../../services/selfservice/self.service'; +import {MatDialog} from '@angular/material'; +import {DialogFileUploadComponent} from './fileUpload/fileUpload.component'; @Component({ selector: 'app-profile', templateUrl: './profile.component.html', styleUrls: ['./profile.component.sass'] }) - export class ProfileComponent implements OnInit { levellist: Levellist = new Levellist(); ownProfile = false; @@ -34,7 +35,8 @@ export class ProfileComponent implements OnInit { private requestService: RequestService, private data: DatasharingService, private profileService: ProfileService, - private selfService: SelfService) { + private selfService: SelfService, + public dialog: MatDialog) { router.events.forEach((event) => { // check if the user is on the profile page (of userY) and routes to the page of userY (e.g. his own page) if (event instanceof NavigationEnd) { @@ -71,13 +73,17 @@ export class ProfileComponent implements OnInit { this.requestService.sendFriendRequest(user); } - onFileInput(event) { - this.selfService.changeProfilePicture(event.target.files[0]).subscribe((response) => { - this.userProfile.profilePicture = environment.greenvironmentUrl + response.fileName; - }, (error) => { - this._snackBar.open('failed to upload picture', 'okay', { - duration: 3000 - }); + /** + * Opens the file upload dialog + */ + openFileUploadDialog() { + const dialogRef = this.dialog.open(DialogFileUploadComponent, { + width: '400px' + }); + dialogRef.componentInstance.profilePictureUrl.subscribe((profilePictureUrl) => { + if (profilePictureUrl) { + this.userProfile.profilePicture = profilePictureUrl; + } }); } } From 5a19cc0dc4dafc7ac3de0e1ba85c61a1ef223aad Mon Sep 17 00:00:00 2001 From: trivernis Date: Sat, 18 Jan 2020 22:14:56 +0100 Subject: [PATCH 6/6] Cleanup code --- src/app/app.component.spec.ts | 4 +- src/app/app.component.ts | 10 +- src/app/app.module.ts | 101 ++++---- src/app/components/about/about.component.html | 136 +++++------ src/app/components/about/about.component.sass | 3 +- .../components/about/about.component.spec.ts | 8 +- src/app/components/about/about.component.ts | 12 +- .../components/chat/chat.component.spec.ts | 8 +- src/app/components/chat/chat.component.ts | 24 +- .../chatlist/chatlist.component.html | 6 +- .../chatlist/chatlist.component.spec.ts | 8 +- .../components/chatlist/chatlist.component.ts | 10 +- .../chatcontacts/chatcontacts.component.html | 25 +- .../chatcontacts.component.spec.ts | 8 +- .../chatcontacts/chatcontacts.component.ts | 9 +- .../chatmanager/chatmanager.component.sass | 6 +- .../chatmanager/chatmanager.component.spec.ts | 8 +- .../chatmanager/chatmanager.component.ts | 15 +- .../document-list.component.html | 3 +- .../document-list.component.scss | 46 ++-- .../document-list.component.spec.ts | 8 +- .../document-list/document-list.component.ts | 9 +- .../document/document.component.scss | 20 +- .../document/document.component.spec.ts | 8 +- .../components/document/document.component.ts | 16 +- src/app/components/feed/feed.component.html | 47 ++-- src/app/components/feed/feed.component.sass | 49 ++-- .../components/feed/feed.component.spec.ts | 8 +- .../feed/postlist/postlist.component.html | 8 +- .../feed/postlist/postlist.component.sass | 77 +++--- .../feed/postlist/postlist.component.spec.ts | 8 +- .../feed/postlist/postlist.component.ts | 11 +- src/app/components/group/group.component.html | 225 +++++++++--------- src/app/components/group/group.component.sass | 17 ++ .../components/group/group.component.spec.ts | 8 +- src/app/components/group/group.component.ts | 45 ++-- src/app/components/home/home.component.html | 70 +++--- .../components/home/home.component.spec.ts | 8 +- src/app/components/home/home.component.ts | 9 +- .../components/imprint/imprint.component.sass | 4 +- .../imprint/imprint.component.spec.ts | 8 +- .../components/imprint/imprint.component.ts | 5 +- src/app/components/login/login.component.html | 45 ++-- src/app/components/login/login.component.sass | 12 +- .../components/login/login.component.spec.ts | 8 +- src/app/components/login/login.component.ts | 12 +- .../main-navigation.component.html | 77 +++--- .../main-navigation.component.sass | 11 +- .../main-navigation.component.spec.ts | 18 +- .../main-navigation.component.ts | 85 ++++--- .../fileUpload/fileUpload.component.ts | 6 +- .../components/profile/profile.component.html | 144 +++++------ .../components/profile/profile.component.sass | 30 ++- .../profile/profile.component.spec.ts | 8 +- .../components/profile/profile.component.ts | 55 ++--- .../register/register.component.html | 33 +-- .../register/register.component.sass | 14 +- .../register/register.component.spec.ts | 8 +- .../components/register/register.component.ts | 10 +- .../components/search/search.component.html | 27 ++- .../components/search/search.component.sass | 6 + .../search/search.component.spec.ts | 8 +- src/app/components/search/search.component.ts | 20 +- .../social/friends/friends.component.html | 24 +- .../social/friends/friends.component.sass | 22 +- .../social/friends/friends.component.spec.ts | 8 +- .../social/friends/friends.component.ts | 17 +- .../social/groups/groups.component.html | 19 +- .../social/groups/groups.component.sass | 3 +- .../social/groups/groups.component.spec.ts | 8 +- .../social/groups/groups.component.ts | 2 - .../components/social/social.component.html | 38 +-- .../social/social.component.spec.ts | 8 +- src/app/components/social/social.component.ts | 5 +- .../userlist/userlist.component.html | 27 ++- .../userlist/userlist.component.sass | 20 +- .../userlist/userlist.component.spec.ts | 8 +- .../components/userlist/userlist.component.ts | 11 +- src/app/graphql.module.ts | 8 +- src/app/models/activity.ts | 3 +- src/app/models/author.ts | 20 +- src/app/models/chat.ts | 22 +- src/app/models/chatinfo.ts | 12 +- src/app/models/chatmessage.ts | 16 +- src/app/models/document.ts | 4 +- src/app/models/event.ts | 20 +- src/app/models/friendRequest.ts | 22 +- src/app/models/friendinfo.ts | 24 +- src/app/models/group.ts | 10 +- src/app/models/groupinfo.ts | 14 +- src/app/models/interfaces/IGraphqlError.ts | 2 +- src/app/models/interfaces/IUser.ts | 1 - src/app/models/levellist.ts | 18 +- src/app/models/login.ts | 8 +- src/app/models/post.ts | 72 +++--- src/app/models/registration.ts | 8 +- src/app/models/user.ts | 10 +- .../activity/activity.service.spec.ts | 4 +- src/app/services/activity/activity.service.ts | 21 +- src/app/services/chat/chat.service.spec.ts | 4 +- src/app/services/chat/chat.service.ts | 105 ++++---- src/app/services/datasharing.service.spec.ts | 4 +- src/app/services/datasharing.service.ts | 9 +- src/app/services/document.service.spec.ts | 4 +- src/app/services/document.service.ts | 11 +- src/app/services/feed/feed.service.spec.ts | 4 +- src/app/services/feed/feed.service.ts | 176 ++++++++------ src/app/services/group/group.service.spec.ts | 4 +- src/app/services/group/group.service.ts | 48 ++-- src/app/services/login/login.service.spec.ts | 4 +- .../services/profile/profile.service.spec.ts | 4 +- src/app/services/profile/profile.service.ts | 12 +- .../register/register.service.spec.ts | 4 +- src/app/services/register/register.service.ts | 33 +-- .../services/request/request.service.spec.ts | 4 +- src/app/services/request/request.service.ts | 8 +- .../services/search/search.service.spec.ts | 4 +- src/app/services/search/search.service.ts | 35 ++- .../services/selfservice/self.service.spec.ts | 4 +- src/app/services/selfservice/self.service.ts | 3 - .../settings/settings.service.spec.ts | 4 +- src/app/services/settings/settings.service.ts | 10 +- .../services/social/social.service.spec.ts | 4 +- src/app/services/social/social.service.ts | 2 +- src/assets/images/default-profilepic.svg | 127 +++++----- src/assets/images/gv-logo-flat.svg | 109 +++++---- src/assets/images/gv-logo-white.svg | 111 +++++---- src/index.html | 2 +- src/main.ts | 8 +- src/polyfills.ts | 16 +- src/styles/greenvironment-material-theme.scss | 76 +++--- src/test.ts | 7 +- src/tslint.json | 32 +-- src/typings.d.ts | 5 +- 134 files changed, 1723 insertions(+), 1568 deletions(-) diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 89617e1..c38ca0a 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,5 +1,5 @@ -import { TestBed, async } from '@angular/core/testing'; -import { AppComponent } from './app.component'; +import {async, TestBed} from '@angular/core/testing'; +import {AppComponent} from './app.component'; describe('AppComponent', () => { beforeEach(async(() => { diff --git a/src/app/app.component.ts b/src/app/app.component.ts index df671f7..5e15e30 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,7 +1,6 @@ -import { Component, OnInit } from '@angular/core'; -import { User } from './models/user'; -import { DatasharingService } from './services/datasharing.service'; -import { SelfService } from './services/selfservice/self.service'; +import {Component, OnInit} from '@angular/core'; +import {DatasharingService} from './services/datasharing.service'; +import {SelfService} from './services/selfservice/self.service'; @Component({ selector: 'app-root', @@ -10,7 +9,8 @@ import { SelfService } from './services/selfservice/self.service'; }) export class AppComponent implements OnInit { - constructor(private data: DatasharingService, private selfservice: SelfService) { } + constructor(private data: DatasharingService, private selfservice: SelfService) { + } ngOnInit() { this.data.currentUserInfo.subscribe(user => { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 33487a8..6a32cee 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,43 +1,40 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { RouterModule, Routes } from '@angular/router'; -import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io'; -import { HttpModule } from '@angular/http'; +import {BrowserModule, DomSanitizer} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {RouterModule, Routes} from '@angular/router'; +import {SocketIoConfig, SocketIoModule} from 'ngx-socket-io'; +import {HttpModule} from '@angular/http'; -import { AppComponent } from './app.component'; -import { DocumentListComponent } from './components/document-list/document-list.component'; -import { DocumentComponent } from './components/document/document.component'; -import { RegisterComponent } from './components/register/register.component'; -import { LoginComponent } from './components/login/login.component'; -import { ChatComponent } from './components/chat/chat.component'; -import { FriendsComponent } from './components/social/friends/friends.component'; -import { FeedComponent } from './components/feed/feed.component'; -import { HomeComponent } from './components/home/home.component'; -import { SocialComponent } from './components/social/social.component'; -import { GroupsComponent } from './components/social/groups/groups.component'; -import { DialogCreateGroupComponent } from './components/social/groups/groups.component'; -import { DialogCreateEventComponent } from './components/group/group.component'; -import { ChatmanagerComponent } from './components/chatmanager/chatmanager.component'; -import { ChatlistComponent } from './components/chatlist/chatlist.component'; -import { PostlistComponent } from './components/feed/postlist/postlist.component'; -import { GraphQLModule } from './graphql.module'; -import { HttpClientModule } from '@angular/common/http'; -import { ProfileComponent } from './components/profile/profile.component'; -import { GroupComponent } from './components/group/group.component'; -import { ImprintComponent } from './components/imprint/imprint.component'; -import { AboutComponent } from './components/about/about.component'; -import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/chatcontacts.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import {AppComponent} from './app.component'; +import {DocumentListComponent} from './components/document-list/document-list.component'; +import {DocumentComponent} from './components/document/document.component'; +import {RegisterComponent} from './components/register/register.component'; +import {LoginComponent} from './components/login/login.component'; +import {ChatComponent} from './components/chat/chat.component'; +import {FriendsComponent} from './components/social/friends/friends.component'; +import {FeedComponent} from './components/feed/feed.component'; +import {HomeComponent} from './components/home/home.component'; +import {SocialComponent} from './components/social/social.component'; +import {DialogCreateGroupComponent, GroupsComponent} from './components/social/groups/groups.component'; +import {DialogCreateEventComponent, GroupComponent} from './components/group/group.component'; +import {ChatmanagerComponent} from './components/chatmanager/chatmanager.component'; +import {ChatlistComponent} from './components/chatlist/chatlist.component'; +import {PostlistComponent} from './components/feed/postlist/postlist.component'; +import {GraphQLModule} from './graphql.module'; +import {HttpClientModule} from '@angular/common/http'; +import {ProfileComponent} from './components/profile/profile.component'; +import {ImprintComponent} from './components/imprint/imprint.component'; +import {AboutComponent} from './components/about/about.component'; +import {ChatcontactsComponent} from './components/chatmanager/chatcontacts/chatcontacts.component'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatTableModule} from '@angular/material/table'; -import { InfiniteScrollModule } from 'ngx-infinite-scroll'; +import {InfiniteScrollModule} from 'ngx-infinite-scroll'; import {UserlistComponent} from './components/userlist/userlist.component'; -import { MatSliderModule } from '@angular/material/slider'; -import { MatFormFieldModule } from '@angular/material/form-field'; +import {MatSliderModule} from '@angular/material/slider'; +import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; -import { ReactiveFormsModule} from '@angular/forms'; -import {MatIconModule} from '@angular/material/icon'; +import {MatIconModule, MatIconRegistry} from '@angular/material/icon'; import {MatToolbarModule} from '@angular/material/toolbar'; import {MatSidenavModule} from '@angular/material/sidenav'; import {MatTabsModule} from '@angular/material/tabs'; @@ -45,22 +42,20 @@ import {MatCardModule} from '@angular/material/card'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatSelectModule} from '@angular/material/select'; import {MatCheckboxModule} from '@angular/material/checkbox'; -import { OverlayModule} from '@angular/cdk/overlay'; +import {OverlayModule} from '@angular/cdk/overlay'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {MatMenuModule} from '@angular/material/menu'; import {MatRippleModule} from '@angular/material/core'; import {MatBadgeModule} from '@angular/material/badge'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; -import { FlexLayoutModule } from '@angular/flex-layout'; -import { MainNavigationComponent } from './components/main-navigation/main-navigation.component'; -import { LayoutModule } from '@angular/cdk/layout'; -import { MatButtonModule } from '@angular/material/button'; -import { MatListModule } from '@angular/material/list'; +import {FlexLayoutModule} from '@angular/flex-layout'; +import {MainNavigationComponent} from './components/main-navigation/main-navigation.component'; +import {LayoutModule} from '@angular/cdk/layout'; +import {MatButtonModule} from '@angular/material/button'; +import {MatListModule} from '@angular/material/list'; import {MatSortModule} from '@angular/material/sort'; -import { SearchComponent } from './components/search/search.component'; -import {DomSanitizer} from '@angular/platform-browser'; -import {MatIconRegistry} from '@angular/material/icon'; +import {SearchComponent} from './components/search/search.component'; import {MatDialogModule} from '@angular/material/dialog'; import {MatTooltipModule} from '@angular/material/tooltip'; import {MatExpansionModule} from '@angular/material/expansion'; @@ -70,16 +65,16 @@ import {MatSnackBarModule} from '@angular/material/snack-bar'; import {DialogFileUploadComponent} from './components/profile/fileUpload/fileUpload.component'; -const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} }; +const config: SocketIoConfig = {url: 'http://localhost:4444', options: {}}; const appRoutes: Routes = [ - { path: '', component: HomeComponent }, - { path: 'profile/:id', component: ProfileComponent }, - { path: 'group/:id', component: GroupComponent }, - { path: 'login', component: LoginComponent }, - { path: 'register', component: RegisterComponent }, - { path: 'about', component: AboutComponent }, - { path: 'imprint', component: ImprintComponent }, + {path: '', component: HomeComponent}, + {path: 'profile/:id', component: ProfileComponent}, + {path: 'group/:id', component: GroupComponent}, + {path: 'login', component: LoginComponent}, + {path: 'register', component: RegisterComponent}, + {path: 'about', component: AboutComponent}, + {path: 'imprint', component: ImprintComponent}, ]; @NgModule({ @@ -170,4 +165,4 @@ export class AppModule { iconRegistry.addSvgIcon( 'logo_green', sanitizer.bypassSecurityTrustResourceUrl('assets/images/gv-logo-flat.svg')); } - } +} diff --git a/src/app/components/about/about.component.html b/src/app/components/about/about.component.html index 13f59fa..5bf352e 100644 --- a/src/app/components/about/about.component.html +++ b/src/app/components/about/about.component.html @@ -1,72 +1,74 @@
-
- -

Greenvironment

-




-

Keep it clean and green!

- -
-
-

What's Greenvironment?

-

We, the greenviroment team want to create a network for environmentalists who care for our nature and our planet as much as we do.

-
-

What does the level mean?

-

There are different levels you can reach through green behaviour. - Collect 100 points to level up! The levels are called: -

- - - - - - - - - - - -
level {{level.level}} level name {{level.name}}
-
-

How to level up?

-

There is an always growing list of things you can do, - to support your environment - and earn points to level up at the same time. - You can get a different amount of points - for differnet actions you can see in the list below: -

- - - - - - - - +
- - -
- - +

Greenvironment

+




+

Keep it clean and green!

+ + +
+

What's Greenvironment?

+

We, the greenviroment team want to create a network for environmentalists who care for our nature and our planet + as much as we do.

+
+

What does the level mean?

+

There are different levels you can reach through green behaviour. + Collect 100 points to level up! The levels are called: +

+
points {{action.points}} action {{action.name}}
+ + + + + + + + + + +
level {{level.level}} level name {{level.name}}
+
+

How to level up?

+

There is an always growing list of things you can do, + to support your environment + and earn points to level up at the same time. + You can get a different amount of points + for differnet actions you can see in the list below: +

+ + - - - - - + + + + + - - -
description {{action.description}} points {{action.points}}
-
-
-

We believe, that together we can do amazing things to protect our environment and keep it clean and green.

-

You aren't part of greenvironment yet? - join us now!

- Register -
- Login + + + action + {{action.name}} + + + + + description + {{action.description}} + + + + + +
+
+

We believe, that together we can do amazing things to protect our environment and keep it + clean and green.

+

You aren't part of greenvironment yet? - join us now!

+ Register +
+ Login +
-
\ No newline at end of file diff --git a/src/app/components/about/about.component.sass b/src/app/components/about/about.component.sass index d8cea49..699ab55 100644 --- a/src/app/components/about/about.component.sass +++ b/src/app/components/about/about.component.sass @@ -16,7 +16,7 @@ padding: 2em min-height: 50% max-width: 100% - + .big-icon //color: white transform: scale(2) @@ -31,5 +31,6 @@ max-width: 690px margin: 0 auto text-align: left + .mat-header-cell padding-right: 0.5em diff --git a/src/app/components/about/about.component.spec.ts b/src/app/components/about/about.component.spec.ts index 6b77344..3035231 100644 --- a/src/app/components/about/about.component.spec.ts +++ b/src/app/components/about/about.component.spec.ts @@ -1,6 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { AboutComponent } from './about.component'; +import {AboutComponent} from './about.component'; describe('AboutComponent', () => { let component: AboutComponent; @@ -8,9 +8,9 @@ describe('AboutComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ AboutComponent ] + declarations: [AboutComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/components/about/about.component.ts b/src/app/components/about/about.component.ts index c891813..3983dc3 100644 --- a/src/app/components/about/about.component.ts +++ b/src/app/components/about/about.component.ts @@ -1,9 +1,9 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; -import { Activitylist } from 'src/app/models/activity'; -import { Levellist } from 'src/app/models/levellist'; +import {Component, OnInit, ViewChild} from '@angular/core'; +import {Activitylist} from 'src/app/models/activity'; +import {Levellist} from 'src/app/models/levellist'; import {MatSort} from '@angular/material/sort'; import {MatTableDataSource} from '@angular/material/table'; -import { ActivityService } from 'src/app/services/activity/activity.service'; +import {ActivityService} from 'src/app/services/activity/activity.service'; @Component({ selector: 'app-about', @@ -19,9 +19,11 @@ export class AboutComponent implements OnInit { displayedLevelColumns = ['level', 'name']; levelSource = this.levellist.levels; - constructor(private activityService: ActivityService) { } + constructor(private activityService: ActivityService) { + } @ViewChild(MatSort, {static: true}) sort: MatSort; + ngOnInit() { this.activityService.getActivities(); this.activityService.activitylist.subscribe(response => { diff --git a/src/app/components/chat/chat.component.spec.ts b/src/app/components/chat/chat.component.spec.ts index 1f642f2..bfbbddf 100644 --- a/src/app/components/chat/chat.component.spec.ts +++ b/src/app/components/chat/chat.component.spec.ts @@ -1,6 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { ChatComponent } from './chat.component'; +import {ChatComponent} from './chat.component'; describe('ChatComponent', () => { let component: ChatComponent; @@ -8,9 +8,9 @@ describe('ChatComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ChatComponent ] + declarations: [ChatComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/components/chat/chat.component.ts b/src/app/components/chat/chat.component.ts index 7727629..e39259d 100644 --- a/src/app/components/chat/chat.component.ts +++ b/src/app/components/chat/chat.component.ts @@ -1,8 +1,7 @@ -import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core'; -import { Chatmessage } from 'src/app/models/chatmessage'; -import { Chatinfo } from 'src/app/models/chatinfo'; -import { ChatService } from 'src/app/services/chat/chat.service'; -import { Chat } from 'src/app/models/chat'; +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {Chatmessage} from 'src/app/models/chatmessage'; +import {ChatService} from 'src/app/services/chat/chat.service'; +import {Chat} from 'src/app/models/chat'; @Component({ selector: 'chatmanager-chat', @@ -16,7 +15,8 @@ export class ChatComponent implements OnInit { @Output() goBackEvent = new EventEmitter(); @Input() childChat: Chat; - constructor(private chatService: ChatService) { } + constructor(private chatService: ChatService) { + } ngOnInit() { this.refresh(); @@ -28,16 +28,16 @@ export class ChatComponent implements OnInit { sendMessage(pElement) { this.chatService.sendMessage(this.childChat.id, pElement.value) - .subscribe(response => { - console.log('Message sent'); - pElement.value = ''; - this.refresh(); - }); + .subscribe(response => { + console.log('Message sent'); + pElement.value = ''; + this.refresh(); + }); } refresh() { this.chatService.getMessagesRaw(this.childChat.id) - .subscribe(response => { + .subscribe(response => { console.log('Downloading messages ...'); this.messages = this.chatService.renderMessages(response.json()); }); diff --git a/src/app/components/chatlist/chatlist.component.html b/src/app/components/chatlist/chatlist.component.html index 793c220..eab8653 100644 --- a/src/app/components/chatlist/chatlist.component.html +++ b/src/app/components/chatlist/chatlist.component.html @@ -5,11 +5,11 @@
--> Chat
-
+
Pic
{{chat.memberName}}
-
Date of last message
+
Date of last message
diff --git a/src/app/components/chatlist/chatlist.component.spec.ts b/src/app/components/chatlist/chatlist.component.spec.ts index 19e8849..ff3de58 100644 --- a/src/app/components/chatlist/chatlist.component.spec.ts +++ b/src/app/components/chatlist/chatlist.component.spec.ts @@ -1,6 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { ChatlistComponent } from './chatlist.component'; +import {ChatlistComponent} from './chatlist.component'; describe('ChatlistComponent', () => { let component: ChatlistComponent; @@ -8,9 +8,9 @@ describe('ChatlistComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ChatlistComponent ] + declarations: [ChatlistComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/components/chatlist/chatlist.component.ts b/src/app/components/chatlist/chatlist.component.ts index f648e12..138346f 100644 --- a/src/app/components/chatlist/chatlist.component.ts +++ b/src/app/components/chatlist/chatlist.component.ts @@ -1,7 +1,6 @@ -import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core'; -import { Chatinfo } from 'src/app/models/chatinfo'; -import { Chat } from 'src/app/models/chat'; -import { ChatService } from 'src/app/services/chat/chat.service'; +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {Chat} from 'src/app/models/chat'; +import {ChatService} from 'src/app/services/chat/chat.service'; @Component({ selector: 'chatmanager-chatlist', @@ -15,7 +14,8 @@ export class ChatlistComponent implements OnInit { @Output() showCreateChatEvent = new EventEmitter(); selectedChat: Chat; - constructor(private chatService: ChatService) { } + constructor(private chatService: ChatService) { + } ngOnInit() { diff --git a/src/app/components/chatmanager/chatcontacts/chatcontacts.component.html b/src/app/components/chatmanager/chatcontacts/chatcontacts.component.html index a55f166..2fb7dc5 100644 --- a/src/app/components/chatmanager/chatcontacts/chatcontacts.component.html +++ b/src/app/components/chatmanager/chatcontacts/chatcontacts.component.html @@ -1,15 +1,16 @@
- -
-
-
-
-
Pic
-
{{contact.name}}
-
+ +
+
+
+
+
Pic
+
{{contact.name}}
+
diff --git a/src/app/components/chatmanager/chatcontacts/chatcontacts.component.spec.ts b/src/app/components/chatmanager/chatcontacts/chatcontacts.component.spec.ts index f94d884..a7a9415 100644 --- a/src/app/components/chatmanager/chatcontacts/chatcontacts.component.spec.ts +++ b/src/app/components/chatmanager/chatcontacts/chatcontacts.component.spec.ts @@ -1,6 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { ChatcontactsComponent } from './chatcontacts.component'; +import {ChatcontactsComponent} from './chatcontacts.component'; describe('ChatcontactsComponent', () => { let component: ChatcontactsComponent; @@ -8,9 +8,9 @@ describe('ChatcontactsComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ChatcontactsComponent ] + declarations: [ChatcontactsComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/components/chatmanager/chatcontacts/chatcontacts.component.ts b/src/app/components/chatmanager/chatcontacts/chatcontacts.component.ts index 2ccfa3b..006a5b6 100644 --- a/src/app/components/chatmanager/chatcontacts/chatcontacts.component.ts +++ b/src/app/components/chatmanager/chatcontacts/chatcontacts.component.ts @@ -1,6 +1,6 @@ -import { Component, OnInit, Output, EventEmitter } from '@angular/core'; -import { FriendInfo } from 'src/app/models/friendinfo'; -import { ChatService } from 'src/app/services/chat/chat.service'; +import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import {FriendInfo} from 'src/app/models/friendinfo'; +import {ChatService} from 'src/app/services/chat/chat.service'; @Component({ selector: 'chatmanager-chatcontacts', @@ -12,7 +12,8 @@ export class ChatcontactsComponent implements OnInit { @Output() goBackEvent = new EventEmitter(); selectedContact: FriendInfo; - constructor(private chatService: ChatService) { } + constructor(private chatService: ChatService) { + } ngOnInit() { } diff --git a/src/app/components/chatmanager/chatmanager.component.sass b/src/app/components/chatmanager/chatmanager.component.sass index f74a631..6694562 100644 --- a/src/app/components/chatmanager/chatmanager.component.sass +++ b/src/app/components/chatmanager/chatmanager.component.sass @@ -1,6 +1,6 @@ @import '../../../styles/mixins.sass' @import '../../../styles/vars.sass' -div - width: 100% - height: 100% \ No newline at end of file +div + width: 100% + height: 100% diff --git a/src/app/components/chatmanager/chatmanager.component.spec.ts b/src/app/components/chatmanager/chatmanager.component.spec.ts index d222640..4518c76 100644 --- a/src/app/components/chatmanager/chatmanager.component.spec.ts +++ b/src/app/components/chatmanager/chatmanager.component.spec.ts @@ -1,6 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { ChatmanagerComponent } from './chatmanager.component'; +import {ChatmanagerComponent} from './chatmanager.component'; describe('ChatmanagerComponent', () => { let component: ChatmanagerComponent; @@ -8,9 +8,9 @@ describe('ChatmanagerComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ChatmanagerComponent ] + declarations: [ChatmanagerComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/components/chatmanager/chatmanager.component.ts b/src/app/components/chatmanager/chatmanager.component.ts index db1550a..45216f2 100644 --- a/src/app/components/chatmanager/chatmanager.component.ts +++ b/src/app/components/chatmanager/chatmanager.component.ts @@ -1,9 +1,7 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; -import { ChatService } from '../../services/chat/chat.service'; -import { ChatComponent } from '../chat/chat.component'; -import { Chatinfo } from 'src/app/models/chatinfo'; -import { DatasharingService } from 'src/app/services/datasharing.service'; -import { Chat } from 'src/app/models/chat'; +import {Component, OnInit} from '@angular/core'; +import {ChatService} from '../../services/chat/chat.service'; +import {DatasharingService} from 'src/app/services/datasharing.service'; +import {Chat} from 'src/app/models/chat'; @Component({ selector: 'home-chatmanager', @@ -19,7 +17,8 @@ export class ChatmanagerComponent implements OnInit { parentSelectedChat: Chat; parentChats: Array; - constructor(private data: DatasharingService, private chatService: ChatService) { } + constructor(private data: DatasharingService, private chatService: ChatService) { + } ngOnInit() { /*this.data.currentChatIDs.subscribe(chatIDs => { @@ -51,7 +50,7 @@ export class ChatmanagerComponent implements OnInit { refresh() { this.chatService.getAllChatsRaw() - .subscribe(response => { + .subscribe(response => { console.log(response); this.parentChats = this.chatService.renderAllChats(response.json()); }); diff --git a/src/app/components/document-list/document-list.component.html b/src/app/components/document-list/document-list.component.html index 6a57b17..d99fd52 100644 --- a/src/app/components/document-list/document-list.component.html +++ b/src/app/components/document-list/document-list.component.html @@ -1,4 +1,5 @@
New Document - {{ docId }} + {{ docId }}
diff --git a/src/app/components/document-list/document-list.component.scss b/src/app/components/document-list/document-list.component.scss index 506aa38..10001b7 100644 --- a/src/app/components/document-list/document-list.component.scss +++ b/src/app/components/document-list/document-list.component.scss @@ -1,24 +1,28 @@ .sidenav { - position: fixed; - height: 100%; - width: 220px; - top: 0; - left: 0; - background-color: #111111; - overflow-x: hidden; - padding-top: 20px; + position: fixed; + height: 100%; + width: 220px; + top: 0; + left: 0; + background-color: #111111; + overflow-x: hidden; + padding-top: 20px; - span { - padding: 6px 8px 6px 16px; - text-decoration: none; - font-size: 25px; - font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif; - color: #818181; - display: block; - }.selected { - color: #e1e1e1; - }:hover { - color: #f1f1f1; - cursor: pointer; - } + span { + padding: 6px 8px 6px 16px; + text-decoration: none; + font-size: 25px; + font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif; + color: #818181; + display: block; + } + + .selected { + color: #e1e1e1; + } + + :hover { + color: #f1f1f1; + cursor: pointer; + } } diff --git a/src/app/components/document-list/document-list.component.spec.ts b/src/app/components/document-list/document-list.component.spec.ts index f8c7635..2ba5f52 100644 --- a/src/app/components/document-list/document-list.component.spec.ts +++ b/src/app/components/document-list/document-list.component.spec.ts @@ -1,6 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { DocumentListComponent } from './document-list.component'; +import {DocumentListComponent} from './document-list.component'; describe('DocumentListComponent', () => { let component: DocumentListComponent; @@ -8,9 +8,9 @@ describe('DocumentListComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ DocumentListComponent ] + declarations: [DocumentListComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/components/document-list/document-list.component.ts b/src/app/components/document-list/document-list.component.ts index 10faac9..6a68c2f 100644 --- a/src/app/components/document-list/document-list.component.ts +++ b/src/app/components/document-list/document-list.component.ts @@ -1,7 +1,7 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { Observable, Subscription } from 'rxjs'; +import {Component, OnDestroy, OnInit} from '@angular/core'; +import {Observable, Subscription} from 'rxjs'; -import { DocumentService } from 'src/app/services/document.service'; +import {DocumentService} from 'src/app/services/document.service'; @Component({ selector: 'app-document-list', @@ -13,7 +13,8 @@ export class DocumentListComponent implements OnInit, OnDestroy { currentDoc: string; private _docSub: Subscription; - constructor(private documentService: DocumentService) { } + constructor(private documentService: DocumentService) { + } ngOnInit() { this.documents = this.documentService.documents; diff --git a/src/app/components/document/document.component.scss b/src/app/components/document/document.component.scss index 67d5275..f97544b 100644 --- a/src/app/components/document/document.component.scss +++ b/src/app/components/document/document.component.scss @@ -1,12 +1,12 @@ textarea { - position: fixed; - width: calc(100% - 235px); - height: 100%; - right: 0; - top: 0; - font-size: 18pt; - padding-top: 20px; - resize: none; - border: none; - padding: 20px 0px 20px 15px; + position: fixed; + width: calc(100% - 235px); + height: 100%; + right: 0; + top: 0; + font-size: 18pt; + padding-top: 20px; + resize: none; + border: none; + padding: 20px 0px 20px 15px; } diff --git a/src/app/components/document/document.component.spec.ts b/src/app/components/document/document.component.spec.ts index 6780d19..5f113c4 100644 --- a/src/app/components/document/document.component.spec.ts +++ b/src/app/components/document/document.component.spec.ts @@ -1,6 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { DocumentComponent } from './document.component'; +import {DocumentComponent} from './document.component'; describe('DocumentComponent', () => { let component: DocumentComponent; @@ -8,9 +8,9 @@ describe('DocumentComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ DocumentComponent ] + declarations: [DocumentComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/components/document/document.component.ts b/src/app/components/document/document.component.ts index a5c4c04..8bb37ba 100644 --- a/src/app/components/document/document.component.ts +++ b/src/app/components/document/document.component.ts @@ -1,8 +1,8 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { DocumentService } from 'src/app/services/document.service'; -import { Subscription } from 'rxjs'; -import { Document } from 'src/app/models/document'; -import { startWith } from 'rxjs/operators'; +import {Component, OnDestroy, OnInit} from '@angular/core'; +import {DocumentService} from 'src/app/services/document.service'; +import {Subscription} from 'rxjs'; +import {Document} from 'src/app/models/document'; +import {startWith} from 'rxjs/operators'; @Component({ selector: 'app-document', @@ -12,11 +12,13 @@ import { startWith } from 'rxjs/operators'; export class DocumentComponent implements OnInit, OnDestroy { document: Document; private _docSub: Subscription; - constructor(private documentService: DocumentService) { } + + constructor(private documentService: DocumentService) { + } ngOnInit() { this._docSub = this.documentService.currentDocument.pipe( - startWith({ id: '', doc: 'Select an existing document or create a new one to get started'}) + startWith({id: '', doc: 'Select an existing document or create a new one to get started'}) ).subscribe(document => this.document = document); } diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index c8339e5..3f7bb97 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -1,31 +1,35 @@
+ infinite-scroll + [infiniteScrollDistance]="0.5" + [scrollWindow]="false" + (scrolled)="onScroll()">
- + - +

- I protected the environment. + I protected the environment. +

What did you do? nothing ;) - + {{action.name}} ({{action.description}}) {{getErrorMessage()}} - @@ -34,26 +38,27 @@ infinite-scroll
- + You need to login to post something.
-
+
- New - Most Liked - -
-
-
- -
- + New + Most Liked + +
+
+
+ +
+ +
-
diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass index c3d660c..40e1094 100644 --- a/src/app/components/feed/feed.component.sass +++ b/src/app/components/feed/feed.component.sass @@ -3,43 +3,44 @@ .primary-color - color: $primary-color + color: $primary-color -#home - width: 100% - height: 100% - overflow-y: scroll +#home + width: 100% + height: 100% + overflow-y: scroll #complete-feed - box-sizing: border-box - display: flex - width: 100% - padding: 0.5em + box-sizing: border-box + display: flex + width: 100% + padding: 0.5em + #info - ::ng-deep .mat-card-header-text - margin: 0px + ::ng-deep .mat-card-header-text + margin: 0px #feedlist - width: 100% + width: 100% #input - width: 100% - padding-left: 0.5em - padding-right: 0.5em + width: 100% + padding-left: 0.5em + padding-right: 0.5em #action-chooser - width: 100% - padding-left: 0.5em - padding-right: 0.5em + width: 100% + padding-left: 0.5em + padding-right: 0.5em #check - margin: 0 - padding-left: 0.5em + margin: 0 + padding-left: 0.5em #post-button - width: 100% - padding-left: 0.5em - padding-right: 0.5em - margin-top: 0.5em + width: 100% + padding-left: 0.5em + padding-right: 0.5em + margin-top: 0.5em diff --git a/src/app/components/feed/feed.component.spec.ts b/src/app/components/feed/feed.component.spec.ts index 4101160..322f1ef 100644 --- a/src/app/components/feed/feed.component.spec.ts +++ b/src/app/components/feed/feed.component.spec.ts @@ -1,6 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { FeedComponent } from './feed.component'; +import {FeedComponent} from './feed.component'; describe('FeedComponent', () => { let component: FeedComponent; @@ -8,9 +8,9 @@ describe('FeedComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ FeedComponent ] + declarations: [FeedComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/components/feed/postlist/postlist.component.html b/src/app/components/feed/postlist/postlist.component.html index 6b0db0d..fcf28eb 100644 --- a/src/app/components/feed/postlist/postlist.component.html +++ b/src/app/components/feed/postlist/postlist.component.html @@ -19,10 +19,10 @@
--> - +
- +
- + {{post.author.name}} @@ -46,7 +46,7 @@ -

+

+ +
+ + +
+ created by {{groupProfile.creator.username}} + @{{groupProfile.creator.handle}} +
+ + +
+ {{groupProfile.members.length}} member(s) +
+ + + + + +
+ {{groupProfile.name}} + created by {{groupProfile.creator.username}} + @{{groupProfile.creator.handle}} +
+ + +
+ + +
+ {{groupProfile.members.length}} member(s) +
+ + +
+ + + + + Events + + +
+ + + {{event.name}} + {{event.date}}
- - + +
- - -
- created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}} -
- - -
- {{groupProfile.members.length}} member(s) -
- - - - - -
- {{groupProfile.name}} - created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}} -
- - -
- - -
- {{groupProfile.members.length}} member(s) -
- - -
- - - - - Events - - -
- - - {{event.name}} - {{event.date}} -
- - -
- - -
- - - - - Members - - -
- -
- - + +
+ + + + + Members + + +
+ +
+ +
-
-

Group not found :(

-
- +
+
+

Group not found :(

+
+
- \ No newline at end of file diff --git a/src/app/components/group/group.component.sass b/src/app/components/group/group.component.sass index 0de5d38..d153814 100644 --- a/src/app/components/group/group.component.sass +++ b/src/app/components/group/group.component.sass @@ -26,22 +26,30 @@ $mat-card-header-size: 100px !default .button-box text-align: right margin-left: auto + .request-button margin: auto 0 + #toolbar margin-top: 32px + .mat-toolbar-row max-height: 40px + .info-box font-size: 14px margin-left: calc(100px + 0.5em) + .info margin-right: 3em + #username margin: 0 0.5em overflow: auto + #handle font-size: 14px + .profile-picture background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg) height: $mat-card-header-size @@ -49,6 +57,7 @@ $mat-card-header-size: 100px !default border-radius: 50% flex-shrink: 0 background-size: cover + &:hover height: 200 // Makes `` tags behave like `background-size: cover`. Not supported @@ -61,27 +70,35 @@ $mat-card-header-size: 100px !default margin-top: 0.5em outline: none user-select: none + ::ng-deep .mat-card-header-text margin: 0 margin-left: 16px + .mat-card-subtitle margin: 0 word-break: break-all + .mat-card-title margin: 0 word-break: break-all + .request-button margin-top: 0.5em margin-bottom: 0.5em + .profile-picture background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg) background-size: cover + .profile-picture:hover cursor: pointer + .pointer cursor: pointer ::ng-deep .mat-expansion-panel background: #e6e6e6 + ::ng-deep.dark-theme .mat-expansion-panel background: #121212 diff --git a/src/app/components/group/group.component.spec.ts b/src/app/components/group/group.component.spec.ts index 50601d0..8d9ff1d 100644 --- a/src/app/components/group/group.component.spec.ts +++ b/src/app/components/group/group.component.spec.ts @@ -1,6 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { GroupComponent } from './group.component'; +import {GroupComponent} from './group.component'; describe('GroupComponent', () => { let component: GroupComponent; @@ -8,9 +8,9 @@ describe('GroupComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ GroupComponent ] + declarations: [GroupComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/components/group/group.component.ts b/src/app/components/group/group.component.ts index 6e5af39..de4ad53 100644 --- a/src/app/components/group/group.component.ts +++ b/src/app/components/group/group.component.ts @@ -1,12 +1,12 @@ -import { Component, OnInit, ViewChild} from '@angular/core'; -import {Router, NavigationEnd} from '@angular/router'; -import { User } from 'src/app/models/user'; +import {Component, OnInit, ViewChild} from '@angular/core'; +import {NavigationEnd, Router} from '@angular/router'; +import {User} from 'src/app/models/user'; import {MatSort} from '@angular/material/sort'; -import { RequestService } from 'src/app/services/request/request.service'; -import { DatasharingService } from '../../services/datasharing.service'; -import { GroupService } from 'src/app/services/group/group.service'; -import { Group } from 'src/app/models/group'; -import { Event } from 'src/app/models/event'; +import {RequestService} from 'src/app/services/request/request.service'; +import {DatasharingService} from '../../services/datasharing.service'; +import {GroupService} from 'src/app/services/group/group.service'; +import {Group} from 'src/app/models/group'; +import {Event} from 'src/app/models/event'; import {MatDialog, MatDialogRef} from '@angular/material/dialog'; // DIALOG COMPONENT to create events @@ -21,8 +21,8 @@ export class DialogCreateEventComponent { public dialogRef: MatDialogRef, private group: GroupService, private router: Router) { - this.groupId = this.router.url.substr(this.router.url.lastIndexOf('/') + 1); - } + this.groupId = this.router.url.substr(this.router.url.lastIndexOf('/') + 1); + } onNoClick(): void { this.dialogRef.close(); @@ -63,20 +63,21 @@ export class GroupComponent implements OnInit { private requestService: RequestService, private data: DatasharingService, private groupService: GroupService) { - router.events.forEach((event) => { - // check if url changes - if (event instanceof NavigationEnd) { - const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1); - if (this.id !== possibleID && this.id && this.router.url.includes('group/')) { - // reload the group - console.log('search for group id: ' + this.router.url.substr(this.router.url.lastIndexOf('/') + 1)); - this.ngOnInit(); - } + router.events.forEach((event) => { + // check if url changes + if (event instanceof NavigationEnd) { + const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1); + if (this.id !== possibleID && this.id && this.router.url.includes('group/')) { + // reload the group + console.log('search for group id: ' + this.router.url.substr(this.router.url.lastIndexOf('/') + 1)); + this.ngOnInit(); } - }); + } + }); } @ViewChild(MatSort, {static: true}) sort: MatSort; + ngOnInit() { this.loading = true; this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1); @@ -98,7 +99,9 @@ export class GroupComponent implements OnInit { for (const member of this.groupProfile.members) { member.allowedToSendRequest = this.requestService.isAllowedToSendRequest(member.userID, this.self); } - } else { this.groupNotFound = true; } + } else { + this.groupNotFound = true; + } this.loading = false; }); } diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index e274fc6..cee7549 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -1,8 +1,16 @@
-
-
- - +
+ +
+
+ +
+ +
-
- - - - chat - - - - - - home - - - - - - people - - - - - - search - - - - +
+ + + + chat + + + + + + home + + + + + + people + + + + + + search + + + +
diff --git a/src/app/components/home/home.component.spec.ts b/src/app/components/home/home.component.spec.ts index 490e81b..482c23c 100644 --- a/src/app/components/home/home.component.spec.ts +++ b/src/app/components/home/home.component.spec.ts @@ -1,6 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { HomeComponent } from './home.component'; +import {HomeComponent} from './home.component'; describe('HomeComponent', () => { let component: HomeComponent; @@ -8,9 +8,9 @@ describe('HomeComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ HomeComponent ] + declarations: [HomeComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index 22abaab..7df509d 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -1,6 +1,6 @@ -import { Component, OnInit } from '@angular/core'; -import { DatasharingService } from 'src/app/services/datasharing.service'; -import { FeedService } from 'src/app/services/feed/feed.service'; +import {Component, OnInit} from '@angular/core'; +import {DatasharingService} from 'src/app/services/datasharing.service'; +import {FeedService} from 'src/app/services/feed/feed.service'; @Component({ selector: 'app-home', @@ -11,7 +11,8 @@ export class HomeComponent implements OnInit { loggedIn: boolean; - constructor(private data: DatasharingService, private feedService: FeedService) { } + constructor(private data: DatasharingService, private feedService: FeedService) { + } ngOnInit() { this.data.currentUserInfo.subscribe(user => { diff --git a/src/app/components/imprint/imprint.component.sass b/src/app/components/imprint/imprint.component.sass index 6d771cc..571666b 100644 --- a/src/app/components/imprint/imprint.component.sass +++ b/src/app/components/imprint/imprint.component.sass @@ -8,8 +8,8 @@ margin: 0 auto h1.mat-display-1 - margin: 0 + margin: 0 + - diff --git a/src/app/components/imprint/imprint.component.spec.ts b/src/app/components/imprint/imprint.component.spec.ts index 49b68ae..79721d0 100644 --- a/src/app/components/imprint/imprint.component.spec.ts +++ b/src/app/components/imprint/imprint.component.spec.ts @@ -1,6 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { ImprintComponent } from './imprint.component'; +import {ImprintComponent} from './imprint.component'; describe('ImprintComponent', () => { let component: ImprintComponent; @@ -8,9 +8,9 @@ describe('ImprintComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ImprintComponent ] + declarations: [ImprintComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/components/imprint/imprint.component.ts b/src/app/components/imprint/imprint.component.ts index ba755c1..aa45e45 100644 --- a/src/app/components/imprint/imprint.component.ts +++ b/src/app/components/imprint/imprint.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-imprint', @@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core'; }) export class ImprintComponent implements OnInit { - constructor() { } + constructor() { + } ngOnInit() { } diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index 0d2f145..d0de276 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -1,24 +1,25 @@
- - - Login - - -
- {{getErrorMessage()}} - - - - - - - -
- -

You aren't part of greenvironment yet?

- Register - - + + + Login + + +
+ {{getErrorMessage()}} + + + + + + + +
+ +

You aren't part of greenvironment yet?

+ Register + +
diff --git a/src/app/components/login/login.component.sass b/src/app/components/login/login.component.sass index 131accc..d4f5c5c 100644 --- a/src/app/components/login/login.component.sass +++ b/src/app/components/login/login.component.sass @@ -6,21 +6,21 @@ max-width: 35em margin: 0 auto -.example-container +.example-container display: flex flex-direction: column -.example-container > * +.example-container > * width: 100% -.example-right-align +.example-right-align text-align: right input.example-right-align::-webkit-outer-spin-button, -input.example-right-align::-webkit-inner-spin-button +input.example-right-align::-webkit-inner-spin-button display: none -input.example-right-align +input.example-right-align -moz-appearance: textfield .mat-error @@ -35,7 +35,7 @@ input.example-right-align .mat-stroked-button width: 100% - + diff --git a/src/app/components/login/login.component.spec.ts b/src/app/components/login/login.component.spec.ts index d6d85a8..28a5704 100644 --- a/src/app/components/login/login.component.spec.ts +++ b/src/app/components/login/login.component.spec.ts @@ -1,6 +1,6 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import { LoginComponent } from './login.component'; +import {LoginComponent} from './login.component'; describe('LoginComponent', () => { let component: LoginComponent; @@ -8,9 +8,9 @@ describe('LoginComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ LoginComponent ] + declarations: [LoginComponent] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts index 6c26301..bb6313d 100644 --- a/src/app/components/login/login.component.ts +++ b/src/app/components/login/login.component.ts @@ -1,7 +1,7 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {FormControl, Validators} from '@angular/forms'; -import { Login } from 'src/app/models/login'; -import { LoginService } from 'src/app/services/login/login.service'; +import {Login} from 'src/app/models/login'; +import {LoginService} from 'src/app/services/login/login.service'; import {Router} from '@angular/router'; import * as sha512 from 'js-sha512'; import {IErrorResponse} from '../../models/interfaces/IErrorResponse'; @@ -16,6 +16,7 @@ export class LoginComponent implements OnInit { constructor(private loginService: LoginService, private router: Router) { this.login = {passwordHash: null, email: null}; } + login: Login; hide = true; errorOccurred = false; @@ -43,7 +44,7 @@ export class LoginComponent implements OnInit { this.errorMessage = ' '; this.login.email = pEmail.trim().toLowerCase(); this.login.passwordHash = sha512.sha512(pPasswordHash); - this.loginService.login(this.login).subscribe( () => { + this.loginService.login(this.login).subscribe(() => { this.router.navigateByUrl('').catch((error) => { this.errorMessage = error.message; this.errorOccurred = true; @@ -55,6 +56,7 @@ export class LoginComponent implements OnInit { }); } - ngOnInit() {} + ngOnInit() { + } } diff --git a/src/app/components/main-navigation/main-navigation.component.html b/src/app/components/main-navigation/main-navigation.component.html index 80caa1f..acc8103 100644 --- a/src/app/components/main-navigation/main-navigation.component.html +++ b/src/app/components/main-navigation/main-navigation.component.html @@ -1,20 +1,22 @@ - - + + - + Menu -
- -
-
- Hello, {{user.username}} -
+
+ +
+
+ Hello, {{user.username}} +
Home @@ -24,8 +26,10 @@ @@ -46,26 +50,27 @@ Greenvironment -