User dashboard

src/app/app.component.html

@@ -3,4 +3,5 @@
 <router-outlet></router-outlet>
 
 <app-contact-icon></app-contact-icon>
+
 <footer></footer>

src/app/app.module.ts

@@ -16,6 +16,10 @@ import { CoursesDescriptionComponent } from './courses-description/courses-descr
 import { ForumComponent } from './forum/forum.component';
 import { CoursePreviewComponent } from './course-preview/course-preview.component';
 import { AboutComponent } from './about/about.component';
+import { UdCompletedCoursesComponent } from './user-dashboard/ud-completed-courses/ud-completed-courses.component';
+import { UdOverdueCoursesComponent } from './user-dashboard/ud-overdue-courses/ud-overdue-courses.component';
+import { UdCardsComponent } from './user-dashboard/ud-cards/ud-cards.component';
+import { UdQuizesComponent } from './user-dashboard/ud-quizes/ud-quizes.component';
 import { CategoriesComponent } from './categories/categories.component';
 import { CourseCategoryComponent } from './courses/course-category/course-category.component';
 import { AllCoursesComponent } from './courses/all-courses/all-courses.component';
@@ -35,6 +39,10 @@ import { AllCoursesComponent } from './courses/all-courses/all-courses.component
     CoursePreviewComponent,
     ContactComponent,
     AboutComponent,
+    UdCompletedCoursesComponent,
+    UdOverdueCoursesComponent,
+    UdCardsComponent,
+    UdQuizesComponent,
     CategoriesComponent,
     CourseCategoryComponent,
     AllCoursesComponent,

src/app/user-dashboard/ud-cards/ud-cards.component.html

@@ -0,0 +1,58 @@
+<div class="row">
+  <div class="col-md-12">
+    <div class="card-deck">
+        <div class="card shadow-lg rounded col-md-3 border-white">
+          <img class="card-img-top" src="./assets/images/clock.png">
+              <div class="card-body">
+                  <h5 class="card-title">5(to be updated)</h5>
+                  <h3>
+                      <p class="card-text"><b>Courses Enrolled</b></p>
+
+                  </h3>
+
+
+             </div>
+          <p>
+            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample mb-2 ml-4">
+               View Courses
+            </button>
+          </p> 
+        </div>
+        <div class="card border-white shadow-lg rounded ml-5  col-md-3">
+            <img class="card-img-top" src="./assets/images/graduate.png">
+                <div class="card-body">
+                    <h5 class="card-title">5(to be updated)</h5>
+                    <h3>
+                        <p class="card-text"><b>Completed courses</b></p>
+                    </h3>
+
+               </div>
+            <p>
+              <button class="btn btn-primary mb-2 ml-4" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+                 View Courses
+              </button>
+            </p>
+          </div>
+    <div class="card border-white shadow-lg rounded col-md-3 ml-5">
+      <img class="card-img-top" src="./assets/images/medal.png">
+      <div class="card-body">
+        <h5 class="card-title">5(to be updated)</h5>
+        <h3>
+         <p class="card-text"><b>Overdue Courses</b></p>
+        </h3>
+
+
+      </div>
+      <p>
+          <button class="btn btn-primary mb-2 ml-4" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+             View Courses
+          </button>
+        </p>
+    </div>
+  </div>
+
+
+</div>
+
+</div>
+

src/app/user-dashboard/ud-cards/ud-cards.component.scss

@@ -0,0 +1,17 @@
+.card
+{
+    min-height: 100px;
+    min-width: 2rem;
+    text-align: center;
+    margin-left: 130px;
+    margin-right: 100px;
+}
+img
+{
+   height: 153px; 
+   min-width: 50px;   
+   padding-left: 65px;
+   padding-right: 65px;
+   padding-top: 10px;
+
+}

src/app/user-dashboard/ud-cards/ud-cards.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UdCardsComponent } from './ud-cards.component';
+
+describe('UdCardsComponent', () => {
+  let component: UdCardsComponent;
+  let fixture: ComponentFixture<UdCardsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UdCardsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UdCardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/user-dashboard/ud-cards/ud-cards.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ud-cards',
+  templateUrl: './ud-cards.component.html',
+  styleUrls: ['./ud-cards.component.scss']
+})
+export class UdCardsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/user-dashboard/ud-completed-courses/ud-completed-courses.component.html

