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

master
Trivernis 5 years ago committed by Gitea
commit e8c38d14f9

@ -55,6 +55,11 @@ 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 logo from 'src/assets/gv-new-logo.svg';
import logo from '!!raw-loader!./gv-new-logo-white.svg';
const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} }; const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
@ -126,9 +131,14 @@ const appRoutes: Routes = [
MatTableModule, MatTableModule,
MatSortModule, MatSortModule,
MatBadgeModule, MatBadgeModule,
MatProgressSpinnerModule MatProgressSpinnerModule,
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule {
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIconLiteral(
'logo', sanitizer.bypassSecurityTrustHtml(logo));
}
}

@ -1,38 +1,6 @@
@import '../../../styles/mixins.sass' @import '../../../styles/mixins.sass'
@import '../../../styles/vars.sass' @import '../../../styles/vars.sass'
#content
position: fixed
width: 100%
height: calc(100% - 56px)
#chat
box-sizing: content-box
height: 100%
width: 25%
float: left
overflow-y: auto
#feed
box-sizing: content-box
height: 100%
width: 50%
float: left
overflow-y: auto
#social
box-sizing: content-box
height: 100%
width: 25%
float: left
overflow-y: auto
.mat-toolbar.mat-primary
width: 100%
position: sticky
top: 0
z-index: 1
/deep/ .mat-tab-body-wrapper /deep/ .mat-tab-body-wrapper
height: 100% height: 100%
@ -45,8 +13,9 @@
height: 100% height: 100%
.tab-content .tab-content
height: 50% box-sizing: content-box
width: 100% width: 100%

@ -1,5 +1,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> <!-- getting the google material fonts-->
<mat-sidenav-container class="sidenav-container" class="mat-typography"> <mat-sidenav-container class="mat-typography">
<!-- 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"
@ -21,8 +23,12 @@
</div> </div>
</mat-nav-list> </mat-nav-list>
</mat-sidenav> </mat-sidenav>
<!-- TOOLBAR -->
<mat-sidenav-content> <mat-sidenav-content>
<mat-toolbar color="primary" class="mat-elevation-z4"> <mat-toolbar color="primary" class="mat-elevation-z4">
<!--content on SMALL SCREEN-->
<button <button
type="button" type="button"
aria-label="Toggle sidenav" aria-label="Toggle sidenav"
@ -31,8 +37,8 @@
fxShow="true" fxHide.gt-sm="true"> fxShow="true" fxHide.gt-sm="true">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon> <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button> </button>
<mat-icon svgIcon="logo" style="min-width: 35px;"></mat-icon>
<span>Greenvironment</span> <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"> <nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true">
<div [hidden]="!loggedIn"> <div [hidden]="!loggedIn">
<a mat-tab-link class="link" <a mat-tab-link class="link"
@ -57,15 +63,19 @@
</a> </a>
</div> </div>
</nav> </nav>
<!--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>
<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">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
<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">
@ -96,6 +106,7 @@
</button> </button>
</div> </div>
</mat-menu> </mat-menu>
</mat-toolbar> </mat-toolbar>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</mat-sidenav-content> </mat-sidenav-content>

@ -1,23 +1,19 @@
.sidenav-container
height: 100%
.mat-sidenav-container .mat-sidenav-container
height: 100% margin-top: 56px
height: calc(100vh - 56px)
.mat-sidenav-content
height: 100vh
.sidenav .sidenav
width: 200px width: 200px
.sidenav .mat-toolbar .sidenav .mat-toolbar
background: inherit //background: inherit
.mat-toolbar.mat-primary .mat-toolbar.mat-primary
height: 56px height: 56px
position: sticky position: fixed
//position: sticky
top: 0 top: 0
z-index: 1000 z-index: 999
.mat-tab-nav-bar .mat-tab-nav-bar
width: 50% width: 50%
height: 56px height: 56px
@ -35,13 +31,8 @@
/deep/ .mat-tab-link /deep/ .mat-tab-link
min-width: 5em!important min-width: 5em!important
#login-button
#menu-button-box #menu-button-box
text-align: right text-align: right
width: 100% width: 100%

@ -25,7 +25,7 @@ export class MainNavigationComponent implements OnInit {
private settingsService: SettingsService, private settingsService: SettingsService,
private requestservice: RequestService, private requestservice: RequestService,
private breakpointObserver: BreakpointObserver, private breakpointObserver: BreakpointObserver,
private http: Http, private router: Router private http: Http, private router: Router,
) { ) {
this.overlay = overlayContainer.getContainerElement(); this.overlay = overlayContainer.getContainerElement();
} }

