Done

package.json

@@ -14,12 +14,14 @@
     "@angular/common": "^18.2.0",
     "@angular/compiler": "^18.2.0",
     "@angular/core": "^18.2.0",
+    "@angular/fire": "^18.0.1",
     "@angular/forms": "^18.2.0",
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
+    "firebase": "^11.0.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10"

src/app/app.config.ts

@@ -3,7 +3,24 @@ import { provideRouter } from '@angular/router';
 
 import {routes} from './app.routes';
 import {provideHttpClient} from '@angular/common/http';
+import {initializeApp, provideFirebaseApp} from '@angular/fire/app';
+import {getFirestore, provideFirestore} from '@angular/fire/firestore';
+
+const firebaseConfig = {
+  apiKey: "AIzaSyDh7OjqpUdoVPzzzdPa8t_Pm4_UsanJC-c",
+  authDomain: "tv-serien-ff0ce.firebaseapp.com",
+  projectId: "tv-serien-ff0ce",
+  storageBucket: "tv-serien-ff0ce.firebasestorage.app",
+  messagingSenderId: "38528604508",
+  appId: "1:38528604508:web:e4070052d0495cf28e4999"
+};
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient()]
+  providers: [
+    provideZoneChangeDetection({eventCoalescing: true}),
+    provideRouter(routes),
+    provideHttpClient(),
+    provideFirebaseApp(() => initializeApp(firebaseConfig)),
+    provideFirestore(() => getFirestore())
+  ]
 };

src/app/components/main-view/main-view.component.html

@@ -2,7 +2,7 @@
   <div class="row mt-3"><h1>TV-Serien</h1></div>
   <div class="row mt-1">
     <div class="col-md-7 mb-3">
-      <app-show-list [shows]="shows" (selectedShow)="onSelectedShow($event)"></app-show-list>
+      <app-show-list (selectedShow)="onSelectedShow($event)"></app-show-list>
     </div>
     <div class="col-md-5">
       @if (isShowSelected) {

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<Show>;
   isShowSelected = false;
 
   constructor() {
-    this.shows = this.dataService.getShows();
     this.selectedShow$ = new BehaviorSubject<Show>(new Show(0, ""))
   }
 

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
     >

src/app/components/show-form/show-form.component.ts

@@ -2,6 +2,8 @@ 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';
+import {addDoc, collection, Firestore} from '@angular/fire/firestore';
 
 @Component({
   selector: 'app-show-form',
@@ -13,13 +15,12 @@ import {FormsModule} from '@angular/forms';
   styleUrl: './show-form.component.css'
 })
 export class ShowFormComponent {
-  showService: ShowService = inject(ShowService);
+  fireStore: Firestore = inject(Firestore);
+  private seriesCollection = 'table_show';
   show: Show = new Show(0, "");
-  shows: Show[] = this.showService.getShows();
 
   save() {
-    this.shows.push(this.show);
-
-    this.show = new Show(0, "");
+    const showsRef = collection(this.fireStore, this.seriesCollection);
+    addDoc(showsRef, {id: this.show.uid, title: this.show.title,});
   }
 }

src/app/components/show-list/show-list.component.html

@@ -6,16 +6,16 @@
   </tr>
   </thead>
   <tbody>
-    @for (show of shows; track show.id) {
+    @for (show of shows | async; track show.uid) {
       @if (isToEdit(show)) {
-        <td><input class="form-control" id="newShowId" name="newShowId" type="number" [(ngModel)]="show.id"></td>
+        <td><input class="form-control" id="newShowId" name="newShowId" type="number" [(ngModel)]="show.uid"></td>
         <td><input class="form-control" id="newShowTitle" name="newShowTitle" type="text" [(ngModel)]="show.title"></td>
         <td colspan="2">
           <button class="material-icons" (click)="saveEdit()">save</button>
         </td>
       } @else {
         <tr>
-          <td>{{ show.id }}</td>
+          <td>{{ show.uid }}</td>
           <td>{{ show.title }}</td>
           <td>
             <button class="btn btn-primary" (click)="showDetails(show)">Details</button>

src/app/components/show-list/show-list.component.ts

@@ -1,18 +1,27 @@
-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';
+import {deleteDoc, doc, Firestore, updateDoc} from '@angular/fire/firestore';
 
 @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);
+  fireStore: Firestore = inject(Firestore);
+  private seriesCollection = 'table_show';
+  shows: Observable<Show[]> = this.showService.getShows();
+
   @Output() selectedShow = new EventEmitter<Show>();
   editShow: Show = new Show(0, "");
 
@@ -31,13 +40,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));
+    const showDocRef = doc(this.fireStore, `${this.seriesCollection}/${show.uid}`);
+    updateDoc(showDocRef, {id: show.uid, title: show.title,});
   }
 
   delete(show: Show) {
-    this.shows = this.shows.filter(s => s !== show);
+    const showDocRef = doc(this.fireStore, `${this.seriesCollection}/${show.uid}`);
+    deleteDoc(showDocRef);
   }
 
   isToEdit(show: Show): boolean {

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) {
   }
 }

src/app/services/show.service.ts

@@ -1,21 +1,22 @@
 import {Injectable} from '@angular/core';
 import {Show} from '../model/show';
+import {collection, collectionData, Firestore, orderBy, query} from '@angular/fire/firestore';
+import {Observable} from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ShowService {
-  private shows: Show[] = [];
+  private readonly shows$!: Observable<Show[]>;
+  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);
+    const showsQuery = query(showsRef, orderBy('id'));
+    this.shows$ = collectionData(showsQuery, {idField: 'uid'}) as Observable<Show[]>;
   }
 
   getShows() {
-    return this.shows;
+    return this.shows$;
   }
 }