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

package/src/lib/itinerary-app/modules/pathway/components/googlemap/googlemap.component.ts

@@ -1,311 +0,0 @@
-/// <reference types="google.maps" />
-
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { GoogleMap } from '@angular/google-maps';  
-import { ICONS } from '../../../../_constants/constants';
-
-@Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: 'app-googlemap',
-  templateUrl: './googlemap.component.html',
-})
-export class GooglemapComponent implements OnChanges {
-  @Input() newDestination!: string;
-  @Output() destinationAdded = new EventEmitter<string>();
-
-  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' }],
-      },
-    ],
-
-    mapTypeControl: false,
-    disableDefaultUI: true, // Disable default UI
-    zoomControl: true, // Enable zoom control
-  };
-  center: google.maps.LatLngLiteral = { lat: 24, lng: 12 };
-  zoom = 5;
-  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[] = [];
-
-  @ViewChild(GoogleMap) googleMap!: GoogleMap;
-  ngOnInit(): void {
-    this.getUserLocation();
-  }
-
-  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();
-  }
-
-  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/pathway/components/map-header/map-header.component.html

@@ -1,16 +0,0 @@
-<section [ngClass]="customcss">
-  <div class="flex-between md:gap-x-6">
-    <lib-icon-btn
-      (click)="goBack()"
-      class="bg-color mr-2 flex items-center justify-center rounded-full w-7 h-7 outset-shadow flexCenter"
-    >
-      arrow_back
-    </lib-icon-btn>
-    <div class="font-Calistoga tracking-wide">{{ title }}</div>
-    <div
-      class="discard cursor-pointer flex items-center justify-center text-sm"
-    >
-      {{ "IMAGE_CROPPER.DISCARD" | translate }}?
-    </div>
-  </div>
-</section>

package/src/lib/itinerary-app/modules/pathway/components/map-header/map-header.component.spec.ts

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

package/src/lib/itinerary-app/modules/pathway/components/map-header/map-header.component.ts

@@ -1,33 +0,0 @@
-import { Location } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-} from '@angular/core';
-
-@Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: 'app-map-header',
-  templateUrl: './map-header.component.html',
-  styleUrl: './map-header.component.scss',
-})
-export class MapHeaderComponent {
-  @Input() title: string = 'Default Title';
-  @Input() backLink: string = '/';
-  @Input() customcss: string = 'py-1';
-  @Output() onSearchClick = new EventEmitter<boolean>();
-
-  isSearchClicked: boolean = false;
-
-  constructor(private location: Location) {}
-
-  goBack(): void {
-    if (this.backLink) {
-      window.location.href = this.backLink;
-    } else {
-      this.location.back();
-    }
-  }
-}

package/src/lib/itinerary-app/modules/pathway/pages/default-destination/default-destination.component.html

@@ -1,67 +0,0 @@
-<div class="max-padd-container pt-10 pb-4">
-  <app-map-header
-    [title]="'MAP_HEADER.CREATE_ITINERARY' | translate"
-    [backLink]="'/'"
-  ></app-map-header>
-</div>
-
-<div class="">
-  <app-googlemap
-    [newDestination]="newDestination"
-    (destinationAdded)="onDestinationAdded($event)"
-  ></app-googlemap>
-</div>
-
-<div class="">
-  <div class="absolute bottom-0 py-3">
-    <section class="fixed bottom-0 w-full">
-      <div class="tracking-widest px-5 py-2 rounded-t-3xl drawer-shadow">
-        <div class="">
-          <div class="bottomModal mt-5 mb-3 flex flex-col gap-y-2">
-            <div class="flex items-center justify-between w-full gap-x-4">
-              <div class="flex items-center justify-start gap-x-4">
-                <div class="absolute left-0 top-3">
-                  <img [src]="ICONS['destination']" alt="" class="w-20" />
-                </div>
-                <div class="text ml-10">
-                  <h2 class="sm:text-sm xs:text-xs flex items-center gap-x-1">
-                    {{ "ITINERARY.STARTING_LOCATION" | translate }}
-                  </h2>
-                  <p class="sm:text-xs text-secondary">
-                    {{ "ITINERARY.STARTING_DESCRIPTION" | translate }}
-                  </p>
-                </div>
-              </div>
-              <div class="flex items-center gap-x-3">
-                <img [src]="ICONS['pen']" alt="" class="cursor-pointer" />
-              </div>
-            </div>
-            <div class="mt-2">
-              <h1 class="text-lg font-Calistoga">
-                {{ "ITINERARY.DESTINATION_TITLE" | translate }}
-              </h1>
-              <p class="py-2 text-white opacity-70 text-[10px]">
-                {{ "ITINERARY.DESTINATION_DESCRIPTION" | translate }}
-              </p>
-            </div>
-            <div class="flex gap-x-4">
-              <lib-input-field
-                type="text"
-                [placeholder]="'ITINERARY.WHERE_TO' | translate"
-                class="!w-60 !py-1 text-white text-opacity-70"
-                [(ngModel)]="destination"
-              />
-              <lib-icon-btn (click)="addDestination()">+</lib-icon-btn>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="background-gradient">
-        <lib-primary-btn>{{
-          "IMAGE_CROPPER.CONTINUE" | translate
-        }}</lib-primary-btn>
-      </div>
-    </section>
-  </div>
-</div>

package/src/lib/itinerary-app/modules/pathway/pages/default-destination/default-destination.component.scss

@@ -1,2 +0,0 @@
-
-