@ -1,105 +1,107 @@
<mat-toolbar color="primary">Profile</mat-toolbar> <div id="profile-page">
<div id="profile"> <mat-toolbar color="primary">Profile</mat-toolbar>
<div id="profilecontainer" [hidden]="profileNotFound"> <div id="profile">
<div id="profile-card-container"> <div id="profilecontainer" [hidden]="profileNotFound">
<mat-card class="mat-elevation-z8"> <div id="profile-card-container">
<mat-card-header> <mat-card class="mat-elevation-z8">
<div mat-card-avatar class="profile-picture"></div> <mat-card-header>
<mat-card-title>{{user.username}}</mat-card-title> <div mat-card-avatar class="profile-picture"></div>
<mat-card-subtitle>{{user.handle}}</mat-card-subtitle> <mat-card-title>{{user.username}}</mat-card-title>
</mat-card-header> <mat-card-subtitle>{{user.handle}}</mat-card-subtitle>
<mat-card-content> </mat-card-header>
<table id="profile-table"> <mat-card-content>
<tr> <table id="profile-table">
<div class="mat-header-cell">name: </div> <tr>
<td>{{user.username}}</td> <div class="mat-header-cell">name: </div>
</tr> <td>{{user.username}}</td>
<mat-divider></mat-divider> </tr>
<tr> <mat-divider></mat-divider>
<div class="mat-header-cell">handle: </div> <tr>
<td>{{user.handle}}</td> <div class="mat-header-cell">handle: </div>
</tr> <td>{{user.handle}}</td>
<mat-divider></mat-divider> </tr>
<tr> <mat-divider></mat-divider>
<div class="mat-header-cell">profileID: </div> <tr>
<td>{{user.userID}}</td> <div class="mat-header-cell">profileID: </div>
</tr> <td>{{user.userID}}</td>
<mat-divider></mat-divider> </tr>
<tr> <mat-divider></mat-divider>
<div class="mat-header-cell">points: </div> <tr>
<td>{{user.points}}</td> <div class="mat-header-cell">points: </div>
</tr> <td>{{user.points}}</td>
<mat-divider></mat-divider> </tr>
<tr> <mat-divider></mat-divider>
<div class="mat-header-cell">level: </div> <tr>
<td>{{user.level}}</td> <div class="mat-header-cell">level: </div>
</tr> <td>{{user.level}}</td>
<mat-divider></mat-divider> </tr>
<tr> <mat-divider></mat-divider>
<div class="mat-header-cell">level name: </div> <tr>
<td>{{rankname}}</td> <div class="mat-header-cell">level name: </div>
</tr> <td>{{rankname}}</td>
</table> </tr>
</mat-card-content> </table>
</mat-card> </mat-card-content>
</div> </mat-card>
<br> </div>
<h1>What does the level mean?</h1>
<p>There are different levels you can reach through green behaviour.
Collect 100 points to level up! The levels are called:
</p>
<table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
<ng-container matColumnDef="level">
<th mat-header-cell *matHeaderCellDef> level </th>
<td mat-cell *matCellDef="let level"> {{level.level}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> level name </th>
<td mat-cell *matCellDef="let level"> {{level.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
</table>
<br> <br>
<h1>How to level up?</h1> <h1>What does the level mean?</h1>
<p>There is an always growing list of things you can do, <p>There are different levels you can reach through green behaviour.
to support your environment Collect 100 points to level up! The levels are called:
and earn points to level up at the same time. </p>
You can get a different amount of points <table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
for differnet actions you can see in the list below: <ng-container matColumnDef="level">
</p> <th mat-header-cell *matHeaderCellDef> level </th>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8"> <td mat-cell *matCellDef="let level"> {{level.level}} </td>
<!--- Note that these columns can be defined in any order. </ng-container>
The actual rendered columns are set as a property on the row definition" --> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> level name </th>
<!-- Position Column --> <td mat-cell *matCellDef="let level"> {{level.name}} </td>
<ng-container matColumnDef="points"> </ng-container>
<th mat-header-cell *matHeaderCellDef mat-sort-header> points </th> <tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
<td mat-cell *matCellDef="let action"> {{action.points}} </td> <tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
</ng-container> </table>
<br>
<h1>How to level up?</h1>
<p>There is an always growing list of things you can do,
to support your environment
and earn points to level up at the same time.
You can get a different amount of points
for differnet actions you can see in the list below:
</p>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!--- 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 -->
<ng-container matColumnDef="points">
<th mat-header-cell *matHeaderCellDef mat-sort-header> points </th>
<td mat-cell *matCellDef="let action"> {{action.points}} </td>
</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>
<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>
<!--<table style="width:100%"> <!--<table style="width:100%">
<tr> <tr>
<th>points </th> <th>points </th>
<th>action</th> <th>action</th>
</tr> </tr>
<tr *ngFor= "let action of actionlist.actions"> <tr *ngFor= "let action of actionlist.actions">
<td>{{action.points}}</td> <td>{{action.points}}</td>
<td>{{action.name}}</td> <td>{{action.name}}</td>
</tr> </tr>
</table>--> </table>-->
</div>
<div id="profilecontainer" *ngIf="profileNotFound">
<h1>Profile not found :(</h1>
</div> </div>
<div id="profilecontainer" *ngIf="profileNotFound">
<h1>Profile not found :(</h1>
</div> </div>
</div> </div>

@ -1,6 +1,12 @@
@import '../../../styles/mixins.sass' @import '../../../styles/mixins.sass'
@import '../../../styles/vars.sass' @import '../../../styles/vars.sass'
#profile-page
position: fixed
width: 100%
height: calc(100% - 56px)
overflow: scroll
#profile #profile
padding: 2em padding: 2em
max-width: 1200px max-width: 1200px

@ -1,16 +1,17 @@
#search #search
width: 100% width: 100%
height: 100% overflow-x: hidden
height: 100%
#input #input
width: 100% width: 100%
padding-left: 0.5em padding-left: 0.5em
padding-right: 0.5em padding-right: 0.5em
#category-chooser #category-chooser
padding-left: 0.5em padding-left: 0.5em
padding-right: 0.5em padding-right: 0.5em
#friendlist #friendlist
padding: 0.5em padding: 0.5em

@ -1,8 +1,8 @@
<mat-toolbar> <mat-toolbar>
<span>Friends</span> <span>Friends</span>
<div id="button-box"> <!--<div id="button-box">
<button mat-icon-button><mat-icon>person_add</mat-icon></button> <button mat-icon-button><mat-icon>person_add</mat-icon></button>
</div> </div>-->
</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"

@ -5,9 +5,9 @@
</div>--> </div>-->
<mat-toolbar> <mat-toolbar>
<span>Groups</span> <span>Groups</span>
<div id="button-box"> <!--<div id="button-box">
<button mat-icon-button><mat-icon>group_add</mat-icon></button> <button mat-icon-button><mat-icon>group_add</mat-icon></button>
</div> </div>-->
</mat-toolbar> </mat-toolbar>
<div id="grouplist"> <div id="grouplist">
<!--<div class="groupitem" *ngFor="let group of groups" <!--<div class="groupitem" *ngFor="let group of groups"

@ -0,0 +1,76 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="64px"
height="64px"
viewBox="0 0 64 64"
version="1.1"
id="SVGRoot"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="gv-new-logo-white.svg">
<defs
id="defs3412" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="5.656854"
inkscape:cx="-16.580479"
inkscape:cy="40.712852"
inkscape:document-units="px"
inkscape:current-layer="layer2"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1003"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:grid-bbox="true" />
<metadata
id="metadata3415">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Layer 2"
style="display:inline">
<path
style="fill:none;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 59.638425,10.982918 c -2.598034,1.65974 -5.164767,1.536797 -6.79245,1.598268 -1.627684,0.06147 -7.89147,-0.248912 -10.548644,-0.307359 -2.031158,-0.04467 -10.408921,-0.634292 -18.029729,3.227272 -6.189793,3.136452 -10.030686,7.78418 -11.299883,11.09567 -1.095556,2.858442 -1.721588,5.317315 -1.095556,9.896969 0.334798,2.449172 0.916715,4.631314 0.829032,5.615672 -0.07744,0.869314 0.04741,1.638006 -2.331509,4.035408 -2.3789231,2.397403 -7.5630585,6.702992 -7.5630585,6.702992"
id="path3986"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csssssssc" />
<path
style="fill:none;stroke:#ffffff;stroke-width:2.81999993;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 17.040936,45.75125 c 0,0 5.71124,1.10058 9.863991,0.923511 4.152753,-0.177069 10.503177,-1.963537 14.640251,-4.074381 2.654809,-1.354554 8.010685,-4.452479 10.623857,-9.671077 1.545586,-3.086589 2.392221,-6.933871 2.615983,-8.836099 0.374688,-3.185266 0.215574,-5.492636 0.858958,-6.968217"
id="path3988"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cssssc" />
<path
style="fill:none;stroke:#ffffff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 16.515165,41.68934 c 0,0 3.942744,-4.483925 8.75,-9 3.732038,-3.505984 5.757466,-5.519577 10.967068,-8.580806 3.85598,-2.265823 12.426015,-6.277728 15.87316,-7.736136"
id="path3990"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cssc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

4
src/typings.d.ts vendored

@ -0,0 +1,4 @@
declare module '*.svg' {
const svg: string;
export default svg;
}
Loading…
Cancel
Save