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

master
Trivernis 5 years ago committed by Gitea
commit 17433cb629

@ -1,29 +1,44 @@
<div id="home"> <div id="home">
<mat-card > <div [hidden]="!loggedIn">
<mat-card-content> <mat-card >
<mat-form-field id="input"> <mat-card-content>
<textarea matInput #content type="text" [(ngModel)]="empty" mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea> <mat-form-field id="input">
<button mat-button matSuffix mat-icon-button> <textarea matInput #content type="text" [(ngModel)]="empty" mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
<mat-icon>add</mat-icon> <button mat-button matSuffix mat-icon-button>
</button> <mat-icon>add</mat-icon>
</mat-form-field> </button>
<p id="check"> </mat-form-field>
<mat-checkbox color="primary" [(ngModel)]="checked">I protected the environment.</mat-checkbox> <p id="check">
</p> <mat-checkbox color="primary" [(ngModel)]="checked">I protected the environment.</mat-checkbox>
<mat-form-field id="action-chooser" *ngIf="checked"> </p>
<mat-label>What did you do?</mat-label> <mat-form-field id="action-chooser" *ngIf="checked">
<mat-select [(ngModel)]="selectedValue" name="action"> <mat-label>What did you do?</mat-label>
<mat-option>nothing ;)</mat-option> <mat-select [(ngModel)]="selectedValue" name="action">
<mat-option *ngFor="let action of actionlist.Actions" [value]="action.points"> <mat-option>nothing ;)</mat-option>
{{action.name}} <mat-option *ngFor="let action of actionlist.Actions" [value]="action.points">
</mat-option> {{action.name}}
</mat-select> </mat-option>
</mat-form-field> </mat-select>
<button mat-raised-button *ngIf="empty" color="primary" id="post-button" (click)=createPost(content)> </mat-form-field>
POST <button mat-raised-button *ngIf="empty" color="primary" id="post-button" (click)=createPost(content)>
</button> POST
</mat-card-content> </button>
</mat-card> </mat-card-content>
</mat-card>
</div>
<div [hidden]="loggedIn">
<mat-card id="info">
<mat-card-header>
<mat-card-title >
You are not logged in. Do you want to post something?
</mat-card-title>
</mat-card-header>
<mat-card-content>
<a mat-stroked-button color="primary" routerLink="/login" id="post-button">Login</a>
</mat-card-content>
</mat-card>
</div>
<div id="chooser-div" style="text-align: center; margin-top: 1em;"> <div id="chooser-div" style="text-align: center; margin-top: 1em;">
<mat-button-toggle-group id="feedchooser" value="new"> <mat-button-toggle-group id="feedchooser" value="new">
<mat-button-toggle (click)="showNew()" value="new">New</mat-button-toggle> <mat-button-toggle (click)="showNew()" value="new">New</mat-button-toggle>

@ -10,6 +10,9 @@
display: flex display: flex
width: 100% width: 100%
padding: 0.5em padding: 0.5em
#info
::ng-deep .mat-card-header-text
margin: 0px
#feedlist #feedlist
width: 100% width: 100%

@ -1,7 +1,8 @@
<div id="content" fxShow="true" fxHide.lt-md="true"> <div id="content" fxShow="true" fxHide.lt-md="true">
<div id="chat"><home-chatmanager id="chatcontainer" [hidden]="!loggedIn"></home-chatmanager></div> <div id="chat"><home-chatmanager [hidden]="!loggedIn"></home-chatmanager></div>
<div id="feed"><home-feed id="feedcontainer"></home-feed></div> <div id="feed"><home-feed></home-feed></div>
<div id="social"><home-social id="socialcontainer" [hidden]="!loggedIn"></home-social></div> <div class="social" [hidden]="!loggedIn"><home-social></home-social></div>
<div class="social" [hidden]="loggedIn"><home-search></home-search></div>
</div> </div>
<!-- <!--
<mat-tab-group headerPosition="below" position="0" id="bottom-menu" fxShow="true" fxHide.gt-sm="true"> <mat-tab-group headerPosition="below" position="0" id="bottom-menu" fxShow="true" fxHide.gt-sm="true">
@ -12,7 +13,7 @@
--> -->
<div class="bottom-menu" fxShow="true" fxHide.gt-sm="true"> <div class="bottom-menu" fxShow="true" fxHide.gt-sm="true">
<mat-tab-group id="tab-group" selectedIndex="1" mat-stretch-tabs headerPosition="below"> <mat-tab-group id="tab-group" selectedIndex="1" mat-stretch-tabs headerPosition="below">
<mat-tab> <mat-tab disabled>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon>chat</mat-icon> <mat-icon>chat</mat-icon>
</ng-template> </ng-template>
@ -24,7 +25,7 @@
</ng-template> </ng-template>
<home-feed class="tab-content"></home-feed> <home-feed class="tab-content"></home-feed>
</mat-tab> </mat-tab>
<mat-tab > <mat-tab [disabled]="!loggedIn">
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon>people</mat-icon> <mat-icon>people</mat-icon>
</ng-template> </ng-template>

