Rearrange leaderboards, dashboard, etc files

src/app/_guards/auth.guard.ts

@@ -4,18 +4,18 @@ import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from
 @Injectable()
 export class AuthGuard implements CanActivate {
 
-    constructor(private router: Router) { }
+  constructor(private router: Router) { }
 
-    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-        if (localStorage.getItem('sessionKey')) {
-            console.log('session key found')
-			// logged in so return true
-            return true;
-        }
-
-        // not logged in so redirect to login page with the return url
-        console.log('no session key found')
-		this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
-        return false;
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    if (localStorage.getItem('sessionKey')) {
+      console.log('session key found')
+      // logged in so return true
+      return true;
     }
+
+    // not logged in so redirect to login page with the return url
+    console.log('no session key found')
+    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
+    return false;
+  }
 }

src/app/_guards/index.ts

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

src/app/app.module.ts

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

src/app/app.routing.ts

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

src/app/dashboard/dashboard-routing.module.ts

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

src/app/dashboard/dashboard.module.ts

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

src/app/dashboard/dashboard.routing.ts

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

src/app/layouts/full-layout.component.html

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

src/app/pages/login.component.html

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

src/app/pages/login.component.ts

@@ -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 );
-        }
-      );
-  }
-
-
-}

src/app/pages/pages-routing.module.ts

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

src/app/pages/pages.module.ts

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

src/app/pages/register.component.html

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

src/app/pages/register.component.ts

@@ -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 );
-        }
-      );
-  }
-
-
-}

src/index.html

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