idek man ausbildungsnachweise fucking me up frfr ong

package-lock.json

@@ -16,6 +16,7 @@
         "@angular/platform-browser": "^18.2.3",
         "@angular/platform-browser-dynamic": "^18.2.3",
         "@angular/router": "^18.2.3",
+        "angular-in-memory-web-api": "^0.18.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.3"
@@ -4533,6 +4534,19 @@
         "ajv": "^8.8.2"
       }
     },
+    "node_modules/angular-in-memory-web-api": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.18.0.tgz",
+      "integrity": "sha512-Eqkr9+x3d7K4dmn6Qs3ZVAfqBDPZN0N7Qel5i8eU/pe5r44J/pfxlNW+1LC2Sb2PdENEdvFzC8wx8qly5+kQyQ==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^18.0.0",
+        "@angular/core": "^18.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",

package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^18.2.3",
     "@angular/platform-browser-dynamic": "^18.2.3",
     "@angular/router": "^18.2.3",
+    "angular-in-memory-web-api": "^0.18.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

src/app/app.component.ts

@@ -1,18 +1,72 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
-import {Child1Component} from "./child/child-1/child-1.component";
-import {Child2Component} from "./child/child-2/child-2.component";
-import {ParentComponent} from "./child/parent/parent.component";
 import {HotelsComponent} from "./hotel/hotels.component";
 import {IdkComponent} from "./idek/idk.component";
+import {filter, from, map, reduce} from "rxjs";
+import {RouterOutlet} from "@angular/router";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [Child1Component, Child2Component, ParentComponent, HotelsComponent, IdkComponent],
+  imports: [HotelsComponent, IdkComponent, RouterOutlet],
   template: `
-    <app-hotels></app-hotels>
+    <app-hotels />
-    <app-idk></app-idk>
+    <app-idk />
+    <router-outlet />
   `
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+  ngOnInit() {
+    const users = [
+      {
+        name: 'John',
+        age: 15,
+      },
+      {
+        name: 'Alice',
+        age: 16,
+      },
+      {
+        name: 'Bob',
+        age: 45,
+      },
+      {
+        name: 'Eve',
+        age: 29,
+      },
+      {
+        name: 'Charlie',
+        age: 52,
+      },
+      {
+        name: 'Dave',
+        age: 41,
+      },
+      {
+        name: 'Mallory',
+        age: 37,
+      },
+      {
+        name: 'Trent',
+        age: 48,
+      },
+      {
+        name: 'Peggy',
+        age: 26,
+      },
+      {
+        name: 'Victor',
+        age: 39,
+      }
+    ];
+
+    from(users).pipe(
+      filter(user => user.age >= 18),
+      reduce((acc, user) => {
+        acc.age += user.age
+        acc.count++;
+        return acc;
+      }, {age: 0, count: 0}),
+      map(data => data.age / data.count),
+    ).subscribe((data) => {console.log("avg age: ", data)});
+  }
 }

src/app/app.config.ts

@@ -1,14 +1,22 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import {ApplicationConfig, importProvidersFrom, provideZoneChangeDetection} from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 import {registerLocaleData} from "@angular/common";
 import localeDe from "@angular/common/locales/de"
 import localeCn from "@angular/common/locales/en"
 import localeJap from "@angular/common/locales/en"
+import {provideHttpClient} from "@angular/common/http";
+import {InMemoryWebApiModule} from "angular-in-memory-web-api";
+import {HotelDataService} from "./service/HotelData.service";
 
 registerLocaleData(localeDe, 'de-DE')
 registerLocaleData(localeCn, 'cn-CN')
 registerLocaleData(localeJap, 'ja-JP')
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(),
+    importProvidersFrom(InMemoryWebApiModule.forRoot(HotelDataService))
+  ]
 };

src/app/app.routes.ts

@@ -1,3 +1,16 @@
 import { Routes } from '@angular/router';
+import {HotelsComponent} from "./hotel/hotels.component";
+import {HotelComponent} from "./hotel/hotel.component";
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '/hotels',
+    component: HotelsComponent,
+    title: 'Hotels',
+  },
+  {
+    path: '/hotels/{id}',
+    component: HotelComponent,
+    title: 'Hotel',
+  }
+];

src/app/child/child-1/child-1.component.ts

@@ -1,23 +0,0 @@
-import {Component, EventEmitter, Input, Output} from "@angular/core";
-
-@Component({
-  selector: 'app-child-1',
-  standalone: true,
-  template: `
-    <h1>{{balance}}€</h1>
-    <button (click)="minusFifty()" [disabled]="balance <= 0">-50€</button>
-    <h2 [hidden]="balance > 0">No mo money</h2>
-  `
-})
-export class Child1Component {
-  @Input()
-  public balance: number = 1000;
-
-  @Output()
-  public balanceChange: EventEmitter<number> = new EventEmitter<number>();
-
-  public minusFifty() {
-    this.balance -= 50;
-    this.balanceChange.emit(this.balance);
-  }
-}

src/app/child/child-2/child-2.component.html

@@ -1,2 +0,0 @@
-<h1>{{balance}}€</h1>
-<button (click)="minusFifty()">-50€</button>

