Add speed controls

googlemaps · Mar 29, 2024 · bcc1bb1 · bcc1bb1
1 parent ba153b8
commit bcc1bb1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/...ication/frontend/src/app/core/containers/travel-simulator/travel-simulator.component.html b/...ication/frontend/src/app/core/containers/travel-simulator/travel-simulator.component.html
@@ -19,4 +19,12 @@
     (click)="!animationTimer$ || animationTimer$.closed ? onBeginAnimate() : onEndAnimate()">
     {{ !animationTimer$ || animationTimer$.closed ? 'Animate routes' : 'Stop animating routes' }}
   </button>
+  <mat-form-field appearance="fill">
+    <mat-label>Speed</mat-label>
+    <mat-select [(value)]="animationSpeedMultiple">
+      <mat-option [value]="1"> Slow </mat-option>
+      <mat-option [value]="3"> Normal </mat-option>
+      <mat-option [value]="6"> Fast </mat-option>
+    </mat-select>
+  </mat-form-field>
 </div>
diff --git a/application/frontend/src/app/core/containers/travel-simulator/travel-simulator.component.ts b/application/frontend/src/app/core/containers/travel-simulator/travel-simulator.component.ts
@@ -37,6 +37,7 @@ export class TravelSimulatorComponent implements OnInit, OnDestroy {
   timezoneOffset: number;
   valueChanged = new Subject<number>();
   animationTimer$: Subscription;
+  animationSpeedMultiple = 3;
 
   formatSecondsDate = formatSecondsDate;
 
@@ -80,12 +81,12 @@ export class TravelSimulatorComponent implements OnInit, OnDestroy {
   onBeginAnimate(): void {
     this.timeSlider.disabled = true;
     this.animationTimer$ = interval(100).subscribe((_value) => {
-      const newTime = this.timeSlider.value + 60;
+      const newTime = this.timeSlider.value + 60 * this.animationSpeedMultiple;
       if (newTime > this.timeSlider.max) {
         this.onEndAnimate();
         return;
       }
-      this.valueChanged.next(this.timeSlider.value + 60);
+      this.valueChanged.next(newTime);
     });
   }