Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added API and improved form

Browse source
This commit is contained in:
piratefinn 2017-05-09 13:39:48 +01:00
parent 66b3cd6ea4
commit 830ecbffca
5 changed files with 107 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -33,7 +33,7 @@
"ngx-bootstrap": "1.6.6",
"rxjs": "5.3.0",
"ts-helpers": "1.1.2",
"zone.js": "0.8.8"
"zone.js": "0.8.9"
},
"devDependencies": {
"@angular/cli": "1.0.0",

3
src/app/app.module.ts
View file

@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@ -25,6 +26,8 @@ import { SimpleLayoutComponent } from './layouts/simple-layout.component';
BrowserModule,
AppRoutingModule,
HttpModule,
FormsModule,
ReactiveFormsModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
ChartsModule

35
src/app/pages/register.component.html
View file

@ -7,15 +7,40 @@
<h1>Register</h1>
<p class="text-muted">Create your account</p>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-key"></i></span>
<input type="text" class="form-control" placeholder="Token">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" placeholder="Full Name">
</div>
<div class="input-group mb-3">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" placeholder="Postcode">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-calendar"></i></span>
<select required id="agerange" class="form-control">
<option value="">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</select>
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" placeholder="Password">
@ -28,16 +53,6 @@
<button type="button" class="btn btn-block btn-success">Create Account</button>
</div>
<div class="card-footer p-4">
<div class="row">
<div class="col-6">
<button class="btn btn-block btn-facebook" type="button"><span>facebook</span></button>
</div>
<div class="col-6">
<button class="btn btn-block btn-twitter" type="button"><span>twitter</span></button>
</div>
</div>
</div>
</div>
</div>
</div>

38
src/app/pages/register.component.ts
View file

@ -1,19 +1,39 @@
import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map'
import { ApiService } from '../providers/api-service';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'register.component.html'
templateUrl: 'register.component.html',
providers: [ApiService]
})
export class RegisterComponent {
private apiurl="https://dev.app.peartrade.org/api"
constructor(private http: Http) {
signup: FormGroup;
ageRanges: Object[];
this.getAges().subscribe(
result => {console.log(result)}
) }
getAges() {
return this.http.get(this.apiurl +'/info/ages' ).map((response: Response) => response.json());
constructor(private http: Http, private formBuilder: FormBuilder, private api: ApiService) {
this.api.getAgeRanges().subscribe(
result => {
console.log(result);
this.ageRanges = result.ages;
}
)
this.signup = this.formBuilder.group({
token: ['', [Validators.required]],
full_name: ['', [Validators.required]],
display_name: ['', [Validators.required]],
email: ['', [Validators.required]],
postcode: ['', [Validators.required]],
age_range: ['', [Validators.required]],
password: ['', [Validators.required]],
});
}
onSubmit() {
console.log(this.signup.value);
}

48
src/app/providers/api-service.ts Normal file
View file

@ -0,0 +1,48 @@
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
/* this provider handles the interaction between server and client */
@Injectable()
export class ApiService {
private apiUrl = 'https://dev.app.peartrade.org/api';
private sessionKey: string;
constructor(
private http: Http,
) {}
public getAgeRanges() {
return this.http.get(
this.apiUrl + '/info/ages'
).map( res => res.json() );
}
public register(data) {
return this.http.post(
this.apiUrl + '/register',
data
).map( response => response.json() );
}
public login(data) {
let login_event = this.http.post(
this.apiUrl + '/login',
data
).map( response => response.json() );
login_event.subscribe(
result => { this.sessionKey = result.session_key }
);
return login_event;
}
public search(data) {
data.session_key = this.sessionKey;
return this.http.post(
this.apiUrl + '/search',
data
).map( response => response.json() );
}
}