diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 8ce9d5b..4acdf59 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -1,29 +1,44 @@
- - - - - - -

- I protected the environment. -

- - What did you do? - - nothing ;) - - {{action.name}} - - - - - - +
+ + + + + + +

+ I protected the environment. +

+ + What did you do? + + nothing ;) + + {{action.name}} + + + + + + +
+
+ + + + You are not logged in. Do you want to post something? + + + + Login + + +
+
New diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass index cbedf1a..2aaf164 100644 --- a/src/app/components/feed/feed.component.sass +++ b/src/app/components/feed/feed.component.sass @@ -10,6 +10,9 @@ display: flex width: 100% padding: 0.5em +#info + ::ng-deep .mat-card-header-text + margin: 0px #feedlist width: 100% diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index 0949129..e274fc6 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -1,7 +1,8 @@
-
-
-
+
+
+ +
- + chat @@ -24,7 +25,7 @@ - + people diff --git a/src/app/components/home/home.component.sass b/src/app/components/home/home.component.sass index fe15440..3a1098c 100644 --- a/src/app/components/home/home.component.sass +++ b/src/app/components/home/home.component.sass @@ -20,7 +20,7 @@ float: left overflow-y: auto -#social +.social box-sizing: content-box height: 100% width: 25% diff --git a/src/app/components/main-navigation/main-navigation.component.html b/src/app/components/main-navigation/main-navigation.component.html index 941c0bb..814da14 100644 --- a/src/app/components/main-navigation/main-navigation.component.html +++ b/src/app/components/main-navigation/main-navigation.component.html @@ -1,4 +1,5 @@ - + + @@ -105,6 +106,12 @@ log out
+
+ +
diff --git a/src/app/components/main-navigation/main-navigation.component.ts b/src/app/components/main-navigation/main-navigation.component.ts index fee1f60..d3c11a7 100644 --- a/src/app/components/main-navigation/main-navigation.component.ts +++ b/src/app/components/main-navigation/main-navigation.component.ts @@ -54,10 +54,10 @@ export class MainNavigationComponent implements OnInit { { path: '/imprint', label: 'Imprint' }, ]; navLinks = [ + { path: '/login', label: 'Login' }, { path: '', label: 'Home' }, { path: '/about', label: 'About' }, { path: '/imprint', label: 'Imprint' }, - { path: '/login', label: 'Login' }, ]; @HostBinding('class') componentCssClass; diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index a6fca4f..9d15582 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -6,34 +6,42 @@
- {{user.username}} - {{user.handle}} + {{userProfile.username}} + {{userProfile.handle}} +
+ +
name:
- +
handle:
- +
profileID:
- +
points:
- +
level:
- + diff --git a/src/app/components/profile/profile.component.sass b/src/app/components/profile/profile.component.sass index 4d0369e..94f9cde 100644 --- a/src/app/components/profile/profile.component.sass +++ b/src/app/components/profile/profile.component.sass @@ -16,6 +16,12 @@ 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 .mat-table width: 100% diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts index 1da58c8..4f8f4f2 100644 --- a/src/app/components/profile/profile.component.ts +++ b/src/app/components/profile/profile.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, ViewChild} from '@angular/core'; -import {Router} from '@angular/router'; +import {Router, NavigationEnd} from '@angular/router'; import {Http, URLSearchParams, Headers} from '@angular/http'; import { User } from 'src/app/models/user'; import { Actionlist } from 'src/app/models/actionlist'; @@ -7,6 +7,8 @@ import { Levellist } from 'src/app/models/levellist'; import { environment } from 'src/environments/environment'; import {MatSort} from '@angular/material/sort'; import {MatTableDataSource} from '@angular/material/table'; +import { RequestService } from 'src/app/services/request/request.service'; +import { DatasharingService } from '../../services/datasharing.service'; @Component({ selector: 'app-profile', @@ -18,7 +20,8 @@ export class ProfileComponent implements OnInit { actionlist: Actionlist = new Actionlist(); levellist: Levellist = new Levellist(); - user: User = new User(); + userProfile: User = new User(); + self: User; id: string; rankname: string; profileNotFound = false; @@ -26,7 +29,22 @@ export class ProfileComponent implements OnInit { dataSource = new MatTableDataSource(this.actionlist.Actions); displayedLevelColumns = ['level', 'name']; levelSource = this.levellist.levels; - constructor(private router: Router, private http: Http) { } + + constructor( + private router: Router, + private http: Http, + private requestService: RequestService, + private data: DatasharingService) { + router.events.forEach((event) => { + // check if the user is on the profile page (of userY) and routes to the page of userY (e.g. his own page) + if (event instanceof NavigationEnd) { + if (this.id !== this.router.url.substr(this.router.url.lastIndexOf('/') + 1) && this.id) { + // reload the user + this.ngOnInit(); + } + } + }); + } @ViewChild(MatSort, {static: true}) sort: MatSort; ngOnInit() { @@ -37,29 +55,38 @@ export class ProfileComponent implements OnInit { const headers = new Headers(); headers.set('Content-Type', 'application/json'); - return this.http.post(url, this.buildJson(this.id)) + this.http.post(url, this.buildJson(this.id)) .subscribe(response => { console.log(response.text()); this.updateUserInfo(response.json()); - } - ); + }); + this.data.currentUserInfo.subscribe(user => { + this.self = user; + }); } public updateUserInfo(response: any) { if (response.data.getUser != null) { this.profileNotFound = false; - this.user.loggedIn = true; - this.user.userID = response.data.getUser.id; - this.user.username = response.data.getUser.name; - this.user.handle = response.data.getUser.handle; - this.user.points = response.data.getUser.points; - this.user.level = response.data.getUser.level; - this.rankname = this.levellist.getLevelName(this.user.level); + this.userProfile.loggedIn = true; + this.userProfile.userID = response.data.getUser.id; + this.userProfile.username = response.data.getUser.name; + this.userProfile.handle = response.data.getUser.handle; + this.userProfile.points = response.data.getUser.points; + this.userProfile.level = response.data.getUser.level; + this.rankname = this.levellist.getLevelName(this.userProfile.level); + // tslint:disable-next-line:max-line-length + this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(response.data.getUser.id, this.self); } else { this.profileNotFound = true; } } + public sendFriendRequest(user: User) { + user.allowedToSendRequest = false; + this.requestService.sendFriendRequest(user); + } + public buildJson(id: string): any { const body = {query: `query($userId: ID) { getUser(userId:$userId){ diff --git a/src/app/components/search/search.component.sass b/src/app/components/search/search.component.sass index a256f6a..8e797cf 100644 --- a/src/app/components/search/search.component.sass +++ b/src/app/components/search/search.component.sass @@ -20,9 +20,16 @@ box-sizing: border-box width: 100% margin-top: 0.5em - + /deep/ .mat-card-header-text + width: 1000% + margin: 0 + margin-left: 16px .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 diff --git a/src/app/components/search/search.component.ts b/src/app/components/search/search.component.ts index 4cd8ea4..b927242 100644 --- a/src/app/components/search/search.component.ts +++ b/src/app/components/search/search.component.ts @@ -57,24 +57,7 @@ export class SearchComponent implements OnInit { .subscribe(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; - } - } - } + foundUser.allowedToSendRequest = this.requestService.isAllowedToSendRequest(foundUser.userID, this.user); } this.loading = false; }); @@ -86,11 +69,7 @@ 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 => { - }); + this.requestService.sendFriendRequest(user); } } diff --git a/src/app/components/social/social.component.html b/src/app/components/social/social.component.html index b3fbb5f..1ae417f 100644 --- a/src/app/components/social/social.component.html +++ b/src/app/components/social/social.component.html @@ -1,5 +1,5 @@
- + people diff --git a/src/app/components/social/social.component.sass b/src/app/components/social/social.component.sass index 73ecea1..a52f2d5 100644 --- a/src/app/components/social/social.component.sass +++ b/src/app/components/social/social.component.sass @@ -12,3 +12,7 @@ height: 50% width: 100% overflow: auto + +#tabs + /deep/ .mat-tab-label + min-width: 50px diff --git a/src/app/services/request/request.service.ts b/src/app/services/request/request.service.ts index 36271ca..8cf340e 100644 --- a/src/app/services/request/request.service.ts +++ b/src/app/services/request/request.service.ts @@ -3,6 +3,7 @@ import {Headers, Http} from '@angular/http'; import {DatasharingService} from '../datasharing.service'; import {Router} from '@angular/router'; import {environment} from 'src/environments/environment'; +import { User } from 'src/app/models/user'; @Injectable({ @@ -13,6 +14,36 @@ export class RequestService { constructor(private http: Http, private data: DatasharingService, private router: Router) { } + public isAllowedToSendRequest(userID: number, self: User): boolean { + if (!self.loggedIn) { return false; } else { + for (const receiverID of self.sentRequestUserIDs) { + if (userID === receiverID || + userID === self.userID) { + return false; + } + } + for (const friend of self.friends) { + if (userID === friend.id) { + return false; + } + } + for (const sender of self.receivedRequests) { + if (userID === sender.senderUserID) { + return false; + } + } + } + return true; + } + + public sendFriendRequest(user: User) { + const headers = new Headers(); + headers.set('Content-Type', 'application/json'); + this.http.post(environment.graphQLUrl, this.buildJsonRequest(user.userID, 'FRIENDREQUEST')) + .subscribe(response => { + }); + } + public buildJsonRequest(id_: number, type_: String): any { const body = { query: `mutation($id: ID!, $type: RequestType) { diff --git a/src/styles/greenvironment-material-theme.scss b/src/styles/greenvironment-material-theme.scss index 5c30826..d83e945 100644 --- a/src/styles/greenvironment-material-theme.scss +++ b/src/styles/greenvironment-material-theme.scss @@ -11,7 +11,6 @@ // hue. Available color palettes: https://material.io/design/color/ $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); @@ -19,7 +18,7 @@ $warn: mat-palette($mat-red); $light-theme: mat-light-theme($primary, $accent, $warn); // Set custom background color -$background-color: map_get($mat-blue-grey, 50); +$background-color: #e6e6e6; $background: map-get($light-theme, background); $background: map_merge($background, (background: $background-color)); @@ -29,13 +28,16 @@ $light-theme: map_merge($light-theme, (background: $background)); $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); // Create the theme object (a Sass map containing all of the palettes). $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn); +$dark-background-color: #121212; + +$dark-background: map-get($dark-theme, background); +$dark-background: map_merge($dark-background, (background: $dark-background-color)); +$dark-theme: map_merge($dark-theme, (background: $dark-background)); .dark-theme { @include angular-material-theme($dark-theme);
{{user.username}}{{userProfile.username}}
{{user.handle}}{{userProfile.handle}}
{{user.userID}}{{userProfile.userID}}
{{user.points}}{{userProfile.points}}
{{user.level}}{{userProfile.level}}