added posts to profile page

master
Max 5 years ago
parent 00c019196f
commit 44cecfb74c

@ -1,4 +1,5 @@
<div id="profile-page">
<div id="profilecontainer" *ngIf="!profileNotFound && !loading">
<mat-toolbar color="primary" id="toolbar">
<mat-toolbar-row>
<div class="profile-picture"></div>
@ -15,52 +16,10 @@
<span id="info">{{rankname}} ({{userProfile.points}} points)</span>
</mat-toolbar-row>
</mat-toolbar>
<div id="postlist">
<feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>
</div>
<div id="profile">
<div id="profilecontainer" [hidden]="profileNotFound">
<!--<div id="profile-card-container">
<mat-card class="mat-elevation-z8">
<mat-card-header>
<div mat-card-avatar class="profile-picture"></div>
<mat-card-title>{{userProfile.username}}</mat-card-title>
<mat-card-subtitle>{{userProfile.handle}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<table id="profile-table">
<tr>
<div class="mat-header-cell">name: </div>
<td>{{userProfile.username}}</td>
</tr>
<mat-divider></mat-divider>
<tr>
<div class="mat-header-cell">handle: </div>
<td>{{userProfile.handle}}</td>
</tr>
<mat-divider></mat-divider>
<tr>
<div class="mat-header-cell">profileID: </div>
<td>{{userProfile.userID}}</td>
</tr>
<mat-divider></mat-divider>
<tr>
<div class="mat-header-cell">points: </div>
<td>{{userProfile.points}}</td>
</tr>
<mat-divider></mat-divider>
<tr>
<div class="mat-header-cell">level: </div>
<td>{{userProfile.level}}</td>
</tr>
<mat-divider></mat-divider>
<tr>
<div class="mat-header-cell">level name: </div>
<td>{{rankname}}</td>
</tr>
</table>
</mat-card-content>
</mat-card>
</div>-->
<br>
<h1>What does the level mean?</h1>
<p>There are different levels you can reach through green behaviour.
@ -116,9 +75,11 @@
</tr>
</table>-->
</div>
</div>
<div id="profilecontainer" *ngIf="profileNotFound">
<h1>Profile not found :(</h1>
</div>
</div>
<mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
</div>

@ -24,10 +24,12 @@
margin-bottom: 0.5em
margin-left: auto
#toolbar
margin-top: 25px
margin-top: 32px
.mat-toolbar-row
max-height: 40px
#username
margin: 0.5em
margin: 0 0.5em
#handle
font-size: 14px
#info
@ -55,16 +57,7 @@ $mat-card-header-size: 100px !default
#profile-table
width: 100%
.mat-table
display: block
.mat-cell,
.mat-header-cell
align-items: center
display: flex
min-height: 48px
#postlist
margin: 0.5em auto
padding: 0
flex: 1
overflow: hidden
word-wrap: break-word
max-width: 690px

@ -1,15 +1,14 @@
import { Component, OnInit, ViewChild} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';
import {Http, URLSearchParams, Headers} from '@angular/http';
import { User } from 'src/app/models/user';
import { Actionlist } from 'src/app/models/actionlist';
import { Levellist } from 'src/app/models/levellist';
import { environment } from 'src/environments/environment';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import { RequestService } from 'src/app/services/request/request.service';
import { DatasharingService } from '../../services/datasharing.service';
import { FeedService } from 'src/app/services/feed/feed.service';
import { ProfileService } from 'src/app/services/profile/profile.service';
import { runInThisContext } from 'vm';
@Component({
selector: 'app-profile',
@ -31,16 +30,20 @@ export class ProfileComponent implements OnInit {
displayedLevelColumns = ['level', 'name'];
levelSource = this.levellist.levels;
loading = false;
constructor(
private router: Router,
private http: Http,
private requestService: RequestService,
private data: DatasharingService) {
private data: DatasharingService,
private profileService: ProfileService) {
router.events.forEach((event) => {
// check if the user is on the profile page (of userY) and routes to the page of userY (e.g. his own page)
if (event instanceof NavigationEnd) {
if (this.id !== this.router.url.substr(this.router.url.lastIndexOf('/') + 1) && this.id) {
const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
if (this.id !== possibleID && this.id && this.router.url.includes('profile/')) {
// reload the user
console.log('search for user id: ' + this.router.url.substr(this.router.url.lastIndexOf('/') + 1));
this.ngOnInit();
}
}
@ -49,66 +52,31 @@ export class ProfileComponent implements OnInit {
@ViewChild(MatSort, {static: true}) sort: MatSort;
ngOnInit() {
this.loading = true;
this.dataSource.sort = this.sort;
this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
// let url = './graphql'
const url = environment.graphQLUrl;
const headers = new Headers();
headers.set('Content-Type', 'application/json');
this.http.post(url, this.buildJson(this.id))
.subscribe(response => {
console.log(response.text());
this.updateUserInfo(response.json());
});
this.data.currentUserInfo.subscribe(user => {
this.self = user;
});
}
public updateUserInfo(response: any) {
if (response.data.getUser != null) {
this.profileNotFound = false;
this.userProfile.loggedIn = true;
this.userProfile.userID = response.data.getUser.id;
this.userProfile.username = response.data.getUser.name;
this.userProfile.handle = response.data.getUser.handle;
this.userProfile.points = response.data.getUser.points;
this.userProfile.level = response.data.getUser.level;
this.userProfile.posts = response.data.getUser.posts;
this.rankname = this.levellist.getLevelName(this.userProfile.level);
// tslint:disable-next-line:max-line-length
this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(response.data.getUser.id, this.self);
if (this.self.loggedIn) {
this.profileService.getUserDataBySelfId(this.id, this.self.userID.toString());
} else {
this.profileNotFound = true;
this.profileService.getUserData(this.id);
}
this.profileService.proflile.subscribe(response =>
{
if (response) {
this.userProfile = response;
// tslint:disable-next-line:max-line-length
this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(this.userProfile.userID, this.self);
this.rankname = this.levellist.getLevelName(this.userProfile.level);
} else { this.profileNotFound = true; }
this.loading = false;
});
}
public sendFriendRequest(user: User) {
user.allowedToSendRequest = false;
this.requestService.sendFriendRequest(user);
}
public buildJson(id: string): any {
const body = {query: `query($userId: ID) {
getUser(userId:$userId){
id
handle
name
profilePicture
points
level
friendCount
friends{
id
}
posts{
content
}
}
}`, variables: {
userId: this.id
}};
return body;
}
}

@ -0,0 +1,12 @@
import { TestBed } from '@angular/core/testing';
import { ProfileService } from './profile.service';
describe('ProfileService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: ProfileService = TestBed.get(ProfileService);
expect(service).toBeTruthy();
});
});

@ -0,0 +1,138 @@
import { Injectable } from '@angular/core';
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 { User } from 'src/app/models/user';
import { Observable, Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ProfileService {
public proflile:Subject<any> = new Subject();
constructor(private http: Http) { }
public getUserData(userId: string) {
const headers = new Headers();
headers.set('Content-Type', 'application/json');
//return this.renderProfile(this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId)));
this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId)).subscribe(result => {
//push onto subject
this.proflile.next(this.renderProfile(result.json()));
return this.proflile;
});
}
public getUserDataBySelfId(userId: string, selfId: string) {
const headers = new Headers();
headers.set('Content-Type', 'application/json');
//return this.renderProfile(this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId)));
this.http.post(environment.graphQLUrl, this.buildGetProfileJsonBySelfId(userId, selfId)).subscribe(result => {
//push onto subject
this.proflile.next(this.renderProfile(result.json()));
return this.proflile;
});
}
public buildGetProfileJson(id: string): any {
const body = {query: `query($userId: ID) {
getUser(userId:$userId){
id
handle
name
profilePicture
points
level
friendCount
friends{
id
}
posts{
id,
content,
htmlContent,
upvotes,
downvotes,
author{
name,
handle,
id},
createdAt
}
}
}`, variables: {
userId: id
}};
return body;
}
public buildGetProfileJsonBySelfId(id: string, selfId: string): any {
const body = {query: `query($userId: ID, $selfId: ID!) {
getUser(userId:$userId){
id
handle
name
profilePicture
points
level
friendCount
friends{
id
}
posts{
id,
content,
htmlContent,
upvotes,
downvotes,
userVote(userId: $selfId),
deletable(userId: $selfId)
author{
name,
handle,
id},
createdAt
}
}
}`, variables: {
userId: id,
selfId: selfId
}};
return body;
}
public renderProfile(response: any): User {
console.log(response);
const posts = new Array<Post>();
const profile = new User();
if (response.data.getUser != null) {
profile.userID = response.data.getUser.id;
profile.username = response.data.getUser.name;
profile.handle = response.data.getUser.handle;
profile.points = response.data.getUser.points;
profile.level = response.data.getUser.level;
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;
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));
}
profile.posts = posts;
console.log(profile);
return profile;
}
return null;
}
}
Loading…
Cancel
Save