Add search

frontend/ng-karaoqueue/src/app/app.component.ts

@@ -1,10 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { RuntimeConfigLoaderService } from 'runtime-config-loader';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit{
+
+  constructor(private configSvc: RuntimeConfigLoaderService) {}
+  ngOnInit(): void {
+    console.log("API at ",this.configSvc.getConfigObjectKey("api"));
+  }
   title = 'KaraoQueue';
 }

frontend/ng-karaoqueue/src/app/song-search/song-search.component.html

@@ -1 +1,30 @@
-<p>song-search works!</p>
+<mat-form-field>
+  <mat-label>Suche...</mat-label>
+  <input matInput placeholder="Tippe einen Künstler oder Song..."
+    (keyup)="applyFilter($event.target.value)">
+</mat-form-field>
+<mat-list *ngFor="let song of songs">
+    <mat-card>
+      <mat-card-title>{{song.artist.name}} - {{song.title}}</mat-card-title>
+      <mat-card-content>
+        <ng-template [ngIf]="song.duet==true" [ngIfElse]="nonduet">
+          <mat-icon svgIcon="account-multiple"></mat-icon>
+        </ng-template>
+        <ng-template #nonduet>
+          <mat-icon svgIcon="account"></mat-icon>
+        </ng-template>
+        <ng-template [ngIf]="song.explicit==true" [ngIfElse]="nonexplicit">
+          <mat-icon svgIcon="alpha-e-box"></mat-icon>
+        </ng-template>
+        <ng-template #nonexplicit>
+          <mat-icon svgIcon="alpha-e-box" style="visibility: hidden;"></mat-icon>
+        </ng-template>
+        {{song.genres[0].name}}&nbsp;&nbsp;{{song.languages[0].name}}
+      </mat-card-content>
+      <button mat-flat-button color="accent">
+        <mat-icon svgIcon="playlist-plus"></mat-icon>
+      </button>
+      <mat-card-actions>
+      </mat-card-actions>
+    </mat-card>
+</mat-list>

frontend/ng-karaoqueue/src/app/song-search/song-search.component.ts

@@ -1,15 +1,40 @@
 import { Component, OnInit } from '@angular/core';
+import { SongServiceService } from "../song-service.service";
+import { Song } from '../models/song.model';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-song-search',
   templateUrl: './song-search.component.html',
-  styleUrls: ['./song-search.component.css']
+  styleUrls: ['./song-search.component.scss']
 })
 export class SongSearchComponent implements OnInit {
 
-  constructor() { }
+  private searchSub$ = new Subject<string>();
+
+  constructor(private songServiceService: SongServiceService) { }
+
+  songs: Array<Song> = new Array<Song>();
+
+  updateSongs(text: string) {
+    this.songServiceService.searchSongByText(text).subscribe(x => {
+      console.log(x);
+      this.songs = x;
+    });
+  }
+
+  applyFilter(filterValue: string) {
+    this.searchSub$.next(filterValue)
+  }
 
   ngOnInit(): void {
+    this.searchSub$.pipe(
+      debounceTime(400),
+      distinctUntilChanged()
+    ).subscribe((filterValue: string) => {
+      this.updateSongs(filterValue);
+    });
   }
 
 }

frontend/ng-karaoqueue/src/app/song-service.service.ts

@@ -1,17 +1,42 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from "@angular/common/http";
 import { Song } from './models/song.model';
+import { Artist } from './models/artist.model';
+import { Genre } from './models/genre.model';
+import { Language } from './models/language.model';
+import { RuntimeConfigLoaderService } from 'runtime-config-loader';
+import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class SongServiceService {
 
+  private api: string;
   constructor(
-    private http: HttpClient
+    private http: HttpClient,
-  ) {}
+    private configSvc: RuntimeConfigLoaderService
-
+  ) {
-  searchSongByText(text:string):Array<Song> {
+    this.api=configSvc.getConfigObjectKey("api");
-      return [new Song()];
   }
+
+  searchSongByText(text: string): Observable<Array<Song>> {
+
+
+    let out = new Array<Song>();
+
+    this.http.get(this.api +"/songs/compl?search="+text).subscribe((data: Observable<JSON>) => {
+      data.forEach(element => {
+        out.push(new Song(element["Title"],new Artist(42,element["Artist"]),element["Id"],element["Duo"],element["Explicit"],42,[new Genre(42,element["Styles"])],[new Language(42, element["Languages"])]));
+      });
+    });
+
+    const observable = new Observable<Array<Song>>( subscriber => {
+      subscriber.next(out);
+    })
+
+
+    return observable;
+  }
+
 }

frontend/ng-karaoqueue/src/assets/config.json

@@ -0,0 +1,3 @@
+{
+  "api":"http://localhost:5000/api"
+}