added posts to profile page
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" -->
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
@ -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