Merge branch 'max_dev' of Software_Engineering_I/greenvironment-frontend into master

master
Trivernis 5 years ago committed by Gitea
commit a3e5f6dbcc

@ -31,7 +31,7 @@ import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/cha
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTableModule} from '@angular/material/table'; import {MatTableModule} from '@angular/material/table';
import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import {UserlistComponent} from './components/userlist/userlist.component';
import { MatSliderModule } from '@angular/material/slider'; import { MatSliderModule } from '@angular/material/slider';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
@ -108,7 +108,8 @@ const appRoutes: Routes = [
SearchComponent, SearchComponent,
DialogCreateGroupComponent, DialogCreateGroupComponent,
GroupComponent, GroupComponent,
DialogCreateEventComponent DialogCreateEventComponent,
UserlistComponent,
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

@ -103,18 +103,7 @@
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="list"> <div class="list">
<mat-card class="card" *ngFor="let user of groupProfile.members" <user-list [userList]="groupProfile.members"></user-list>
[class.selected]="user === selectedUser"
tabindex="0">
<mat-card-header>
<div mat-card-avatar class="profile-picture" (click)="showUserProfile(user)"></div>
<mat-card-title class="pointer" (click)="showUserProfile(user)">{{user.username}}</mat-card-title>
<mat-card-subtitle class="pointer" (click)="showUserProfile(user)">{{user.handle}}</mat-card-subtitle>
<div class="button-box">
<button mat-icon-button class="request-button" (click)="sendFriendRequest(user)" [disabled]="!user.allowedToSendRequest"><mat-icon>person_add</mat-icon></button>
</div>
</mat-card-header>
</mat-card>
</div> </div>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>

@ -18,20 +18,7 @@
Users Users
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="list"> <user-list [userList]="foundUsers"></user-list>
<mat-card class="card" *ngFor="let user of foundUsers"
[class.selected]="user === selectedUser"
tabindex="0">
<mat-card-header>
<div mat-card-avatar class="profile-picture" (click)="showUserProfile(user)"></div>
<mat-card-title class="pointer" (click)="showUserProfile(user)">{{user.username}}</mat-card-title>
<mat-card-subtitle class="pointer" (click)="showUserProfile(user)">{{user.handle}}</mat-card-subtitle>
<div class="icon-box">
<button mat-icon-button class="request-button" (click)="sendFriendRequest(user)" [disabled]="!user.allowedToSendRequest"><mat-icon>person_add</mat-icon></button>
</div>
</mat-card-header>
</mat-card>
</div>
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel *ngIf="foundGroups.length > 0" [expanded]="foundUsers.length < 1"> <mat-expansion-panel *ngIf="foundGroups.length > 0" [expanded]="foundUsers.length < 1">
<mat-expansion-panel-header> <mat-expansion-panel-header>

@ -8,7 +8,9 @@
tabindex="0" tabindex="0"
matRipple> matRipple>
<mat-card-header> <mat-card-header>
<div mat-card-avatar class="profile-picture"></div> <div mat-card-avatar>
<img class="profile-picture" [src]="friend.profilePicture"/>
</div>
<mat-card-title>{{friend.name}}</mat-card-title> <mat-card-title>{{friend.name}}</mat-card-title>
<mat-card-subtitle>{{friend.rankname}}</mat-card-subtitle> <mat-card-subtitle>{{friend.rankname}}</mat-card-subtitle>
</mat-card-header> </mat-card-header>

@ -10,12 +10,22 @@
width: 100% width: 100%
margin-top: 0.5em margin-top: 0.5em
cursor: pointer cursor: pointer
::ng-deep .mat-card-header-text
margin: 0 24px
.mat-card-subtitle .mat-card-subtitle
margin: 0 margin: 0
$mat-card-header-size: 52px !default
.profile-picture .profile-picture
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg) height: $mat-card-header-size
background-size: cover width: $mat-card-header-size
border-radius: 50%
flex-shrink: 0
background-size: cover
transition-duration: 0.5s
z-index: 10
object-fit: cover
#button-box #button-box
text-align: right text-align: right

@ -0,0 +1,12 @@
<mat-card class="card" *ngFor = "let user of userList" [class.selected]="user === selectedUser" tabindex="0">
<mat-card-header>
<div mat-card-avatar>
<img class="profile-picture" [src]="user.profilePicture"/>
</div>
<mat-card-title class="pointer" (click)="showUserProfile(user)">{{user.username}}</mat-card-title>
<mat-card-subtitle class="pointer" (click)="showUserProfile(user)">{{user.handle}}</mat-card-subtitle>
<div class="icon-box">
<button mat-icon-button class="request-button" (click)="sendFriendRequest(user)" [disabled]="!user.allowedToSendRequest"><mat-icon>person_add</mat-icon></button>
</div>
</mat-card-header>
</mat-card>

