From 69da483c75e7bf61e7b40469e4deb3446b5677c0 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 2 Jul 2020 20:33:29 +0530 Subject: [PATCH] Course Data Connected course list and details page --- src/app/app-routing.module.ts | 4 +- src/app/services/demo.service.ts | 159 ++++++++++++++++++ .../course-details.component.html | 12 +- .../course-details.component.scss | 38 +++++ .../course-details.component.ts | 77 +++------ src/app/tabs/courses/courses.component.html | 80 +++------ src/app/tabs/courses/courses.component.ts | 39 ++++- src/app/tabs/home/home.component.ts | 6 +- src/app/tabs/tabs.component.ts | 2 +- 9 files changed, 300 insertions(+), 117 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index ffc8a92..726f4f1 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -19,11 +19,11 @@ const routes: Routes = [ { component: WelcomeComponent, path: 'welcome' }, { component: TabsComponent, path: 'tabs' }, { component: TabsComponent, path: 'tabs/:subpage' }, - { component: CourseDetailsComponent, path: 'course-details/:heading' }, + { component: CourseDetailsComponent, path: 'course-details' }, { component: ChapterNotesComponent, path: 'chapter-notes/:heading' }, { component: VideoChapterComponent, path: 'video-chapter/:heading' }, { component: VideoNotesComponent, path: 'video-notes/:heading' }, - { component: QuizComponent, path: 'quiz/:heading' }, + { component: QuizComponent, path: 'quiz' }, { component: CalendarComponent, path: 'calendar' }, { component: AttendanceComponent, path: 'attendance'}, { component: ForumPageComponent, path: 'forum'}, diff --git a/src/app/services/demo.service.ts b/src/app/services/demo.service.ts index 5177621..2b5f591 100644 --- a/src/app/services/demo.service.ts +++ b/src/app/services/demo.service.ts @@ -9,6 +9,165 @@ export class DemoService { demoType: Observable; demoTypeObserver: Observer; + courseData = [{ + classLevel: '10', + courses: [{ + id: '1', + name: 'Environmental Studies', + code: 'EVS', + teacher: { + name: 'Mr Kashinath Kashyap', + profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg' + }, + chapterList: [{ + heading: 'Chapter 1', + isCompleted: false, + topics: [{ + heading: 'Living Things', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'downloaded', + isCompleted: true, + type: 'video', + url: '/video-chapter', + param: 'Living Things' + }, { + heading: 'Living Things-1', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: true, + type: 'notes', + url: '/chapter-notes', + param: 'Living Things-1' + }, { + heading: 'Living Things-2', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: false, + type: 'quiz', + url: '/quiz', + param: 'Living Things-2' + }] + }, { + heading: 'Chapter 2', + isCompleted: true, + topics: [{ + heading: 'Earth', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: true, + type: 'video', + url: '/video-chapter', + param: 'Earth' + }, { + heading: 'Earth-2', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: true, + type: 'quiz', + url: '/quiz', + param: 'Earth-2' + }] + }] + }, { + id: '2', + name: 'Mathematics', + code: 'MAT', + teacher: { + name: 'Mr Kashinath Kashyap', + profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg' + }, + chapterList: [{ + heading: 'Geometry', + isCompleted: false, + topics: [{ + heading: 'Theorems', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'downloaded', + isCompleted: true, + type: 'video', + url: '/video-chapter', + param: 'Theorems' + }, { + heading: 'Triangle', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: true, + type: 'notes', + url: '/chapter-notes', + param: 'Triangle' + }, { + heading: 'Quiz', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: false, + type: 'quiz', + url: '/quiz', + param: 'Geometry' + }] + }, { + heading: 'Algebra', + isCompleted: true, + topics: [{ + heading: 'Graph', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: true, + type: 'video', + url: '/video-chapter', + param: 'Graph' + }, { + heading: 'Quiz', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: true, + type: 'quiz', + url: '/quiz', + param: 'Graph' + }] + }] + }] + }, { + classLevel: '8', + courses: [{ + id: '1', + name: 'Environmental Studies', + code: 'EVS', + teacher: { + name: 'Mr Kashinath Kashyap', + profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg' + }, + chapterList: [{ + heading: 'History', + isCompleted: false, + topics: [{ + heading: 'World War 1', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'downloaded', + isCompleted: true, + type: 'video', + url: '/video-chapter', + param: 'World War 1' + }, { + heading: 'World War 2', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: true, + type: 'notes', + url: '/chapter-notes', + param: 'World War 3' + }, { + heading: 'Quiz', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + mediaState: 'none', + isCompleted: false, + type: 'quiz', + url: '/quiz', + param: 'History' + }] + }] + }] + }]; + studentClassList = [{ date: moment(new Date()).format('MMM, DD 2020'), classes: [{ diff --git a/src/app/tabs/courses/course-details/course-details.component.html b/src/app/tabs/courses/course-details/course-details.component.html index 63406f9..6693204 100644 --- a/src/app/tabs/courses/course-details/course-details.component.html +++ b/src/app/tabs/courses/course-details/course-details.component.html @@ -1,10 +1,10 @@ -
+
-

{{ heading }}

+

{{ classLevel }} Std, {{ heading }}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum rerum itaque, autem voluptatibus, quia, consectetur quasi blanditiis.

@@ -13,7 +13,7 @@
-
+
+
+ + +
diff --git a/src/app/tabs/courses/course-details/course-details.component.scss b/src/app/tabs/courses/course-details/course-details.component.scss index cc0d8f4..1dcc23e 100644 --- a/src/app/tabs/courses/course-details/course-details.component.scss +++ b/src/app/tabs/courses/course-details/course-details.component.scss @@ -68,6 +68,16 @@ height: 50px; box-shadow: 0px 0px 5px var(--black); + &.hide-grades { + button { + width: calc(100% / 3); + + &:nth-child(3) { + display: none; + } + } + } + button { font-size: 14px; width: calc(100% / 4); @@ -113,6 +123,30 @@ list-style: none; .chapter { + + .chapter-action-buttons { + display: none; + align-items: stretch; + width: 100%; + justify-content: space-around; + padding: 10px 0; + + button { + width: 48%; + border-radius: 5px; + height: 35px; + font-size: 14px; + color: var(--light-grey); + border: 1px solid var(--light-grey); + background-color: transparent; + + &:first-child { + border-color: var(--teal-green); + color: var(--teal-green); + } + } + } + &.completed { .checkmark { fill: var(--green); @@ -120,6 +154,10 @@ } &.active { + .chapter-action-buttons { + display: flex; + } + .container { position: sticky; position: -webkit-sticky; diff --git a/src/app/tabs/courses/course-details/course-details.component.ts b/src/app/tabs/courses/course-details/course-details.component.ts index d00944b..3e5da68 100644 --- a/src/app/tabs/courses/course-details/course-details.component.ts +++ b/src/app/tabs/courses/course-details/course-details.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Subscription } from 'rxjs'; import { Location } from '@angular/common'; +import { DemoService } from '../../../services/demo.service'; @Component({ selector: 'app-course-details', @@ -16,65 +17,39 @@ export class CourseDetailsComponent implements OnInit { showDeletePopup: boolean = false; isSubSegment: boolean = true; selectedTopic: number; + classLevel: string; - chapterList = [{ - heading: 'Chapter 1', - isCompleted: false, - topics: [{ - heading: 'Living Things', - description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', - mediaState: 'downloaded', - isCompleted: true, - type: 'video', - url: '/video-chapter', - param: 'Living Things' - }, { - heading: 'Living Things-1', - description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', - mediaState: 'none', - isCompleted: true, - type: 'notes', - url: '/chapter-notes', - param: 'Living Things-1' - }, { - heading: 'Living Things-2', - description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', - mediaState: 'none', - isCompleted: false, - type: 'quiz', - url: '/quiz', - param: 'Living Things-2' - }] - }, { - heading: 'Chapter 2', - isCompleted: true, - topics: [{ - heading: 'Earth', - description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', - mediaState: 'none', - isCompleted: true, - type: 'video', - url: '/video-chapter', - param: 'Earth' - }, { - heading: 'Earth-2', - description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', - mediaState: 'none', - isCompleted: true, - type: 'quiz', - url: '/quiz', - param: 'Earth-2' - }] - }]; + demoTypeSubscriber: Subscription; + demoType: string; + + chapterList = []; constructor( private route: ActivatedRoute, - private location: Location + private location: Location, + private demoService: DemoService ) { } ngOnInit(): void { + let classLevel: string, courseId: string; this.routeSubscription = this.route.params.subscribe((params) => { - this.heading = params['heading']; + classLevel = params['classLevel']; + this.classLevel = classLevel; + courseId = params['courseId']; + }); + + this.demoTypeSubscriber = this.demoService.demoType.subscribe((type) => { + this.demoType = type; + + let courseData = this.demoService.courseData; + + let course = courseData.find((courseClass) => courseClass.classLevel === classLevel).courses.find((course) => course.id === courseId); + + this.heading = course.name; + + this.chapterList = course.chapterList; + + console.log(this.chapterList); }); } diff --git a/src/app/tabs/courses/courses.component.html b/src/app/tabs/courses/courses.component.html index 9ded3fc..2e93f3a 100644 --- a/src/app/tabs/courses/courses.component.html +++ b/src/app/tabs/courses/courses.component.html @@ -1,52 +1,28 @@ -
Main Courses:
-
    -
  • -

    ENG

    - -
    -
    Chapter: 21
    -

    50% complete

    -
    -
    -
    • - -
  • -

    KAN

    - -
    -
    Chapter: 21
    -

    50% complete

    -
    -
    -
    • - -
  • -

    BIO

    - -
    -
    Chapter: 21
    -

    50% complete

    -
    -
    -
    • - -
  • -

    PHY

    - -
    -
    Chapter: 21
    -

    50% complete

    -
    -
    -
    • - -
  • -

    CHEM

    - -
    -
    Chapter: 21
    -

    50% complete

    -
    -
    -
    • -
+
{{ demoType }} Courses:
+
+
    +
  • +

    {{ course.code }}

    + +
    +
    Class: {{ class.classLevel }}
    {{ course.chapterList.length }} chapters
    +

    50% complete

    +
    +
    +
    • +
+
+ +
+
    +
  • +

    {{ course.code }}

    + +
    +
    {{ course.chapterList.length }} chapters
    +

    50% complete

    +
    +
    +
    • +
+
diff --git a/src/app/tabs/courses/courses.component.ts b/src/app/tabs/courses/courses.component.ts index 9ccb1a0..b268ac3 100644 --- a/src/app/tabs/courses/courses.component.ts +++ b/src/app/tabs/courses/courses.component.ts @@ -1,15 +1,42 @@ import { Component, OnInit } from '@angular/core'; +import { DemoService } from '../../services/demo.service'; +import { Subscription } from 'rxjs'; +import { Router } from '@angular/router'; @Component({ - selector: 'app-courses', - templateUrl: './courses.component.html', - styleUrls: ['./courses.component.scss'] + selector: 'app-courses', + templateUrl: './courses.component.html', + styleUrls: ['./courses.component.scss'] }) export class CoursesComponent implements OnInit { + demoTypeSubscriber: Subscription; + demoType: string; + classCourseList = []; - constructor() { } + constructor( + private demoService: DemoService, + private router: Router + ) { } - ngOnInit(): void { - } + ngOnInit(): void { + this.demoTypeSubscriber = this.demoService.demoType.subscribe((type) => { + this.demoType = type; + if (type === 'Student') { + this.classCourseList = this.demoService.courseData; + this.classCourseList = this.classCourseList.filter((courseClass) => { + return courseClass.level === '10'; + }) + } else { + this.classCourseList = this.demoService.courseData; + } + }); + } + + goToCourse(classLevel: string, courseId: string) { + this.router.navigate(['/course-details', { + classLevel: classLevel, + courseId: courseId + }]) + } } diff --git a/src/app/tabs/home/home.component.ts b/src/app/tabs/home/home.component.ts index 86e1c3b..5d6344d 100644 --- a/src/app/tabs/home/home.component.ts +++ b/src/app/tabs/home/home.component.ts @@ -37,7 +37,7 @@ export class HomeComponent implements OnInit { } if (type === 'Teacher') { - this.classList = this.demoService.teacherClassList; + this.classList = this.demoService.teacherClassList; } }); } @@ -58,4 +58,8 @@ export class HomeComponent implements OnInit { } } + ngOnDestroy() { + this.demoTypeSubscriber.unsubscribe(); + } + } diff --git a/src/app/tabs/tabs.component.ts b/src/app/tabs/tabs.component.ts index 5766813..ad0f49a 100644 --- a/src/app/tabs/tabs.component.ts +++ b/src/app/tabs/tabs.component.ts @@ -12,7 +12,7 @@ export class TabsComponent implements OnInit { routeSubscription: Subscription; constructor( - private route: ActivatedRoute + private route: ActivatedRoute, ) { } ngOnInit(): void {