création liste (#18)

Co-authored-by: Baptiste LYET <[email protected]>

Author: Babali42

src/app/app.component.html

@@ -1,13 +1,13 @@
 <div class="main-container" [ngClass]="{'flex': !isMobileDisplay}">
   <div class="flex column left-menu" *ngIf="!isMobileDisplay">
     <div class="header"> DRUMS<br> PATTERN<br> LIBRARY</div>
-    <div class="flex menu genre mt-40">
+    <div class="flex menu genre mt-40" *ngIf="musicGenres.length != 0">
       <h2>Genre</h2>
       <div class="button pointer" *ngFor="let genre of musicGenres; let i = index;" (click)="selectGenre(i)"
            [ngClass]="{'selected':i==selectedGenreIndex}">{{ genre.label }}
       </div>
     </div>
-    <div class="flex menu mt-40">
+    <div class="flex menu mt-40" *ngIf="musicGenres.length != 0">
       <h2>Sous-genre</h2>
       <div class="button pointer" *ngFor="let subgenre of musicGenres[selectedGenreIndex].subGenres; let i = index;"
            (click)="selectSubGenre(i)" [ngClass]="{'selected':i==selectedSubGenreIndex}">{{ subgenre.label }}
@@ -16,10 +16,10 @@ <h2>Sous-genre</h2>
   </div>
   <div *ngIf="isMobileDisplay">
     <div class="header-mobile">DRUMS PATTERN LIBRARY</div>
-    <div class="flex mobile-menu">
+    <div class="flex mobile-menu" *ngIf="musicGenres.length != 0">
       <a class="item" *ngFor="let genre of musicGenres; let i = index" (click)="selectGenre(i)">{{ genre.label }}</a>
     </div>
-    <div class="flex mobile-menu">
+    <div class="flex mobile-menu" *ngIf="musicGenres.length != 0">
       <a class="item" *ngFor="let subGenre of musicGenres[selectedGenreIndex].subGenres; let i = index"
          (click)="selectSubGenre(i)">{{ subGenre.label }}</a>
     </div>

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<string>;
 
-  constructor(private responsive: BreakpointObserver) {
+  constructor(private responsive: BreakpointObserver, private dataService: DataService) {
     this.fileNameBehaviourSubject = new BehaviorSubject<string>('metal');
   }
 
@@ -45,6 +27,10 @@ export class AppComponent implements OnInit {
       .subscribe(result => {
         this.isMobileDisplay = !result.matches;
       });
+
+    this.dataService.getData<Genre[]>('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);
   }

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<JsonBeat>(fileName, 'beats/').subscribe((result: JsonBeat) => {
         this.beat = Convert.toBeat(result);
         if (this.soundService.isPlaying)
           this.soundService.pause();

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<JsonBeat> {
-    const url = this.apiUrl + fileName + this.fileExtension;
-    return this.http.get<JsonBeat>(url);
+  getData<T>(fileName: string, folder: string | undefined = undefined): Observable<T> {
+    let url = this.apiUrl;
+    if (folder)
+      url += folder;
+    url += fileName + this.fileExtension;
+    return this.http.get<T>(url);
   }
 }

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"
+      }
+    ]
+  }
+]