💄 Trip map: grey out unused places, 💄 minor tweaks

Author: itskovacs

src/src/app/components/trip/trip.component.html

@@ -183,7 +183,7 @@ <h2 class="text-xl md:text-3xl font-semibold mb-0 truncate max-w-96 md:mx-auto">
         @if (selectedItem.comment) {
         <div class="md:col-span-2 rounded-md shadow p-4">
           <p class="font-bold mb-1">Comment</p>
-          <p class="text-sm text-gray-500">{{ selectedItem.comment }}</p>
+          <p class="text-sm text-gray-500 whitespace-pre-line">{{ selectedItem.comment }}</p>
         </div>
         }
 

src/src/app/components/trip/trip.component.ts

@@ -284,7 +284,7 @@ export class TripComponent implements AfterViewInit {
 
     this.markerClusterGroup?.clearLayers();
     this.places.forEach((p) => {
-      const marker = placeToMarker(p, false);
+      const marker = placeToMarker(p, false, !this.placesUsedInTable.has(p.id));
       this.markerClusterGroup?.addLayer(marker);
     });
   }
@@ -375,9 +375,19 @@ export class TripComponent implements AfterViewInit {
       .flatMap((day) => day.items.sort((a, b) => a.time.localeCompare(b.time)))
       .map((item) => {
         if (item.lat && item.lng)
-          return { text: item.text, lat: item.lat, lng: item.lng };
+          return {
+            text: item.text,
+            lat: item.lat,
+            lng: item.lng,
+            isPlace: !!item.place,
+          };
         if (item.place && item.place)
-          return { text: item.text, lat: item.place.lat, lng: item.place.lng };
+          return {
+            text: item.text,
+            lat: item.place.lat,
+            lng: item.place.lng,
+            isPlace: true,
+          };
         return undefined;
       })
       .filter((n) => n !== undefined);
@@ -413,7 +423,7 @@ export class TripComponent implements AfterViewInit {
     const layGroup = L.layerGroup();
     layGroup.addLayer(path);
     items.forEach((item) => {
-      layGroup.addLayer(tripDayMarker(item));
+      if (!item.isPlace) layGroup.addLayer(tripDayMarker(item));
     });
 
     if (this.tripMapAntLayer) {
@@ -448,9 +458,19 @@ export class TripComponent implements AfterViewInit {
     const items = data
       .map((item) => {
         if (item.lat && item.lng)
-          return { text: item.text, lat: item.lat, lng: item.lng };
+          return {
+            text: item.text,
+            lat: item.lat,
+            lng: item.lng,
+            isPlace: !!item.place,
+          };
         if (item.place && item.place)
-          return { text: item.text, lat: item.place.lat, lng: item.place.lng };
+          return {
+            text: item.text,
+            lat: item.place.lat,
+            lng: item.place.lng,
+            isPlace: true,
+          };
         return undefined;
       })
       .filter((n) => n !== undefined);
@@ -486,7 +506,7 @@ export class TripComponent implements AfterViewInit {
     const layGroup = L.layerGroup();
     layGroup.addLayer(path);
     items.forEach((item) => {
-      layGroup.addLayer(tripDayMarker(item));
+      if (!item.isPlace) layGroup.addLayer(tripDayMarker(item));
     });
 
     if (this.tripMapAntLayer) {
@@ -765,7 +785,10 @@ export class TripComponent implements AfterViewInit {
                 );
               }
               if (item.price) this.updateTotalPrice(item.price);
-              if (item.place?.id) this.placesUsedInTable.add(item.place.id);
+              if (item.place?.id) {
+                this.placesUsedInTable.add(item.place.id);
+                this.setPlacesAndMarkers();
+              }
             },
           });
       },
@@ -832,6 +855,8 @@ export class TripComponent implements AfterViewInit {
 
               if (this.tripMapAntLayerDayID == item.day_id)
                 this.toggleTripDayHighlightPathDay(item.day_id);
+
+              if (item.place?.id || it.place?.id) this.setPlacesAndMarkers();
             },
           });
       },
@@ -869,8 +894,10 @@ export class TripComponent implements AfterViewInit {
                   this.flattenedTripItems = this.flattenTripDayItems(
                     this.trip?.days!,
                   );
-                  if (item.place?.id)
+                  if (item.place?.id) {
                     this.placesUsedInTable.delete(item.place.id);
+                    this.setPlacesAndMarkers();
+                  }
                   this.dayStatsCache.delete(item.day_id);
                   this.selectedItem = undefined;
                   this.resetPlaceHighlightMarker();

src/src/app/components/trips/trips.component.html

@@ -9,7 +9,7 @@
     </div>
   </div>
 
-  <div class="mt-10 grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+  <div class="mt-10 grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
     @defer {
     @for (trip of trips; track trip.id) {
     <div class="group relative rounded-lg overflow-hidden shadow-lg cursor-pointer" [class.grayscale]="trip.archived"

src/src/app/modals/place-create-modal/place-create-modal.component.ts

@@ -121,8 +121,8 @@ export class PlaceCreateModalComponent {
         const latControl = this.placeForm.get("lat");
         const lngControl = this.placeForm.get("lng");
 
-        latControl?.setValue(formatLatLng(lat), { emitEvent: false });
-        lngControl?.setValue(formatLatLng(lng), { emitEvent: false });
+        latControl?.setValue(formatLatLng(lat).trim(), { emitEvent: false });
+        lngControl?.setValue(formatLatLng(lng).trim(), { emitEvent: false });
 
         lngControl?.markAsDirty();
         lngControl?.updateValueAndValidity();

src/src/app/modals/trip-create-day-item-modal/trip-create-day-item-modal.component.ts

@@ -121,8 +121,8 @@ export class TripCreateDayItemModalComponent {
         const latControl = this.itemForm.get("lat");
         const lngControl = this.itemForm.get("lng");
 
-        latControl?.setValue(formatLatLng(lat), { emitEvent: false });
-        lngControl?.setValue(formatLatLng(lng), { emitEvent: false });
+        latControl?.setValue(formatLatLng(lat).trim(), { emitEvent: false });
+        lngControl?.setValue(formatLatLng(lng).trim(), { emitEvent: false });
 
         lngControl?.markAsDirty();
         lngControl?.updateValueAndValidity();

src/src/app/shared/map.ts

@@ -99,6 +99,7 @@ export function tripDayMarker(item: {
 export function placeToMarker(
   place: Place,
   isLowNet: boolean = true,
+  grayscale: boolean = false,
 ): L.Marker {
   let marker: L.Marker;
   let options: any = {
@@ -114,14 +115,17 @@ export function placeToMarker(
     ? place.category.image
     : (place.image ?? place.category.image);
 
+  let markerClasses = place.visited ? "image-marker visited" : "image-marker";
+  if (grayscale) markerClasses += " grayscale";
+
   marker.options.icon = L.icon({
     iconUrl: markerImage,
     iconSize: [56, 56],
     iconAnchor: [28, 28],
     shadowSize: [0, 0],
     shadowAnchor: [0, 0],
     popupAnchor: [0, -12],
-    className: place.visited ? "image-marker visited" : "image-marker",
+    className: markerClasses,
   });
 
   let touchDevice = "ontouchstart" in window;