💄 Google Maps Trip navigation, 💄 Trip: table menu on mobile

src/src/app/components/trip/trip.component.html

@@ -54,15 +54,23 @@
       </div>
 
       <div class="flex items-center gap-2 print:hidden">
+        <div class="hidden md:flex items-center gap-2">
           <p-button
             [icon]="tableExpandableMode ? 'pi pi-arrow-up-right-and-arrow-down-left-from-center' : 'pi pi-arrow-down-left-and-arrow-up-right-to-center'"
             (click)="tableExpandableMode = !tableExpandableMode" text />
           <div class="border-l border-solid border-gray-700 h-4"></div>
+          <p-button icon="pi pi-car" (click)="tripToNavigation()" text />
           <p-button icon="pi pi-directions" [severity]="tripMapAntLayerDayID == -1 ? 'help' : 'primary'"
             (click)="toggleTripDaysHighlight()" text />
           <p-button icon="pi pi-print" (click)="printTable()" text />
           <div class="border-l border-solid border-gray-700 h-4"></div>
           <p-button icon="pi pi-ellipsis-v" [disabled]="trip?.archived" (click)="addItems()" text />
+        </div>
+
+        <div class="flex md:hidden items-center">
+          <p-button (click)="menuTripTableActions.toggle($event)" severity="secondary" text icon="pi pi-ellipsis-h" />
+          <p-menu #menuTripTableActions [model]="menuTripTableActionsItems" appendTo="body" [popup]="true" />
+        </div>
         <p-button icon="pi pi-plus" [disabled]="trip?.archived" (click)="addItem()" text />
       </div>
     </div>
@@ -105,9 +113,9 @@
           <td class="font-mono text-sm">{{ tripitem.time }}</td>
           <td class="relative max-w-60 truncate">
             <div class="relative">
-              {{ tripitem.text }}
               @if (tripitem.status) {<div class="block xl:hidden absolute top-0 -left-1.5 size-1.5 rounded-full"
                 [style.background]="tripitem.status.color"></div>}
+              {{ tripitem.text }}
             </div>
           </td>
           <td class="relative">

src/src/app/components/trip/trip.component.ts

@@ -118,6 +118,41 @@ export class TripComponent implements AfterViewInit {
       ],
     },
   ];
+  readonly menuTripTableActionsItems: MenuItem[] = [
+    {
+      label: "Actions",
+      items: [
+        {
+          label: "Directions",
+          icon: "pi pi-directions",
+          command: () => {
+            this.toggleTripDaysHighlight();
+          },
+        },
+        {
+          label: "Navigation",
+          icon: "pi pi-car",
+          command: () => {
+            this.tripToNavigation();
+          },
+        },
+        {
+          label: "Expand / Group",
+          icon: "pi pi-arrow-down-left-and-arrow-up-right-to-center",
+          command: () => {
+            this.tableExpandableMode = !this.tableExpandableMode;
+          },
+        },
+        {
+          label: "Print",
+          icon: "pi pi-print",
+          command: () => {
+            this.printTable();
+          },
+        },
+      ],
+    },
+  ];
   readonly menuTripDayActionsItems: MenuItem[] = [
     {
       label: "Actions",
@@ -223,7 +258,7 @@ export class TripComponent implements AfterViewInit {
     this.selectedItem = undefined;
     setTimeout(() => {
       window.print();
-    }, 30);
+    }, 100);
   }
 
   sortTripDays() {
@@ -311,7 +346,16 @@ export class TripComponent implements AfterViewInit {
   }
 
   resetMapBounds() {
-    if (!this.places.length) return;
+    if (!this.places.length) {
+      this.map?.fitBounds(
+        this.flattenedTripItems
+          .filter((i) => i.lat != null && i.lng != null)
+          .map((i) => [i.lat!, i.lng!]),
+        { padding: [30, 30] },
+      );
+      return;
+    }
+
     this.map?.fitBounds(
       this.places.map((p) => [p.lat, p.lng]),
       { padding: [30, 30] },
@@ -752,6 +796,18 @@ export class TripComponent implements AfterViewInit {
     window.open(url, "_blank");
   }
 
+  tripToNavigation() {
+    // TODO: More services
+    const items = this.flattenedTripItems.filter(
+      (item) => item.lat && item.lng,
+    );
+    if (!items.length) return;
+
+    const waypoints = items.map((item) => `${item.lat},${item.lng}`).join("/");
+    const url = `https://www.google.com/maps/dir/${waypoints}`;
+    window.open(url, "_blank");
+  }
+
   editDay(day: TripDay) {
     if (!this.trip) return;