src/app/child/child-2/child-2.component.ts

@@ -1,23 +0,0 @@
-import {Component, EventEmitter, Input, Output} from "@angular/core";
-
-@Component({
-  selector: 'app-child-2',
-  standalone: true,
-  template: `
-    <h1>{{balance}}€</h1>
-    <button (click)="minusFifty()" [disabled]="balance <= 0">-50€</button>
-    <h2 [hidden]="balance > 0">No mo money</h2>
-    `
-})
-export class Child2Component {
-  @Input()
-  public balance: number = 1000;
-
-  @Output()
-  public balanceChange: EventEmitter<number> = new EventEmitter<number>();
-
-  public minusFifty() {
-    this.balance -= 50;
-    this.balanceChange.emit(this.balance);
-  }
-}

src/app/child/parent/parent.component.html

@@ -1,6 +0,0 @@
-<h1>{{balance}}€</h1>
-
-<button (click)="gibMoney()">+50€</button>
-
-<app-child-1 [(balance)]="balance"></app-child-1>
-<app-child-2 [(balance)]="balance"></app-child-2>

src/app/child/parent/parent.component.ts

@@ -1,24 +0,0 @@
-import {Component} from "@angular/core";
-import {Child1Component} from "../child-1/child-1.component";
-import {Child2Component} from "../child-2/child-2.component";
-
-@Component({
-  selector: 'app-parent',
-  standalone: true,
-  imports: [
-    Child1Component,
-    Child2Component
-  ],
-  templateUrl: 'parent.component.html'
-})
-export class ParentComponent {
-  public balance: number = 1000;
-
-  public gibMoney(): void {
-    this.balance += 100;
-  }
-
-  public setBalance(balance: number): void {
-    this.balance = balance;
-  }
-}

src/app/currency/currency.component.ts

@@ -0,0 +1,57 @@
+import {Component, EventEmitter, Output} from "@angular/core";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {Lang} from "../idek/lang";
+
+
+@Component({
+  standalone: true,
+  selector: "app-currency",
+  imports: [
+    ReactiveFormsModule,
+    FormsModule
+  ],
+  template: `
+    <select [ngModel]="currency" (ngModelChange)="setCurrency($event)">
+      @for (currency of currencies; track currency.code) {
+        <option value="{{currency.name}}">{{ currency.name }}</option>
+      }
+    </select>
+  `
+})
+export class CurrencyComponent {
+
+  @Output()
+  public currency: EventEmitter<Lang> = new EventEmitter();
+
+  public currencies: Lang[] = [
+    {
+      name: 'de',
+      code: 'de-DE',
+      currency: 'EUR'
+    },
+    {
+      name: 'en',
+      code: 'en-US',
+      currency: 'USD'
+    },
+    {
+      name: 'jap',
+      code: 'ja-JP',
+      currency: 'JPY'
+    },
+    {
+      name: 'cn',
+      code: 'cn-CN',
+      currency: 'CNY'
+    }
+  ]
+
+  public setCurrency(currencyInput: string): void {
+    for (const currency of this.currencies) {
+      if (currency.name === currencyInput) {
+        this.currency.emit(currency);
+        break;
+      }
+    }
+  }
+}

src/app/hotel/hotels.component.ts

@@ -4,81 +4,40 @@ import {Hotel} from "./hotel";
 import {FormsModule} from "@angular/forms";
 import {Lang} from "../idek/lang";
 import {HotelService} from "../service/hotel.service";
+import {Observable} from "rxjs";
+import {AsyncPipe} from "@angular/common";
+import {CurrencyComponent} from "../currency/currency.component";
 
 @Component({
   standalone: true,
   template: `
-    <select [ngModel]="currency" (ngModelChange)="setCurrency($event)">
+    <app-currency (currency)="currency = $event"></app-currency>
-      @for (currency of currencies; track null) {
-        <option value="{{currency.name}}">{{currency.name}}</option>
-      }
-    </select>
     <form>
       <input name="search" [ngModel]="search" (ngModelChange)="searchEvent($event)">
     </form>
-    @for (hotel of matchingHotels; track hotel.hotelId) {
+    @for (hotel of (matchingHotels | async); track hotel.hotelId) {
         <app-hotel [hotel]="hotel" [currency]="currency"></app-hotel>
         <hr>
     } @empty {
       <h1>no matching results for {{search}}</h1>
     }
   `,
-  imports: [FormsModule, HotelComponent],
+  imports: [FormsModule, HotelComponent, AsyncPipe, CurrencyComponent],
   providers: [HotelService],
   selector: 'app-hotels'
 })
 export class HotelsComponent {
-  public search: string = '';
 
   public currency: Lang = {name: 'de', code: 'de-DE', currency: 'EUR'};
 
-  public currencies: Lang[] = [
+  public search: string = '';
-    {
-      name: 'de',
-      code: 'de-DE',
-      currency: 'EUR'
-    },
-    {
-      name: 'en',
-      code: 'en-US',
-      currency: 'USD'
-    },
-    {
-      name: 'jap',
-      code: 'ja-JP',
-      currency: 'JPY'
-    },
-    {
-      name: 'cn',
-      code: 'cn-CN',
-      currency: 'CNY'
-    }
-  ]
 
-  public matchingHotels: Hotel[] = [];
+  private hotelService: HotelService= inject(HotelService);
 
-  private hotelService: HotelService = inject(HotelService);
+  public matchingHotels: Observable<Hotel[]> = this.hotelService.getHotels();
-
-  constructor() {
-    this.matchingHotels = this.hotelService.getHotels;
-  }
-
-  public setCurrency(currencyInput: string): void {
-    for (const currency of this.currencies) {
-      if (currency.name === currencyInput) {
-        this.currency = currency;
-        break;
-      }
-    }
-  }
 
   public searchEvent(input: string) {
     this.search = input.toLowerCase();
-    this.matchingHotels = []
+    //this.matchingHotels.pipe(filter((hotel: Hotel) => hotel.hotelName.toLowerCase().includes(input.toLowerCase())));
-    this.hotelService.getHotels .forEach((hotel: Hotel) => {
-      if (hotel.hotelName.toLowerCase().includes(this.search)) {
-          this.matchingHotels.push(hotel);
-      }
-    })
   }
 }

