added posts to profile page

master
Max 5 years ago
parent 00c019196f
commit 44cecfb74c

@ -1,124 +1,85 @@
<div id="profile-page">
<mat-toolbar color="primary" id="toolbar">
<mat-toolbar-row>
<div class="profile-picture"></div>
<span id="username">{{userProfile.username}}</span>
<span id="handle">@{{userProfile.handle}}</span>
<button mat-icon-button
class="request-button"
(click)="sendFriendRequest(userProfile)"
[disabled]="!userProfile.allowedToSendRequest">
<mat-icon>person_add</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row>
<span id="info">{{rankname}} ({{userProfile.points}} points)</span>
</mat-toolbar-row>
</mat-toolbar>
<feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>
<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.
Collect 100 points to level up! The levels are called:
</p>
<table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
<ng-container matColumnDef="level">
<th mat-header-cell *matHeaderCellDef> level </th>
<td mat-cell *matCellDef="let level"> {{level.level}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> level name </th>
<td mat-cell *matCellDef="let level"> {{level.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
</table>
<div id="profilecontainer" *ngIf="!profileNotFound && !loading">
<mat-toolbar color="primary" id="toolbar">
<mat-toolbar-row>
<div class="profile-picture"></div>
<span id="username">{{userProfile.username}}</span>
<span id="handle">@{{userProfile.handle}}</span>
<button mat-icon-button
class="request-button"
(click)="sendFriendRequest(userProfile)"
[disabled]="!userProfile.allowedToSendRequest">
<mat-icon>person_add</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row>
<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">
<br>
<h1>How to level up?</h1>
<p>There is an always growing list of things you can do,
to support your environment
and earn points to level up at the same time.
You can get a different amount of points
for differnet actions you can see in the list below:
</p>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<h1>What does the level mean?</h1>
<p>There are different levels you can reach through green behaviour.
Collect 100 points to level up! The levels are called:
</p>
<table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
<ng-container matColumnDef="level">
<th mat-header-cell *matHeaderCellDef> level </th>
<td mat-cell *matCellDef="let level"> {{level.level}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> level name </th>
<td mat-cell *matCellDef="let level"> {{level.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
</table>
<br>
<h1>How to level up?</h1>
<p>There is an always growing list of things you can do,
to support your environment
and earn points to level up at the same time.
You can get a different amount of points
for differnet actions you can see in the list below:
</p>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="points">
<th mat-header-cell *matHeaderCellDef mat-sort-header> points </th>
<td mat-cell *matCellDef="let action"> {{action.points}} </td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="points">
<th mat-header-cell *matHeaderCellDef mat-sort-header> points </th>
<td mat-cell *matCellDef="let action"> {{action.points}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> action </th>
<td mat-cell *matCellDef="let action"> {{action.name}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> action </th>
<td mat-cell *matCellDef="let action"> {{action.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!--<table style="width:100%">
<tr>
<th>points </th>
<th>action</th>
</tr>
<tr *ngFor= "let action of actionlist.actions">
<td>{{action.points}}</td>
<td>{{action.name}}</td>
</tr>
</table>-->
</div>
<div id="profilecontainer" *ngIf="profileNotFound">
<h1>Profile not found :(</h1>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!--<table style="width:100%">
<tr>
<th>points </th>
<th>action</th>
</tr>
<tr *ngFor= "let action of actionlist.actions">
<td>{{action.points}}</td>
<td>{{action.name}}</td>
</tr>
</table>-->
</div>
</div>
<div id="profilecontainer" *ngIf="profileNotFound">
<h1>Profile not found :(</h1>
</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
padding: 0
flex: 1
overflow: hidden
word-wrap: break-word
#postlist
margin: 0.5em auto
padding: 0
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);
this.data.currentUserInfo.subscribe(user => {
this.self = user;
});
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