Merge pull request #115 from marc101101/feature/courses-of-each-category

Feature/courses of each category

Author: marc101101

client/app/app-routing.module.ts

@@ -28,7 +28,7 @@ import { LocationStrategy, HashLocationStrategy } from '@angular/common';
     {
         path: 'home',
         loadChildren: './components/home/home.module#HomeModule',
-        canActivate: [AuthGuard],
+        //canActivate: [AuthGuard],
         data: {prelaod: true}
     },
     {

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">
+    <div class="card" *ngFor="let category of categories; let i=index" (click)="routeToCourse(category.RUB_ID, colorArray[i])">
       <div class="color-marker" [ngClass]="colorArray[i]">
       </div>
       <div class="card-content">

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

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { CategoryService } from '../../../services/category.service';
+import { Router } from '@angular/router';
+import { CommunicationService } from '../shared/communication.service';
 
 @Component({
   selector: 'categories',
@@ -11,7 +13,7 @@ export class CategoriesComponent implements OnInit {
   public categories: Array<any>;
   public colorArray: Array<any> = ["primary", "link", "danger", "success", "warning", "info"];
 
-  constructor(public categoryService: CategoryService) { }
+  constructor(public categoryService: CategoryService, private router: Router, public comService: CommunicationService) { }
 
   ngOnInit() {
     this.categoryService.getAllCategories().subscribe(response =>{    
@@ -22,4 +24,9 @@ export class CategoriesComponent implements OnInit {
     });
   }
 
+  routeToCourse(categoryId: number, color: string) {
+    this.router.navigateByUrl('home/kurs-uebersicht/' + categoryId);
+    this.comService.setColor(color);
+  }
+
 }

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

@@ -0,0 +1,30 @@
+<div class="container fullScreenBackground">
+  <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>
+    </div>
+  </div>
+
+  <div class="column" style="margin-top: -2rem;padding: 1.0rem;">
+    <alert></alert>
+  </div>
+
+  <section style="padding: 1rem;" *ngIf="dataIsAvailable">
+    <div class="card" *ngFor="let course of courses; let i=index">
+      <div class="color-marker">
+      </div>
+      <div class="card-content">
+        <p class="title">
+          {{course.KURS_NAME}}
+        </p>
+        <p class="subtitle">
+          {{course.KURS_BESCHREIBUNG}}
+        </p>
+      </div>
+    </div>
+  </section>
+  
+</div>

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

@@ -0,0 +1,66 @@
+.circleBackground {
+    height: 30rem;
+    width: 30rem;
+    z-index: 0;
+    background-color: #209cee;
+    border-radius: 15rem;
+    position: absolute;
+    margin-top: -13rem;
+    margin-left: -7rem;
+}
+
+.fullScreenBackground {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    box-shadow: 0px 0px 13px #6E6E6E;
+}
+
+.card {
+    margin-top: 1rem;
+    border-radius: 0.5rem;
+}
+
+.title {
+    font-size: 1.25rem !important;
+    padding-left: 1rem;
+}
+
+.subtitle {
+    font-size: 0.9rem;
+    padding-left: 1rem;
+}
+
+.color-marker {
+    float: right;
+    height: 100%;
+    position: absolute;
+    width: 10px;
+    border-top-left-radius: 0.8rem;
+    border-bottom-left-radius: 0.8rem;
+}
+
+.primary{
+    background-color: #00d1b2;
+}
+
+.link{
+    background-color: #3273dc;
+}
+
+.info{
+    background-color: #23d160;
+}
+
+.success{
+    background-color: #ffdd57;
+}
+
+.warning{
+    background-color: #ffbc6b;
+}
+
+.danger{
+    background-color: #ff3860;
+}

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

@@ -0,0 +1,42 @@
+import { Component, OnInit, Renderer2, ViewChild, ElementRef } from '@angular/core';
+import { CategoryService } from '../../../services/category.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { CommunicationService } from '../shared/communication.service';
+import { log } from 'util';
+
+@Component({
+  selector: 'courses',
+  templateUrl: './courses.component.html',
+  styleUrls: ['./courses.component.scss']
+})
+export class CoursesComponent implements OnInit {
+
+  @ViewChild('backgroundElement') backgroundElement: ElementRef;
+
+  public dataIsAvailable: boolean = false;
+  public courses: Array<any>;
+
+  constructor(public categoryService: CategoryService,
+  private activatedRoute: ActivatedRoute,
+  public comService: CommunicationService,
+  public renderer: Renderer2) { 
+    let localThis = this;
+    this.comService.getColor().subscribe(color => {   
+      console.log(color);
+      this.renderer.addClass(this.backgroundElement.nativeElement, color);
+    });
+  }
+
+  ngOnInit() {
+    this.activatedRoute.params.subscribe((params: Params) => {     
+      this.categoryService.getCoursesByCategoryId(params.courseId).subscribe(response =>{    
+        this.courses = response;       
+        if(response.name != "HttpResponseError"){
+          this.dataIsAvailable = true;  
+          this.courses = response;
+        }
+      });
+    });
+  }
+
+}

client/app/components/home/home-routing.module.ts

@@ -4,12 +4,13 @@ import { AuthGuard } from '../../guards/auth.guard';
 import { HomeComponent } from './home.component';
 import { CategoriesComponent } from './categories/categories.component';
 import { ProfilComponent } from './profil/profil.component';
+import { CoursesComponent } from './courses/courses.component';
 
 const routes: Routes = [
   {
     path: '',
     component: HomeComponent,
-    canActivate: [AuthGuard],
+    //canActivate: [AuthGuard],
     children: [
       {
         path: 'kategorien',
@@ -24,8 +25,8 @@ const routes: Routes = [
         component: CategoriesComponent
       },
       {
-        path: 'kurs-uebersicht',
-        component: CategoriesComponent
+        path: 'kurs-uebersicht/:courseId',
+        component: CoursesComponent
       },
       {
         path: 'kontakt',

client/app/components/home/home.module.ts

@@ -13,11 +13,13 @@ import { UserService } from '../../services/user.service';
 import { SharedModule } from '../../sharedModule/shared.module';
 import { AlertService } from '../../services/alert.service';
 import { CategoryService } from '../../services/category.service';
+import { CoursesComponent } from './courses/courses.component';
 
 @NgModule({
   declarations: [
     CategoriesComponent,
     ProfilComponent,
+    CoursesComponent,
     MenuComponent,
     HomeComponent
   ],

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

@@ -38,7 +38,7 @@ export class ProfilComponent implements OnInit {
 
   resetButton() {
     this.renderer.removeClass(this.saveButton.nativeElement, 'is-primary-save');
-      this.button_text = 'Speichern';
+    this.button_text = 'Speichern';
   }
 
   backClicked() {

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

@@ -1,11 +1,13 @@
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import { log } from 'util';
+import { Observable } from 'rxjs';
 
 @Injectable()
 export class CommunicationService{
 
     public instruction_sub_comb = new Subject<any>();
+    private color: string;
 
     constructor() {
     }
@@ -14,4 +16,12 @@ export class CommunicationService{
         this.instruction_sub_comb.next(message);
     }
 
+    setColor(color: string) {
+        this.color = color;
+    }
+
+    getColor(): Observable<string>{
+        return Observable.of(this.color);
+    }
+
 }