From 6f83969aedf95618a22fddb22e83feae67eafdc7 Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 24 Jan 2020 10:12:13 +0100 Subject: [PATCH 01/19] Fix upload preview height --- src/app/components/feed/feed.component.sass | 6 ++---- src/app/models/post.ts | 3 ++- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass index 5f16e08..49b8a82 100644 --- a/src/app/components/feed/feed.component.sass +++ b/src/app/components/feed/feed.component.sass @@ -34,16 +34,14 @@ .mat-icon transform: scale(1.5) #inputPreview - max-width: 75% - max-height: 100% + max-width: 100% + max-height: 40vh width: auto border-radius: 4px mask-mode: luminance outline: none user-select: none ::ng-deep video - width: 100% - max-height: 40vh outline: none user-select: none #inputPreviewWrapper diff --git a/src/app/models/post.ts b/src/app/models/post.ts index 3143140..231acb7 100644 --- a/src/app/models/post.ts +++ b/src/app/models/post.ts @@ -1,5 +1,6 @@ import {Author} from './author'; import {Activity} from './activity'; +import { environment } from 'src/environments/environment'; export class Post { id: number; @@ -39,7 +40,7 @@ export class Post { this.author = author; this.activity = activity; if (media) { - this.mediaUrl = media.url; + this.mediaUrl = environment.greenvironmentUrl + media.url; this.mediaType = media.type; } } From e1c1d9de4484b63c3368f00a4f836bd9fd55241b Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 24 Jan 2020 10:33:22 +0100 Subject: [PATCH 02/19] Change input to disabled while posting --- src/app/components/feed/feed.component.html | 12 +++++++----- src/app/components/feed/feed.component.sass | 2 ++ src/app/components/feed/feed.component.ts | 9 ++++++++- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index fca185c..308c0d3 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -14,22 +14,23 @@ -

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

What did you do? - + nothing ;) @@ -38,7 +39,8 @@ {{getErrorMessage()}} - diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass index 49b8a82..e3724a0 100644 --- a/src/app/components/feed/feed.component.sass +++ b/src/app/components/feed/feed.component.sass @@ -49,6 +49,8 @@ text-align: center max-height: 512px margin-bottom: 1em +#progress-bar + margin-top: 1em #action-chooser width: 100% diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts index d226149..f32a8f4 100644 --- a/src/app/components/feed/feed.component.ts +++ b/src/app/components/feed/feed.component.ts @@ -22,6 +22,7 @@ export class FeedComponent implements OnInit { private file; fileType; public localFileUrl; + posting = false; checked = false; // if the "I protected the environment."-box is checked view = 'new'; @@ -70,7 +71,9 @@ export class FeedComponent implements OnInit { */ createPost(postElement, activityId: string) { if (postElement && activityId && this.checked) { + this.posting = true; this.feedService.createPostActivity(postElement.value, activityId, this.file).subscribe(() => { + this.posting = false; postElement.value = ''; this.textInputValue = ''; this.checked = false; @@ -81,11 +84,14 @@ export class FeedComponent implements OnInit { this.showNew(); } }, (error: IErrorResponse) => { + this.posting = false; this.errorOccurred = true; this.errorMessage = error.error.errors[0].message; }); } else if (postElement) { + this.posting = true; this.feedService.createPost(postElement.value, this.file).subscribe(() => { + this.posting = false; postElement.value = ''; this.textInputValue = ''; this.checked = false; @@ -96,6 +102,7 @@ export class FeedComponent implements OnInit { this.showNew(); } }, (error: IErrorResponse) => { + this.posting = false; this.errorOccurred = true; this.errorMessage = error.error.errors[0].message; }); @@ -119,7 +126,7 @@ export class FeedComponent implements OnInit { } /** - * Fetches the next posts when scrolled + * Fetches the next posts when scrolled down */ onScroll() { this.feedService.getNextPosts(); From 2acce7625fee0d17f29dc7d77c6d97e0f1c2c14d Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 24 Jan 2020 10:35:54 +0100 Subject: [PATCH 03/19] Add margin bottom to images and videos in the feed --- src/app/components/feed/postlist/postlist.component.sass | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/components/feed/postlist/postlist.component.sass b/src/app/components/feed/postlist/postlist.component.sass index d27fcd9..3f2c0a4 100644 --- a/src/app/components/feed/postlist/postlist.component.sass +++ b/src/app/components/feed/postlist/postlist.component.sass @@ -60,16 +60,19 @@ $mat-card-header-size: 40px !default display: block margin-left: auto margin-right: auto + margin-bottom: 0.5em ::ng-deep video width: 100% max-height: 40vh outline: none user-select: none + margin-bottom: 0.5em ::ng-deep audio width: 100% max-height: 40vh outline: none user-select: none + margin-bottom: 0.5em .mat-button min-width: 32px !important From 88d68e6ae0656885fbf91ccf5259f017451c165a Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 24 Jan 2020 10:37:20 +0100 Subject: [PATCH 04/19] Fix link of friends profile picture to profile page --- src/app/components/social/friends/friends.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/social/friends/friends.component.html b/src/app/components/social/friends/friends.component.html index c036f75..913d661 100644 --- a/src/app/components/social/friends/friends.component.html +++ b/src/app/components/social/friends/friends.component.html @@ -17,7 +17,7 @@ -
+
{{friend.name}} From 14b2c798d996b77623dcbd058312fa6cd26597fc Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 24 Jan 2020 13:03:39 +0100 Subject: [PATCH 05/19] Change position of the add file button next to the check box --- src/app/components/feed/feed.component.html | 24 +++++++++++++-------- src/app/components/feed/feed.component.sass | 15 ++++++++++--- 2 files changed, 27 insertions(+), 12 deletions(-) diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 308c0d3..01fc5c6 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -13,21 +13,27 @@ Your browser does not support playing HTML5 video.
- + - - - -

