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

master
Niklas_L 5 years ago committed by Gitea
commit cda08c111f

5
package-lock.json generated

@ -9443,6 +9443,11 @@
"tslib": "^1.9.3"
}
},
"ts-md5": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/ts-md5/-/ts-md5-1.2.6.tgz",
"integrity": "sha512-VFW6O4CTZsgTPDBhF31i83hPhfwd9Dcp5RnbfGOIJPDRro9IhvXMYd8xBycD0yXqHZiAvv+iDG8F+UFrPEyQ5w=="
},
"ts-node": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-7.0.1.tgz",

@ -23,16 +23,17 @@
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"apollo-angular": "^1.7.0",
"core-js": "^2.5.4",
"ngx-socket-io": "^2.0.0",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26",
"apollo-angular-link-http": "^1.6.0",
"apollo-link": "^1.2.11",
"apollo-client": "^2.6.0",
"apollo-cache-inmemory": "^1.3.2",
"apollo-client": "^2.6.0",
"apollo-link": "^1.2.11",
"core-js": "^2.5.4",
"graphql": "^14.3.1",
"graphql-tag": "^2.10.0",
"graphql": "^14.3.1"
"ngx-socket-io": "^2.0.0",
"rxjs": "~6.3.3",
"ts-md5": "^1.2.6",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular/cli": "~7.0.4",

@ -1,6 +1,6 @@
<h1>Greenvironment</h1>
<button id="tab-home" routerLink="">Home</button>
<button id="tab-profile" routerLink="/profile" *ngIf="loggedIn">Profile</button>
<button id="tab-profile" routerLink={{profileUrl}} *ngIf="loggedIn">Profile</button>
<button id="tab-rank" *ngIf="loggedIn">Rank</button>
<button id="tab-about" routerLink="/about">About</button>
<button id="tab-imprint" routerLink="/imprint">Imprint</button>

@ -1,5 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { LoginComponent } from '../login/login.component';
import { DatasharingService } from '../../services/datasharing.service';
import { SelfService } from '../../services/selfservice/self.service';
@Component({
selector: 'app-scaffold',
@ -8,10 +10,24 @@ import { LoginComponent } from '../login/login.component';
})
export class AppScaffoldComponent implements OnInit {
constructor() { }
loggedIn: boolean = false;
userId: number;
profileUrl: string;
constructor(private data: DatasharingService,private selfservice: SelfService) { }
ngOnInit() {
this.data.currentUserInfo.subscribe(user => {
this.loggedIn = user.loggedIn;
this.userId = user.userID;
this.profileUrl = '/profile/' + this.userId;
console.log(user.loggedIn);
})
if(this.loggedIn != true){
console.log('user is not logged in');
this.selfservice.checkIfLoggedIn;
};
console.log('loggedIn is ' + this.loggedIn)
}
}

@ -1,5 +1,4 @@
<div id="content">
<app-scaffold id="headerbar"></app-scaffold>
<home-chatmanager id="chatcontainer"></home-chatmanager>
<home-feed id="feedcontainer"></home-feed>
<home-social id="socialcontainer"></home-social>

@ -2,30 +2,23 @@
@import '../../../styles/vars.sass'
#content
grid-template: 7.5% 92.5% / 25% 50% 25%
grid-template: 100%/ 25% 50% 25%
display: grid
min-height: 100vh
max-height: 100vh
#headerbar
@include gridPosition(1, 2, 1, 4)
display: grid
grid-template: 100% /30% 10% 10% 10% 10% 10% 15% 5%
background-color: $cHeadPrimaryBackground
color: $cHeadFontColor
#chatcontainer
@include gridPosition(2, 3, 1, 2)
@include gridPosition(1, 3, 1, 2)
background-color: $cBoxBodyBackground
#feedcontainer
@include gridPosition(2, 3, 2, 3)
@include gridPosition(1, 3, 2, 3)
display: grid
grid-template: 10% 90% /100%
background-color: $cSecondaryBackground
#socialcontainer
@include gridPosition(2, 3, 3, 4)
@include gridPosition(1, 3, 3, 4)
display: grid
grid-template: 50% 50% /100%
background-color: $cBoxBodyBackground

@ -12,6 +12,7 @@
</tr>
</table>
<button type="loginbutton" (click)="onClickSubmit(email.value,password.value)">Login</button>
<p *ngIf="errorOccurred">{{errorMessage}}</p>
<br>
<a href="/register">You aren´t part of greenvironment yet? - join us here</a>
</div>

@ -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

