From 60e0db121cff4e75d88435acda0cc9d460c5c0d6 Mon Sep 17 00:00:00 2001 From: Baptiste LYET Date: Sat, 2 Mar 2024 22:45:57 +0100 Subject: [PATCH] =?UTF-8?q?cr=C3=A9ation=20liste?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 8 +-- src/app/app.component.ts | 30 +++-------- .../sequencer/sequencer.component.ts | 2 +- src/app/services/data.service.ts | 21 ++++---- src/assets/genres.json | 54 +++++++++++++++++++ 5 files changed, 79 insertions(+), 36 deletions(-) create mode 100644 src/assets/genres.json diff --git a/src/app/app.component.html b/src/app/app.component.html index 9607b06..5f63e54 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,13 +1,13 @@
DRUMS
PATTERN
LIBRARY
-
+

Genre

{{ genre.label }}
-
+

Sous-genre

{{ subgenre.label }} @@ -16,10 +16,10 @@

Sous-genre

DRUMS PATTERN LIBRARY
-
+
{{ genre.label }}
-
+
{{ subGenre.label }}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9ddb4bd..cd2f577 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,8 +1,8 @@ import {Component, OnInit} from '@angular/core'; import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout'; -import {Subgenre} from './models/subgenre'; import {Genre} from './models/genre'; import {BehaviorSubject} from 'rxjs'; +import {DataService} from './services/data.service'; @Component({ selector: 'app-root', @@ -13,28 +13,10 @@ export class AppComponent implements OnInit { isMobileDisplay: boolean = true; selectedGenreIndex: number = 0; selectedSubGenreIndex: number = 0; - musicGenres: Genre[] = [ - new Genre('Metal', - [ - new Subgenre('Metal', 'metal'), - new Subgenre('Rock', 'rock-beat'), - new Subgenre('Rock variation', 'rock-beat-variation'), - new Subgenre('Half time groove', 'half-time-groove'), - ]), - new Genre('Techno', [ - new Subgenre('Basique', 'techno'), - ]), - new Genre('Garage', [ - new Subgenre('Drum & Bass', 'drum-n-bass'), - new Subgenre('Garage - 2 step', 'garage'), - ]), - new Genre('Trance', [ - new Subgenre('Psytrance', 'psytrance'), - ]) - ]; + musicGenres: Genre[] = []; fileNameBehaviourSubject: BehaviorSubject; - constructor(private responsive: BreakpointObserver) { + constructor(private responsive: BreakpointObserver, private dataService: DataService) { this.fileNameBehaviourSubject = new BehaviorSubject('metal'); } @@ -45,6 +27,10 @@ export class AppComponent implements OnInit { .subscribe(result => { this.isMobileDisplay = !result.matches; }); + + this.dataService.getData('genres').subscribe((result: Genre[]) => { + this.musicGenres = result; + }); } selectGenre(i: number) { @@ -58,7 +44,7 @@ export class AppComponent implements OnInit { this.updateFileName(); } - private updateFileName() { + updateFileName() { const fileName = this.musicGenres[this.selectedGenreIndex].subGenres[this.selectedSubGenreIndex].fileName; this.fileNameBehaviourSubject.next(fileName); } diff --git a/src/app/components/sequencer/sequencer.component.ts b/src/app/components/sequencer/sequencer.component.ts index 8ea1033..ec42cd0 100644 --- a/src/app/components/sequencer/sequencer.component.ts +++ b/src/app/components/sequencer/sequencer.component.ts @@ -21,7 +21,7 @@ export class SequencerComponent implements OnInit { ngOnInit(): void { this.fileNameBehaviourSubject.subscribe(fileName => { - this.dataService.getData(fileName).subscribe((result: JsonBeat) => { + this.dataService.getData(fileName, 'beats/').subscribe((result: JsonBeat) => { this.beat = Convert.toBeat(result); if (this.soundService.isPlaying) this.soundService.pause(); diff --git a/src/app/services/data.service.ts b/src/app/services/data.service.ts index 0cdff17..85193dd 100644 --- a/src/app/services/data.service.ts +++ b/src/app/services/data.service.ts @@ -1,19 +1,22 @@ -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { Observable } from 'rxjs'; -import {JsonBeat} from "../models/primary/jsonBeat"; +import {Injectable} from '@angular/core'; +import {HttpClient} from '@angular/common/http'; +import {Observable} from 'rxjs'; @Injectable({ providedIn: 'root' }) export class DataService { - private apiUrl = 'assets/beats/'; + private apiUrl = 'assets/'; private fileExtension = '.json'; - constructor(private http: HttpClient) { } + constructor(private http: HttpClient) { + } - getData(fileName: string): Observable { - const url = this.apiUrl + fileName + this.fileExtension; - return this.http.get(url); + getData(fileName: string, folder: string | undefined = undefined): Observable { + let url = this.apiUrl; + if (folder) + url += folder; + url += fileName + this.fileExtension; + return this.http.get(url); } } diff --git a/src/assets/genres.json b/src/assets/genres.json new file mode 100644 index 0000000..34db3cf --- /dev/null +++ b/src/assets/genres.json @@ -0,0 +1,54 @@ +[ + { + "label": "Metal", + "subGenres": [ + { + "label": "Metal", + "fileName": "metal" + }, + { + "label": "Rock", + "fileName": "rock-beat" + }, + { + "label": "Rock variation", + "fileName": "rock-beat-variation" + }, + { + "label": "Half time groove", + "fileName": "half-time-groove" + } + ] + }, + { + "label": "Techno", + "subGenres" : [ + { + "label": "4 on the floor", + "fileName": "techno" + } + ] + }, + { + "label": "Garage", + "subGenres" : [ + { + "label": "2 Step", + "fileName": "garage" + }, + { + "label": "Drum & Bass", + "fileName": "drum-n-bass" + } + ] + }, + { + "label": "Trance", + "subGenres" : [ + { + "label": "Psytrance", + "fileName": "psytrance" + } + ] + } +]