Fixed server issue + finished view

Author: Markus Guder

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

@@ -23,6 +23,9 @@
         <p class="subtitle">
           {{course.KURS_BESCHREIBUNG}}
         </p>
+        <p class="subtitle applicationDate" *ngIf="course.ANM_DATUM">
+          Anmeldung | {{course.ANM_DATUM | date:'dd.MM.yyyy'}}
+        </p>
       </div>
     </div>
   </section>

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

@@ -41,6 +41,11 @@
     border-bottom-left-radius: 0.8rem;
 }
 
+.applicationDate {
+    float: right;
+    font-size: 0.8rem;
+}
+
 .primary{
     background-color: #00d1b2;
 }

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

@@ -4,6 +4,7 @@ import { ActivatedRoute, Params } from '@angular/router';
 import { CommunicationService } from '../shared/communication.service';
 import { log } from 'util';
 import { UserService } from '../../../services/user.service';
+import { CoursesService } from '../shared/courses.service';
 
 @Component({
   selector: 'courses',
@@ -23,6 +24,7 @@ export class CoursesComponent implements AfterViewInit {
   public userService: UserService,
   private activatedRoute: ActivatedRoute,
   public comService: CommunicationService,
+  public coursesService: CoursesService,
   public renderer: Renderer2) {}
 
   ngAfterViewInit() {
@@ -42,10 +44,16 @@ export class CoursesComponent implements AfterViewInit {
 
   requestCoursesByUser():void{
     this.userService.getCoursesByUser().subscribe(response =>{    
-      this.courses = 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);
+        });
+      });
       if(response.name != "HttpResponseError"){
         this.dataIsAvailable = true;  
-        this.courses = response;
       }
     });
   }

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

@@ -14,6 +14,7 @@ import { SharedModule } from '../../sharedModule/shared.module';
 import { AlertService } from '../../services/alert.service';
 import { CategoryService } from '../../services/category.service';
 import { CoursesComponent } from './courses/courses.component';
+import { CoursesService } from './shared/courses.service';
 
 @NgModule({
   declarations: [
@@ -34,7 +35,8 @@ import { CoursesComponent } from './courses/courses.component';
       UserService,
       AlertService,
       CommunicationService,
-      CategoryService
+      CategoryService,
+      CoursesService
   ],
   exports: [MenuComponent],
 })

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

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { map, catchError } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { environment } from '../../../../environments/environment.prod';
+import { HttpHeaders, HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { AlertService } from '../../../services/alert.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class CoursesService {
+
+  private url: string = environment.apiUrl;
+
+  private httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type':  'application/json',
+      'Authorization': localStorage.getItem('token')
+    })
+  };
+
+  constructor(public http: HttpClient, public alertService: AlertService) { }
+    
+  getCoursesByCourseId(courseId: String): Observable<any>{
+    return this.http.get(this.url + "/courses/" + courseId, this.httpOptions).pipe(
+      map((res: Response) => {
+        return res;
+      }),
+      catchError((err: HttpErrorResponse) => {
+        this.alertService.push(err);
+        return Observable.of(err);
+      })
+    );
+  }
+  
+}