Teacher Course To be categorized by Subject with classes below them

src/app/reusable-components/class-card-list/class-card-list.component.html

@@ -31,7 +31,7 @@
 
         <span *ngIf="class.isLive && demoType === 'Teacher'">
             <button class="view-button"
-            [routerLink]="['/tabs/home']">
+            [routerLink]="['/tabs/home']" (click)="goLive()">
                 Go Live
             </button>
         </span>

src/app/reusable-components/class-card-list/class-card-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
 	selector: 'app-class-card-list',
@@ -8,6 +8,7 @@ import { Component, OnInit, Input } from '@angular/core';
 export class ClassCardListComponent implements OnInit {
     @Input() classes: any;
     @Input() hasLive: boolean;
+    @Output() cardEvents = new EventEmitter();
     demoType: string;
 
 	constructor() {
@@ -17,4 +18,8 @@ export class ClassCardListComponent implements OnInit {
         this.demoType = localStorage.demoType;
 	}
 
+    goLive() {
+        this.cardEvents.emit('go-live');
+    }
+
 }

src/app/tabs/courses/courses.component.html

@@ -1,24 +1,27 @@
 <header> {{ demoType }} Courses: </header>
 <section *ngIf="demoType === 'Teacher'">
-    <ul *ngFor="let class of classCourseList">
-        <li *ngFor="let course of class.courses">
-            <h2> {{ course.code }} </h2>
+    <div *ngFor="let level of classLevelList; let i = index">
+        <header class="level-header" [ngClass]="{'whiten' : i === 0}"> Level {{ level }} </header>
+        <ul *ngFor="let class of classCourseList" [ngClass]="{'hidden' : class.classLevel !== level}">
+            <li *ngFor="let course of class.courses" (click)="goToCourse(class.classLevel, course.id)">
+                <h2> {{ course.code }} </h2>
 
-            <div class="details" (click)="goToCourse(class.classLevel, course.id)">
-                <h5> Class: {{ class.classLevel }} <br> {{ course.chapterList.length }} chapters </h5>
-                <p> 50% complete </p>
-                <div class="progress-holder"> <span class="progress"></span> </div>
-            </div>
-        </li>
-    </ul>
+                <div class="details">
+                    <h5> {{ course.chapterList.length }} chapters </h5>
+                    <p> 50% complete </p>
+                    <div class="progress-holder"> <span class="progress"></span> </div>
+                </div>
+            </li>
+        </ul>
+    </div>
 </section>
 
 <section *ngIf="demoType === 'Student'">
     <ul *ngFor="let class of classCourseList">
-        <li *ngFor="let course of class.courses">
+        <li *ngFor="let course of class.courses" (click)="goToCourse(class.classLevel, course.id)">
             <h2> {{ course.code }} </h2>
 
-            <div class="details" (click)="goToCourse(class.classLevel, course.id)">
+            <div class="details">
                 <h5> {{ course.chapterList.length }} chapters </h5>
                 <p> 50% complete </p>
                 <div class="progress-holder"> <span class="progress"></span> </div>

src/app/tabs/courses/courses.component.scss

@@ -4,6 +4,18 @@ header {
     font-size: 18px;
     position: relative;
     margin-top: 50px;
+
+    &.level-header {
+        font-size: 17px;
+        color: var(--ash-black);
+        font-weight: bold;
+        letter-spacing: 1px;
+        margin: 20px auto 0;
+
+        &.whiten {
+            color: white;
+        }
+    }
 }
 
 ul {
@@ -16,6 +28,10 @@ ul {
     position: relative;
     flex-wrap: wrap;
 
+    &.hidden {
+        display: none;
+    }
+
     li {
         width: 42vw;
         height: 37vw;

src/app/tabs/courses/courses.component.ts

@@ -10,6 +10,7 @@ import { Router } from '@angular/router';
 export class CoursesComponent implements OnInit {
     demoType: string;
     classCourseList = [];
+    classLevelList = [];
 
 	constructor(
         private demoService: DemoService,
@@ -25,6 +26,12 @@ export class CoursesComponent implements OnInit {
             });
         } else {
             this.classCourseList = this.demoService.courseData;
+
+            for (let i = 0; i < this.classCourseList.length; i += 1) {
+                if (!this.classLevelList.includes(this.classCourseList[i].classLevel)) {
+                    this.classLevelList.push(this.classCourseList[i].classLevel);
+                }
+            }
         }
 	}
 

src/app/tabs/home/home.component.html

@@ -113,7 +113,7 @@
             <header>
                 <h5> {{ class.date }} </h5>
             </header>
-            <app-class-card-list [hasLive]="hasLive" [classes]="class.classes"></app-class-card-list>
+            <app-class-card-list (cardEvents)="getCardEvent($event)" [hasLive]="hasLive" [classes]="class.classes"></app-class-card-list>
         </div>
     </div>
 

src/app/tabs/home/home.component.ts

@@ -62,4 +62,13 @@ export class HomeComponent implements OnInit {
         }
 	}
 
+    getCardEvent(e: string) {
+        if (e === 'go-live') {
+            clearInterval(this.timerInterval);
+            this.hasLive = true;
+            this.showClassDetails = true;
+            this.showVideo = true;
+        }
+    }
+
 }