Moved 'What does the level mean?' to the about page

master
Max 5 years ago
parent ad04096f15
commit b6a8296eee

@ -1,5 +1,6 @@
<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>
@ -9,7 +10,51 @@
</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 class="mat-display-1">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 as much as we do.</p>
<br>
<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>
<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 -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> action </th>
<td mat-cell *matCellDef="let action"> {{action.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</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 clean and green.</p>

@ -1,7 +1,5 @@
@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 #about
position: fixed position: fixed
@ -28,3 +26,11 @@
width: 100% width: 100%
max-width: 30em max-width: 30em
margin-bottom: 1em margin-bottom: 1em
.mat-table
width: 100%
max-width: 690px
margin: 0 auto
text-align: left
.mat-header-cell
padding-right: 0.5em

@ -1,4 +1,8 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { Actionlist } from 'src/app/models/actionlist';
import { Levellist } from 'src/app/models/levellist';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
@Component({ @Component({
selector: 'app-about', selector: 'app-about',
@ -6,10 +10,19 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./about.component.sass'] styleUrls: ['./about.component.sass']
}) })
export class AboutComponent implements OnInit { export class AboutComponent implements OnInit {
actionlist: Actionlist = new Actionlist();
levellist: Levellist = new Levellist();
displayedColumns = ['points', 'name'];
dataSource = new MatTableDataSource(this.actionlist.Actions);
displayedLevelColumns = ['level', 'name'];
levelSource = this.levellist.levels;
constructor() { } constructor() { }
@ViewChild(MatSort, {static: true}) sort: MatSort;
ngOnInit() { ngOnInit() {
this.dataSource.sort = this.sort;
} }
} }

@ -36,12 +36,12 @@ export class FeedComponent implements OnInit {
this.data.currentUserInfo.subscribe(user => { this.data.currentUserInfo.subscribe(user => {
this.user = user; this.user = user;
this.loggedIn = user.loggedIn; this.loggedIn = user.loggedIn;
this.feedService.getAllPostsRaw().subscribe(response => { });
this.loading = false; this.feedService.getAllPostsRaw().subscribe(response => {
this.feedNew = this.feedService.renderAllPosts(response.json()); this.loading = false;
this.parentSelectedPostList = this.feedNew; this.feedNew = this.feedService.renderAllPosts(response.json());
this.feedMostLiked = this.feedNew; this.parentSelectedPostList = this.feedNew;
}); this.feedMostLiked = this.feedNew;
}); });
} }

@ -60,50 +60,7 @@
<feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist> <feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>
</div> </div>
<div id="profile"> <div id="profile">
<br>
<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>
<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 -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> action </th>
<td mat-cell *matCellDef="let action"> {{action.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!--<table style="width:100%"> <!--<table style="width:100%">
<tr> <tr>
<th>points </th> <th>points </th>

@ -39,14 +39,6 @@
#handle #handle
font-size: 14px font-size: 14px
.mat-table
width: 100%
max-width: 690px
margin: 0 auto
.mat-header-cell
padding-right: 0.5em
$mat-card-header-size: 100px !default $mat-card-header-size: 100px !default
.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)

@ -1,10 +1,7 @@
import { Component, OnInit, ViewChild} from '@angular/core'; import { Component, OnInit} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router'; import {Router, NavigationEnd} from '@angular/router';
import { User } from 'src/app/models/user'; import { User } from 'src/app/models/user';
import { Actionlist } from 'src/app/models/actionlist';
import { Levellist } from 'src/app/models/levellist'; import { Levellist } from 'src/app/models/levellist';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
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';
@ -16,18 +13,12 @@ import { ProfileService } from 'src/app/services/profile/profile.service';
}) })
export class ProfileComponent implements OnInit { export class ProfileComponent implements OnInit {
actionlist: Actionlist = new Actionlist();
levellist: Levellist = new Levellist(); levellist: Levellist = new Levellist();
userProfile: User = new User(); userProfile: User = new User();
self: User; self: User;
id: string; id: string;
rankname: string; rankname: string;
profileNotFound = false; profileNotFound = false;
displayedColumns = ['points', 'name'];
dataSource = new MatTableDataSource(this.actionlist.Actions);
displayedLevelColumns = ['level', 'name'];
levelSource = this.levellist.levels;
loading = false; loading = false;
@ -48,10 +39,8 @@ export class ProfileComponent implements OnInit {
}); });
} }
@ViewChild(MatSort, {static: true}) sort: MatSort;
ngOnInit() { ngOnInit() {
this.loading = true; this.loading = true;
this.dataSource.sort = this.sort;
this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1); this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
this.data.currentUserInfo.subscribe(user => { this.data.currentUserInfo.subscribe(user => {
this.self = user; this.self = user;

Loading…
Cancel
Save