- I protected the environment. - -

+ + What did you do? diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass index e3724a0..9997dd5 100644 --- a/src/app/components/feed/feed.component.sass +++ b/src/app/components/feed/feed.component.sass @@ -27,12 +27,17 @@ #feedlist width: 100% -#input +.input width: 100% padding-left: 0.5em padding-right: 0.5em - .mat-icon - transform: scale(1.5) +.left, .right + display: inline-block + width: 50% +.left + text-align: left +.right + text-align: right #inputPreview max-width: 100% max-height: 40vh @@ -60,6 +65,10 @@ #check margin: 0 padding-left: 0.5em + display: contents +#button-box + text-align: right + margin-left: auto #post-button width: 100% From 63b2e3cfc2666824dc04841102ae22d88fbafe4f Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 24 Jan 2020 15:23:55 +0100 Subject: [PATCH 06/19] Fix position of camera icon on group page --- src/app/components/group/group.component.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/group/group.component.sass b/src/app/components/group/group.component.sass index 6312e7b..6046785 100644 --- a/src/app/components/group/group.component.sass +++ b/src/app/components/group/group.component.sass @@ -54,7 +54,7 @@ $mat-card-header-size: 100px !default #icon display: none position: absolute - z-index: 11 + z-index: 100 color: white $mat-card-header-size: 100px !default From cf8b53bb3833089ff8da50224921b3c356049681 Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 24 Jan 2020 16:21:16 +0100 Subject: [PATCH 07/19] Add discard button for selected files --- src/app/components/feed/feed.component.html | 20 ++++++++++++++------ src/app/components/feed/feed.component.sass | 11 +++++++++++ src/app/components/feed/feed.component.ts | 10 +++++++++- 3 files changed, 34 insertions(+), 7 deletions(-) diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 01fc5c6..111dfbd 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -6,12 +6,20 @@
-
-

Preview:

- - +
+

Preview:

+
+ + + +
- +

@@ -34,7 +34,7 @@

