Modified dashboard page

angular.json

@@ -29,6 +29,7 @@
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "node_modules/normalize.css/normalize.css",
+              "node_modules/materialize-css/dist/css/materialize.css",
               "src/styles/base.scss",
               "./node_modules/froala-editor/css/froala_editor.pkgd.min.css",
               "./node_modules/froala-editor/css/froala_style.min.css",

package.json

@@ -32,6 +32,7 @@
     "@types/moment-timezone": "^0.5.12",
     "angular-froala-wysiwyg": "^3.0.0-rc.2-1",
     "core-js": "^2.4.1",
+    "materialize-css": "^0.97.8",
     "hammerjs": "^2.0.8",
     "moment": "^2.24.0",
     "ng-pick-datetime": "^7.0.0",

src/app/app.module.ts

@@ -74,10 +74,10 @@ import {
   ChallengeviewallsubmissionsComponent
 } from './components/challenge/challengeviewallsubmissions/challengeviewallsubmissions.component';
 import { SideBarComponent } from './components/utility/side-bar/side-bar.component';
-import { DashFooterComponent } from './components/nav/dash-footer/dash-footer.component';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
 
+import { DashboardContentComponent } from './components/dashboard/dashboard-content/dashboard-content.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -126,7 +126,7 @@ import { MatIconModule } from '@angular/material/icon';
     TestimonialsComponent,
     SideBarComponent,
     FeaturedChallengesComponent,
-    DashFooterComponent,
+    DashboardContentComponent,
     EditphasemodalComponent,
     ChallengeviewallsubmissionsComponent,
     TermsAndConditionsModalComponent

src/app/components/about/about.component.spec.ts