@ -1,6 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { Login } from 'src/app/models/login';
import { LoginService } from 'src/app/services/login/login.service';
import { RouterLink } from '@angular/router';
import {Router} from '@angular/router';
import {Md5} from 'ts-md5/dist/md5';
@Component({
selector: 'app-login',
@ -9,17 +12,28 @@ import { LoginService } from 'src/app/services/login/login.service';
})
export class LoginComponent implements OnInit {
login: Login
errorOccurred: boolean = false;
errorMessage: string;
constructor(private loginService: LoginService) {
constructor(private loginService: LoginService,private router: Router) {
this.login = {passwordHash: null, email: null};
}
public loginError(error : any){
console.log(error.errors[0].message);
this.errorOccurred = true;
this.errorMessage = error.errors[0].message;
}
onClickSubmit(pEmail: string, pPasswordHash: string) {
console.log('email: ' + pEmail);
console.log('try to login with mail adress:' + pEmail);
this.errorOccurred = false;
this.errorMessage = " ";
this.login.email = pEmail
this.login.passwordHash = pPasswordHash
const md5 = new Md5();
this.login.passwordHash = md5.appendStr(pPasswordHash).end() as string
this.loginService.login(this.login)
this.loginService.login(this.login, error => this.loginError(error.json()));
}
ngOnInit() {}

@ -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}} ({{rankname}})</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>

@ -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

@ -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,66 @@ 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
rankname: 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.rankname = this.levellist.getLevelName(this.user.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;
}
}

@ -15,10 +15,11 @@
</tr>
<tr>
<td>repeat password:</td>
<td> <input #repeatpassword type="text" name="repeatpassword"><br></td>
<td> <input #repeatpassword type="password" name="repeatpassword"><br></td>
</tr>
</table>
<button type="registerbutton" (click)="onClickSubmit(username.value,email.value,password.value, repeatpassword.value)">Register</button>
<p *ngIf="errorOccurred">{{errorMessage}}</p>
<br>
<a href="/login">You are already part of greenvironment? - login</a>
</div>

@ -1,6 +1,9 @@
import { Component, OnInit } from '@angular/core';
import {RegisterService} from '../../services/register/register.service';
import {Registration} from '../../models/registration';
import {Router} from '@angular/router';
import {Md5} from 'ts-md5/dist/md5';
import { parseWebDriverCommand } from 'blocking-proxy/built/lib/webdriver_commands';
@Component({
selector: 'registration',
@ -9,23 +12,40 @@ import {Registration} from '../../models/registration';
})
export class RegisterComponent implements OnInit {
registration: Registration
errorOccurred: boolean = false;
errorMessage: string;
constructor(private registerService: RegisterService) {
this.registration = {username: null, passwordHash: null, email: null};
}
onClickSubmit(pUsername: string, pEmail: string, pPasswordHash: string,pPasswordHashRepeat: string ) {
console.log('username: ' + pUsername);
console.log('email: ' + pEmail);
public registerError(error : any){
console.log(error.errors[0].message);
this.errorOccurred = true;
this.errorMessage = error.errors[0].message;
}
if(pPasswordHash == pPasswordHashRepeat){
console.log('password same');
this.registration.username = pUsername
this.registration.email = pEmail
this.registration.passwordHash = pPasswordHash
onClickSubmit(pUsername: string, pEmail: string, pPasswordHash: string,pPasswordHashRepeat: string ) {
this.errorOccurred = false;
this.errorMessage = " ";
if(this.passwordSame(pPasswordHash,pPasswordHashRepeat)){
this.registration.username = pUsername
this.registration.email = pEmail
const md5 = new Md5();
this.registration.passwordHash = md5.appendStr(pPasswordHash).end() as string
this.registerService.register(this.registration, error => this.registerError(error.json()));
}
}
this.registerService.register(this.registration)
} else{console.log('password NOT same'); }
passwordSame(pwd: string,pwd2: string){
if(pwd == pwd2){
console.log('password same');
return true;
} else{
this.errorOccurred = true;
this.errorMessage = "not the same password";
return false;
}
}
ngOnInit() {}

@ -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 },
];
}

@ -0,0 +1,25 @@
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 },
];
getLevelName(lev:number): any{
var name: string = 'not defined';
console.log(lev);
this.levels.forEach(rank => {
console.log(rank.level);
if(lev == rank.level){
console.log('found matching level');
name = rank.name;
}
});
return name
}
}

