✨ Trip: export to ics or csv
This commit is contained in:
itskovacs
parent
f5f76f8a7b
commit
96d0fadf23
93
src/src/app/components/trip/csv.ts
Normal file
93
src/src/app/components/trip/csv.ts
Normal file
@ -0,0 +1,93 @@
|
||||
import { FlattenedTripItem } from '../../types/trip';
|
||||
import { UtilsService } from '../../services/utils.service';
|
||||
|
||||
export function generateTripICSFile(
|
||||
tripItems: FlattenedTripItem[],
|
||||
tripName: string = 'Trip Calendar',
|
||||
utilsService: UtilsService,
|
||||
): void {
|
||||
const now = new Date();
|
||||
const tsz = now.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
|
||||
|
||||
let icsContent = [
|
||||
'BEGIN:VCALENDAR',
|
||||
'VERSION:2.0',
|
||||
'PRODID:-//Trip//Trip Calendar//EN',
|
||||
'CALSCALE:GREGORIAN',
|
||||
'METHOD:PUBLISH',
|
||||
`X-WR-CALNAME:${tripName}`,
|
||||
'X-WR-TIMEZONE:Europe/Paris',
|
||||
].join('\r\n');
|
||||
|
||||
if (tripItems.some((i) => !i.td_date))
|
||||
utilsService.toast('warn', 'Caution', 'You have date-less days, they will not be included in your export');
|
||||
|
||||
tripItems.forEach((item, index) => {
|
||||
if (!item.td_date) return;
|
||||
|
||||
const eventDate = item.td_date;
|
||||
const eventTime = item.time ?? '00:00';
|
||||
const [year, month, day] = eventDate.split('-');
|
||||
const [hours, minutes] = eventTime.split(':');
|
||||
const dtStart = `${year}${month}${day}T${hours.padStart(2, '0')}${minutes.padStart(2, '0')}00`;
|
||||
|
||||
const startDateTime = new Date(`${eventDate}T${eventTime}`);
|
||||
const nextItemSameDay = tripItems.slice(index + 1).find((i) => i.td_date === item.td_date && i.time);
|
||||
|
||||
const endDateTime = nextItemSameDay?.time
|
||||
? new Date(`${nextItemSameDay.td_date}T${nextItemSameDay.time}`)
|
||||
: new Date(startDateTime.getTime() + 60 * 60 * 1000);
|
||||
const dtEnd = endDateTime.toISOString().replace(/[-:]/g, '').split('.')[0];
|
||||
|
||||
const eventDescription: string[] = [];
|
||||
if (item.comment) eventDescription.push(`Comment: ${item.comment}`);
|
||||
if (item.place?.name) eventDescription.push(`Place: ${item.place.name}`);
|
||||
|
||||
const lat = item.lat ?? item.place?.lat;
|
||||
const lng = item.lng ?? item.place?.lng;
|
||||
if (lat && lng) {
|
||||
eventDescription.push(`Coordinates: ${lat}, ${lng}`);
|
||||
eventDescription.push(`GMaps: https://www.google.com/maps?q=${lat},${lng}`);
|
||||
}
|
||||
|
||||
if (item.price) eventDescription.push(`Price: ${item.price}€`);
|
||||
|
||||
const description = eventDescription.join('\\n').replace(/\n/g, '\\n');
|
||||
const location = item.place?.name ?? (lat && lng ? `${lat}, ${lng}` : '');
|
||||
const geo = lat && lng ? `GEO:${lat};${lng}` : '';
|
||||
const uid = `Trip-${tripName.replace(/[^a-zA-Z0-9-_]/g, '_')}-item-${item.id}-${tsz}`;
|
||||
|
||||
icsContent +=
|
||||
'\r\n' +
|
||||
[
|
||||
'BEGIN:VEVENT',
|
||||
`UID:${uid}`,
|
||||
`DTSTAMP:${tsz}`,
|
||||
`DTSTART:${dtStart}`,
|
||||
`DTEND:${dtEnd}`,
|
||||
`SUMMARY:${escapeICSText(item.text)}`,
|
||||
description ? `DESCRIPTION:${escapeICSText(description)}` : '',
|
||||
location ? `LOCATION:${escapeICSText(location)}` : '',
|
||||
geo,
|
||||
item.status ? `STATUS:${item.status.label.toUpperCase()}` : '',
|
||||
'END:VEVENT',
|
||||
]
|
||||
.filter((line) => line)
|
||||
.join('\r\n');
|
||||
});
|
||||
|
||||
icsContent += '\r\n' + 'END:VCALENDAR';
|
||||
const blob = new Blob([icsContent], { type: 'text/calendar;charset=utf-8' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `${tripName.replace(/\s+/g, '_')}.ics`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(link.href);
|
||||
}
|
||||
|
||||
function escapeICSText(text: string): string {
|
||||
if (!text) return '';
|
||||
return text.replace(/\\/g, '\\\\').replace(/;/g, '\\;').replace(/,/g, '\\,').replace(/\n/g, '\\n').replace(/\r/g, '');
|
||||
}
|
||||
98
src/src/app/components/trip/ics.ts
Normal file
98
src/src/app/components/trip/ics.ts
Normal file
@ -0,0 +1,98 @@
|
||||
import { FlattenedTripItem } from '../../types/trip';
|
||||
import { UtilsService } from '../../services/utils.service';
|
||||
|
||||
export function generateTripICSFile(
|
||||
tripItems: FlattenedTripItem[],
|
||||
tripName: string = 'Trip Calendar',
|
||||
utilsService: UtilsService,
|
||||
): void {
|
||||
const now = new Date();
|
||||
const tsz = now.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
|
||||
|
||||
let icsContent = [
|
||||
'BEGIN:VCALENDAR',
|
||||
'VERSION:2.0',
|
||||
'PRODID:-//Trip//Trip Calendar//EN',
|
||||
'CALSCALE:GREGORIAN',
|
||||
'METHOD:PUBLISH',
|
||||
`X-WR-CALNAME:${tripName}`,
|
||||
'X-WR-TIMEZONE:Europe/Paris',
|
||||
].join('\r\n');
|
||||
|
||||
if (tripItems.some((i) => !i.td_date))
|
||||
utilsService.toast('warn', 'Caution', 'You have date-less days, they will not be included in your export');
|
||||
|
||||
tripItems.forEach((item, index) => {
|
||||
if (!item.td_date) return;
|
||||
|
||||
const eventDate = item.td_date;
|
||||
const eventTime = item.time ?? '00:00';
|
||||
const [year, month, day] = eventDate.split('-');
|
||||
const [hours, minutes] = eventTime.split(':');
|
||||
const dtStart = `${year}${month}${day}T${hours.padStart(2, '0')}${minutes.padStart(2, '0')}00`;
|
||||
|
||||
const startDateTime = new Date(`${eventDate}T${eventTime}`);
|
||||
|
||||
const nextItem = tripItems.slice(index + 1).find((i) => i.td_date);
|
||||
const nextItemSameDay = tripItems.slice(index + 1).find((i) => i.td_date === item.td_date && i.time);
|
||||
|
||||
const endDateTime = nextItemSameDay?.time
|
||||
? new Date(`${nextItemSameDay.td_date}T${nextItemSameDay.time}`)
|
||||
: new Date(startDateTime.getTime() + 60 * 60 * 1000);
|
||||
const dtEnd = endDateTime.toISOString().replace(/[-:]/g, '').split('.')[0];
|
||||
|
||||
// Build description
|
||||
const eventDescription: string[] = [];
|
||||
|
||||
if (item.comment) eventDescription.push(`Comment: ${item.comment}`);
|
||||
|
||||
if (item.place?.name) eventDescription.push(`Place: ${item.place.name}`);
|
||||
|
||||
const lat = item.lat ?? item.place?.lat;
|
||||
const lng = item.lng ?? item.place?.lng;
|
||||
if (lat && lng) {
|
||||
eventDescription.push(`Coordinates: ${lat}, ${lng}`);
|
||||
eventDescription.push(`GMaps: https://www.google.com/maps?q=${lat},${lng}`);
|
||||
}
|
||||
|
||||
if (item.price) eventDescription.push(`Price: ${item.price}€`);
|
||||
|
||||
const description = eventDescription.join('\\n').replace(/\n/g, '\\n');
|
||||
const location = item.place?.name ?? (lat && lng ? `${lat}, ${lng}` : '');
|
||||
const geo = lat && lng ? `GEO:${lat};${lng}` : '';
|
||||
const uid = `Trip-${tripName.replace(/[^a-zA-Z0-9-_]/g, '_')}-item-${item.id}-${tsz}`;
|
||||
|
||||
icsContent +=
|
||||
'\r\n' +
|
||||
[
|
||||
'BEGIN:VEVENT',
|
||||
`UID:${uid}`,
|
||||
`DTSTAMP:${tsz}`,
|
||||
`DTSTART:${dtStart}`,
|
||||
`DTEND:${dtEnd}`,
|
||||
`SUMMARY:${escapeICSText(item.text)}`,
|
||||
description ? `DESCRIPTION:${escapeICSText(description)}` : '',
|
||||
location ? `LOCATION:${escapeICSText(location)}` : '',
|
||||
geo,
|
||||
item.status ? `STATUS:${item.status.label.toUpperCase()}` : '',
|
||||
'END:VEVENT',
|
||||
]
|
||||
.filter((line) => line)
|
||||
.join('\r\n');
|
||||
});
|
||||
|
||||
icsContent += '\r\n' + 'END:VCALENDAR';
|
||||
const blob = new Blob([icsContent], { type: 'text/calendar;charset=utf-8' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `${tripName.replace(/\s+/g, '_')}.ics`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(link.href);
|
||||
}
|
||||
|
||||
function escapeICSText(text: string): string {
|
||||
if (!text) return '';
|
||||
return text.replace(/\\/g, '\\\\').replace(/;/g, '\\;').replace(/,/g, '\\,').replace(/\n/g, '\\n').replace(/\r/g, '');
|
||||
}
|
||||
@ -70,7 +70,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">
|
||||
@ -92,7 +93,7 @@
|
||||
|
||||
@defer {
|
||||
@if (flattenedTripItems.length) {
|
||||
<p-table [value]="flattenedTripItems" class="max-w-[85vw] md:max-w-full print-striped-rows"
|
||||
<p-table [value]="flattenedTripItems" class="max-w-[85vw] md:max-w-full print-striped-rows" [customSort]="true"
|
||||
[class.table-colored-resizer]="tableExpandableMode" [rowGroupMode]="tableExpandableMode ? 'subheader': 'rowspan'"
|
||||
groupRowsBy="td_label" [resizableColumns]="tableExpandableMode">
|
||||
<ng-template #header>
|
||||
@ -190,6 +191,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>
|
||||
}
|
||||
@ -250,14 +252,23 @@
|
||||
<div class="px-4 mx-auto max-w-screen-xl mt-8 col-span-full print:hidden">
|
||||
<div class="py-8 px-4 flex flex-col items-center gap-1">
|
||||
<h2 class="mb-0 text-4xl text-center tracking-tight font-extrabold text-gray-900 dark:text-gray-200">
|
||||
No Trip.
|
||||
Empty Trip.
|
||||
</h2>
|
||||
|
||||
@if (trip?.days?.length) {
|
||||
<p class="mt-4 font-light text-gray-500 sm:text-xl">
|
||||
Add <i>Item</i> to your <i>Trip</i> to start organizing !
|
||||
</p>
|
||||
|
||||
<p-button class="mt-4" label="Add Item" icon="pi pi-plus" [disabled]="trip?.archived" (click)="addItem()"
|
||||
text />
|
||||
} @else {
|
||||
<p class="mt-4 font-light text-gray-500 sm:text-xl">
|
||||
Add <i>Day</i> to your <i>Trip</i> to start organizing !
|
||||
</p>
|
||||
|
||||
<p-button class="mt-4" label="Add" icon="pi pi-plus" [disabled]="trip?.archived" (click)="addDay()" text />
|
||||
<p-button class="mt-4" label="Add Day" icon="pi pi-plus" [disabled]="trip?.archived" (click)="addDay()" text />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden print:block text-center text-sm text-gray-500 mt-4">
|
||||
@ -490,6 +501,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 group-hover:hidden dark:bg-gray-100/85">{{
|
||||
getDayStats(d).price || '-' }} @if (getDayStats(d).price) { {{ trip?.currency }} }</span>
|
||||
@ -911,6 +925,10 @@
|
||||
</div>
|
||||
<span class="text-sm">{{ place.name }}</span>
|
||||
</div>
|
||||
} @empty {
|
||||
<div class="mt-4 border-l-3 border-gray-900 pl-6 py-2">
|
||||
<p class="text-gray-800 text-lg leading-loose whitespace-pre-line font-light">Nothing there.</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -51,6 +51,8 @@ import { orderByPipe } from '../../shared/order-by.pipe';
|
||||
import { TripNotesModalComponent } from '../../modals/trip-notes-modal/trip-notes-modal.component';
|
||||
import { TripArchiveModalComponent } from '../../modals/trip-archive-modal/trip-archive-modal.component';
|
||||
import { FileSizePipe } from '../../shared/filesize.pipe';
|
||||
import { generateTripICSFile } from './ics';
|
||||
import { generateTripCSVFile } from './csv';
|
||||
|
||||
@Component({
|
||||
selector: 'app-trip',
|
||||
@ -202,6 +204,30 @@ export class TripComponent 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',
|
||||
@ -345,20 +371,30 @@ export class TripComponent 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,
|
||||
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) => (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);
|
||||
.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) {
|
||||
@ -373,6 +409,7 @@ export class TripComponent implements AfterViewInit {
|
||||
return {
|
||||
td_id: day.id,
|
||||
td_label: day.label,
|
||||
td_date: day.dt,
|
||||
id: item.id,
|
||||
time: item.time,
|
||||
text: item.text,
|
||||
@ -389,8 +426,7 @@ export class TripComponent implements AfterViewInit {
|
||||
distance,
|
||||
paid_by: item.paid_by,
|
||||
};
|
||||
}),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
computePlacesUsedInTable() {
|
||||
@ -959,7 +995,7 @@ export class TripComponent implements AfterViewInit {
|
||||
closable: true,
|
||||
dismissableMask: true,
|
||||
width: '50vw',
|
||||
data: { day: day, days: this.trip.days },
|
||||
data: day,
|
||||
breakpoints: {
|
||||
'640px': '80vw',
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user