angular/tv-site
angular/tv-site
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4 done

Browse Source
This commit is contained in:
Phan Huy Tran 2024-11-20 11:25:57 +01:00
parent 727a636b97
commit a62708441e
3 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/show-details/show-details.component.html
View File

@ -1,6 +1,6 @@
@if (detailShow$ | async; as detailShow) { @if (detailShow$ | async; as detailShow) {
<div class="card"> <div class="card">
<img class="card-img-top img-fluid" ngSrc="{{detailShow.image}}"> <img class="card-img-top img-fluid" src="{{detailShow.image}}">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">{{ detailShow.title }}</h4> <h4 class="card-title">{{ detailShow.title }}</h4>
<p class="card-text" [innerHTML]="detailShow.summary"></p></div> <p class="card-text" [innerHTML]="detailShow.summary"></p></div>

5
src/app/components/show-details/show-details.component.ts
View File

@ -1,14 +1,13 @@
import {Component, Input} from '@angular/core'; import {Component, Input} from '@angular/core';
import {BehaviorSubject} from 'rxjs'; import {BehaviorSubject} from 'rxjs';
import {Show} from '../../model/show'; import {Show} from '../../model/show';
import {AsyncPipe, NgOptimizedImage} from '@angular/common'; import {AsyncPipe} from '@angular/common';
@Component({ @Component({
selector: 'app-show-details', selector: 'app-show-details',
standalone: true, standalone: true,
imports: [ imports: [
AsyncPipe, AsyncPipe
NgOptimizedImage
], ],
templateUrl: './show-details.component.html', templateUrl: './show-details.component.html',
styleUrl: './show-details.component.css' styleUrl: './show-details.component.css'

22
src/app/services/api-service.ts
View File

@ -1,7 +1,7 @@
import {inject, Injectable} from '@angular/core'; import {inject, Injectable} from '@angular/core';
import {Show} from '../model/show'; import {Show} from '../model/show';
import {HttpClient} from '@angular/common/http'; import {HttpClient} from '@angular/common/http';
import {map, Observable} from 'rxjs'; import {catchError, map, Observable, throwError} from 'rxjs';
import {ShowDTO} from '../model/ShowDto'; import {ShowDTO} from '../model/ShowDto';
@Injectable({ @Injectable({
@ -15,10 +15,20 @@ export class ApiService {
const apiUrl = `${this.baseUrl}/singlesearch/shows?q=${title}`; const apiUrl = `${this.baseUrl}/singlesearch/shows?q=${title}`;
let show: Show = new Show(0, title); let show: Show = new Show(0, title);
return this.httpClient.get<ShowDTO>(apiUrl).pipe(map((s) => { return this.httpClient.get<ShowDTO>(apiUrl).pipe(
show.summary = s.summary; catchError(err => {
show.image = s.image?.medium; let errorMessage;
return show; if (err.status == 404) {
})); errorMessage = "Eine Serie mit diesem Titel konnte nicht gefunden werden.";
} else {
errorMessage = err.message();
}
return throwError(() => console.log(errorMessage));
}),
map((s) => {
show.summary = s.summary;
show.image = s.image?.medium;
return show;
}));
} }
} }