+
-
{{data.course?.description}}
+
{{course?.description}}
-
![]()
+
![]()
-
+
-
+
+ | # |
+ Description |
+ Duration |
+
- # |
- Description |
- Duration |
-
-
-
-
- | {{lesson.seqNo}} |
- {{lesson.description}} |
- {{lesson.duration}} |
-
-
-
-
-
-
-
+
+ | {{lesson.seqNo}} |
+ {{lesson.description}} |
+ {{lesson.duration}} |
+
+
+
diff --git a/src/app/course/course.component.ts b/src/app/course/course.component.ts
index 2169f72..ba3519e 100644
--- a/src/app/course/course.component.ts
+++ b/src/app/course/course.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Course} from '../model/course';
import {
@@ -13,58 +13,28 @@ import {
withLatestFrom,
concatAll, shareReplay, catchError
} from 'rxjs/operators';
-import {merge, fromEvent, Observable, concat, throwError, combineLatest} from 'rxjs';
+import {merge, fromEvent, Observable, concat, throwError} from 'rxjs';
import {Lesson} from '../model/lesson';
-import {CoursesService} from '../services/courses.service';
-
-
-interface CourseData {
- course: Course;
- lessons: Lesson[];
-}
@Component({
selector: 'course',
templateUrl: './course.component.html',
- styleUrls: ['./course.component.css'],
- changeDetection: ChangeDetectionStrategy.OnPush
+ styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {
- data$: Observable
;
+ course: Course;
+ lessons: Lesson[];
- constructor(private route: ActivatedRoute,
- private coursesService: CoursesService) {
+ constructor(private route: ActivatedRoute) {
}
ngOnInit() {
- const courseId = parseInt(this.route.snapshot.paramMap.get("courseId"));
-
- const course$ = this.coursesService.loadCourseById(courseId)
- .pipe(
- startWith(null)
- );
-
- const lessons$ = this.coursesService.loadAllCourseLessons(courseId)
- .pipe(
- startWith([])
- );
-
- this.data$ = combineLatest([course$, lessons$])
- .pipe(
- map(([course, lessons]) => {
- return {
- course,
- lessons
- }
- }),
- tap(console.log)
- );
}
diff --git a/src/app/courses-card-list/courses-card-list.component.html b/src/app/courses-card-list/courses-card-list.component.html
deleted file mode 100644
index d9b9e26..0000000
--- a/src/app/courses-card-list/courses-card-list.component.html
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
-
- {{course.description}}
-
-
-
- ![]()
-
-
- {{course.longDescription}}
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/courses-card-list/courses-card-list.component.ts b/src/app/courses-card-list/courses-card-list.component.ts
deleted file mode 100644
index 6e0f5ea..0000000
--- a/src/app/courses-card-list/courses-card-list.component.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {Course} from '../model/course';
-import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
-import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
-import {filter, tap} from 'rxjs/operators';
-
-@Component({
- selector: 'courses-card-list',
- templateUrl: './courses-card-list.component.html',
- styleUrls: ['./courses-card-list.component.css'],
- changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class CoursesCardListComponent implements OnInit {
-
- @Input()
- courses: Course[] = [];
-
- @Output()
- private coursesChanged = new EventEmitter();
-
- constructor(private dialog: MatDialog) {
-
- }
-
- ngOnInit() {
-
- }
-
- editCourse(course: Course) {
-
- const dialogConfig = new MatDialogConfig();
-
- dialogConfig.disableClose = true;
- dialogConfig.autoFocus = true;
- dialogConfig.width = "400px";
-
- dialogConfig.data = course;
-
- const dialogRef = this.dialog.open(CourseDialogComponent, dialogConfig);
-
- dialogRef.afterClosed()
- .pipe(
- filter(val => !!val),
- tap(() => this.coursesChanged.emit())
-
- )
- .subscribe();
-
-
- }
-
-}
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
index aa8317d..0e5a130 100644
--- a/src/app/home/home.component.css
+++ b/src/app/home/home.component.css
@@ -6,3 +6,13 @@
}
+
+
+.course-card {
+ margin: 20px 10px;
+}
+
+.course-actions {
+ text-align: center;
+}
+
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index e4a1f77..cd2f57d 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,30 +1,20 @@
-
All Courses
+ All Courses
-
+
+
+
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
+
-
-
-
-
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 903cd0f..4626c1a 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,14 +1,17 @@
-import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
-import {Course} from '../model/course';
-import {Observable} from 'rxjs';
-import {CoursesStore} from '../services/courses.store';
+import {Component, OnInit} from '@angular/core';
+import {Course, sortCoursesBySeqNo} from '../model/course';
+import {interval, noop, Observable, of, throwError, timer} from 'rxjs';
+import {catchError, delay, delayWhen, filter, finalize, map, retryWhen, shareReplay, tap} from 'rxjs/operators';
+import {HttpClient} from '@angular/common/http';
+import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
+import { CourseService } from '../shared/course.service';
@Component({
selector: 'home',
templateUrl: './home.component.html',
- styleUrls: ['./home.component.css'],
- changeDetection: ChangeDetectionStrategy.OnPush
+ styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
@@ -16,21 +19,43 @@ export class HomeComponent implements OnInit {
advancedCourses$: Observable;
- constructor(private coursesStore: CoursesStore) {
+
+ constructor(private courseService: CourseService) {
}
ngOnInit() {
- this.reloadCourses();
+ this.reloadCourseList();
}
- reloadCourses() {
+ reloadCourseList(){
+
+ const courses$ = this.courseService.getCourse()
+ .pipe(
+ map(courses=> courses.sort(sortCoursesBySeqNo))
+ );
+
+ // manual subscription for testing.
+ // courses$.subscribe((res)=> {
+ // console.log('called courses:- ', res)
+ // });
- this.beginnerCourses$ = this.coursesStore.filterByCategory("BEGINNER");
+ this.beginnerCourses$ = courses$.pipe(
+ map(courses => courses.filter(course=> course.category =='BEGINNER'))
+ );
- this.advancedCourses$ = this.coursesStore.filterByCategory("ADVANCED");
+ this.advancedCourses$ = courses$.pipe(
+ map(courses => courses.filter(course=> course.category=='ADVANCED'))
+ );
+
+
}
+
+
+
}
+
+
diff --git a/src/app/lesson/lesson.component.html b/src/app/lesson/lesson.component.html
index 2175241..131b285 100644
--- a/src/app/lesson/lesson.component.html
+++ b/src/app/lesson/lesson.component.html
@@ -1,15 +1 @@
-
-
-
-
{{lesson.description}}
-
- Duration: {{lesson.duration}}
-
-
-
-
-
+lesson works!
diff --git a/src/app/lesson/lesson.component.ts b/src/app/lesson/lesson.component.ts
index 5df54cd..2f4a142 100644
--- a/src/app/lesson/lesson.component.ts
+++ b/src/app/lesson/lesson.component.ts
@@ -1,20 +1,11 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {Lesson} from '../model/lesson';
+import { Component, OnInit } from '@angular/core';
@Component({
selector: 'lesson',
templateUrl: './lesson.component.html',
styleUrls: ['./lesson.component.css']
})
-export class LessonComponent implements OnInit {
+export class LessonComponent {
- @Input()
- lesson:Lesson;
-
- constructor() { }
-
- ngOnInit() {
-
- }
}
diff --git a/src/app/loading/loading.component.css b/src/app/loading/loading.component.css
index bb7e4ee..96e82f0 100644
--- a/src/app/loading/loading.component.css
+++ b/src/app/loading/loading.component.css
@@ -1,15 +1,13 @@
.spinner-container {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- background: rgba(0, 0, 0, 0.32);
- z-index: 20000;
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ top: 0;
+ left: 0;
+ background:rgba(0, 0, 0, 0.32);
+ z-index: 2000;
}
-
-
diff --git a/src/app/loading/loading.component.html b/src/app/loading/loading.component.html
index f7516e3..8b13789 100644
--- a/src/app/loading/loading.component.html
+++ b/src/app/loading/loading.component.html
@@ -1,9 +1 @@
-
-
-
-
-
-
-
-
diff --git a/src/app/loading/loading.component.ts b/src/app/loading/loading.component.ts
index f9ca4f0..5ee6516 100644
--- a/src/app/loading/loading.component.ts
+++ b/src/app/loading/loading.component.ts
@@ -1,6 +1,5 @@
import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
-import {LoadingService} from './loading.service';
@Component({
selector: 'loading',
@@ -10,7 +9,7 @@ import {LoadingService} from './loading.service';
export class LoadingComponent implements OnInit {
- constructor(public loadingService: LoadingService) {
+ constructor() {
}
diff --git a/src/app/loading/loading.service.ts b/src/app/loading/loading.service.ts
deleted file mode 100644
index dc4f1c4..0000000
--- a/src/app/loading/loading.service.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {Injectable} from '@angular/core';
-import {BehaviorSubject, Observable, Subject,of} from 'rxjs';
-import {concatMap, finalize, tap} from 'rxjs/operators';
-
-
-@Injectable()
-export class LoadingService {
-
- private loadingSubject = new BehaviorSubject(false);
-
- loading$: Observable = this.loadingSubject.asObservable();
-
- constructor() {
- console.log("Loading service created ...");
- }
-
- showLoaderUntilCompleted(obs$: Observable): Observable {
- return of(null)
- .pipe(
- tap(() => this.loadingOn()),
- concatMap(() => obs$),
- finalize(() => this.loadingOff())
- );
- }
-
- loadingOn() {
- this.loadingSubject.next(true);
-
- }
-
- loadingOff() {
- this.loadingSubject.next(false);
- }
-
-}
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index fa6bcb5..343488e 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -3,7 +3,6 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Router} from '@angular/router';
-import {AuthStore} from '../services/auth.store';
@Component({
selector: 'login',
@@ -16,8 +15,7 @@ export class LoginComponent implements OnInit {
constructor(
private fb: FormBuilder,
- private router: Router,
- private auth: AuthStore) {
+ private router: Router) {
this.form = fb.group({
email: ['test@angular-university.io', [Validators.required]],
@@ -34,16 +32,6 @@ export class LoginComponent implements OnInit {
const val = this.form.value;
- this.auth.login(val.email, val.password)
- .subscribe(
- () => {
- this.router.navigateByUrl("/courses")
- },
- err => {
- alert("Login failed!");
- }
- );
-
}
diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html
index bc0e54c..e69de29 100644
--- a/src/app/messages/messages.component.html
+++ b/src/app/messages/messages.component.html
@@ -1,16 +0,0 @@
-
-
-
-
-
-
- {{error}}
-
-
-
close
-
-
Search All Lessons
-