added profile page, action and level list

src/app/components/login/login.component.sass

@@ -12,5 +12,6 @@
     @include gridPosition(2, 2,2,2)
     grid-template: 15% 15% 15% 15% 15% 15% / 100%
     background-color: $cPrimaryBackground
+    padding: 1em
 input
     margin: 0.25em

src/app/components/profile/profile.component.html

@@ -1,4 +1,57 @@
-<app-scaffold id="headerbar"></app-scaffold>
-<home-chatmanager id="chatcontainer"></home-chatmanager>
-<!--<home-feed id="feedcontainer"></home-feed>-->
-<home-social id="socialcontainer"></home-social>
+
+<div id="profile">
+    <div id="profilecontainer" *ngIf="profileNotFound == false">
+        <h1>Profile</h1>
+        <table style="width:100%">
+            <tr>
+                <td>name: </td>
+                <td>{{user.username}}</td>
+            </tr>
+            <tr>
+                <td>handle: </td>
+                <td>{{user.handle}}</td>
+            </tr>
+            <tr>
+                <td>profile ID: </td>
+                <td>{{user.userID}}</td>
+            </tr>
+            <tr>
+                <td>points: </td>
+                <td>{{user.points}}</td>
+            <tr>
+                <td>level: </td>
+                <td>{{user.level}}</td>
+            </tr>
+        </table>
+        <h2>What´s the level?</h2>
+            <p>There are different levels you can reach through green behaviour.
+                Collect 100 points to level up! The levels are called: 
+            </p>
+            <ol>
+                <li *ngFor= "let level of levellist.levels">
+                    {{level.name}}
+                </li>
+            </ol> 
+        <h2>How to level up?</h2>
+            <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 style="width:100%">
+                <tr>
+                    <th>points </th>
+                    <th>action</th>
+                </tr>
+                <tr *ngFor= "let action of actionlist.actions">
+                    <td>{{action.points}}</td>
+                    <td>{{action.name}}</td>
+                </tr>
+            </table>
+        </div>
+    <div id="profilecontainer" *ngIf="profileNotFound">
+            <h1>Profile not found :(</h1>
+    </div>
+  </div>
+  

src/app/components/profile/profile.component.sass

@@ -1,25 +1,18 @@
 @import '../../../styles/mixins.sass'
 @import '../../../styles/vars.sass'
 
-#headerbar
-  @include gridPosition(1, 2, 1, 4)
+#profile
+  background-color:  $cSecondaryBackground
+  grid-template: 3% 94% 3% / 10% 80% 10% 
   display: grid
-  grid-template: 100% /30% 10% 10% 10% 10% 10% 10% 10%
-  background-color: $cHeadPrimaryBackground
-  color: $cHeadFontColor
+  min-height: 100vh
+  max-height: 100vh
 
-#chatcontainer
-  @include gridPosition(2, 3, 1, 2)
-  background-color: $cBoxBodyBackground
+#profilecontainer
+  @include gridPosition(2, 2,2,2)
+  //grid-template: 15% 15% 15% 15% 15% 15% / 100%
+  background-color: $cPrimaryBackground
+  padding: 1em
 
-#feedcontainer
-  @include gridPosition(2, 3, 2, 3)
-  display: grid
-  grid-template: 10% 90% /100%
-  background-color: $cSecondaryBackground
-
-#socialcontainer
-  @include gridPosition(2, 3, 3, 4)
-  display: grid
-  grid-template: 50% 50% /100%
-  background-color: $cBoxBodyBackground
+th
+  text-align: left

src/app/components/profile/profile.component.ts

@@ -1,4 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import {Router} from '@angular/router';
+import {Http, URLSearchParams, Headers} from '@angular/http';
+import { User } from 'src/app/models/user';
+import { Actionlist } from 'src/app/models/actionlist';
+import { Levellist } from 'src/app/models/levellist';
 
 @Component({
   selector: 'app-profile',
@@ -6,10 +11,64 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./profile.component.sass']
 })
 export class ProfileComponent implements OnInit {
-
-  constructor() { }
+  actionlist: Actionlist = new Actionlist();
+  levellist: Levellist = new Levellist();
+  user: User = new User()
+  id : string
+  profileNotFound : boolean = false;
+  constructor(private router: Router,private http: Http) { }
+  
 
   ngOnInit() {
+    this.id = this.router.url.substr(this.router.url.lastIndexOf("/") + 1);
+    //let url = './graphql'
+    let url = 'https://greenvironment.net/graphql'
+    let headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+ 
+    return this.http.post(url, this.buildJson(this.id))
+      .subscribe(response => {
+        console.log(response.text());
+        this.updateUserInfo(response.json());
+      }
+      );
+  }
+
+  public updateUserInfo(response : any){
+    if(response.data.getUser != null){
+      this.profileNotFound = false;
+      this.user.loggedIn = true;
+      this.user.userID = response.data.getUser.id;
+      this.user.username = response.data.getUser.name;
+      this.user.handle = response.data.getUser.handle;
+      this.user.points = response.data.getUser.points;
+      this.user.level = response.data.getUser.level;
+      this.user.friendIDs = response.data.getUser.friends;
+    } else{
+      this.profileNotFound = true;
+    }
   }
 
+  public buildJson(id: string): any {
+    const body =  {query: `query($userId: ID) {
+      getUser(userId:$userId){
+        id
+        handle
+        name
+        profilePicture
+        points
+        level    
+        friendCount
+        friends{
+          id
+        }
+        posts{
+          content
+        }   
+      }
+    }`, variables: {
+        userId: this.id 
+      }};
+    return body;
+  }
 }

src/app/models/actionlist.ts

@@ -0,0 +1,15 @@
+export class Actionlist{
+    actions: { id: number, name: string, points: number}[] = [
+      { id: 0, name: "collect much trash",points: 25},
+      { id: 1, name: "collect a bit trash",points: 5 },
+      { id: 2, name: "trash seperation", points: 5 },
+      { id: 3, name: "plant a tree", points: 2 },
+      { id: 4, name: "beautify yout surroundings", points: 8 },
+      { id: 5, name: "reduce waste", points: 5 },
+      { id: 6, name: "reduce CO2 emission", points: 5 },
+      { id: 7, name: "eat a vegetarian meal", points: 2 },
+      { id: 8, name: "don´t use the car", points: 10 },
+      { id: 9, name: "buy fair trade/ local product", points: 1 },
+      { id: 10, name: "donate money to an environment organisation ", points: 3 },
+    ];
+}

src/app/models/levellist.ts

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