-
-
+
{{friend.name}} From d8a2438761ec854165503833c3aa9f0209ae9666 Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 24 Jan 2020 21:08:16 +0100 Subject: [PATCH 18/19] Fix issue where media didn't load on profile page --- src/app/services/feed/feed.service.ts | 6 ++-- src/app/services/profile/profile.service.ts | 39 +++------------------ 2 files changed, 8 insertions(+), 37 deletions(-) diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts index 0535ed7..1333f15 100644 --- a/src/app/services/feed/feed.service.ts +++ b/src/app/services/feed/feed.service.ts @@ -289,7 +289,7 @@ export class FeedService extends BaseService { {headers: this.headers}) .pipe(this.retryRated()) .subscribe(response => { - this.posts.next(this.constructAllPosts(response)); + this.posts.next(this.constructAllPosts(response.data.getPosts)); this.activePostList = sort; }); } @@ -303,7 +303,7 @@ export class FeedService extends BaseService { this.http.post(environment.graphQLUrl, body, {headers: this.headers}) .pipe(this.retryRated()) .subscribe(response => { - const posts = this.constructAllPosts(response); + const posts = this.constructAllPosts(response.data.getPosts); const previousPosts = this.posts.getValue(); for (const post of previousPosts.reverse()) { if (!posts.find(p => p.id === post.id)) { @@ -360,7 +360,7 @@ export class FeedService extends BaseService { public constructAllPosts(response: any): Post[] { const posts = new Array(); - for (const post of response.data.getPosts) { + for (const post of response) { let profilePicture: string; if (post.author.profilePicture) { profilePicture = environment.greenvironmentUrl + post.author.profilePicture; diff --git a/src/app/services/profile/profile.service.ts b/src/app/services/profile/profile.service.ts index 809cb71..a808a16 100644 --- a/src/app/services/profile/profile.service.ts +++ b/src/app/services/profile/profile.service.ts @@ -7,6 +7,7 @@ import {User} from 'src/app/models/user'; import {Subject} from 'rxjs'; import {Activity} from 'src/app/models/activity'; import {BaseService} from '../base.service'; +import {FeedService} from 'src/app/services/feed/feed.service'; const graphqlGetProfileQuery = `query($userId: ID) { getUser(userId:$userId){ @@ -30,6 +31,7 @@ const graphqlGetProfileQuery = `query($userId: ID) { downvotes, userVote, deletable, + media {url, type}, activity{ id name @@ -39,7 +41,7 @@ const graphqlGetProfileQuery = `query($userId: ID) { author{ name, handle, - profilePicture + profilePicture, id}, createdAt } @@ -51,7 +53,7 @@ const graphqlGetProfileQuery = `query($userId: ID) { }) export class ProfileService extends BaseService { - constructor(http: HttpClient) { + constructor(http: HttpClient, private feedService: FeedService) { super(http); } @@ -96,38 +98,7 @@ export class ProfileService extends BaseService { const temp = new Date(Number(response.data.getUser.joinedAt)); const date = temp.toLocaleString('en-GB'); profile.joinedAt = date; - for (const post of response.data.getUser.posts) { - const id: number = post.id; - const content: string = post.content; - const htmlContent: string = post.htmlContent; - const upvotes: number = post.upvotes; - const downvotes: number = post.downvotes; - const userVote: string = post.userVote; - const deletable: boolean = post.deletable; - let profilePicture: string; - if (post.author.profilePicture) { - profilePicture = environment.greenvironmentUrl + post.author.profilePicture; - } else { - profilePicture = 'assets/images/default-profilepic.svg'; - } - const author = new Author(post.author.id, post.author.name, post.author.handle, profilePicture); - const ptemp = new Date(Number(post.createdAt)); - const pdate = ptemp.toLocaleString('en-GB'); - let activity: Activity; - if (post.activity) { - activity = new Activity( - post.activity.id, - post.activity.name, - post.activity.description, - post.activity.points); - } else { - activity = null; - } - - // tslint:disable-next-line: max-line-length - posts.push(new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, pdate, author, activity)); - } - profile.posts = posts; + profile.posts = this.feedService.constructAllPosts(response.data.getUser.posts); return profile; } return null; From dbbfc470eb587cf124969a06cac65dcb2fd7153d Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 24 Jan 2020 21:38:42 +0100 Subject: [PATCH 19/19] Change function in feedService --- src/app/services/feed/feed.service.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts index 1333f15..9f0a8fd 100644 --- a/src/app/services/feed/feed.service.ts +++ b/src/app/services/feed/feed.service.ts @@ -192,21 +192,22 @@ export class FeedService extends BaseService { return this.postGraphql(body, null, 0) .pipe(tap(response => { const updatedPosts = this.posts.getValue(); - if (this.activePostList === Sort.NEW) { - const post = this.constructPost(response); - this.uploadPostImage(post.id, file).subscribe((result) => { + const post = this.constructPost(response); + this.uploadPostImage(post.id, file).subscribe((result) => { + if (this.activePostList === Sort.NEW) { post.mediaUrl = result.fileName; post.mediaType = result.fileName.endsWith('.png') ? 'IMAGE' : 'VIDEO'; updatedPosts.unshift(post); this.posts.next(updatedPosts); this.posting.next(false); + } }, error => { console.error(error); this.posting.next(false); this.deletePost(post.id); }); } - })); + )); } else if (!file) { return this.postGraphql(body, null, 0) .pipe(tap(response => {