@@ -21,8 +21,6 @@ describe('AboutComponent', () => {
       declarations: [ AboutComponent, HeaderStaticComponent, FooterComponent ],
       providers: [
       GlobalService,
-      {provide: ActivatedRoute, useValue: fakeActivatedRoute},
-      {provide: Router, useClass: class { navigate = jasmine.createSpy('navigate'); }},
       AuthService,
       ApiService,
       EndpointsService

src/app/components/challenge/challengesubmit/challengesubmit.component.scss

@@ -52,6 +52,9 @@ td, th {
     padding-left: 16px;
     padding-right: 36px;
   }
+  ul {
+    padding-left: 40px;
+  }
 }
 
 .remaining-submission-clock {

src/app/components/dashboard/dashboard-content/dashboard-content.component.html

@@ -0,0 +1,26 @@
+<section class="ev-md-container center">
+  <div class="row">
+    <div class="col s12">
+      <a class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" routerLink="/analytics">Go to Analytics Dashboard</a>
+    </div>
+  </div>
+</section>
+<section class="ev-md-container center">
+  <div class="row">
+    <div class="col s12 m4">
+      <h3 class="fs-20 main-title">Ongoing Challenges</h3>
+      <h4 class="text-dark-black">{{challenges.length || 0}}</h4>
+      <a class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-transparent fs-14" routerLink="/challenges/all">View All</a>
+    </div>
+    <div class="col s12 m4">
+      <h3 class="fs-20 main-title">My Host Teams</h3>
+      <h4 class="text-dark-black">{{hostTeams.length || 0}}</h4>
+      <a class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-transparent fs-14" routerLink="/teams/hosts">View or Create</a>
+    </div>
+    <div class="col s12 m4">
+      <h3 class="fs-20 main-title">My Participant Teams</h3>
+      <h4 class="text-dark-black">{{participantTeams.length || 0}}</h4>
+      <a class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-transparent fs-14" routerLink="/teams/participants">View or Create</a>
+    </div>
+  </div>
+</section>

src/app/components/dashboard/dashboard-content/dashboard-content.component.scss

@@ -0,0 +1,8 @@
+.main-title {
+  margin-bottom: 0px;
+  background: -webkit-linear-gradient(#f5ac28, #e07e7e);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+

src/app/components/dashboard/dashboard-content/dashboard-content.component.spec.ts

@@ -0,0 +1,51 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardContentComponent } from './dashboard-content.component';
+import {ApiService} from '../../../services/api.service';
+import {HttpClientModule} from '@angular/common/http';
+import {RouterTestingModule} from '@angular/router/testing';
+import {GlobalService} from '../../../services/global.service';
+import {AuthService} from '../../../services/auth.service';
+import {EndpointsService} from '../../../services/endpoints.service';
+import {Routes} from '@angular/router';
+import {NotFoundComponent} from '../../not-found/not-found.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DashboardContentComponent,
+  },
+  {
+    path: '404',
+    component: NotFoundComponent
+  },
+  {
+    path: '**',
+    redirectTo: '/404',
+    pathMatch: 'full'
+  }
+];
+
+describe('DashboardContentComponent', () => {
+  let component: DashboardContentComponent;
+  let fixture: ComponentFixture<DashboardContentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardContentComponent, NotFoundComponent ],
+      providers: [ApiService, GlobalService, AuthService, EndpointsService],
+      imports: [HttpClientModule, RouterTestingModule.withRoutes(routes)]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/dashboard/dashboard-content/dashboard-content.component.ts

@@ -0,0 +1,109 @@
+import { Component, OnInit } from '@angular/core';
+import {ApiService} from '../../../services/api.service';
+import {AuthService} from '../../../services/auth.service';
+import {GlobalService} from '../../../services/global.service';
+import {ActivatedRoute, Router} from '@angular/router';
+import {EndpointsService} from '../../../services/endpoints.service';
+
+@Component({
+  selector: 'app-dashboard-content',
+  templateUrl: './dashboard-content.component.html',
+  styleUrls: ['./dashboard-content.component.scss']
+})
+export class DashboardContentComponent implements OnInit {
+
+
+  /**
+   * Challenges list
+   */
+  challenges = [];
+
+  /**
+   * Host teams list
+   */
+  hostTeams = [];
+
+  /**
+   * Participant teams list
+   */
+  participantTeams = [];
+
+  /**
+   * Path for routing
+   */
+  routePath = '/auth/login';
+
+  /**
+   * Constructor.
+   * @param endpointsService  EndpointService Injection.
+   * @param route  ActivatedRoute Injection.
+   * @param router  Router Injection.
+   * @param globalService  GlobalService Injection.
+   * @param apiService  ApiService Injection.
+   * @param authService  AuthService Injection.
+   */
+  constructor(private apiService: ApiService,
+              private authService: AuthService,
+              private globalService: GlobalService,
+              private router: Router,
+              private route: ActivatedRoute,
+              private endpointsService: EndpointsService) { }
+
+  /**
+   * Component on initialized.
+   */
+  ngOnInit() {
+    if (!this.authService.isLoggedIn()) {
+      this.router.navigate([this.routePath]);
+    } else {
+      this.fetchChallengesFromApi(this.endpointsService.allChallengesURL('present'));
+      this.fetchTeams(this.endpointsService.allParticipantTeamsURL());
+      this.fetchTeams(this.endpointsService.allHostTeamsURL());
+    }
+  }
+
+  /**
+   * Fetch challenges from backend.
+   * @param path  Challenges fetch URL.
+   */
+  fetchChallengesFromApi(path) {
+    const SELF = this;
+    SELF.apiService.getUrl(path).subscribe(
+      data => {
+        SELF.challenges = data['results'];
+      },
+      err => {
+        SELF.globalService.handleApiError(err);
+      },
+      () => {}
+    );
+  }
+
+  /**
+   * Fetch teams from backend.
+   * @param path  Teams fetch URL.
+   */
+  fetchTeams(path) {
+    const SELF = this;
+    let isHost = false;
+    if (path.includes('hosts')) {
+      isHost = true;
+    }
+    this.apiService.getUrl(path).subscribe(
+      data => {
+        if (data['results']) {
+          if (isHost) {
+            SELF.hostTeams = data['results'];
+          } else {
+            SELF.participantTeams = data['results'];
+          }
+        }
+      },
+      err => {
+        SELF.globalService.handleApiError(err, false);
+      },
+      () => {}
+    );
+  }
+
+}

src/app/components/dashboard/dashboard.component.html

@@ -1,45 +1,14 @@
+<app-side-bar *ngIf="authService.isAuth"></app-side-bar>
 <app-header-static></app-header-static>
+<div class="web-container" [style.center]="!authService.isAuth">
+  <div class="dashboard-flex">
+    <div class="dashboard-content">
+      <app-dashboard-content></app-dashboard-content>
+    </div>
+    <!--Dashboard-Footer-->
+    <app-footer [isDash]="true" *ngIf="authService.isAuth"></app-footer>
+  </div>
+</div>
+<div class="clearfix"></div>
 
-<div class="container-top dashboard-container">
-
-<div class="row card">
-<div class="section col-lg-4 col-md-4 com-sm-12 col-xs-12">
-	<div class="section-title">
-		Ongoing Challenges
-	</div>
-	<div class="section-number">
-		{{challenges.length}}
-	</div>
-	<div class="section-link">
-	    <span [routerLink]="['/challenges/all']" class="btn btn-filter">View All</span>
-	</div>
-</div>
-<div class="section col-lg-4 col-md-4 com-sm-12 col-xs-12">
-	<div class="section-title">
-		My Host Teams
-	</div>
-	<div class="section-number">
-		{{hostteams.length}}
-	</div>
-	<div class="section-link">
-	    <span [routerLink]="['/teams/hosts']" class="btn btn-filter">View or Create</span>
-	</div>
-</div>
-<div class="section col-lg-4 col-md-4 com-sm-12 col-xs-12">
-	<div class="section-title">
-		My Participant Teams
-	</div>
-	<div class="section-number">
-		{{participantteams.length}}
-	</div>
-	<div class="section-link">
-	    <span [routerLink]="['/teams/participants']" class="btn btn-filter">View or Create</span>
-	</div>
-</div>
-<div class="analytics">
-	<span class="btn btn-filter selected">Go to Analytics Dashboard</span>
-</div>
-</div>
-</div>
-
-<app-footer></app-footer>
+<app-footer *ngIf="!authService.isAuth"></app-footer>

src/app/components/dashboard/dashboard.component.scss

@@ -1,41 +1,37 @@
-@import './variables.scss';
-@import './mixins.scss';
+@import "styles/variables";
+
+.dashboard-flex {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.dashboard-content {
+  flex: 1;
+  min-height: 100vh;
+}
+
+.web-container {
+  width: calc(100vw - 223px);
+  float: right;
+  padding-top: 70px;
+  overflow-x: hidden;
+  &.center {
+    float: none;
+    margin: 0 auto;
+    text-align: left;
+    overflow: hidden;
+  }
+}
+
+/*media queries*/
+
+@media only screen and (max-width: $med-screen) {
+  .web-container {
+    width: 100%;
+  }
+}
+
+.light-dark-container {
+}
 
-.dashboard-container {
-	font-size:$fs-16;
-	font-weight: $fw-light;
-	.card {
-		background: $gray-lighter;
-		padding:30px;
-	.analytics {
-		text-align: center;
-		padding:20px;
-		.btn {
-			margin-left:0;
-			margin-top:30px;
-		}
-	}
-	.section {
-		padding:10px;
-		text-align:center;
-		border-bottom:1px solid rgba(0,0,0,0.05);
-		.section-title {
-          text-align:center;
-          font-size:$fs-18;
-          font-weight:$fw-regular;
-          color: $red-light;
-          padding:20px;
-		}
-		.section-number {
-		  text-align:center;
-		  font-size:$fs-24;
-		  font-weight:$fw-regular;
-		  padding:20px;
-		}
-		.section-link {
-		  text-align:center;
-		  padding:20px;
-		}
-	}
-	}
-}