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

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-detail/components/details/details.component.ts

@@ -1,115 +0,0 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { SelectOption } from '@naniteninja/ionic-lib';  
-import { ItinerariesRoutesEnum } from '../../../../../../_enums/ItenariesRoutes.enum';
-import { UserRoutes } from '../../../../../../_enums/userRoutes.enum';
-import { ICONS } from '../../../../../../_constants/constants';
-
-@Component({
-  selector: 'app-details',
-  templateUrl: './details.component.html',
-  styleUrl: './details.component.css',
-})
-export class DetailsComponent {
-  ICONS = ICONS;
-  imageLoaded: boolean = false;
-  usersImageSrc = '/assets/images/users.png';
-  passions: SelectOption<string>[] = [
-    {
-      value: 'Viyasa',
-      label: 'Viyasa',
-      selected: true,
-      disabled: true,
-    },
-    {
-      value: 'Skincare',
-      label: 'Skincare',
-      selected: true,
-      disabled: true,
-    },
-    {
-      value: 'Baking',
-      label: 'Baking',
-      selected: true,
-      disabled: true,
-    },
-    {
-      value: 'Hiking',
-      label: 'Hiking',
-      selected: true,
-      disabled: true,
-    },
-    {
-      value: 'Bicycle Racing',
-      label: 'Bicycle Racing',
-      selected: true,
-      disabled: true,
-    },
-  ];
-
-  constructor(private router: Router) { }
-
-  onImageLoad(): void {
-    this.imageLoaded = true;
-  }
-
-  handleUserStackTileClick(clickedOption:string): void {
-    switch (clickedOption) {
-      case 'upvotes':
-        this.router.navigate([
-          ItinerariesRoutesEnum.ITINERARY,
-          ItinerariesRoutesEnum.ITINERARY_DETAIL,
-          ItinerariesRoutesEnum.ITINERARY_UPVOTE_USERS,
-        ]);
-        break;
-      case 'members':
-        this.router.navigate([
-          ItinerariesRoutesEnum.ITINERARY,
-          ItinerariesRoutesEnum.ITINERARY_DETAIL,
-          ItinerariesRoutesEnum.ITINERARY_USERS,
-        ]);
-        break;
-      case 'watching':
-        this.router.navigate([
-          ItinerariesRoutesEnum.ITINERARY,
-          ItinerariesRoutesEnum.ITINERARY_DETAIL,
-          ItinerariesRoutesEnum.ITINERARY_WATCHING_USERS,
-        ]);
-        break;
-    }
-  }
-
-  //NAVIGATIONS
-  navToBranch = (): Promise<boolean> =>
-    this.router.navigate([
-      ItinerariesRoutesEnum.ITINERARY,
-      ItinerariesRoutesEnum.BRANCHED_ITINERARIES,
-    ]);
-
-  navToComments(): void {
-    this.router.navigate([
-      ItinerariesRoutesEnum.ITINERARY,
-      ItinerariesRoutesEnum.COMMENTS_ROUTE,
-    ]);
-  }
-
-  navigateToUpotes() {
-    this.router.navigate([
-      ItinerariesRoutesEnum.ITINERARY,
-      ItinerariesRoutesEnum.ITINERARY_WATCHING_USERS,
-    
-    ]);
-  }
-
-  navigateToAuthorHistory() {
-    this.router.navigate([
-      ItinerariesRoutesEnum.ITINERARY,
-      ItinerariesRoutesEnum.ITINERARY_DETAIL,
-      ItinerariesRoutesEnum.ITINERARY_AUTHOR_HISTORY,
-    ]);
-  }
-
-  navToUserProfile(): void {
-    this.router.navigate([UserRoutes.profile]);
-  }
-}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-detail/components/map/map.component.html

@@ -1,21 +0,0 @@
-<lib-map
-  #googleMap
-  height="85vh"
-  width="100vw"
-  [center]="center"
-  [zoom]="zoom"
-  [options]="mapOptions"
-  (mapInitialized)="onMapInitialized($event)"
->
-</lib-map>
-<!-- <google-map
-  #googleMap
-  height="85vh"
-  width="100vw"
-  [center]="center"
-  [zoom]="zoom"
-  [options]="mapOptions"
-  (mapInitialized)="onMapInitialized($event)"
->
-  <map-marker [position]="center"></map-marker>
-</google-map> -->

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-detail/components/map/map.component.spec.ts

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

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-detail/components/map/map.component.ts

