diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a94ae7e..8b9d37d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -45,6 +45,8 @@ import { OverlayModule} from '@angular/cdk/overlay'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {MatMenuModule} from '@angular/material/menu'; import {MatRippleModule} from '@angular/material/core'; +import {MatBadgeModule} from '@angular/material/badge'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import { FlexLayoutModule } from '@angular/flex-layout'; import { MainNavigationComponent } from './components/main-navigation/main-navigation.component'; @@ -122,7 +124,9 @@ const appRoutes: Routes = [ MatMenuModule, MatRippleModule, MatTableModule, - MatSortModule + MatSortModule, + MatBadgeModule, + MatProgressSpinnerModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 7e2b5fc..8ce9d5b 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -1,8 +1,3 @@ -
@@ -36,10 +31,6 @@
-
@@ -47,6 +38,7 @@
+
\ No newline at end of file diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts index 1e5cfef..bd35acb 100644 --- a/src/app/components/feed/feed.component.ts +++ b/src/app/components/feed/feed.component.ts @@ -11,6 +11,7 @@ import { User } from 'src/app/models/user'; styleUrls: ['./feed.component.sass'] }) export class FeedComponent implements OnInit { + loading = true; checked: boolean; // if the "I protected the environment."-box is checked empty: boolean; // points value of the green action @@ -38,6 +39,7 @@ export class FeedComponent implements OnInit { if (this.loggedIn) { this.userId = user.userID; this.feedService.getAllPostsRawByUserId(this.userId).subscribe(response => { + this.loading = false; this.feedNew = this.feedService.renderAllPosts(response.json()); this.parentSelectedPostList = this.feedNew; this.feedMostLiked = this.feedNew; @@ -45,6 +47,7 @@ export class FeedComponent implements OnInit { }); } else { this.feedService.getAllPostsRaw().subscribe(response => { + this.loading = false; this.feedNew = this.feedService.renderAllPosts(response.json()); this.parentSelectedPostList = this.feedNew; this.feedMostLiked = this.feedNew; diff --git a/src/app/components/main-navigation/main-navigation.component.html b/src/app/components/main-navigation/main-navigation.component.html index e8a57c6..7e6bd26 100644 --- a/src/app/components/main-navigation/main-navigation.component.html +++ b/src/app/components/main-navigation/main-navigation.component.html @@ -57,21 +57,23 @@ - - - request + {{request.senderUsername}} +   @{{request.senderHandle}} diff --git a/src/app/components/main-navigation/main-navigation.component.sass b/src/app/components/main-navigation/main-navigation.component.sass index 8a7d485..7338cbb 100644 --- a/src/app/components/main-navigation/main-navigation.component.sass +++ b/src/app/components/main-navigation/main-navigation.component.sass @@ -26,7 +26,6 @@ .mat-tab-link height: 56px - #link-box padding: 0.5em diff --git a/src/app/components/main-navigation/main-navigation.component.ts b/src/app/components/main-navigation/main-navigation.component.ts index dc6b72d..ef35efb 100644 --- a/src/app/components/main-navigation/main-navigation.component.ts +++ b/src/app/components/main-navigation/main-navigation.component.ts @@ -4,6 +4,7 @@ import { Observable } from 'rxjs'; import { map, shareReplay } from 'rxjs/operators'; import { DatasharingService } from '../../services/datasharing.service'; import { SelfService } from '../../services/selfservice/self.service'; +import { RequestService } from '../../services/request/request.service'; import { environment } from 'src/environments/environment'; import { Levellist } from 'src/app/models/levellist'; import { Http } from '@angular/http'; @@ -22,6 +23,7 @@ export class MainNavigationComponent implements OnInit { public overlayContainer: OverlayContainer, private data: DatasharingService, private selfservice: SelfService, + private requestservice: RequestService, private breakpointObserver: BreakpointObserver, private http: Http, private router: Router ) { @@ -102,11 +104,9 @@ export class MainNavigationComponent implements OnInit { const headers = new Headers(); headers.set('Content-Type', 'application/json'); - const body = {query: `mutation { logout }`}; - this.http.post(url, body).subscribe(response => { console.log(response.text()); }); this.loggedIn = false; @@ -115,4 +115,34 @@ export class MainNavigationComponent implements OnInit { this.data.changeUserInfo(user); this.router.navigate(['login']); } + + acceptRequest(id: number) { + for (let i = 0; i < this.user.receivedRequests.length; i++) { + if (this.user.receivedRequests[i].senderUserID === id) { + this.user.receivedRequests.splice(i, 1); + return; + } + } + const headers = new Headers(); + headers.set('Content-Type', 'application/json'); + this.http.post(environment.graphQLUrl, this.requestservice.buildJsonAcceptRequest(id)) + .subscribe(response => { + console.log(response); + }); + } + + denyRequest(id: number) { + for (let i = 0; i < this.user.receivedRequests.length; i++) { + if (this.user.receivedRequests[i].senderUserID === id) { + this.user.receivedRequests.splice(i, 1); + return; + } + } + const headers = new Headers(); + headers.set('Content-Type', 'application/json'); + this.http.post(environment.graphQLUrl, this.requestservice.buildJsonDenyRequest(id)) + .subscribe(response => { + console.log(response); + }); + } } diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts index a9006cb..1da58c8 100644 --- a/src/app/components/profile/profile.component.ts +++ b/src/app/components/profile/profile.component.ts @@ -55,7 +55,6 @@ export class ProfileComponent implements OnInit { this.user.points = response.data.getUser.points; this.user.level = response.data.getUser.level; this.rankname = this.levellist.getLevelName(this.user.level); - this.user.friendIDs = response.data.getUser.friends; } else { this.profileNotFound = true; } diff --git a/src/app/components/search/search.component.html b/src/app/components/search/search.component.html index c9dc522..17f7e62 100644 --- a/src/app/components/search/search.component.html +++ b/src/app/components/search/search.component.html @@ -32,9 +32,11 @@ {{user.username}} {{user.handle}}
- +
+ + \ No newline at end of file diff --git a/src/app/components/search/search.component.sass b/src/app/components/search/search.component.sass index 8b866e0..2989fc4 100644 --- a/src/app/components/search/search.component.sass +++ b/src/app/components/search/search.component.sass @@ -37,4 +37,4 @@ .icon-box text-align: right - width: 100% \ No newline at end of file + width: 100% diff --git a/src/app/components/search/search.component.ts b/src/app/components/search/search.component.ts index 641916e..4cd8ea4 100644 --- a/src/app/components/search/search.component.ts +++ b/src/app/components/search/search.component.ts @@ -5,6 +5,7 @@ import {Headers, Http} from '@angular/http'; import { User } from 'src/app/models/user'; import {environment} from 'src/environments/environment'; import { Router } from '@angular/router'; +import { DatasharingService } from '../../services/datasharing.service'; @Component({ selector: 'home-search', @@ -12,16 +13,22 @@ import { Router } from '@angular/router'; styleUrls: ['./search.component.sass'] }) export class SearchComponent implements OnInit { + loading = false; searchValue = ' '; category = 'user'; + user: User; foundUsers: Array; constructor( private searchService: SearchService, private requestService: RequestService, private http: Http, - private router: Router) { } + private router: Router, + private data: DatasharingService) { } ngOnInit() { + this.data.currentUserInfo.subscribe(user => { + this.user = user; + }); } changeCategory(value: string) { @@ -34,6 +41,7 @@ export class SearchComponent implements OnInit { this.searchValue = searchWord; if (searchWord) { // if not null or empty if (this.category === 'user') { + this.loading = true; this.findUser(searchWord); } else if (this.category === 'groupe') { // this.findUserByHandle(searchWord); @@ -47,9 +55,28 @@ export class SearchComponent implements OnInit { headers.set('Content-Type', 'application/json'); this.http.post(environment.graphQLUrl, this.searchService.buildJsonUser(name)) .subscribe(response => { - console.log('response received'); - console.log(response); this.foundUsers = this.searchService.renderUsers(response.json()); + for (const foundUser of this.foundUsers) { + if (!this.user.loggedIn) {foundUser.allowedToSendRequest = false; } else { + for (const receiverID of this.user.sentRequestUserIDs) { + if (foundUser.userID === receiverID || + foundUser.userID === this.user.userID) { + foundUser.allowedToSendRequest = false; + } + } + for (const friend of this.user.friends) { + if (foundUser.userID === friend.id) { + foundUser.allowedToSendRequest = false; + } + } + for (const sender of this.user.receivedRequests) { + if (foundUser.userID === sender.senderUserID) { + foundUser.allowedToSendRequest = false; + } + } + } + } + this.loading = false; }); } @@ -58,12 +85,11 @@ export class SearchComponent implements OnInit { } public sendFriendRequest(user: User) { + user.allowedToSendRequest = false; const headers = new Headers(); headers.set('Content-Type', 'application/json'); this.http.post(environment.graphQLUrl, this.requestService.buildJsonRequest(user.userID, 'FRIENDREQUEST')) .subscribe(response => { - console.log('response received'); - console.log(response); }); } } diff --git a/src/app/components/social/friends/friends.component.html b/src/app/components/social/friends/friends.component.html index 26747ee..830fbfc 100644 --- a/src/app/components/social/friends/friends.component.html +++ b/src/app/components/social/friends/friends.component.html @@ -1,8 +1,3 @@ - Friends
@@ -10,12 +5,7 @@
- - diff --git a/src/app/components/social/friends/friends.component.ts b/src/app/components/social/friends/friends.component.ts index 8c73890..99368df 100644 --- a/src/app/components/social/friends/friends.component.ts +++ b/src/app/components/social/friends/friends.component.ts @@ -4,6 +4,7 @@ import { Http } from '@angular/http'; import { FriendInfo } from 'src/app/models/friendinfo'; import { Router } from '@angular/router'; import { environment } from 'src/environments/environment'; +import { User } from 'src/app/models/user'; @Component({ selector: 'social-friends', @@ -11,44 +12,12 @@ import { environment } from 'src/environments/environment'; styleUrls: ['./friends.component.sass'] }) export class FriendsComponent implements OnInit { - - friendIDs: number[] = [29, 27, 30, 31]; - friends = new Array(); // = ["Friend 1", "Friend 2", "Friend 3", "Friend 4", "Friend 5", "Friend 6"] - + user: User; constructor(private data: DatasharingService, private http: Http, private router: Router) { } ngOnInit() { - // this.data.currentUserInfo.subscribe(user => { - // this.friendIDs = user.friendIDs}) - this.getFriendsNames(); - } - - getFriendsNames() { - for (const id of this.friendIDs) { - const url = environment.graphQLUrl; - const headers = new Headers(); - headers.set('Content-Type', 'application/json'); - - this.http.post(url, this.buildJson(id)) - .subscribe(response => {this.readOutFriendsNames(id, response.json()); }); - } - } - - readOutFriendsNames(pId: number, pResponse: any) { - this.friends.push(new FriendInfo(pId, pResponse.data.getUser.name, pResponse.data.getUser.level )); - } - - buildJson(pId: number): any { - const body = {query: `query($userId: ID) { - getUser(userId:$userId) { - name - level - } - }`, variables: { - userId: pId - }}; - - return body; + this.data.currentUserInfo.subscribe(user => { + this.user = user; }); } public showFriendProfile(pFriend: FriendInfo) { diff --git a/src/app/models/friendRequest.ts b/src/app/models/friendRequest.ts new file mode 100644 index 0000000..4d8e0c9 --- /dev/null +++ b/src/app/models/friendRequest.ts @@ -0,0 +1,8 @@ +import { User } from 'src/app/models/user'; + +export class FriendRequest { + id: number; + senderUserID: number; + senderHandle: string; + senderUsername: string; + } diff --git a/src/app/models/user.ts b/src/app/models/user.ts index 4453391..2c09b9c 100644 --- a/src/app/models/user.ts +++ b/src/app/models/user.ts @@ -1,5 +1,8 @@ +import { FriendRequest } from 'src/app/models/friendRequest'; +import { FriendInfo } from 'src/app/models/friendinfo'; + export class User { - loggedIn: boolean; + loggedIn = false; userID: number; username: string; handle: string; @@ -8,9 +11,11 @@ export class User { level: number; profilePicture: string; - friendIDs: number[]; + friends: FriendInfo[] = new Array(); groupIDs: number[]; chatIDs: number[]; - - requestIDs: number[]; + receivedRequests: FriendRequest[] = new Array(); + sentRequestUserIDs: number[] = new Array(); // IDs of users that already received requests of the logged in user + allowedToSendRequest = true; /* if a user already received a request this should + be false to avoid multiple invitations*/ } diff --git a/src/app/services/datasharing.service.ts b/src/app/services/datasharing.service.ts index 8798f16..bc0d047 100644 --- a/src/app/services/datasharing.service.ts +++ b/src/app/services/datasharing.service.ts @@ -15,6 +15,7 @@ export class DatasharingService { constructor() { } changeUserInfo(pUserInfo: User) { + console.log('DatasharingService: user info updated'); this.userInfoSource.next(pUserInfo); } diff --git a/src/app/services/login/login.service.ts b/src/app/services/login/login.service.ts index 11ba72b..1b02aff 100644 --- a/src/app/services/login/login.service.ts +++ b/src/app/services/login/login.service.ts @@ -1,10 +1,12 @@ import {Injectable} from '@angular/core'; -import {Headers, Http} from '@angular/http'; +import {Headers, Http, Request} from '@angular/http'; import {Login} from '../../models/login'; import {User} from 'src/app/models/user'; import {DatasharingService} from '../datasharing.service'; import {Router} from '@angular/router'; import {environment} from 'src/environments/environment'; +import { FriendRequest } from 'src/app/models/friendRequest'; +import { FriendInfo } from 'src/app/models/friendinfo'; @Injectable({ providedIn: 'root' @@ -35,6 +37,7 @@ export class LoginService { public updateUserInfo(response: any) { const user: User = new User(); + let friendRequest: FriendRequest = new FriendRequest(); user.loggedIn = true; user.userID = response.data.login.id; user.username = response.data.login.name; @@ -42,13 +45,24 @@ export class LoginService { user.email = response.data.login.email; user.points = response.data.login.points; user.level = response.data.login.level; - user.friendIDs = response.data.login.friends; + for (const friend of response.data.login.friends) { + user.friends.push(new FriendInfo(friend.id, friend.name, friend.level)); + } user.groupIDs = response.data.login.groups; user.chatIDs = response.data.login.chats; - user.requestIDs = response.data.login.requests; - + for (const request of response.data.login.sentRequests) { + user.sentRequestUserIDs.push(request.receiver.id); + } + for (const request of response.data.login.receivedRequests) { + friendRequest = new FriendRequest(); + friendRequest.id = request.id; + friendRequest.senderUserID = request.sender.id; + friendRequest.senderUsername = request.sender.name; + friendRequest.senderHandle = request.sender.handle; + user.receivedRequests.push(friendRequest); + } + console.log(user.friends); this.data.changeUserInfo(user); - } public buildJson(login: Login): any { @@ -61,8 +75,12 @@ export class LoginService { handle, points, level, + receivedRequests{id, sender{name, handle, id}}, + sentRequests{receiver{id}}, friends { - id + id, + name, + level }, groups { id diff --git a/src/app/services/register/register.service.ts b/src/app/services/register/register.service.ts index 0e2ef11..789cea6 100644 --- a/src/app/services/register/register.service.ts +++ b/src/app/services/register/register.service.ts @@ -5,6 +5,8 @@ import {Router} from '@angular/router'; import { DatasharingService } from '../datasharing.service'; import { User } from 'src/app/models/user'; import { environment } from 'src/environments/environment'; +import { FriendRequest } from 'src/app/models/friendRequest'; +import { FriendInfo } from 'src/app/models/friendinfo'; @Injectable({ providedIn: 'root' @@ -38,6 +40,7 @@ export class RegisterService { public updateUserInfo(response: any) { const user: User = new User(); + let friendRequest: FriendRequest = new FriendRequest(); user.loggedIn = true; user.userID = response.data.register.id; user.username = response.data.register.name; @@ -45,11 +48,22 @@ export class RegisterService { user.email = response.data.register.email; user.points = response.data.register.points; user.level = response.data.register.level; - user.friendIDs = response.data.register.friends; + for (const friend of response.data.login.friends) { + user.friends.push(new FriendInfo(friend.id, friend.name, friend.level)); + } user.groupIDs = response.data.register.groups; user.chatIDs = response.data.register.chats; - user.requestIDs = response.data.register.requests; - + for (const request of response.data.register.sentRequests) { + user.sentRequestUserIDs.push(request.receiver.id); + } + for (const request of response.data.login.receivedRequests) { + friendRequest = new FriendRequest(); + friendRequest.id = request.id; + friendRequest.senderUserID = request.sender.id; + friendRequest.senderUsername = request.sender.name; + friendRequest.senderHandle = request.sender.handle; + user.receivedRequests.push(friendRequest); + } this.data.changeUserInfo(user); } @@ -62,7 +76,13 @@ export class RegisterService { handle, points, level, - friends{id}, + receivedRequests{id, sender{name, handle, id}}, + sentRequests{receiver{id}} + friends { + id, + name, + level + }, groups{id}, chats{id} } diff --git a/src/app/services/request/request.service.ts b/src/app/services/request/request.service.ts index ee996b5..36271ca 100644 --- a/src/app/services/request/request.service.ts +++ b/src/app/services/request/request.service.ts @@ -27,4 +27,29 @@ export class RequestService { }; return body; } + + public buildJsonAcceptRequest(id_: number): any { + const body = { + query: `mutation($id: ID!) { + acceptRequest(sender: $id, type: FRIENDREQUEST) + }` + , variables: { + id: id_ + } + }; + return body; + } + + public buildJsonDenyRequest(id_: number): any { + const body = { + query: `mutation($id: ID!) { + denyRequest(sender: $id, type: FRIENDREQUEST) + }` + , variables: { + id: id_ + } + }; + return body; + } + } diff --git a/src/app/services/search/search.service.ts b/src/app/services/search/search.service.ts index 46ed392..565574c 100644 --- a/src/app/services/search/search.service.ts +++ b/src/app/services/search/search.service.ts @@ -24,7 +24,7 @@ export class SearchService { pUser.handle = user.handle; pUser.points = user.points; pUser.level = user.level; - pUser.friendIDs = user.friends; + pUser.friends = user.friends; users.push(pUser); } return users; diff --git a/src/app/services/selfservice/self.service.ts b/src/app/services/selfservice/self.service.ts index 03e4caa..4f29f31 100644 --- a/src/app/services/selfservice/self.service.ts +++ b/src/app/services/selfservice/self.service.ts @@ -6,6 +6,8 @@ import { DatasharingService } from '../datasharing.service'; import { userInfo } from 'os'; import {Router} from '@angular/router'; import { environment } from 'src/environments/environment'; +import { FriendRequest } from 'src/app/models/friendRequest'; +import { FriendInfo } from 'src/app/models/friendinfo'; @Injectable({ providedIn: 'root' @@ -43,6 +45,7 @@ export class SelfService { public updateUserInfo(response: any) { const user: User = new User(); + let friendRequest: FriendRequest = new FriendRequest(); user.loggedIn = true; user.userID = response.data.getSelf.id; user.username = response.data.getSelf.name; @@ -50,17 +53,48 @@ export class SelfService { user.email = response.data.getSelf.email; user.points = response.data.getSelf.points; user.level = response.data.getSelf.level; - user.friendIDs = response.data.getSelf.friends; + for (const friend of response.data.login.friends) { + user.friends.push(new FriendInfo(friend.id, friend.name, friend.level)); + } user.groupIDs = response.data.getSelf.groups; user.chatIDs = response.data.getSelf.chats; - user.requestIDs = response.data.getSelf.requests; - + for (const request of response.data.getSelf.sentRequests) { + user.sentRequestUserIDs.push(request.receiver.id); + } + for (const request of response.data.login.receivedRequests) { + friendRequest = new FriendRequest(); + friendRequest.id = request.id; + friendRequest.senderUserID = request.sender.id; + friendRequest.senderUsername = request.sender.name; + friendRequest.senderHandle = request.sender.handle; + user.receivedRequests.push(friendRequest); + } this.data.changeUserInfo(user); } public buildJson(): any { const body = {query: `{ - getSelf{id, name,email, handle, points, level, friends{id}, groups{id},chats{id}} + getSelf{ + id, + name, + email, + handle, + points, + level, + receivedRequests{id, sender{name, handle, id}}, + sentRequests{receiver{id}}, + friends { + id, + name, + level + }, + groups { + id + }, + chats{ + id + } + } }`, variables: { }}; return body; diff --git a/src/styles/greenvironment-material-theme.scss b/src/styles/greenvironment-material-theme.scss index 88c7c5b..5c30826 100644 --- a/src/styles/greenvironment-material-theme.scss +++ b/src/styles/greenvironment-material-theme.scss @@ -9,8 +9,8 @@ // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ -$primary: mat-palette($mat-green); -$accent: mat-palette($mat-pink, A200, A100, A400); +$primary: mat-palette($mat-light-green); +$accent: mat-palette($mat-brown, A200, A100, A400); $background-color: map_get($mat-grey, 50); // The warn palette is optional (defaults to red). $warn: mat-palette($mat-red); @@ -27,8 +27,8 @@ $light-theme: map_merge($light-theme, (background: $background)); -$dark-primary: mat-palette($mat-green); -$dark-accent: mat-palette($mat-pink, A200, A100, A400); +$dark-primary: mat-palette($mat-light-green); +$dark-accent: mat-palette($mat-brown, A200, A100, A400); // The warn palette is optional (defaults to red). $dark-warn: mat-palette($mat-red);