src/app/idek/idk.component.ts

@@ -1,13 +1,12 @@
 import {Component} from "@angular/core";
-import {CurrencyPipe, UpperCasePipe} from "@angular/common";
+import {CurrencyPipe} from "@angular/common";
-import {TestPipe} from "./test.pipe";
 import {FormsModule} from "@angular/forms";
 import {Lang} from "./lang";
 
 @Component({
   selector: 'app-idk',
   standalone: true,
-  imports: [UpperCasePipe, TestPipe, CurrencyPipe, FormsModule],
+  imports: [CurrencyPipe, FormsModule],
   template: `
     <select [ngModel]="currency" (ngModelChange)="setCurrency($event)">
       @for (currency of currencies; track null) {

src/app/service/HotelData.service.ts

@@ -0,0 +1,45 @@
+import {InMemoryDbService} from "angular-in-memory-web-api";
+import {Hotel} from "../hotel/hotel";
+
+
+export class HotelDataService implements InMemoryDbService{
+  createDb(): Record<string, Hotel[]> {
+    const hotels: Hotel[] = [
+      {
+        "hotelId": 1,
+        "hotelName": "Buea süßes Leben",
+        "description": "Schöne Aussicht am Meer",
+        "price": 230.5,
+        "imageUrl": "assets/img/heisenberg.jpg",
+        "rating": 3.5
+      },
+      {
+        "hotelId": 2,
+        "hotelName": "Marrakesch",
+        "description": "Genießen Sie den Blick auf die Berge",
+        "price": 145.5,
+        "imageUrl": "assets/img/kjan.png",
+        "rating": 5
+      },
+      {
+        "hotelId": 3,
+        "hotelName": "Abuja neuer Palast",
+        "description": "Kompletter Aufenthalt mit Autoservice",
+        "price": 120.12,
+        "imageUrl": "assets/img/huy.png",
+        "rating": 4
+      },
+      {
+        "hotelId": 4,
+        "hotelName": "OUR Hotel",
+        "description": "Wunderschönes Ambiente für Ihren Aufenthalt",
+        "price": 135.12,
+        "imageUrl": "assets/img/rat.png",
+        "rating": 2.5
+      }
+    ];
+
+    return { hotels };
+  }
+
+}

src/app/service/hotel.service.ts

@@ -1,44 +1,15 @@
-import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {inject, Injectable} from "@angular/core";
+import {Observable} from "rxjs";
 import {Hotel} from "../hotel/hotel";
 
-@Injectable()
+@Injectable({
+  providedIn: "root",
+})
 export class HotelService {
-  private hotels: Hotel[] = [
+  private httpClient: HttpClient = inject(HttpClient);
-    {
-      "hotelId": 1,
-      "hotelName": "Buea süßes Leben",
-      "description": "Schöne Aussicht am Meer",
-      "price": 230.5,
-      "imageUrl": "assets/img/heisenberg.jpg",
-      "rating": 3.5
-    },
-    {
-      "hotelId": 2,
-      "hotelName": "Marrakesch",
-      "description": "Genießen Sie den Blick auf die Berge",
-      "price": 145.5,
-      "imageUrl": "assets/img/kjan.png",
-      "rating": 5
-    },
-    {
-      "hotelId": 3,
-      "hotelName": "Abuja neuer Palast",
-      "description": "Kompletter Aufenthalt mit Autoservice",
-      "price": 120.12,
-      "imageUrl": "assets/img/huy.png",
-      "rating": 4
-    },
-    {
-      "hotelId": 4,
-      "hotelName": "OUR Hotel",
-      "description": "Wunderschönes Ambiente für Ihren Aufenthalt",
-      "price": 135.12,
-      "imageUrl": "assets/img/rat.png",
-      "rating": 2.5
-    }
-  ];
 
-  public get getHotels() {
+  public getHotels(): Observable<Hotel[]> {
-    return this.hotels;
+    return this.httpClient.get<Hotel[]>('/api/hotels');
   }
 }