Class list card integration with Home page

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

@@ -1,5 +1,7 @@
 <ul class="subject-list">
-    <li *ngFor="let class of classes">
+    <li *ngFor="let class of classes" [ngClass]="{'late' : class.attendanceStatus && class.attendanceStatus === 'LATE',
+    'attended' : class.attendanceStatus && class.attendanceStatus === 'PRESENT',
+    'absent' : class.attendanceStatus && class.attendanceStatus === 'ABSENT'}">
         <div class="schedule">
             <label> {{ class.time }} </label>
             <p> {{ class.duration }} </p>
@@ -11,5 +13,11 @@
                 <span> {{ class.teacher.name }} </span>
             </p>
         </div>
+        <span *ngIf="class.classUrl">
+            <button class="view-button"
+            [routerLink]="[class.classUrl, class.classId]">
+                Watch
+            </button>
+        </span>
     </li>
 </ul>

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

@@ -11,6 +11,7 @@ export class ClassCardListComponent implements OnInit {
 	constructor() { }
 
 	ngOnInit(): void {
+        
 	}
 
 }

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

@@ -5,7 +5,7 @@
     </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 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>
@@ -99,149 +99,13 @@
         </div>
     </section>
 
-    <ul class="subject-list">
-        <header> <h5> Today's Classes: </h5> </header>
-
-        <li class="absent">
-            <div class="schedule">
-                <label> 9:30 PM </label>
-                <p> 1hr 40 Minutes </p>
-            </div>
-            <div class="subject">
-                <label> Science </label>
-                <p>
-                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                    <span> Dwayne the Rock </span>
-                </p>
-            </div>
-            <button class="view-button"> Watch </button>
-        </li>
-
-        <li class="late">
-            <div class="schedule">
-                <label> 3:30 PM </label>
-                <p> 40 Minutes </p>
-            </div>
-            <div class="subject">
-                <label> Mathematics </label>
-                <p>
-                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                    <span> Dwayne the Rock </span>
-                </p>
-            </div>
-
-        </li>
-
-        <li class="attended">
-            <div class="schedule">
-                <label> 4:20 PM </label>
-                <p> 40 Minutes </p>
-            </div>
-            <div class="subject">
-                <label> English </label>
-                <p>
-                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                    <span> Dwayne the Rock </span>
-                </p>
-            </div>
-
-        </li>
-
-        <header> <h5> Tomorrow: </h5> </header>
-
-        <li>
-            <div class="schedule">
-                <label> 5:30 PM </label>
-                <p> 40 Minutes </p>
-            </div>
-            <div class="subject">
-                <label> Mathematics </label>
-                <p>
-                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                    <span> Dwayne the Rock </span>
-                </p>
-            </div>
-
-        </li>
-
-        <li>
-            <div class="schedule">
-                <label> 6:20 PM </label>
-                <p> 40 Minutes </p>
-            </div>
-            <div class="subject">
-                <label> English </label>
-                <p>
-                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                    <span> Dwayne the Rock </span>
-                </p>
-            </div>
-
-        </li>
-
-        <header> <h5> Mon, June 29: </h5> </header>
-
-        <li>
-            <div class="schedule">
-                <label> 5:30 PM </label>
-                <p> 40 Minutes </p>
-            </div>
-            <div class="subject">
-                <label> Mathematics </label>
-                <p>
-                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                    <span> Dwayne the Rock </span>
-                </p>
-            </div>
-
-        </li>
-
-        <li>
-            <div class="schedule">
-                <label> 6:20 PM </label>
-                <p> 40 Minutes </p>
-            </div>
-            <div class="subject">
-                <label> English </label>
-                <p>
-                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                    <span> Dwayne the Rock </span>
-                </p>
-            </div>
-
-        </li>
-
-        <header> <h5> Sat, June 30: </h5> </header>
-
-        <li>
-            <div class="schedule">
-                <label> 5:30 PM </label>
-                <p> 40 Minutes </p>
-            </div>
-            <div class="subject">
-                <label> Mathematics </label>
-                <p>
-                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                    <span> Dwayne the Rock </span>
-                </p>
-            </div>
-
-        </li>
-
-        <li>
-            <div class="schedule">
-                <label> 6:20 PM </label>
-                <p> 40 Minutes </p>
-            </div>
-            <div class="subject">
-                <label> English </label>
-                <p>
-                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                    <span> Dwayne the Rock </span>
-                </p>
-            </div>
-
-        </li>
-    </ul>
+    <div class="card-list-holder">
+        <div class="card-list" *ngFor="let class of studentClassList">
+            <header>
+                <h5> {{ class.date }} </h5>
+            </header>
+            <app-class-card-list [classes]="class.classes"></app-class-card-list>
+        </div>
+    </div>
 
 </div>

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

@@ -63,6 +63,8 @@
     transition: width 0.5s, border-radius 0.5s;
     overflow: hidden;
     height: 30vh;
+    background-color: var(--dark-grey);
+    flex-direction: column;
 
     @media screen and (min-width: 1023px) {
         justify-content: space-between;
@@ -73,6 +75,7 @@
         width: 100%;
         padding: 0px 5%;
         z-index: 1;
+        flex-direction: row;
     }
 
     iframe {
@@ -371,3 +374,20 @@
         }
     }
 }
+
+
+.card-list-holder {
+    width: 90%;
+    margin: 0 auto;
+
+    header {
+        color: var(--dark-grey);
+        position: relative;
+
+        h5 {
+            font-size: 14px;
+            margin-top: 30px;
+            font-weight: 500;
+        }
+    }
+}

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ScrollEvent } from 'ngx-scroll-event';
-
+import * as moment from 'moment';
 
 @Component({
 	selector: 'app-home',
@@ -12,6 +12,103 @@ export class HomeComponent implements OnInit {
     showClassDetails: boolean;
     selectedSegment: string = 'transcript';
 
+    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'
+            }
+        }]
+    }];
+
 	constructor() { }
 
 	ngOnInit(): void {

src/app/welcome/welcome.component.html

@@ -10,7 +10,7 @@
     </section>
 
     <div class="card-list-holder">
-        <div class="card-list" *ngFor="let class of classList">
+        <div class="card-list" *ngFor="let class of studentClassList">
             <header>
                 <h5> {{ class.date }} </h5>
             </header>

src/app/welcome/welcome.component.ts

@@ -7,7 +7,7 @@ import * as moment from 'moment';
 	styleUrls: ['./welcome.component.scss']
 })
 export class WelcomeComponent implements OnInit {
-    classList = [{
+    studentClassList = [{
         date: moment(new Date()).format('MMM, DD 2020'),
         classes: [{
             time: '10:00 AM',
@@ -93,7 +93,7 @@ export class WelcomeComponent implements OnInit {
                 profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
             }
         }]
-    }]
+    }];
 
 	constructor() { }