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="p-4 shadow rounded-md w-full min-h-20">
<div class="group relative p-2 mb-2 flex flex-col items-start"> <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> <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"> <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) { @if (!collapsedTripStatuses) {
<div class="max-h-[20vh] overflow-y-auto"> <div class="max-h-[20vh] overflow-y-auto">
@defer { @defer {
@for (item of getReviewData; track item.id) { @for (item of getWatchlistData; 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="flex items-center gap-2 h-10 px-4 py-2 w-full max-w-full">
<div class="line-clamp-1">{{ item.text }}</div> <div class="flex flex-none">
<div class="flex items-center gap-2 flex-none">
@if (item.status) {
<span [style.background]="item.status.color+'1A'" [style.color]="item.status.color" <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">{{ class="text-xs font-medium me-2 px-2.5 py-0.5 rounded">{{
item.status.label }}</span> item.status.label }}</span>
}
</div> </div>
<div class="line-clamp-1">{{ item.text }}</div>
</div> </div>
} @empty { } @empty {
<p class="p-4 font-light text-gray-500"> <p class="p-4 font-light text-gray-500">
Nothing to review Nothing there
</p> </p>
} }
} @placeholder (minimum 0.4s) { } @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 { SkeletonModule } from "primeng/skeleton";
import { FloatLabelModule } from "primeng/floatlabel"; import { FloatLabelModule } from "primeng/floatlabel";
import * as L from "leaflet"; import * as L from "leaflet";
import { AntPath, antPath } from "leaflet-ant-path"; import { antPath } from "leaflet-ant-path";
import { TableModule } from "primeng/table"; import { TableModule } from "primeng/table";
import { import {
Trip, Trip,
@ -219,11 +219,13 @@ export class TripComponent implements AfterViewInit {
return stats; return stats;
} }
get getReviewData(): (TripItem & { status: TripStatus })[] { get getWatchlistData(): (TripItem & { status: TripStatus })[] {
if (!this.trip?.days) return []; if (!this.trip?.days) return [];
const data = this.trip!.days.map((day) => 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(); ).flat();
if (!data.length) return []; if (!data.length) return [];
@ -414,6 +416,15 @@ export class TripComponent implements AfterViewInit {
if (!this.trip || index == -1) return; if (!this.trip || index == -1) return;
const data = this.trip.days[index as number].items; 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)); data.sort((a, b) => a.time.localeCompare(b.time));
const coords = data const coords = data
.map((item) => { .map((item) => {