feat: Simulate vehicle travel

application/frontend/src/app/core/actions/index.ts

@@ -38,6 +38,7 @@ import * as ShipmentModelActions from './shipment-model.actions';
 import * as ShipmentRouteActions from './shipment-route.actions';
 import * as ShipmentsMetadataActions from './shipments-metadata.actions';
 import * as StorageApiActions from './storage-api.actions';
+import * as TravelSimulatorActions from '../actions/travel-simulator.actions';
 import * as UIActions from './ui.actions';
 import * as UndoRedoActions from './undo-redo.actions';
 import * as UploadActions from './upload.actions';
@@ -71,6 +72,7 @@ export {
   ShipmentModelActions,
   ShipmentRouteActions,
   StorageApiActions,
+  TravelSimulatorActions,
   UIActions,
   UndoRedoActions,
   UploadActions,

application/frontend/src/app/core/actions/travel-simulator.actions.ts

@@ -0,0 +1,24 @@
+/*
+Copyright 2024 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { createAction, props } from '@ngrx/store';
+
+export const setTime = createAction('[Travel Simulator] Set time', props<{ time: number }>());
+
+export const setActive = createAction(
+  '[Travel Simulator] Set active',
+  props<{ active: boolean }>()
+);

application/frontend/src/app/core/containers/app/app.component.ts

@@ -79,7 +79,9 @@ export class AppComponent {
       'navigate_before',
       'navigate_next',
       'open_in_new',
+      'pause',
       'pdf',
+      'play',
       'pickup',
       'route',
       'satellite',

application/frontend/src/app/core/containers/map/map.component.html

@@ -20,3 +20,4 @@
   (activeChange)="onToggleSelectMapItems($event)">
 </app-select-map-items-button>
 <app-zoom-home-button (zoomToHome)="onZoomToHome()" [disabled]="!bounds"></app-zoom-home-button>
+<app-travel-simulator *ngIf="travelSimulatorVisible$ | async"></app-travel-simulator>

application/frontend/src/app/core/containers/map/map.component.spec.ts

@@ -22,6 +22,7 @@ import { MockInfoWindowService, MockLayerService } from 'src/test/service-mocks'
 import * as fromConfig from '../../selectors/config.selectors';
 import * as fromMap from '../../selectors/map.selectors';
 import * as fromUI from '../../selectors/ui.selectors';
+import TravelSimulatorSelectors from '../../selectors/travel-simulator.selectors';
 import {
   DepotLayer,
   MapService,
@@ -81,6 +82,12 @@ class MockPostSolveMapLegendComponent {
   @Output() setLayerVisibility = new EventEmitter<{ layerId: MapLayerId; visible: boolean }>();
 }
 
+@Component({
+  selector: 'app-travel-simulator',
+  template: '',
+})
+class MockTravelSimulatorComponent {}
+
 describe('MapComponent', () => {
   let component: MapComponent;
   let fixture: ComponentFixture<MapComponent>;
@@ -99,6 +106,7 @@ describe('MapComponent', () => {
         MockMapWrapperComponent,
         MockZoomHomeButtonComponent,
         MockPostSolveMapLegendComponent,
+        MockTravelSimulatorComponent,
         MapComponent,
       ],
       providers: [
@@ -119,6 +127,7 @@ describe('MapComponent', () => {
             { selector: fromUI.selectPage, value: null },
             { selector: fromUI.selectHasMap, value: false },
             { selector: fromConfig.selectTimezoneOffset, value: 0 },
+            { selector: TravelSimulatorSelectors.selectTravelSimulatorVisible, value: false },
           ],
         }),
       ],

application/frontend/src/app/core/containers/map/map.component.ts

@@ -45,6 +45,7 @@ import * as fromPostSolve from '../../selectors/post-solve.selectors';
 import * as fromPreSolve from '../../selectors/pre-solve.selectors';
 import * as fromUI from '../../selectors/ui.selectors';
 import { selectPage } from '../../selectors/ui.selectors';
+import TravelSimulatorSelectors from '../../selectors/travel-simulator.selectors';
 import {
   MATERIAL_COLORS,
   VehicleInfoWindowService,
@@ -71,6 +72,7 @@ export class MapComponent implements OnInit, OnDestroy {
   selectionFilterActive$: Observable<boolean>;
   timezoneOffset$: Observable<number>;
   layers$: Observable<{ [id in MapLayerId]?: MapLayer }>;
+  travelSimulatorVisible$: Observable<boolean>;
 
   get bounds(): google.maps.LatLngBounds {
     return this.mapService.bounds;
@@ -100,6 +102,9 @@ export class MapComponent implements OnInit, OnDestroy {
     this.mapSelectionToolsVisible$ = this.store.pipe(select(selectMapSelectionToolsVisible));
     this.selectionFilterActive$ = this.store.pipe(select(selectSelectionFilterActive));
     this.layers$ = this.store.pipe(select(fromMap.selectPostSolveMapLayers));
+    this.travelSimulatorVisible$ = this.store.pipe(
+      select(TravelSimulatorSelectors.selectTravelSimulatorVisible)
+    );
 
     this.subscriptions.push(
       this.store

application/frontend/src/app/core/containers/travel-simulator/travel-simulator.component.html

@@ -0,0 +1,30 @@
+<div class="d-flex align-items-center">
+  <mat-slide-toggle [checked]="active$ | async" (change)="onToggleActive($event)" color="primary">
+    Travel simulator
+  </mat-slide-toggle>
+  <div *ngIf="active$ | async" class="d-flex align-items-center simulator-contents">
+    <mat-divider [vertical]="true" class="divider"></mat-divider>
+    <button
+      mat-mini-fab
+      color="primary"
+      class="play-button"
+      type="button"
+      [disabled]="!(active$ | async)"
+      (click)="animating ? onEndAnimate() : onBeginAnimate()">
+      <mat-icon [svgIcon]="animating ? 'pause' : 'play'"></mat-icon>
+    </button>
+    <mat-divider [vertical]="true" class="divider"></mat-divider>
+    <div class="d-flex align-items-center speed-container">
+      <div>Speed:</div>
+      <mat-radio-group
+        aria-label="Animation speed"
+        color="primary"
+        [(ngModel)]="animationSpeedMultiple">
+        <mat-radio-button [value]="0.5">0.5x</mat-radio-button>
+        <mat-radio-button [value]="1">1x</mat-radio-button>
+        <mat-radio-button [value]="3">3x</mat-radio-button>
+        <mat-radio-button [value]="5">5x</mat-radio-button>
+      </mat-radio-group>
+    </div>
+  </div>
+</div>

application/frontend/src/app/core/containers/travel-simulator/travel-simulator.component.scss

@@ -0,0 +1,42 @@
+@import '../../../../styles/variables.scss';
+
+:host {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  padding: 10px;
+}
+
+.simulator-toggle {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.simulator-contents {
+  margin-left: 20px;
+  gap: 20px;
+}
+
+.divider {
+  height: 24px;
+}
+
+.play-button {
+  box-shadow: none;
+  height: 24px;
+  width: 24px;
+
+  .mat-button-wrapper {
+    position: relative;
+    top: -4px;
+  }
+}
+
+.speed-container {
+  gap: 10px;
+
+  mat-radio-group {
+    display: flex;
+    gap: 10px;
+  }
+}

application/frontend/src/app/core/containers/travel-simulator/travel-simulator.component.spec.ts

@@ -0,0 +1,51 @@
+/*
+Copyright 2024 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TravelSimulatorComponent } from './travel-simulator.component';
+import { provideMockStore } from '@ngrx/store/testing';
+import ShipmentModelSelectors from '../../selectors/shipment-model.selectors';
+import TravelSimulatorSelectors from '../../selectors/travel-simulator.selectors';
+
+describe('TravelSimulatorComponent', () => {
+  let component: TravelSimulatorComponent;
+  let fixture: ComponentFixture<TravelSimulatorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TravelSimulatorComponent],
+      providers: [
+        provideMockStore({
+          selectors: [
+            { selector: ShipmentModelSelectors.selectGlobalStartTime, value: 0 },
+            { selector: ShipmentModelSelectors.selectGlobalEndTime, value: 0 },
+            { selector: TravelSimulatorSelectors.selectTime, value: 0 },
+            { selector: TravelSimulatorSelectors.selectActive, value: false },
+          ],
+        }),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TravelSimulatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

application/frontend/src/app/core/containers/travel-simulator/travel-simulator.component.ts

@@ -0,0 +1,109 @@
+/*
+Copyright 2024 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { Store, select } from '@ngrx/store';
+import Long from 'long';
+import { Observable, Subscription, interval } from 'rxjs';
+import ShipmentModelSelectors from '../../selectors/shipment-model.selectors';
+import { map } from 'rxjs/operators';
+import { setActive, setTime } from '../../actions/travel-simulator.actions';
+import TravelSimulatorSelectors from '../../selectors/travel-simulator.selectors';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { formatSecondsDate } from 'src/app/util/time-translation';
+
+@Component({
+  selector: 'app-travel-simulator',
+  templateUrl: './travel-simulator.component.html',
+  styleUrls: ['./travel-simulator.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TravelSimulatorComponent implements OnInit, OnDestroy {
+  @HostBinding('class.app-map-panel') readonly mapPanel = true;
+
+  readonly animationRateMs: number = 33;
+  readonly animationStepSize: number = 2;
+
+  get animating(): boolean {
+    return this.animationTimer$?.closed === false;
+  }
+
+  active$: Observable<boolean>;
+  animationTimer$: Subscription;
+  animationSpeedMultiple = 1;
+  end$: Subscription;
+  end: number;
+  time$: Subscription;
+  time: number;
+
+  formatSecondsDate = formatSecondsDate;
+
+  constructor(private store: Store, private detectorRef: ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    this.end$ = this.store
+      .select(ShipmentModelSelectors.selectGlobalEndTime)
+      .pipe(map((value) => Long.fromValue(value).toNumber()))
+      .subscribe((end) => {
+        this.end = end;
+        this.detectorRef.markForCheck();
+      });
+
+    this.time$ = this.store.select(TravelSimulatorSelectors.selectTime).subscribe((time) => {
+      this.time = time;
+      this.detectorRef.markForCheck();
+    });
+
+    this.active$ = this.store.pipe(select(TravelSimulatorSelectors.selectActive));
+  }
+
+  ngOnDestroy(): void {
+    this.onEndAnimate();
+    this.time$.unsubscribe();
+    this.end$.unsubscribe();
+  }
+
+  onBeginAnimate(): void {
+    this.animationTimer$ = interval(this.animationRateMs).subscribe((_value) => {
+      const newTime = this.time + this.animationStepSize * this.animationSpeedMultiple;
+      if (newTime >= this.end) {
+        this.onEndAnimate();
+        return;
+      }
+      this.store.dispatch(setTime({ time: newTime }));
+    });
+  }
+
+  onEndAnimate(): void {
+    this.animationTimer$?.unsubscribe();
+    this.detectorRef.markForCheck();
+  }
+
+  onToggleActive(event: MatSlideToggleChange): void {
+    this.store.dispatch(setActive({ active: event.checked }));
+
+    if (!event.checked) {
+      this.onEndAnimate();
+    }
+  }
+}

application/frontend/src/app/core/core.module.ts

@@ -98,6 +98,7 @@ import { TransitionAttributesDialogComponent } from './components/transition-att
 import { PrecedenceRulesDialogComponent } from './components/precedence-rules-dialog/precedence-rules-dialog.component';
 import { ShipmentModelSettingsComponent } from './containers/shipment-model-settings/shipment-model-settings.component';
 import { PostSolveMapLegendComponent } from './components/post-solve-map-legend/post-solve-map-legend.component';
+import { TravelSimulatorComponent } from './containers/travel-simulator/travel-simulator.component';
 
 export const COMPONENTS = [
   BaseDocumentationDialogComponent,
@@ -155,6 +156,7 @@ export const CONTAINERS = [
   ShipmentsControlBarComponent,
   ShipmentsKpisComponent,
   StorageApiSaveLoadDialogComponent,
+  TravelSimulatorComponent,
   UploadDialogComponent,
   ValidationResultDialogComponent,
   VehicleInfoWindowComponent,