@flower-city-online/itinerary-lib 0.0.7 → 0.0.10

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

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

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

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

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