phillip/karaoqueue
1
0
Fork 0
mirror of https://github.com/PhoenixTwoFive/karaoqueue.git synced 2025-05-20 11:31:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updates to search page

Browse Source
This commit is contained in:
Phillip Kühne 2020-04-15 00:51:26 +02:00
parent 673fde9ee6
commit 578adaf893
4 changed files with 170 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,12 +1,18 @@
<mat-form-field>
<div class="content">
<mat-form-field class="search-input">
<mat-label>Suche...</mat-label>
<input matInput placeholder="Tippe einen Künstler oder Song..."
<mat-icon matSuffix svgIcon="magnify"></mat-icon>
<input type="text" matInput placeholder="Tippe einen Künstler oder Song..."
(keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<div class="resultcontainer">
<mat-list *ngFor="let song of songs">
<mat-card>
<mat-card-title>{{song.artist.name}} - {{song.title}}</mat-card-title>
<mat-card-content>
<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>
@ -17,14 +23,26 @@
<mat-icon svgIcon="alpha-e-box"></mat-icon>
</ng-template>
<ng-template #nonexplicit>
<mat-icon svgIcon="alpha-e-box" style="visibility: hidden;"></mat-icon>
<mat-icon svgIcon="alpha-e-box" class="icon-disabled"></mat-icon>
</ng-template>
{{song.genres[0].name}}&nbsp;&nbsp;{{song.languages[0].name}}
</mat-card-content>
<button mat-flat-button color="accent">
</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-actions>
</mat-card-actions>
</mat-card>
</mat-list>
</div>

119
frontend/ng-karaoqueue/src/app/song-search/song-search.component.scss
View File

@ -0,0 +1,119 @@
.search-input {
width: 95%;
margin-top: 1rem;
}
.add-button {
height: 3rem;
}
.content {
overflow: hidden;
display: flex;
justify-content: center;
}
.resultcontainer {
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.result {
margin-left: auto;
margin-right: auto;
width: 90%;
margin-top: 0.2rem;
display: flex;
align-items: stretch;
justify-content: space-between;
flex-direction: column;
}
.card-left {
display: flex;
flex-direction: column;
width: 100%;
}
.song-info {
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
}
.song-info > * {
margin-right: 0.5rem;
}
.icon-disabled {
opacity: 0.1;
}
.genre-list > mat-icon {
padding-right: 0.25rem;
}
.genre-list mat-chip-list {
margin-right: 0.15rem;
}
.genre-list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
display: flex;
flex-direction: row;
padding-bottom: 0.25rem;
align-items: center;
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 2px,rgba(0,0,0,1) calc(100% - 2px),rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 2px,rgba(0,0,0,1) calc(100% - 2px),rgba(0,0,0,0) 100%);
-ms-overflow-style: none;
}
.language-list > mat-icon {
padding-right: 0.25rem;
}
.language-list mat-chip-list {
margin-right: 0.15rem;
}
.genre-list::-webkit-scrollbar {
width: 0px;
height: 0px;
display: none;
}
.language-list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
display: flex;
flex-direction: row;
padding-bottom: 0.25rem;
align-items: center;
-ms-overflow-style: none;
}
.language-list::-webkit-scrollbar {
display: none;
}
$breakpoint-tablet: 768px;
@media (min-width: $breakpoint-tablet) {
.result {
flex-direction: row;
}
.add-button {
max-height: 100%;
align-self: center;
}
}

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

@ -27,7 +27,7 @@ export class SongServiceService {
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"])]));
out.push(new Song(element["title"],element["artist"],element["karafun_id"],element["duo"],element["explicit"],element["_id"],element["styles"],element["languages"]));
});
});