From 0d96caa5b08ee575e5488980690d8ad630f3ee40 Mon Sep 17 00:00:00 2001 From: Max Date: Sat, 26 Oct 2019 18:45:27 +0200 Subject: [PATCH] added profile page, action and level list --- src/app/components/login/login.component.sass | 1 + .../components/profile/profile.component.html | 61 ++++++++++++++++-- .../components/profile/profile.component.sass | 31 ++++----- .../components/profile/profile.component.ts | 63 ++++++++++++++++++- src/app/models/actionlist.ts | 15 +++++ src/app/models/levellist.ts | 11 ++++ 6 files changed, 157 insertions(+), 25 deletions(-) create mode 100644 src/app/models/actionlist.ts create mode 100644 src/app/models/levellist.ts diff --git a/src/app/components/login/login.component.sass b/src/app/components/login/login.component.sass index 8e687e2..067cd7b 100644 --- a/src/app/components/login/login.component.sass +++ b/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 \ No newline at end of file diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index a633ef0..2c55d7c 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -1,4 +1,57 @@ - - - - + +
+
+

Profile

+ + + + + + + + + + + + + + + + + + + + +
name: {{user.username}}
handle: {{user.handle}}
profile ID: {{user.userID}}
points: {{user.points}}
level: {{user.level}}
+

What´s the level?

+

There are different levels you can reach through green behaviour. + Collect 100 points to level up! The levels are called: +

+
    +
  1. + {{level.name}} +
    2. +
+

How to level up?

+

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: +

+ + + + + + + + + +
points action
{{action.points}}{{action.name}}
+
+
+

Profile not found :(

+
+
+ \ No newline at end of file diff --git a/src/app/components/profile/profile.component.sass b/src/app/components/profile/profile.component.sass index 402b19e..f3c16e2 100644 --- a/src/app/components/profile/profile.component.sass +++ b/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 \ No newline at end of file +th + text-align: left \ No newline at end of file diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts index 80073a2..593a073 100644 --- a/src/app/components/profile/profile.component.ts +++ b/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; + } } diff --git a/src/app/models/actionlist.ts b/src/app/models/actionlist.ts new file mode 100644 index 0000000..cab24f6 --- /dev/null +++ b/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 }, + ]; +} \ No newline at end of file diff --git a/src/app/models/levellist.ts b/src/app/models/levellist.ts new file mode 100644 index 0000000..999f59e --- /dev/null +++ b/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 }, + ]; +} \ No newline at end of file