Demo data service + observable for demo type and data init for class list of both teacher and student + data integration for welcome & home page

src/app/app.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 
+
 @Component({
 	selector: 'app-root',
 	templateUrl: './app.component.html',
 	styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-	title = 'lms-app-new';
+	
 }

src/app/app.module.ts

@@ -34,6 +34,9 @@ import { ChatWindowComponent } from './chat-page/chat-window/chat-window.compone
 import { SettingsComponent } from './settings/settings.component';
 import { ClassCardListComponent } from './reusable-components/class-card-list/class-card-list.component';
 
+// Import services
+import { DemoService } from './services/demo.service';
+
 @NgModule({
 	declarations: [
 		AppComponent,
@@ -69,7 +72,9 @@ import { ClassCardListComponent } from './reusable-components/class-card-list/cl
 		AngularSvgIconModule.forRoot(),
 		ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
 	],
-	providers: [],
+	providers: [
+        DemoService
+    ],
 	bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -8,10 +8,13 @@
         </div>
         <div class="subject">
             <label> {{ class.subject }} </label>
-            <p>
+            <p *ngIf="class.teacher.name !== 'You'">
                 <img [src]="class.teacher.profile_image">
                 <span> {{ class.teacher.name }} </span>
             </p>
+            <p *ngIf="class.classLevel">
+                {{ class.classLevel }}
+            </p>
         </div>
         <span *ngIf="class.classUrl">
             <button class="view-button"

src/app/services/demo.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DemoService } from './demo.service';
+
+describe('DemoService', () => {
+  let service: DemoService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DemoService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/demo.service.ts

@@ -0,0 +1,177 @@
+import { Injectable } from '@angular/core';
+import { Observable, Observer } from 'rxjs';
+import * as moment from 'moment';
+
+@Injectable({
+	providedIn: 'root'
+})
+export class DemoService {
+    demoType: Observable<string>;
+    demoTypeObserver: Observer<string>;
+
+    studentClassList = [{
+        date: moment(new Date()).format('MMM, DD 2020'),
+        classes: [{
+            time: '10:00 AM',
+            duration: '45 Mins',
+            subject: 'Mathematics',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            },
+            classUrl: '/video-chapter',
+            classId: 'topic1',
+            attendanceStatus: 'LATE'
+        }, {
+            time: '11:00 AM',
+            duration: '45 Mins',
+            subject: 'Physics',
+            teacher: {
+                name: 'Dr Meghana',
+                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
+            },
+            classUrl: '/chapter-notes',
+            classId: 'topic1',
+            attendanceStatus: 'ABSENT'
+        }, {
+            time: '12:00 PM',
+            duration: '45 Mins',
+            subject: 'Chemistry',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            },
+            classUrl: '/chapter-notes',
+            classId: 'topic1',
+            attendanceStatus: 'PRESENT'
+        }, {
+            time: '2:00 PM',
+            duration: '45 Mins',
+            subject: 'EVS',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '3:00 PM',
+            duration: '45 Mins',
+            subject: 'Biology',
+            teacher: {
+                name: 'Dr Meghana',
+                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
+            }
+        }]
+    }, {
+        date: moment(new Date()).subtract(1, 'day').format('MMM, DD 2020'),
+        classes: [{
+            time: '10:00 AM',
+            duration: '45 Mins',
+            subject: 'Mathematics',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '11:00 AM',
+            duration: '45 Mins',
+            subject: 'Physics',
+            teacher: {
+                name: 'Dr Meghana',
+                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
+            }
+        }, {
+            time: '12:00 PM',
+            duration: '45 Mins',
+            subject: 'Chemistry',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '2:00 PM',
+            duration: '45 Mins',
+            subject: 'EVS',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '3:00 PM',
+            duration: '45 Mins',
+            subject: 'Biology',
+            teacher: {
+                name: 'Dr Meghana',
+                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
+            }
+        }]
+    }];
+
+    teacherClassList = [{
+        date: moment(new Date()).format('MMM, DD 2020'),
+        classes: [{
+            time: '10:00 AM',
+            duration: '45 Mins',
+            subject: 'Mathematics',
+            classLevel: 'Class 10',
+            teacher: {
+                name: 'You',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '11:00 AM',
+            duration: '45 Mins',
+            subject: 'EVS',
+            classLevel: 'Class 3',
+            teacher: {
+                name: 'You',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '2:00 PM',
+            duration: '45 Mins',
+            subject: 'Mathematics',
+            classLevel: 'Class 7',
+            teacher: {
+                name: 'You',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }]
+    }, {
+        date: moment(new Date()).subtract(1, 'day').format('MMM, DD 2020'),
+        classes: [{
+            time: '10:00 AM',
+            duration: '45 Mins',
+            subject: 'EVS',
+            classLevel: 'Class 4',
+            teacher: {
+                name: 'You',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '11:00 AM',
+            duration: '45 Mins',
+            subject: 'Mathematics',
+            classLevel: 'Class 10',
+            teacher: {
+                name: 'You',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '12:00 PM',
+            duration: '45 Mins',
+            subject: 'Mathematics',
+            classLevel: 'Class 6',
+            teacher: {
+                name: 'You',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }]
+    }];
+
+    constructor() {
+        this.demoType = Observable.create((observer: Observer<string>) => {
+            this.demoTypeObserver = observer;
+            this.demoTypeObserver.next('Teacher');
+        });
+    }
+}

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

@@ -5,12 +5,12 @@
     </header>
 
     <section class="video-section" [ngClass]="{'expand' : expandVideo }">
-        <!-- <iframe src="https://player.vimeo.com/video/393975453?title=0&portrait=0&byline=0&autoplay=1" frameborder="0"></iframe> -->
+        <iframe *ngIf="showVideo" src="https://player.vimeo.com/video/393975453?title=0&portrait=0&byline=0&autoplay=1" frameborder="0"></iframe>
 
-        <div class="topic-name">
-            <h2> English Class </h2>
-            <p> Starts in </p>
-            <div class="counter"> 00:00:59 </div>
+        <div class="topic-name" *ngIf="classList.length > 0">
+            <h2> {{ classList[0].classes[0].subject }} </h2>
+            <p> Starts at </p>
+            <div class="counter"> {{ classList[0].classes[0].time }} </div>
         </div>
 
         <span class="tutor">
@@ -20,8 +20,9 @@
             </p>
             <div class="profile-holder">
                 <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                <span> Dwayne the Rock </span>
+                <span> {{ classList[0].classes[0].teacher.name }} </span>
             </div>
+            <button (click)="showVideo = true" *ngIf="demoType === 'Teacher'" class="go-live-button"> Go Live </button>
         </span>
     </section>
 
@@ -100,7 +101,7 @@
     </section>
 
     <div class="card-list-holder">
-        <div class="card-list" *ngFor="let class of studentClassList">
+        <div class="card-list" *ngFor="let class of classList">
             <header>
                 <h5> {{ class.date }} </h5>
             </header>

src/app/tabs/home/home.component.scss

@@ -102,6 +102,19 @@
 
     .tutor {
         color: white;
+        width: 100%;
+
+        .go-live-button {
+            width: 100px;
+            display: block;
+            margin: 15px auto 0px;
+            background-color: var(--teal-green);
+            border-radius: 5px;
+            border: 0px;
+            color: white;
+            font-size: 14px;
+            height: 35px;
+        }
 
         @media screen and (min-width: 1023px) {
             position: relative;

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ScrollEvent } from 'ngx-scroll-event';
-import * as moment from 'moment';
+import { DemoService } from '../../services/demo.service';
+import { Subscription } from 'rxjs';
 
 @Component({
 	selector: 'app-home',
@@ -11,105 +12,15 @@ export class HomeComponent implements OnInit {
     expandVideo: boolean = false;
     showClassDetails: boolean;
     selectedSegment: string = 'transcript';
+    showVideo: boolean = false;
+    demoTypeSubscriber: Subscription;
+    demoType: string;
 
-    studentClassList = [{
-        date: moment(new Date()).format('MMM, DD 2020'),
-        classes: [{
-            time: '10:00 AM',
-            duration: '45 Mins',
-            subject: 'Mathematics',
-            teacher: {
-                name: 'Mr Kashinath Kashyap',
-                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            },
-            classUrl: '/video-chapter',
-            classId: 'topic1',
-            attendanceStatus: 'LATE'
-        }, {
-            time: '11:00 AM',
-            duration: '45 Mins',
-            subject: 'Physics',
-            teacher: {
-                name: 'Dr Meghana',
-                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
-            },
-            classUrl: '/chapter-notes',
-            classId: 'topic1',
-            attendanceStatus: 'ABSENT'
-        }, {
-            time: '12:00 PM',
-            duration: '45 Mins',
-            subject: 'Chemistry',
-            teacher: {
-                name: 'Mr Kashinath Kashyap',
-                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            },
-            classUrl: '/chapter-notes',
-            classId: 'topic1',
-            attendanceStatus: 'PRESENT'
-        }, {
-            time: '2:00 PM',
-            duration: '45 Mins',
-            subject: 'EVS',
-            teacher: {
-                name: 'Mr Kashinath Kashyap',
-                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            }
-        }, {
-            time: '3:00 PM',
-            duration: '45 Mins',
-            subject: 'Biology',
-            teacher: {
-                name: 'Dr Meghana',
-                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
-            }
-        }]
-    }, {
-        date: moment(new Date()).subtract(1, 'day').format('MMM, DD 2020'),
-        classes: [{
-            time: '10:00 AM',
-            duration: '45 Mins',
-            subject: 'Mathematics',
-            teacher: {
-                name: 'Mr Kashinath Kashyap',
-                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            }
-        }, {
-            time: '11:00 AM',
-            duration: '45 Mins',
-            subject: 'Physics',
-            teacher: {
-                name: 'Dr Meghana',
-                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
-            }
-        }, {
-            time: '12:00 PM',
-            duration: '45 Mins',
-            subject: 'Chemistry',
-            teacher: {
-                name: 'Mr Kashinath Kashyap',
-                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            }
-        }, {
-            time: '2:00 PM',
-            duration: '45 Mins',
-            subject: 'EVS',
-            teacher: {
-                name: 'Mr Kashinath Kashyap',
-                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            }
-        }, {
-            time: '3:00 PM',
-            duration: '45 Mins',
-            subject: 'Biology',
-            teacher: {
-                name: 'Dr Meghana',
-                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
-            }
-        }]
-    }];
+    classList = [];
 
-	constructor() { }
+	constructor(
+        private demoService: DemoService
+    ) { }
 
 	ngOnInit(): void {
         if (window.innerWidth > 1023) {
@@ -117,6 +28,18 @@ export class HomeComponent implements OnInit {
         } else {
             this.showClassDetails = false;
         }
+
+        this.demoTypeSubscriber = this.demoService.demoType.subscribe((type) => {
+            this.demoType = type;
+            if (type === 'Student') {
+                this.classList = this.demoService.studentClassList;
+                this.showVideo = true;
+            }
+
+            if (type === 'Teacher') {
+                this.classList = this.demoService.teacherClassList;                
+            }
+        });
 	}
 
 	public handleScroll(event: ScrollEvent) {

src/app/welcome/welcome.component.html

@@ -2,7 +2,7 @@
     <section class="upfold">
         <h1>
             Good Morning, <br>
-            Shashank
+            {{ demoType }}
         </h1>
         <p>
             Your schedule for the day!
@@ -10,7 +10,7 @@
     </section>
 
     <div class="card-list-holder">
-        <div class="card-list" *ngFor="let class of studentClassList">
+        <div class="card-list" *ngFor="let class of classList">
             <header>
                 <h5> {{ class.date }} </h5>
             </header>

src/app/welcome/welcome.component.scss

@@ -1,3 +1,7 @@
+.page-container {
+    padding-bottom: 100px;
+}
+
 .upfold {
     width: 100%;
     color: white;

src/app/welcome/welcome.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import * as moment from 'moment';
+import { DemoService } from '../services/demo.service';
+import { Subscription } from 'rxjs';
 
 @Component({
 	selector: 'app-welcome',
@@ -7,97 +8,30 @@ import * as moment from 'moment';
 	styleUrls: ['./welcome.component.scss']
 })
 export class WelcomeComponent implements OnInit {
-    studentClassList = [{
-        date: moment(new Date()).format('MMM, DD 2020'),
-        classes: [{
-            time: '10:00 AM',
-            duration: '45 Mins',
-            subject: 'Mathematics',
-            teacher: {
-                name: 'Mr Kashinath Kashyap',
-                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            }
-        }, {
-            time: '11:00 AM',
-            duration: '45 Mins',
-            subject: 'Physics',
-            teacher: {
-                name: 'Dr Meghana',
-                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
-            }
-        }, {
-            time: '12:00 PM',
-            duration: '45 Mins',
-            subject: 'Chemistry',
-            teacher: {
-                name: 'Mr Kashinath Kashyap',
-                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            }
-        }, {
-            time: '2:00 PM',
-            duration: '45 Mins',
-            subject: 'EVS',
-            teacher: {
-                name: 'Mr Kashinath Kashyap',
-                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            }
-        }, {
-            time: '3:00 PM',
-            duration: '45 Mins',
-            subject: 'Biology',
-            teacher: {
-                name: 'Dr Meghana',
-                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
-            }
-        }]
-    }, {
-        date: moment(new Date()).subtract(1, 'day').format('MMM, DD 2020'),
-        classes: [{
-            time: '10:00 AM',
-            duration: '45 Mins',
-            subject: 'Mathematics',
-            teacher: {
-                name: 'Mr Kashinath Kashyap',
-                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            }
-        }, {
-            time: '11:00 AM',
-            duration: '45 Mins',
-            subject: 'Physics',
-            teacher: {
-                name: 'Dr Meghana',
-                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
-            }
-        }, {
-            time: '12:00 PM',
-            duration: '45 Mins',
-            subject: 'Chemistry',
-            teacher: {
-                name: 'Mr Kashinath Kashyap',
-                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            }
-        }, {
-            time: '2:00 PM',
-            duration: '45 Mins',
-            subject: 'EVS',
-            teacher: {
-                name: 'Mr Kashinath Kashyap',
-                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            }
-        }, {
-            time: '3:00 PM',
-            duration: '45 Mins',
-            subject: 'Biology',
-            teacher: {
-                name: 'Dr Meghana',
-                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
-            }
-        }]
-    }];
+    demoTypeSubscriber: Subscription;
+    demoType: string;
 
-	constructor() { }
+    classList = [];
+
+	constructor(
+        private demoService: DemoService
+    ) { }
 
 	ngOnInit(): void {
+        this.demoTypeSubscriber = this.demoService.demoType.subscribe((type) => {
+            this.demoType = type;
+            if (type === 'Student') {
+                this.classList = this.demoService.studentClassList;
+            }
+
+            if (type === 'Teacher') {
+                this.classList = this.demoService.teacherClassList;
+            }
+        });
 	}
 
+    ngOnDestroy() {
+        this.demoTypeSubscriber.unsubscribe();
+    }
+
 }