From 6f83969aedf95618a22fddb22e83feae67eafdc7 Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Fri, 24 Jan 2020 10:12:13 +0100
Subject: [PATCH 1/8] 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 <maxes2000@t-online.de>
Date: Fri, 24 Jan 2020 10:33:22 +0100
Subject: [PATCH 2/8] 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 @@
           </video>
         </div>
         <mat-form-field id="input">
-          <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue"
+          <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue" [disabled]="posting"
                     mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
           <button mat-button matSuffix mat-icon-button (click)="name.click()"
             matTooltip="upload a picture or video (up to 10MB)"
-            matTooltipShowDelay="200">
+            matTooltipShowDelay="200"
+            [disabled]="posting">
             <mat-icon>attach_file</mat-icon>
           </button>
           <input style="display: none" id="input-file" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #name>
         </mat-form-field>
         <p id="check">
-          <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked">I protected the environment.
+          <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked" [disabled]="posting">I protected the environment.
           </mat-checkbox>
         </p>
         <mat-form-field id="action-chooser" *ngIf="checked">
           <mat-label>What did you do?</mat-label>
-          <mat-select [(ngModel)]="activityId" name="action">
+          <mat-select [(ngModel)]="activityId" name="action" [disabled]="posting">
             <mat-option>nothing ;)</mat-option>
             <mat-option *ngFor="let action of actionlist.Actions" [value]="action.id" [matTooltip]="action.description"
                         matTooltipShowDelay="200">
@@ -38,7 +39,8 @@
           </mat-select>
         </mat-form-field>
         <mat-error *ngIf="errorOccurred && textInputValue">{{getErrorMessage()}}</mat-error>
-        <button mat-raised-button *ngIf="textInputValue" color="primary" id="post-button"
+        <mat-progress-bar id="progress-bar" *ngIf="posting" mode="indeterminate"></mat-progress-bar>
+        <button mat-raised-button *ngIf="textInputValue" color="primary" id="post-button" [disabled]="posting"
                 (click)=createPost(content,activityId)>
           POST
         </button>
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 <maxes2000@t-online.de>
Date: Fri, 24 Jan 2020 10:35:54 +0100
Subject: [PATCH 3/8] 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 <maxes2000@t-online.de>
Date: Fri, 24 Jan 2020 10:37:20 +0100
Subject: [PATCH 4/8] 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 @@
           </button>
         </mat-menu>
       </div>
-      <div mat-card-avatar (click)="showGroupProfile(group)">
+      <div mat-card-avatar (click)="showFriendProfile(group)">
         <img class="profile-picture" [src]="friend.profilePicture"/>
       </div>
       <mat-card-title (click)="showFriendProfile(friend)">{{friend.name}}</mat-card-title>

From 14b2c798d996b77623dcbd058312fa6cd26597fc Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Fri, 24 Jan 2020 13:03:39 +0100
Subject: [PATCH 5/8] 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.
           </video>
         </div>
-        <mat-form-field id="input">
+        <mat-form-field class="input">
           <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue" [disabled]="posting"
-                    mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
-          <button mat-button matSuffix mat-icon-button (click)="name.click()"
+            mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
+        </mat-form-field>
+        <input style="display: none" id="input-file" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #name>
+        <div class="input">
+        <div class="left">
+          <p id="check">
+            <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked" [disabled]="posting">I protected the environment.
+            </mat-checkbox>
+          </p>
+        </div>
+        <div class="right">
+          <button mat-button mat-icon-button (click)="name.click()"
             matTooltip="upload a picture or video (up to 10MB)"
             matTooltipShowDelay="200"
             [disabled]="posting">
             <mat-icon>attach_file</mat-icon>
           </button>
