package.json

@@ -14,14 +14,12 @@
     "@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

@@ -1,26 +1,9 @@
-import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import {provideRouter} from '@angular/router';
+import { provideRouter } from '@angular/router';
 
-import {routes} from './app.routes';
+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: [
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient()]
-    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 (selectedShow)="onSelectedShow($event)"></app-show-list>
+      <app-show-list [shows]="shows" (selectedShow)="onSelectedShow($event)"></app-show-list>
     </div>
     <div class="col-md-5">
       @if (isShowSelected) {

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

@@ -1,6 +1,7 @@
 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';
@@ -12,18 +13,21 @@ 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.uid"
+           [(ngModel)]="show.id"
            placeholder="Hier die ID der Serie eingeben!"
            required
     >

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

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

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

@@ -6,16 +6,16 @@
   </tr>
   </thead>
   <tbody>
-    @for (show of shows | async; track show.uid) {
+    @for (show of shows; track show.id) {
       @if (isToEdit(show)) {
-        <td><input class="form-control" id="newShowId" name="newShowId" type="number" [(ngModel)]="show.uid"></td>
+        <td><input class="form-control" id="newShowId" name="newShowId" type="number" [(ngModel)]="show.id"></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.uid }}</td>
+          <td>{{ show.id }}</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,27 +1,18 @@
-import {Component, EventEmitter, inject, Input, Output} from '@angular/core';
+import {Component, EventEmitter, 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 {
-  showService: ShowService = inject(ShowService);
+  @Input() shows: Show[] = [];
-  fireStore: Firestore = inject(Firestore);
-  private seriesCollection = 'table_show';
-  shows: Observable<Show[]> = this.showService.getShows();
-
   @Output() selectedShow = new EventEmitter<Show>();
   editShow: Show = new Show(0, "");
 
@@ -40,13 +31,13 @@ export class ShowListComponent {
   }
 
   updateShow(show: Show) {
-    const showDocRef = doc(this.fireStore, `${this.seriesCollection}/${show.uid}`);
+    this.shows = this.shows.filter(s => s !== show);
-    updateDoc(showDocRef, {id: show.uid, title: show.title,});
+    this.shows.push(show);
+    this.shows.sort((a, b) => (a.id ?? 0) - (b.id ?? 0));
   }
 
   delete(show: Show) {
-    const showDocRef = doc(this.fireStore, `${this.seriesCollection}/${show.uid}`);
+    this.shows = this.shows.filter(s => s !== show);
-    deleteDoc(showDocRef);
   }
 
   isToEdit(show: Show): boolean {

src/app/model/show.ts

@@ -1,4 +1,4 @@
 export class Show {
-  constructor(public uid?: number, public title?: string, public image?: string, public summary?: string) {
+  constructor(public id?: number, public title?: string, public image?: string, public summary?: string) {
   }
 }

src/app/services/show.service.ts

@@ -1,22 +1,21 @@
-import {Injectable} from '@angular/core';
+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 readonly shows$!: Observable<Show[]>;
+  private shows: Show[] = [];
-  private seriesCollection = 'table_show';
 
-  constructor(private firestore: Firestore) {
+  constructor() {
-    const showsRef = collection(this.firestore, this.seriesCollection);
+    this.shows.push(new Show(1, 'Vikings'));
-    const showsQuery = query(showsRef, orderBy('id'));
+    this.shows.push(new Show(2, 'Friends'));
-    this.shows$ = collectionData(showsQuery, {idField: 'uid'}) as Observable<Show[]>;
+    this.shows.push(new Show(3, 'Downtown Abbey'));
+    this.shows.push(new Show(4, 'The Witcher'));
+    this.shows.push(new Show(5, 'Versuch'));
   }
 
   getShows() {
-    return this.shows$;
+    return this.shows;
   }
 }