Merge branch 'max_dev' of Software_Engineering_I/greenvironment-frontend into master
Julius
5 years ago
committed by
Gitea
commit
e93d07f5a6
File diff suppressed because it is too large
Load Diff
@ -1,2 +1 @@
|
||||
<app-scaffold id="headerbar"></app-scaffold>
|
||||
<router-outlet></router-outlet>
|
||||
<app-main-navigation></app-main-navigation>
|
||||
|
||||
@ -1,45 +1,12 @@
|
||||
@import '../styles/mixins.sass'
|
||||
@import '../styles/vars.sass'
|
||||
/*
|
||||
#content
|
||||
grid-template: 7.5% 92.5% / 25% 50% 25%
|
||||
display: grid
|
||||
min-height: 100vh
|
||||
max-height: 100vh*/
|
||||
|
||||
#imprint
|
||||
background-color: $cSecondaryBackground
|
||||
grid-template: 15% 70% 15% / 15% 70% 15%
|
||||
display: grid
|
||||
min-height: 100vh
|
||||
max-height: 100vh
|
||||
html, body
|
||||
margin: 0
|
||||
height: 100%
|
||||
|
||||
|
||||
#about
|
||||
background-color: $cSecondaryBackground
|
||||
grid-template: 15% 70% 15% / 15% 70% 15%
|
||||
display: grid
|
||||
min-height: 100vh
|
||||
max-height: 100vh
|
||||
|
||||
#login
|
||||
background-color: $cSecondaryBackground
|
||||
grid-template: 15% 70% 15% / 15% 70% 15%
|
||||
display: grid
|
||||
min-height: 100vh
|
||||
max-height: 100vh
|
||||
|
||||
#register
|
||||
background-color: $cSecondaryBackground
|
||||
grid-template: 15% 70% 15% / 15% 70% 15%
|
||||
display: grid
|
||||
min-height: 100vh
|
||||
max-height: 100vh
|
||||
|
||||
#headerbar
|
||||
height: 10vh
|
||||
@include gridPosition(1, 1, 1, 4)
|
||||
display: grid
|
||||
grid-template: 100% /30% 10% 10% 10% 10% 10% 15% 5%
|
||||
background-color: $cHeadPrimaryBackground
|
||||
color: $cHeadFontColor
|
||||
|
||||
|
||||
@ -1,9 +1,19 @@
|
||||
<div id="about">
|
||||
<div id="aboutcontainer">
|
||||
<h1>What's Greenvironment?</h1>
|
||||
<h2>Hello!</h2>
|
||||
<p>We, the greenviroment team want to create a netwok for environmentalists who care for our nature and our planet as much as we do.</p>
|
||||
<p>We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p>
|
||||
<a href="/register">You aren't part of greenvironment yet? - join us here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="text0" style="text-align: center;">
|
||||
<h1>Greenvironment</h1>
|
||||
<br> <br> <br> <br> <br>
|
||||
<h1 class="mat-display-3">Keep it clean and green!</h1>
|
||||
<button mat-icon-button>
|
||||
<mat-icon class="big-icon">keyboard_arrow_down</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div id="text1" style="text-align: center;">
|
||||
<h1>What's Greenvironment?</h1>
|
||||
<p class="mat-display-1">We, the greenviroment team want to create a netwok for environmentalists who care for our nature and our planet as much as we do.</p>
|
||||
</div>
|
||||
<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">You aren't part of greenvironment yet? - join us now!</p>
|
||||
<a mat-raised-button class="link-button" routerLink="/register" >Register</a>
|
||||
<br>
|
||||
<a mat-raised-button class="link-button" routerLink="/login">Login</a>
|
||||
</div>
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
@import '../../../styles/mixins.sass'
|
||||
@import '../../../styles/vars.sass'
|
||||
@import '~@angular/material/theming'
|
||||
@import '../../../styles/greenvironment-material-theme.scss'
|
||||
|
||||
#about
|
||||
background-color: $cSecondaryBackground
|
||||
grid-template: 15% 70% 15% / 15% 70% 15%
|
||||
display: grid
|
||||
min-height: 90vh
|
||||
max-height: 90vh
|
||||
#text0, #text2
|
||||
padding: 2em
|
||||
max-width: 100%
|
||||
min-height: 50%
|
||||
background-color: mat-color($primary)
|
||||
|
||||
#text1
|
||||
padding: 2em
|
||||
min-height: 50%
|
||||
max-width: 100%
|
||||
|
||||
#aboutcontainer
|
||||
@include gridPosition(2, 2,2,2)
|
||||
background-color: $cPrimaryBackground
|
||||
padding: 1em
|
||||
overflow: auto
|
||||
.big-icon
|
||||
//color: white
|
||||
transform: scale(2)
|
||||
|
||||
input
|
||||
margin: 0.25em
|
||||
#header
|
||||
@include gridPosition(1, 2, 1, 2)
|
||||
a
|
||||
color: $cHeadPrimaryBackground
|
||||
.link-button
|
||||
width: 100%
|
||||
max-width: 30em
|
||||
margin-bottom: 1em
|
||||
|
||||
@ -1,82 +1,37 @@
|
||||
@import '../../../styles/mixins.sass'
|
||||
@import '../../../styles/vars.sass'
|
||||
|
||||
#postinput
|
||||
@include gridPosition(1, 2, 1, 2)
|
||||
margin: 0.5em
|
||||
display: grid
|
||||
grid-template: 100% /80% 10% 10%
|
||||
#input
|
||||
@include gridPosition(1, 2, 1, 2)
|
||||
border-radius: 0.5em
|
||||
padding: 0.125em
|
||||
resize: none
|
||||
#attach
|
||||
@include gridPosition(1, 2, 2, 3)
|
||||
#submit
|
||||
@include gridPosition(1, 2, 3, 4)
|
||||
button
|
||||
background-color: $cFeedChooserBackground
|
||||
color: $cFontWhite
|
||||
border: none
|
||||
border-radius: 0.5em
|
||||
button:hover
|
||||
background-color: lighten($cFeedChooserBackground, 10%)
|
||||
cursor: pointer
|
||||
|
||||
#completeFeed
|
||||
@include gridPosition(2, 3, 1, 2)
|
||||
display: grid
|
||||
grid-template: 5% 95% /100%
|
||||
overflow: auto
|
||||
background-color: $cFontWhite
|
||||
#home
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
#complete-feed
|
||||
box-sizing: border-box
|
||||
display: flex
|
||||
width: 100%
|
||||
padding: 0.5em
|
||||
|
||||
#feedlist
|
||||
width: 100%
|
||||
|
||||
#feedchooser
|
||||
@include gridPosition(1, 2, 1, 2)
|
||||
display: grid
|
||||
grid-template: 100% /50% 50%
|
||||
background-color: $cFontWhite
|
||||
padding: 0
|
||||
#input
|
||||
width: 100%
|
||||
padding-left: 0.5em
|
||||
padding-right: 0.5em
|
||||
|
||||
#action-chooser
|
||||
width: 100%
|
||||
padding-left: 0.5em
|
||||
padding-right: 0.5em
|
||||
|
||||
#check
|
||||
margin: 0
|
||||
button
|
||||
background-color: $cFeedChooserBackground
|
||||
border: none
|
||||
font-size: 1.5em
|
||||
color: $cFontWhite
|
||||
border-radius: 0.5em
|
||||
button:hover
|
||||
background-color: lighten($cFeedChooserBackground, 10%)
|
||||
cursor: pointer
|
||||
#new
|
||||
@include gridPosition(1, 2, 1, 2)
|
||||
#mostliked
|
||||
@include gridPosition(1, 2, 2, 3)
|
||||
padding-left: 0.5em
|
||||
|
||||
#feedlist
|
||||
@include gridPosition(2, 3, 1, 2)
|
||||
overflow: auto
|
||||
#post-button
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
.feeditemPicture
|
||||
background-color: $cFeedItemBackground
|
||||
min-height: 2em
|
||||
margin: 0.5em
|
||||
padding: 0.25em
|
||||
border-radius: 0.25em
|
||||
.itemhead
|
||||
align-items: flex-start
|
||||
padding-left: 0.5em
|
||||
padding-right: 0.5em
|
||||
margin-top: 0.5em
|
||||
|
||||
.title, .handle, .date
|
||||
margin: 0.125em
|
||||
.title
|
||||
font-weight: bold
|
||||
|
||||
.handle, .date
|
||||
color: $cInactiveText
|
||||
.handle a
|
||||
text-decoration: none
|
||||
color: $cInactiveText
|
||||
font-style: normal
|
||||
.handle a:hover
|
||||
text-decoration: underline
|
||||
@ -1,67 +1,12 @@
|
||||
@import '../../../../styles/mixins.sass'
|
||||
@import '../../../../styles/vars.sass'
|
||||
|
||||
.feeditem
|
||||
background-color: $cFeedItemBackground
|
||||
min-height: 2em
|
||||
//max-heigth: 5em
|
||||
margin: 0.5em
|
||||
padding: 0.25em
|
||||
border-radius: 0.25em
|
||||
.post
|
||||
box-sizing: border-box
|
||||
width: 100%
|
||||
margin-top: 0.5em
|
||||
|
||||
::ng-deep .mat-card-header-text
|
||||
margin: 0px
|
||||
|
||||
.itemhead
|
||||
display: grid
|
||||
grid-template: 100% /70% 30%
|
||||
.usertag
|
||||
@include gridPosition(1, 2, 1, 2)
|
||||
.title, .handle, .date
|
||||
margin: 0.125em
|
||||
.title
|
||||
font-weight: bold
|
||||
.date
|
||||
@include gridPosition(1, 2, 2, 3)
|
||||
text-align: right
|
||||
.handle, .date
|
||||
color: $cInactiveText
|
||||
.handle a
|
||||
text-decoration: none
|
||||
color: $cInactiveText
|
||||
font-style: normal
|
||||
.handle a:hover
|
||||
text-decoration: underline
|
||||
.itembody
|
||||
display: grid
|
||||
grid-template: 100% /85% 15%
|
||||
.text
|
||||
@include gridPosition(1, 2, 1, 2)
|
||||
overflow-x: hidden
|
||||
::ng-deep img
|
||||
max-width: 100%
|
||||
height: auto
|
||||
|
||||
.vote
|
||||
@include gridPosition(1, 2, 2, 3)
|
||||
display: grid
|
||||
grid-template: 70% 30% /50% 50%
|
||||
height: 3em
|
||||
button
|
||||
background-color: $cFeedItemBackground
|
||||
border: none
|
||||
button:hover
|
||||
cursor: pointer
|
||||
#up
|
||||
@include gridPosition(1, 2, 2, 3)
|
||||
color: $cFeedUpVote
|
||||
#up:hover
|
||||
color: darken($cFeedUpVote, 10%)
|
||||
#down
|
||||
@include gridPosition(1, 2, 1, 2)
|
||||
color: $cFeedDownVote
|
||||
#down:hover
|
||||
color: darken($cFeedDownVote, 10%)
|
||||
#downvotes
|
||||
@include gridPosition(2, 3, 1, 2)
|
||||
text-align: center
|
||||
#upvotes
|
||||
@include gridPosition(2, 3, 2, 3)
|
||||
text-align: center
|
||||
|
||||
|
||||
@ -1,5 +1,36 @@
|
||||
<div id="content">
|
||||
<home-chatmanager id="chatcontainer" *ngIf="loggedIn"></home-chatmanager>
|
||||
<home-feed id="feedcontainer"></home-feed>
|
||||
<home-social id="socialcontainer" *ngIf="loggedIn"></home-social>
|
||||
</div>
|
||||
<div id="content" fxShow="true" fxHide.lt-md="true">
|
||||
<div id="chat"><home-chatmanager id="chatcontainer" *ngIf="!loggedIn"></home-chatmanager></div>
|
||||
<div id="feed"><home-feed id="feedcontainer"></home-feed></div>
|
||||
<div id="social"><home-social id="socialcontainer" *ngIf="!loggedIn"></home-social></div>
|
||||
</div>
|
||||
<!--
|
||||
<mat-tab-group headerPosition="below" position="0" id="bottom-menu" fxShow="true" fxHide.gt-sm="true">
|
||||
<mat-tab label="First"> <home-chatmanager ></home-chatmanager></mat-tab>
|
||||
<mat-tab label="Second"><home-feed id="feed"></home-feed></mat-tab>
|
||||
<mat-tab label="Third"> <home-social ></home-social></mat-tab>
|
||||
</mat-tab-group>
|
||||
-->
|
||||
<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>
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>chat</mat-icon>
|
||||
</ng-template>
|
||||
<home-chatmanager class="tab-content"></home-chatmanager>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>home</mat-icon>
|
||||
</ng-template>
|
||||
<home-feed class="tab-content"></home-feed>
|
||||
</mat-tab>
|
||||
<mat-tab >
|
||||
<ng-template mat-tab-label>
|
||||
<mat-icon>people</mat-icon>
|
||||
</ng-template>
|
||||
<home-social class="tab-content"></home-social>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
<mat-toolbar color="primary">Imprint</mat-toolbar>
|
||||
<div id="imprint">
|
||||
<div id="imprintcontainer">
|
||||
<h1>Imprint</h1>
|
||||
<p>The greenvironment network is being developed by the greenvironment team</p>
|
||||
<h2>Contact</h2>
|
||||
<p>Email: nick.derkoenig@greenvironment.net</p>
|
||||
</div>
|
||||
<p>The greenvironment network is being developed by the greenvironment team</p>
|
||||
<h2>Contact</h2>
|
||||
<p>Email: nick.derkoenig@greenvironment.net</p>
|
||||
</div>
|
||||
@ -1,19 +1,15 @@
|
||||
@import '../../../styles/mixins.sass'
|
||||
@import '../../../styles/vars.sass'
|
||||
|
||||
|
||||
#imprint
|
||||
background-color: $cSecondaryBackground
|
||||
grid-template: 15% 70% 15% / 15% 70% 15%
|
||||
display: grid
|
||||
height: 90vh
|
||||
|
||||
#imprintcontainer
|
||||
@include gridPosition(2, 2,2,2)
|
||||
background-color: $cPrimaryBackground
|
||||
padding: 1em
|
||||
overflow: auto
|
||||
padding: 2em
|
||||
max-width: 35em
|
||||
margin: 0 auto
|
||||
|
||||
h1.mat-display-1
|
||||
margin: 0
|
||||
|
||||
|
||||
input
|
||||
margin: 0.25em
|
||||
#header
|
||||
@include gridPosition(1, 2, 1, 2)
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,77 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
|
||||
<mat-sidenav-container class="sidenav-container" class="mat-typography">
|
||||
<mat-sidenav #drawer class="sidenav"
|
||||
fxShow="true" fxHide.gt-sm="true"
|
||||
fixedInViewport="false"
|
||||
autoFocus="false"
|
||||
>
|
||||
<mat-toolbar>Menu</mat-toolbar>
|
||||
<mat-nav-list>
|
||||
<a mat-list-item routerLink="" (click)="drawer.close()">Home</a>
|
||||
<a mat-list-item *ngIf="loggedIn" routerLink={{profileUrl}} (click)="drawer.close()">Profile</a>
|
||||
<a mat-list-item routerLink="/about" (click)="drawer.close()">About</a>
|
||||
<a mat-list-item routerLink="/imprint" (click)="drawer.close()">Imprint</a>
|
||||
<mat-divider></mat-divider>
|
||||
<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="/login" (click)="drawer.toggle()">Login</a>
|
||||
<a mat-stroked-button *ngIf="loggedIn" class="link-button" (click)="logout()" (click)="drawer.toggle()">log out</a>
|
||||
</div>
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav-content>
|
||||
<mat-toolbar color="primary" class="mat-elevation-z4">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Toggle sidenav"
|
||||
mat-icon-button
|
||||
(click)="drawer.toggle()"
|
||||
fxShow="true" fxHide.gt-sm="true">
|
||||
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
|
||||
</button>
|
||||
<span>Greenvironment</span>
|
||||
<!--The following menu items will be hidden on both SM and XS screen sizes -->
|
||||
<nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true">
|
||||
<div *ngIf="loggedIn">
|
||||
<a mat-tab-link class="link"
|
||||
*ngFor="let link of navLinksLoggedIn"
|
||||
[routerLink]="link.path"
|
||||
(click)="activeLink = link"
|
||||
routerLinkActive #rla="routerLinkActive"
|
||||
[routerLinkActiveOptions]="{exact:true}"
|
||||
[active]="activeLink == link">
|
||||
{{link.label}}
|
||||
</a>
|
||||
<a mat-tab-link (click)="logout()" >log out</a>
|
||||
</div>
|
||||
<div *ngIf="!loggedIn">
|
||||
<a mat-tab-link class="link"
|
||||
*ngFor="let link of navLinks"
|
||||
[routerLink]="link.path"
|
||||
(click)="activeLink = link"
|
||||
routerLinkActive #rla="routerLinkActive"
|
||||
[routerLinkActiveOptions]="{exact:true}"
|
||||
[active]="rla.isActive">
|
||||
{{link.label}}
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div id="menu-button-box">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item (click)="$event.stopPropagation();">
|
||||
<mat-slide-toggle
|
||||
color="primary"
|
||||
class="theme-button"
|
||||
(change)="toggleTheme()"><!--stays white when dragged-->
|
||||
dark mode
|
||||
</mat-slide-toggle>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</mat-toolbar>
|
||||
<router-outlet></router-outlet>
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
@ -0,0 +1,47 @@
|
||||
.sidenav-container
|
||||
height: 100%
|
||||
|
||||
.mat-sidenav-container
|
||||
height: 100%
|
||||
|
||||
.mat-sidenav-content
|
||||
height: 100vh
|
||||
|
||||
.sidenav
|
||||
width: 200px
|
||||
|
||||
.sidenav .mat-toolbar
|
||||
background: inherit
|
||||
|
||||
.mat-toolbar.mat-primary
|
||||
height: 56px
|
||||
position: sticky
|
||||
top: 0
|
||||
z-index: 1000
|
||||
.mat-tab-nav-bar
|
||||
width: 70%
|
||||
height: 56px
|
||||
.mat-tab-links
|
||||
height: 56px
|
||||
.mat-tab-link
|
||||
height: 56px
|
||||
|
||||
#link-box
|
||||
padding: 0.5em
|
||||
|
||||
.link-button
|
||||
width: 100%
|
||||
margin-bottom: 0.5em
|
||||
|
||||
/deep/ .mat-tab-link
|
||||
min-width: 5em!important
|
||||
|
||||
|
||||
|
||||
#menu-button-box
|
||||
text-align: right
|
||||
width: 100%
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,40 @@
|
||||
import { LayoutModule } from '@angular/cdk/layout';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
|
||||
import { MainNavigationComponent } from './main-navigation.component';
|
||||
|
||||
describe('MainNavigationComponent', () => {
|
||||
let component: MainNavigationComponent;
|
||||
let fixture: ComponentFixture<MainNavigationComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [MainNavigationComponent],
|
||||
imports: [
|
||||
NoopAnimationsModule,
|
||||
LayoutModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatListModule,
|
||||
MatSidenavModule,
|
||||
MatToolbarModule,
|
||||
]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MainNavigationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should compile', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,104 @@
|
||||
import { Component, OnInit, HostBinding } from '@angular/core';
|
||||
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map, shareReplay } from 'rxjs/operators';
|
||||
import { DatasharingService } from '../../services/datasharing.service';
|
||||
import { SelfService } from '../../services/selfservice/self.service';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { Levellist } from 'src/app/models/levellist';
|
||||
import { Http } from '@angular/http';
|
||||
import { Router } from '@angular/router';
|
||||
import { User } from 'src/app/models/user';
|
||||
import { OverlayContainer} from '@angular/cdk/overlay';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-navigation',
|
||||
templateUrl: './main-navigation.component.html',
|
||||
styleUrls: ['./main-navigation.component.sass']
|
||||
})
|
||||
export class MainNavigationComponent implements OnInit {
|
||||
loggedIn: boolean = false
|
||||
userId: number
|
||||
username: string
|
||||
user: User
|
||||
levellist: Levellist = new Levellist()
|
||||
level: string
|
||||
points: number
|
||||
profileUrl: string
|
||||
|
||||
lighttheme : boolean = true
|
||||
overlay;
|
||||
|
||||
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
|
||||
.pipe(
|
||||
map(result => result.matches),
|
||||
shareReplay()
|
||||
);
|
||||
|
||||
constructor(public overlayContainer: OverlayContainer, private data: DatasharingService,private selfservice: SelfService,private breakpointObserver: BreakpointObserver, private http: Http, private router: Router) {
|
||||
this.overlay = overlayContainer.getContainerElement();
|
||||
}
|
||||
ngOnInit() {
|
||||
this.data.currentUserInfo.subscribe(user => {
|
||||
this.user = user
|
||||
this.loggedIn = user.loggedIn;
|
||||
this.userId = user.userID;
|
||||
this.username = user.username
|
||||
this.level = this.levellist.getLevelName(user.level)
|
||||
this.points = user.points
|
||||
this.profileUrl = '/profile/' + this.userId;
|
||||
})
|
||||
}
|
||||
navLinksLoggedIn = [
|
||||
{ path: '', label: 'Home' },
|
||||
{ path: 'profile/1', label: 'Profile' },
|
||||
{ path: '/about', label: 'About' },
|
||||
{ path: '/imprint', label: 'Imprint' },
|
||||
];
|
||||
navLinks = [
|
||||
{ path: '', label: 'Home' },
|
||||
{ path: '/about', label: 'About' },
|
||||
{ path: '/imprint', label: 'Imprint' },
|
||||
{ path: '/login', label: 'Login' },
|
||||
{ path: '/register', label: 'Register' },
|
||||
];
|
||||
|
||||
toggleTheme() {
|
||||
if (this.overlay.classList.contains("dark-theme")) {
|
||||
this.overlay.classList.remove("dark-theme");
|
||||
this.overlay.classList.add("light-theme");
|
||||
this.onSetTheme("light-theme");
|
||||
} else if (this.overlay.classList.contains("light-theme")) {
|
||||
this.overlay.classList.remove("light-theme");
|
||||
this.overlay.classList.add("dark-theme");
|
||||
this.onSetTheme("dark-theme");
|
||||
} else {
|
||||
this.overlay.classList.add("dark-theme");
|
||||
this.onSetTheme("dark-theme");
|
||||
}
|
||||
}
|
||||
|
||||
@HostBinding('class') componentCssClass;
|
||||
onSetTheme(theme) {
|
||||
this.overlayContainer.getContainerElement().classList.add(theme);
|
||||
this.componentCssClass = theme;
|
||||
}
|
||||
logout() {
|
||||
let url = environment.graphQLUrl
|
||||
|
||||
let headers = new Headers()
|
||||
headers.set('Content-Type', 'application/json')
|
||||
|
||||
const body = {query: `mutation {
|
||||
logout
|
||||
}`}
|
||||
|
||||
this.http.post(url, body).subscribe(response => {
|
||||
console.log(response.text())})
|
||||
this.loggedIn = false
|
||||
let user = new User()
|
||||
user.loggedIn = false
|
||||
this.data.changeUserInfo(user)
|
||||
this.router.navigate(['login'])
|
||||
}
|
||||
}
|
||||
@ -1,20 +1,38 @@
|
||||
@import '../../../styles/mixins.sass'
|
||||
@import '../../../styles/vars.sass'
|
||||
|
||||
#profile
|
||||
background-color: $cSecondaryBackground
|
||||
grid-template: 3% 94% 3% / 10% 80% 10%
|
||||
display: grid
|
||||
min-height: 90vh
|
||||
max-height: 90vh
|
||||
|
||||
#profile
|
||||
padding: 2em
|
||||
max-width: 1200px
|
||||
margin: 0 auto
|
||||
|
||||
#profilecontainer
|
||||
@include gridPosition(2, 2,2,2)
|
||||
//grid-template: 15% 15% 15% 15% 15% 15% / 100%
|
||||
background-color: $cPrimaryBackground
|
||||
padding: 1em
|
||||
overflow: auto
|
||||
#profile-card-container
|
||||
margin: 0 auto
|
||||
width: 100%
|
||||
max-width: 690px
|
||||
|
||||
th
|
||||
text-align: left
|
||||
.mat-table
|
||||
width: 100%
|
||||
max-width: 690px
|
||||
margin: 0 auto
|
||||
.mat-header-cell
|
||||
padding-right: 0.5em
|
||||
|
||||
.profile-picture
|
||||
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
|
||||
background-size: cover
|
||||
|
||||
|
||||
#profile-table
|
||||
width: 100%
|
||||
.mat-table
|
||||
display: block
|
||||
.mat-cell,
|
||||
.mat-header-cell
|
||||
align-items: center
|
||||
display: flex
|
||||
min-height: 48px
|
||||
padding: 0
|
||||
flex: 1
|
||||
overflow: hidden
|
||||
word-wrap: break-word
|
||||
|
||||
@ -1,28 +1,33 @@
|
||||
<div id="register">
|
||||
<div id="registercontainer">
|
||||
<h1>Register</h1>
|
||||
<table style="width:100%" (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">
|
||||
<tr>
|
||||
<td>username: </td>
|
||||
<td><input #username type="text" name="username" username.value=''><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>email:</td>
|
||||
<td><input #email type="text" name="email"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>password:</td>
|
||||
<td> <input #password type="password" name="password"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>repeat password:</td>
|
||||
<td> <input #repeatpassword type="password" name="repeatpassword"><br></td>
|
||||
</tr>
|
||||
</table>
|
||||
<button type="registerbutton" (click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register</button>
|
||||
<p *ngIf="errorOccurred">{{errorMessage}}</p>
|
||||
<br>
|
||||
<br>
|
||||
<a href="/login">You are already part of greenvironment? - login</a>
|
||||
</div>
|
||||
</div>
|
||||
<mat-card style="text-align: center;" >
|
||||
<mat-card-title>
|
||||
Register
|
||||
</mat-card-title>
|
||||
<mat-card-content>
|
||||
<div class="example-container" (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">
|
||||
<mat-error *ngIf="errorOccurred">{{errorMessage}}</mat-error>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Enter your email" #email >
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Enter your username" #username >
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<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">
|
||||
<mat-icon>{{hide1 ? 'visibility_off' : 'visibility'}}</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<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">
|
||||
<mat-icon>{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<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>
|
||||
<a mat-stroked-button color="primary" routerLink="/login">Login</a>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,23 @@
|
||||
<div id="header">
|
||||
<!--<div id="header">
|
||||
<span class="title">Friends</span>
|
||||
<button id="new" type="submit"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
|
||||
<button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
|
||||
</div>
|
||||
<div id="friendslist">
|
||||
<div class="frienditem" *ngFor="let friend of friends"
|
||||
</div>-->
|
||||
<mat-toolbar><span>Friends</span></mat-toolbar>
|
||||
<div id="friendlist">
|
||||
<!--<div class="frienditem" *ngFor="let friend of friends"
|
||||
[class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)">
|
||||
<div class="picture">Pic</div>
|
||||
<div class="name"><span>{{friend.name}}</span></div>
|
||||
</div>
|
||||
</div>-->
|
||||
<mat-card class="friend-card" *ngFor="let friend of friends"
|
||||
[class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"
|
||||
tabindex="0"
|
||||
matRipple>
|
||||
<mat-card-header>
|
||||
<div mat-card-avatar class="profile-picture"></div>
|
||||
<mat-card-title>{{friend.name}}</mat-card-title>
|
||||
<mat-card-subtitle>{{friend.rankname}}</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,20 @@
|
||||
<div id="header">
|
||||
<!--<div id="header">
|
||||
<span class="title">Groups</span>
|
||||
<button id="new" type="submit"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
|
||||
<button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
|
||||
</div>
|
||||
<div id="groupslist">
|
||||
<div class="groupitem" *ngFor="let group of groups"
|
||||
</div>-->
|
||||
<mat-toolbar><span>Groups</span></mat-toolbar>
|
||||
<div id="grouplist">
|
||||
<!--<div class="groupitem" *ngFor="let group of groups"
|
||||
[class.selected]="group === selectedGroup" (click)="showGroup(group)">
|
||||
<div class="picture">Pic</div>
|
||||
<div class="name"><span>{{group.name}}</span></div>
|
||||
</div>
|
||||
</div>-->
|
||||
<mat-card class="group-card" *ngFor="let group of groups"
|
||||
[class.selected]="group === selectedGroup" (click)="showGroup(group)">
|
||||
<mat-card-header>
|
||||
<div mat-card-avatar class="group-picture"></div>
|
||||
<mat-card-title>{{group.name}}</mat-card-title>
|
||||
</mat-card-header>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
import { Levellist } from 'src/app/models/levellist';
|
||||
|
||||
export class FriendInfo {
|
||||
levellist: Levellist = new Levellist();
|
||||
id: number
|
||||
name: string
|
||||
rankname: string
|
||||
|
||||
constructor(pId: number, pName: string) {
|
||||
constructor(pId: number, pName: string, pLevel: number) {
|
||||
this.id = pId
|
||||
this.name = pName
|
||||
this.rankname = this.levellist.getLevelName(pLevel);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
@import '~@angular/material/theming';
|
||||
// Plus imports for other components in your app.
|
||||
|
||||
// Include the common styles for Angular Material. We include this here so that you only
|
||||
// have to load a single css file for Angular Material in your app.
|
||||
// Be sure that you only ever include this mixin once!
|
||||
@include mat-core();
|
||||
|
||||
// Define the palettes for your theme using the Material Design palettes available in palette.scss
|
||||
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
|
||||
// hue. Available color palettes: https://material.io/design/color/
|
||||
$primary: mat-palette($mat-green);
|
||||
$accent: mat-palette($mat-pink, A200, A100, A400);
|
||||
|
||||
// The warn palette is optional (defaults to red).
|
||||
$warn: mat-palette($mat-red);
|
||||
|
||||
// Create the theme object (a Sass map containing all of the palettes).
|
||||
$light-theme: mat-light-theme($primary, $accent, $warn);
|
||||
|
||||
$dark-primary: mat-palette($mat-green);
|
||||
$dark-accent: mat-palette($mat-pink, A200, A100, A400);
|
||||
|
||||
// The warn palette is optional (defaults to red).
|
||||
$dark-warn: mat-palette($mat-red);
|
||||
|
||||
// Create the theme object (a Sass map containing all of the palettes).
|
||||
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
|
||||
|
||||
.dark-theme {
|
||||
@include angular-material-theme($dark-theme);
|
||||
}
|
||||
|
||||
.light-theme {
|
||||
@include angular-material-theme($light-theme)
|
||||
}
|
||||
// Include theme styles for core and each component used in your app.
|
||||
// Alternatively, you can import and @include the theme mixins for each component
|
||||
// that you are using.
|
||||
@include angular-material-theme($light-theme);
|
||||
Loading…
Reference in New Issue