francescoalbano/tripweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Rename Review panel to Watchlist panel, 🐛 Fix displayed status types in panel

Browse Source
This commit is contained in:
itskovacs 2025-07-24 19:36:10 +02:00
parent 6a9674c5ef
commit 7f46df3470
2 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/src/app/components/trip/trip.component.html
View File

@ -361,7 +361,7 @@
<div class="p-4 shadow rounded-md w-full min-h-20">
<div class="group relative p-2 mb-2 flex flex-col items-start">
<h1 class="font-semibold tracking-tight text-xl">Review</h1>
<h1 class="font-semibold tracking-tight text-xl">Watchlist</h1>
<span class="text-xs text-gray-500 line-clamp-1">{{ trip?.name }} pending/constraints</span>
<div class="bg-white rounded py-2 absolute top-1/2 -translate-y-1/2 left-0 hidden group-hover:block slide-x">
@ -373,20 +373,18 @@
@if (!collapsedTripStatuses) {
<div class="max-h-[20vh] overflow-y-auto">
@defer {
@for (item of getReviewData; track item.id) {
<div class="flex items-center gap-4 rounded-md justify-between h-10 px-4 py-2 w-full max-w-full">
<div class="line-clamp-1">{{ item.text }}</div>
<div class="flex items-center gap-2 flex-none">
@if (item.status) {
@for (item of getWatchlistData; track item.id) {
<div class="flex items-center gap-2 h-10 px-4 py-2 w-full max-w-full">
<div class="flex flex-none">
<span [style.background]="item.status.color+'1A'" [style.color]="item.status.color"
class="text-xs font-medium me-2 px-2.5 py-0.5 rounded">{{
item.status.label }}</span>
}
</div>
<div class="line-clamp-1">{{ item.text }}</div>
</div>
} @empty {
<p class="p-4 font-light text-gray-500">
Nothing to review
Nothing there
</p>
}
} @placeholder (minimum 0.4s) {

17
src/src/app/components/trip/trip.component.ts
View File

@ -6,7 +6,7 @@ import { InputTextModule } from "primeng/inputtext";
import { SkeletonModule } from "primeng/skeleton";
import { FloatLabelModule } from "primeng/floatlabel";
import * as L from "leaflet";
import { AntPath, antPath } from "leaflet-ant-path";
import { antPath } from "leaflet-ant-path";
import { TableModule } from "primeng/table";
import {
Trip,
@ -219,11 +219,13 @@ export class TripComponent implements AfterViewInit {
return stats;
}
get getReviewData(): (TripItem & { status: TripStatus })[] {
get getWatchlistData(): (TripItem & { status: TripStatus })[] {
if (!this.trip?.days) return [];
const data = this.trip!.days.map((day) =>
day.items.filter((item) => item.status),
day.items.filter((item) =>
["constraint", "pending"].includes(item.status as string),
),
).flat();
if (!data.length) return [];
@ -414,6 +416,15 @@ export class TripComponent implements AfterViewInit {
if (!this.trip || index == -1) return;
const data = this.trip.days[index as number].items;
if (data.length == 1) {
this.utilsService.toast(
"info",
"Info",
"Not enough values to map an itinerary",
);
return;
}
data.sort((a, b) => a.time.localeCompare(b.time));
const coords = data
.map((item) => {