@ -20,7 +20,7 @@
float: left float: left
overflow-y: auto overflow-y: auto
#social .social
box-sizing: content-box box-sizing: content-box
height: 100% height: 100%
width: 25% width: 25%

@ -1,4 +1,5 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> <!-- getting the google material fonts--> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> <!-- getting the google material fonts -->
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> <!-- diables zoom -->
<mat-sidenav-container class="mat-typography"> <mat-sidenav-container class="mat-typography">
<!-- SIDENAV --> <!-- SIDENAV -->
@ -105,6 +106,12 @@
<span>log out</span> <span>log out</span>
</button> </button>
</div> </div>
<div [hidden]="loggedIn">
<button mat-menu-item routerLink="/login">
<mat-icon>exit_to_app</mat-icon>
<span>login</span>
</button>
</div>
</mat-menu> </mat-menu>
</mat-toolbar> </mat-toolbar>

@ -54,10 +54,10 @@ export class MainNavigationComponent implements OnInit {
{ path: '/imprint', label: 'Imprint' }, { path: '/imprint', label: 'Imprint' },
]; ];
navLinks = [ navLinks = [
{ path: '/login', label: 'Login' },
{ path: '', label: 'Home' }, { path: '', label: 'Home' },
{ path: '/about', label: 'About' }, { path: '/about', label: 'About' },
{ path: '/imprint', label: 'Imprint' }, { path: '/imprint', label: 'Imprint' },
{ path: '/login', label: 'Login' },
]; ];
@HostBinding('class') componentCssClass; @HostBinding('class') componentCssClass;

@ -6,34 +6,42 @@
<mat-card class="mat-elevation-z8"> <mat-card class="mat-elevation-z8">
<mat-card-header> <mat-card-header>
<div mat-card-avatar class="profile-picture"></div> <div mat-card-avatar class="profile-picture"></div>
<mat-card-title>{{user.username}}</mat-card-title> <mat-card-title>{{userProfile.username}}</mat-card-title>
<mat-card-subtitle>{{user.handle}}</mat-card-subtitle> <mat-card-subtitle>{{userProfile.handle}}</mat-card-subtitle>
<div class="icon-box">
<button mat-icon-button
class="request-button"
(click)="sendFriendRequest(userProfile)"
[disabled]="!userProfile.allowedToSendRequest">
<mat-icon>person_add</mat-icon>
</button>
</div>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<table id="profile-table"> <table id="profile-table">
<tr> <tr>
<div class="mat-header-cell">name: </div> <div class="mat-header-cell">name: </div>
<td>{{user.username}}</td> <td>{{userProfile.username}}</td>
</tr> </tr>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<tr> <tr>
<div class="mat-header-cell">handle: </div> <div class="mat-header-cell">handle: </div>
<td>{{user.handle}}</td> <td>{{userProfile.handle}}</td>
</tr> </tr>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<tr> <tr>
<div class="mat-header-cell">profileID: </div> <div class="mat-header-cell">profileID: </div>
<td>{{user.userID}}</td> <td>{{userProfile.userID}}</td>
</tr> </tr>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<tr> <tr>
<div class="mat-header-cell">points: </div> <div class="mat-header-cell">points: </div>
<td>{{user.points}}</td> <td>{{userProfile.points}}</td>
</tr> </tr>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<tr> <tr>
<div class="mat-header-cell">level: </div> <div class="mat-header-cell">level: </div>
<td>{{user.level}}</td> <td>{{userProfile.level}}</td>
</tr> </tr>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<tr> <tr>

