💄 Shared Trip: Trip sync
This commit is contained in:
itskovacs
parent
93b63df79a
commit
164f3d5a15
@ -72,7 +72,8 @@
|
||||
text />
|
||||
<p-button label="Highlight" pTooltip="Show itinerary on map" icon="pi pi-directions"
|
||||
[severity]="tripMapAntLayerDayID == -1 ? 'help' : 'primary'" (click)="toggleTripDaysHighlight()" text />
|
||||
<p-button pTooltip="Pretty Print" icon="pi pi-print" (click)="togglePrint()" text />
|
||||
<p-button icon="pi pi-ellipsis-v" label="Export" (click)="menuTripExport.toggle($event)" text />
|
||||
<p-menu #menuTripExport [model]="menuTripExportItems" appendTo="body" [popup]="true" />
|
||||
</div>
|
||||
|
||||
<div class="flex md:hidden items-center">
|
||||
@ -239,6 +240,7 @@
|
||||
<td [attr.rowspan]="rowspan" class="font-normal! max-w-20 truncate cursor-pointer"
|
||||
[class.text-blue-500]="tripMapAntLayerDayID == tripitem.day_id"
|
||||
(click)="toggleTripDayHighlight(tripitem.day_id); $event.stopPropagation()">
|
||||
<div class="text-xs text-gray-500">{{ tripitem.td_date | date: 'd MMM, y' }}</div>
|
||||
<div class="truncate">{{ tripitem.td_label }}</div>
|
||||
</td>
|
||||
}
|
||||
@ -262,7 +264,7 @@
|
||||
<div [style.background]="tripitem.place.category.color + '1A'"
|
||||
class="inline-flex items-center gap-2 text-gray-800 font-medium px-1 py-1 pr-3 rounded-full">
|
||||
<div class="size-6 flex items-center justify-center bg-white rounded-full overflow-hidden flex-shrink-0">
|
||||
<img [src]="tripitem.place.image" class="size-full object-cover" />
|
||||
<img [src]="tripitem.place.image || tripitem.place.category.image" class="size-full object-cover" />
|
||||
</div>
|
||||
<span class="text-sm truncate min-w-0">{{ tripitem.place.name }}</span>
|
||||
</div>
|
||||
@ -559,6 +561,9 @@
|
||||
{{ d.label }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2 flex-none">
|
||||
<span
|
||||
class="bg-gray-100 text-gray-800 text-sm px-2.5 py-0.5 rounded-md min-w-fit flex items-center group-hover:hidden dark:bg-gray-100/85"><i
|
||||
class="pi pi-calendar"></i> {{ (d.dt | date: 'd MMM, y' ) || '-' }}</span>
|
||||
<span class="bg-gray-100 text-gray-800 text-sm px-2.5 py-0.5 rounded-md min-w-fit dark:bg-gray-100/85">{{
|
||||
getDayStats(d).price || '-' }}
|
||||
@if (getDayStats(d).price) {
|
||||
@ -678,22 +683,25 @@
|
||||
class="flex items-center gap-2 w-full cursor-pointer">
|
||||
<p-checkbox disabled [binary]="true" [inputId]="item.id.toString()" [(ngModel)]="item.packed" />
|
||||
<div class="pr-6 md:pr-0 truncate select-none flex-1">
|
||||
@if (item.qt) {
|
||||
<span class="text-gray-400 mr-0.5">{{ item.qt }}</span>
|
||||
}
|
||||
@if (item.qt) {<span class="text-gray-400 mr-0.5">{{ item.qt }}</span>}
|
||||
<span>{{ item.text }}</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
} @empty {
|
||||
<div class="flex flex-col items-center justify-center mt-4 text-center select-none">
|
||||
<i style="font-size: 3rem" class="pi pi-inbox mb-2 text-gray-300 dark:text-gray-700"></i>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">No item</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</p-dialog>
|
||||
|
||||
<p-dialog header="Checklist" [draggable]="false" [dismissableMask]="true" [modal]="true"
|
||||
[(visible)]="checklistDialogVisible" styleClass="w-[95%] md:w-[50%] lg:w-[30%]">
|
||||
[(visible)]="checklistDialogVisible" styleClass="w-[95%] md:w-[80%]">
|
||||
<section class="p-4 max-w-full max-h-[80%] md:max-h-[600px]">
|
||||
<div class="grid md:grid-cols-2 xl:grid-cols-3 gap-2 mt-2 pb-4">
|
||||
@for (item of checklistItems; track item.id) {
|
||||
@ -792,7 +800,7 @@
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-gray-100 text-gray-800 font-medium px-1 py-1 pr-3 rounded-full">
|
||||
<div class="size-6 flex items-center justify-center bg-white rounded-full overflow-hidden flex-shrink-0">
|
||||
<img [src]="item.place.image" class="size-full object-cover" />
|
||||
<img [src]="item.place.image || item.place.category.image" class="size-full object-cover" />
|
||||
</div>
|
||||
<span class="text-sm">{{ item.place.name }}</span>
|
||||
</div>
|
||||
|
||||
@ -25,6 +25,8 @@ import { InputTextModule } from 'primeng/inputtext';
|
||||
import { ClipboardModule } from '@angular/cdk/clipboard';
|
||||
import { calculateDistanceBetween } from '../../shared/haversine';
|
||||
import { orderByPipe } from '../../shared/order-by.pipe';
|
||||
import { generateTripICSFile } from '../trip/ics';
|
||||
import { generateTripCSVFile } from '../trip/csv';
|
||||
|
||||
@Component({
|
||||
selector: 'app-shared-trip',
|
||||
@ -168,6 +170,30 @@ export class SharedTripComponent implements AfterViewInit {
|
||||
],
|
||||
},
|
||||
];
|
||||
readonly menuTripExportItems: MenuItem[] = [
|
||||
{
|
||||
label: 'Actions',
|
||||
items: [
|
||||
{
|
||||
label: 'Calendar (.ics)',
|
||||
icon: 'pi pi-calendar',
|
||||
command: () => generateTripICSFile(this.flattenedTripItems, this.trip?.name, this.utilsService),
|
||||
},
|
||||
{
|
||||
label: 'CSV',
|
||||
icon: 'pi pi-file',
|
||||
command: () => generateTripCSVFile(this.flattenedTripItems, this.trip?.name),
|
||||
},
|
||||
{
|
||||
label: 'Pretty Print',
|
||||
icon: 'pi pi-print',
|
||||
command: () => {
|
||||
this.togglePrint();
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
readonly tripTableColumns: string[] = [
|
||||
'day',
|
||||
'time',
|
||||
@ -299,52 +325,62 @@ export class SharedTripComponent implements AfterViewInit {
|
||||
}
|
||||
|
||||
flattenTripDayItems(searchValue?: string) {
|
||||
const searchLower = (searchValue || '').toLowerCase();
|
||||
let prevLat: number, prevLng: number;
|
||||
this.flattenedTripItems = this.trip!.days.flatMap((day) =>
|
||||
[...day.items]
|
||||
.filter((item) =>
|
||||
searchValue
|
||||
? item.text.toLowerCase().includes(searchValue) ||
|
||||
item.place?.name.toLowerCase().includes(searchValue) ||
|
||||
item.comment?.toLowerCase().includes(searchValue)
|
||||
: true,
|
||||
)
|
||||
.sort((a, b) => (a.time < b.time ? -1 : a.time > b.time ? 1 : 0))
|
||||
.map((item) => {
|
||||
const lat = item.lat ?? (item.place ? item.place.lat : undefined);
|
||||
const lng = item.lng ?? (item.place ? item.place.lng : undefined);
|
||||
this.flattenedTripItems = this.trip!.days.flatMap((day) => day.items.map((item) => ({ item, day })))
|
||||
.filter(
|
||||
({ item }) =>
|
||||
!searchLower ||
|
||||
item.text.toLowerCase().includes(searchLower) ||
|
||||
item.place?.name.toLowerCase().includes(searchLower) ||
|
||||
item.comment?.toLowerCase().includes(searchLower),
|
||||
)
|
||||
.sort((a, b) => {
|
||||
const dateA = a.day.dt;
|
||||
const dateB = b.day.dt;
|
||||
if (dateA && dateB) return dateA.localeCompare(dateB) || (a.item.time || '').localeCompare(b.item.time || '');
|
||||
if (!dateA && !dateB) {
|
||||
return (
|
||||
(a.day.label || '').localeCompare(b.day.label || '') || (a.item.time || '').localeCompare(b.item.time || '')
|
||||
);
|
||||
}
|
||||
return dateA ? -1 : 1;
|
||||
})
|
||||
.map(({ item, day }) => {
|
||||
const lat = item.lat ?? item.place?.lat;
|
||||
const lng = item.lng ?? item.place?.lng;
|
||||
|
||||
let distance: number | undefined;
|
||||
if (lat && lng) {
|
||||
if (prevLat && prevLng) {
|
||||
const d = calculateDistanceBetween(prevLat, prevLng, lat, lng);
|
||||
distance = +(Math.round(d * 1000) / 1000).toFixed(2);
|
||||
}
|
||||
prevLat = lat;
|
||||
prevLng = lng;
|
||||
let distance: number | undefined;
|
||||
if (lat && lng) {
|
||||
if (prevLat && prevLng) {
|
||||
const d = calculateDistanceBetween(prevLat, prevLng, lat, lng);
|
||||
distance = +(Math.round(d * 1000) / 1000).toFixed(2);
|
||||
}
|
||||
prevLat = lat;
|
||||
prevLng = lng;
|
||||
}
|
||||
|
||||
return {
|
||||
td_id: day.id,
|
||||
td_label: day.label,
|
||||
id: item.id,
|
||||
time: item.time,
|
||||
text: item.text,
|
||||
status: this.statusToTripStatus(item.status as string),
|
||||
comment: item.comment,
|
||||
price: item.price || undefined,
|
||||
day_id: item.day_id,
|
||||
place: item.place,
|
||||
image: item.image,
|
||||
image_id: item.image_id,
|
||||
gpx: item.gpx,
|
||||
lat,
|
||||
lng,
|
||||
distance,
|
||||
paid_by: item.paid_by,
|
||||
};
|
||||
}),
|
||||
);
|
||||
return {
|
||||
td_id: day.id,
|
||||
td_label: day.label,
|
||||
td_date: day.dt,
|
||||
id: item.id,
|
||||
time: item.time,
|
||||
text: item.text,
|
||||
status: this.statusToTripStatus(item.status as string),
|
||||
comment: item.comment,
|
||||
price: item.price || undefined,
|
||||
day_id: item.day_id,
|
||||
place: item.place,
|
||||
image: item.image,
|
||||
image_id: item.image_id,
|
||||
gpx: item.gpx,
|
||||
lat,
|
||||
lng,
|
||||
distance,
|
||||
paid_by: item.paid_by,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
computePlacesUsedInTable() {
|
||||
@ -779,11 +815,11 @@ export class SharedTripComponent implements AfterViewInit {
|
||||
}
|
||||
|
||||
openChecklist() {
|
||||
if (!this.trip) return;
|
||||
if (!this.token) return;
|
||||
|
||||
if (!this.checklistItems.length)
|
||||
this.apiService
|
||||
.getChecklist(this.trip.id)
|
||||
.getSharedTripChecklist(this.token)
|
||||
.pipe(take(1))
|
||||
.subscribe({
|
||||
next: (items) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user