update

Author: Markus Guder

client/app/components/home/categories/categories.component.html

@@ -13,7 +13,7 @@
   </div>
 
   <section style="padding: 1rem;" *ngIf="dataIsAvailable">
-    <div class="card" *ngFor="let category of categories; let i=index" (click)="routeToCourse(category.RUB_ID, colorArray[i])">
+    <div class="card" *ngFor="let category of categories; let i=index" (click)="routeToCourse(category.RUB_ID, colorArray[i], category.RUB_NAME)">
       <div class="color-marker" [ngClass]="colorArray[i]">
       </div>
       <div class="card-content">

client/app/components/home/categories/categories.component.ts

@@ -24,9 +24,9 @@ export class CategoriesComponent implements OnInit {
     });
   }
 
-  routeToCourse(categoryId: number, color: string) {
+  routeToCourse(categoryId: number, color: string, category: string) {
     this.router.navigateByUrl('home/kurs-uebersicht/' + categoryId);
-    this.comService.setColor(color);
+    this.comService.setInfo(color, category);
   }
 
 }

client/app/components/home/courses/courses.component.html

@@ -2,8 +2,8 @@
   <div class="circleBackground" #backgroundElement></div>   
   <div class="columns is-mobile">
     <div class="column is-12" style="z-index: 0; padding: 2rem; padding-left: 5rem;">
-      <div style="font-size: 1.5rem; color:white;">
-        Kurs Kategorien
+      <div style="font-size: 1.5rem; color:white;" >
+        {{headerText}} - Kurse
       </div>
     </div>
   </div>

client/app/components/home/courses/courses.component.ts

@@ -17,7 +17,8 @@ export class CoursesComponent implements AfterViewInit {
 
   public dataIsAvailable: boolean = false;
   public courses: Array<any>;
-  public headerText: string;
+  public headerText: string = "";
+  public category: string = "";
 
   constructor(
   public categoryService: CategoryService,
@@ -28,8 +29,9 @@ export class CoursesComponent implements AfterViewInit {
   public renderer: Renderer2) {}
 
   ngAfterViewInit() {
-    this.comService.getColor().subscribe(color => {         
-      this.renderer.addClass(this.backgroundElement.nativeElement, color);
+    this.comService.getInfo().subscribe(response => {         
+      this.category = response.category;
+      this.renderer.addClass(this.backgroundElement.nativeElement, response.color);
     });
 
     this.activatedRoute.params.subscribe((params: Params) => {     
@@ -43,11 +45,11 @@ export class CoursesComponent implements AfterViewInit {
   }
 
   requestCoursesByUser():void{
+    this.headerText = "Meine";
     this.userService.getCoursesByUser().subscribe(response =>{    
       response.forEach(element => {
         this.courses = [];
         this.coursesService.getCoursesByCourseId(element.ANM_KURS_ID).subscribe(response => {
-          console.log(response);
           response.ANM_DATUM = element.ANM_DATUM;
           this.courses.push(response);
         });
@@ -59,6 +61,7 @@ export class CoursesComponent implements AfterViewInit {
   }
 
   requestCoursesByCategory(courseId: string):void{
+    this.headerText = this.category;
     this.categoryService.getCoursesByCategoryId(courseId).subscribe(response =>{    
       this.courses = response;       
       if(response.name != "HttpResponseError"){

client/app/components/home/shared/communication.service.ts

@@ -8,6 +8,7 @@ export class CommunicationService{
 
     public instruction_sub_comb = new Subject<any>();
     private color: string;
+    private category: string;
 
     constructor() {
     }
@@ -16,12 +17,17 @@ export class CommunicationService{
         this.instruction_sub_comb.next(message);
     }
 
-    setColor(color: string) {
+    setInfo(color: string, category: string) {
         this.color = color;
+        this.category = category;
     }
 
-    getColor(): Observable<string>{
-        return Observable.of(this.color);
+    getInfo(): Observable<any>{
+        return Observable.of(
+            {
+                'color': this.color,
+                'category': this.category
+            });
     }
 
 }