From dc467d431ac64cdb759a51e877e824f26c2e19aa Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 13 Jan 2020 18:49:52 +0100 Subject: [PATCH] Posts with activityies work now, most liked button works --- src/app/components/about/about.component.html | 12 +- src/app/components/about/about.component.ts | 12 +- src/app/components/feed/feed.component.html | 15 +- src/app/components/feed/feed.component.ts | 68 +++---- .../feed/postlist/postlist.component.html | 5 + .../feed/postlist/postlist.component.sass | 10 + src/app/components/home/home.component.ts | 1 - src/app/models/activity.ts | 12 +- src/app/models/post.ts | 6 +- src/app/services/activity/activity.service.ts | 65 +++---- src/app/services/feed/feed.service.ts | 173 +++++++++++++++--- src/app/services/profile/profile.service.ts | 19 +- 12 files changed, 272 insertions(+), 126 deletions(-) diff --git a/src/app/components/about/about.component.html b/src/app/components/about/about.component.html index d03061a..1a31a56 100644 --- a/src/app/components/about/about.component.html +++ b/src/app/components/about/about.component.html @@ -48,9 +48,15 @@ - action - {{action.name}} - + action + {{action.name}} + + + + + description + {{action.description}} + diff --git a/src/app/components/about/about.component.ts b/src/app/components/about/about.component.ts index c27f304..d2907cd 100644 --- a/src/app/components/about/about.component.ts +++ b/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.dataSource.sort = this.sort; + this.activityService.getActivitys(); + this.activityService.activitylist.subscribe(response => { + this.actionlist = response; + this.dataSource = new MatTableDataSource(this.actionlist.Actions); + this.dataSource.sort = this.sort; + }); } } diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index c51821b..1584af1 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -13,14 +13,14 @@

