Posts with activityies work now, most liked button works

src/app/components/about/about.component.html

@@ -52,6 +52,12 @@
             <td mat-cell *matCellDef="let action"> {{action.name}} </td>
         </ng-container>
 
+        <!-- decriotion Column -->
+        <ng-container matColumnDef="description">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> description </th>
+            <td mat-cell *matCellDef="let action"> {{action.description}} </td>
+        </ng-container>
+
           <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>

src/app/components/about/about.component.ts

@@ -3,6 +3,7 @@ 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';
 
 @Component({
   selector: 'app-about',
@@ -13,16 +14,21 @@ export class AboutComponent implements OnInit {
   actionlist: Activitylist = new Activitylist();
   levellist: Levellist = new Levellist();
 
-  displayedColumns = ['points', 'name'];
+  displayedColumns = ['points', 'name', 'description'];
   dataSource = new MatTableDataSource(this.actionlist.Actions);
   displayedLevelColumns = ['level', 'name'];
   levelSource = this.levellist.levels;
 
-  constructor() { }
+  constructor(private activityService: ActivityService) { }
 
   @ViewChild(MatSort, {static: true}) sort: MatSort;
   ngOnInit() {
+    this.activityService.getActivitys();
+    this.activityService.activitylist.subscribe(response => {
+      this.actionlist = response;
+      this.dataSource = new MatTableDataSource(this.actionlist.Actions);
       this.dataSource.sort = this.sort;
+    });
   }
 
 }

src/app/components/feed/feed.component.html

@@ -13,14 +13,14 @@
         </p>
         <mat-form-field id="action-chooser" *ngIf="checked">
           <mat-label>What did you do?</mat-label>
-          <mat-select [(ngModel)]="selectedValue" name="action">
+          <mat-select [(ngModel)]="activityId" name="action">
             <mat-option>nothing ;)</mat-option>
-            <mat-option *ngFor="let action of actionlist.Actions" [value]="action.points">
+            <mat-option *ngFor="let action of actionlist.Actions" [value]="action.id" [matTooltip]="action.description" matTooltipShowDelay="200">
               {{action.name}} 
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <button mat-raised-button *ngIf="empty" color="primary" id="post-button" (click)=createPost(content)>
+        <button mat-raised-button *ngIf="empty" color="primary" id="post-button" (click)=createPost(content,activityId)>
           POST
         </button>
       </mat-card-content>
@@ -44,12 +44,7 @@
 </div>
 <div id="complete-feed">
   <div id="feedlist">
-    <div *ngIf = "viewNew">
+    <feed-postlist [childPostList]="parentSelectedPostList"></feed-postlist>
-      <feed-postlist (voteEvent)="refresh($event)" [childPostList]="parentSelectedPostList"></feed-postlist>
-    </div>
-    <div *ngIf = "viewMostLiked">
-      <feed-postlist (voteEvent)="refresh($event)" [childPostList]="parentSelectedPostList"></feed-postlist>
-    </div>
     <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 5em;" diameter="50"></mat-spinner>
   </div>
 </div>

src/app/components/feed/feed.component.ts

@@ -3,6 +3,7 @@ import { Post } from 'src/app/models/post';
 import { FeedService } from 'src/app/services/feed/feed.service';
 import { Activitylist } from 'src/app/models/activity';
 import { DatasharingService } from '../../services/datasharing.service';
+import { ActivityService } from 'src/app/services/activity/activity.service';
 import { User } from 'src/app/models/user';
 
 @Component({
@@ -12,70 +13,57 @@ import { User } from 'src/app/models/user';
 })
 export class FeedComponent implements OnInit {
   loading = true;
+
   checked: boolean; // if the "I protected the environment."-box is checked
-  empty: boolean;
+  empty: any;
- // points value of the green action
+ // id of the green activity
   value: any;
-  viewNew = true;
-  viewMostLiked = false;
-
-  feedNew: Array<Post>;
-  feedMostLiked: Array<Post>;
 
   parentSelectedPostList: Array<Post>;
-
   actionlist: Activitylist = new Activitylist();
 
   loggedIn = false;
-  userId: number;
   user: User;
 
-  constructor(private feedService: FeedService, private data: DatasharingService) { }
+  constructor(
+    private feedService: FeedService,
+    private data: DatasharingService,
+    private activityService: ActivityService
+    ) { }
 
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {
       this.user = user;
       this.loggedIn = user.loggedIn;
     });
-    this.feedService.getAllPostsRaw().subscribe(response => {
+    this.activityService.getActivitys();
-      this.loading = false;
+    this.activityService.activitylist.subscribe(response => {
-      this.feedNew = this.feedService.renderAllPosts(response.json());
+      this.actionlist = response;
-      this.parentSelectedPostList = this.feedNew;
+    });
-      this.feedMostLiked = this.feedNew;
+    this.feedService.getNewPosts();
+    this.feedService.posts.subscribe(response => {
+      if (response.length > 0) {this.loading = false; }
+      this.parentSelectedPostList = response;
     });
-
   }
 
-  createPost(pElement) {
+  createPost(pElement, activityId: string) {
+    if (pElement && activityId) {
+    this.feedService.createPostActivity(pElement.value, activityId);
+    pElement.value = '';
+    this.empty = '';
+    } else if (pElement) {
       this.feedService.createPost(pElement.value);
       pElement.value = '';
-    this.feedService.getAllPostsRaw().subscribe(response => {
+      this.empty = '';
-      this.feedNew = this.feedService.renderAllPosts(response.json());
+    }
-      this.parentSelectedPostList = this.feedNew;
-      this.feedMostLiked = this.feedNew; });
   }
 
   showNew() {
-    this.feedService.getAllPostsRaw().subscribe(response => {
+    this.feedService.getNewPosts();
-      this.feedNew = this.feedService.renderAllPosts(response.json());
-      this.parentSelectedPostList = this.feedNew; });
-    this.viewNew = true;
-    this.viewMostLiked = false;
   }
 
   showMostLiked() {
-    this.feedService.getAllPostsRaw().subscribe(response => {
+    this.feedService.getMostLikedPosts();
-      this.feedMostLiked = this.feedService.renderAllPosts(response.json());
-      this.parentSelectedPostList = this.feedMostLiked; });
-    this.viewNew = false;
-    this.viewMostLiked = true;
-  }
-
-
-  refresh($event) {
-    this.feedService.getAllPostsRaw().subscribe(response => {
-      this.parentSelectedPostList = this.feedService.renderAllPosts(response.json());
-    });
   }
-
 }

src/app/components/feed/postlist/postlist.component.html

@@ -56,6 +56,11 @@
       <mat-icon aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'UPVOTE'">keyboard_arrow_down</mat-icon>
     </button>
     {{post.downvotes}}
+    <div *ngIf="post.activity" class="activity-info">
+      <span class="span" [matTooltip]="post.activity.description" matTooltipShowDelay="200">
+        {{post.activity.points}} points earned through {{post.activity.name}}
+      </span>
+    </div>
   </mat-card-actions>
 </mat-card>
 

src/app/components/feed/postlist/postlist.component.sass

@@ -20,5 +20,15 @@
         max-width: 100%
         height: auto
         border-radius: 4px
+    .mat-button
+        min-width: 32px !important
+        padding: 0
+        margin: 0
+        margin-left: 8px
+
+    .activity-info
+        display: contents
+        .span
+            margin-left: 32px
 
  

src/app/components/home/home.component.ts

@@ -17,7 +17,6 @@ export class HomeComponent implements OnInit {
     this.data.currentUserInfo.subscribe(user => {
       this.loggedIn = user.loggedIn;
     });
-    this.feedService.getAllPosts();
   }
 
 }

src/app/models/activity.ts

@@ -1,10 +1,18 @@
 
-export interface Action {
+export class Activity {
   id: number;
   name: string;
+  description: string;
   points: number;
+
+  constructor(id: number, name: string, description: string, points: number) {
+    this.id = id;
+    this.name = name;
+    this.description = description;
+    this.points = points;
+  }
 }
 
 export class Activitylist {
-  Actions: Action[] = new Array();
+  Actions: Activity[] = new Array();
 }

src/app/models/post.ts

@@ -1,4 +1,5 @@
 import { Author } from './author';
+import { Activity } from './activity';
 
 export class Post {
     id: number;
@@ -10,6 +11,7 @@ export class Post {
     userVote: string;
     deletable: boolean;
     author: Author;
+    activity: Activity;
 
     // TODO: constructor properties need normal names
     constructor(
@@ -21,7 +23,8 @@ export class Post {
       pUserVote: string,
       pDeletable: boolean,
       pDate: string,
-      pAuthor: Author
+      pAuthor: Author,
+      pactivity: Activity
     ) {
         this.id = pId;
         this.content = pContent;
@@ -32,5 +35,6 @@ export class Post {
         this.deletable = pDeletable;
         this.date = pDate;
         this.author = pAuthor;
+        this.activity = pactivity;
     }
 }

src/app/services/activity/activity.service.ts

@@ -1,16 +1,16 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { Activitylist } from 'src/app/models/activity';
+import { Activitylist, Activity } from 'src/app/models/activity';
 import { environment } from 'src/environments/environment';
 import { Http } from '@angular/http';
 
+
 @Injectable({
   providedIn: 'root'
 })
 export class ActivityService {
 
-  private activitylist = new BehaviorSubject<Activitylist>(new Activitylist());
+  public activitylist = new BehaviorSubject<Activitylist>(new Activitylist());
-  currentActivityList = this.activitylist.asObservable();
 
   constructor(private http: Http) { }
 
@@ -19,6 +19,7 @@ export class ActivityService {
   }
 
   public getActivitys() {
+    if (this.activitylist.getValue().Actions.length < 1) {
       const headers = new Headers();
       headers.set('Content-Type', 'application/json');
       this.http.post(environment.graphQLUrl, this.buildJson()).subscribe(result => {
@@ -26,46 +27,26 @@ export class ActivityService {
         this.activitylist.next(this.renderActivity(result.json()));
       });
     }
-
-  public buildJson(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,
-          author{
-            name,
-            handle,
-            id},
-          createdAt
-        }
   }
-    }`, variables: {
+
-        userId: id,
+  public buildJson(): any {
+    const body =  {query: `query{getActivities{
+      id name description points
+    }}`, variables: {
+
       }};
     return body;
   }
 
   public renderActivity(response: any): Activitylist {
     const activitylist = new Activitylist();
-    // activitylist.push();
+    for (const activity of response.data.getActivities) {
+      activitylist.Actions.push(new Activity(
+        activity.id,
+        activity.name,
+        activity.description,
+        activity.points));
+    }
     return activitylist;
   }
 }

src/app/services/feed/feed.service.ts

@@ -3,28 +3,87 @@ 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 { Activity } from 'src/app/models/activity';
+import { BehaviorSubject } from 'rxjs';
+import { User } from 'src/app/models/user';
 
 @Injectable({
   providedIn: 'root'
 })
 export class FeedService {
 
-  posts: Array<Post>;
+  public posts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
+  public newPosts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
+  public mostLikedPosts: BehaviorSubject<Post[]> = new BehaviorSubject(new Array());
 
   constructor(private http: Http) { }
 
   public createPost(pContent: String) {
-    const url = environment.graphQLUrl;
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
 
     const body = {query: `mutation($content: String!) {
-        createPost(content: $content) {id}
+        createPost(content: $content) {
+          id,
+          content,
+          htmlContent,
+          upvotes,
+          downvotes,
+          userVote,
+          deletable,
+          activity{
+            id
+            name
+            description
+            points
+          },
+          author{
+            name,
+            handle,
+            id},
+          createdAt}
       }`, variables: {
           content: pContent
       }};
+      return this.http.post(environment.graphQLUrl, body).subscribe(response => {
+        const updatedposts = this.newPosts.getValue();
+        updatedposts.unshift(this.renderPost(response.json()));
+        this.newPosts.next(updatedposts);
+      });
+  }
+
+  public createPostActivity(pContent: String, activityId: String) {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
 
-    this.http.post(url, body).subscribe(response => {
+    const body = {query: `mutation($content: String!, $id: ID) {
+        createPost(content: $content activityId: $id) {
+          id,
+          content,
+          htmlContent,
+          upvotes,
+          downvotes,
+          userVote,
+          deletable,
+          activity{
+            id
+            name
+            description
+            points
+          },
+          author{
+            name,
+            handle,
+            id},
+          createdAt}
+      }`, variables: {
+          content: pContent,
+          id: activityId
+      }};
+      return this.http.post(environment.graphQLUrl, body).subscribe(response => {
+        const updatedposts = this.newPosts.getValue();
+        updatedposts.unshift(this.renderPost(response.json()));
+        this.newPosts.next(updatedposts);
       });
   }
 
@@ -71,26 +130,31 @@ export class FeedService {
     return this.http.post(environment.graphQLUrl, body);
   }
 
-  public getAllPosts(): Array<Post> {
+  public getNewPosts() {
-    const url = environment.graphQLUrl;
+    if (this.newPosts.getValue().length === 0) {
-
       const headers = new Headers();
       headers.set('Content-Type', 'application/json');
-
+      this.http.post(environment.graphQLUrl, this.buildJsonNew())
-    this.http.post(url, this.getBodyForGetAllPosts())
       .subscribe(response => {
-        this.posts = this.renderAllPosts(response.json());
+        this.newPosts.next(this.renderAllPosts(response.json()));
+        this.posts.next(this.newPosts.getValue());
       });
-    return this.posts;
+    } else {this.posts.next(this.newPosts.getValue()); }
   }
 
-  public getAllPostsRaw(): any {
+  public getMostLikedPosts() {
+    if (this.mostLikedPosts.getValue().length === 0) {
       const headers = new Headers();
       headers.set('Content-Type', 'application/json');
-    return this.http.post(environment.graphQLUrl, this.getBodyForGetAllPosts());
+      this.http.post(environment.graphQLUrl, this.buildJsonMostLiked())
+      .subscribe(response => {
+        this.mostLikedPosts.next(this.renderAllPosts(response.json()));
+        this.posts.next(this.mostLikedPosts.getValue());
+      });
+    } else {this.posts.next(this.mostLikedPosts.getValue()); }
   }
 
-  getBodyForGetAllPosts() {
+  buildJsonNew() {
     const body =  {query: `{
         getPosts (first: 1000, offset: 0) {
           id,
@@ -99,7 +163,39 @@ export class FeedService {
           upvotes,
           downvotes,
           userVote,
-          deletable
+          deletable,
+          activity{
+            id
+            name
+            description
+            points
+          },
+          author{
+            name,
+            handle,
+            id},
+          createdAt}
+      }`, variables: {
+      }};
+      return body;
+  }
+
+  buildJsonMostLiked() {
+    const body =  {query: `{
+        getPosts (first: 1000, offset: 0, sort: TOP) {
+          id,
+          content,
+          htmlContent,
+          upvotes,
+          downvotes,
+          userVote,
+          deletable,
+          activity{
+            id
+            name
+            description
+            points
+          },
           author{
             name,
             handle,
@@ -110,6 +206,30 @@ export class FeedService {
       return body;
   }
 
+  public renderPost(response: any): Post {
+    const post = response.data.createPost;
+    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;
+    const author = new Author(post.author.id, post.author.name, post.author.handle);
+    const temp = new Date(Number(post.createdAt));
+    const date = temp.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; }
+
+    return new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, date, author, activity);
+  }
+
   public renderAllPosts(pResponse: any): Array<Post> {
     const posts = new Array<Post>();
     // let options = {year: 'numeric', month: 'short', day: 'numeric', hour: '' }
@@ -124,8 +244,15 @@ export class FeedService {
       const author = new Author(post.author.id, post.author.name, post.author.handle);
       const temp = new Date(Number(post.createdAt));
       const date = temp.toLocaleString('en-GB');
-
+      let activity: Activity;
-      posts.push(new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, date, author));
+      if (post.activity) {
+      activity = new Activity(
+        post.activity.id,
+        post.activity.name,
+        post.activity.description,
+        post.activity.points);
+      } else { activity = null; }
+      posts.push(new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, date, author, activity));
     }
     return posts;
   }

src/app/services/profile/profile.service.ts

@@ -5,6 +5,7 @@ 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';
 
 @Injectable({
   providedIn: 'root'
@@ -49,6 +50,12 @@ export class ProfileService {
           downvotes,
           userVote,
           deletable,
+          activity{
+            id
+            name
+            description
+            points
+          },
           author{
             name,
             handle,
@@ -88,7 +95,17 @@ export class ProfileService {
         const author = new Author(post.author.id, post.author.name, post.author.handle);
         const ptemp = new Date(Number(post.createdAt));
         const pdate = ptemp.toLocaleString('en-GB');
-        posts.push(new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, pdate, author));
+        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;
       return profile;