feat(trip-planner): Allow to select different route profile

hslayers · Jun 12, 2024 · 3963e7f · 3963e7f
1 parent 85e9fe5
commit 3963e7f
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 7 deletions.
diff --git a/projects/hslayers/assets/locales/cs.json b/projects/hslayers/assets/locales/cs.json
@@ -1042,14 +1042,26 @@
   "TRIP_PLANNER": {
     "clearWaypoints": "Vyčistit body trasy",
     "missingAuth": "Přístup k navigační službě nepovolen",
-    "noRoutablePoint": "Nebyl nalezen směrovatelný bod trasy",
+    "noRoutablePoint": "Trasa mezi zadanými body nebyla nalezena",
+    "profiles": {
+      "driving-car": "automobil osobní",
+      "driving-hgv": "automobil nákladní",
+      "cycling-regular": "jízdní kolo běžné",
+      "cycling-road": "jízdní kolo silniční",
+      "cycling-mountain": "jízdní kolo horské",
+      "cycling-electric": "jízdní elektrokolo",
+      "foot-walking": "pěší - běžná chůze",
+      "foot-hiking": "pěší - turistika",
+      "wheelchair": "invalidní vozík"
+    },
     "removeWaypoint": "Odebrat bod trasy",
     "routerLayer": "Vrstva s trasou",
     "serviceDown": "Navigační služba zdá se nefunguje. Je nám líto!",
     "totalDistance": "Celková vzdálenost",
     "travelRoute": "Trasa výletu",
     "waypointDrawingHint": "Klikněte prosím do mapy pro přidání bodů trasy",
     "waypointLayer": "Vrstva s body trasy",
-    "waypoints": "Body trasy"
+    "waypoints": "Body trasy",
+    "selectProfile": "Vyberte způsob dopravy"
   }
 }
diff --git a/projects/hslayers/assets/locales/en.json b/projects/hslayers/assets/locales/en.json
@@ -1042,14 +1042,15 @@
   "TRIP_PLANNER": {
     "clearWaypoints": "Clear waypoints",
     "missingAuth": "Routing service not authorized",
-    "noRoutablePoint": "No routable point found",
+    "noRoutablePoint": "No route between waypoints could be found",
     "removeWaypoint": "Remove waypoint",
     "routerLayer": "Route layer",
     "serviceDown": "Navigation service seems to be down. We are sorry!",
     "totalDistance": "Total distance",
     "travelRoute": "Travel route",
     "waypointDrawingHint": "Please click on map to add waypoints",
     "waypointLayer": "Waypoint layer",
-    "waypoints": "Waypoints"
+    "waypoints": "Waypoints",
+    "selectProfile": "Select transportation mode"
   }
 }
diff --git a/projects/hslayers/components/trip-planner/ors-profiles.const.ts b/projects/hslayers/components/trip-planner/ors-profiles.const.ts
@@ -0,0 +1,13 @@
+export const profiles = [
+  'driving-car',
+  'driving-hgv',
+  'cycling-regular',
+  'cycling-road',
+  'cycling-mountain',
+  'cycling-electric',
+  'foot-walking',
+  'foot-hiking',
+  'wheelchair',
+] as const;
+
+export type RouteProfile = (typeof profiles)[number];
diff --git a/projects/hslayers/components/trip-planner/public-api.ts b/projects/hslayers/components/trip-planner/public-api.ts
@@ -1,4 +1,6 @@
 export * from './layer-selector.component';
+export * from './ors-profiles.const';
+export * from './route-profile-selector.component';
 export * from './trip-planner.component';
 export * from './trip-planner.module';
 export * from './trip-planner.service';
diff --git a/projects/hslayers/components/trip-planner/route-profile-selector.component.html b/projects/hslayers/components/trip-planner/route-profile-selector.component.html
@@ -0,0 +1,21 @@
+<div class="flex-row w-100 m-auto justify-content-center align-items-center" style="display: flex">
+  <p class="m-0 p-0 flex-fill text-primary">{{'TRIP_PLANNER.selectProfile' | translateHs}}:</p>
+  <div ngbDropdown placement="bottom" style="max-width: 50%">
+    <button type="button" ngbDropdownToggle
+      class="btn btn-sm rounded-0 hs-toolbar-button d-flex align-items-center mw-100" aria-haspopup="true"
+      (click)="profilesExpanded = !profilesExpanded"
+      [attr.aria-expanded]="profilesExpanded">
+      <div class="text-truncate" *ngIf="selectedProfile !== undefined">
+        {{selectedProfile | translateHs : {module: 'TRIP_PLANNER.profiles'} }}
+      </div>
+    </button>
+    <div ngbDropdownMenu [ngClass]="{'show': profilesExpanded}" style="transform: translateX(25%); width: 15em">
+      <div class="d-flex align-items-center w-100 flex-column">
+        <a class="dropdown-item text-truncate" *ngFor="let profile of hsTripPlannerService.orsProfiles"
+          data-toggle="tooltip" [title]="profile | translateHs : {module: 'TRIP_PLANNER.profiles'}"
+          (click)="hsTripPlannerService.selectProfile(profile); profilesExpanded = false">{{profile |
+          translateHs : {module: 'TRIP_PLANNER.profiles'} }}</a>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/projects/hslayers/components/trip-planner/route-profile-selector.component.ts b/projects/hslayers/components/trip-planner/route-profile-selector.component.ts
@@ -0,0 +1,15 @@
+import {Component, Input} from '@angular/core';
+
+import {HsTripPlannerService} from './trip-planner.service';
+import {RouteProfile} from './ors-profiles.const';
+
+@Component({
+  selector: 'hs-trip-planner-profile-selector',
+  templateUrl: './route-profile-selector.component.html',
+})
+export class HsTripPlannerProfileSelectorComponent {
+  @Input() selectedProfile: RouteProfile;
+  profilesExpanded: boolean;
+
+  constructor(public hsTripPlannerService: HsTripPlannerService) {}
+}
diff --git a/projects/hslayers/components/trip-planner/trip-planner.component.html b/projects/hslayers/components/trip-planner/trip-planner.component.html
@@ -8,6 +8,7 @@
     <hs-trip-planner-layer-selector usage="waypoints" [label]="'TRIP_PLANNER.waypointLayer' | translateHs"
       [selectedWrapper]="HsTripPlannerService.selectedLayerWrapper.waypoints">
     </hs-trip-planner-layer-selector>
