@flower-city-online/itinerary-lib 0.0.20 → 0.0.21

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

@@ -1,257 +0,0 @@
-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

@@ -1,4 +0,0 @@
-.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

@@ -1,186 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,177 +0,0 @@
-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

@@ -1,38 +0,0 @@
-: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);
-}