diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index fca185c..111dfbd 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -6,30 +6,45 @@
-
-

Preview:

- - +
+

Preview:

+
+ + + +
- - - - - -

- I protected the environment. - -

+
+
What did you do? - + nothing ;) @@ -38,7 +53,8 @@ {{getErrorMessage()}} - diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass index 5f16e08..7d6390b 100644 --- a/src/app/components/feed/feed.component.sass +++ b/src/app/components/feed/feed.component.sass @@ -27,23 +27,26 @@ #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: 75% - max-height: 100% + max-width: 100% + max-height: 45vh 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 @@ -51,6 +54,19 @@ text-align: center max-height: 512px margin-bottom: 1em + #media-box + position: relative + width: 100% +::ng-deep .light-theme .discard-button + margin: 0.5em + position: absolute + background: hsla(255,100%,100%,0.3) +::ng-deep .dark-theme .discard-button + margin: 0.5em + position: absolute + background: hsla(0,0%,0%,0.3) +#progress-bar + margin-top: 1em #action-chooser width: 100% @@ -60,6 +76,10 @@ #check margin: 0 padding-left: 0.5em + display: contents +#button-box + text-align: right + margin-left: auto #post-button width: 100% diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts index d226149..ad17f55 100644 --- a/src/app/components/feed/feed.component.ts +++ b/src/app/components/feed/feed.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; import {Post} from 'src/app/models/post'; import {FeedService, Sort} from 'src/app/services/feed/feed.service'; import {Activitylist} from 'src/app/models/activity'; @@ -17,11 +17,13 @@ export class FeedComponent implements OnInit { loadingNew = true; loadingMostLiked = true; // file upload variables + @ViewChild('name', {static: false}) fileInput; public uploading = false; public profilePictureUrl: BehaviorSubject; private file; fileType; public localFileUrl; + posting = false; checked = false; // if the "I protected the environment."-box is checked view = 'new'; @@ -70,7 +72,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 +85,15 @@ 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.feedService.createPost(postElement.value, this.file).subscribe(() => { + this.posting = true; + this.feedService.createPost(postElement.value, this.file).subscribe((result) => { + console.log('response in component'); + this.posting = false; postElement.value = ''; this.textInputValue = ''; this.checked = false; @@ -96,12 +104,22 @@ export class FeedComponent implements OnInit { this.showNew(); } }, (error: IErrorResponse) => { + console.log('an error occured in component'); + console.log(error); + this.posting = false; this.errorOccurred = true; this.errorMessage = error.error.errors[0].message; }); } } + discardFile() { + this.file = null; + this.localFileUrl = null; + this.fileType = null; + this.fileInput.nativeElement.value = ''; + } + onFileInputChange(event) { this.errorOccurred = false; this.errorMessage = ''; @@ -119,7 +137,7 @@ export class FeedComponent implements OnInit { } /** - * Fetches the next posts when scrolled + * Fetches the next posts when scrolled down */ onScroll() { this.feedService.getNextPosts(); 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 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 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}} 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; } } diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts index 3c924fd..15ded07 100644 --- a/src/app/services/feed/feed.service.ts +++ b/src/app/services/feed/feed.service.ts @@ -10,8 +10,8 @@ import {BaseService} from '../base.service'; import {formatDate} from '@angular/common'; import {IFileUploadResult} from '../../models/interfaces/IFileUploadResult'; -const createPostGqlQuery = `mutation($content: String!) { - createPost(content: $content) { +const createPostGqlQuery = `mutation($content: String!, $type: PostType) { + createPost(content: $content, type: $type) { id, content, htmlContent, @@ -34,8 +34,8 @@ const createPostGqlQuery = `mutation($content: String!) { createdAt} }`; -const createPostActivityGqlQuery = `mutation($content: String!, $id: ID) { - createPost(content: $content activityId: $id) { +const createPostActivityGqlQuery = `mutation($content: String!, $id: ID, $type: PostType) { + createPost(content: $content activityId: $id, type: $type) { id, content, htmlContent, @@ -70,7 +70,7 @@ const downvotePostGqlQuery = `mutation($postId: ID!) { } }`; -const getPostGqlQuery = `query($first: Int, $offset: Int, $sort: SortType){ +const getPostsGqlQuery = `query($first: Int, $offset: Int, $sort: SortType){ getPosts (first: $first, offset: $offset, sort: $sort) { id, content, @@ -122,7 +122,7 @@ export class FeedService extends BaseService { */ private static buildGetPostBody(sort: string, offset: number, first: number = 10) { return { - query: getPostGqlQuery, variables: { + query: getPostsGqlQuery, variables: { first, offset, sort @@ -145,10 +145,15 @@ export class FeedService extends BaseService { * @param file */ public createPost(pContent: String, file?: File) { + let type: string; + if (file) { type = 'MEDIA'; } else { + type = 'TEXT'; + } const body = { query: createPostGqlQuery, variables: { - content: pContent + content: pContent, + type } }; return this.createPostRequest(body, file); @@ -161,10 +166,15 @@ export class FeedService extends BaseService { * @param file */ public createPostActivity(pContent: String, activityId: String, file?: File) { + let type: string; + if (file) { type = 'MEDIA'; } else { + type = 'TEXT'; + } const body = { query: createPostActivityGqlQuery, variables: { content: pContent, - id: activityId + id: activityId, + type } }; return this.createPostRequest(body, file); @@ -176,26 +186,34 @@ export class FeedService extends BaseService { * @param file - a file that is being uploaded with the post */ private createPostRequest(body: { variables: any; query: string }, file?: File) { - return this.postGraphql(body, null, 0) + if (file) { + return this.postGraphql(body, null, 0) .pipe(tap(response => { + const updatedPosts = this.posts.getValue(); if (this.activePostList === Sort.NEW) { - const updatedPosts = this.posts.getValue(); const post = this.constructPost(response); - updatedPosts.unshift(post); - if (file) { - this.uploadPostImage(post.id, file).subscribe((result) => { - post.mediaUrl = result.fileName; - post.mediaType = result.fileName.endsWith('.png') ? 'IMAGE' : 'VIDEO'; - this.posts.next(updatedPosts); - }, error => { - console.error(error); - this.deletePost(post.id); - }); - } else { + this.uploadPostImage(post.id, file).subscribe((result) => { + post.mediaUrl = result.fileName; + post.mediaType = result.fileName.endsWith('.png') ? 'IMAGE' : 'VIDEO'; + updatedPosts.unshift(post); this.posts.next(updatedPosts); - } + }, error => { + console.error(error); + this.deletePost(post.id); + }); + } + })); + } else if (!file) { + return this.postGraphql(body, null, 0) + .pipe(tap(response => { + const updatedPosts = this.posts.getValue(); + if (this.activePostList === Sort.NEW) { + const post = this.constructPost(response); + updatedPosts.unshift(post); + this.posts.next(updatedPosts); } })); + } } /**