What did you do? - + nothing ;) - - {{action.name}} + + {{action.name}} - @@ -44,12 +44,7 @@
-
- -
-
- -
+
diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts index e0d703d..9665fc9 100644 --- a/src/app/components/feed/feed.component.ts +++ b/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; - // points value of the green action + empty: any; + // id of the green activity value: any; - viewNew = true; - viewMostLiked = false; - - feedNew: Array; - feedMostLiked: Array; parentSelectedPostList: Array; - 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.loading = false; - this.feedNew = this.feedService.renderAllPosts(response.json()); - this.parentSelectedPostList = this.feedNew; - this.feedMostLiked = this.feedNew; + this.activityService.getActivitys(); + this.activityService.activitylist.subscribe(response => { + this.actionlist = response; + }); + this.feedService.getNewPosts(); + this.feedService.posts.subscribe(response => { + if (response.length > 0) {this.loading = false; } + this.parentSelectedPostList = response; }); - } - createPost(pElement) { - this.feedService.createPost(pElement.value); + createPost(pElement, activityId: string) { + if (pElement && activityId) { + this.feedService.createPostActivity(pElement.value, activityId); pElement.value = ''; - this.feedService.getAllPostsRaw().subscribe(response => { - this.feedNew = this.feedService.renderAllPosts(response.json()); - this.parentSelectedPostList = this.feedNew; - this.feedMostLiked = this.feedNew; }); + this.empty = ''; + } else if (pElement) { + this.feedService.createPost(pElement.value); + pElement.value = ''; + this.empty = ''; + } } showNew() { - this.feedService.getAllPostsRaw().subscribe(response => { - this.feedNew = this.feedService.renderAllPosts(response.json()); - this.parentSelectedPostList = this.feedNew; }); - this.viewNew = true; - this.viewMostLiked = false; + this.feedService.getNewPosts(); } showMostLiked() { - this.feedService.getAllPostsRaw().subscribe(response => { - this.feedMostLiked = this.feedService.renderAllPosts(response.json()); - this.parentSelectedPostList = this.feedMostLiked; }); - this.viewNew = false; - this.viewMostLiked = true; + this.feedService.getMostLikedPosts(); } - - - refresh($event) { - this.feedService.getAllPostsRaw().subscribe(response => { - this.parentSelectedPostList = this.feedService.renderAllPosts(response.json()); - }); - } - } diff --git a/src/app/components/feed/postlist/postlist.component.html b/src/app/components/feed/postlist/postlist.component.html index 6d6d510..40945c7 100644 --- a/src/app/components/feed/postlist/postlist.component.html +++ b/src/app/components/feed/postlist/postlist.component.html @@ -56,6 +56,11 @@ keyboard_arrow_down {{post.downvotes}} +
+ + {{post.activity.points}} points earned through {{post.activity.name}} + +
diff --git a/src/app/components/feed/postlist/postlist.component.sass b/src/app/components/feed/postlist/postlist.component.sass index 12f3e95..fd49ccb 100644 --- a/src/app/components/feed/postlist/postlist.component.sass +++ b/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 diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index 9149fc1..22abaab 100644 --- a/src/app/components/home/home.component.ts +++ b/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(); } } diff --git a/src/app/models/activity.ts b/src/app/models/activity.ts index 966e56b..9751b0e 100644 --- a/src/app/models/activity.ts +++ b/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(); } diff --git a/src/app/models/post.ts b/src/app/models/post.ts index b0d6818..68ddec1 100644 --- a/src/app/models/post.ts +++ b/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; } } diff --git a/src/app/services/activity/activity.service.ts b/src/app/services/activity/activity.service.ts index d19f03a..4e4f43f 100644 --- a/src/app/services/activity/activity.service.ts +++ b/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(new Activitylist()); - currentActivityList = this.activitylist.asObservable(); + public activitylist = new BehaviorSubject(new Activitylist()); constructor(private http: Http) { } @@ -19,53 +19,34 @@ export class ActivityService { } public getActivitys() { - const headers = new Headers(); - headers.set('Content-Type', 'application/json'); - this.http.post(environment.graphQLUrl, this.buildJson()).subscribe(result => { - // push onto subject - this.activitylist.next(this.renderActivity(result.json())); - }); + 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 => { + // push onto subject + 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; } } diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts index e609837..3867512 100644 --- a/src/app/services/feed/feed.service.ts +++ b/src/app/services/feed/feed.service.ts @@ -3,29 +3,88 @@ 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; + public posts: BehaviorSubject = new BehaviorSubject(new Array()); + public newPosts: BehaviorSubject = new BehaviorSubject(new Array()); + public mostLikedPosts: BehaviorSubject = 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); + }); + } - this.http.post(url, body).subscribe(response => { - }); + public createPostActivity(pContent: String, activityId: String) { + const headers = new Headers(); + headers.set('Content-Type', 'application/json'); + + 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); + }); } public upvote(pPostID: number): any { @@ -71,26 +130,31 @@ export class FeedService { return this.http.post(environment.graphQLUrl, body); } - public getAllPosts(): Array { - const url = environment.graphQLUrl; - - const headers = new Headers(); - headers.set('Content-Type', 'application/json'); - - this.http.post(url, this.getBodyForGetAllPosts()) - .subscribe(response => { - this.posts = this.renderAllPosts(response.json()); + public getNewPosts() { + if (this.newPosts.getValue().length === 0) { + const headers = new Headers(); + headers.set('Content-Type', 'application/json'); + this.http.post(environment.graphQLUrl, this.buildJsonNew()) + .subscribe(response => { + 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 { - const headers = new Headers(); - headers.set('Content-Type', 'application/json'); - return this.http.post(environment.graphQLUrl, this.getBodyForGetAllPosts()); + public getMostLikedPosts() { + if (this.mostLikedPosts.getValue().length === 0) { + const headers = new Headers(); + headers.set('Content-Type', 'application/json'); + 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,13 @@ export class FeedService { upvotes, downvotes, userVote, - deletable + deletable, + activity{ + id + name + description + points + }, author{ name, handle, @@ -110,6 +180,56 @@ export class FeedService { 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, + id}, + createdAt} + }`, variables: { + }}; + 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 { const posts = new Array(); // 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'); - - posts.push(new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, date, 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; } + posts.push(new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, date, author, activity)); } return posts; } diff --git a/src/app/services/profile/profile.service.ts b/src/app/services/profile/profile.service.ts index d92944d..e8735b1 100644 --- a/src/app/services/profile/profile.service.ts +++ b/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;