optimize imports

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.component.spec.ts

@@ -1,5 +1,5 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import {TestBed} from '@angular/core/testing';
+import {AppComponent} from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async () => {

src/app/app.component.ts

@@ -1,12 +1,11 @@
 import {Component, inject} from '@angular/core';
-import { RouterOutlet } from '@angular/router';
 import {MainViewComponent} from './components/main-view/main-view.component';
 import {ShowService} from './services/show.service';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, MainViewComponent],
+  imports: [MainViewComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

src/app/app.config.ts

@@ -1,9 +1,27 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
+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: "AIzaSyAI_7olJlCnHZ4ivhUuUZMtRuJS7tzXP0Y",
+  authDomain: "tv-site-71802.firebaseapp.com",
+  projectId: "tv-site-71802",
+  storageBucket: "tv-site-71802.firebasestorage.app",
+  messagingSenderId: "763313630033",
+  appId: "1:763313630033:web:5c235904650d473e864170",
+  measurementId: "G-7Y15VZF887"
+};
 
 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/app.routes.ts

@@ -1,3 +1,3 @@
-import { Routes } from '@angular/router';
+import {Routes} from '@angular/router';
 
 export const routes: Routes = [];

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.spec.ts

@@ -1,6 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { MainViewComponent } from './main-view.component';
+import {MainViewComponent} from './main-view.component';
 
 describe('MainViewComponent', () => {
   let component: MainViewComponent;

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-details/show-details.component.spec.ts

@@ -1,6 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ShowDetailsComponent } from './show-details.component';
+import {ShowDetailsComponent} from './show-details.component';
 
 describe('ShowDetailsComponent', () => {
   let component: ShowDetailsComponent;

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

@@ -1,20 +1,5 @@
 <form name="newShowForm" #newShowForm="ngForm">
   <h2>Serie hinzufügen:</h2>
-  <div class="mb-2">
-    <label for="newShowID">ID:</label>
-    <input class="form-control"
-           id="newShowID"
-           #id="ngModel"
-           [class.is-invalid]="id.invalid && id.touched"
-           pattern="^\d+$"
-           name="newShowID"
-           type="text"
-           [(ngModel)]="show.id"
-           placeholder="Hier die ID der Serie eingeben!"
-           required
-    >
-    <small class="text-danger" [class.d-none]="id.valid || id.untouched">Bitte geben Sie eine Zahl ein!</small>
-  </div>
   <div class="mb-2">
     <label for="newShowTitle">Titel:</label>
     <input class="form-control"

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

@@ -1,6 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ShowFormComponent } from './show-form.component';
+import {ShowFormComponent} from './show-form.component';
 
 describe('ShowFormComponent', () => {
   let component: ShowFormComponent;

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

@@ -1,7 +1,7 @@
 import {Component, inject} from '@angular/core';
-import {ShowService} from '../../services/show.service';
 import {Show} from '../../model/show';
 import {FormsModule} from '@angular/forms';
+import {addDoc, collection, Firestore} from '@angular/fire/firestore';
 
 @Component({
   selector: 'app-show-form',
@@ -13,13 +13,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.spec.ts

@@ -1,6 +1,6 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ShowListComponent } from './show-list.component';
+import {ShowListComponent} from './show-list.component';
 
 describe('ShowListComponent', () => {
   let component: ShowListComponent;

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, 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 {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$;
   }
 }