@flower-city-online/itinerary-lib 0.0.9 → 0.0.11

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-no-visual-filter/create-itinerary-no-visual-filter.component.ts

@@ -0,0 +1,257 @@
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { Iicon } from '../../../../../../_interface/icon';
+import { ICONS } from '../../../../../../_constants/constants';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ItinerariesRoutesEnum } from '../../../../../../_enums/ItenariesRoutes.enum';
+import { Itinerary } from '../../../../../../_models/Itinerary';
+import { ItineraryService } from '../../../../../../_services/itinerary.service';
+import { LocationService } from '../../../../../../_services/location.service';
+import { LibMapsComponent } from '@naniteninja/ionic-lib';
+import { ItineraryDrawModeTransferService } from '../../../../../../_services/itinerary.drawmode.transfer';
+import { IConditions } from '../../../../../../_interface/conditions';
+const defaultIcon = 'assets/icons/map-markers-yellow.svg';
+const selectedIcon = 'assets/icons/restu-icon-large.svg';
+
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'lib-create-itinerary-no-visual-filter',
+  templateUrl: './create-itinerary-no-visual-filter.component.html',
+  styleUrl: './create-itinerary-no-visual-filter.component.css'
+})
+export class CreateItineraryNoVisualFilterComponent implements OnInit, AfterViewInit {
+  ICONS: Iicon = ICONS;
+  isOpen = true;
+  actions: string[] = [ICONS['location'], ICONS['pencil'], ICONS['ban']];
+  selected: string = this.actions[2];
+  itinerary!: Itinerary | undefined;
+  @ViewChild('libMap') libMap!: LibMapsComponent;
+  initialLocation = { lat: 24.8607, lng: 67.0011 };
+  selectedMarkers: google.maps.Marker[] = [];
+  placeMarkers: {
+    marker: google.maps.Marker,
+    place: google.maps.places.PlaceResult
+  }[] = [];
+  openFilters: boolean = false;
+  plottedMarkers: google.maps.Marker[] = [];
+
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private itineraryService: ItineraryService,
+    private locationService: LocationService,
+    private cdr: ChangeDetectorRef,
+    private transferService: ItineraryDrawModeTransferService
+  ) {
+
+  }
+
+  searchRestaurantsInView() {
+    const map = this.libMap.map.googleMap!;
+    if (map) {
+      const bounds = map.getBounds(); // Get current visible area
+      if (!bounds) return;
+
+      const service = new google.maps.places.PlacesService(map);
+
+      service.nearbySearch(
+        {
+          bounds: bounds,
+          type: 'restaurant',
+        },
+        (
+          results: google.maps.places.PlaceResult[] | null,
+          status: google.maps.places.PlacesServiceStatus,
+        ) => {
+          if (status === google.maps.places.PlacesServiceStatus.OK && results) {
+            results.forEach((place: google.maps.places.PlaceResult) => {
+              this.addCustomMarker(place);
+            });
+          }
+        },
+      );
+    }
+  }
+
+  addCustomMarker(place: google.maps.places.PlaceResult) {
+    const marker = new google.maps.Marker({
+      map: this.libMap.map.googleMap,
+      position: place.geometry?.location,
+      title: place.name,
+      icon: {
+        url: 'assets/icons/map-markers-yellow.svg',
+      },
+    });
+    this.plottedMarkers.push(marker);
+    this.placeMarkers.push({
+      place: place,
+      marker: marker
+    });
+    marker.addListener('click', () => {
+      // Toggle selection
+      const index = this.selectedMarkers.indexOf(marker);
+
+      if (index > -1) {
+        // Marker was already selected → deselect
+        marker.setIcon(defaultIcon);
+        this.selectedMarkers.splice(index, 1);
+      } else {
+        // Select marker
+        marker.setIcon(selectedIcon);
+        this.selectedMarkers.push(marker);
+      }
+    });
+  }
+
+  continueBuilding() {
+    const selectedPlaces = this.selectedMarkers.map((selectedMarker) => {
+      const placeMarker = this.placeMarkers.find(placeMarker => placeMarker.marker === selectedMarker);
+      return placeMarker!.place;
+    });
+    const allPlaces = this.placeMarkers.map(placeMarker => placeMarker.place);
+    this.transferService.setPlaces(allPlaces);
+    this.transferService.setSelectedPlaces(selectedPlaces);
+    this.transferService.setCurrentLocation(this.initialLocation);
+
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATE_ITINERARY_NO_VISUAL_FILTER_MODE,
+      ItinerariesRoutesEnum.CREATE_ITINERARY_NO_VISUAL_FILTER_MODE_PREVIEW,
+      this.itinerary?.id
+    ]);
+  }
+
+  ngAfterViewInit() {
+      this.locationService.getCurrentLocation()
+      .subscribe((location) => {
+        this.libMap.map.googleMap?.setCenter({
+          lat: location.lat,
+          lng: location.long
+        });
+
+        //Set the initial location of the user
+        this.initialLocation = {
+          lat: location.lat,
+          lng: location.long
+        }
+        this.libMap.map.googleMap?.setZoom(15);
+
+        //Add marker for user position
+        new google.maps.Marker({
+          map: this.libMap.map.googleMap,
+          position: {
+            lat: location.lat,
+            lng: location.long
+          },
+          title: 'You are here',
+          icon: {
+            url: 'assets/current_location.svg',
+            scaledSize: new google.maps.Size(40, 40),
+          },
+        });
+
+        this.searchRestaurantsInView();
+      });
+  }
+
+  showBottomModal(): void {
+    this.isOpen = true;
+    this.cdr.detectChanges();
+  }
+
+  ngOnInit(): void {
+    const id = this.activatedRoute.snapshot.params['id'];
+    if (id) {
+      this.itinerary = this.itineraryService.getById(id);
+    }
+  }
+
+  toggleFilter() {
+    this.openFilters = !this.openFilters;
+  }
+
+  onPresetsChanged(conditions: IConditions[]) {
+    this.filterPlacesInView(conditions);
+  }
+
+  onbackButtonClicked() {
+    this.toggleFilter();
+  }
+
+  updateAction(action: string) {
+      this.selected = action;
+      if(action === this.actions[0]) {
+        this.router.navigate([
+          ItinerariesRoutesEnum.ITINERARY,
+          ItinerariesRoutesEnum.CREATE_ITINERARY_ORIGIN,
+          this.itinerary?.id
+        ]);
+      }
+      if(action === this.actions[1]) {
+        this.router.navigate([
+          ItinerariesRoutesEnum.ITINERARY,
+          ItinerariesRoutesEnum.CREATE_ITINERARY_DRAW_MODE,
+          ItinerariesRoutesEnum.CREATE_ITINERARY_DRAW_MODE_CREATE,
+          this.itinerary?.id,
+        ]);
+      }
+    }
+
+  filterPlacesInView(filters: IConditions[]) {
+  const map = this.libMap.map.googleMap!;
+    if (map) {
+      const bounds = map.getBounds(); // Get current visible area
+      if (!bounds) return;
+
+      const service = new google.maps.places.PlacesService(map);
+
+      // Extract values from filters
+      let typeFilter: string | boolean;
+      let openNowFilter: boolean | undefined;
+      let ratingFilter: number | undefined;
+
+      filters.forEach((filter: IConditions) => {
+        if (filter.field === 'type') {
+          typeFilter = filter.condition;
+        } else if (filter.field === 'open_now') {
+          openNowFilter = filter.condition === 'true';
+        } else if (filter.field === 'rating') {
+          const match = (filter.condition as string).match(/>=\s*(\d+(?:\.\d+)?)/);
+          if (match) {
+            ratingFilter = parseFloat(match[1]);
+          }
+        }
+      });
+
+      service.nearbySearch(
+        {
+          bounds: bounds,
+          type: typeFilter! as string, // e.g. 'restaurant'
+          openNow: openNowFilter, // true or false
+        },
+        (
+          results: google.maps.places.PlaceResult[] | null,
+          status: google.maps.places.PlacesServiceStatus
+        ) => {
+          if (status === google.maps.places.PlacesServiceStatus.OK && results) {
+            const filtered = ratingFilter
+              ? results.filter(place => {
+                  const rating = place.rating ?? 0;
+                  return rating >= ratingFilter!;
+                })
+              : results;
+            if(this.plottedMarkers.length) {
+              this.plottedMarkers.forEach((marker) => {
+                marker.setMap(null);
+              });
+            }
+            this.selectedMarkers = [];
+            filtered.forEach(place => {
+              this.addCustomMarker(place);
+            });
+          }
+        }
+      );
+    }
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-no-visual-preview/create-itinerary-no-visual-preview.component.css

@@ -0,0 +1,4 @@
+.button-container {
+    background-color: #27242C;
+    box-shadow: inset 0px 6px 6px -6px rgba(138, 138, 138, 0.67);
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-no-visual-preview/create-itinerary-no-visual-preview.component.html

@@ -0,0 +1,186 @@
+<app-create-itinerary-header
+  [progressBarValue]="100"
+  heading="Create Itinerary"
+></app-create-itinerary-header>
+<lib-map #libMap class="maps-100vh"></lib-map>
+
+<lib-bottom-modal
+    [(isOpen)]="isOpen"
+>
+    <div class="pl-4 pr-4">
+    <div class="ml-auto flex items-center justify-center gap-x-2">
+    <div class="flex items-center gap-x-1 text-xs">
+        <img
+        loading="lazy"
+        [src]="ICONS['locationWhite']"
+        alt="location"
+        />
+        <span>{{transferService.selectedPlaces?.length}} {{ "ITINERARY_SUMMARY.PLACES" | translate }}</span>
+    </div>
+    <div class="h-4 border w-0 border-secondary"></div>
+    <div class="flex items-center justify-center gap-x-2 text-xs">
+        <img loading="lazy" [src]="ICONS['clock']" alt="" />
+        <span>45 {{ "DATE_TIME.MINUTES" | translate }}</span>
+        <span class="text-secondary font-thin">(6.6 Km)</span>
+    </div>
+    </div>
+    <div
+    class="border border-dashed opacity-55 rotate-90 absolute -left-6 top-36"
+    ></div>
+    <div class="font-Gilroy mt-5 mb-3 flex flex-col gap-y-5">
+        <div
+            class="flex items-center justify-between w-full gap-x-4 mb-1"
+        >
+            <div class="flex items-center justify-start gap-x-6">
+            <div
+                class="z-50 icon w-8 h-8 outset-shadow flex items-center justify-center rounded-full relative"
+            >
+                <img
+                loading="lazy"
+                height="22"
+                width="18"
+                [src]="ICONS['startLocation']"
+                alt=""
+                />
+                <img
+                loading="lazy"
+                loading="lazy"
+                class="dotted-line"
+                src="assets/images/dotted-line.svg"
+                />
+            </div>
+            <div class="text">
+                <h2
+                class="f-sm f-xs flex items-center gap-x-1 text-xs mb-1"
+                >
+                Shan-ul-haq haqee road
+                </h2>
+                <p class="f-xs text-secondary text-xs mb-1">
+                Starting location
+                </p>
+            </div>
+            </div>
+            <div class="flex items-center gap-x-3">
+            <img
+                class="w-[15px] h-[15px] cursor-pointer"
+                loading="lazy"
+                [src]="ICONS['editPink']"
+                alt=""
+            />
+            </div>
+        </div>
+
+        <div
+            class="flex items-center justify-between w-full gap-x-4 mb-1"
+        >
+            <div class="flex items-center justify-start gap-x-6">
+            <div
+                class="z-50 icon w-8 h-8 outset-shadow flex items-center justify-center rounded-full relative"
+            >
+                <img
+                loading="lazy"
+                height="22"
+                width="18"
+                [src]="ICONS['restu']"
+                alt=""
+                />
+                <img
+                loading="lazy"
+                loading="lazy"
+                class="dotted-line"
+                src="assets/images/dotted-line.svg"
+                />
+            </div>
+            <div class="text">
+                <h2
+                class="f-sm f-xs flex items-center gap-x-1 text-xs mb-1"
+                >
+                Kabul tikka
+                </h2>
+                <p class="f-xs text-secondary text-xs mb-1">
+                Afghan cuisine
+                </p>
+            </div>
+            </div>
+            <div class="flex items-center gap-x-3">
+            <img
+                loading="lazy"
+                [src]="ICONS['hamburger']"
+                alt=""
+                class="w-[15px] h-[15px] cursor-pointer"
+            />
+            <img
+                loading="lazy"
+                [src]="ICONS['deletePink']"
+                alt=""
+                class="w-[15px] h-[15px] cursor-pointer"
+            />
+            </div>
+        </div>
+
+        <div
+            class="flex items-center justify-between w-full gap-x-4 mb-1"
+        >
+            <div class="flex items-center justify-start gap-x-6">
+            <div
+                class="z-50 icon w-8 h-8 outset-shadow flex items-center justify-center rounded-full relative"
+            >
+                <img
+                loading="lazy"
+                height="22"
+                width="18"
+                [src]="ICONS['restu']"
+                alt=""
+                />
+                <img
+                loading="lazy"
+                loading="lazy"
+                class="dotted-line"
+                src="assets/images/dotted-line.svg"
+                />
+            </div>
+            <div class="text">
+                <h2
+                class="f-sm f-xs flex items-center gap-x-1 text-xs mb-1"
+                >
+                Quetta TNT
+                </h2>
+                <p class="f-xs text-secondary text-xs mb-1">Tea Coffee</p>
+            </div>
+            </div>
+            <div class="flex items-center gap-x-3">
+            <img
+                loading="lazy"
+                [src]="ICONS['hamburger']"
+                alt=""
+                class="w-[15px] h-[15px] cursor-pointer"
+            />
+            <img
+                loading="lazy"
+                [src]="ICONS['deletePink']"
+                alt=""
+                class="w-[15px] h-[15px] cursor-pointer"
+            />
+            </div>
+        </div>
+        </div>
+  </div>
+  <lib-footer-shared
+    (continueButtonClick)="preview()"
+    [canContinue]="true"
+    [continueButtonText]="'ITINERARY.PREVIEW' | translate"
+  ></lib-footer-shared>
+</lib-bottom-modal>
+<div
+  (click)="showBottomModal()"
+  class="absolute bottom-0 cursor-pointer z-10"
+  style="left: 50%"
+>
+  <img
+    style="transform: rotate(270deg)"
+    [src]="ICONS['rightArrow']"
+    alt="icon"
+    height="15"
+    width="15"
+  />
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-no-visual-preview/create-itinerary-no-visual-preview.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateItineraryNoVisualPreviewComponent } from './create-itinerary-no-visual-preview.component';
+
+describe('CreateItineraryNoVisualPreviewComponent', () => {
+  let component: CreateItineraryNoVisualPreviewComponent;
+  let fixture: ComponentFixture<CreateItineraryNoVisualPreviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CreateItineraryNoVisualPreviewComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CreateItineraryNoVisualPreviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-no-visual-preview/create-itinerary-no-visual-preview.component.ts

@@ -0,0 +1,177 @@
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { ItineraryDrawModeTransferService } from '../../../../../../_services/itinerary.drawmode.transfer';
+import { Iicon } from '../../../../../../_interface/icon';
+import { ICONS } from '../../../../../../_constants/constants';
+import { LibMapsComponent } from '@naniteninja/ionic-lib';
+const defaultIcon = 'assets/icons/map-markers-yellow.svg';
+const selectedIcon = 'assets/icons/restu-icon-large.svg';
+
+
+@Component({
+  selector: 'lib-create-itinerary-no-visual-preview',
+  templateUrl: './create-itinerary-no-visual-preview.component.html',
+  styleUrl: './create-itinerary-no-visual-preview.component.css'
+})
+export class CreateItineraryNoVisualPreviewComponent implements AfterViewInit {
+  ICONS: Iicon = ICONS;
+  isOpen: boolean = true;
+  selectedMarkers: google.maps.Marker[] = [];//Selected markers on the map
+  placesResult!: google.maps.places.PlaceResult[];//Places result required for preview
+  placeMarkers!: {
+    marker: google.maps.Marker,
+    place: google.maps.places.PlaceResult
+  }[]
+  allMarkers: google.maps.Marker[] = [];
+  @ViewChild('libMap') libMap!: LibMapsComponent;
+  constructor(
+    public transferService: ItineraryDrawModeTransferService
+  ) {
+  }
+
+  preview() {
+    
+  }
+
+  ngAfterViewInit() {
+    this.libMap.map.googleMap?.setCenter(this.transferService.location);
+    this.libMap.map.googleMap?.setZoom(15);
+
+    //Add marker for user position
+    new google.maps.Marker({
+      map: this.libMap.map.googleMap,
+      position: this.transferService.location,
+      title: 'You are here',
+      icon: {
+        url: 'assets/current_location.svg',
+        scaledSize: new google.maps.Size(40, 40),
+      },
+    });
+    this.addMarkersToMap(this.libMap.map.googleMap!);
+  }
+
+    addMarkersToMap(map: google.maps.Map) {
+    const selectedPlaceIds = new Set(this.transferService.selectedPlaces.map(p => p.place_id));
+
+    // Clear existing markers
+    this.allMarkers.forEach(marker => marker.setMap(null));
+    this.allMarkers = [];
+
+    // Plot selected places in RED
+    this.transferService.selectedPlaces.forEach(place => {
+      if (place.geometry?.location) {
+        const marker = new google.maps.Marker({
+          map,
+          position: place.geometry.location,
+          title: place.name,
+          icon: {
+            url: selectedIcon
+          }
+        });
+        this.selectedMarkers.push(marker);
+        this.allMarkers.push(marker);
+      }
+    });
+
+    // Plot non-selected places (avoid duplicates) in DEFAULT
+    this.transferService.places.forEach(place => {
+      if (
+        place.geometry?.location &&
+        !selectedPlaceIds.has(place.place_id)
+      ) {
+        const marker = new google.maps.Marker({
+          map,
+          position: place.geometry.location,
+          title: place.name,
+          icon: {
+            url: defaultIcon
+          }
+        });
+        this.allMarkers.push(marker);
+      }
+    });
+
+    this.optimizeAndRender();
+  }
+
+  showBottomModal(): void {
+    this.isOpen = true;
+  }
+
+  optimizeAndRender() {
+    if (this.selectedMarkers.length < 2) return;
+
+    // Sort markers based on latitude (optional — adjust this logic as per your direction needs)
+    this.selectedMarkers.sort((a, b) => {
+      const posA = a.getPosition();
+      const posB = b.getPosition();
+      if (!posA) return 1;
+      if (!posB) return -1;
+      return posB.lat() - posA.lat();
+    });
+
+    const markerPositions = this.selectedMarkers
+      .map(m => m.getPosition())
+      .filter((p): p is google.maps.LatLng => !!p);
+
+    if (markerPositions.length < 2) return;
+
+    const destination = markerPositions[markerPositions.length - 1];
+    const startPos = markerPositions[0];
+
+    // Calculate a synthetic starting point slightly before the first marker (northwards)
+    const OFFSET_METERS = 50; // adjust this for how far back the path should start
+    const syntheticStart = google.maps.geometry.spherical.computeOffset(startPos, -OFFSET_METERS, 180);
+
+    const waypoints: google.maps.DirectionsWaypoint[] = markerPositions.map(pos => ({
+      location: pos,
+      stopover: true
+    }));
+
+    const directionsService = new google.maps.DirectionsService();
+    const directionsRenderer = new google.maps.DirectionsRenderer({
+      map: this.libMap.map.googleMap!,
+      suppressMarkers: true,
+      polylineOptions: {
+        strokeColor: '#FFFFFF',
+        strokeOpacity: 1.0,
+        strokeWeight: 4,
+      }
+    });
+
+    directionsService.route(
+      {
+        origin: syntheticStart,
+        destination,
+        waypoints,
+        travelMode: google.maps.TravelMode.DRIVING,
+        optimizeWaypoints: false,
+      },
+      (response, status) => {
+        if (status === google.maps.DirectionsStatus.OK && response) {
+          directionsRenderer.setDirections(response);
+
+          // Draw custom markers
+          new google.maps.Marker({
+            position: syntheticStart,
+            map: this.libMap.map.googleMap!,
+            icon: {
+              url: 'assets/icons/start-loc-marker.svg',
+              scaledSize: new google.maps.Size(30, 30),
+            },
+            title: 'Start Point',
+          });
+
+          new google.maps.Marker({
+            position: destination,
+            map: this.libMap.map.googleMap!,
+            icon: {
+              url: 'assets/icons/en-location.svg',
+              scaledSize: new google.maps.Size(30, 30),
+            },
+            title: 'End Point',
+          });
+        }
+      }
+    );
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-start-location/create-itinerary-start-location.component.css

@@ -0,0 +1,38 @@
+:host {
+  --lib-popup-modal-radius: 16px;
+  --border-radius: var(--lib-popup-modal-radius);
+  --lib-popup-modal-background: #28252d !important;
+  --background: #28252d !important;
+  --overflow: hidden !important;
+  --lib-popup-modal-color: #a8a8a8;
+  --color: var(--lib-popup-modal-color, #a8a8a8);
+  --max-width: var(--lib-bottom-modal-max-width, 500px);
+  --lib-popup-modal-shadow:
+    5px 5px 95px 0px rgba(255, 255, 255, 0.32),
+    -3px -3px 16px 0px rgba(255, 255, 255, 0.1) !important;
+  --box-shadow: var(
+    --lib-popup-modal-shadow,
+    5px 5px 95px 0px rgba(255, 255, 255, 0.32),
+    -3px -3px 16px 0px rgba(255, 255, 255, 0.1)
+  );
+}
+
+.selectables {
+  border-radius: 27.9px;
+  background: rgba(40, 37, 45, 1);
+  box-shadow: 4.1px 4.1px 8.2px 0px rgba(0, 0, 0, 0.32) inset;
+  box-shadow: -2.46px -2.46px 3.28px 0px rgba(255, 255, 255, 0.1) inset;
+  border-radius: 27.9px;
+}
+
+.actions {
+  width: 42px;
+  height: 28px;
+  border-radius: 82.05px;
+}
+
+.selected {
+  background: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%);
+  box-shadow: 3.28px 3.28px 6.56px 0px rgba(0, 0, 0, 0.25);
+  box-shadow: -1.64px -1.64px 8.2px 0px rgba(255, 255, 255, 0.25);
+}