Suppression des composants par page (#15)

* Suppression des composants par page

* Correction linter

---------

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

src/app/app.component.html

@@ -25,6 +25,6 @@ <h2>Sous-genre</h2>
     </div>
   </div>
   <div class="flex content">
-    <router-outlet></router-outlet>
+    <sequencer [fileNameBehaviourSubject]="fileNameBehaviourSubject"></sequencer>
   </div>
 </div>

src/app/app.component.ts

@@ -3,6 +3,7 @@ import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 import {Subgenre} from './models/subgenre';
 import {Genre} from './models/genre';
 import {Router} from '@angular/router';
+import {BehaviorSubject} from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -32,9 +33,10 @@ export class AppComponent implements OnInit {
       new Subgenre('Psytrance', '/psytrance'),
     ])
   ];
-
+  fileNameBehaviourSubject: BehaviorSubject<string>;
 
   constructor(private responsive: BreakpointObserver, private router: Router) {
+    this.fileNameBehaviourSubject = new BehaviorSubject<string>("metal");
   }
 
   ngOnInit(): void {
@@ -44,26 +46,21 @@ export class AppComponent implements OnInit {
       .subscribe(result => {
         this.isMobileDisplay = !result.matches;
       });
-    this.navigate();
   }
 
   selectGenre(i: number) {
     this.selectedGenreIndex = i;
     this.selectedSubGenreIndex = 0;
-    this.navigate();
-  }
-
-  private navigate() {
-    this.router.navigate([this.musicGenres[this.selectedGenreIndex].subGenres[this.selectedSubGenreIndex].link]).then(
-      () => {
-      },
-      () => {
-      },
-    );
+    this.updateFileName();
   }
 
   selectSubGenre(i: number) {
     this.selectedSubGenreIndex = i;
-    this.navigate();
+    this.updateFileName();
+  }
+
+  private updateFileName() {
+    const fileName = this.musicGenres[this.selectedGenreIndex].subGenres[this.selectedSubGenreIndex].link;
+    this.fileNameBehaviourSubject.next(fileName);
   }
 }

src/app/app.module.ts

@@ -2,40 +2,22 @@ import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
-import {TechnoComponent} from './pages/techno/techno.component';
-import {MetalComponent} from './pages/metal/metal.component';
 import {provideRouter} from '@angular/router';
-import {routes} from '../app.route';
-import {SequencerComponent} from "./components/sequencer/sequencer.component";
-import {HttpClientModule} from "@angular/common/http";
-import { TrackComponent } from './components/sequencer/track/track.component';
-import { RockComponent } from './pages/rock/rock.component';
-import { RockVariationComponent } from './pages/rock-variation/rock-variation.component';
-import { HalfTimeGrooveComponent } from './pages/half-time-groove/half-time-groove.component';
-import { DrumNBassComponent } from './pages/drum-n-bass/drum-n-bass.component';
-import { GarageComponent } from './pages/garage/garage.component';
-import { PsytranceComponent } from './pages/psytrance/psytrance.component';
+import {SequencerComponent} from './components/sequencer/sequencer.component';
+import {HttpClientModule} from '@angular/common/http';
+import {TrackComponent} from './components/sequencer/track/track.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    TechnoComponent,
-    MetalComponent,
     SequencerComponent,
     TrackComponent,
-    RockComponent,
-    RockVariationComponent,
-    HalfTimeGrooveComponent,
-    DrumNBassComponent,
-    GarageComponent,
-    PsytranceComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule
   ],
-  providers: [provideRouter(routes)],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/components/sequencer/sequencer.component.ts

@@ -1,8 +1,9 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {DataService} from "../../services/data.service";
-import {Convert, JsonBeat} from "../../models/primary/jsonBeat";
-import {SoundService} from "../../services/sound.service";
-import {Beat} from "../../models/beat";
+import {DataService} from '../../services/data.service';
+import {Convert, JsonBeat} from '../../models/primary/jsonBeat';
+import {SoundService} from '../../services/sound.service';
+import {Beat} from '../../models/beat';
+import {BehaviorSubject} from 'rxjs';
 
 @Component({
   selector: 'sequencer',
@@ -11,27 +12,32 @@ import {Beat} from "../../models/beat";
 })
 export class SequencerComponent implements OnInit {
 
-  @Input() fileName: string = "";
-  beat: Beat = new Beat("", 120, []);
+  @Input() fileNameBehaviourSubject: BehaviorSubject<string>
+  beat: Beat = new Beat('', 120, []);
 
   constructor(private dataService: DataService, public soundService: SoundService) {
+    this.fileNameBehaviourSubject = new BehaviorSubject<string>("metal");
   }
 
   ngOnInit(): void {
-    this.dataService.getData(this.fileName).subscribe((result: JsonBeat) => {
-      this.beat = Convert.toBeat(result);
-      if(this.soundService.isPlaying)
-        this.soundService.pause();
-      this.soundService.reset();
-      this.soundService.setBpm(this.beat.bpm);
-      this.soundService.setTracks(this.beat.tracks);
+    this.fileNameBehaviourSubject.subscribe(fileName => {
+      this.dataService.getData(fileName).subscribe((result: JsonBeat) => {
+        this.beat = Convert.toBeat(result);
+        if (this.soundService.isPlaying)
+          this.soundService.pause();
+        this.soundService.reset();
+        this.soundService.setBpm(this.beat.bpm);
+        this.soundService.setTracks(this.beat.tracks);
+      });
     });
   }
 
   toggleIsPlaying(): void {
     this.soundService.playPause().then(
-      () => {},
-      () => {}
+      () => {
+      },
+      () => {
+      }
     );
   }
 }