@ -0,0 +1,40 @@
@import '../../../styles/mixins.sass'
@import '../../../styles/vars.sass'
.card
box-sizing: border-box
width: 100%
margin-top: 0.5em
outline: none
user-select: none
::ng-deep .mat-card-header-text
width: 1000%
margin: 0
margin-left: 24px
.mat-card-subtitle
margin: 0
word-break: break-all
.mat-card-title
margin: 0
word-break: break-all
.request-button
margin-top: 0.5em
margin-bottom: 0.5em
.pointer:hover
cursor: pointer
.icon-box
text-align: right
width: 100%
$mat-card-header-size: 54px !default
.profile-picture
height: $mat-card-header-size
width: $mat-card-header-size
border-radius: 50%
flex-shrink: 0
background-size: cover
transition-duration: 0.5s
z-index: 10
object-fit: cover

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UserlistComponent } from './userlist.component';
describe('UserlistComponent', () => {
let component: UserlistComponent;
let fixture: ComponentFixture<UserlistComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ UserlistComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserlistComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,29 @@
import { Component, OnInit, Input } from '@angular/core';
import { User } from 'src/app/models/user';
import { RequestService } from 'src/app/services/request/request.service';
import { Router } from '@angular/router';
@Component({
selector: 'user-list',
templateUrl: './userlist.component.html',
styleUrls: ['./userlist.component.sass']
})
export class UserlistComponent implements OnInit {
@Input() userList: Array<User>;
selectedUser: User;
constructor(private requestService: RequestService, private router: Router) { }
ngOnInit() {
}
public sendFriendRequest(user: User) {
user.allowedToSendRequest = false;
this.requestService.sendFriendRequest(user);
}
public showUserProfile(user: User) {
this.router.navigate(['profile/' + user.userID]);
}
}

@ -5,10 +5,12 @@ export class FriendInfo {
id: number; id: number;
name: string; name: string;
rankname: string; rankname: string;
profilePicture: string;
constructor(pId: number, pName: string, pLevel: number) { constructor(pId: number, pName: string, pLevel: number, pic: string) {
this.id = pId; this.id = pId;
this.name = pName; this.name = pName;
this.rankname = this.levellist.getLevelName(pLevel); this.rankname = this.levellist.getLevelName(pLevel);
this.profilePicture = pic;
} }
} }

@ -3,6 +3,7 @@ import { FriendInfo } from 'src/app/models/friendinfo';
import { GroupInfo } from 'src/app/models/groupinfo'; import { GroupInfo } from 'src/app/models/groupinfo';
import { Post } from 'src/app/models/post'; import { Post } from 'src/app/models/post';
import {IUser} from './interfaces/IUser'; import {IUser} from './interfaces/IUser';
import { environment } from 'src/environments/environment';
export class User { export class User {
loggedIn = false; loggedIn = false;
@ -29,13 +30,14 @@ export class User {
be false to avoid multiple invitations*/ be false to avoid multiple invitations*/
public assignFromResponse(userDataResponse: IUser) { public assignFromResponse(userDataResponse: IUser) {
this.loggedIn = true;
this.userID = userDataResponse.id; this.userID = userDataResponse.id;
this.username = userDataResponse.name; this.username = userDataResponse.name;
this.handle = userDataResponse.handle; this.handle = userDataResponse.handle;
this.email = userDataResponse.email; this.email = userDataResponse.email;
this.points = userDataResponse.points; this.points = userDataResponse.points;
this.level = userDataResponse.level; this.level = userDataResponse.level;
this.profilePicture = userDataResponse.profilePicture; this.profilePicture = this.buildProfilePictureUrl(userDataResponse.profilePicture);
this.joinedAt = userDataResponse.joinedAt; this.joinedAt = userDataResponse.joinedAt;
this.friendCount = userDataResponse.friendCount; this.friendCount = userDataResponse.friendCount;
this.groupCount = userDataResponse.groupCount; this.groupCount = userDataResponse.groupCount;
@ -45,7 +47,11 @@ export class User {
console.error(err); console.error(err);
} }
this.friends = userDataResponse.friends this.friends = userDataResponse.friends
.map(friend => new FriendInfo(friend.id, friend.name, friend.level)); .map(friend => new FriendInfo(
friend.id, friend.name,
friend.level,
this.buildProfilePictureUrl(friend.profilePicture)
));
this.groups = userDataResponse.groups this.groups = userDataResponse.groups
.map(group => new GroupInfo(group.id, group.name)); .map(group => new GroupInfo(group.id, group.name));
this.chatIDs = userDataResponse.chats.map(chat => chat.id); this.chatIDs = userDataResponse.chats.map(chat => chat.id);
@ -54,4 +60,12 @@ export class User {
this.receivedRequests = userDataResponse.receivedRequests this.receivedRequests = userDataResponse.receivedRequests
.map(request => new FriendRequest(request.id, request.sender.id, request.sender.handle, request.sender.name)); .map(request => new FriendRequest(request.id, request.sender.id, request.sender.handle, request.sender.name));
} }
buildProfilePictureUrl(path: string): string {
if (path) {
return environment.greenvironmentUrl + path;
} else {
return 'assets/images/account_circle-24px.svg';
}
}
} }

@ -105,14 +105,16 @@ export class ChatService {
let memberID: number; let memberID: number;
let memberName: string; let memberName: string;
let memberLevel: number; let memberLevel: number;
let profilePicture: string;
for (const member of chat.members) { for (const member of chat.members) {
if (member.id !== this.ownID) { if (member.id !== this.ownID) {
memberID = member.id; memberID = member.id;
memberName = member.name; memberName = member.name;
memberLevel = member.level; memberLevel = member.level;
profilePicture = member.profilePicture;
} }
} }
chatPartners.push(new FriendInfo(memberID, memberName, memberLevel)); chatPartners.push(new FriendInfo(memberID, memberName, memberLevel, profilePicture));
} }
return chatPartners; return chatPartners;

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Http } from '@angular/http'; import { HttpClient } from '@angular/common/http';
import { Post } from 'src/app/models/post'; import { Post } from 'src/app/models/post';
import { Author } from 'src/app/models/author'; import { Author } from 'src/app/models/author';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
@ -21,7 +21,7 @@ export class FeedService {
private mostLikedOffset = 0; private mostLikedOffset = 0;
private newOffset = 0; private newOffset = 0;
constructor(private http: Http) { } constructor(private http: HttpClient) { }
public createPost(pContent: String) { public createPost(pContent: String) {
const headers = new Headers(); const headers = new Headers();
@ -53,7 +53,7 @@ export class FeedService {
}}; }};
return this.http.post(environment.graphQLUrl, body).subscribe(response => { return this.http.post(environment.graphQLUrl, body).subscribe(response => {
const updatedposts = this.newPosts.getValue(); const updatedposts = this.newPosts.getValue();
updatedposts.unshift(this.renderPost(response.json())); updatedposts.unshift(this.renderPost(response));
this.newPosts.next(updatedposts); this.newPosts.next(updatedposts);
this.setPost('NEW'); this.setPost('NEW');
}); });
@ -90,7 +90,7 @@ export class FeedService {
}}; }};
return this.http.post(environment.graphQLUrl, body).subscribe(response => { return this.http.post(environment.graphQLUrl, body).subscribe(response => {
const updatedposts = this.newPosts.getValue(); const updatedposts = this.newPosts.getValue();
updatedposts.unshift(this.renderPost(response.json())); updatedposts.unshift(this.renderPost(response));
this.newPosts.next(updatedposts); this.newPosts.next(updatedposts);
this.setPost('NEW'); this.setPost('NEW');
}); });
@ -147,9 +147,9 @@ export class FeedService {
this.http.post(environment.graphQLUrl, this.buildJson(sort, 0)) this.http.post(environment.graphQLUrl, this.buildJson(sort, 0))
.subscribe(response => { .subscribe(response => {
if (sort === 'NEW') { if (sort === 'NEW') {
this.newPosts.next(this.renderAllPosts(response.json())); this.newPosts.next(this.renderAllPosts(response));
} else if (sort === 'TOP') { } else if (sort === 'TOP') {
this.mostLikedPosts.next(this.renderAllPosts(response.json())); this.mostLikedPosts.next(this.renderAllPosts(response));
} }
this.setPost(sort); this.setPost(sort);
}); });
@ -164,8 +164,8 @@ export class FeedService {
this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.newOffset)) this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.newOffset))
.subscribe(response => { .subscribe(response => {
let updatedposts = this.newPosts.getValue(); let updatedposts = this.newPosts.getValue();
updatedposts = updatedposts.concat(this.renderAllPosts(response.json())); updatedposts = updatedposts.concat(this.renderAllPosts(response));
if (this.renderAllPosts(response.json()).length < 1) { if (this.renderAllPosts(response).length < 1) {
this.newPostsAvailable.next(false); this.newPostsAvailable.next(false);
} }
this.newPosts.next(updatedposts); this.newPosts.next(updatedposts);
@ -178,8 +178,8 @@ export class FeedService {
this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.mostLikedOffset)) this.http.post(environment.graphQLUrl, this.buildJson(this.activePostList, this.mostLikedOffset))
.subscribe(response => { .subscribe(response => {
let updatedposts = this.mostLikedPosts.getValue(); let updatedposts = this.mostLikedPosts.getValue();
updatedposts = updatedposts.concat(this.renderAllPosts(response.json())); updatedposts = updatedposts.concat(this.renderAllPosts(response));
if (this.renderAllPosts(response.json()).length < 1) { if (this.renderAllPosts(response).length < 1) {
this.topPostsAvailable.next(false); this.topPostsAvailable.next(false);
} }
this.mostLikedPosts.next(updatedposts); this.mostLikedPosts.next(updatedposts);

@ -35,7 +35,7 @@ export class GroupService {
joined joined
creator{id name handle} creator{id name handle}
admins{id name handle} admins{id name handle}
members{id name handle} members{id name handle profilePicture}
events{id name dueDate joined} events{id name dueDate joined}
} }
}`, variables: { }`, variables: {
@ -60,6 +60,7 @@ export class GroupService {
user.userID = member.id; user.userID = member.id;
user.username = member.name; user.username = member.name;
user.handle = member.handle; user.handle = member.handle;
user.profilePicture = user.buildProfilePictureUrl(member.profilePicture);
group.members.push(user); group.members.push(user);
} }
for (const admin of response.data.getGroup.admins) { for (const admin of response.data.getGroup.admins) {

@ -27,7 +27,8 @@ const graphqlQuery = `mutation($email: String!, $pwHash: String!) {
friends { friends {
id, id,
name, name,
level level,
profilePicture
}, },
groups { groups {
id, id,

@ -49,7 +49,7 @@ export class RegisterService {
user.points = response.data.register.points; user.points = response.data.register.points;
user.level = response.data.register.level; user.level = response.data.register.level;
for (const friend of response.data.register.friends) { for (const friend of response.data.register.friends) {
user.friends.push(new FriendInfo(friend.id, friend.name, friend.level)); user.friends.push(new FriendInfo(friend.id, friend.name, friend.level, friend.profilePicture));
} }
// user.groupIDs = response.data.register.groups; // user.groupIDs = response.data.register.groups;
user.chatIDs = response.data.register.chats; user.chatIDs = response.data.register.chats;
@ -84,7 +84,8 @@ export class RegisterService {
friends { friends {
id, id,
name, name,
level level,
profilePicture
}, },
groups{id}, groups{id},
chats{id}, chats{id},

@ -71,7 +71,7 @@ export class SearchService extends BaseService {
const users = new Array<User>(); const users = new Array<User>();
for (const foundUser of response.data.search.users) { for (const foundUser of response.data.search.users) {
const user = new User(); const user = new User();
user.profilePicture = foundUser.profilePicture; user.profilePicture = user.buildProfilePictureUrl(foundUser.profilePicture);
user.username = foundUser.name; user.username = foundUser.name;
user.userID = foundUser.id; user.userID = foundUser.id;
user.handle = foundUser.handle; user.handle = foundUser.handle;

@ -47,7 +47,7 @@ export class SelfService {
user.points = response.data.getSelf.points; user.points = response.data.getSelf.points;
user.level = response.data.getSelf.level; user.level = response.data.getSelf.level;
for (const friend of response.data.getSelf.friends) { for (const friend of response.data.getSelf.friends) {
user.friends.push(new FriendInfo(friend.id, friend.name, friend.level)); user.friends.push(new FriendInfo(friend.id, friend.name, friend.level, friend.profilePicture));
} }
for (const group of response.data.getSelf.groups) { for (const group of response.data.getSelf.groups) {
user.groups.push(new GroupInfo(group.id, group.name)); user.groups.push(new GroupInfo(group.id, group.name));
@ -79,7 +79,7 @@ export class SelfService {
user.email = 'r@r.com'; user.email = 'r@r.com';
user.points = 100; user.points = 100;
user.level = 3; user.level = 3;
user.friends.push(new FriendInfo(1, 'Freund77', 4)); user.friends.push(new FriendInfo(1, 'Freund77', 4, 'lalala'));
friendRequest = new FriendRequest(); friendRequest = new FriendRequest();
friendRequest.id = 10; friendRequest.id = 10;
@ -105,7 +105,8 @@ export class SelfService {
friends { friends {
id, id,
name, name,
level level,
profilePicture,
}, },
groups { groups {
id, id,

Loading…
Cancel
Save