@if (isShowSelected) {
diff --git a/src/app/components/main-view/main-view.component.ts b/src/app/components/main-view/main-view.component.ts
index 02ea0f3..0dc572f 100644
--- a/src/app/components/main-view/main-view.component.ts
+++ b/src/app/components/main-view/main-view.component.ts
@@ -1,7 +1,6 @@
import {Component, inject} from '@angular/core';
import {ShowListComponent} from '../show-list/show-list.component';
import {Show} from '../../model/show';
-import {ShowService} from '../../services/show.service';
import {ShowFormComponent} from '../show-form/show-form.component';
import {BehaviorSubject} from 'rxjs';
import {ApiService} from '../../services/api-service';
@@ -13,21 +12,18 @@ import {ShowDetailsComponent} from '../show-details/show-details.component';
imports: [
ShowListComponent,
ShowFormComponent,
- ShowDetailsComponent
+ ShowDetailsComponent,
],
templateUrl: './main-view.component.html',
styleUrl: './main-view.component.css'
})
export class MainViewComponent {
- private dataService: ShowService = inject(ShowService);
private apiService: ApiService = inject(ApiService);
- public shows: Show[] = [];
selectedShow$: BehaviorSubject;
isShowSelected = false;
constructor() {
- this.shows = this.dataService.getShows();
this.selectedShow$ = new BehaviorSubject(new Show(0, ""))
}
diff --git a/src/app/components/show-form/show-form.component.html b/src/app/components/show-form/show-form.component.html
index 72a709e..e5a6bff 100644
--- a/src/app/components/show-form/show-form.component.html
+++ b/src/app/components/show-form/show-form.component.html
@@ -9,7 +9,7 @@
pattern="^\d+$"
name="newShowID"
type="text"
- [(ngModel)]="show.id"
+ [(ngModel)]="show.uid"
placeholder="Hier die ID der Serie eingeben!"
required
>
diff --git a/src/app/components/show-form/show-form.component.ts b/src/app/components/show-form/show-form.component.ts
index 3f8d5a1..e963cc5 100644
--- a/src/app/components/show-form/show-form.component.ts
+++ b/src/app/components/show-form/show-form.component.ts
@@ -2,6 +2,7 @@ import {Component, inject} from '@angular/core';
import {ShowService} from '../../services/show.service';
import {Show} from '../../model/show';
import {FormsModule} from '@angular/forms';
+import {Observable} from 'rxjs';
@Component({
selector: 'app-show-form',
@@ -15,10 +16,10 @@ import {FormsModule} from '@angular/forms';
export class ShowFormComponent {
showService: ShowService = inject(ShowService);
show: Show = new Show(0, "");
- shows: Show[] = this.showService.getShows();
+ shows: Observable = this.showService.getShows();
save() {
- this.shows.push(this.show);
+ // this.shows.push(this.show);
this.show = new Show(0, "");
}
diff --git a/src/app/components/show-list/show-list.component.html b/src/app/components/show-list/show-list.component.html
index 062c8fe..8cd7013 100644
--- a/src/app/components/show-list/show-list.component.html
+++ b/src/app/components/show-list/show-list.component.html
@@ -6,16 +6,16 @@
- @for (show of shows; track show.id) {
+ @for (show of shows | async; track show.uid) {
@if (isToEdit(show)) {
- |
+ |
|
|
} @else {
- | {{ show.id }} |
+ {{ show.uid }} |
{{ show.title }} |
diff --git a/src/app/components/show-list/show-list.component.ts b/src/app/components/show-list/show-list.component.ts
index f4544b8..398397b 100644
--- a/src/app/components/show-list/show-list.component.ts
+++ b/src/app/components/show-list/show-list.component.ts
@@ -1,18 +1,24 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, inject, Input, Output} from '@angular/core';
import {Show} from '../../model/show';
import {FormsModule} from '@angular/forms';
+import {ShowService} from '../../services/show.service';
+import {Observable} from 'rxjs';
+import {AsyncPipe} from '@angular/common';
@Component({
selector: 'app-show-list',
standalone: true,
imports: [
- FormsModule
+ FormsModule,
+ AsyncPipe
],
templateUrl: './show-list.component.html',
styleUrl: './show-list.component.css'
})
export class ShowListComponent {
- @Input() shows: Show[] = [];
+ showService: ShowService = inject(ShowService);
+ shows: Observable = this.showService.getShows();
+
@Output() selectedShow = new EventEmitter();
editShow: Show = new Show(0, "");
@@ -31,13 +37,13 @@ export class ShowListComponent {
}
updateShow(show: Show) {
- this.shows = this.shows.filter(s => s !== show);
- this.shows.push(show);
- this.shows.sort((a, b) => (a.id ?? 0) - (b.id ?? 0));
+ // this.shows = this.shows.filter(s => s !== show);
+ // this.shows.push(show);
+ // this.shows.sort((a, b) => (a.uid ?? 0) - (b.uid ?? 0));
}
delete(show: Show) {
- this.shows = this.shows.filter(s => s !== show);
+ // this.shows = this.shows.filter(s => s !== show);
}
isToEdit(show: Show): boolean {
diff --git a/src/app/model/show.ts b/src/app/model/show.ts
index 7be6f90..40de6b0 100644
--- a/src/app/model/show.ts
+++ b/src/app/model/show.ts
@@ -1,4 +1,4 @@
export class Show {
- constructor(public id?: number, public title?: string, public image?: string, public summary?: string) {
+ constructor(public uid?: number, public title?: string, public image?: string, public summary?: string) {
}
}
diff --git a/src/app/services/show.service.ts b/src/app/services/show.service.ts
index b34ef44..76003f7 100644
--- a/src/app/services/show.service.ts
+++ b/src/app/services/show.service.ts
@@ -1,21 +1,21 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
import {Show} from '../model/show';
+import {collection, collectionData, Firestore} from '@angular/fire/firestore';
+import {Observable} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ShowService {
- private shows: Show[] = [];
+ private readonly shows$!: Observable;
+ private seriesCollection = 'table_show';
- constructor() {
- this.shows.push(new Show(1, 'Vikings'));
- this.shows.push(new Show(2, 'Friends'));
- this.shows.push(new Show(3, 'Downtown Abbey'));
- this.shows.push(new Show(4, 'The Witcher'));
- this.shows.push(new Show(5, 'Versuch'));
+ constructor(private firestore: Firestore) {
+ const showsRef = collection(this.firestore, this.seriesCollection);
+ this.shows$ = collectionData(showsRef, {idField: 'uid'}) as Observable;
}
getShows() {
- return this.shows;
+ return this.shows$;
}
}
|