@flower-city-online/itinerary-lib 0.0.31 → 0.0.32

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

@@ -0,0 +1,275 @@
+import { Location } from '@angular/common';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, 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 { ItineraryDrawModeTransferService } from '../../../../../../_services/itinerary.drawmode.transfer';
+const defaultIcon = 'assets/icons/map-markers-yellow.svg';
+const selectedIcon = 'assets/icons/restu-icon-large.svg';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'lib-create-itinerary-draw-preview',
+    templateUrl: './create-itinerary-draw-preview.component.html',
+    styleUrl: './create-itinerary-draw-preview.component.css',
+    standalone: false
+})
+export class CreateItineraryDrawPreviewComponent implements OnInit, AfterViewInit {
+  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
+  }[]
+  allMarkers: google.maps.Marker[] = [];
+
+  //LIFE CYCLES
+  constructor(
+    private location: Location,
+    private cdr: ChangeDetectorRef,
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private itineraryService: ItineraryService,
+    public transferService: ItineraryDrawModeTransferService
+  ) {}
+
+  ngOnInit(): void {
+    const id = this.activatedRoute.snapshot.params['id'];
+    if (id) {
+      this.itinerary = this.itineraryService.getById(id);
+    }
+  }
+
+
+  drawPolygon() {
+    this.polygon = new google.maps.Polygon({
+      paths: this.transferService.polygonCoords,
+      strokeColor: '#E17575',
+      strokeOpacity: 0,
+      strokeWeight: 0,
+      fillColor: '#E17575',
+      fillOpacity: 0.3,
+      clickable: true,
+      editable: true,
+      zIndex: 1,
+    });
+
+    this.polygon.setMap(this.libMap.map.googleMap!); // Add to map
+  }
+
+
+  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);
+      }
+    });
+  }
+
+  //UI LOGIC
+  updateAction(action: string) {
+    this.selected = action;
+  }
+
+  showBottomModal(): void {
+    this.isOpen = true;
+    this.cdr.detectChanges();
+  }
+
+  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
+    });
+  }
+
+  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!);
+      this.drawPolygon();
+      this.optimizeAndRender();
+  }
+
+  //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!;
+  }
+
+  continue() {
+    
+  }
+
+  optimizeAndRender() {
+    this.selectedMarkers.sort((a, b) => {
+      const posA = a.getPosition();
+      const posB = b.getPosition();
+      if (!posA) return 1;
+      if (!posB) return -1;
+      return posA.lat() - posB.lat();
+    });
+
+    const markerPositions = this.selectedMarkers
+      .map(m => m.getPosition())
+      .filter((p): p is google.maps.LatLng => !!p);
+
+    if (markerPositions.length < 2 || !this.polygon) return;
+
+    const origin = this.getClosestPointOnPolygon(this.polygon, markerPositions[markerPositions.length - 1]);
+    const destination = this.getClosestPointOnPolygon(this.polygon, markerPositions[0]);
+
+    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,
+        destination,
+        waypoints,
+        travelMode: google.maps.TravelMode.DRIVING,
+        optimizeWaypoints: false
+      },
+      (response, status) => {
+        if (status === google.maps.DirectionsStatus.OK && response) {
+          directionsRenderer.setDirections(response);
+
+          new google.maps.Marker({
+            position: origin,
+            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-header/create-itinerary-header.component.css

@@ -0,0 +1,8 @@
+.discard {
+  width: 46px;
+  height: 18px;
+  font-family: Calistoga;
+  font-weight: 400;
+  font-size: 12px;
+  letter-spacing: 0%;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-header/create-itinerary-header.component.html

@@ -0,0 +1,26 @@
+<div [class]="'bottom-rounded-container fixed top-0 z-10 ' + class">
+  <lib-percentage-bar
+    class="primary-percentage-bar"
+    [value]="progressBarValue"
+  ></lib-percentage-bar>
+  <ng-template #suffix>
+    <span class="discard" (click)="showPopup()">Discard?</span>
+  </ng-template>
+  <lib-popup
+    [isOpen]="isOpen"
+    [icon]="ICONS['infoBig']"
+    cancelButton="Cancel"
+    confirmButton="Yes"
+    message="Are you sure you want to discard the itinerary creating progress?"
+    (modalConfirm)="hidePopupAndNavigate()"
+    (modalDismiss)="hidePopup()"
+  >
+  </lib-popup>
+
+  <app-header
+    cssClass="!pt-2 pl-3 pr-3"
+    (firstButton)="back()"
+    [heading]="heading"
+    [headerSuffixTemplate]="suffix"
+  ></app-header>
+</div>

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

@@ -0,0 +1,54 @@
+import { Location } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';  
+import { ItinerariesRoutesEnum } from '../../../../../../_enums/ItenariesRoutes.enum';
+import { Iicon } from '../../../../../../_interface/icon';
+import { ICONS } from '../../../../../../_constants/constants';
+@Component({
+    selector: 'app-create-itinerary-header',
+    templateUrl: './create-itinerary-header.component.html',
+    styleUrl: './create-itinerary-header.component.css',
+    standalone: false
+})
+export class CreateItineraryHeaderComponent {
+  @Input() heading: string = '';
+  @Input() progressBarValue: number = 0;
+  @Input() discardItineraryId: string = '';
+  @Input() class: string = '';
+  protected ICONS: Iicon = ICONS;
+  protected isOpen: boolean = false;
+
+  //LIFE CYCLE
+  constructor(
+    private router: Router,
+    private location: Location,
+  ) {}
+
+  //UI LOGIC
+  showPopup(): void {
+    this.isOpen = true;
+  }
+
+  hidePopup(): void {
+    this.isOpen = false;
+  }
+
+  hidePopupAndNavigate(): void {
+    this.isOpen = false;
+    setTimeout(() => {
+      this.navToItineraryExplore();
+    }, 0);
+  }
+
+  //NAVIGATIONS
+  back(): void {
+    this.location.back();
+  }
+
+  navToItineraryExplore(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.EXPLORE,
+    ]);
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-member-details/create-itinerary-member-details.component.html

@@ -0,0 +1,31 @@
+<ng-template #suffixTemplate>
+  <img [src]="ICONS['horizontal']" alt="icon" />
+</ng-template>
+<app-header
+  (firstButton)="back()"
+  [headerSuffixTemplate]="suffixTemplate"
+  heading="Member Details"
+></app-header>
+
+<div class="p-4">
+  <div class="flex items-center justify-center flex-col">
+    <img
+      class="rounded-full"
+      [src]="ICONS['dummyUserProfile']"
+      height="114px"
+      width="114px"
+      alt="user profile"
+    />
+    <h3 class="font-Calistoga text-lg mt-4 mb-2">Jakob Vaccaro</h3>
+    <p>{{ "jackobvaccaro@gmail.com" }}</p>
+  </div>
+
+  <hr class="mt-5 mb-4 divider" />
+
+  <span>Favorite Food</span>
+  <lib-selectable [options]="foodOptions"></lib-selectable>
+
+  <hr class="mt-5 mb-4 divider" />
+  <span>Favorite Destination</span>
+  <lib-selectable [options]="foodOptions"></lib-selectable>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-member-details/create-itinerary-member-details.component.ts

@@ -0,0 +1,58 @@
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
+import { SelectOption } from '@naniteninja/ionic-lib'; 
+import { Iicon } from '../../../../../../_interface/icon'; 
+import { ICONS } from '../../../../../../_constants/constants';
+
+@Component({
+    selector: 'app-create-itinerary-member-details',
+    templateUrl: './create-itinerary-member-details.component.html',
+    styleUrl: './create-itinerary-member-details.component.css',
+    standalone: false
+})
+export class CreateItineraryMemberDetailsComponent {
+  ICONS: Iicon = ICONS;
+  foodOptions: SelectOption<string>[] = [
+    {
+      value: 'Viynasa',
+      label: 'Viynasa',
+      image: ICONS['food'],
+    },
+    {
+      value: 'Italian',
+      label: 'Italian',
+      image: ICONS['food'],
+    },
+    {
+      value: 'Boston Cream Pie',
+      label: 'Boston Cream Pie',
+      image: ICONS['food'],
+    },
+  ];
+
+  destinationOptions: SelectOption<string>[] = [
+    {
+      value: 'Bali - Indonesia',
+      label: 'Bali - Indonesia',
+      image: ICONS['food'],
+    },
+    {
+      value: 'Paris - France',
+      label: 'Paris - France',
+      image: ICONS['food'],
+    },
+    {
+      value: 'Dubai - United Arab Emirates',
+      label: 'Dubai - United Arab Emirates',
+      image: ICONS['food'],
+    },
+  ];
+
+  //LIFE CYCLES
+  constructor(private location: Location) {}
+
+  //NAVIGATIONS
+  back(): void {
+    this.location.back();
+  }
+}

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

@@ -0,0 +1,53 @@
+: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);
+}
+
+
+.button-container {
+    background-color: #27242C;
+    box-shadow: inset 0px 6px 6px -6px rgba(138, 138, 138, 0.67);
+}
+
+.filter-page {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  z-index: 99999;
+  top: 0;
+  background-color: #27242C;
+}

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

@@ -0,0 +1,60 @@
+<app-create-itinerary-header
+  [progressBarValue]="50"
+  heading="Create Itinerary"
+></app-create-itinerary-header>
+<img
+    (click)="toggleFilter()"
+    class="cursor-pointer"
+    style="position: absolute; right: 10px; top: 20%; z-index: 99;"
+    [src]="ICONS['dotsIcon']"
+    alt="icon"
+    height="40"
+    width="40"
+  />
+<lib-map #libMap class="maps-100vh"></lib-map>
+<div class="filter-page" *ngIf="openFilters">
+  <lib-no-visual-map-filters
+    (presetsChanged)="onPresetsChanged($event)"
+    (backButtonClicked)="onbackButtonClicked()"
+  ></lib-no-visual-map-filters>
+</div>
+<lib-bottom-modal
+  [showArrow]="true"
+  [(isOpen)]="isOpen"
+  [adaptToContentHeight]="true"
+>
+  <div class="pl-4 pr-4">
+    <div class="flex items-center justify-between">
+      <h3 class="font-Calistoga text-lg">{{ "NO_VISUAL_FILTERS"| translate }}</h3>
+      <div class="selectables flex items-center">
+        <div
+          (click)="updateAction(a)"
+          class="flex items-center justify-center actions"
+          *ngFor="let a of actions"
+          [ngClass]="{ selected: a === selected }"
+        >
+          <img [src]="a" alt="icon" loading="lazy" />
+        </div>
+      </div>
+    </div>
+    <p class="mt-3 mb-4">{{ "NO_VISUAL_FILTERS"| translate }}</p>
+  </div>
+  <lib-footer-shared
+    (continueButtonClick)="continueBuilding()"
+    [canContinue]="true"
+    [continueButtonText]="'COMMON.CONTINUE' | 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-filter/create-itinerary-no-visual-filter.component.spec.ts

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