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>
|
<app-main-navigation></app-main-navigation>
|
||||||
<router-outlet></router-outlet>
|
|
||||||
|
|||||||
@ -1,45 +1,12 @@
|
|||||||
@import '../styles/mixins.sass'
|
@import '../styles/mixins.sass'
|
||||||
@import '../styles/vars.sass'
|
@import '../styles/vars.sass'
|
||||||
/*
|
|
||||||
#content
|
|
||||||
grid-template: 7.5% 92.5% / 25% 50% 25%
|
|
||||||
display: grid
|
|
||||||
min-height: 100vh
|
|
||||||
max-height: 100vh*/
|
|
||||||
|
|
||||||
#imprint
|
html, body
|
||||||
background-color: $cSecondaryBackground
|
margin: 0
|
||||||
grid-template: 15% 70% 15% / 15% 70% 15%
|
height: 100%
|
||||||
display: grid
|
|
||||||
min-height: 100vh
|
|
||||||
max-height: 100vh
|
|
||||||
|
|
||||||
#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="text0" style="text-align: center;">
|
||||||
<div id="aboutcontainer">
|
<h1>Greenvironment</h1>
|
||||||
<h1>What's Greenvironment?</h1>
|
<br> <br> <br> <br> <br>
|
||||||
<h2>Hello!</h2>
|
<h1 class="mat-display-3">Keep it clean and green!</h1>
|
||||||
<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>
|
<button mat-icon-button>
|
||||||
<p>We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p>
|
<mat-icon class="big-icon">keyboard_arrow_down</mat-icon>
|
||||||
<a href="/register">You aren't part of greenvironment yet? - join us here</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</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/mixins.sass'
|
||||||
@import '../../../styles/vars.sass'
|
@import '../../../styles/vars.sass'
|
||||||
|
@import '~@angular/material/theming'
|
||||||
|
@import '../../../styles/greenvironment-material-theme.scss'
|
||||||
|
|
||||||
#about
|
#text0, #text2
|
||||||
background-color: $cSecondaryBackground
|
padding: 2em
|
||||||
grid-template: 15% 70% 15% / 15% 70% 15%
|
max-width: 100%
|
||||||
display: grid
|
min-height: 50%
|
||||||
min-height: 90vh
|
background-color: mat-color($primary)
|
||||||
max-height: 90vh
|
|
||||||
|
#text1
|
||||||
|
padding: 2em
|
||||||
|
min-height: 50%
|
||||||
|
max-width: 100%
|
||||||
|
|
||||||
#aboutcontainer
|
.big-icon
|
||||||
@include gridPosition(2, 2,2,2)
|
//color: white
|
||||||
background-color: $cPrimaryBackground
|
transform: scale(2)
|
||||||
padding: 1em
|
|
||||||
overflow: auto
|
|
||||||
|
|
||||||
input
|
.link-button
|
||||||
margin: 0.25em
|
width: 100%
|
||||||
#header
|
max-width: 30em
|
||||||
@include gridPosition(1, 2, 1, 2)
|
margin-bottom: 1em
|
||||||
a
|
|
||||||
color: $cHeadPrimaryBackground
|
|
||||||
|
|||||||
@ -1,82 +1,37 @@
|
|||||||
@import '../../../styles/mixins.sass'
|
@import '../../../styles/mixins.sass'
|
||||||
@import '../../../styles/vars.sass'
|
@import '../../../styles/vars.sass'
|
||||||
|
|
||||||
#postinput
|
#home
|
||||||
@include gridPosition(1, 2, 1, 2)
|
width: 100%
|
||||||
margin: 0.5em
|
height: 100%
|
||||||
display: grid
|
|
||||||
grid-template: 100% /80% 10% 10%
|
#complete-feed
|
||||||
#input
|
box-sizing: border-box
|
||||||
@include gridPosition(1, 2, 1, 2)
|
display: flex
|
||||||
border-radius: 0.5em
|
width: 100%
|
||||||
padding: 0.125em
|
padding: 0.5em
|
||||||
resize: none
|
|
||||||
#attach
|
#feedlist
|
||||||
@include gridPosition(1, 2, 2, 3)
|
width: 100%
|
||||||
#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
|
|
||||||
|
|
||||||
#feedchooser
|
#input
|
||||||
@include gridPosition(1, 2, 1, 2)
|
width: 100%
|
||||||
display: grid
|
padding-left: 0.5em
|
||||||
grid-template: 100% /50% 50%
|
padding-right: 0.5em
|
||||||
background-color: $cFontWhite
|
|
||||||
padding: 0
|
#action-chooser
|
||||||
|
width: 100%
|
||||||
|
padding-left: 0.5em
|
||||||
|
padding-right: 0.5em
|
||||||
|
|
||||||
|
#check
|
||||||
margin: 0
|
margin: 0
|
||||||
button
|
padding-left: 0.5em
|
||||||
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)
|
|
||||||
|
|
||||||
#feedlist
|
#post-button
|
||||||
@include gridPosition(2, 3, 1, 2)
|
|
||||||
overflow: auto
|
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 100%
|
padding-left: 0.5em
|
||||||
|
padding-right: 0.5em
|
||||||
.feeditemPicture
|
margin-top: 0.5em
|
||||||
background-color: $cFeedItemBackground
|
|
||||||
min-height: 2em
|
|
||||||
margin: 0.5em
|
|
||||||
padding: 0.25em
|
|
||||||
border-radius: 0.25em
|
|
||||||
.itemhead
|
|
||||||
align-items: flex-start
|
|
||||||
|
|
||||||
.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/mixins.sass'
|
||||||
@import '../../../../styles/vars.sass'
|
@import '../../../../styles/vars.sass'
|
||||||
|
|
||||||
.feeditem
|
.post
|
||||||
background-color: $cFeedItemBackground
|
box-sizing: border-box
|
||||||
min-height: 2em
|
width: 100%
|
||||||
//max-heigth: 5em
|
margin-top: 0.5em
|
||||||
margin: 0.5em
|
|
||||||
padding: 0.25em
|
::ng-deep .mat-card-header-text
|
||||||
border-radius: 0.25em
|
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">
|
<div id="content" fxShow="true" fxHide.lt-md="true">
|
||||||
<home-chatmanager id="chatcontainer" *ngIf="loggedIn"></home-chatmanager>
|
<div id="chat"><home-chatmanager id="chatcontainer" *ngIf="!loggedIn"></home-chatmanager></div>
|
||||||
<home-feed id="feedcontainer"></home-feed>
|
<div id="feed"><home-feed id="feedcontainer"></home-feed></div>
|
||||||
<home-social id="socialcontainer" *ngIf="loggedIn"></home-social>
|
<div id="social"><home-social id="socialcontainer" *ngIf="!loggedIn"></home-social></div>
|
||||||
</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="imprint">
|
||||||
<div id="imprintcontainer">
|
<p>The greenvironment network is being developed by the greenvironment team</p>
|
||||||
<h1>Imprint</h1>
|
<h2>Contact</h2>
|
||||||
<p>The greenvironment network is being developed by the greenvironment team</p>
|
<p>Email: nick.derkoenig@greenvironment.net</p>
|
||||||
<h2>Contact</h2>
|
|
||||||
<p>Email: nick.derkoenig@greenvironment.net</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
@ -1,19 +1,15 @@
|
|||||||
@import '../../../styles/mixins.sass'
|
@import '../../../styles/mixins.sass'
|
||||||
@import '../../../styles/vars.sass'
|
@import '../../../styles/vars.sass'
|
||||||
|
|
||||||
|
|
||||||
#imprint
|
#imprint
|
||||||
background-color: $cSecondaryBackground
|
padding: 2em
|
||||||
grid-template: 15% 70% 15% / 15% 70% 15%
|
max-width: 35em
|
||||||
display: grid
|
margin: 0 auto
|
||||||
height: 90vh
|
|
||||||
|
h1.mat-display-1
|
||||||
#imprintcontainer
|
margin: 0
|
||||||
@include gridPosition(2, 2,2,2)
|
|
||||||
background-color: $cPrimaryBackground
|
|
||||||
padding: 1em
|
|
||||||
overflow: auto
|
|
||||||
|
|
||||||
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/mixins.sass'
|
||||||
@import '../../../styles/vars.sass'
|
@import '../../../styles/vars.sass'
|
||||||
|
|
||||||
#profile
|
#profile
|
||||||
background-color: $cSecondaryBackground
|
padding: 2em
|
||||||
grid-template: 3% 94% 3% / 10% 80% 10%
|
max-width: 1200px
|
||||||
display: grid
|
margin: 0 auto
|
||||||
min-height: 90vh
|
|
||||||
max-height: 90vh
|
|
||||||
|
|
||||||
|
|
||||||
#profilecontainer
|
#profile-card-container
|
||||||
@include gridPosition(2, 2,2,2)
|
margin: 0 auto
|
||||||
//grid-template: 15% 15% 15% 15% 15% 15% / 100%
|
width: 100%
|
||||||
background-color: $cPrimaryBackground
|
max-width: 690px
|
||||||
padding: 1em
|
|
||||||
overflow: auto
|
|
||||||
|
|
||||||
th
|
.mat-table
|
||||||
text-align: left
|
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="register">
|
||||||
<div id="registercontainer">
|
<mat-card style="text-align: center;" >
|
||||||
<h1>Register</h1>
|
<mat-card-title>
|
||||||
<table style="width:100%" (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">
|
Register
|
||||||
<tr>
|
</mat-card-title>
|
||||||
<td>username: </td>
|
<mat-card-content>
|
||||||
<td><input #username type="text" name="username" username.value=''><br></td>
|
<div class="example-container" (keyup.enter)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">
|
||||||
</tr>
|
<mat-error *ngIf="errorOccurred">{{errorMessage}}</mat-error>
|
||||||
<tr>
|
<mat-form-field>
|
||||||
<td>email:</td>
|
<input matInput placeholder="Enter your email" #email >
|
||||||
<td><input #email type="text" name="email"><br></td>
|
</mat-form-field>
|
||||||
</tr>
|
<mat-form-field>
|
||||||
<tr>
|
<input matInput placeholder="Enter your username" #username >
|
||||||
<td>password:</td>
|
</mat-form-field>
|
||||||
<td> <input #password type="password" name="password"><br></td>
|
<mat-form-field>
|
||||||
</tr>
|
<input matInput placeholder="Enter your password" [type]="hide1 ? 'password' : 'text'" #password>
|
||||||
<tr>
|
<button mat-icon-button matSuffix (click)="hide1 = !hide1" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide1">
|
||||||
<td>repeat password:</td>
|
<mat-icon>{{hide1 ? 'visibility_off' : 'visibility'}}</mat-icon>
|
||||||
<td> <input #repeatpassword type="password" name="repeatpassword"><br></td>
|
</button>
|
||||||
</tr>
|
</mat-form-field>
|
||||||
</table>
|
<mat-form-field>
|
||||||
<button type="registerbutton" (click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register</button>
|
<input matInput placeholder="Repeat your password" [type]="hide2 ? 'password' : 'text'" #repeatpassword>
|
||||||
<p *ngIf="errorOccurred">{{errorMessage}}</p>
|
<button mat-icon-button matSuffix (click)="hide2 = !hide2" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide2">
|
||||||
<br>
|
<mat-icon>{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
|
||||||
<br>
|
</button>
|
||||||
<a href="/login">You are already part of greenvironment? - login</a>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<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="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>
|
<button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
|
||||||
</div>
|
</div>-->
|
||||||
<div id="friendslist">
|
<mat-toolbar><span>Friends</span></mat-toolbar>
|
||||||
<div class="frienditem" *ngFor="let friend of friends"
|
<div id="friendlist">
|
||||||
|
<!--<div class="frienditem" *ngFor="let friend of friends"
|
||||||
[class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)">
|
[class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)">
|
||||||
<div class="picture">Pic</div>
|
<div class="picture">Pic</div>
|
||||||
<div class="name"><span>{{friend.name}}</span></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>
|
</div>
|
||||||
|
|||||||
@ -1,12 +1,20 @@
|
|||||||
<div id="header">
|
<!--<div id="header">
|
||||||
<span class="title">Groups</span>
|
<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="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>
|
<button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
|
||||||
</div>
|
</div>-->
|
||||||
<div id="groupslist">
|
<mat-toolbar><span>Groups</span></mat-toolbar>
|
||||||
<div class="groupitem" *ngFor="let group of groups"
|
<div id="grouplist">
|
||||||
|
<!--<div class="groupitem" *ngFor="let group of groups"
|
||||||
[class.selected]="group === selectedGroup" (click)="showGroup(group)">
|
[class.selected]="group === selectedGroup" (click)="showGroup(group)">
|
||||||
<div class="picture">Pic</div>
|
<div class="picture">Pic</div>
|
||||||
<div class="name"><span>{{group.name}}</span></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>
|
</div>
|
||||||
|
|||||||
@ -1,9 +1,14 @@
|
|||||||
|
import { Levellist } from 'src/app/models/levellist';
|
||||||
|
|
||||||
export class FriendInfo {
|
export class FriendInfo {
|
||||||
|
levellist: Levellist = new Levellist();
|
||||||
id: number
|
id: number
|
||||||
name: string
|
name: string
|
||||||
|
rankname: string
|
||||||
|
|
||||||
constructor(pId: number, pName: string) {
|
constructor(pId: number, pName: string, pLevel: number) {
|
||||||
this.id = pId
|
this.id = pId
|
||||||
this.name = pName
|
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