package/src/lib/itinerary-app/modules/pathway/pages/default-destination/default-destination.component.spec.ts

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

package/src/lib/itinerary-app/modules/pathway/pages/default-destination/default-destination.component.ts

@@ -1,23 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Iicon } from '../../../../_interface/icon'; 
-import { ICONS } from '../../../../_constants/constants';
-
-@Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: 'app-default-destination',
-  templateUrl: './default-destination.component.html',
-  styleUrl: './default-destination.component.scss',
-})
-export class DefaultDestinationComponent {
-  destination: string = '';
-  newDestination: string = '';
-  ICONS: Iicon = ICONS;
-
-  addDestination(): void {
-    this.newDestination = this.destination;
-  }
-
-  onDestinationAdded(_destination: string): void {
-    this.destination = '';
-  }
-}

package/src/lib/itinerary-app/modules/pathway/pages/itinerary-preview/itinerary-preview.component.html

@@ -1,70 +0,0 @@
-<div class="pt-10 max-padd-container">
-  <app-map-header
-    [title]="'Create Itinerary'"
-    [backLink]="'/'"
-    [customcss]="''"
-  ></app-map-header>
-</div>
-<div class="mt-6">
-  <lib-map
-    [mapType]="mapType"
-    [markers]="locationsMarkers"
-    [enableDrag]="true"
-    [initialLocation]="initialLocation"
-    (mapLoaded)="onMapLoaded($event)"
-  ></lib-map>
-</div>
-
-<div class="main-itini-preview absolute bottom-0 py-3">
-  <section class="fixed bottom-0 w-full">
-    <div class="tracking-widest px-5 py-6 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 [src]="ICONS['locationWhite']" alt="location" />
-            <span>{{ places.length }} Places</span>
-          </div>
-          <div class="h-4 border w-0 border-secondary"></div>
-          <div class="flex items-center justify-center gap-x-2">
-            <img [src]="ICONS['clock']" alt="" />
-            <span>45 minutes</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"
-            class="flex items-center justify-between w-full gap-x-4"
-          >
-            <div class="flex items-center justify-start gap-x-4">
-              <div
-                class="z-50 icon w-8 h-8 outset-shadow flex items-center justify-center rounded-full"
-              >
-                <img [src]="ICONS['restu']" alt="" />
-              </div>
-              <div class="text">
-                <h2 class="f-sm f-xs flex items-center gap-x-1">
-                  {{ place.name | translate }}
-                  <img [src]="ICONS['enLocation']" alt="" />
-                </h2>
-                <p class="f-xs text-secondary">
-                  {{ place.description! | translate }}
-                </p>
-              </div>
-            </div>
-            <div class="flex items-center gap-x-3">
-              <img [src]="ICONS['groupBinBar']" alt="" class="cursor-pointer" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="background-gradient py-5 px-16">
-      <lib-primary-btn class="">{{ "PREVIEW" | translate }}</lib-primary-btn>
-    </div>
-  </section>
-</div>

package/src/lib/itinerary-app/modules/pathway/pages/itinerary-preview/itinerary-preview.component.scss

@@ -1,10 +0,0 @@
-.main-itini-preview,
-.tracking-bottom-com {
-  font-family: Gilroy-Regular !important;
-}
-
-.tracking-bottom-com,
-.text {
-  font-family: Gilroy-Regular !important;
-  font-size: 12px !important;
-}

package/src/lib/itinerary-app/modules/pathway/pages/itinerary-preview/itinerary-preview.component.spec.ts

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

package/src/lib/itinerary-app/modules/pathway/pages/itinerary-preview/itinerary-preview.component.ts

@@ -1,58 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  OnInit,
-} from '@angular/core';
-import { MapMarkerModel } from '@naniteninja/ionic-lib';  
-import { Itinerary } from '../../../../_models/Itinerary';
-import { ApiService } from '../../../../_services/api.service';
-import { LocationService } from '../../../../_services/location.service';
-import { ICONS } from '../../../../_constants/constants';
-@Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: 'app-itinerary-preview',
-  templateUrl: './itinerary-preview.component.html',
-  styleUrl: './itinerary-preview.component.scss',
-})
-export class ItineraryPreviewComponent implements OnInit {
-  initialLocation = { lat: 24.8607, lng: 67.0011 }; // Centered on California
-  ICONS: { [key: string]: string } = ICONS;
-  places: Itinerary[] = [];
-
-  constructor(
-    public locationService: LocationService,
-    public apiService: ApiService,
-    private cdr: ChangeDetectorRef,
-  ) {}
-
-  ngOnInit(): void {
-    this.apiService.get('/assets/data.json').subscribe((data) => {
-      this.places = data as Itinerary[];
-      this.cdr.detectChanges();
-    });
-    this.locationService.getCurrentLocation().subscribe((location) => {
-      this.initialLocation.lat = location.lat;
-      this.initialLocation.lng = location.long;
-    });
-  }
-  handleSearch(_event: string): void {
-    // Change parameter type to 'any' to accept event
-  }
-  mapType: google.maps.MapTypeId = google.maps.MapTypeId.ROADMAP;
-  locationsMarkers: MapMarkerModel[] = [
-    {
-      icon: 'assets/1.png#custom_pin_maps',
-      id: '1',
-      omitMarkerCircle: false,
-      position: this.initialLocation,
-      radius: 100000,
-    },
-  ];
-
-  onMapLoaded(_event: Event): void {}
-
-  toggleDrawingTool(): void {
-    // Add your drawing tool toggle logic here
-  }
-}