@ -1,3 +1,5 @@
import { Hash } from "crypto";
export interface Login {
email: string;
passwordHash: string

@ -4,15 +4,16 @@ import { Login } from '../../models/login';
import { User } from 'src/app/models/user';
import { DatasharingService } from '../datasharing.service';
import { userInfo } from 'os';
import {Router} from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class LoginService {
constructor(private http: Http, private data: DatasharingService) { }
constructor(private http: Http, private data: DatasharingService,private router: Router) { }
public login(login : Login) {
public login(login : Login, errorCb: any) {
//let url = './graphql'
let url = 'https://greenvironment.net/graphql'
@ -23,8 +24,15 @@ export class LoginService {
return this.http.post(url, this.buildJson(login))
.subscribe(response => {
console.log(response.text());
this.loginSuccess();
this.updateUserInfo(response.json())
});
}, errorCb
);
}
public loginSuccess(){
console.log('alles supi dupi');
//do routing
this.router.navigateByUrl('');
}
public updateUserInfo(response : any){

@ -1,15 +1,18 @@
import { Injectable } from '@angular/core';
import {Http, URLSearchParams, Headers} from '@angular/http';
import { Registration } from '../../models/registration';
import {Router} from '@angular/router';
import { DatasharingService } from '../datasharing.service';
import { User } from 'src/app/models/user';
@Injectable({
providedIn: 'root'
})
export class RegisterService {
constructor(private http: Http) { }
constructor(private http: Http, private data: DatasharingService,private router: Router) { }
public register(registration: Registration) {
public register(registration: Registration, errorCb: any) {
//let url = './graphql'
let url = 'https://greenvironment.net/graphql'
@ -17,12 +20,42 @@ export class RegisterService {
let headers = new Headers();
headers.set('Content-Type', 'application/json');
return this.http.post(url, this.buildJson(registration)).subscribe(response => console.log(response.text()));
return this.http.post(url, this.buildJson(registration))
.subscribe(response => {
console.log(response.text());
this.registerSuccess();
this.updateUserInfo(response.json())
}, errorCb
);
}
public registerSuccess(){
console.log('alles supi dupi');
//do routing
this.router.navigateByUrl('');
}
public updateUserInfo(response : any){
const user: User = new User();
user.loggedIn = true;
user.userID = response.data.register.id;
user.username = response.data.register.name;
user.handle = response.data.register.handle;
user.email = response.data.register.email;
user.points = response.data.register.points;
user.level = response.data.register.level;
user.friendIDs = response.data.register.friends;
user.groupIDs = response.data.register.groups;
user.chatIDs = response.data.register.chats;
user.requestIDs = response.data.register.requests;
this.data.changeUserInfo(user)
}
public buildJson(registration: Registration): any {
const body = {query: `mutation($username: String, $email: String, $pwHash: String) {
register(username: $username, email: $email, passwordHash: $pwHash) {id}
register(username: $username, email: $email, passwordHash: $pwHash) {id, name, handle, points, level, friends{id}, groups{id},chats{id}}
}`, variables: {
email: registration.email,
pwHash: registration.passwordHash,

@ -0,0 +1,12 @@
import { TestBed } from '@angular/core/testing';
import { SelfService } from './self.service';
describe('Selfservice', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: SelfService = TestBed.get(SelfService);
expect(service).toBeTruthy();
});
});

@ -0,0 +1,69 @@
import { Injectable, EventEmitter, Output } from '@angular/core';
import {Http, URLSearchParams, Headers} from '@angular/http';
import { Login } from '../../models/login';
import { User } from 'src/app/models/user';
import { DatasharingService } from '../datasharing.service';
import { userInfo } from 'os';
import {Router} from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class SelfService {
constructor(private http: Http, private data: DatasharingService,private router: Router) { }
public checkIfLoggedIn() {
console.log('check if logged in...');
//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())
.subscribe(response => {
console.log(response.text());
this.stillLoggedIn();
this.updateUserInfo(response.json())
}, error => {
this.notLoggedIn()
console.log(error.text())
}
);
}
public stillLoggedIn(){
console.log('user was logged in');
}
public notLoggedIn(){
console.log('user was not logged in');
//do routing
this.router.navigateByUrl('/login');
}
public updateUserInfo(response : any){
const user: User = new User();
user.loggedIn = true;
user.userID = response.data.login.id;
user.username = response.data.login.name;
user.handle = response.data.login.handle;
user.email = response.data.login.email;
user.points = response.data.login.points;
user.level = response.data.login.level;
user.friendIDs = response.data.login.friends;
user.groupIDs = response.data.login.groups;
user.chatIDs = response.data.login.chats;
user.requestIDs = response.data.login.requests;
this.data.changeUserInfo(user)
}
public buildJson(): any {
const body = {query: `query() {
getSelf(){id, name, handle, points, level, friends{id}, groups{id},chats{id}}
}`, variables: {
}};
return body;
}
}//add ,receivedRequests{id} later
Loading…
Cancel
Save