@ -16,6 +16,12 @@
margin: 0 auto margin: 0 auto
width: 100% width: 100%
max-width: 690px max-width: 690px
.icon-box
text-align: right
width: 100%
.request-button
margin-top: 0.5em
margin-bottom: 0.5em
.mat-table .mat-table
width: 100% width: 100%

@ -1,5 +1,5 @@
import { Component, OnInit, ViewChild} from '@angular/core'; 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 {Http, URLSearchParams, Headers} from '@angular/http';
import { User } from 'src/app/models/user'; import { User } from 'src/app/models/user';
import { Actionlist } from 'src/app/models/actionlist'; 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 { environment } from 'src/environments/environment';
import {MatSort} from '@angular/material/sort'; import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table'; import {MatTableDataSource} from '@angular/material/table';
import { RequestService } from 'src/app/services/request/request.service';
import { DatasharingService } from '../../services/datasharing.service';
@Component({ @Component({
selector: 'app-profile', selector: 'app-profile',
@ -18,7 +20,8 @@ export class ProfileComponent implements OnInit {
actionlist: Actionlist = new Actionlist(); actionlist: Actionlist = new Actionlist();
levellist: Levellist = new Levellist(); levellist: Levellist = new Levellist();
user: User = new User(); userProfile: User = new User();
self: User;
id: string; id: string;
rankname: string; rankname: string;
profileNotFound = false; profileNotFound = false;
@ -26,7 +29,22 @@ export class ProfileComponent implements OnInit {
dataSource = new MatTableDataSource(this.actionlist.Actions); dataSource = new MatTableDataSource(this.actionlist.Actions);
displayedLevelColumns = ['level', 'name']; displayedLevelColumns = ['level', 'name'];
levelSource = this.levellist.levels; 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; @ViewChild(MatSort, {static: true}) sort: MatSort;
ngOnInit() { ngOnInit() {
@ -37,29 +55,38 @@ export class ProfileComponent implements OnInit {
const headers = new Headers(); const headers = new Headers();
headers.set('Content-Type', 'application/json'); 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 => { .subscribe(response => {
console.log(response.text()); console.log(response.text());
this.updateUserInfo(response.json()); this.updateUserInfo(response.json());
} });
); this.data.currentUserInfo.subscribe(user => {
this.self = user;
});
} }
public updateUserInfo(response: any) { public updateUserInfo(response: any) {
if (response.data.getUser != null) { if (response.data.getUser != null) {
this.profileNotFound = false; this.profileNotFound = false;
this.user.loggedIn = true; this.userProfile.loggedIn = true;
this.user.userID = response.data.getUser.id; this.userProfile.userID = response.data.getUser.id;
this.user.username = response.data.getUser.name; this.userProfile.username = response.data.getUser.name;
this.user.handle = response.data.getUser.handle; this.userProfile.handle = response.data.getUser.handle;
this.user.points = response.data.getUser.points; this.userProfile.points = response.data.getUser.points;
this.user.level = response.data.getUser.level; this.userProfile.level = response.data.getUser.level;
this.rankname = this.levellist.getLevelName(this.user.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 { } else {
this.profileNotFound = true; this.profileNotFound = true;
} }
} }
public sendFriendRequest(user: User) {
user.allowedToSendRequest = false;
this.requestService.sendFriendRequest(user);
}
public buildJson(id: string): any { public buildJson(id: string): any {
const body = {query: `query($userId: ID) { const body = {query: `query($userId: ID) {
getUser(userId:$userId){ getUser(userId:$userId){

@ -20,9 +20,16 @@
box-sizing: border-box box-sizing: border-box
width: 100% width: 100%
margin-top: 0.5em margin-top: 0.5em
/deep/ .mat-card-header-text
width: 1000%
margin: 0
margin-left: 16px
.mat-card-subtitle .mat-card-subtitle
margin: 0 margin: 0
word-break: break-all
.mat-card-title
margin: 0
word-break: break-all
.request-button .request-button
margin-top: 0.5em margin-top: 0.5em
margin-bottom: 0.5em margin-bottom: 0.5em

@ -57,24 +57,7 @@ export class SearchComponent implements OnInit {
.subscribe(response => { .subscribe(response => {
this.foundUsers = this.searchService.renderUsers(response.json()); this.foundUsers = this.searchService.renderUsers(response.json());
for (const foundUser of this.foundUsers) { for (const foundUser of this.foundUsers) {
if (!this.user.loggedIn) {foundUser.allowedToSendRequest = false; } else { foundUser.allowedToSendRequest = this.requestService.isAllowedToSendRequest(foundUser.userID, this.user);
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; this.loading = false;
}); });
@ -86,11 +69,7 @@ export class SearchComponent implements OnInit {
public sendFriendRequest(user: User) { public sendFriendRequest(user: User) {
user.allowedToSendRequest = false; user.allowedToSendRequest = false;
const headers = new Headers(); this.requestService.sendFriendRequest(user);
headers.set('Content-Type', 'application/json');
this.http.post(environment.graphQLUrl, this.requestService.buildJsonRequest(user.userID, 'FRIENDREQUEST'))
.subscribe(response => {
});
} }
} }

@ -1,5 +1,5 @@
<div id="content" fxShow="true" fxHide.lt-md="true"> <div id="content" fxShow="true" fxHide.lt-md="true">
<mat-tab-group selectedIndex="0" mat-stretch-tabs> <mat-tab-group selectedIndex="0" mat-stretch-tabs id="tabs">
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon>people</mat-icon> <mat-icon>people</mat-icon>

@ -12,3 +12,7 @@
height: 50% height: 50%
width: 100% width: 100%
overflow: auto overflow: auto
#tabs
/deep/ .mat-tab-label
min-width: 50px

@ -3,6 +3,7 @@ import {Headers, Http} from '@angular/http';
import {DatasharingService} from '../datasharing.service'; import {DatasharingService} from '../datasharing.service';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import {environment} from 'src/environments/environment'; import {environment} from 'src/environments/environment';
import { User } from 'src/app/models/user';
@Injectable({ @Injectable({
@ -13,6 +14,36 @@ export class RequestService {
constructor(private http: Http, private data: DatasharingService, private router: Router) { 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 { public buildJsonRequest(id_: number, type_: String): any {
const body = { const body = {
query: `mutation($id: ID!, $type: RequestType) { query: `mutation($id: ID!, $type: RequestType) {

@ -11,7 +11,6 @@
// hue. Available color palettes: https://material.io/design/color/ // hue. Available color palettes: https://material.io/design/color/
$primary: mat-palette($mat-light-green); $primary: mat-palette($mat-light-green);
$accent: mat-palette($mat-brown, A200, A100, A400); $accent: mat-palette($mat-brown, A200, A100, A400);
$background-color: map_get($mat-grey, 50);
// The warn palette is optional (defaults to red). // The warn palette is optional (defaults to red).
$warn: mat-palette($mat-red); $warn: mat-palette($mat-red);
@ -19,7 +18,7 @@ $warn: mat-palette($mat-red);
$light-theme: mat-light-theme($primary, $accent, $warn); $light-theme: mat-light-theme($primary, $accent, $warn);
// Set custom background color // Set custom background color
$background-color: map_get($mat-blue-grey, 50); $background-color: #e6e6e6;
$background: map-get($light-theme, background); $background: map-get($light-theme, background);
$background: map_merge($background, (background: $background-color)); $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-primary: mat-palette($mat-light-green);
$dark-accent: mat-palette($mat-brown, A200, A100, A400); $dark-accent: mat-palette($mat-brown, A200, A100, A400);
// The warn palette is optional (defaults to red).
$dark-warn: mat-palette($mat-red); $dark-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes). // Create the theme object (a Sass map containing all of the palettes).
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn); $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 { .dark-theme {
@include angular-material-theme($dark-theme); @include angular-material-theme($dark-theme);

Loading…
Cancel
Save