From 4cdc11af6920c9cddb005d0099a832e5a6658e61 Mon Sep 17 00:00:00 2001 From: itskovacs Date: Mon, 21 Jul 2025 21:24:58 +0200 Subject: [PATCH] :sparkles: Trip route, :lipstick: trip manage places modal collapsed selected by default, :lipstick: trip days sorting, :lipstick: Handle place details overflows --- backend/trip/__init__.py | 2 +- .../app/components/trip/trip.component.html | 8 +-- src/src/app/components/trip/trip.component.ts | 59 ++++++++++++++++++- .../trip-place-select-modal.component.html | 20 +++++-- .../trip-place-select-modal.component.ts | 1 + .../shared/place-box/place-box.component.html | 47 ++++++++------- 6 files changed, 100 insertions(+), 37 deletions(-) diff --git a/backend/trip/__init__.py b/backend/trip/__init__.py index 9c73af2..3e8d9f9 100644 --- a/backend/trip/__init__.py +++ b/backend/trip/__init__.py @@ -1 +1 @@ -__version__ = "1.3.1" +__version__ = "1.4.0" diff --git a/src/src/app/components/trip/trip.component.html b/src/src/app/components/trip/trip.component.html index d9d8c61..cbe4d8c 100644 --- a/src/src/app/components/trip/trip.component.html +++ b/src/src/app/components/trip/trip.component.html @@ -53,6 +53,8 @@
+
@@ -82,7 +84,7 @@ @if (rowgroup) { + (click)="toggleTripDayHighlightPathDay(tripitem.day_id); $event.stopPropagation()">
{{tripitem.td_label }}
} @@ -368,9 +370,7 @@ @defer { @for (item of getReviewData; track item.id) {
-
- {{ item.text }} -
+
{{ item.text }}
@if (item.status) { { this.trip = trip; + this.sortTripDays(); this.flattenedTripItems = this.flattenTripDayItems(trip.days); this.updateTotalPrice(); @@ -187,6 +188,10 @@ export class TripComponent implements AfterViewInit { }); } + sortTripDays() { + this.trip?.days.sort((a, b) => a.label.localeCompare(b.label)); + } + getDayStats(day: TripDay): { price: number; places: number } { if (this.dayStatsCache.has(day.id)) { return this.dayStatsCache.get(day.id)!; @@ -323,7 +328,55 @@ export class TripComponent implements AfterViewInit { } } - toggleTripDayHighlightPath(day_id: number) { + toggleTripDaysHighlight() { + if (this.tripMapAntLayerDayID == -1) { + this.map.removeLayer(this.tripMapAntLayer); + this.tripMapAntLayerDayID = undefined; + this.resetMapBounds(); + return; + } + + if (!this.trip) return; + + const items = this.trip.days.flatMap((day) => + day.items.sort((a, b) => a.time.localeCompare(b.time)), + ); + + const coords = items + .map((item) => { + if (item.lat && item.lng) return [item.lat, item.lng]; + if (item.place && item.place) return [item.place.lat, item.place.lng]; + return undefined; + }) + .filter((n): n is number[] => n !== undefined); + this.map.fitBounds(coords, { padding: [30, 30] }); + + const path = antPath(coords, { + delay: 400, + dashArray: [10, 20], + weight: 5, + color: "#0000FF", + pulseColor: "#FFFFFF", + paused: false, + reverse: false, + hardwareAccelerated: true, + }); + + if (this.tripMapAntLayer) { + this.map.removeLayer(this.tripMapAntLayer); + this.tripMapAntLayerDayID = undefined; + } + + // UX + setTimeout(() => { + this.map.addLayer(path); + }, 200); + + this.tripMapAntLayer = path; + this.tripMapAntLayerDayID = -1; //Hardcoded value for global trace + } + + toggleTripDayHighlightPathDay(day_id: number) { // Click on the currently displayed day: remove if (this.tripMapAntLayerDayID == day_id) { this.map.removeLayer(this.tripMapAntLayer); @@ -484,6 +537,7 @@ export class TripComponent implements AfterViewInit { this.apiService.postTripDay(day, this.trip?.id!).subscribe({ next: (day) => { this.trip?.days.push(day); + this.sortTripDays(); this.flattenedTripItems.push(...this.flattenTripDayItems([day])); }, }); @@ -517,6 +571,7 @@ export class TripComponent implements AfterViewInit { let index = this.trip?.days.findIndex((d) => d.id == day.id); if (index != -1) { this.trip?.days.splice(index as number, 1, day); + this.sortTripDays(); this.flattenedTripItems = this.flattenTripDayItems( this.trip?.days!, ); @@ -693,7 +748,7 @@ export class TripComponent implements AfterViewInit { this.updateTotalPrice(updatedPrice); if (this.tripMapAntLayerDayID == item.day_id) - this.toggleTripDayHighlightPath(item.day_id); + this.toggleTripDayHighlightPathDay(item.day_id); }, }); }, diff --git a/src/src/app/modals/trip-place-select-modal/trip-place-select-modal.component.html b/src/src/app/modals/trip-place-select-modal/trip-place-select-modal.component.html index e675fac..1df0cba 100644 --- a/src/src/app/modals/trip-place-select-modal/trip-place-select-modal.component.html +++ b/src/src/app/modals/trip-place-select-modal/trip-place-select-modal.component.html @@ -7,13 +7,20 @@
-
-
-

Selected

- {{ selectedPlaces.length }} +
+
+
+

Selected

+ {{ selectedPlaces.length }} +
+ Here are your selected place{{ selectedPlaces.length > 1 ? 's' : '' + }}
- Here are your selected place{{ selectedPlaces.length > 1 ? 's' : '' }} + +
+ @if (showSelectedPlaces) { @for (p of selectedPlaces; track p.id) {
@@ -45,10 +52,11 @@
} + }

List

- Currently displayed points + Available points @defer { @for (p of displayedPlaces; track p.id) { diff --git a/src/src/app/modals/trip-place-select-modal/trip-place-select-modal.component.ts b/src/src/app/modals/trip-place-select-modal/trip-place-select-modal.component.ts index 77da70c..e8c64db 100644 --- a/src/src/app/modals/trip-place-select-modal/trip-place-select-modal.component.ts +++ b/src/src/app/modals/trip-place-select-modal/trip-place-select-modal.component.ts @@ -25,6 +25,7 @@ export class TripPlaceSelectModalComponent { searchInput = new FormControl(""); selectedPlaces: Place[] = []; + showSelectedPlaces: boolean = false; selectedPlacesID: number[] = []; places: Place[] = []; diff --git a/src/src/app/shared/place-box/place-box.component.html b/src/src/app/shared/place-box/place-box.component.html index dfec2dc..771cfcd 100644 --- a/src/src/app/shared/place-box/place-box.component.html +++ b/src/src/app/shared/place-box/place-box.component.html @@ -3,12 +3,12 @@
- -