phillip/karaoqueue
1
0
Fork 0
mirror of https://github.com/PhoenixTwoFive/karaoqueue.git synced 2025-07-04 01:01:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adapt Anngular frontend to karafun terminology

Browse Source
This commit is contained in:
Phillip Kühne
2023-10-03 17:22:39 +00:00
parent 85497a1569
commit 1fa276d8c1
8 changed files with 87 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/ng-karaoqueue/src/app/app.module.ts
View File

@ -46,12 +46,14 @@ import { EntryListingComponent } from './entry-listing/entry-listing.component';
import { SongSearchComponent } from './song-search/song-search.component';
import { debounceTime, distinctUntilChanged } from "rxjs/operators";
import { SongChipComponent } from './song-chip/song-chip.component';
@NgModule({
declarations: [
AppComponent,
EntryListingComponent,
SongSearchComponent
SongSearchComponent,
SongChipComponent
],
imports: [
BrowserModule,

10
frontend/ng-karaoqueue/src/app/models/song.model.ts
View File

@ -4,23 +4,23 @@ import { Artist } from './artist.model';
export class Song {
constructor(title: string, artist: Artist, karafun_id: number, duet: boolean, explicit: boolean, id: number, genres: Array<String>, languages: Array<String>) {
constructor(title: string, artist: Artist, karafun_id: number, duo: boolean, explicit: boolean, id: number, styles: Array<String>, languages: Array<String>) {
this.title=title;
this.artist=artist;
this.karafun_id=karafun_id;
this.duet=duet;
this.duo=duo;
this.explicit=explicit;
this.id=id;
this.genres=genres;
this.styles=styles;
this.languages=languages;
}
title: string;
artist: Artist;
karafun_id: number;
duet: boolean;
duo: boolean;
explicit: boolean;
id: number;
genres: Array<String>;
styles: Array<String>;
languages: Array<String>;
}

36
frontend/ng-karaoqueue/src/app/song-chip/song-chip.component.html Normal file
View File

@ -0,0 +1,36 @@
<mat-card class="result">
<div class="card-left">
<mat-card-title>{{song.artist}} - {{song.title}}</mat-card-title>
<div class="song-info">
<div class="info-icons">
<ng-template [ngIf]="song.duo==1" [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==1" [ngIfElse]="nonexplicit">
<mat-icon svgIcon="alpha-e-box"></mat-icon>
</ng-template>
<ng-template #nonexplicit>
<mat-icon svgIcon="alpha-e-box" class="icon-disabled"></mat-icon>
</ng-template>
</div>
<div class="genre-list">
<mat-icon svgIcon="music-circle"></mat-icon>
<mat-chip-list *ngFor="let style of song.styles">
<mat-chip>{{style}}</mat-chip>
</mat-chip-list>
</div>
<div class="language-list">
<mat-icon svgIcon="account-voice"></mat-icon>
<mat-chip-list *ngFor="let language of song.languages">
<mat-chip>{{language}}</mat-chip>
</mat-chip-list>
</div>
</div>
</div>
<button mat-flat-button color="accent" class="add-button">
<mat-icon svgIcon="playlist-plus"></mat-icon>
</button>
</mat-card>

0
frontend/ng-karaoqueue/src/app/song-chip/song-chip.component.scss Normal file
View File

21
frontend/ng-karaoqueue/src/app/song-chip/song-chip.component.spec.ts Normal file
View File

@ -0,0 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SongChipComponent } from './song-chip.component';
describe('SongChipComponent', () => {
let component: SongChipComponent;
let fixture: ComponentFixture<SongChipComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [SongChipComponent]
});
fixture = TestBed.createComponent(SongChipComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

10
frontend/ng-karaoqueue/src/app/song-chip/song-chip.component.ts Normal file
View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-song-chip',
templateUrl: './song-chip.component.html',
styleUrls: ['./song-chip.component.scss']
})
export class SongChipComponent {
}

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

@ -8,41 +8,6 @@
</div>
<div class="resultcontainer">
<mat-list *ngFor="let song of songs">
<mat-card class="result">
<div class="card-left">
<mat-card-title>{{song.artist}} - {{song.title}}</mat-card-title>
<div class="song-info">
<div class="info-icons">
<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" class="icon-disabled"></mat-icon>
</ng-template>
</div>
<div class="genre-list">
<mat-icon svgIcon="music-circle"></mat-icon>
<mat-chip-list *ngFor="let genre of song.genres">
<mat-chip>{{genre}}</mat-chip>
</mat-chip-list>
</div>
<div class="language-list">
<mat-icon svgIcon="account-voice"></mat-icon>
<mat-chip-list *ngFor="let language of song.languages">
<mat-chip>{{language}}</mat-chip>
</mat-chip-list>
</div>
</div>
</div>
<button mat-flat-button color="accent" class="add-button">
<mat-icon svgIcon="playlist-plus"></mat-icon>
</button>
</mat-card>
</mat-list>
</div>

14
frontend/ng-karaoqueue/src/app/song-service.service.ts
View File

@ -25,11 +25,19 @@ export class SongServiceService {
let out = new Array<Song>();
this.http.get(this.api +"/songs/compl?search="+text).subscribe((data: Observable<JSON>) => {
this.http.get(this.api +"/songs/search?q="+text).subscribe((data: Observable<JSON>) => {
data.forEach(element => {
console.log(element);
out.push(new Song(element["title"],element["artist"],element["karafun_id"],element["duo"],element["explicit"],element["_id"],element["styles"],element["languages"]));
let styles = new Array<String>();
let languages = new Array<String>();
for (let style of element["styles"].split(",")) {
styles.push(style);
}
for (let language of element["languages"].split(",")) {
languages.push(language);
}
out.push(new Song(element["title"],element["artist"],element["karafun_id"],element["duo"],element["explicit"],element["_id"],styles,languages));
});
console.log(out);
});
const observable = new Observable<Array<Song>>( subscriber => {