@flower-city-online/itinerary-lib 0.0.9 → 0.0.11

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

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

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

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

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

@@ -0,0 +1,58 @@
+* {
+  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

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