kj
/
lms-app
1
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Bläddra i källkod

Class list card integration with Home page

master
kj1352 5 år sedan
förälder
84c1970d78
incheckning
b3c1adc077
7 ändrade filer med 140 tillägg och 150 borttagningar
Delad Vy
Diff Options
Show Stats Download Patch File Download Diff File
  1. +9
    -1
      src/app/reusable-components/class-card-list/class-card-list.component.html
  2. +1
    -0
      src/app/reusable-components/class-card-list/class-card-list.component.ts
  3. +9
    -145
      src/app/tabs/home/home.component.html
  4. +20
    -0
      src/app/tabs/home/home.component.scss
  5. +98
    -1
      src/app/tabs/home/home.component.ts
  6. +1
    -1
      src/app/welcome/welcome.component.html
  7. +2
    -2
      src/app/welcome/welcome.component.ts

+ 9
- 1
src/app/reusable-components/class-card-list/class-card-list.component.html Visa fil

@@ -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>

+ 1
- 0
src/app/reusable-components/class-card-list/class-card-list.component.ts Visa fil

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

ngOnInit(): void {
}

}

+ 9
- 145
src/app/tabs/home/home.component.html Visa fil

@@ -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>

+ 20
- 0
src/app/tabs/home/home.component.scss Visa fil

@@ -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;
}
}
}

+ 98
- 1
src/app/tabs/home/home.component.ts Visa fil

@@ -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 {


+ 1
- 1
src/app/welcome/welcome.component.html Visa fil

@@ -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>


+ 2
- 2
src/app/welcome/welcome.component.ts Visa fil

@@ -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() { }