-          <input style="display: none" id="input-file" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #name>
-        </mat-form-field>
-        <p id="check">
-          <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked" [disabled]="posting">I protected the environment.
-          </mat-checkbox>
-        </p>
+        </div>
+        </div>
         <mat-form-field id="action-chooser" *ngIf="checked">
           <mat-label>What did you do?</mat-label>
           <mat-select [(ngModel)]="activityId" name="action" [disabled]="posting">
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 <maxes2000@t-online.de>
Date: Fri, 24 Jan 2020 15:23:55 +0100
Subject: [PATCH 6/8] 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 <maxes2000@t-online.de>
Date: Fri, 24 Jan 2020 16:21:16 +0100
Subject: [PATCH 7/8] 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 @@
   <div [hidden]="!loggedIn">
     <mat-card>
       <mat-card-content>
-        <div id="inputPreviewWrapper">
-          <h2 *ngIf="localFileUrl">Preview:</h2>
-          <img *ngIf="fileType == 'image'" id="inputPreview" [src]="localFileUrl"/>
-          <video *ngIf="fileType == 'video'"  [src]="localFileUrl" controls="" class="html5-video-player">
-            Your browser does not support playing HTML5 video.
-          </video>
+        <div id="inputPreviewWrapper" *ngIf="localFileUrl">
+          <h2>Preview:</h2>
+          <div id="media-box">
+            <button class="discard-button" mat-button mat-icon-button (click)="discardFile()"
+              matTooltip="discard file"
+              matTooltipShowDelay="200"
+              [disabled]="posting">
+              <mat-icon>close</mat-icon>
+            </button>
+            <img *ngIf="fileType == 'image'" id="inputPreview" [src]="localFileUrl"/>
+            <video *ngIf="fileType == 'video'"  [src]="localFileUrl" id="inputPreview" controls="" class="html5-video-player">
+              Your browser does not support playing HTML5 video.
+            </video>
+          </div>
         </div>
         <mat-form-field class="input">
           <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue" [disabled]="posting"
diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass
index 9997dd5..ac0efde 100644
--- a/src/app/components/feed/feed.component.sass
+++ b/src/app/components/feed/feed.component.sass
@@ -54,6 +54,17 @@
   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
 
diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts
index f32a8f4..c943a34 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,6 +17,7 @@ export class FeedComponent implements OnInit {
   loadingNew = true;
   loadingMostLiked = true;
   // file upload variables
+  @ViewChild('name', {static: false}) fileInput;
   public uploading = false;
   public profilePictureUrl: BehaviorSubject<string | null>;
   private file;
@@ -109,6 +110,13 @@ export class FeedComponent implements OnInit {
     }
   }
 
+  discardFile() {
+    this.file = null;
+    this.localFileUrl = null;
+    this.fileType = null;
+    this.fileInput.nativeElement.value = '';
+  }
+
   onFileInputChange(event) {
     this.errorOccurred = false;
     this.errorMessage = '';

From 2250492ccc624f1c6f58ce92f18a7bdee53a6fea Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Fri, 24 Jan 2020 17:36:00 +0100
Subject: [PATCH 8/8] Change feedservice

---
 src/app/components/feed/feed.component.sass |  2 +-
 src/app/components/feed/feed.component.ts   |  5 +-
 src/app/services/feed/feed.service.ts       | 62 +++++++++++++--------
 3 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass
index ac0efde..7d6390b 100644
--- a/src/app/components/feed/feed.component.sass
+++ b/src/app/components/feed/feed.component.sass
@@ -40,7 +40,7 @@
   text-align: right
 #inputPreview
   max-width: 100%
-  max-height: 40vh
+  max-height: 45vh
   width: auto
   border-radius: 4px
   mask-mode: luminance
diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts
index c943a34..ad17f55 100644
--- a/src/app/components/feed/feed.component.ts
+++ b/src/app/components/feed/feed.component.ts
@@ -91,7 +91,8 @@ export class FeedComponent implements OnInit {
       });
     } else if (postElement) {
       this.posting = true;
-      this.feedService.createPost(postElement.value, this.file).subscribe(() => {
+      this.feedService.createPost(postElement.value, this.file).subscribe((result) => {
+        console.log('response in component');
         this.posting = false;
         postElement.value = '';
         this.textInputValue = '';
@@ -103,6 +104,8 @@ 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;
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);
         }
       }));
+    }
   }
 
   /**