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

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-draw-mode/create-itinerary-draw-mode.component.ts

@@ -1,318 +0,0 @@
-import { Location } from '@angular/common';
-import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
-import { ICONS } from '../../../../../../_constants/constants';
-import { Iicon } from '../../../../../../_interface/icon';
-import { Itinerary } from '../../../../../../_models/Itinerary';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ItineraryService } from '../../../../../../_services/itinerary.service';
-import { ItinerariesRoutesEnum } from '../../../../../../_enums/ItenariesRoutes.enum';
-import { LibMapsComponent } from '@naniteninja/ionic-lib';
-import { LocationService } from '../../../../../../_services/location.service';
-import { ItineraryDrawModeTransferService } from '../../../../../../_services/itinerary.drawmode.transfer';
-const defaultIcon = 'assets/icons/map-markers-yellow.svg';
-const selectedIcon = 'assets/icons/restu-icon-large.svg';
-
-@Component({
-  selector: 'lib-create-itinerary-draw-mode',
-  templateUrl: './create-itinerary-draw-mode.component.html',
-  styleUrl: './create-itinerary-draw-mode.component.css'
-})
-export class CreateItineraryDrawModeComponent {
-  ICONS: Iicon = ICONS;
-  actions: string[] = [ICONS['location'], ICONS['pencil'], ICONS['ban']];
-  selected: string = this.actions[1];
-  isOpen: boolean = true;
-  itinerary!: Itinerary | undefined;
-  @ViewChild('libMap') libMap!: LibMapsComponent;
-  mapDrawn: boolean = false;
-
-  polygon!: google.maps.Polygon;//The polygon rendered on map
-  initialLocation = { lat: 24.8607, lng: 67.0011 };//Location of the user
-  plottedMarkers: google.maps.Marker[] = [];//Plotted markers on the map
-  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
-  }[] = [];
-
-  //LIFE CYCLES
-  constructor(
-    private location: Location,
-    private cdr: ChangeDetectorRef,
-    private router: Router,
-    private activatedRoute: ActivatedRoute,
-    private itineraryService: ItineraryService,
-    private locationService: LocationService,
-    private transferService: ItineraryDrawModeTransferService
-  ) {}
-
-  ngOnInit(): void {
-    const id = this.activatedRoute.snapshot.params['id'];
-    if (id) {
-      this.itinerary = this.itineraryService.getById(id);
-    }
-  }
-
-  //UI LOGIC
-  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[2]) {
-      this.router.navigate([
-        ItinerariesRoutesEnum.ITINERARY,
-        ItinerariesRoutesEnum.CREATE_ITINERARY_NO_VISUAL_FILTER_MODE,
-        ItinerariesRoutesEnum.CREATE_ITINERARY_NO_VISUAL_FILTER_MODE_CREATE,
-        this.itinerary?.id
-      ]);
-    }
-  }
-
-  showBottomModal(): void {
-    this.isOpen = true;
-    this.cdr.detectChanges();
-  }
-
-  searchRestaurantsInPolygon(
-    polygonCoords:
-      | Array<{
-          lat: number;
-          lng: number;
-        }>
-      | undefined,
-  ) {
-    if (polygonCoords) {
-      this.mapDrawn = true;
-      const bounds = new google.maps.LatLngBounds();
-      polygonCoords.forEach((coord) => bounds.extend(coord));
-
-      const service = new google.maps.places.PlacesService(
-        this.libMap.map.googleMap!,
-      );
-
-      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) {
-            const filteredResults = results.filter((place) => {
-              const location = place.geometry?.location;
-              if (!location) return false;
-              return google.maps.geometry.poly.containsLocation(location, this.polygon);
-            });
-
-            this.placesResult = filteredResults;
-            filteredResults.forEach((place: google.maps.places.PlaceResult) => {
-              this.addCustomMarker(place);
-            });
-            this.mapDrawn = true;
-          }
-        },
-      );
-    }
-  }
-
-  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);
-      }
-    });
-  }
-
-  clearMap() {
-    this.mapDrawn = false;
-    if(this.polygon) {
-      this.polygon.setMap(null);
-    }
-    this.clearMarkers();
-  }
-
-  continue() {
-    const coordinates: Array<{ lat: number; lng: number }> = [];
-    this.polygon.getPath().forEach(coord => {
-      coordinates.push({ lat: coord.lat(), lng: coord.lng() });
-    });
-    this.transferService.setPolygon(coordinates);
-
-    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_DRAW_MODE,
-      ItinerariesRoutesEnum.CREATE_ITINERARY_DRAW_MODE_PREVIEW,
-      this.itinerary?.id
-    ]);
-  }
-
-  clearPolygonIfExist() {
-    if(this.polygon) {
-      this.polygon.setMap(null);
-    }
-  }
-
-  clearMarkers() {
-    if(this.plottedMarkers?.length) {
-      this.plottedMarkers?.forEach((plottedMarker) => plottedMarker.setMap(null));
-    } 
-  }
-
-  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),
-          },
-        });
-
-        // Enable polygon drawing
-        const drawingManager = new google.maps.drawing.DrawingManager({
-          drawingMode: google.maps.drawing.OverlayType.POLYGON,
-          drawingControl: true,
-          drawingControlOptions: {
-            position: google.maps.ControlPosition.RIGHT_CENTER,
-            drawingModes: [google.maps.drawing.OverlayType.POLYGON],
-          },
-          polygonOptions: {
-            strokeColor: '#E17575',
-            strokeOpacity: 0,
-            strokeWeight: 0,
-            fillColor: '#E17575',
-            fillOpacity: 0.3,
-            clickable: true,
-            editable: true,
-            zIndex: 1,
-          },
-        });
-        drawingManager.setMap(this.libMap.map.googleMap!);
-
-        google.maps.event.addListener(drawingManager, 'drawingmode_changed', () => {
-          const mode = drawingManager.getDrawingMode();
-          if (mode === google.maps.drawing.OverlayType.POLYGON) {
-            this.clearPolygonIfExist();
-          }
-        });
-
-        // Listen for polygon completion
-        google.maps.event.addListener(drawingManager, 'overlaycomplete', (event: google.maps.drawing.OverlayCompleteEvent) => {
-          if (event.type === google.maps.drawing.OverlayType.POLYGON) {
-            const polygon = event.overlay as google.maps.Polygon;
-            this.polygon = polygon;
-            // Disable drawing after one polygon
-            drawingManager.setDrawingMode(null);
-
-            // Access the polygon coordinates
-            const path = polygon.getPath();
-            const coordinates: Array<any> = [];
-            path.forEach((coord: any) => {
-              coordinates.push({ lat: coord.lat(), lng: coord.lng() });
-            });
-
-            this.searchRestaurantsInPolygon(coordinates);
-          }
-        });
-    });
-  }
-
-  //NAVIGATIONS
-  back(): void {
-    this.location.back();
-  }
-
-  navToPickStartLocation() {
-    this.router.navigate(
-      [
-        ItinerariesRoutesEnum.ITINERARY,
-        ItinerariesRoutesEnum.LOCATION_PICKER,
-        this.itinerary?.id,
-      ],
-      { queryParams: { mode: 'start' } },
-    );
-  }
-
-  getClosestPointOnPolygon(polygon: google.maps.Polygon, point: google.maps.LatLng): google.maps.LatLng {
-    const path = polygon.getPath();
-    let closestPoint = null;
-    let minDistance = Infinity;
-
-    for (let i = 0; i < path.getLength(); i++) {
-      const start = path.getAt(i);
-      const end = path.getAt((i + 1) % path.getLength());
-
-      // Interpolate points along the segment
-      for (let t = 0; t <= 1; t += 0.05) {
-        const interp = google.maps.geometry.spherical.interpolate(start, end, t);
-        const dist = google.maps.geometry.spherical.computeDistanceBetween(point, interp);
-        if (dist < minDistance) {
-          minDistance = dist;
-          closestPoint = interp;
-        }
-      }
-    }
-
-    return closestPoint!;
-  }
-}

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

@@ -1,47 +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);
-}
-
-.select-places-text, .select-places-description {
-  font-size: var(--font-size-small);
-}
-
-.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-draw-preview/create-itinerary-draw-preview.component.html

@@ -1,187 +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
-  [showArrow]="true"
-  [(isOpen)]="isOpen"
-  [adaptToContentHeight]="true"
->
-  <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)="continue()"
-        [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-draw-preview/create-itinerary-draw-preview.component.spec.ts

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