+    <hs-trip-planner-profile-selector [selectedProfile]="HsTripPlannerService.selectedProfile"></hs-trip-planner-profile-selector>
 
     <div *ngFor="let waypoint of HsTripPlannerService.waypoints" class="d-flex flex-row">
       <div class="p-1 flex-grow-1">

diff --git a/projects/hslayers/components/trip-planner/trip-planner.module.ts b/projects/hslayers/components/trip-planner/trip-planner.module.ts
@@ -9,11 +9,16 @@ import {
 } from 'hslayers-ng/common/panels';
 import {HsTripPlannerComponent} from './trip-planner.component';
 import {HsTripPlannerLayerSelectorComponent} from './layer-selector.component';
+import {HsTripPlannerProfileSelectorComponent} from './route-profile-selector.component';
 import {TranslateCustomPipe} from 'hslayers-ng/services/language';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  declarations: [HsTripPlannerComponent, HsTripPlannerLayerSelectorComponent],
+  declarations: [
+    HsTripPlannerComponent,
+    HsTripPlannerLayerSelectorComponent,
+    HsTripPlannerProfileSelectorComponent,
+  ],
   imports: [
     FormsModule,
     CommonModule,
@@ -22,6 +27,10 @@ import {TranslateCustomPipe} from 'hslayers-ng/services/language';
     HsPanelHeaderComponent,
     NgbDropdownModule,
   ],
-  exports: [HsTripPlannerComponent, HsTripPlannerLayerSelectorComponent],
+  exports: [
+    HsTripPlannerComponent,
+    HsTripPlannerLayerSelectorComponent,
+    HsTripPlannerProfileSelectorComponent,
+  ],
 })
 export class HsTripPlannerModule {}
diff --git a/projects/hslayers/components/trip-planner/trip-planner.service.ts b/projects/hslayers/components/trip-planner/trip-planner.service.ts
@@ -20,6 +20,7 @@ import {HsMapService} from 'hslayers-ng/services/map';
 import {HsShareUrlService} from 'hslayers-ng/services/share';
 import {HsToastService} from 'hslayers-ng/common/toast';
 import {HsUtilsService} from 'hslayers-ng/services/utils';
+import {RouteProfile, profiles} from './ors-profiles.const';
 import {getHighlighted} from 'hslayers-ng/common/extensions';
 import {getTitle, setTitle} from 'hslayers-ng/common/extensions';
 
@@ -51,6 +52,7 @@ export class HsTripPlannerService {
   waypointRouteStyle;
   waypoints: Waypoint[] = [];
   trip: any = {};
+  orsProfiles = profiles;
   movable_features = new Collection<Feature<Geometry>>();
   modify: Modify;
   waypointSource: VectorSource<Feature<Point>>;
@@ -63,6 +65,7 @@ export class HsTripPlannerService {
     route?: {layer: VectorLayer<Feature>; title: string};
     waypoints?: {layer: VectorLayer<Feature>; title: string};
   } = {};
+  selectedProfile: RouteProfile = profiles[0];
 
   constructor(
     public HsMapService: HsMapService,
@@ -259,6 +262,14 @@ export class HsTripPlannerService {
     }
   }
 
+  async selectProfile(profile: RouteProfile): Promise<void> {
+    this.selectedProfile = profile;
+    for (const wp of this.waypoints) {
+      this.removeRoutesForWaypoint(wp);
+    }
+    await this.calculateRoutes();
+  }
+
   getTextOnFeature(feature: Feature<Geometry>): string {
     let tmp = '';
     const wp: Waypoint = getWaypoint(feature);
@@ -429,7 +440,7 @@ export class HsTripPlannerService {
         const wpt = this.waypoints[i + 1];
         wpt.loading = true;
         const url = this.HsUtilsService.proxify(
-          'https://api.openrouteservice.org/v2/directions/driving-car/geojson',
+          `https://api.openrouteservice.org/v2/directions/${this.selectedProfile}/geojson`,
         );
         const response = await lastValueFrom(
           this.$http