Cleanup code

master
trivernis 5 years ago
parent d99310c9b6
commit 5a19cc0dc4

@ -1,5 +1,5 @@
import { TestBed, async } from '@angular/core/testing'; import {async, TestBed} from '@angular/core/testing';
import { AppComponent } from './app.component'; import {AppComponent} from './app.component';
describe('AppComponent', () => { describe('AppComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {

@ -1,7 +1,6 @@
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { User } from './models/user'; import {DatasharingService} from './services/datasharing.service';
import { DatasharingService } from './services/datasharing.service'; import {SelfService} from './services/selfservice/self.service';
import { SelfService } from './services/selfservice/self.service';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -10,7 +9,8 @@ import { SelfService } from './services/selfservice/self.service';
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
constructor(private data: DatasharingService, private selfservice: SelfService) { } constructor(private data: DatasharingService, private selfservice: SelfService) {
}
ngOnInit() { ngOnInit() {
this.data.currentUserInfo.subscribe(user => { this.data.currentUserInfo.subscribe(user => {

@ -1,43 +1,40 @@
import { BrowserModule } from '@angular/platform-browser'; import {BrowserModule, DomSanitizer} from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import {NgModule} from '@angular/core';
import { FormsModule } from '@angular/forms'; import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { RouterModule, Routes } from '@angular/router'; import {RouterModule, Routes} from '@angular/router';
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io'; import {SocketIoConfig, SocketIoModule} from 'ngx-socket-io';
import { HttpModule } from '@angular/http'; import {HttpModule} from '@angular/http';
import { AppComponent } from './app.component'; import {AppComponent} from './app.component';
import { DocumentListComponent } from './components/document-list/document-list.component'; import {DocumentListComponent} from './components/document-list/document-list.component';
import { DocumentComponent } from './components/document/document.component'; import {DocumentComponent} from './components/document/document.component';
import { RegisterComponent } from './components/register/register.component'; import {RegisterComponent} from './components/register/register.component';
import { LoginComponent } from './components/login/login.component'; import {LoginComponent} from './components/login/login.component';
import { ChatComponent } from './components/chat/chat.component'; import {ChatComponent} from './components/chat/chat.component';
import { FriendsComponent } from './components/social/friends/friends.component'; import {FriendsComponent} from './components/social/friends/friends.component';
import { FeedComponent } from './components/feed/feed.component'; import {FeedComponent} from './components/feed/feed.component';
import { HomeComponent } from './components/home/home.component'; import {HomeComponent} from './components/home/home.component';
import { SocialComponent } from './components/social/social.component'; import {SocialComponent} from './components/social/social.component';
import { GroupsComponent } from './components/social/groups/groups.component'; import {DialogCreateGroupComponent, GroupsComponent} from './components/social/groups/groups.component';
import { DialogCreateGroupComponent } from './components/social/groups/groups.component'; import {DialogCreateEventComponent, GroupComponent} from './components/group/group.component';
import { DialogCreateEventComponent } from './components/group/group.component'; import {ChatmanagerComponent} from './components/chatmanager/chatmanager.component';
import { ChatmanagerComponent } from './components/chatmanager/chatmanager.component'; import {ChatlistComponent} from './components/chatlist/chatlist.component';
import { ChatlistComponent } from './components/chatlist/chatlist.component'; import {PostlistComponent} from './components/feed/postlist/postlist.component';
import { PostlistComponent } from './components/feed/postlist/postlist.component'; import {GraphQLModule} from './graphql.module';
import { GraphQLModule } from './graphql.module'; import {HttpClientModule} from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http'; import {ProfileComponent} from './components/profile/profile.component';
import { ProfileComponent } from './components/profile/profile.component'; import {ImprintComponent} from './components/imprint/imprint.component';
import { GroupComponent } from './components/group/group.component'; import {AboutComponent} from './components/about/about.component';
import { ImprintComponent } from './components/imprint/imprint.component'; import {ChatcontactsComponent} from './components/chatmanager/chatcontacts/chatcontacts.component';
import { AboutComponent } from './components/about/about.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/chatcontacts.component';
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 {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';
import {MatInputModule} from '@angular/material/input'; import {MatInputModule} from '@angular/material/input';
import { ReactiveFormsModule} from '@angular/forms'; import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
import {MatIconModule} from '@angular/material/icon';
import {MatToolbarModule} from '@angular/material/toolbar'; import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSidenavModule} from '@angular/material/sidenav'; import {MatSidenavModule} from '@angular/material/sidenav';
import {MatTabsModule} from '@angular/material/tabs'; import {MatTabsModule} from '@angular/material/tabs';
@ -45,22 +42,20 @@ import {MatCardModule} from '@angular/material/card';
import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatSelectModule} from '@angular/material/select'; import {MatSelectModule} from '@angular/material/select';
import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatCheckboxModule} from '@angular/material/checkbox';
import { OverlayModule} from '@angular/cdk/overlay'; import {OverlayModule} from '@angular/cdk/overlay';
import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatMenuModule} from '@angular/material/menu'; import {MatMenuModule} from '@angular/material/menu';
import {MatRippleModule} from '@angular/material/core'; import {MatRippleModule} from '@angular/material/core';
import {MatBadgeModule} from '@angular/material/badge'; import {MatBadgeModule} from '@angular/material/badge';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { FlexLayoutModule } from '@angular/flex-layout'; import {FlexLayoutModule} from '@angular/flex-layout';
import { MainNavigationComponent } from './components/main-navigation/main-navigation.component'; import {MainNavigationComponent} from './components/main-navigation/main-navigation.component';
import { LayoutModule } from '@angular/cdk/layout'; import {LayoutModule} from '@angular/cdk/layout';
import { MatButtonModule } from '@angular/material/button'; import {MatButtonModule} from '@angular/material/button';
import { MatListModule } from '@angular/material/list'; import {MatListModule} from '@angular/material/list';
import {MatSortModule} from '@angular/material/sort'; import {MatSortModule} from '@angular/material/sort';
import { SearchComponent } from './components/search/search.component'; import {SearchComponent} from './components/search/search.component';
import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material/icon';
import {MatDialogModule} from '@angular/material/dialog'; import {MatDialogModule} from '@angular/material/dialog';
import {MatTooltipModule} from '@angular/material/tooltip'; import {MatTooltipModule} from '@angular/material/tooltip';
import {MatExpansionModule} from '@angular/material/expansion'; import {MatExpansionModule} from '@angular/material/expansion';
@ -70,16 +65,16 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
import {DialogFileUploadComponent} from './components/profile/fileUpload/fileUpload.component'; import {DialogFileUploadComponent} from './components/profile/fileUpload/fileUpload.component';
const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} }; const config: SocketIoConfig = {url: 'http://localhost:4444', options: {}};
const appRoutes: Routes = [ const appRoutes: Routes = [
{ path: '', component: HomeComponent }, {path: '', component: HomeComponent},
{ path: 'profile/:id', component: ProfileComponent }, {path: 'profile/:id', component: ProfileComponent},
{ path: 'group/:id', component: GroupComponent }, {path: 'group/:id', component: GroupComponent},
{ path: 'login', component: LoginComponent }, {path: 'login', component: LoginComponent},
{ path: 'register', component: RegisterComponent }, {path: 'register', component: RegisterComponent},
{ path: 'about', component: AboutComponent }, {path: 'about', component: AboutComponent},
{ path: 'imprint', component: ImprintComponent }, {path: 'imprint', component: ImprintComponent},
]; ];
@NgModule({ @NgModule({
@ -170,4 +165,4 @@ export class AppModule {
iconRegistry.addSvgIcon( iconRegistry.addSvgIcon(
'logo_green', sanitizer.bypassSecurityTrustResourceUrl('assets/images/gv-logo-flat.svg')); 'logo_green', sanitizer.bypassSecurityTrustResourceUrl('assets/images/gv-logo-flat.svg'));
} }
} }

@ -1,72 +1,74 @@
<div id="about"> <div id="about">
<div id="text0" style="text-align: center;"> <div id="text0" style="text-align: center;">
<h1>Greenvironment</h1> <h1>Greenvironment</h1>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<h1 class="mat-display-3">Keep it clean and green!</h1> <h1 class="mat-display-3">Keep it clean and green!</h1>
<button mat-icon-button> <button mat-icon-button>
<mat-icon class="big-icon" color="primary">keyboard_arrow_down</mat-icon> <mat-icon class="big-icon" color="primary">keyboard_arrow_down</mat-icon>
</button> </button>
</div> </div>
<div id="text1" style="text-align: center;"> <div id="text1" style="text-align: center;">
<h1>What's Greenvironment?</h1> <h1>What's Greenvironment?</h1>
<p>We, the greenviroment team want to create a network for environmentalists who care for our nature and our planet as much as we do.</p> <p>We, the greenviroment team want to create a network for environmentalists who care for our nature and our planet
<br> as much as we do.</p>
<h1>What does the level mean?</h1> <br>
<p>There are different levels you can reach through green behaviour. <h1>What does the level mean?</h1>
Collect 100 points to level up! The levels are called: <p>There are different levels you can reach through green behaviour.
</p> Collect 100 points to level up! The levels are called:
<table mat-table [dataSource]="levelSource" class="mat-elevation-z8"> </p>
<ng-container matColumnDef="level"> <table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
<th mat-header-cell *matHeaderCellDef> level </th> <ng-container matColumnDef="level">
<td mat-cell *matCellDef="let level"> {{level.level}} </td> <th mat-header-cell *matHeaderCellDef> level</th>
</ng-container> <td mat-cell *matCellDef="let level"> {{level.level}} </td>
<ng-container matColumnDef="name"> </ng-container>
<th mat-header-cell *matHeaderCellDef> level name </th> <ng-container matColumnDef="name">
<td mat-cell *matCellDef="let level"> {{level.name}} </td> <th mat-header-cell *matHeaderCellDef> level name</th>
</ng-container> <td mat-cell *matCellDef="let level"> {{level.name}} </td>
<tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr> <tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
</table> <tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
<br> </table>
<h1>How to level up?</h1> <br>
<p>There is an always growing list of things you can do, <h1>How to level up?</h1>
to support your environment <p>There is an always growing list of things you can do,
and earn points to level up at the same time. to support your environment
You can get a different amount of points and earn points to level up at the same time.
for differnet actions you can see in the list below: You can get a different amount of points
</p> for differnet actions you can see in the list below:
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8"> </p>
<!--- Note that these columns can be defined in any order. <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
The actual rendered columns are set as a property on the row definition" --> <!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column --> <!-- Position Column -->
<ng-container matColumnDef="points"> <ng-container matColumnDef="points">
<th mat-header-cell *matHeaderCellDef mat-sort-header> points </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> points</th>
<td mat-cell *matCellDef="let action"> {{action.points}} </td> <td mat-cell *matCellDef="let action"> {{action.points}} </td>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> action </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> action</th>
<td mat-cell *matCellDef="let action"> {{action.name}} </td> <td mat-cell *matCellDef="let action"> {{action.name}} </td>
</ng-container> </ng-container>
<!-- decriotion Column --> <!-- decriotion Column -->
<ng-container matColumnDef="description"> <ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header> description </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> description</th>
<td mat-cell *matCellDef="let action"> {{action.description}} </td> <td mat-cell *matCellDef="let action"> {{action.description}} </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
</div> </div>
<div id="text2" style="text-align: center;"> <div id="text2" style="text-align: center;">
<p class="mat-display-1">We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p> <p class="mat-display-1">We believe, that together we can do amazing things to protect our environment and keep it
<p class="mat-display-1">You aren't part of greenvironment yet? - join us now!</p> clean and green.</p>
<a mat-stroked-button color="primary" class="link-button" routerLink="/register" >Register</a> <p class="mat-display-1">You aren't part of greenvironment yet? - join us now!</p>
<br> <a mat-stroked-button color="primary" class="link-button" routerLink="/register">Register</a>
<a mat-stroked-button color="primary" class="link-button" routerLink="/login">Login</a> <br>
</div> <a mat-stroked-button color="primary" class="link-button" routerLink="/login">Login</a>
</div>
</div> </div>

@ -31,5 +31,6 @@
max-width: 690px max-width: 690px
margin: 0 auto margin: 0 auto
text-align: left text-align: left
.mat-header-cell .mat-header-cell
padding-right: 0.5em padding-right: 0.5em

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { AboutComponent } from './about.component'; import {AboutComponent} from './about.component';
describe('AboutComponent', () => { describe('AboutComponent', () => {
let component: AboutComponent; let component: AboutComponent;
@ -8,9 +8,9 @@ describe('AboutComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ AboutComponent ] declarations: [AboutComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,9 +1,9 @@
import { Component, OnInit, ViewChild } from '@angular/core'; import {Component, OnInit, ViewChild} from '@angular/core';
import { Activitylist } from 'src/app/models/activity'; import {Activitylist} from 'src/app/models/activity';
import { Levellist } from 'src/app/models/levellist'; import {Levellist} from 'src/app/models/levellist';
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 { ActivityService } from 'src/app/services/activity/activity.service'; import {ActivityService} from 'src/app/services/activity/activity.service';
@Component({ @Component({
selector: 'app-about', selector: 'app-about',
@ -19,9 +19,11 @@ export class AboutComponent implements OnInit {
displayedLevelColumns = ['level', 'name']; displayedLevelColumns = ['level', 'name'];
levelSource = this.levellist.levels; levelSource = this.levellist.levels;
constructor(private activityService: ActivityService) { } constructor(private activityService: ActivityService) {
}
@ViewChild(MatSort, {static: true}) sort: MatSort; @ViewChild(MatSort, {static: true}) sort: MatSort;
ngOnInit() { ngOnInit() {
this.activityService.getActivities(); this.activityService.getActivities();
this.activityService.activitylist.subscribe(response => { this.activityService.activitylist.subscribe(response => {

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { ChatComponent } from './chat.component'; import {ChatComponent} from './chat.component';
describe('ChatComponent', () => { describe('ChatComponent', () => {
let component: ChatComponent; let component: ChatComponent;
@ -8,9 +8,9 @@ describe('ChatComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ ChatComponent ] declarations: [ChatComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,8 +1,7 @@
import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core'; import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import { Chatmessage } from 'src/app/models/chatmessage'; import {Chatmessage} from 'src/app/models/chatmessage';
import { Chatinfo } from 'src/app/models/chatinfo'; import {ChatService} from 'src/app/services/chat/chat.service';
import { ChatService } from 'src/app/services/chat/chat.service'; import {Chat} from 'src/app/models/chat';
import { Chat } from 'src/app/models/chat';
@Component({ @Component({
selector: 'chatmanager-chat', selector: 'chatmanager-chat',
@ -16,7 +15,8 @@ export class ChatComponent implements OnInit {
@Output() goBackEvent = new EventEmitter<boolean>(); @Output() goBackEvent = new EventEmitter<boolean>();
@Input() childChat: Chat; @Input() childChat: Chat;
constructor(private chatService: ChatService) { } constructor(private chatService: ChatService) {
}
ngOnInit() { ngOnInit() {
this.refresh(); this.refresh();
@ -28,16 +28,16 @@ export class ChatComponent implements OnInit {
sendMessage(pElement) { sendMessage(pElement) {
this.chatService.sendMessage(this.childChat.id, pElement.value) this.chatService.sendMessage(this.childChat.id, pElement.value)
.subscribe(response => { .subscribe(response => {
console.log('Message sent'); console.log('Message sent');
pElement.value = ''; pElement.value = '';
this.refresh(); this.refresh();
}); });
} }
refresh() { refresh() {
this.chatService.getMessagesRaw(this.childChat.id) this.chatService.getMessagesRaw(this.childChat.id)
.subscribe(response => { .subscribe(response => {
console.log('Downloading messages ...'); console.log('Downloading messages ...');
this.messages = this.chatService.renderMessages(response.json()); this.messages = this.chatService.renderMessages(response.json());
}); });

@ -6,10 +6,10 @@
<mat-toolbar><span>Chat</span></mat-toolbar> <mat-toolbar><span>Chat</span></mat-toolbar>
<div id="chats"> <div id="chats">
<div class="chatitem" *ngFor="let chat of childChats" <div class="chatitem" *ngFor="let chat of childChats"
[class.selected]="chat === selectedChat" (click)="showChat(chat)"> [class.selected]="chat === selectedChat" (click)="showChat(chat)">
<div class="picture">Pic</div> <div class="picture">Pic</div>
<div class="name"><span>{{chat.memberName}}</span></div> <div class="name"><span>{{chat.memberName}}</span></div>
<div class="date"> <a>Date of last message</a></div> <div class="date"><a>Date of last message</a></div>
</div> </div>
</div> </div>
</div> </div>

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { ChatlistComponent } from './chatlist.component'; import {ChatlistComponent} from './chatlist.component';
describe('ChatlistComponent', () => { describe('ChatlistComponent', () => {
let component: ChatlistComponent; let component: ChatlistComponent;
@ -8,9 +8,9 @@ describe('ChatlistComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ ChatlistComponent ] declarations: [ChatlistComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,7 +1,6 @@
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core'; import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import { Chatinfo } from 'src/app/models/chatinfo'; import {Chat} from 'src/app/models/chat';
import { Chat } from 'src/app/models/chat'; import {ChatService} from 'src/app/services/chat/chat.service';
import { ChatService } from 'src/app/services/chat/chat.service';
@Component({ @Component({
selector: 'chatmanager-chatlist', selector: 'chatmanager-chatlist',
@ -15,7 +14,8 @@ export class ChatlistComponent implements OnInit {
@Output() showCreateChatEvent = new EventEmitter<boolean>(); @Output() showCreateChatEvent = new EventEmitter<boolean>();
selectedChat: Chat; selectedChat: Chat;
constructor(private chatService: ChatService) { } constructor(private chatService: ChatService) {
}
ngOnInit() { ngOnInit() {

@ -1,15 +1,16 @@
<div id="contacts"> <div id="contacts">
<div id='header'> <div id='header'>
<button id="goback" (click)="goBack()"><span><i class="fa fa-arrow-left fa-3x" aria-hidden="true"></i></span></button> <button id="goback" (click)="goBack()"><span><i class="fa fa-arrow-left fa-3x" aria-hidden="true"></i></span>
<span class='title'>Contacts</span> </button>
</div> <span class='title'>Contacts</span>
<div class="search-container"> </div>
</div> <div class="search-container">
<div class="data-container"> </div>
<div class="contact-item" *ngFor="let contact of contactList" <div class="data-container">
[class.selected]="contact === selectedContact" (click)="createChat(contact.id)"> <div class="contact-item" *ngFor="let contact of contactList"
<div class="picture">Pic</div> [class.selected]="contact === selectedContact" (click)="createChat(contact.id)">
<div class="name"><span>{{contact.name}}</span></div> <div class="picture">Pic</div>
</div> <div class="name"><span>{{contact.name}}</span></div>
</div> </div>
</div>
</div> </div>

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { ChatcontactsComponent } from './chatcontacts.component'; import {ChatcontactsComponent} from './chatcontacts.component';
describe('ChatcontactsComponent', () => { describe('ChatcontactsComponent', () => {
let component: ChatcontactsComponent; let component: ChatcontactsComponent;
@ -8,9 +8,9 @@ describe('ChatcontactsComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ ChatcontactsComponent ] declarations: [ChatcontactsComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,6 +1,6 @@
import { Component, OnInit, Output, EventEmitter } from '@angular/core'; import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import { FriendInfo } from 'src/app/models/friendinfo'; import {FriendInfo} from 'src/app/models/friendinfo';
import { ChatService } from 'src/app/services/chat/chat.service'; import {ChatService} from 'src/app/services/chat/chat.service';
@Component({ @Component({
selector: 'chatmanager-chatcontacts', selector: 'chatmanager-chatcontacts',
@ -12,7 +12,8 @@ export class ChatcontactsComponent implements OnInit {
@Output() goBackEvent = new EventEmitter<boolean>(); @Output() goBackEvent = new EventEmitter<boolean>();
selectedContact: FriendInfo; selectedContact: FriendInfo;
constructor(private chatService: ChatService) { } constructor(private chatService: ChatService) {
}
ngOnInit() { ngOnInit() {
} }

@ -2,5 +2,5 @@
@import '../../../styles/vars.sass' @import '../../../styles/vars.sass'
div div
width: 100% width: 100%
height: 100% height: 100%

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { ChatmanagerComponent } from './chatmanager.component'; import {ChatmanagerComponent} from './chatmanager.component';
describe('ChatmanagerComponent', () => { describe('ChatmanagerComponent', () => {
let component: ChatmanagerComponent; let component: ChatmanagerComponent;
@ -8,9 +8,9 @@ describe('ChatmanagerComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ ChatmanagerComponent ] declarations: [ChatmanagerComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,9 +1,7 @@
import { Component, OnInit, ViewChild } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { ChatService } from '../../services/chat/chat.service'; import {ChatService} from '../../services/chat/chat.service';
import { ChatComponent } from '../chat/chat.component'; import {DatasharingService} from 'src/app/services/datasharing.service';
import { Chatinfo } from 'src/app/models/chatinfo'; import {Chat} from 'src/app/models/chat';
import { DatasharingService } from 'src/app/services/datasharing.service';
import { Chat } from 'src/app/models/chat';
@Component({ @Component({
selector: 'home-chatmanager', selector: 'home-chatmanager',
@ -19,7 +17,8 @@ export class ChatmanagerComponent implements OnInit {
parentSelectedChat: Chat; parentSelectedChat: Chat;
parentChats: Array<Chat>; parentChats: Array<Chat>;
constructor(private data: DatasharingService, private chatService: ChatService) { } constructor(private data: DatasharingService, private chatService: ChatService) {
}
ngOnInit() { ngOnInit() {
/*this.data.currentChatIDs.subscribe(chatIDs => { /*this.data.currentChatIDs.subscribe(chatIDs => {
@ -51,7 +50,7 @@ export class ChatmanagerComponent implements OnInit {
refresh() { refresh() {
this.chatService.getAllChatsRaw() this.chatService.getAllChatsRaw()
.subscribe(response => { .subscribe(response => {
console.log(response); console.log(response);
this.parentChats = this.chatService.renderAllChats(response.json()); this.parentChats = this.chatService.renderAllChats(response.json());
}); });

@ -1,4 +1,5 @@
<div class='sidenav'> <div class='sidenav'>
<span (click)='newDoc()'>New Document</span> <span (click)='newDoc()'>New Document</span>
<span [class.selected]='docId === currentDoc' (click)='loadDoc(docId)' *ngFor='let docId of documents | async'>{{ docId }}</span> <span [class.selected]='docId === currentDoc' (click)='loadDoc(docId)'
*ngFor='let docId of documents | async'>{{ docId }}</span>
</div> </div>

@ -1,24 +1,28 @@
.sidenav { .sidenav {
position: fixed; position: fixed;
height: 100%; height: 100%;
width: 220px; width: 220px;
top: 0; top: 0;
left: 0; left: 0;
background-color: #111111; background-color: #111111;
overflow-x: hidden; overflow-x: hidden;
padding-top: 20px; padding-top: 20px;
span { span {
padding: 6px 8px 6px 16px; padding: 6px 8px 6px 16px;
text-decoration: none; text-decoration: none;
font-size: 25px; font-size: 25px;
font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
color: #818181; color: #818181;
display: block; display: block;
}.selected { }
color: #e1e1e1;
}:hover { .selected {
color: #f1f1f1; color: #e1e1e1;
cursor: pointer; }
}
:hover {
color: #f1f1f1;
cursor: pointer;
}
} }

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { DocumentListComponent } from './document-list.component'; import {DocumentListComponent} from './document-list.component';
describe('DocumentListComponent', () => { describe('DocumentListComponent', () => {
let component: DocumentListComponent; let component: DocumentListComponent;
@ -8,9 +8,9 @@ describe('DocumentListComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ DocumentListComponent ] declarations: [DocumentListComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,7 +1,7 @@
import { Component, OnInit, OnDestroy } from '@angular/core'; import {Component, OnDestroy, OnInit} from '@angular/core';
import { Observable, Subscription } from 'rxjs'; import {Observable, Subscription} from 'rxjs';
import { DocumentService } from 'src/app/services/document.service'; import {DocumentService} from 'src/app/services/document.service';
@Component({ @Component({
selector: 'app-document-list', selector: 'app-document-list',
@ -13,7 +13,8 @@ export class DocumentListComponent implements OnInit, OnDestroy {
currentDoc: string; currentDoc: string;
private _docSub: Subscription; private _docSub: Subscription;
constructor(private documentService: DocumentService) { } constructor(private documentService: DocumentService) {
}
ngOnInit() { ngOnInit() {
this.documents = this.documentService.documents; this.documents = this.documentService.documents;

@ -1,12 +1,12 @@
textarea { textarea {
position: fixed; position: fixed;
width: calc(100% - 235px); width: calc(100% - 235px);
height: 100%; height: 100%;
right: 0; right: 0;
top: 0; top: 0;
font-size: 18pt; font-size: 18pt;
padding-top: 20px; padding-top: 20px;
resize: none; resize: none;
border: none; border: none;
padding: 20px 0px 20px 15px; padding: 20px 0px 20px 15px;
} }

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { DocumentComponent } from './document.component'; import {DocumentComponent} from './document.component';
describe('DocumentComponent', () => { describe('DocumentComponent', () => {
let component: DocumentComponent; let component: DocumentComponent;
@ -8,9 +8,9 @@ describe('DocumentComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ DocumentComponent ] declarations: [DocumentComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,8 +1,8 @@
import { Component, OnInit, OnDestroy } from '@angular/core'; import {Component, OnDestroy, OnInit} from '@angular/core';
import { DocumentService } from 'src/app/services/document.service'; import {DocumentService} from 'src/app/services/document.service';
import { Subscription } from 'rxjs'; import {Subscription} from 'rxjs';
import { Document } from 'src/app/models/document'; import {Document} from 'src/app/models/document';
import { startWith } from 'rxjs/operators'; import {startWith} from 'rxjs/operators';
@Component({ @Component({
selector: 'app-document', selector: 'app-document',
@ -12,11 +12,13 @@ import { startWith } from 'rxjs/operators';
export class DocumentComponent implements OnInit, OnDestroy { export class DocumentComponent implements OnInit, OnDestroy {
document: Document; document: Document;
private _docSub: Subscription; private _docSub: Subscription;
constructor(private documentService: DocumentService) { }
constructor(private documentService: DocumentService) {
}
ngOnInit() { ngOnInit() {
this._docSub = this.documentService.currentDocument.pipe( this._docSub = this.documentService.currentDocument.pipe(
startWith({ id: '', doc: 'Select an existing document or create a new one to get started'}) startWith({id: '', doc: 'Select an existing document or create a new one to get started'})
).subscribe(document => this.document = document); ).subscribe(document => this.document = document);
} }

@ -1,31 +1,35 @@
<div id="home" <div id="home"
infinite-scroll infinite-scroll
[infiniteScrollDistance]="0.5" [infiniteScrollDistance]="0.5"
[scrollWindow]="false" [scrollWindow]="false"
(scrolled)="onScroll()"> (scrolled)="onScroll()">
<div [hidden]="!loggedIn"> <div [hidden]="!loggedIn">
<mat-card > <mat-card>
<mat-card-content> <mat-card-content>
<mat-form-field id="input"> <mat-form-field id="input">
<textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue" mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea> <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue"
mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
<button mat-button matSuffix mat-icon-button> <button mat-button matSuffix mat-icon-button>
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<p id="check"> <p id="check">
<mat-checkbox color="primary" [(ngModel)]="checked" checked="checked">I protected the environment.</mat-checkbox> <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked">I protected the environment.
</mat-checkbox>
</p> </p>
<mat-form-field id="action-chooser" *ngIf="checked"> <mat-form-field id="action-chooser" *ngIf="checked">
<mat-label>What did you do?</mat-label> <mat-label>What did you do?</mat-label>
<mat-select [(ngModel)]="activityId" name="action"> <mat-select [(ngModel)]="activityId" name="action">
<mat-option>nothing ;)</mat-option> <mat-option>nothing ;)</mat-option>
<mat-option *ngFor="let action of actionlist.Actions" [value]="action.id" [matTooltip]="action.description" matTooltipShowDelay="200"> <mat-option *ngFor="let action of actionlist.Actions" [value]="action.id" [matTooltip]="action.description"
matTooltipShowDelay="200">
{{action.name}} ({{action.description}}) {{action.name}} ({{action.description}})
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-error *ngIf="errorOccurred && textInputValue">{{getErrorMessage()}}</mat-error> <mat-error *ngIf="errorOccurred && textInputValue">{{getErrorMessage()}}</mat-error>
<button mat-raised-button *ngIf="textInputValue" color="primary" id="post-button" (click)=createPost(content,activityId)> <button mat-raised-button *ngIf="textInputValue" color="primary" id="post-button"
(click)=createPost(content,activityId)>
POST POST
</button> </button>
</mat-card-content> </mat-card-content>
@ -34,26 +38,27 @@ infinite-scroll
<div [hidden]="loggedIn"> <div [hidden]="loggedIn">
<mat-card id="info"> <mat-card id="info">
<mat-card-header> <mat-card-header>
<mat-card-title > <mat-card-title>
You need to <a routerLink="/login" class="primary-color">login</a> to post something. You need to <a routerLink="/login" class="primary-color">login</a> to post something.
</mat-card-title> </mat-card-title>
</mat-card-header> </mat-card-header>
</mat-card> </mat-card>
</div> </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" [(ngModel)]="view" value="view"> <mat-button-toggle-group id="feedchooser" [(ngModel)]="view" value="view">
<mat-button-toggle (click)="showNew()" value="new">New</mat-button-toggle> <mat-button-toggle (click)="showNew()" value="new">New</mat-button-toggle>
<mat-button-toggle (click)="showMostLiked()" value="mostliked">Most Liked</mat-button-toggle> <mat-button-toggle (click)="showMostLiked()" value="mostliked">Most Liked</mat-button-toggle>
</mat-button-toggle-group> </mat-button-toggle-group>
</div> </div>
<div id="complete-feed"> <div id="complete-feed">
<div id="feedlist"> <div id="feedlist">
<feed-postlist [childPostList]="parentSelectedPostList"></feed-postlist> <feed-postlist [childPostList]="parentSelectedPostList"></feed-postlist>
<div style="height: 60px;" [hidden]='(!loadingNew && view === "new") || (!loadingMostLiked && view === "mostliked") '> <div style="height: 60px;"
<!--<mat-spinner *ngIf='loadingNew && view === "mostLiked"' style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>--> [hidden]='(!loadingNew && view === "new") || (!loadingMostLiked && view === "mostliked") '>
<!--<mat-spinner *ngIf='loadingNew && view === "mostLiked"' style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>-->
<mat-spinner style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner> <mat-spinner style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>

@ -3,43 +3,44 @@
.primary-color .primary-color
color: $primary-color color: $primary-color
#home #home
width: 100% width: 100%
height: 100% height: 100%
overflow-y: scroll overflow-y: scroll
#complete-feed #complete-feed
box-sizing: border-box box-sizing: border-box
display: flex display: flex
width: 100% width: 100%
padding: 0.5em padding: 0.5em
#info #info
::ng-deep .mat-card-header-text ::ng-deep .mat-card-header-text
margin: 0px margin: 0px
#feedlist #feedlist
width: 100% width: 100%
#input #input
width: 100% width: 100%
padding-left: 0.5em padding-left: 0.5em
padding-right: 0.5em padding-right: 0.5em
#action-chooser #action-chooser
width: 100% width: 100%
padding-left: 0.5em padding-left: 0.5em
padding-right: 0.5em padding-right: 0.5em
#check #check
margin: 0 margin: 0
padding-left: 0.5em padding-left: 0.5em
#post-button #post-button
width: 100% width: 100%
padding-left: 0.5em padding-left: 0.5em
padding-right: 0.5em padding-right: 0.5em
margin-top: 0.5em margin-top: 0.5em

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { FeedComponent } from './feed.component'; import {FeedComponent} from './feed.component';
describe('FeedComponent', () => { describe('FeedComponent', () => {
let component: FeedComponent; let component: FeedComponent;
@ -8,9 +8,9 @@ describe('FeedComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ FeedComponent ] declarations: [FeedComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -19,7 +19,7 @@
</div> </div>
</div>--> </div>-->
<mat-card class="post" *ngFor = "let post of childPostList" [class.selected]="post === selectedPost" tabindex="0"> <mat-card class="post" *ngFor="let post of childPostList" [class.selected]="post === selectedPost" tabindex="0">
<mat-card-header> <mat-card-header>
<div mat-card-avatar> <div mat-card-avatar>
<img class="profile-picture" [src]="post.author.profilePicture"/> <img class="profile-picture" [src]="post.author.profilePicture"/>
@ -34,7 +34,7 @@
</button> </button>
</mat-menu> </mat-menu>
</div> </div>
<!-- <div mat-card-avatar class="example-header-image"></div> --> <!-- <div mat-card-avatar class="example-header-image"></div> -->
<mat-card-title> <mat-card-title>
{{post.author.name}} {{post.author.name}}
<!--<a class="mat-card-subtitle" routerLink="/profile/{{post.author.id}}">@{{post.author.handle}}</a>--> <!--<a class="mat-card-subtitle" routerLink="/profile/{{post.author.id}}">@{{post.author.handle}}</a>-->
@ -46,7 +46,7 @@
</mat-card-header> </mat-card-header>
<!--<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">--> <!--<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">-->
<mat-card-content> <mat-card-content>
<p [innerHTML]="post.htmlContent"></p> <p [innerHTML]="post.htmlContent"></p>
</mat-card-content> </mat-card-content>
<mat-card-actions> <mat-card-actions>
<button mat-button (click)="voteUp(post)" matTooltip="vote up" matTooltipShowDelay="500"> <button mat-button (click)="voteUp(post)" matTooltip="vote up" matTooltipShowDelay="500">

@ -3,38 +3,47 @@
$mat-card-header-size: 40px !default $mat-card-header-size: 40px !default
.post .post
box-sizing: border-box box-sizing: border-box
width: 100% width: 100%
margin-top: 0.5em margin-top: 0.5em
outline: none outline: none
user-select: none user-select: none
::ng-deep .mat-card-header-text
margin-top: 10px ::ng-deep .mat-card-header-text
.mat-card-subtitle margin-top: 10px
display: contents
.mat-card-content .mat-card-subtitle
overflow: auto display: contents
a:hover
cursor: pointer .mat-card-content
#button-box overflow: auto
text-align: right
margin-left: auto a:hover
::ng-deep img cursor: pointer
max-width: 100%
height: auto #button-box
border-radius: 4px text-align: right
.mat-button margin-left: auto
min-width: 32px !important
padding: 0 ::ng-deep img
margin: 0 max-width: 100%
margin-left: 8px height: auto
.profile-picture border-radius: 4px
border-radius: 50%
width: $mat-card-header-size .mat-button
height: $mat-card-header-size min-width: 32px !important
padding: 0
.activity-info margin: 0
display: contents margin-left: 8px
.span
margin-left: 32px .profile-picture
border-radius: 50%
width: $mat-card-header-size
height: $mat-card-header-size
.activity-info
display: contents
.span
margin-left: 32px

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { PostlistComponent } from './postlist.component'; import {PostlistComponent} from './postlist.component';
describe('PostlistComponent', () => { describe('PostlistComponent', () => {
let component: PostlistComponent; let component: PostlistComponent;
@ -8,9 +8,9 @@ describe('PostlistComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ PostlistComponent ] declarations: [PostlistComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,7 +1,7 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import { Post } from 'src/app/models/post'; import {Post} from 'src/app/models/post';
import { FeedService } from 'src/app/services/feed/feed.service'; import {FeedService} from 'src/app/services/feed/feed.service';
import { Router } from '@angular/router'; import {Router} from '@angular/router';
@Component({ @Component({
selector: 'feed-postlist', selector: 'feed-postlist',
@ -14,7 +14,8 @@ export class PostlistComponent implements OnInit {
@Output() voteEvent = new EventEmitter<boolean>(); @Output() voteEvent = new EventEmitter<boolean>();
selectedPost: Post; selectedPost: Post;
constructor(private feedService: FeedService, private router: Router) { } constructor(private feedService: FeedService, private router: Router) {
}
ngOnInit() { ngOnInit() {
} }

@ -1,118 +1,121 @@
<div id="profile-page"> <div id="profile-page">
<div id="profilecontainer" *ngIf="!groupNotFound && !loading"> <div id="profilecontainer" *ngIf="!groupNotFound && !loading">
<!--on small screen--> <!--on small screen-->
<mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true"> <mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true">
<mat-toolbar-row> <mat-toolbar-row>
<div class="profile-picture"></div> <div class="profile-picture"></div>
<span id="username">{{groupProfile.name}}</span> <span id="username">{{groupProfile.name}}</span>
<div class="button-box">
<button mat-icon-button
class="request-button"
matTooltip="join group" matTooltipShowDelay="500"
(click)="joinGroup(groupProfile)"
[disabled]="!groupProfile.allowedToJoinGroup">
<mat-icon>group_add</mat-icon>
</button>
<button mat-icon-button
class="request-button"
matTooltip="create event" matTooltipShowDelay="500"
(click)="openDialog()"
[disabled]="!isAdmin">
<mat-icon>event</mat-icon>
</button>
</div>
</mat-toolbar-row>
<mat-toolbar-row>
<div class="info-box">
<span id="handle" class="pointer"
(click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}}
@{{groupProfile.creator.handle}}</span>
</div>
</mat-toolbar-row>
<mat-toolbar-row>
<div class="info-box">
<span class="info">{{groupProfile.members.length}} member(s)</span>
</div>
</mat-toolbar-row>
</mat-toolbar>
<!--on big screen-->
<mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
<mat-toolbar-row>
<div class="profile-picture"></div>
<span id="username">{{groupProfile.name}}</span>
<span id="handle" class="pointer"
(click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}}
@{{groupProfile.creator.handle}}</span>
<div class="button-box">
<button mat-icon-button
class="request-button"
matTooltip="join group" matTooltipShowDelay="500"
(click)="joinGroup(groupProfile)"
[disabled]="!groupProfile.allowedToJoinGroup">
<mat-icon>group_add</mat-icon>
</button>
<button mat-icon-button
class="request-button"
matTooltip="create event" matTooltipShowDelay="500"
(click)="openDialog()"
[disabled]="!isAdmin">
<mat-icon>event</mat-icon>
</button>
</div>
</mat-toolbar-row>
<mat-toolbar-row>
<div class="info-box">
<span class="info">{{groupProfile.members.length}} member(s)</span>
</div>
</mat-toolbar-row>
</mat-toolbar>
<div id="accordion">
<mat-accordion>
<mat-expansion-panel *ngIf="groupProfile.events.length > 0" expanded>
<mat-expansion-panel-header>
<mat-panel-title>
Events
</mat-panel-title>
</mat-expansion-panel-header>
<div class="list">
<mat-card class="card" *ngFor="let event of groupProfile.events"
[class.selected]="event === selectedEvent"
tabindex="0">
<mat-card-header>
<mat-card-title>{{event.name}}</mat-card-title>
<mat-card-subtitle>{{event.date}}</mat-card-subtitle>
<div class="button-box"> <div class="button-box">
<button mat-icon-button <button mat-icon-button class="request-button"
class="request-button" matTooltip="join event" matTooltipShowDelay="500"
matTooltip="join group" matTooltipShowDelay="500" (click)="joinEvent(event)"
(click)="joinGroup(groupProfile)" [disabled]="event.joined">
[disabled]="!groupProfile.allowedToJoinGroup"> <mat-icon *ngIf="event.joined" color="primary">event_available</mat-icon>
<mat-icon>group_add</mat-icon> <mat-icon *ngIf="!event.joined">event_available</mat-icon>
</button> </button>
<button mat-icon-button <button mat-icon-button class="request-button"
class="request-button" matTooltip="leave event" matTooltipShowDelay="500"
matTooltip="create event" matTooltipShowDelay="500" (click)="leaveEvent(event)"
(click)="openDialog()" [disabled]="!event.joined">
[disabled]="!isAdmin"> <mat-icon>event_busy</mat-icon>
<mat-icon>event</mat-icon> </button>
</button>
</div> </div>
</mat-toolbar-row> </mat-card-header>
<mat-toolbar-row> </mat-card>
<div class="info-box">
<span id="handle" class="pointer" (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}</span>
</div>
</mat-toolbar-row>
<mat-toolbar-row>
<div class="info-box">
<span class="info">{{groupProfile.members.length}} member(s)</span>
</div>
</mat-toolbar-row>
</mat-toolbar>
<!--on big screen-->
<mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
<mat-toolbar-row>
<div class="profile-picture"></div>
<span id="username">{{groupProfile.name}}</span>
<span id="handle" class="pointer" (click)="showUserProfile(groupProfile.creator)">created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}</span>
<div class="button-box">
<button mat-icon-button
class="request-button"
matTooltip="join group" matTooltipShowDelay="500"
(click)="joinGroup(groupProfile)"
[disabled]="!groupProfile.allowedToJoinGroup">
<mat-icon>group_add</mat-icon>
</button>
<button mat-icon-button
class="request-button"
matTooltip="create event" matTooltipShowDelay="500"
(click)="openDialog()"
[disabled]="!isAdmin">
<mat-icon>event</mat-icon>
</button>
</div>
</mat-toolbar-row>
<mat-toolbar-row>
<div class="info-box">
<span class="info">{{groupProfile.members.length}} member(s)</span>
</div>
</mat-toolbar-row>
</mat-toolbar>
<div id="accordion">
<mat-accordion>
<mat-expansion-panel *ngIf="groupProfile.events.length > 0" expanded>
<mat-expansion-panel-header>
<mat-panel-title>
Events
</mat-panel-title>
</mat-expansion-panel-header>
<div class="list">
<mat-card class="card" *ngFor="let event of groupProfile.events"
[class.selected]="event === selectedEvent"
tabindex="0">
<mat-card-header>
<mat-card-title>{{event.name}}</mat-card-title>
<mat-card-subtitle >{{event.date}}</mat-card-subtitle>
<div class="button-box">
<button mat-icon-button class="request-button"
matTooltip="join event" matTooltipShowDelay="500"
(click)="joinEvent(event)"
[disabled]="event.joined">
<mat-icon *ngIf="event.joined" color="primary">event_available</mat-icon>
<mat-icon *ngIf="!event.joined">event_available</mat-icon>
</button>
<button mat-icon-button class="request-button"
matTooltip="leave event" matTooltipShowDelay="500"
(click)="leaveEvent(event)"
[disabled]="!event.joined">
<mat-icon>event_busy</mat-icon>
</button>
</div>
</mat-card-header>
</mat-card>
</div>
</mat-expansion-panel>
<mat-expansion-panel [expanded]="groupProfile.events.length < 1">
<mat-expansion-panel-header>
<mat-panel-title>
Members
</mat-panel-title>
</mat-expansion-panel-header>
<div class="list">
<user-list [userList]="groupProfile.members"></user-list>
</div>
</mat-expansion-panel>
</mat-accordion>
</div> </div>
</mat-expansion-panel>
<mat-expansion-panel [expanded]="groupProfile.events.length < 1">
<mat-expansion-panel-header>
<mat-panel-title>
Members
</mat-panel-title>
</mat-expansion-panel-header>
<div class="list">
<user-list [userList]="groupProfile.members"></user-list>
</div>
</mat-expansion-panel>
</mat-accordion>
</div> </div>
<div id="profilecontainer" *ngIf="groupNotFound"> </div>
<h1>Group not found :(</h1> <div id="profilecontainer" *ngIf="groupNotFound">
</div> <h1>Group not found :(</h1>
<mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner> </div>
<mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
</div> </div>

@ -26,22 +26,30 @@ $mat-card-header-size: 100px !default
.button-box .button-box
text-align: right text-align: right
margin-left: auto margin-left: auto
.request-button .request-button
margin: auto 0 margin: auto 0
#toolbar #toolbar
margin-top: 32px margin-top: 32px
.mat-toolbar-row .mat-toolbar-row
max-height: 40px max-height: 40px
.info-box .info-box
font-size: 14px font-size: 14px
margin-left: calc(100px + 0.5em) margin-left: calc(100px + 0.5em)
.info .info
margin-right: 3em margin-right: 3em
#username #username
margin: 0 0.5em margin: 0 0.5em
overflow: auto overflow: auto
#handle #handle
font-size: 14px font-size: 14px
.profile-picture .profile-picture
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg) background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
height: $mat-card-header-size height: $mat-card-header-size
@ -49,6 +57,7 @@ $mat-card-header-size: 100px !default
border-radius: 50% border-radius: 50%
flex-shrink: 0 flex-shrink: 0
background-size: cover background-size: cover
&:hover &:hover
height: 200 height: 200
// Makes `<img>` tags behave like `background-size: cover`. Not supported // Makes `<img>` tags behave like `background-size: cover`. Not supported
@ -61,27 +70,35 @@ $mat-card-header-size: 100px !default
margin-top: 0.5em margin-top: 0.5em
outline: none outline: none
user-select: none user-select: none
::ng-deep .mat-card-header-text ::ng-deep .mat-card-header-text
margin: 0 margin: 0
margin-left: 16px margin-left: 16px
.mat-card-subtitle .mat-card-subtitle
margin: 0 margin: 0
word-break: break-all word-break: break-all
.mat-card-title .mat-card-title
margin: 0 margin: 0
word-break: break-all word-break: break-all
.request-button .request-button
margin-top: 0.5em margin-top: 0.5em
margin-bottom: 0.5em margin-bottom: 0.5em
.profile-picture .profile-picture
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg) background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
background-size: cover background-size: cover
.profile-picture:hover .profile-picture:hover
cursor: pointer cursor: pointer
.pointer .pointer
cursor: pointer cursor: pointer
::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel
background: #e6e6e6 background: #e6e6e6
::ng-deep.dark-theme .mat-expansion-panel ::ng-deep.dark-theme .mat-expansion-panel
background: #121212 background: #121212

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { GroupComponent } from './group.component'; import {GroupComponent} from './group.component';
describe('GroupComponent', () => { describe('GroupComponent', () => {
let component: GroupComponent; let component: GroupComponent;
@ -8,9 +8,9 @@ describe('GroupComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ GroupComponent ] declarations: [GroupComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,12 +1,12 @@
import { Component, OnInit, ViewChild} from '@angular/core'; import {Component, OnInit, ViewChild} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router'; import {NavigationEnd, Router} from '@angular/router';
import { User } from 'src/app/models/user'; import {User} from 'src/app/models/user';
import {MatSort} from '@angular/material/sort'; import {MatSort} from '@angular/material/sort';
import { RequestService } from 'src/app/services/request/request.service'; import {RequestService} from 'src/app/services/request/request.service';
import { DatasharingService } from '../../services/datasharing.service'; import {DatasharingService} from '../../services/datasharing.service';
import { GroupService } from 'src/app/services/group/group.service'; import {GroupService} from 'src/app/services/group/group.service';
import { Group } from 'src/app/models/group'; import {Group} from 'src/app/models/group';
import { Event } from 'src/app/models/event'; import {Event} from 'src/app/models/event';
import {MatDialog, MatDialogRef} from '@angular/material/dialog'; import {MatDialog, MatDialogRef} from '@angular/material/dialog';
// DIALOG COMPONENT to create events // DIALOG COMPONENT to create events
@ -21,8 +21,8 @@ export class DialogCreateEventComponent {
public dialogRef: MatDialogRef<DialogCreateEventComponent>, public dialogRef: MatDialogRef<DialogCreateEventComponent>,
private group: GroupService, private group: GroupService,
private router: Router) { private router: Router) {
this.groupId = this.router.url.substr(this.router.url.lastIndexOf('/') + 1); this.groupId = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
} }
onNoClick(): void { onNoClick(): void {
this.dialogRef.close(); this.dialogRef.close();
@ -63,20 +63,21 @@ export class GroupComponent implements OnInit {
private requestService: RequestService, private requestService: RequestService,
private data: DatasharingService, private data: DatasharingService,
private groupService: GroupService) { private groupService: GroupService) {
router.events.forEach((event) => { router.events.forEach((event) => {
// check if url changes // check if url changes
if (event instanceof NavigationEnd) { if (event instanceof NavigationEnd) {
const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1); const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
if (this.id !== possibleID && this.id && this.router.url.includes('group/')) { if (this.id !== possibleID && this.id && this.router.url.includes('group/')) {
// reload the group // reload the group
console.log('search for group id: ' + this.router.url.substr(this.router.url.lastIndexOf('/') + 1)); console.log('search for group id: ' + this.router.url.substr(this.router.url.lastIndexOf('/') + 1));
this.ngOnInit(); this.ngOnInit();
}
} }
}); }
});
} }
@ViewChild(MatSort, {static: true}) sort: MatSort; @ViewChild(MatSort, {static: true}) sort: MatSort;
ngOnInit() { ngOnInit() {
this.loading = true; this.loading = true;
this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1); this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
@ -98,7 +99,9 @@ export class GroupComponent implements OnInit {
for (const member of this.groupProfile.members) { for (const member of this.groupProfile.members) {
member.allowedToSendRequest = this.requestService.isAllowedToSendRequest(member.userID, this.self); member.allowedToSendRequest = this.requestService.isAllowedToSendRequest(member.userID, this.self);
} }
} else { this.groupNotFound = true; } } else {
this.groupNotFound = true;
}
this.loading = false; this.loading = false;
}); });
} }

@ -1,8 +1,16 @@
<div id="content" fxShow="true" fxHide.lt-md="true"> <div id="content" fxShow="true" fxHide.lt-md="true">
<div id="chat"><home-chatmanager [hidden]="!loggedIn"></home-chatmanager></div> <div id="chat">
<div id="feed"><home-feed></home-feed></div> <home-chatmanager [hidden]="!loggedIn"></home-chatmanager>
<div class="social" [hidden]="!loggedIn"><home-social></home-social></div> </div>
<div class="social" [hidden]="loggedIn"><home-search></home-search></div> <div id="feed">
<home-feed></home-feed>
</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">
@ -11,33 +19,33 @@
<mat-tab label="Third"> <home-social ></home-social></mat-tab> <mat-tab label="Third"> <home-social ></home-social></mat-tab>
</mat-tab-group> </mat-tab-group>
--> -->
<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 disabled> <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>
<home-chatmanager class="tab-content"></home-chatmanager> <home-chatmanager class="tab-content"></home-chatmanager>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon>home</mat-icon> <mat-icon>home</mat-icon>
</ng-template> </ng-template>
<home-feed class="tab-content"></home-feed> <home-feed class="tab-content"></home-feed>
</mat-tab> </mat-tab>
<mat-tab [disabled]="!loggedIn"> <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>
<home-social class="tab-content"></home-social> <home-social class="tab-content"></home-social>
</mat-tab> </mat-tab>
<mat-tab > <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</ng-template> </ng-template>
<home-search class="tab-content"></home-search> <home-search class="tab-content"></home-search>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { HomeComponent } from './home.component'; import {HomeComponent} from './home.component';
describe('HomeComponent', () => { describe('HomeComponent', () => {
let component: HomeComponent; let component: HomeComponent;
@ -8,9 +8,9 @@ describe('HomeComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ HomeComponent ] declarations: [HomeComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { DatasharingService } from 'src/app/services/datasharing.service'; import {DatasharingService} from 'src/app/services/datasharing.service';
import { FeedService } from 'src/app/services/feed/feed.service'; import {FeedService} from 'src/app/services/feed/feed.service';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
@ -11,7 +11,8 @@ export class HomeComponent implements OnInit {
loggedIn: boolean; loggedIn: boolean;
constructor(private data: DatasharingService, private feedService: FeedService) { } constructor(private data: DatasharingService, private feedService: FeedService) {
}
ngOnInit() { ngOnInit() {
this.data.currentUserInfo.subscribe(user => { this.data.currentUserInfo.subscribe(user => {

@ -8,7 +8,7 @@
margin: 0 auto margin: 0 auto
h1.mat-display-1 h1.mat-display-1
margin: 0 margin: 0

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { ImprintComponent } from './imprint.component'; import {ImprintComponent} from './imprint.component';
describe('ImprintComponent', () => { describe('ImprintComponent', () => {
let component: ImprintComponent; let component: ImprintComponent;
@ -8,9 +8,9 @@ describe('ImprintComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ ImprintComponent ] declarations: [ImprintComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
@Component({ @Component({
selector: 'app-imprint', selector: 'app-imprint',
@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
}) })
export class ImprintComponent implements OnInit { export class ImprintComponent implements OnInit {
constructor() { } constructor() {
}
ngOnInit() { ngOnInit() {
} }

@ -1,24 +1,25 @@
<div id="login"> <div id="login">
<mat-card style="text-align: center;" > <mat-card style="text-align: center;">
<mat-card-title> <mat-card-title>
Login Login
</mat-card-title> </mat-card-title>
<mat-card-content> <mat-card-content>
<div class="example-container" (keyup.enter)="onClickSubmit(email.value,password.value)"> <div class="example-container" (keyup.enter)="onClickSubmit(email.value,password.value)">
<mat-error *ngIf="errorOccurred">{{getErrorMessage()}}</mat-error> <mat-error *ngIf="errorOccurred">{{getErrorMessage()}}</mat-error>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Enter your email" #email > <input matInput placeholder="Enter your email" #email>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" #password> <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" #password>
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide"> <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon> [attr.aria-pressed]="hide">
</button> <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</mat-form-field> </button>
</div> </mat-form-field>
<button mat-raised-button color="primary" (click)="onClickSubmit(email.value,password.value)">Login</button> </div>
<p>You aren't part of greenvironment yet?</p> <button mat-raised-button color="primary" (click)="onClickSubmit(email.value,password.value)">Login</button>
<a mat-stroked-button color="primary" routerLink="/register">Register</a> <p>You aren't part of greenvironment yet?</p>
</mat-card-content> <a mat-stroked-button color="primary" routerLink="/register">Register</a>
</mat-card> </mat-card-content>
</mat-card>
</div> </div>

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { LoginComponent } from './login.component'; import {LoginComponent} from './login.component';
describe('LoginComponent', () => { describe('LoginComponent', () => {
let component: LoginComponent; let component: LoginComponent;
@ -8,9 +8,9 @@ describe('LoginComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ LoginComponent ] declarations: [LoginComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {FormControl, Validators} from '@angular/forms'; import {FormControl, Validators} from '@angular/forms';
import { Login } from 'src/app/models/login'; import {Login} from 'src/app/models/login';
import { LoginService } from 'src/app/services/login/login.service'; import {LoginService} from 'src/app/services/login/login.service';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import * as sha512 from 'js-sha512'; import * as sha512 from 'js-sha512';
import {IErrorResponse} from '../../models/interfaces/IErrorResponse'; import {IErrorResponse} from '../../models/interfaces/IErrorResponse';
@ -16,6 +16,7 @@ export class LoginComponent implements OnInit {
constructor(private loginService: LoginService, private router: Router) { constructor(private loginService: LoginService, private router: Router) {
this.login = {passwordHash: null, email: null}; this.login = {passwordHash: null, email: null};
} }
login: Login; login: Login;
hide = true; hide = true;
errorOccurred = false; errorOccurred = false;
@ -43,7 +44,7 @@ export class LoginComponent implements OnInit {
this.errorMessage = ' '; this.errorMessage = ' ';
this.login.email = pEmail.trim().toLowerCase(); this.login.email = pEmail.trim().toLowerCase();
this.login.passwordHash = sha512.sha512(pPasswordHash); this.login.passwordHash = sha512.sha512(pPasswordHash);
this.loginService.login(this.login).subscribe( () => { this.loginService.login(this.login).subscribe(() => {
this.router.navigateByUrl('').catch((error) => { this.router.navigateByUrl('').catch((error) => {
this.errorMessage = error.message; this.errorMessage = error.message;
this.errorOccurred = true; this.errorOccurred = true;
@ -55,6 +56,7 @@ export class LoginComponent implements OnInit {
}); });
} }
ngOnInit() {} ngOnInit() {
}
} }

@ -1,20 +1,22 @@
<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"
<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 --> 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 -->
<mat-sidenav #drawer class="sidenav" <mat-sidenav #drawer class="sidenav"
fxShow="true" fxHide.gt-sm="true" fxShow="true" fxHide.gt-sm="true"
fixedInViewport="false" fixedInViewport="false"
autoFocus="false"> autoFocus="false">
<mat-toolbar class="menu-bar" *ngIf="!loggedIn">Menu</mat-toolbar> <mat-toolbar class="menu-bar" *ngIf="!loggedIn">Menu</mat-toolbar>
<mat-toolbar *ngIf="loggedIn" class="menu-bar"> <mat-toolbar *ngIf="loggedIn" class="menu-bar">
<div mat-card-avatar> <div mat-card-avatar>
<img class="profile-picture" [src]="user.profilePicture"/> <img class="profile-picture" [src]="user.profilePicture"/>
</div> </div>
<div class="hello-text-box"> <div class="hello-text-box">
<span class="hello-text">Hello, {{user.username}}</span> <span class="hello-text">Hello, {{user.username}}</span>
</div> </div>
</mat-toolbar> </mat-toolbar>
<mat-nav-list> <mat-nav-list>
<a mat-list-item routerLink="" (click)="drawer.close()">Home</a> <a mat-list-item routerLink="" (click)="drawer.close()">Home</a>
@ -24,8 +26,10 @@
<mat-divider></mat-divider> <mat-divider></mat-divider>
<div id="link-box"> <div id="link-box">
<a mat-stroked-button *ngIf="!loggedIn" class="link-button" routerLink="/register" (click)="drawer.close()">Register</a> <a mat-stroked-button *ngIf="!loggedIn" class="link-button" routerLink="/register" (click)="drawer.close()">Register</a>
<a mat-stroked-button *ngIf="!loggedIn" class="link-button" routerLink="/login" (click)="drawer.toggle()">Login</a> <a mat-stroked-button *ngIf="!loggedIn" class="link-button" routerLink="/login"
<a mat-stroked-button *ngIf="loggedIn" class="link-button" (click)="logout()" (click)="drawer.toggle()">log out</a> (click)="drawer.toggle()">Login</a>
<a mat-stroked-button *ngIf="loggedIn" class="link-button" (click)="logout()" (click)="drawer.toggle()">log
out</a>
</div> </div>
</mat-nav-list> </mat-nav-list>
</mat-sidenav> </mat-sidenav>
@ -46,26 +50,27 @@
<mat-icon *ngIf="lighttheme" svgIcon="logo" style="min-width: 35px;" routerLink="" class="link"></mat-icon> <mat-icon *ngIf="lighttheme" svgIcon="logo" style="min-width: 35px;" routerLink="" class="link"></mat-icon>
<mat-icon *ngIf="!lighttheme" svgIcon="logo_green" style="min-width: 35px;" routerLink="" class="link"></mat-icon> <mat-icon *ngIf="!lighttheme" svgIcon="logo_green" style="min-width: 35px;" routerLink="" class="link"></mat-icon>
<span routerLink="" class="link">Greenvironment</span> <span routerLink="" class="link">Greenvironment</span>
<nav mat-tab-nav-bar backgroundColor="accent" color="accent" fxShow="true" fxHide.lt-md="true" routerLinkActive #rla=""> <nav mat-tab-nav-bar backgroundColor="accent" color="accent" fxShow="true" fxHide.lt-md="true" routerLinkActive
#rla="">
<div *ngIf="loggedIn"> <div *ngIf="loggedIn">
<a mat-tab-link class="link" <a mat-tab-link class="link"
*ngFor="let link of navLinksLoggedIn" *ngFor="let link of navLinksLoggedIn"
[routerLink]="link.path" [routerLink]="link.path"
(click)="activeLink = link" (click)="activeLink = link"
routerLinkActive #rla="routerLinkActive" routerLinkActive #rla="routerLinkActive"
[routerLinkActiveOptions]="{exact:true}" [routerLinkActiveOptions]="{exact:true}"
[active]="rla.isActive"> [active]="rla.isActive">
{{link.label}} {{link.label}}
</a> </a>
</div> </div>
<div *ngIf="!loggedIn"> <div *ngIf="!loggedIn">
<a mat-tab-link class="link" <a mat-tab-link class="link"
*ngFor="let link of navLinks" *ngFor="let link of navLinks"
[routerLink]="link.path" [routerLink]="link.path"
(click)="activeLink = link" (click)="activeLink = link"
routerLinkActive #rla="routerLinkActive" routerLinkActive #rla="routerLinkActive"
[routerLinkActiveOptions]="{exact:true}" [routerLinkActiveOptions]="{exact:true}"
[active]="rla.isActive"> [active]="rla.isActive">
{{link.label}} {{link.label}}
</a> </a>
</div> </div>
@ -73,10 +78,13 @@
<!--content on BIG SCREEN--> <!--content on BIG SCREEN-->
<div id="menu-button-box"> <div id="menu-button-box">
<span class="mat-button" *ngIf="loggedIn" fxShow="true" fxHide.lt-md="true" routerLink={{profileUrl}}>Hello, {{user.username}}</span> <span class="mat-button" *ngIf="loggedIn" fxShow="true" fxHide.lt-md="true"
routerLink={{profileUrl}}>Hello, {{user.username}}</span>
<span class="mat-button" *ngIf="!loggedIn" fxShow="true" fxHide.lt-md="true" routerLink="/login"><span>Hello, Sign in</span></span> <span class="mat-button" *ngIf="!loggedIn" fxShow="true" fxHide.lt-md="true" routerLink="/login"><span>Hello, Sign in</span></span>
<button mat-icon-button [matMenuTriggerFor]="requestMenu" [disabled]="!loggedIn" id="menu-button"> <button mat-icon-button [matMenuTriggerFor]="requestMenu" [disabled]="!loggedIn" id="menu-button">
<mat-icon [matBadge]="user.receivedRequests.length" [matBadgeHidden]="!(user.receivedRequests.length > 0)" matBadgeColor="accent">notifications</mat-icon> <mat-icon [matBadge]="user.receivedRequests.length" [matBadgeHidden]="!(user.receivedRequests.length > 0)"
matBadgeColor="accent">notifications
</mat-icon>
</button> </button>
<button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button"> <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
@ -86,7 +94,8 @@
<mat-menu #requestMenu="matMenu"> <mat-menu #requestMenu="matMenu">
<span mat-menu-item disableRipple="true" disabled="true">friend requests:</span> <span mat-menu-item disableRipple="true" disabled="true">friend requests:</span>
<button mat-menu-item *ngFor = "let request of user.receivedRequests" [class.selected]="request === selectedRequest" (click)="$event.stopPropagation();" disableRipple="true"> <button mat-menu-item *ngFor="let request of user.receivedRequests"
[class.selected]="request === selectedRequest" (click)="$event.stopPropagation();" disableRipple="true">
<button mat-icon-button (click)=acceptRequest(request.senderUserID) (click)="$event.stopPropagation();"> <button mat-icon-button (click)=acceptRequest(request.senderUserID) (click)="$event.stopPropagation();">
<mat-icon>check</mat-icon> <mat-icon>check</mat-icon>
</button> </button>
@ -108,7 +117,7 @@
</mat-slide-toggle> </mat-slide-toggle>
</button> </button>
<div [hidden]="!loggedIn"> <div [hidden]="!loggedIn">
<button mat-menu-item (click)="logout()" > <button mat-menu-item (click)="logout()">
<mat-icon>exit_to_app</mat-icon> <mat-icon>exit_to_app</mat-icon>
<span>log out</span> <span>log out</span>
</button> </button>

@ -6,15 +6,19 @@
.menu-bar .menu-bar
position: inherit !important position: inherit !important
.mat-card-avatar .mat-card-avatar
display: contents display: contents
.profile-picture .profile-picture
width: 52px width: 52px
height: 52px height: 52px
border-radius: 50% border-radius: 50%
flex-shrink: 0 flex-shrink: 0
.hello-text-box .hello-text-box
margin-left: 8px margin-left: 8px
.hello-text .hello-text
white-space: normal white-space: normal
font-size: initial font-size: initial
@ -26,7 +30,7 @@
.sidenav .mat-toolbar .sidenav .mat-toolbar
//background: inherit //background: inherit
.mat-toolbar .mat-toolbar
height: 56px height: 56px
@ -34,10 +38,13 @@
//position: sticky //position: sticky
top: 0 top: 0
z-index: 999 z-index: 999
.mat-tab-nav-bar .mat-tab-nav-bar
height: 56px height: 56px
.mat-tab-links .mat-tab-links
height: 56px height: 56px
.mat-tab-link .mat-tab-link
height: 56px height: 56px
@ -53,7 +60,7 @@
margin-bottom: 0.5em margin-bottom: 0.5em
::ng-deep .mat-tab-link ::ng-deep .mat-tab-link
min-width: 5em!important min-width: 5em !important
#menu-button-box #menu-button-box
text-align: right text-align: right

@ -1,13 +1,13 @@
import { LayoutModule } from '@angular/cdk/layout'; import {LayoutModule} from '@angular/cdk/layout';
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button'; import {MatButtonModule} from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import {MatIconModule} from '@angular/material/icon';
import { MatListModule } from '@angular/material/list'; import {MatListModule} from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav'; import {MatSidenavModule} from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar'; import {MatToolbarModule} from '@angular/material/toolbar';
import { MainNavigationComponent } from './main-navigation.component'; import {MainNavigationComponent} from './main-navigation.component';
describe('MainNavigationComponent', () => { describe('MainNavigationComponent', () => {
let component: MainNavigationComponent; let component: MainNavigationComponent;

@ -1,14 +1,14 @@
import { Component, OnInit, HostBinding } from '@angular/core'; import {Component, HostBinding, OnInit} from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; import {BreakpointObserver} from '@angular/cdk/layout';
import { DatasharingService } from '../../services/datasharing.service'; import {DatasharingService} from '../../services/datasharing.service';
import { RequestService } from '../../services/request/request.service'; import {RequestService} from '../../services/request/request.service';
import { SettingsService } from '../../services/settings/settings.service'; import {SettingsService} from '../../services/settings/settings.service';
import { environment } from 'src/environments/environment'; import {environment} from 'src/environments/environment';
import { Levellist } from 'src/app/models/levellist'; import {Levellist} from 'src/app/models/levellist';
import { Http } from '@angular/http'; import {Http} from '@angular/http';
import { Router } from '@angular/router'; import {Router} from '@angular/router';
import { User } from 'src/app/models/user'; import {User} from 'src/app/models/user';
import { OverlayContainer} from '@angular/cdk/overlay'; import {OverlayContainer} from '@angular/cdk/overlay';
@Component({ @Component({
selector: 'app-main-navigation', selector: 'app-main-navigation',
@ -27,6 +27,7 @@ export class MainNavigationComponent implements OnInit {
) { ) {
this.overlay = overlayContainer.getContainerElement(); this.overlay = overlayContainer.getContainerElement();
} }
loggedIn = false; loggedIn = false;
userId: number; userId: number;
username: string; username: string;
@ -41,18 +42,19 @@ export class MainNavigationComponent implements OnInit {
overlay; overlay;
navLinksLoggedIn = [ navLinksLoggedIn = [
{ path: '', label: 'Home' }, {path: '', label: 'Home'},
{ path: this.profileUrl, label: 'Profile' }, {path: this.profileUrl, label: 'Profile'},
{ path: '/about', label: 'About' }, {path: '/about', label: 'About'},
{ path: '/imprint', label: 'Imprint' }, {path: '/imprint', label: 'Imprint'},
]; ];
navLinks = [ navLinks = [
{ path: '', label: 'Home' }, {path: '', label: 'Home'},
{ path: '/about', label: 'About' }, {path: '/about', label: 'About'},
{ path: '/imprint', label: 'Imprint' }, {path: '/imprint', label: 'Imprint'},
]; ];
@HostBinding('class') componentCssClass; @HostBinding('class') componentCssClass;
ngOnInit() { ngOnInit() {
this.data.currentUserInfo.subscribe(user => { this.data.currentUserInfo.subscribe(user => {
this.user = user; this.user = user;
@ -75,47 +77,52 @@ export class MainNavigationComponent implements OnInit {
toggleTheme() { toggleTheme() {
if (this.overlay.classList.contains('dark-theme')) { if (this.overlay.classList.contains('dark-theme')) {
this.overlay.classList.remove('dark-theme'); this.overlay.classList.remove('dark-theme');
this.overlay.classList.add('light-theme'); this.overlay.classList.add('light-theme');
this.onSetTheme('light-theme'); this.onSetTheme('light-theme');
this.lighttheme = true; this.lighttheme = true;
this.settingsService.setDarkModeActive(false); this.settingsService.setDarkModeActive(false);
} else if (this.overlay.classList.contains('light-theme')) { } else if (this.overlay.classList.contains('light-theme')) {
this.overlay.classList.remove('light-theme'); this.overlay.classList.remove('light-theme');
this.overlay.classList.add('dark-theme'); this.overlay.classList.add('dark-theme');
this.onSetTheme('dark-theme'); this.onSetTheme('dark-theme');
this.lighttheme = false; this.lighttheme = false;
this.settingsService.setDarkModeActive(true); this.settingsService.setDarkModeActive(true);
} else { } else {
this.overlay.classList.add('dark-theme'); this.overlay.classList.add('dark-theme');
this.onSetTheme('dark-theme'); this.onSetTheme('dark-theme');
this.lighttheme = false; this.lighttheme = false;
this.settingsService.setDarkModeActive(true); this.settingsService.setDarkModeActive(true);
} }
} }
updateLinks() { updateLinks() {
this.navLinksLoggedIn = [ this.navLinksLoggedIn = [
{ path: '', label: 'Home' }, {path: '', label: 'Home'},
{ path: this.profileUrl, label: 'Profile' }, {path: this.profileUrl, label: 'Profile'},
{ path: '/about', label: 'About' }, {path: '/about', label: 'About'},
{ path: '/imprint', label: 'Imprint' }, {path: '/imprint', label: 'Imprint'},
]; ];
} }
onSetTheme(theme) { onSetTheme(theme) {
this.overlayContainer.getContainerElement().classList.add(theme); this.overlayContainer.getContainerElement().classList.add(theme);
this.componentCssClass = theme; this.componentCssClass = theme;
} }
logout() { logout() {
const url = environment.graphQLUrl; const url = environment.graphQLUrl;
const headers = new Headers(); const headers = new Headers();
headers.set('Content-Type', 'application/json'); headers.set('Content-Type', 'application/json');
const body = {query: `mutation { const body = {
query: `mutation {
logout logout
}`}; }`
};
this.http.post(url, body).subscribe(response => { this.http.post(url, body).subscribe(response => {
console.log(response.text()); }); console.log(response.text());
});
this.loggedIn = false; this.loggedIn = false;
const user = new User(); const user = new User();
user.loggedIn = false; user.loggedIn = false;

@ -1,4 +1,4 @@
import {Component, EventEmitter} from '@angular/core'; import {Component} from '@angular/core';
import {MatDialogRef} from '@angular/material/dialog'; import {MatDialogRef} from '@angular/material/dialog';
import {SelfService} from '../../../services/selfservice/self.service'; import {SelfService} from '../../../services/selfservice/self.service';
import {environment} from '../../../../environments/environment'; import {environment} from '../../../../environments/environment';
@ -13,12 +13,12 @@ export class DialogFileUploadComponent {
public errorOccurred = false; public errorOccurred = false;
public uploading = false; public uploading = false;
private errorMessage: string; private errorMessage: string;
public profilePictureUrl: BehaviorSubject<string|null>; public profilePictureUrl: BehaviorSubject<string | null>;
private file; private file;
public localFileUrl; public localFileUrl;
constructor(public dialogRef: MatDialogRef<DialogFileUploadComponent>, private selfService: SelfService) { constructor(public dialogRef: MatDialogRef<DialogFileUploadComponent>, private selfService: SelfService) {
this.profilePictureUrl = new BehaviorSubject<string|null>(null); this.profilePictureUrl = new BehaviorSubject<string | null>(null);
} }
/** /**

@ -1,83 +1,83 @@
<div id="profile-page"> <div id="profile-page">
<div id="profilecontainer" *ngIf="!profileNotFound && !loading"> <div id="profilecontainer" *ngIf="!profileNotFound && !loading">
<!--on small screen--> <!--on small screen-->
<mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true"> <mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true">
<mat-toolbar-row> <mat-toolbar-row>
<div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="openFileUploadDialog()"> <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="openFileUploadDialog()">
<img class="profile-picture" [src]="userProfile.profilePicture"/> <img class="profile-picture" [src]="userProfile.profilePicture"/>
<mat-icon id="icon">camera_alt</mat-icon> <mat-icon id="icon">camera_alt</mat-icon>
</div> </div>
<div *ngIf="!ownProfile"> <div *ngIf="!ownProfile">
<img class="profile-picture" [src]="userProfile.profilePicture"/> <img class="profile-picture" [src]="userProfile.profilePicture"/>
</div> </div>
<span id="username">{{userProfile.username}}</span> <span id="username">{{userProfile.username}}</span>
<button mat-icon-button <button mat-icon-button
class="request-button" class="request-button"
(click)="sendFriendRequest(userProfile)" (click)="sendFriendRequest(userProfile)"
[disabled]="!userProfile.allowedToSendRequest"> [disabled]="!userProfile.allowedToSendRequest">
<mat-icon>person_add</mat-icon> <mat-icon>person_add</mat-icon>
</button> </button>
</mat-toolbar-row> </mat-toolbar-row>
<mat-toolbar-row> <mat-toolbar-row>
<div class="info-box"> <div class="info-box">
<span id="handle">@{{userProfile.handle}}</span> <span id="handle">@{{userProfile.handle}}</span>
</div> </div>
</mat-toolbar-row> </mat-toolbar-row>
<mat-toolbar-row> <mat-toolbar-row>
<div> <div>
<span class="info">{{rankname}} ({{userProfile.points}} points)</span> <span class="info">{{rankname}} ({{userProfile.points}} points)</span>
</div> </div>
</mat-toolbar-row> </mat-toolbar-row>
<mat-toolbar-row> <mat-toolbar-row>
<div> <div>
<span class="info">{{userProfile.friendCount}} friends</span> <span class="info">{{userProfile.friendCount}} friends</span>
<span class="info">{{userProfile.groupCount}} groups</span> <span class="info">{{userProfile.groupCount}} groups</span>
</div> </div>
</mat-toolbar-row> </mat-toolbar-row>
<mat-toolbar-row> <mat-toolbar-row>
<div> <div>
<span class="info">joined on {{userProfile.joinedAt}}</span> <span class="info">joined on {{userProfile.joinedAt}}</span>
</div>
</mat-toolbar-row>
</mat-toolbar>
<!--on big screen-->
<mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
<mat-toolbar-row>
<div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="openFileUploadDialog()">
<img class="profile-picture" [src]="userProfile.profilePicture"/>
<mat-icon id="icon">camera_alt</mat-icon>
</div>
<div *ngIf="!ownProfile">
<img class="profile-picture" [src]="userProfile.profilePicture"/>
</div>
<span id="username">{{userProfile.username}}</span>
<span id="handle">@{{userProfile.handle}}</span>
<button mat-icon-button
class="request-button"
(click)="sendFriendRequest(userProfile)"
[disabled]="!userProfile.allowedToSendRequest">
<mat-icon>person_add</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row>
<div class="info-box">
<span class="info">{{rankname}} ({{userProfile.points}} points)</span>
<span class="info">{{userProfile.friendCount}} friends</span>
<span class="info">{{userProfile.groupCount}} groups</span>
<span class="info">joined on {{userProfile.joinedAt}}</span>
</div>
</mat-toolbar-row>
</mat-toolbar>
<div id="postlist">
<feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>
</div> </div>
<div id="profile"> </mat-toolbar-row>
</mat-toolbar>
<!--on big screen-->
<mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
<mat-toolbar-row>
<div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="openFileUploadDialog()">
<img class="profile-picture" [src]="userProfile.profilePicture"/>
<mat-icon id="icon">camera_alt</mat-icon>
</div>
<div *ngIf="!ownProfile">
<img class="profile-picture" [src]="userProfile.profilePicture"/>
</div>
<span id="username">{{userProfile.username}}</span>
<span id="handle">@{{userProfile.handle}}</span>
<button mat-icon-button
class="request-button"
(click)="sendFriendRequest(userProfile)"
[disabled]="!userProfile.allowedToSendRequest">
<mat-icon>person_add</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row>
<div class="info-box">
<span class="info">{{rankname}} ({{userProfile.points}} points)</span>
<span class="info">{{userProfile.friendCount}} friends</span>
<span class="info">{{userProfile.groupCount}} groups</span>
<span class="info">joined on {{userProfile.joinedAt}}</span>
</div> </div>
</mat-toolbar-row>
</mat-toolbar>
<div id="postlist">
<feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>
</div> </div>
<div id="profilecontainer" *ngIf="profileNotFound"> <div id="profile">
<h1>Profile not found :(</h1>
</div> </div>
<mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner> </div>
<div id="profilecontainer" *ngIf="profileNotFound">
<h1>Profile not found :(</h1>
</div>
<mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
</div> </div>

@ -17,25 +17,33 @@
margin: 0 auto margin: 0 auto
width: 100% width: 100%
max-width: 690px max-width: 690px
.icon-box .icon-box
text-align: right text-align: right
width: 100% width: 100%
.request-button .request-button
margin-top: 0.5em margin-top: 0.5em
margin-bottom: 0.5em margin-bottom: 0.5em
margin-left: auto margin-left: auto
#toolbar #toolbar
margin-top: 32px margin-top: 32px
.mat-toolbar-row .mat-toolbar-row
max-height: 40px max-height: 40px
.info-box .info-box
font-size: 14px font-size: 14px
margin-left: calc(100px + 0.5em) margin-left: calc(100px + 0.5em)
.info .info
margin-right: 1em margin-right: 1em
font-size: 14px font-size: 14px
#username #username
margin: 0 0.5em margin: 0 0.5em
#handle #handle
font-size: 14px font-size: 14px
@ -52,24 +60,26 @@ $mat-card-header-size: 100px !default
display: flex display: flex
justify-content: center justify-content: center
align-items: center align-items: center
&:hover &:hover
.profile-picture .profile-picture
filter: brightness(70%) filter: brightness(70%)
#icon #icon
display: block display: block
filter: none filter: none
// Makes `<img>` tags behave like `background-size: cover`. Not supported // Makes `<img>` tags behave like `background-size: cover`. Not supported
// in IE, but we're using it as a progressive enhancement. // in IE, but we're using it as a progressive enhancement.
.profile-picture .profile-picture
height: $mat-card-header-size height: $mat-card-header-size
width: $mat-card-header-size width: $mat-card-header-size
border-radius: 50% border-radius: 50%
flex-shrink: 0 flex-shrink: 0
background-size: cover background-size: cover
transition-duration: 0.5s transition-duration: 0.5s
z-index: 10 z-index: 10
object-fit: cover object-fit: cover
#postlist #postlist
margin: 0.5em auto margin: 0.5em auto

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { ProfileComponent } from './profile.component'; import {ProfileComponent} from './profile.component';
describe('ProfileComponent', () => { describe('ProfileComponent', () => {
let component: ProfileComponent; let component: ProfileComponent;
@ -8,9 +8,9 @@ describe('ProfileComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ ProfileComponent ] declarations: [ProfileComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,12 +1,11 @@
import { Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router'; import {NavigationEnd, Router} from '@angular/router';
import { User } from 'src/app/models/user'; import {User} from 'src/app/models/user';
import { Levellist } from 'src/app/models/levellist'; import {Levellist} from 'src/app/models/levellist';
import { RequestService } from 'src/app/services/request/request.service'; import {RequestService} from 'src/app/services/request/request.service';
import { DatasharingService } from '../../services/datasharing.service'; import {DatasharingService} from '../../services/datasharing.service';
import { ProfileService } from 'src/app/services/profile/profile.service'; import {ProfileService} from 'src/app/services/profile/profile.service';
import { HttpClient } from '@angular/common/http'; import {HttpClient} from '@angular/common/http';
import { environment } from 'src/environments/environment';
import {MatSnackBar} from '@angular/material/snack-bar'; import {MatSnackBar} from '@angular/material/snack-bar';
import {SelfService} from '../../services/selfservice/self.service'; import {SelfService} from '../../services/selfservice/self.service';
import {MatDialog} from '@angular/material'; import {MatDialog} from '@angular/material';
@ -37,16 +36,16 @@ export class ProfileComponent implements OnInit {
private profileService: ProfileService, private profileService: ProfileService,
private selfService: SelfService, private selfService: SelfService,
public dialog: MatDialog) { public dialog: MatDialog) {
router.events.forEach((event) => { 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) // 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 (event instanceof NavigationEnd) {
const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1); const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
if (this.id !== possibleID && this.id && this.router.url.includes('profile/')) { if (this.id !== possibleID && this.id && this.router.url.includes('profile/')) {
// reload the user // reload the user
this.ngOnInit(); this.ngOnInit();
}
} }
}); }
});
} }
ngOnInit() { ngOnInit() {
@ -57,15 +56,17 @@ export class ProfileComponent implements OnInit {
}); });
this.profileService.getUserData(this.id); this.profileService.getUserData(this.id);
this.profileService.proflile.subscribe(response => { this.profileService.proflile.subscribe(response => {
if (response) { if (response) {
this.userProfile = response; this.userProfile = response;
// tslint:disable-next-line:max-line-length // tslint:disable-next-line:max-line-length
this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(this.userProfile.userID, this.self); this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(this.userProfile.userID, this.self);
this.ownProfile = this.userProfile.userID === this.self.userID; this.ownProfile = this.userProfile.userID === this.self.userID;
this.rankname = this.levellist.getLevelName(this.userProfile.level); this.rankname = this.levellist.getLevelName(this.userProfile.level);
} else { this.profileNotFound = true; } } else {
this.loading = false; this.profileNotFound = true;
}); }
this.loading = false;
});
} }
public sendFriendRequest(user: User) { public sendFriendRequest(user: User) {

@ -1,33 +1,38 @@
<div id="register"> <div id="register">
<mat-card style="text-align: center;" > <mat-card style="text-align: center;">
<mat-card-title> <mat-card-title>
Register Register
</mat-card-title> </mat-card-title>
<mat-card-content> <mat-card-content>
<div class="example-container" (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)"> <div class="example-container"
(keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">
<mat-error *ngIf="errorOccurred">{{errorMessage}}</mat-error> <mat-error *ngIf="errorOccurred">{{errorMessage}}</mat-error>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Enter your email" #email > <input matInput placeholder="Enter your email" #email>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Enter your username" #username > <input matInput placeholder="Enter your username" #username>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide1 ? 'password' : 'text'" #password> <input matInput placeholder="Enter your password" [type]="hide1 ? 'password' : 'text'" #password>
<button mat-icon-button matSuffix (click)="hide1 = !hide1" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide1"> <button mat-icon-button matSuffix (click)="hide1 = !hide1" [attr.aria-label]="'Hide password'"
<mat-icon>{{hide1 ? 'visibility_off' : 'visibility'}}</mat-icon> [attr.aria-pressed]="hide1">
<mat-icon>{{hide1 ? 'visibility_off' : 'visibility'}}</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Repeat your password" [type]="hide2 ? 'password' : 'text'" #repeatpassword> <input matInput placeholder="Repeat your password" [type]="hide2 ? 'password' : 'text'" #repeatpassword>
<button mat-icon-button matSuffix (click)="hide2 = !hide2" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide2"> <button mat-icon-button matSuffix (click)="hide2 = !hide2" [attr.aria-label]="'Hide password'"
<mat-icon>{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon> [attr.aria-pressed]="hide2">
<mat-icon>{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
</div> </div>
<button mat-raised-button color="primary" (click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register</button> <button mat-raised-button color="primary"
(click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register
</button>
<p>You are already part of greenvironment?</p> <p>You are already part of greenvironment?</p>
<a mat-stroked-button color="primary" routerLink="/login">Login</a> <a mat-stroked-button color="primary" routerLink="/login">Login</a>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div> </div>

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { RegisterComponent } from './register.component'; import {RegisterComponent} from './register.component';
describe('RegisterComponent', () => { describe('RegisterComponent', () => {
let component: RegisterComponent; let component: RegisterComponent;
@ -8,9 +8,9 @@ describe('RegisterComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ RegisterComponent ] declarations: [RegisterComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,9 +1,6 @@
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {RegisterService} from '../../services/register/register.service'; import {RegisterService} from '../../services/register/register.service';
import {Registration} from '../../models/registration'; import {Registration} from '../../models/registration';
import {Router} from '@angular/router';
import {Md5} from 'ts-md5/dist/md5';
import { parseWebDriverCommand } from 'blocking-proxy/built/lib/webdriver_commands';
import * as sha512 from 'js-sha512'; import * as sha512 from 'js-sha512';
@Component({ @Component({
@ -28,7 +25,7 @@ export class RegisterComponent implements OnInit {
this.errorMessage = error.errors[0].message; this.errorMessage = error.errors[0].message;
} }
onClickSubmit(pUsername: string, pEmail: string, pPasswordHash: string, pPasswordHashRepeat: string ) { onClickSubmit(pUsername: string, pEmail: string, pPasswordHash: string, pPasswordHashRepeat: string) {
this.errorOccurred = false; this.errorOccurred = false;
this.errorMessage = ' '; this.errorMessage = ' ';
if (this.passwordSame(pPasswordHash, pPasswordHashRepeat)) { if (this.passwordSame(pPasswordHash, pPasswordHashRepeat)) {
@ -50,7 +47,8 @@ export class RegisterComponent implements OnInit {
} }
} }
ngOnInit() {} ngOnInit() {
}
} }

@ -1,13 +1,13 @@
<div id="search"> <div id="search">
<mat-toolbar> <mat-toolbar>
<mat-form-field id="input" <mat-form-field id="input"
floatLabel="never" > floatLabel="never">
<input matInput #searchWord <input matInput #searchWord
placeholder="search" placeholder="search"
[ngModel]="searchWord.value" [ngModel]="searchWord.value"
(ngModelChange)="search(searchWord.value)"> (ngModelChange)="search(searchWord.value)">
<button mat-button matSuffix mat-icon-button> <button mat-button matSuffix mat-icon-button>
<mat-icon>search </mat-icon> <mat-icon>search</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
</mat-toolbar> </mat-toolbar>
@ -28,13 +28,16 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="list"> <div class="list">
<mat-card class="card" *ngFor="let group of foundGroups" <mat-card class="card" *ngFor="let group of foundGroups"
[class.selected]="group === selectedGroup" [class.selected]="group === selectedGroup"
tabindex="0"> tabindex="0">
<mat-card-header> <mat-card-header>
<div mat-card-avatar class="profile-picture" (click)="showGroupProfile(group)"></div> <div mat-card-avatar class="profile-picture" (click)="showGroupProfile(group)"></div>
<mat-card-title class="pointer" (click)="showGroupProfile(group)">{{group.name}}</mat-card-title> <mat-card-title class="pointer" (click)="showGroupProfile(group)">{{group.name}}</mat-card-title>
<div class="icon-box"> <div class="icon-box">
<button mat-icon-button class="request-button" (click)="joinGroup(group)" [disabled]="!group.allowedToJoinGroup"><mat-icon>group_add</mat-icon></button> <button mat-icon-button class="request-button" (click)="joinGroup(group)"
[disabled]="!group.allowedToJoinGroup">
<mat-icon>group_add</mat-icon>
</button>
</div> </div>
</mat-card-header> </mat-card-header>
</mat-card> </mat-card>

@ -22,16 +22,20 @@
margin-top: 0.5em margin-top: 0.5em
outline: none outline: none
user-select: none user-select: none
::ng-deep .mat-card-header-text ::ng-deep .mat-card-header-text
width: 1000% width: 1000%
margin: 0 margin: 0
margin-left: 16px margin-left: 16px
.mat-card-subtitle .mat-card-subtitle
margin: 0 margin: 0
word-break: break-all word-break: break-all
.mat-card-title .mat-card-title
margin: 0 margin: 0
word-break: break-all word-break: break-all
.request-button .request-button
margin-top: 0.5em margin-top: 0.5em
margin-bottom: 0.5em margin-bottom: 0.5em
@ -39,6 +43,7 @@
.profile-picture .profile-picture
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg) background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
background-size: cover background-size: cover
.profile-picture:hover .profile-picture:hover
cursor: pointer cursor: pointer
@ -51,6 +56,7 @@
::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel
background: #e6e6e6 background: #e6e6e6
::ng-deep.dark-theme .mat-expansion-panel ::ng-deep.dark-theme .mat-expansion-panel
background: #121212 background: #121212

@ -1,5 +1,5 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { SearchComponent } from './search.component'; import {SearchComponent} from './search.component';
describe('ChatComponent', () => { describe('ChatComponent', () => {
let component: SearchComponent; let component: SearchComponent;
@ -7,9 +7,9 @@ describe('ChatComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ SearchComponent ] declarations: [SearchComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,12 +1,10 @@
import { Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { SearchService } from 'src/app/services/search/search.service'; import {SearchService} from 'src/app/services/search/search.service';
import { RequestService } from 'src/app/services/request/request.service'; import {RequestService} from 'src/app/services/request/request.service';
import {Headers, Http} from '@angular/http'; import {User} from 'src/app/models/user';
import { User } from 'src/app/models/user'; import {Router} from '@angular/router';
import {environment} from 'src/environments/environment'; import {DatasharingService} from '../../services/datasharing.service';
import { Router } from '@angular/router'; import {GroupInfo} from 'src/app/models/groupinfo';
import { DatasharingService } from '../../services/datasharing.service';
import { GroupInfo } from 'src/app/models/groupinfo';
@Component({ @Component({
selector: 'home-search', selector: 'home-search',
@ -25,7 +23,9 @@ export class SearchComponent implements OnInit {
private searchService: SearchService, private searchService: SearchService,
private requestService: RequestService, private requestService: RequestService,
private router: Router, private router: Router,
private data: DatasharingService) { } private data: DatasharingService) {
}
ngOnInit() { ngOnInit() {
this.data.currentUserInfo.subscribe(user => { this.data.currentUserInfo.subscribe(user => {
this.user = user; this.user = user;

@ -3,16 +3,16 @@
</mat-toolbar> </mat-toolbar>
<div id="friendlist"> <div id="friendlist">
<mat-card class="friend-card" *ngFor="let friend of user.friends" <mat-card class="friend-card" *ngFor="let friend of user.friends"
[class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)" [class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"
tabindex="0" tabindex="0"
matRipple> matRipple>
<mat-card-header> <mat-card-header>
<div mat-card-avatar> <div mat-card-avatar>
<img class="profile-picture" [src]="friend.profilePicture"/> <img class="profile-picture" [src]="friend.profilePicture"/>
</div> </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>
</mat-card> </mat-card>
</div> </div>

@ -10,21 +10,23 @@
width: 100% width: 100%
margin-top: 0.5em margin-top: 0.5em
cursor: pointer cursor: pointer
::ng-deep .mat-card-header-text ::ng-deep .mat-card-header-text
margin: 0 24px margin: 0 24px
.mat-card-subtitle .mat-card-subtitle
margin: 0 margin: 0
$mat-card-header-size: 52px !default $mat-card-header-size: 52px !default
.profile-picture .profile-picture
height: $mat-card-header-size height: $mat-card-header-size
width: $mat-card-header-size width: $mat-card-header-size
border-radius: 50% border-radius: 50%
flex-shrink: 0 flex-shrink: 0
background-size: cover background-size: cover
transition-duration: 0.5s transition-duration: 0.5s
z-index: 10 z-index: 10
object-fit: cover object-fit: cover
#button-box #button-box

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { FriendsComponent } from './friends.component'; import {FriendsComponent} from './friends.component';
describe('FriendsComponent', () => { describe('FriendsComponent', () => {
let component: FriendsComponent; let component: FriendsComponent;
@ -8,9 +8,9 @@ describe('FriendsComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ FriendsComponent ] declarations: [FriendsComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,8 +1,8 @@
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { DatasharingService } from 'src/app/services/datasharing.service'; import {DatasharingService} from 'src/app/services/datasharing.service';
import { FriendInfo } from 'src/app/models/friendinfo'; import {FriendInfo} from 'src/app/models/friendinfo';
import { Router } from '@angular/router'; import {Router} from '@angular/router';
import { User } from 'src/app/models/user'; import {User} from 'src/app/models/user';
@Component({ @Component({
selector: 'social-friends', selector: 'social-friends',
@ -11,11 +11,14 @@ import { User } from 'src/app/models/user';
}) })
export class FriendsComponent implements OnInit { export class FriendsComponent implements OnInit {
user: User; user: User;
constructor(private data: DatasharingService, private router: Router) { }
constructor(private data: DatasharingService, private router: Router) {
}
ngOnInit() { ngOnInit() {
this.data.currentUserInfo.subscribe(user => { this.data.currentUserInfo.subscribe(user => {
this.user = user; }); this.user = user;
});
} }
public showFriendProfile(pFriend: FriendInfo) { public showFriendProfile(pFriend: FriendInfo) {

@ -1,16 +1,19 @@
<mat-toolbar> <mat-toolbar>
<span>Groups</span> <span>Groups</span>
<div id="button-box"> <div id="button-box">
<button mat-icon-button (click)="openDialog()" matTooltip="create group" matTooltipPosition="left" matTooltipShowDelay="500"><mat-icon>group_add</mat-icon></button> <button mat-icon-button (click)="openDialog()" matTooltip="create group" matTooltipPosition="left"
matTooltipShowDelay="500">
<mat-icon>group_add</mat-icon>
</button>
</div> </div>
</mat-toolbar> </mat-toolbar>
<div id="grouplist"> <div id="grouplist">
<mat-card class="group-card" *ngFor="let group of user.groups" <mat-card class="group-card" *ngFor="let group of user.groups"
[class.selected]="group === selectedGroup" (click)="showGroupProfile(group)"> [class.selected]="group === selectedGroup" (click)="showGroupProfile(group)">
<mat-card-header> <mat-card-header>
<div mat-card-avatar class="group-picture"></div> <div mat-card-avatar class="group-picture"></div>
<mat-card-title>{{group.name}}</mat-card-title> <mat-card-title>{{group.name}}</mat-card-title>
</mat-card-header> </mat-card-header>
</mat-card> </mat-card>
</div> </div>

@ -10,6 +10,7 @@
width: 100% width: 100%
margin-top: 0.5em margin-top: 0.5em
cursor: pointer cursor: pointer
.mat-card-subtitle .mat-card-subtitle
margin: 0 margin: 0

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { GroupsComponent } from './groups.component'; import {GroupsComponent} from './groups.component';
describe('GroupsComponent', () => { describe('GroupsComponent', () => {
let component: GroupsComponent; let component: GroupsComponent;
@ -8,9 +8,9 @@ describe('GroupsComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ GroupsComponent ] declarations: [GroupsComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -5,8 +5,6 @@ import {SocialService} from 'src/app/services/social/social.service';
import {User} from 'src/app/models/user'; import {User} from 'src/app/models/user';
import {DatasharingService} from 'src/app/services/datasharing.service'; import {DatasharingService} from 'src/app/services/datasharing.service';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import {GraphQLError} from 'graphql';
import {IGraphqlError} from '../../../models/interfaces/IGraphqlError';
import {IErrorResponse} from '../../../models/interfaces/IErrorResponse'; import {IErrorResponse} from '../../../models/interfaces/IErrorResponse';
// DIALOG COMPONENT to create groups // DIALOG COMPONENT to create groups

@ -1,25 +1,25 @@
<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 id="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>
</ng-template> </ng-template>
<div id="friendscontainer"> <div id="friendscontainer">
<social-friends></social-friends> <social-friends></social-friends>
</div> </div>
<social-groups id="groupscontainer"></social-groups> <social-groups id="groupscontainer"></social-groups>
</mat-tab> </mat-tab>
<mat-tab> <mat-tab>
<ng-template mat-tab-label> <ng-template mat-tab-label>
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</ng-template> </ng-template>
<home-search class="tab-content"></home-search> <home-search class="tab-content"></home-search>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>
<div fxShow="true" fxHide.gt-sm="true"> <div fxShow="true" fxHide.gt-sm="true">
<social-friends id="friendscontainer"></social-friends> <social-friends id="friendscontainer"></social-friends>
<social-groups id="groupscontainer"></social-groups> <social-groups id="groupscontainer"></social-groups>
</div> </div>

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { SocialComponent } from './social.component'; import {SocialComponent} from './social.component';
describe('SocialComponent', () => { describe('SocialComponent', () => {
let component: SocialComponent; let component: SocialComponent;
@ -8,9 +8,9 @@ describe('SocialComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ SocialComponent ] declarations: [SocialComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
@Component({ @Component({
selector: 'home-social', selector: 'home-social',
@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
}) })
export class SocialComponent implements OnInit { export class SocialComponent implements OnInit {
constructor() { } constructor() {
}
ngOnInit() { ngOnInit() {
} }

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

@ -7,15 +7,19 @@
margin-top: 0.5em margin-top: 0.5em
outline: none outline: none
user-select: none user-select: none
::ng-deep .mat-card-header-text ::ng-deep .mat-card-header-text
width: 1000% width: 1000%
margin: auto 0 auto 24px margin: auto 0 auto 24px
.mat-card-subtitle .mat-card-subtitle
margin: 0 margin: 0
word-break: break-all word-break: break-all
.mat-card-title .mat-card-title
margin: 0 margin: 0
word-break: break-all word-break: break-all
.request-button .request-button
margin-top: 0.5em margin-top: 0.5em
margin-bottom: 0.5em margin-bottom: 0.5em
@ -29,11 +33,11 @@
$mat-card-header-size: 54px !default $mat-card-header-size: 54px !default
.profile-picture .profile-picture
height: $mat-card-header-size height: $mat-card-header-size
width: $mat-card-header-size width: $mat-card-header-size
border-radius: 50% border-radius: 50%
flex-shrink: 0 flex-shrink: 0
background-size: cover background-size: cover
transition-duration: 0.5s transition-duration: 0.5s
z-index: 10 z-index: 10
object-fit: cover object-fit: cover

@ -1,6 +1,6 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import { UserlistComponent } from './userlist.component'; import {UserlistComponent} from './userlist.component';
describe('UserlistComponent', () => { describe('UserlistComponent', () => {
let component: UserlistComponent; let component: UserlistComponent;
@ -8,9 +8,9 @@ describe('UserlistComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ UserlistComponent ] declarations: [UserlistComponent]
}) })
.compileComponents(); .compileComponents();
})); }));
beforeEach(() => { beforeEach(() => {

@ -1,7 +1,7 @@
import { Component, OnInit, Input } from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import { User } from 'src/app/models/user'; import {User} from 'src/app/models/user';
import { RequestService } from 'src/app/services/request/request.service'; import {RequestService} from 'src/app/services/request/request.service';
import { Router } from '@angular/router'; import {Router} from '@angular/router';
@Component({ @Component({
selector: 'user-list', selector: 'user-list',
@ -13,7 +13,8 @@ export class UserlistComponent implements OnInit {
@Input() userList: Array<User>; @Input() userList: Array<User>;
selectedUser: User; selectedUser: User;
constructor(private requestService: RequestService, private router: Router) { } constructor(private requestService: RequestService, private router: Router) {
}
ngOnInit() { ngOnInit() {
} }

@ -1,9 +1,10 @@
import {NgModule} from '@angular/core'; import {NgModule} from '@angular/core';
import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular'; import {APOLLO_OPTIONS, ApolloModule} from 'apollo-angular';
import {HttpLinkModule, HttpLink} from 'apollo-angular-link-http'; import {HttpLink, HttpLinkModule} from 'apollo-angular-link-http';
import {InMemoryCache} from 'apollo-cache-inmemory'; import {InMemoryCache} from 'apollo-cache-inmemory';
const uri = 'https://o5x5jzoo7z.sse.codesandbox.io/graphql'; const uri = 'https://o5x5jzoo7z.sse.codesandbox.io/graphql';
// 'https://greenvironment.net/graphql:443'; // <-- add the URL of the GraphQL server here // 'https://greenvironment.net/graphql:443'; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink) { export function createApollo(httpLink: HttpLink) {
return { return {
@ -22,4 +23,5 @@ export function createApollo(httpLink: HttpLink) {
}, },
], ],
}) })
export class GraphQLModule {} export class GraphQLModule {
}

@ -1,4 +1,3 @@
export class Activity { export class Activity {
id: number; id: number;
name: string; name: string;
@ -14,5 +13,5 @@ export class Activity {
} }
export class Activitylist { export class Activitylist {
Actions: Activity[] = new Array(); Actions: Activity[] = [];
} }

@ -1,13 +1,13 @@
export class Author { export class Author {
id: number; id: number;
name: string; name: string;
handle: string; handle: string;
profilePicture: string; profilePicture: string;
constructor(pId: number, pName: string, pHandle: string, pic: string) { constructor(pId: number, pName: string, pHandle: string, pic: string) {
this.id = pId; this.id = pId;
this.name = pName; this.name = pName;
this.handle = pHandle; this.handle = pHandle;
this.profilePicture = pic; this.profilePicture = pic;
} }
} }

@ -1,16 +1,16 @@
import { Chatmessage } from './chatmessage'; import {Chatmessage} from './chatmessage';
export class Chat { export class Chat {
id: number; id: number;
memberID: number; memberID: number;
memberName: string; memberName: string;
messages: Array<Chatmessage>; messages: Array<Chatmessage>;
constructor(pId: number, pMemberID: number, pMemberName: string, pMessages: Array<Chatmessage>) { constructor(pId: number, pMemberID: number, pMemberName: string, pMessages: Array<Chatmessage>) {
this.id = pId; this.id = pId;
this.memberID = pMemberID; this.memberID = pMemberID;
this.memberName = pMemberName; this.memberName = pMemberName;
this.messages = pMessages; this.messages = pMessages;
} }
} }

@ -1,9 +1,9 @@
export class Chatinfo { export class Chatinfo {
id: string; id: string;
date: string; date: string;
constructor(pId: string, pDate: string) { constructor(pId: string, pDate: string) {
this.id = pId; this.id = pId;
this.date = pDate; this.date = pDate;
} }
} }

@ -1,11 +1,11 @@
export class Chatmessage { export class Chatmessage {
content: string; content: string;
date: string; date: string;
myself: boolean; myself: boolean;
constructor(pContent: string, pDate: string, pMyself: boolean) { constructor(pContent: string, pDate: string, pMyself: boolean) {
this.content = pContent; this.content = pContent;
this.date = pDate; this.date = pDate;
this.myself = pMyself; this.myself = pMyself;
} }
} }

@ -1,4 +1,4 @@
export class Document { export class Document {
id: string; id: string;
doc: string; doc: string;
} }

@ -1,13 +1,13 @@
export class Event { export class Event {
id: string; id: string;
name: string; name: string;
date: string; date: string;
joined: boolean; joined: boolean;
constructor(pId: string, pName: string, pdate: string, pjoined: boolean) { constructor(pId: string, pName: string, pdate: string, pjoined: boolean) {
this.id = pId; this.id = pId;
this.name = pName; this.name = pName;
this.date = pdate; this.date = pdate;
this.joined = pjoined; this.joined = pjoined;
} }
} }

@ -1,15 +1,13 @@
import { User } from 'src/app/models/user';
export class FriendRequest { export class FriendRequest {
id: number; id: number;
senderUserID: number; senderUserID: number;
senderHandle: string; senderHandle: string;
senderUsername: string; senderUsername: string;
constructor(id?: number, senderUserId?: number, senderHandle?: string, senderName?: string) { constructor(id?: number, senderUserId?: number, senderHandle?: string, senderName?: string) {
this.id = id; this.id = id;
this.senderUserID = senderUserId; this.senderUserID = senderUserId;
this.senderHandle = senderHandle; this.senderHandle = senderHandle;
this.senderUsername = senderName; this.senderUsername = senderName;
}
} }
}

@ -1,16 +1,16 @@
import { Levellist } from 'src/app/models/levellist'; import {Levellist} from 'src/app/models/levellist';
export class FriendInfo { export class FriendInfo {
levellist: Levellist = new Levellist(); levellist: Levellist = new Levellist();
id: number; id: number;
name: string; name: string;
rankname: string; rankname: string;
profilePicture: string; profilePicture: string;
constructor(pId: number, pName: string, pLevel: number, pic: string) { 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; this.profilePicture = pic;
} }
} }

@ -1,14 +1,14 @@
import { User } from 'src/app/models/user'; import {User} from 'src/app/models/user';
import { Event } from 'src/app/models/event'; import {Event} from 'src/app/models/event';
export class Group { export class Group {
id: number; id: number;
name: string; name: string;
handle: string; handle: string;
creator: User = new User(); creator: User = new User();
members: User[] = new Array(); members: User[] = [];
admins: User[] = new Array(); admins: User[] = [];
events: Event[] = new Array(); events: Event[] = [];
joined: boolean; joined: boolean;
allowedToJoinGroup = false; allowedToJoinGroup = false;
} }

@ -1,10 +1,10 @@
export class GroupInfo { export class GroupInfo {
id: number; id: number;
name: string; name: string;
allowedToJoinGroup = false; allowedToJoinGroup = false;
constructor(pId: number, pName: string) { constructor(pId: number, pName: string) {
this.id = pId; this.id = pId;
this.name = pName; this.name = pName;
} }
} }

@ -4,5 +4,5 @@ export interface IGraphqlError {
path: string[]; path: string[];
location: {line: number; column: number}[]; location: { line: number; column: number }[];
} }

@ -1,5 +1,4 @@
import {IGroup} from './IGroup'; import {IGroup} from './IGroup';
import {ISettings} from './ISettings';
import {IChat} from './IChat'; import {IChat} from './IChat';
import {IRequest} from './IRequest'; import {IRequest} from './IRequest';

@ -1,13 +1,13 @@
export class Levellist { export class Levellist {
levels: {level: number, name: string, points: number}[] = [ levels: { level: number, name: string, points: number }[] = [
{level: 0, name: 'Green Horn', points: 0}, {level: 0, name: 'Green Horn', points: 0},
{level: 1, name: 'Good Willed', points: 100 }, {level: 1, name: 'Good Willed', points: 100},
{level: 2, name: 'Helper', points: 200 }, {level: 2, name: 'Helper', points: 200},
{level: 3, name: 'World Saver', points: 300 }, {level: 3, name: 'World Saver', points: 300},
{level: 4, name: 'Hero of the Green Country', points: 400 }, {level: 4, name: 'Hero of the Green Country', points: 400},
{level: 5, name: 'Champion of the Earth', points: 500 }, {level: 5, name: 'Champion of the Earth', points: 500},
{level: 6, name: 'Intergallactic Superhero', points: 600 }, {level: 6, name: 'Intergallactic Superhero', points: 600},
]; ];
getLevelName(level: number): any { getLevelName(level: number): any {
let name = 'not defined'; let name = 'not defined';

@ -1,6 +1,4 @@
import { Hash } from 'crypto';
export interface Login { export interface Login {
email: string; email: string;
passwordHash: string; passwordHash: string;
} }

@ -1,40 +1,40 @@
import { Author } from './author'; import {Author} from './author';
import { Activity } from './activity'; import {Activity} from './activity';
export class Post { export class Post {
id: number; id: number;
content: string; content: string;
htmlContent: string; htmlContent: string;
date: string; date: string;
upvotes: number; upvotes: number;
downvotes: number; downvotes: number;
userVote: string; userVote: string;
deletable: boolean; deletable: boolean;
author: Author; author: Author;
activity: Activity; activity: Activity;
// TODO: constructor properties need normal names // TODO: constructor properties need normal names
constructor( constructor(
pId: number, pId: number,
pContent: string, pContent: string,
pHtmlContent: string, pHtmlContent: string,
pUpvotes: number, pUpvotes: number,
pDownvotes: number, pDownvotes: number,
pUserVote: string, pUserVote: string,
pDeletable: boolean, pDeletable: boolean,
pDate: string, pDate: string,
pAuthor: Author, pAuthor: Author,
pactivity: Activity pactivity: Activity
) { ) {
this.id = pId; this.id = pId;
this.content = pContent; this.content = pContent;
this.htmlContent = pHtmlContent; this.htmlContent = pHtmlContent;
this.upvotes = pUpvotes; this.upvotes = pUpvotes;
this.downvotes = pDownvotes; this.downvotes = pDownvotes;
this.userVote = pUserVote; this.userVote = pUserVote;
this.deletable = pDeletable; this.deletable = pDeletable;
this.date = pDate; this.date = pDate;
this.author = pAuthor; this.author = pAuthor;
this.activity = pactivity; this.activity = pactivity;
} }
} }

@ -1,5 +1,5 @@
export interface Registration { export interface Registration {
username: string; username: string;
email: string; email: string;
passwordHash: string; passwordHash: string;
} }

@ -1,9 +1,9 @@
import { FriendRequest } from 'src/app/models/friendRequest'; import {FriendRequest} from 'src/app/models/friendRequest';
import { FriendInfo } from 'src/app/models/friendinfo'; 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'; import {environment} from 'src/environments/environment';
export class User { export class User {
loggedIn = false; loggedIn = false;

@ -1,6 +1,6 @@
import { TestBed } from '@angular/core/testing'; import {TestBed} from '@angular/core/testing';
import { ActivityService } from './activity.service'; import {ActivityService} from './activity.service';
describe('ActivityService', () => { describe('ActivityService', () => {
beforeEach(() => TestBed.configureTestingModule({})); beforeEach(() => TestBed.configureTestingModule({}));

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core'; import {Injectable} from '@angular/core';
import { BehaviorSubject } from 'rxjs'; import {BehaviorSubject} from 'rxjs';
import { Activitylist, Activity } from 'src/app/models/activity'; import {Activity, Activitylist} from 'src/app/models/activity';
import { environment } from 'src/environments/environment'; import {environment} from 'src/environments/environment';
import { Http } from '@angular/http'; import {Http} from '@angular/http';
@Injectable({ @Injectable({
@ -12,7 +12,8 @@ export class ActivityService {
public activitylist = new BehaviorSubject<Activitylist>(new Activitylist()); public activitylist = new BehaviorSubject<Activitylist>(new Activitylist());
constructor(private http: Http) { } constructor(private http: Http) {
}
changeUserInfo(pActivitylist: Activitylist) { changeUserInfo(pActivitylist: Activitylist) {
this.activitylist.next(pActivitylist); this.activitylist.next(pActivitylist);
@ -30,11 +31,11 @@ export class ActivityService {
} }
public buildJson(): any { public buildJson(): any {
const body = {query: `query{getActivities{ const body = {
query: `query{getActivities{
id name description points id name description points
}}`, variables: { }}`, variables: {}
};
}};
return body; return body;
} }

@ -1,6 +1,6 @@
import { TestBed } from '@angular/core/testing'; import {TestBed} from '@angular/core/testing';
import { ChatService } from './chat.service'; import {ChatService} from './chat.service';
describe('ChatService', () => { describe('ChatService', () => {
beforeEach(() => TestBed.configureTestingModule({})); beforeEach(() => TestBed.configureTestingModule({}));

@ -1,10 +1,10 @@
import { Injectable } from '@angular/core'; import {Injectable} from '@angular/core';
import {Http, URLSearchParams, Headers} from '@angular/http'; import {Headers, Http} from '@angular/http';
import { Chat } from 'src/app/models/chat'; import {Chat} from 'src/app/models/chat';
import { Chatmessage } from 'src/app/models/chatmessage'; import {Chatmessage} from 'src/app/models/chatmessage';
import { FriendInfo } from 'src/app/models/friendinfo'; import {FriendInfo} from 'src/app/models/friendinfo';
import { DatasharingService } from '../datasharing.service'; import {DatasharingService} from '../datasharing.service';
import { environment } from 'src/environments/environment'; import {environment} from 'src/environments/environment';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -17,8 +17,9 @@ export class ChatService {
constructor(private http: Http, private data: DatasharingService) { constructor(private http: Http, private data: DatasharingService) {
this.data.currentUserInfo.subscribe(user => { this.data.currentUserInfo.subscribe(user => {
this.ownID = user.userID; }); this.ownID = user.userID;
} });
}
public getAllChats(): Array<Chat> { public getAllChats(): Array<Chat> {
const url = environment.graphQLUrl; const url = environment.graphQLUrl;
@ -27,7 +28,7 @@ export class ChatService {
headers.set('Content-Type', 'application/json'); headers.set('Content-Type', 'application/json');
this.http.post(url, this.getBodyForGetAllChats()) this.http.post(url, this.getBodyForGetAllChats())
.subscribe(response => { .subscribe(response => {
this.chats = this.renderAllChats(response.json()); this.chats = this.renderAllChats(response.json());
}); });
return this.chats; return this.chats;
@ -52,9 +53,9 @@ export class ChatService {
headers.set('Content-Type', 'application/json'); headers.set('Content-Type', 'application/json');
this.http.post(url, this.getBodyForGetChatsByID(chatId)) this.http.post(url, this.getBodyForGetChatsByID(chatId))
.subscribe(response => { .subscribe(response => {
this.updateChat(response.json()); this.updateChat(response.json());
}); });
} }
return this.chats; return this.chats;
} }
@ -68,9 +69,9 @@ export class ChatService {
headers.set('Content-Type', 'application/json'); headers.set('Content-Type', 'application/json');
this.http.post(url, this.getBodyForGetChatsByID(chatId)) this.http.post(url, this.getBodyForGetChatsByID(chatId))
.subscribe(response => { .subscribe(response => {
this.updateChat(response.json()); this.updateChat(response.json());
}); });
} }
return this.chats; return this.chats;
} }
@ -97,9 +98,9 @@ export class ChatService {
headers.set('Content-Type', 'application/json'); headers.set('Content-Type', 'application/json');
this.http.post(url, this.getBodyForRequestOfAllChatPartners()) this.http.post(url, this.getBodyForRequestOfAllChatPartners())
.subscribe(response => { .subscribe(response => {
temp = response.json(); temp = response.json();
}); });
for (const chat of temp.data.getSelf.chats) { for (const chat of temp.data.getSelf.chats) {
let memberID: number; let memberID: number;
@ -137,8 +138,8 @@ export class ChatService {
headers.set('Content-Type', 'application/json'); headers.set('Content-Type', 'application/json');
this.http.post(url, this.getBodyForGetMessagesInChat(pChatID)).subscribe(response => { this.http.post(url, this.getBodyForGetMessagesInChat(pChatID)).subscribe(response => {
messages = this.renderMessages(response.json()); messages = this.renderMessages(response.json());
}); });
return messages; return messages;
} }
@ -153,13 +154,13 @@ export class ChatService {
public renderMessages(pResponse: any): Array<Chatmessage> { public renderMessages(pResponse: any): Array<Chatmessage> {
const messages = new Array<Chatmessage>(); const messages = new Array<Chatmessage>();
for (const message of pResponse.data.getChat.messages) { for (const message of pResponse.data.getChat.messages) {
if (message.author.id === this.ownID) { if (message.author.id === this.ownID) {
messages.push(new Chatmessage(message.content, message.createdAt, true)); messages.push(new Chatmessage(message.content, message.createdAt, true));
} else { } else {
messages.push(new Chatmessage(message.content, message.createdAt, false)); messages.push(new Chatmessage(message.content, message.createdAt, false));
}
} }
}
return messages; return messages;
} }
@ -210,38 +211,44 @@ export class ChatService {
getBodyForNewChat(pUserID: number) { getBodyForNewChat(pUserID: number) {
this.arr = [pUserID]; this.arr = [pUserID];
const body = {query: `mutation($userID: number[]) { const body = {
query: `mutation($userID: number[]) {
createChat(members: $userID) {id} createChat(members: $userID) {id}
}`, variables: { }`, variables: {
members: this.arr members: this.arr
}}; }
};
return body; return body;
} }
getBodyForRequestOfAllChatPartners() { getBodyForRequestOfAllChatPartners() {
const body = {query: `query { const body = {
query: `query {
getSelf { getSelf {
chats(first: 1000, offset: 0) {members{name, id, level}} chats(first: 1000, offset: 0) {members{name, id, level}}
}}` }}`
}; };
return body; return body;
} }
getBodyForSendMessage(pchatID: number, pContent: string) { getBodyForSendMessage(pchatID: number, pContent: string) {
const body = {query: `mutation($chatId: ID!, $content: String!) { const body = {
query: `mutation($chatId: ID!, $content: String!) {
sendMessage(chatId: $chatId, content: $content) {id} sendMessage(chatId: $chatId, content: $content) {id}
}`, variables: { }`, variables: {
chatId: pchatID, chatId: pchatID,
content: pContent content: pContent
}}; }
};
return body; return body;
} }
getBodyForGetAllChats() { getBodyForGetAllChats() {
const body = {query: `query { const body = {
query: `query {
getSelf { getSelf {
chats(first: 10, offset: 0) { chats(first: 10, offset: 0) {
id, members{name, id, level}, id, members{name, id, level},
@ -251,29 +258,33 @@ export class ChatService {
} }
} }
}` }`
}; };
return body; return body;
} }
getBodyForGetChatsByID(pChatID: number) { getBodyForGetChatsByID(pChatID: number) {
const body = {query: `query($chatID: ID!) { const body = {
query: `query($chatID: ID!) {
getChat(chatId: $chatID) {id, members{name, id, level}, getChat(chatId: $chatID) {id, members{name, id, level},
messages(first: 1000, offset: 0) {author {id}, createdAt, content}} messages(first: 1000, offset: 0) {author {id}, createdAt, content}}
} }
}`, variables: { }`, variables: {
chatId: pChatID chatId: pChatID
}}; }
};
return body; return body;
} }
getBodyForGetMessagesInChat(pChatID: number) { getBodyForGetMessagesInChat(pChatID: number) {
const body = {query: `query($chatId: ID!) { const body = {
query: `query($chatId: ID!) {
getChat(chatId: $chatId) { getChat(chatId: $chatId) {
messages(first: 1000, offset: 0) {author {id}, createdAt, content} messages(first: 1000, offset: 0) {author {id}, createdAt, content}
} }
}`, variables: { }`, variables: {
chatId: pChatID chatId: pChatID
}}; }
};
return body; return body;
} }
} }

@ -1,6 +1,6 @@
import { TestBed } from '@angular/core/testing'; import {TestBed} from '@angular/core/testing';
import { DatasharingService } from './datasharing.service'; import {DatasharingService} from './datasharing.service';
describe('DatasharingService', () => { describe('DatasharingService', () => {
beforeEach(() => TestBed.configureTestingModule({})); beforeEach(() => TestBed.configureTestingModule({}));

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save