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