Merge branch 'max_dev' of Software_Engineering_I/greenvironment-frontend into master
Trivernis
5 years ago
committed by
Gitea
commit
1964aae1ea
@ -0,0 +1,28 @@
|
||||
<div id="profile-page">
|
||||
<div id="profilecontainer" *ngIf="!groupNotFound && !loading">
|
||||
<mat-toolbar color="primary" id="toolbar">
|
||||
<mat-toolbar-row>
|
||||
<div class="profile-picture"></div>
|
||||
<span id="username">{{groupProfile.name}}</span>
|
||||
<span id="handle">created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}</span>
|
||||
<button mat-icon-button
|
||||
class="request-button"
|
||||
(click)="joinGroup(groupProfile)"
|
||||
[disabled]="!groupProfile.allowedToJoinGroup">
|
||||
<mat-icon>group_add</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar-row>
|
||||
<mat-toolbar-row>
|
||||
<div id="info-box">
|
||||
<span class="info">{{groupProfile.members.length}} member(s)</span>
|
||||
</div>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
</div>
|
||||
<div id="profilecontainer" *ngIf="groupNotFound">
|
||||
<h1>Group not found :(</h1>
|
||||
</div>
|
||||
<mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
|
||||
</div>
|
||||
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
@import '../../../styles/mixins.sass'
|
||||
@import '../../../styles/vars.sass'
|
||||
|
||||
#profile-page
|
||||
position: fixed
|
||||
width: 100%
|
||||
height: calc(100% - 56px)
|
||||
overflow: scroll
|
||||
|
||||
#profile
|
||||
padding: 2em
|
||||
max-width: 1200px
|
||||
margin: 0 auto
|
||||
|
||||
#profile-card-container
|
||||
margin: 0 auto
|
||||
width: 100%
|
||||
max-width: 690px
|
||||
.icon-box
|
||||
text-align: right
|
||||
width: 100%
|
||||
.request-button
|
||||
margin-top: 0.5em
|
||||
margin-bottom: 0.5em
|
||||
margin-left: auto
|
||||
#toolbar
|
||||
margin-top: 32px
|
||||
.mat-toolbar-row
|
||||
max-height: 40px
|
||||
#info-box
|
||||
font-size: 14px
|
||||
margin-left: calc(100px + 0.5em)
|
||||
.info
|
||||
margin-right: 3em
|
||||
#username
|
||||
margin: 0 0.5em
|
||||
#handle
|
||||
font-size: 14px
|
||||
|
||||
|
||||
.mat-table
|
||||
width: 100%
|
||||
max-width: 690px
|
||||
margin: 0 auto
|
||||
.mat-header-cell
|
||||
padding-right: 0.5em
|
||||
|
||||
$mat-card-header-size: 100px !default
|
||||
.profile-picture
|
||||
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
|
||||
height: $mat-card-header-size
|
||||
width: $mat-card-header-size
|
||||
border-radius: 50%
|
||||
flex-shrink: 0
|
||||
background-size: cover
|
||||
// Makes `<img>` tags behave like `background-size: cover`. Not supported
|
||||
// in IE, but we're using it as a progressive enhancement.
|
||||
object-fit: cover
|
||||
|
||||
|
||||
|
||||
#postlist
|
||||
margin: 0.5em auto
|
||||
padding: 0
|
||||
max-width: 690px
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { GroupComponent } from './group.component';
|
||||
|
||||
describe('GroupComponent', () => {
|
||||
let component: GroupComponent;
|
||||
let fixture: ComponentFixture<GroupComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ GroupComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(GroupComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,64 @@
|
||||
import { Component, OnInit, ViewChild} from '@angular/core';
|
||||
import {Router, NavigationEnd} from '@angular/router';
|
||||
import { User } from 'src/app/models/user';
|
||||
import {MatSort} from '@angular/material/sort';
|
||||
import { RequestService } from 'src/app/services/request/request.service';
|
||||
import { DatasharingService } from '../../services/datasharing.service';
|
||||
import { GroupService } from 'src/app/services/group/group.service';
|
||||
import { Group } from 'src/app/models/group';
|
||||
|
||||
@Component({
|
||||
selector: 'app-profile',
|
||||
templateUrl: './group.component.html',
|
||||
styleUrls: ['./group.component.sass']
|
||||
})
|
||||
|
||||
export class GroupComponent implements OnInit {
|
||||
groupProfile: Group = new Group();
|
||||
self: User;
|
||||
id: string;
|
||||
groupNotFound = false;
|
||||
|
||||
loading = false;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private requestService: RequestService,
|
||||
private data: DatasharingService,
|
||||
private groupService: GroupService) {
|
||||
router.events.forEach((event) => {
|
||||
// check if url changes
|
||||
if (event instanceof NavigationEnd) {
|
||||
const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
|
||||
if (this.id !== possibleID && this.id && this.router.url.includes('group/')) {
|
||||
// reload the group
|
||||
console.log('search for group id: ' + this.router.url.substr(this.router.url.lastIndexOf('/') + 1));
|
||||
this.ngOnInit();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ViewChild(MatSort, {static: true}) sort: MatSort;
|
||||
ngOnInit() {
|
||||
this.loading = true;
|
||||
this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
|
||||
this.data.currentUserInfo.subscribe(user => {
|
||||
this.self = user;
|
||||
});
|
||||
this.groupService.getGroupData(this.id);
|
||||
this.groupService.group.subscribe(response => {
|
||||
if (response) {
|
||||
this.groupProfile = response;
|
||||
// tslint:disable-next-line:max-line-length
|
||||
this.groupProfile.allowedToJoinGroup = this.requestService.isAllowedToJoinGroup(this.groupProfile.id, this.self);
|
||||
} else { this.groupNotFound = true; }
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
public joinGroup(group: Group) {
|
||||
group.allowedToJoinGroup = false;
|
||||
this.requestService.joinGroup(group);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { User } from 'src/app/models/user';
|
||||
|
||||
export class Group {
|
||||
id: number;
|
||||
name: string;
|
||||
handle: string;
|
||||
creator: User = new User();
|
||||
members: User[] = new Array();
|
||||
admins: User[] = new Array();
|
||||
allowedToJoinGroup = false;
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { GroupService } from './group.service';
|
||||
|
||||
describe('GroupService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: GroupService = TestBed.get(GroupService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,75 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Http } from '@angular/http';
|
||||
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 { Group } from 'src/app/models/group';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class GroupService {
|
||||
|
||||
public group: Subject<any> = new Subject();
|
||||
|
||||
constructor(private http: Http) { }
|
||||
|
||||
public getGroupData(groupId: string) {
|
||||
const headers = new Headers();
|
||||
headers.set('Content-Type', 'application/json');
|
||||
this.http.post(environment.graphQLUrl, this.buildGetGroupJson(groupId)).subscribe(result => {
|
||||
// push onto subject
|
||||
this.group.next(this.renderGroup(result.json()));
|
||||
return this.group;
|
||||
});
|
||||
}
|
||||
|
||||
public buildGetGroupJson(id: string): any {
|
||||
const body = {
|
||||
query: `query($groupId: ID!) {
|
||||
getGroup(groupId:$groupId){
|
||||
id
|
||||
name
|
||||
creator{id name handle}
|
||||
admins{id name handle}
|
||||
members{id name handle}
|
||||
}
|
||||
}`, variables: {
|
||||
groupId: id
|
||||
}
|
||||
};
|
||||
return body;
|
||||
}
|
||||
|
||||
public renderGroup(response: any): Group {
|
||||
const group = new Group();
|
||||
const members: User[] = new Array();
|
||||
const admins: User[] = new Array();
|
||||
if (response.data.getGroup != null) {
|
||||
group.id = response.data.getGroup.id;
|
||||
group.name = response.data.getGroup.name;
|
||||
group.creator.userID = response.data.getGroup.creator.id;
|
||||
group.creator.handle = response.data.getGroup.creator.handle;
|
||||
group.creator.username = response.data.getGroup.creator.name;
|
||||
for (const member of response.data.getGroup.members) {
|
||||
const user = new User();
|
||||
user.userID = member.id;
|
||||
user.username = member.name;
|
||||
user.handle = member.handle;
|
||||
members.push(user);
|
||||
}
|
||||
group.members = members;
|
||||
for (const admin of response.data.getGroup.admins) {
|
||||
const user = new User();
|
||||
user.userID = admin.id;
|
||||
user.username = admin.name;
|
||||
user.handle = admin.handle;
|
||||
admins.push(user);
|
||||
}
|
||||
group.admins = admins;
|
||||
return group;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@ -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,145 @@
|
||||
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
|
||||
groupCount
|
||||
joinedAt
|
||||
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
|
||||
groupCount
|
||||
joinedAt
|
||||
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 {
|
||||
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;
|
||||
profile.friendCount = response.data.getUser.friendCount;
|
||||
profile.groupCount = response.data.getUser.groupCount;
|
||||
const temp = new Date(Number(response.data.getUser.joinedAt));
|
||||
const date = temp.toLocaleString('en-GB');
|
||||
profile.joinedAt = date;
|
||||
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 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));
|
||||
}
|
||||
profile.posts = posts;
|
||||
return profile;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue