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

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/created-itinerary-preview/created-itinerary-detail/created-itinerary-detail.component.html

@@ -1,93 +0,0 @@
-<div class="px-5 py-6">
-  <h2 class="">{{ "ITINERARY_SUMMARY.ROUTE" | translate }}</h2>
-  <div class="main-itini-preview">
-    <section class="mt-3 w-full">
-      <div class="tracking-widest rounded-t-3xl">
-        <div class="tracking-bottom-com">
-          <div class="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
-                >{{ places.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
-              *ngFor="let place of places; let i = index"
-              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 outset-shadow flex items-center justify-center rounded-full h-8 w-8 relative"
-                >
-                  <img
-                    loading="lazy"
-                    height="22"
-                    width="18"
-                    [src]="ICONS['restu']"
-                    alt=""
-                  />
-                  <img
-                    loading="lazy"
-                    loading="lazy"
-                    *ngIf="i !== places.length - 1"
-                    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">
-                    {{ place.name }}
-                    <img loading="lazy" [src]="ICONS['enLocation']" alt="" />
-                  </h2>
-                  <p class="f-xs text-secondary text-xs mb-1">
-                    {{ place.description }}
-                  </p>
-                  <p class="f-xs text-secondary text-xs mb-1">
-                    {{ place.distance }}
-                  </p>
-                </div>
-              </div>
-              <div class="flex items-center gap-x-3">
-                <img
-                  loading="lazy"
-                  [src]="ICONS['groupBinBar']"
-                  alt=""
-                  class="cursor-pointer"
-                />
-              </div>
-              <div class="flex items-center gap-x-3">
-                <app-users-stack [size]="29"></app-users-stack>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
-
-  <hr class="divider mt-3" />
-
-  <div class="mt-4">
-    <p class="bottom-section-heading mt-2 mb-1">
-      {{ "ITINERARY_SUMMARY.TOTAL_MEMBER" | translate }}
-    </p>
-
-    <app-user-stack-tile
-      label="4 People"
-      [buttonText]="'ITINERARY_SUMMARY.VIEW_MORE' | translate"
-      [maxVisible]="4"
-    ></app-user-stack-tile>
-  </div>
-</div>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/created-itinerary-preview/created-itinerary-detail/created-itinerary-detail.component.ts

@@ -1,33 +0,0 @@
-import { Component } from '@angular/core'; 
-import { Itinerary } from '../../../../../../../_models/Itinerary';
-import { ApiService } from '../../../../../../../_services/api.service';
-import { LocationService } from '../../../../../../../_services/location.service';
-import { ICONS } from '../../../../../../../_constants/constants';
-
-@Component({
-  selector: 'app-created-itinerary-detail',
-  templateUrl: './created-itinerary-detail.component.html',
-  styleUrl: './created-itinerary-detail.component.css',
-})
-export class CreatedItineraryDetailComponent {
-  initialLocation = { lat: 24.8607, lng: 67.0011 }; // Centered on California
-  ICONS: { [key: string]: string } = ICONS;
-  usersImageSrc = '/assets/images/users.png';
-
-  places: Itinerary[] = [];
-
-  constructor(
-    public locationService: LocationService,
-    public apiService: ApiService,
-  ) {}
-
-  ngOnInit(): void {
-    this.apiService.get('/assets/ItinerariesData.json').subscribe((data) => {
-      this.places = data as Itinerary[];
-    });
-    this.locationService.getCurrentLocation().subscribe((location) => {
-      this.initialLocation.lat = location.lat;
-      this.initialLocation.lng = location.long;
-    });
-  }
-}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/created-itinerary-preview/created-itinerary-map/created-itinerary-map.component.html

@@ -1,11 +0,0 @@
-<lib-map
-  #googleMap
-  class="maps-100vh"
-  [initialLocation]="center"
-  [zoom]="zoom"
-  [options]="mapOptions"
-  (mapInitialized)="onMapInitialized($event)"
-  searchMapsString="searchMapsString"
-  [markers]="markers"
->
-</lib-map>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/created-itinerary-preview/created-itinerary-map/created-itinerary-map.component.spec.ts

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

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/created-itinerary-preview/created-itinerary-map/created-itinerary-map.component.ts

@@ -1,349 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { GoogleMap } from '@angular/google-maps';
-import { MapMarkerModel } from '@naniteninja/ionic-lib';   
-// import { ItineraryService } from '../../../../../../../_services/itinerary.service';
-import { ICONS } from '../../../../../../../_constants/constants';
-
-@Component({
-  selector: 'app-created-itinerary-map',
-  templateUrl: './created-itinerary-map.component.html',
-  styleUrl: './created-itinerary-map.component.css',
-})
-export class CreatedItineraryMapComponent {
-  @Input() newDestination!: string;
-  @Output() destinationAdded = new EventEmitter<string>();
-  center = { lat: 24.8607, lng: 67.0011 };
-  zoom = 12;
-
-  mapOptions: google.maps.MapOptions = {
-    styles: [
-      { elementType: 'geometry', stylers: [{ color: '#212121' }] },
-      { elementType: 'labels.icon', stylers: [{ visibility: 'off' }] },
-      { elementType: 'labels.text.fill', stylers: [{ color: '#757575' }] },
-      { elementType: 'labels.text.stroke', stylers: [{ color: '#212121' }] },
-      {
-        featureType: 'administrative',
-        elementType: 'geometry',
-        stylers: [{ color: '#757575' }],
-      },
-      {
-        featureType: 'administrative.country',
-        elementType: 'labels.text.fill',
-        stylers: [{ color: '#9e9e9e' }],
-      },
-      {
-        featureType: 'administrative.land_parcel',
-        stylers: [{ visibility: 'off' }],
-      },
-      {
-        featureType: 'administrative.locality',
-        elementType: 'labels.text.fill',
-        stylers: [{ color: '#bdbdbd' }],
-      },
-      {
-        featureType: 'poi',
-        elementType: 'labels.text.fill',
-        stylers: [{ color: '#757575' }],
-      },
-      {
-        featureType: 'poi.park',
-        elementType: 'geometry',
-        stylers: [{ color: '#181818' }],
-      },
-      {
-        featureType: 'poi.park',
-        elementType: 'labels.text.fill',
-        stylers: [{ color: '#616161' }],
-      },
-      {
-        featureType: 'poi.park',
-        elementType: 'labels.text.stroke',
-        stylers: [{ color: '#1b1b1b' }],
-      },
-      {
-        featureType: 'road',
-        elementType: 'geometry.fill',
-        stylers: [{ color: '#2c2c2c' }],
-      },
-      {
-        featureType: 'road',
-        elementType: 'labels.text.fill',
-        stylers: [{ color: '#8a8a8a' }],
-      },
-      {
-        featureType: 'road.arterial',
-        elementType: 'geometry',
-        stylers: [{ color: '#373737' }],
-      },
-      {
-        featureType: 'road.highway',
-        elementType: 'geometry',
-        stylers: [{ color: '#3c3c3c' }],
-      },
-      {
-        featureType: 'road.highway.controlled_access',
-        elementType: 'geometry',
-        stylers: [{ color: '#4e4e4e' }],
-      },
-      {
-        featureType: 'road.local',
-        elementType: 'labels.text.fill',
-        stylers: [{ color: '#616161' }],
-      },
-      {
-        featureType: 'transit',
-        elementType: 'labels.text.fill',
-        stylers: [{ color: '#757575' }],
-      },
-      {
-        featureType: 'water',
-        elementType: 'geometry',
-        stylers: [{ color: '#000000' }],
-      },
-      {
-        featureType: 'water',
-        elementType: 'labels.text.fill',
-        stylers: [{ color: '#3d3d3d' }],
-      },
-    ],
-    center: { lat: 74.006, lng: 40.7128 },
-    mapTypeControl: false,
-    disableDefaultUI: true, // Disable default UI
-    zoomControl: true, // Enable zoom control
-  };
-  drawingManager!: google.maps.drawing.DrawingManager;
-  map!: google.maps.Map;
-  vertices: google.maps.LatLngLiteral[] = [];
-  directionsService = new google.maps.DirectionsService();
-  directionsRenderer = new google.maps.DirectionsRenderer();
-
-  currentLocation!: google.maps.LatLngLiteral;
-  destination: string = '';
-  waypoints: string[] = [];
-
-  markers: MapMarkerModel[] = [
-    // {
-    //   id: '2',
-    //   icon: {
-    //     url: ICONS.startMarkerImage,
-    //     size: new google.maps.Size(40, 40),
-    //     scaledSize: new google.maps.Size(30, 30),
-    //   },
-    //   position: { lat: 24.9607, lng: 67.9011 },
-    //   radius: 100,
-    //   omitMarkerCircle: true,
-    // },
-    // {
-    //   id: '1',
-    //   icon: {
-    //     url: ICONS.endMarkerImage,
-    //     size: new google.maps.Size(40, 40),
-    //     scaledSize: new google.maps.Size(30, 30),
-    //   },
-    //   position: { lat: 24.8607, lng: 67.0011 },
-    //   radius: 100,
-    //   omitMarkerCircle: true,
-    // },
-  ];
-
-  // constructor(private itineraryService: ItineraryService) {}
-
-  @ViewChild(GoogleMap) googleMap!: GoogleMap;
-  ngOnInit(): void {
-    this.getUserLocation();
-
-    // this.itineraryService.getMapData().subscribe((data) => {
-    //   data.markers.forEach((marker) => {
-    //     this.markers.push({
-    //       id: marker.id,
-    //       icon: marker.icon,
-    //       position: marker.position,
-    //       radius: marker.radius,
-    //       omitMarkerCircle: true,
-    //     });
-    //   });
-    // });
-  }
-
-  ngAfterViewInit(): void {
-    this.initializeDirectionsRenderer();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['newDestination'] && changes['newDestination'].currentValue) {
-      this.addDestinationFromParent(changes['newDestination'].currentValue);
-    }
-  }
-
-  initializeDirectionsRenderer(): void {
-    if (this.googleMap && this.googleMap.googleMap) {
-      this.directionsRenderer.setMap(this.googleMap.googleMap!);
-    }
-  }
-
-  onMapInitialized(map: any) {
-    this.map = map;
-    this.initializeDrawingManager();
-    console.log('Map initialized:', map);
-  }
-
-  getUserLocation() {
-    if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition((position) => {
-        this.currentLocation = {
-          lat: position.coords.latitude,
-          lng: position.coords.longitude,
-        };
-        this.center = this.currentLocation;
-        this.zoom = 16; // Adjust zoom level as needed
-        this.addCurrentLocationMarker(this.currentLocation);
-      });
-    } else {
-      window.alert('Geolocation is not supported by this browser.');
-    }
-  }
-
-  addCurrentLocationMarker(position: google.maps.LatLngLiteral) {
-    if (this.googleMap && this.googleMap.googleMap) {
-      // Add a circle to represent the accuracy radius
-      new google.maps.Circle({
-        strokeColor: '#4285F4',
-        strokeOpacity: 0.8,
-        strokeWeight: 2,
-        fillColor: '#4285F4',
-        fillOpacity: 0.35,
-        map: this.googleMap.googleMap,
-        center: position,
-        radius: 100, // Set the radius as needed (in meters)
-      });
-
-      // Add a marker to represent the current location
-      new google.maps.Marker({
-        position,
-        map: this.googleMap.googleMap,
-        title: 'Your Location',
-        icon: {
-          path: google.maps.SymbolPath.CIRCLE,
-          scale: 6,
-          fillColor: '#4285F4',
-          fillOpacity: 1,
-          strokeWeight: 1,
-          strokeColor: 'white',
-        },
-      });
-    }
-  }
-
-  addDestination() {
-    if (this.destination.trim() !== '') {
-      this.waypoints.push(this.destination);
-      this.destination = '';
-      this.calculateAndDisplayRoute();
-    }
-  }
-
-  addDestinationFromParent(destination: string) {
-    if (destination.trim() !== '') {
-      this.waypoints.push(destination);
-      this.destinationAdded.emit(destination);
-      this.calculateAndDisplayRoute();
-    }
-  }
-
-  calculateAndDisplayRoute() {
-    if (!this.currentLocation || this.waypoints.length === 0) {
-      return;
-    }
-
-    const waypts = this.waypoints.slice(0, -1).map((location) => ({
-      location,
-      stopover: true,
-    }));
-
-    this.directionsService.route(
-      {
-        origin: this.currentLocation,
-        destination: this.waypoints[this.waypoints.length - 1],
-        waypoints: waypts,
-        optimizeWaypoints: true,
-        travelMode: google.maps.TravelMode.DRIVING,
-      },
-      (response, status) => {
-        if (status === google.maps.DirectionsStatus.OK && response) {
-          this.directionsRenderer.setDirections(response);
-          this.placeMarkers(response.routes[0].legs);
-        } else {
-          window.alert('Directions request failed due to ' + status);
-        }
-      },
-    );
-  }
-
-  placeMarkers(legs: google.maps.DirectionsLeg[]) {
-    const startMarkerImage = ICONS['startMarkerImage']; // Replace with your custom start marker image URL
-    const endMarkerImage = ICONS['endMarkerImage']; // Replace with your custom end marker image URL
-
-    // Clear existing markers if needed
-    this.directionsRenderer.setOptions({ markerOptions: { visible: false } });
-
-    // Place custom start marker
-    new google.maps.Marker({
-      position: legs[0].start_location,
-      map: this.googleMap.googleMap,
-      icon: startMarkerImage,
-    });
-
-    // Place custom end marker
-    new google.maps.Marker({
-      position: legs[legs.length - 1].end_location,
-      map: this.googleMap.googleMap,
-      icon: endMarkerImage,
-    });
-  }
-
-  initializeDrawingManager() {
-    this.drawingManager = new google.maps.drawing.DrawingManager({
-      drawingMode: null, // Start with no drawing mode
-      drawingControl: false,
-      drawingControlOptions: {
-        position: google.maps.ControlPosition.TOP_CENTER,
-        drawingModes: [google.maps.drawing.OverlayType.POLYGON],
-      },
-      polygonOptions: {
-        editable: true,
-        draggable: true,
-        fillColor: '#E17575', // Set your polygon fill color
-        strokeColor: '#E17575', // Set your polygon stroke color
-      },
-    });
-
-    this.drawingManager.setMap(this.map);
-
-    google.maps.event.addListener(
-      this.drawingManager,
-      'overlaycomplete',
-      (event: google.maps.drawing.OverlayCompleteEvent) => {
-        if (event.type === google.maps.drawing.OverlayType.POLYGON) {
-          const path = (event.overlay as google.maps.Polygon).getPath();
-          this.vertices = path.getArray().map((vertex: google.maps.LatLng) => ({
-            lat: vertex.lat(),
-            lng: vertex.lng(),
-          }));
-        }
-        // Stop drawing mode after a polygon is created
-        this.drawingManager.setDrawingMode(null);
-      },
-    );
-  }
-
-  startDrawingPolygon() {
-    this.drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
-  }
-}

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

@@ -1,5 +0,0 @@
-.builder-footer {
-  position: fixed;
-  bottom: 0px;
-  z-index: 1000;
-}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/created-itinerary-preview/created-itinerary-preview.component.html

@@ -1,19 +0,0 @@
-<div>
-  <lib-percentage-bar
-    class="primary-percentage-bar"
-    [value]="95"
-  ></lib-percentage-bar>
-  <app-header (firstButton)="back()" heading="Create Itinerary"></app-header>
-  <app-tab-bar [tabMenuItems]="tabMenuItems"></app-tab-bar>
-
-  <div class="minScreen">
-    <router-outlet></router-outlet>
-  </div>
-  <div class="builder-footer w-full">
-    <lib-footer-shared
-      [canContinue]="true"
-      continueButtonText="Create"
-      (continueButtonClick)="navToNextPage()"
-    ></lib-footer-shared>
-  </div>
-</div>

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

@@ -1,90 +0,0 @@
-import { Location } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { LibMenuItem } from '@naniteninja/ionic-lib';
-import { MenuItem } from 'primeng/api';  
-import { ItinerariesRoutesEnum } from '../../../../../../_enums/ItenariesRoutes.enum';
-import { Itinerary } from '../../../../../../_models/Itinerary';
-import { ItineraryService } from '../../../../../../_services/itinerary.service';
-import { ICONS } from '../../../../../../_constants/constants';
-
-@Component({
-  selector: 'app-created-itinerary-preview',
-  templateUrl: './created-itinerary-preview.component.html',
-  styleUrl: './created-itinerary-preview.component.css',
-})
-export class CreatedItineraryPreviewComponent implements OnInit {
-  ICONS = ICONS;
-  activeItem!: MenuItem;
-  itinerary: Itinerary | undefined;
-  dropdownMenuItems: LibMenuItem[] = [
-    {
-      title: 'Edit Itinerary',
-      iconUrl: ICONS['edit'],
-    },
-    {
-      title: 'Archive',
-      iconUrl: ICONS['archiveWhite'],
-    },
-    {
-      title: 'Add to Favorites',
-      iconUrl: ICONS['favorite'],
-    },
-    {
-      title: 'Share Itinerary',
-      iconUrl: ICONS['share'],
-    },
-    {
-      title: 'Report',
-      iconUrl: ICONS['report'],
-    },
-    {
-      title: 'Delete Itinerary',
-      iconUrl: ICONS['delete'],
-      command: () => {},
-    },
-  ];
-
-  tabMenuItems: MenuItem[] = [];
-
-  //LIFE CYCLES
-  constructor(
-    private location: Location,
-    private router: Router,
-    private route: ActivatedRoute,
-    private itineraryService: ItineraryService,
-  ) {}
-
-  ngOnInit(): void {
-    this.activeItem = this.tabMenuItems.find(
-      (x) => x.routerLink === this.router.url,
-    )!;
-
-    const id = this.route.snapshot.params['id'];
-    if (id) {
-      this.itinerary = this.itineraryService.getById(id);
-    }
-
-    this.tabMenuItems = [
-      {
-        label: 'Summary',
-        icon: 'pi pi-fw pi-home',
-        routerLink: `${ItinerariesRoutesEnum.ITINERARY}/${ItinerariesRoutesEnum.CREATED_ITINERARY_PREVIEW}/${id}/${ItinerariesRoutesEnum.CREATED_ITINERARY_DETAIL}`,
-      },
-      {
-        label: 'Map',
-        icon: 'pi pi-fw pi-map-marker',
-        routerLink: `${ItinerariesRoutesEnum.ITINERARY}/${ItinerariesRoutesEnum.CREATED_ITINERARY_PREVIEW}/${id}/${ItinerariesRoutesEnum.CREATED_ITINERARY_MAP}`,
-      },
-    ];
-  }
-
-  //NAVIGATIONS
-  navToNextPage() {
-    this.router.navigate([ItinerariesRoutesEnum.ITINERARY]);
-  }
-
-  back(): void {
-    this.location.back();
-  }
-}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/itinerary-add-place/itinerary-add-place.component.css

@@ -1,15 +0,0 @@
-::ng-deep .mat-mdc-tab-links {
-  gap: 0px !important;
-}
-
-::ng-deep .mdc-tab {
-  padding: 0px !important;
-}
-
-::ng-deep .mdc-tab__text-label {
-  font-family: Gilroy;
-  font-weight: 700;
-  font-size: 13.13px;
-  line-height: 160%;
-  letter-spacing: 0%;
-}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/itinerary-add-place/itinerary-add-place.component.html

@@ -1,40 +0,0 @@
-<app-create-itinerary-header
-  [progressBarValue]="55"
-  heading="Select Events"
-></app-create-itinerary-header>
-<lib-map class="maps-100vh"></lib-map>
-<lib-bottom-modal
-  (submitModal)="navToNextPage()"
-  submitButtonTitle="Continue"
-  [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">Remove</h3>
-      <span>Add place details</span>
-      <h3 class="font-Calistoga text-lg" style="color: rgba(254, 60, 114, 1)">
-        Add
-      </h3>
-    </div>
-    <div class="mt-5">
-      <app-tab-bar [tabMenuItems]="tabMenuItems"></app-tab-bar>
-    </div>
-  </div>
-  <router-outlet></router-outlet>
-</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>