@@ -1,307 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { GoogleMap } from '@angular/google-maps'; 
-import { ICONS } from '../../../../../../_constants/constants';
-
-@Component({
-  selector: 'app-map',
-  templateUrl: './map.component.html',
-  styleUrl: './map.component.css',
-})
-export class MapComponent {
-  @Input() newDestination!: string;
-  @Output() destinationAdded = new EventEmitter<string>();
-  center = { lat: 37.7749, lng: -122.4194 };
-  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: 37.7749, lng: -122.4194 },
-    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[] = [];
-
-  @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/itineraries/pages/itinerary-detail/components/summary/summary.component.css

@@ -1,58 +0,0 @@
-* {
-  font-family: var(--font-gilroy-regular);
-}
-.main-itini-preview,
-.tracking-bottom-com {
-  font-family: Gilroy-Regular !important;
-}
-
-.tracking-bottom-com,
-.text {
-  font-family: Gilroy-Regular !important;
-  font-size: 12px !important;
-}
-
-.bottom-section-heading {
-  /* People who might want to join this itinerary */
-
-  font-style: normal;
-  font-weight: 600;
-  font-size: 13.13px;
-  line-height: 160%;
-  /* identical to box height, or 21px */
-
-  /* Dark/White (100%) */
-  color: #ffffff;
-}
-
-.view-more-div {
-  font-size: 14px;
-}
-
-.view-more-text {
-  font-style: normal;
-  font-weight: 500;
-  line-height: 15px;
-  color: #fe3c72;
-  margin-left: 10px;
-}
-
-.view-more {
-  font-style: normal;
-  font-weight: 500;
-  font-size: 10px;
-  line-height: 15px;
-  color: #fe3c72;
-  margin-left: 10px;
-}
-
-.dotted-line {
-  position: absolute;
-  width: 2px;
-  height: 100px;
-  top: 10px;
-}
-
-.normal-text {
-  color: #ffffff;
-}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-detail/components/summary/summary.component.html

@@ -1,113 +0,0 @@
-<div class="px-5 py-6">
-  <div class="flex">
-    <h2 class="mr-2">{{ "ITINERARY_SUMMARY.ROUTE" | translate }}</h2>
-    <img
-      [ngSrc]="ICONS['editPink']"
-      alt=""
-      height="8"
-      width="8"
-      (click)="navToStartLocation()"
-    />
-  </div>
-  <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
-              >
-              <img
-                [ngSrc]="ICONS['editPink']"
-                alt=""
-                height="8"
-                width="8"
-                (click)="navToAddPlace()"
-              />
-            </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="icon" />
-              <span>45 {{ "DATE_TIME.MINUTES" | translate }}</span>
-              <span class="text-secondary font-thin">(6.6 Km)</span>
-              <img
-                [ngSrc]="ICONS['editPink']"
-                alt=""
-                height="8"
-                width="8"
-                (click)="navToAddPlaceDateTime()"
-              />
-            </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 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"
-                    *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>
-
-  <div class="border-t border-gray-700 mt-2"></div>
-
-  <div class="mt-4">
-    <div class="flex items-center mt-2 mb-1">
-      <p class="bottom-section-heading mr-2">
-        {{ "ITINERARY_SUMMARY.TOTAL_MEMBER" | translate }}
-      </p>
-      <img
-        [ngSrc]="ICONS['editPink']"
-        alt=""
-        height="8"
-        width="8"
-        (click)="navToMembers()"
-      />
-    </div>
-
-    <app-user-stack-tile label="4 People" [buttonText]="'ITINERARY_SUMMARY.VIEW_MORE' | translate" [maxVisible]="4"
-      (onClick)="handleUserStackTileClick('upvotes')"></app-user-stack-tile>
-  </div>
-</div>