@@ -0,0 +1,22 @@
+<div class="head">
+    <h1>
+        Completed Courses
+      </h1>
+</div>
+<br>
+<div class="card rounded pt-4 pb-4 pl-4 pr-4 ml-4 mr-4">
+    <div class="card-body col-md-12 c-courses row">
+      <div class="col-md-8">
+          Name of course
+      </div>
+      <div class="col-md-2">
+            <button type="button" class="btn btn-light shadow-sm rounded">View Certificate</button>
+      </div>
+      <div class="col-md-2">
+          <button type="button" class="btn btn-light shadow-sm rounded">Download Certificate</button>
+    </div>
+    </div>
+</div>  
+<br><br>
+
+

src/app/user-dashboard/ud-completed-courses/ud-completed-courses.component.scss

@@ -0,0 +1,11 @@
+.head
+{
+    padding-left: 35px;
+    color: #44579a;
+}
+.c-courses
+{
+    background: #106aa0;
+    color: white;
+    border-radius: 5px;
+}

src/app/user-dashboard/ud-completed-courses/ud-completed-courses.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UdCompletedCoursesComponent } from './ud-completed-courses.component';
+
+describe('UdCompletedCoursesComponent', () => {
+  let component: UdCompletedCoursesComponent;
+  let fixture: ComponentFixture<UdCompletedCoursesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UdCompletedCoursesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UdCompletedCoursesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/user-dashboard/ud-completed-courses/ud-completed-courses.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ud-completed-courses',
+  templateUrl: './ud-completed-courses.component.html',
+  styleUrls: ['./ud-completed-courses.component.scss']
+})
+export class UdCompletedCoursesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/user-dashboard/ud-overdue-courses/ud-overdue-courses.component.html

@@ -0,0 +1,66 @@
+<div>
+    <div class="head">
+        <h1>
+            Overdue Courses
+          </h1>
+    </div>
+    <br>
+   <div class="o-course-one col-md-12">
+      <div class="card rounded pt-4 pb-4 pl-4 " style="width: 50rem;">
+          <div class="card-title col-md-6 o-course-two">
+            Name of course
+          </div>
+      </div>    
+
+            <div class="card col-md-6">
+              <div class="card-body">
+
+                <h6 class="card-subtitle">
+                  This is Progress bars with current value labels
+                </h6>
+                <p>
+                  <ngb-progressbar showValue="true" type="success" value="25">
+                  </ngb-progressbar>
+                </p>
+                <p>
+                  <ngb-progressbar
+                    showValue="true"
+                    type="info"
+                    [value]="50"
+                  ></ngb-progressbar>
+                </p>
+                <p>
+                  <ngb-progressbar
+                    showValue="true"
+                    type="primary"
+                    [value]="150"
+                    max="200"
+                  >
+                  </ngb-progressbar>
+                </p>
+                <p>
+                  <ngb-progressbar
+                    showValue="true"
+                    type="inverse"
+                    [value]="150"
+                    max="150"
+                  >
+                  </ngb-progressbar>
+                </p>
+                <p>
+                  <ngb-progressbar
+                    showValue="true"
+                    type="warning"
+                    [value]="150"
+                    max="200"
+                  >
+                  </ngb-progressbar>
+                </p>
+                <p>
+                  <ngb-progressbar showValue="true" type="danger" [value]="150" max="150">
+                  </ngb-progressbar>
+                </p>
+              </div>
+            </div>
+          </div> 
+          <br><br>

src/app/user-dashboard/ud-overdue-courses/ud-overdue-courses.component.scss

@@ -0,0 +1,21 @@
+.head
+{
+    padding-left: 35px;
+    color: #44579a;
+}
+.card
+{
+    margin-left: 60px;
+
+}
+.o-course-two
+{
+    background: #106aa0;
+    color: white;
+    text-align: center;
+    border-radius: 5px;
+}
+.o-course-one
+{
+    display: flex;
+}

src/app/user-dashboard/ud-overdue-courses/ud-overdue-courses.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UdOverdueCoursesComponent } from './ud-overdue-courses.component';
+
+describe('UdOverdueCoursesComponent', () => {
+  let component: UdOverdueCoursesComponent;
+  let fixture: ComponentFixture<UdOverdueCoursesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UdOverdueCoursesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UdOverdueCoursesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/user-dashboard/ud-overdue-courses/ud-overdue-courses.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-ud-overdue-courses',
+  templateUrl: './ud-overdue-courses.component.html',
+  styleUrls: ['./ud-overdue-courses.component.scss']
+})
+export class UdOverdueCoursesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}