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

Rearrange leaderboards, dashboard, etc files

Browse source
This commit is contained in:
Tom Bloor 2017-08-15 17:41:27 +01:00
parent 8939c18335
commit 48b0e0c81f
17 changed files with 65 additions and 552 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app/_guards/index.ts
View file

@ -1 +0,0 @@
export * from './auth.guard';

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

@ -16,6 +16,7 @@ import { BreadcrumbsComponent } from './shared/breadcrumb.component';
// Routing & Guard Module
import { AppRoutingModule } from './app.routing';
import { AuthGuard } from './_guards/auth.guard';
import { ApiService } from './providers/api-service';
// Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
@ -27,16 +28,19 @@ import { P500Component } from './pages/500.component';
// Submodules
import { AuthModule } from './auth/auth.module';
import { DashboardModule } from './dashboard/dashboard.module';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
HttpModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
ChartsModule,
AuthModule,
DashboardModule,
// Loaded last to allow for 404 catchall
AppRoutingModule,
],
declarations: [
AppComponent,
@ -51,6 +55,7 @@ import { AuthModule } from './auth/auth.module';
],
providers: [
AuthGuard,
ApiService,
{
provide: LocationStrategy,
useClass: HashLocationStrategy

38
src/app/app.routing.ts
View file

@ -1,48 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './_guards/auth.guard';
// Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
import { SimpleLayoutComponent } from './layouts/simple-layout.component';
import { P404Component } from './pages/404.component';
import { P500Component } from './pages/500.component';
export const routes: Routes = [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full',
},
{
path: '',
component: FullLayoutComponent,
canActivate: [AuthGuard],
data: {
title: 'Home'
},
children: [
{
path: 'dashboard',
loadChildren: './dashboard/dashboard.module#DashboardModule'
},
{
path: 'components',
loadChildren: './components/components.module#ComponentsModule'
},
{
path: 'widgets',
loadChildren: './widgets/widgets.module#WidgetsModule'
},
{
path: 'charts',
loadChildren: './chartjs/chartjs.module#ChartJSModule'
}
]
},
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: '404', component: P404Component },
{ path: '500', component: P500Component },
{ path: '**', redirectTo: '/404' },
];
@NgModule({

21
src/app/dashboard/dashboard-routing.module.ts
View file

@ -1,21 +0,0 @@
import { NgModule } from '@angular/core';
import { Routes,
RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
const routes: Routes = [
{
path: '',
component: DashboardComponent,
data: {
title: 'Dashboard'
}
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DashboardRoutingModule {}

11
src/app/dashboard/dashboard.module.ts
View file

@ -1,10 +1,12 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { DashboardComponent } from './dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { CommonModule } from '@angular/common';
import { LeaderboardsComponent } from './leaderboards.component';
import { DashboardRoutingModule } from './dashboard.routing';
@NgModule({
imports: [
@ -13,6 +15,9 @@ import { CommonModule } from '@angular/common';
BsDropdownModule,
CommonModule
],
declarations: [ DashboardComponent ]
declarations: [
DashboardComponent,
LeaderboardsComponent,
]
})
export class DashboardModule { }

34
src/app/dashboard/dashboard.routing.ts Normal file
View file

@ -0,0 +1,34 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from '../_guards/auth.guard';
import { DashboardComponent } from './dashboard.component';
import { LeaderboardsComponent } from './leaderboards.component';
import { FullLayoutComponent } from '../layouts/full-layout.component';
// Using child path to allow for FullLayout theming
const routes: Routes = [
{
path: '',
component: FullLayoutComponent,
canActivate: [AuthGuard],
children: [
{
path: 'dashboard',
component: DashboardComponent,
data: { title: 'Dashboard' },
},
{
path: 'leaderboards',
component: LeaderboardsComponent,
data: { title: 'Leaderboards' },
}
],
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DashboardRoutingModule {}

0
src/app/components/leaderboards.component.html → src/app/dashboard/leaderboards.component.html
View file

0
src/app/components/leaderboards.component.ts → src/app/dashboard/leaderboards.component.ts
View file

2
src/app/layouts/full-layout.component.html
View file

@ -31,7 +31,7 @@
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/components/leaderboards']">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/leaderboards']">
<i class="icon-trophy"></i> Leaderboards
</a>
</li>

43
src/app/pages/login.component.html
View file

@ -1,43 +0,0 @@
<div class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card-group mb-0">
<div class="card p-4">
<div class="card-block">
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<form [formGroup]="signin" (ngSubmit)="onSubmit()">
<div class="input-group mb-3">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" formControlName="email" placeholder="Email">
</div>
<div class="input-group mb-4">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" formControlName="password" placeholder="Password">
</div>
<div class="row">
<div class="col-6">
<button type="submit" class="btn btn-primary px-4">Login</button>
</div>
<div class="col-6 text-right">
<button type="button" class="btn btn-link px-0">Forgot password?</button>
</div>
</div>
</form>
</div>
</div>
<div class="card card-inverse card-primary py-5 d-md-down-none" style="width:44%">
<div class="card-block text-center">
<div>
<h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button type="button" class="btn btn-primary active mt-3" routerLinkActive="active" [routerLink]="['/pages/register']">Register Now!</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

64
src/app/pages/login.component.ts
View file

@ -1,64 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { Http, Response } from '@angular/http';
import { ApiService } from '../providers/api-service';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'login.component.html',
providers: [ApiService]
})
export class LoginComponent implements OnInit {
signin: FormGroup;
returnUrl: string;
constructor(
private route: ActivatedRoute,
private http: Http,
private formBuilder: FormBuilder,
private router: Router,
private api: ApiService
) {
this.signin = this.formBuilder.group({
email: ['', [Validators.required]],
password: ['', [Validators.required]],
});
}
ngOnInit() {
// reset login status
this.api
.logout()
.subscribe(
result => {
console.log('Logged out!');
}
);
this.api.graph_data(undefined).subscribe(
result => { console.log(result) }
)
// get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}
onSubmit() {
console.log(this.signin.value);
this.api
.login(this.signin.value)
.subscribe(
result => {
console.log('logged in!');
this.router.navigate([this.returnUrl]);
},
error => {
console.log( error._body );
}
);
}
}

52
src/app/pages/pages-routing.module.ts
View file

@ -1,52 +0,0 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { P404Component } from './404.component';
import { P500Component } from './500.component';
import { LoginComponent } from './login.component';
import { RegisterComponent } from './register.component';
const routes: Routes = [
{
path: '',
data: {
title: 'Example Pages'
},
children: [
{
path: '404',
component: P404Component,
data: {
title: 'Page 404'
}
},
{
path: '500',
component: P500Component,
data: {
title: 'Page 500'
}
},
{
path: 'login',
component: LoginComponent,
data: {
title: 'Login Page'
}
},
{
path: 'register',
component: RegisterComponent,
data: {
title: 'Register Page'
}
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PagesRoutingModule {}

28
src/app/pages/pages.module.ts
View file

@ -1,28 +0,0 @@
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { P404Component } from './404.component';
import { P500Component } from './500.component';
import { LoginComponent } from './login.component';
import { RegisterComponent } from './register.component';
import { PagesRoutingModule } from './pages-routing.module';
import { TabsModule } from 'ngx-bootstrap/tabs';
@NgModule({
imports: [
CommonModule,
PagesRoutingModule,
FormsModule,
ReactiveFormsModule,
TabsModule
],
declarations: [
P404Component,
P500Component,
LoginComponent,
RegisterComponent
]
})
export class PagesModule { }

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

@ -1,142 +0,0 @@
<div class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card mx-4">
<div class="card-block p-4">
<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-people"></i></span>
<select required class="form-control" type="text" formControlName="usertype">
<option value=''>Please select</option>
<option value='organisation'>Organisation</option>
<option value='customer'>Customer</option>
</select>
</div> -->
<form [formGroup]="signupForm.getForm()">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-key"></i></span>
<input type="text" class="form-control" formControlName="token" placeholder="Token">
</div>
<div class="input-group mb-3">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" formControlName="email" placeholder="Email">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" formControlName="password" placeholder="Password">
</div>
<div class="input-group mb-4">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" formControlName="confirmpassword" placeholder="Repeat password">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-people"></i></span>
<select required class="form-control" type="text" formControlName="usertype">
<option value=''>Please select</option>
<option value='organisation'>Organisation</option>
<option value='customer'>Customer</option>
</select>
</div>
</form>
<div [ngSwitch]="signupForm.getForm().value.usertype">
<div *ngSwitchCase="'customer'" >
<form [formGroup]="customerForm.getForm()" (ngSubmit)="onSubmitCustomer()">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" formControlName="display_name" placeholder="Display Name">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" formControlName="full_name" placeholder="Full Name">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" formControlName="postcode" placeholder="Postcode">
</div>
<div class="input-group mb-3">
<span class="input-group-addon">Year of Birth</span>
<select class="form-control" type="text" formControlName="year_of_birth">
<option *ngFor="let range of years" [value]="range">{{ range }}</option>
</select>
</div>
<button type="submit" class="btn btn-block btn-success">Create Account</button>
</form>
</div>
<div *ngSwitchCase="'organisation'">
<form [formGroup]="organisationForm.getForm()" (ngSubmit)="onSubmitOrganisation()">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" formControlName="name" placeholder="Organisation Name">
</div>
<!-- Uses the UK SIC 2007 classifications for sector as used by ONS -->
<div class="input-group mb-3">
<select required class="form-control" type="text" formControlName="sector">
<option value=''>Select Organisation Sector</option>
<option value='A'>Agriculture, Forestry & Fishing</option>
<option value='B'>Mining & Quarrying</option>
<option value='C'>Manufacturing</option>
<option value='D'>Electricity, Gas, Steam & Air Conditiioning</option>
<option value='E'>Water & Waste Management</option>
<option value='F'>Construction</option>
<option value='G'>Wholesale & Retail Trade</option>
<option value='H'>Transportation & Storage</option>
<option value='I'>Accomodation & Food Services</option>
<option value='J'>Information & Communication</option>
<option value='K'>Financial & Insurance Activities</option>
<option value='L'>Real Estate</option>
<option value='M'>Professional, Scientfic & Technical</option>
<option value='N'>Administrative & Support Services</option>
<option value='O'>Public Administration, Defence & Social Security</option>
<option value='P'>Education</option>
<option value='Q'>Human Health & Social Work</option>
<option value='R'>Arts, Entertainment & Recreation</option>
<option value='S'>Other Service Activities</option>
<option value='T'>Household Domestic Business</option>
</select>
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" formControlName="street_name" placeholder="Street Name">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" formControlName="town" placeholder="Town">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" formControlName="town" placeholder="Town">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" formControlName="postcode" placeholder="Postcode">
</div>
<button type="submit" class="btn btn-block btn-success">Create Account</button>
</form>
</div>
<div heading="Pending" *ngSwitchDefault>Please Select a User Type</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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

@ -1,124 +0,0 @@
import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { ValidationManager } from "ng2-validation-manager";
import { Http, Response } from '@angular/http';
import { ApiService } from '../providers/api-service';
import {Router } from '@angular/router';
import 'rxjs/add/operator/map';
@Component({
templateUrl: 'register.component.html',
providers: [ApiService]
})
export class RegisterComponent {
signupForm: ValidationManager;
customerForm: ValidationManager;
organisationForm: ValidationManager;
years: Object[];
constructor(
private http: Http,
private formBuilder: FormBuilder,
private router: Router,
private api: ApiService,
) {
this.years = [];
let max = new Date().getFullYear() - 10,
min = max - 140;
for (let i = max; i>=min; i--){
this.years.push(i);
}
this.signupForm = new ValidationManager({
token: 'required',
usertype: 'required',
email: 'required|email',
password: 'required',
confirmpassword: 'required|equalTo:password'
});
this.customerForm = new ValidationManager({
display_name: 'required',
full_name: 'required',
postcode: 'required',
year_of_birth:'required',
});
this.organisationForm = new ValidationManager({
name: 'required',
sector: 'required',
street_name: 'required',
town: 'required',
postcode: 'required',
});
}
onSubmitCustomer() {
console.log(this.signupForm.isValid());
if (!this.signupForm.isValid() && !this.customerForm.isValid()) {
console.log("Not Valid!");
return;
}
let signupForm = this.signupForm.getForm().value;
let customerForm = this.customerForm.getForm().value;
let data = {
token: signupForm.token,
usertype: signupForm.usertype,
email: signupForm.email,
password: signupForm.password,
display_name: customerForm.display_name,
full_name: customerForm.full_name,
postcode: customerForm.postcode,
year_of_birth:customerForm.year_of_birth,
};
console.log(data);
this.api
.register(data)
.subscribe(
result => {
console.log('registered!');
this.router.navigate(['/dashboard']);
},
error => {
console.log( error._body );
}
);
}
onSubmitOrganisation() {
console.log(this.signupForm.isValid());
if (!this.signupForm.isValid() || !this.organisationForm.isValid()) {
console.log("Not Valid!");
return;
}
let signupForm = this.signupForm.getForm().value;
let organisationForm = this.organisationForm.getForm().value;
let data = {
token: signupForm.token,
usertype: signupForm.usertype,
email: signupForm.email,
password: signupForm.password,
name: organisationForm.name,
sector: organisationForm.sector,
street_name: organisationForm.street_name,
town: organisationForm.town,
postcode: organisationForm.postcode,
};
console.log(data);
this.api
.register(data)
.subscribe(
result => {
console.log('registered!');
this.router.navigate(['/dashboard']);
},
error => {
console.log( error._body );
}
);
}
}

26
src/index.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<base href="./">
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@ -18,29 +18,7 @@
</head>
<!-- BODY options, add following classes to body to change options
// Header options
1. '.header-fixed' - Fixed Header
// Sidebar options
1. '.sidebar-fixed' - Fixed Sidebar
2. '.sidebar-hidden' - Hidden Sidebar
3. '.sidebar-off-canvas' - Off Canvas Sidebar
4. '.sidebar-minimized' - Minimized Sidebar (Only icons)
5. '.sidebar-compact' - Compact Sidebar
// Aside options
1. '.aside-menu-fixed' - Fixed Aside Menu
2. '.aside-menu-hidden' - Hidden Aside Menu
3. '.aside-menu-off-canvas' - Off Canvas Aside Menu
// Footer options
1. 'footer-fixed' - Fixed footer
-->
<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
<body class="app header-fixed sidebar-fixed">
<!-- Enable bootstrap 4 theme -->
<script>window.__theme = 'bs4';</script>