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

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

@@ -0,0 +1,67 @@
+* {
+  --main-color: #fe3c72;
+}
+
+.user-name {
+  color: var(--main-color);
+  font-size: 13px;
+}
+.last-seen {
+  color: #939195;
+  font-size: 9px;
+}
+
+.history {
+  color: var(--main-color);
+  font-size: 10px;
+}
+/* $primary-color: #fe3c72; */
+
+.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 {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 10px;
+  line-height: 15px;
+  color: #fe3c72;
+  margin-left: 10px;
+}
+
+.nav-btn {
+  width: 150px !important;
+  height: 40px;
+  padding: 25px 0px !important;
+  border-radius: 20px;
+  margin-bottom: 3px;
+  background-color: #27242c;
+  background: 9.026px 8.205px 22.153px 2.051px rgba(17, 16, 20, 0.65) !important;
+  box-shadow: -4.102px -4.102px 13.128px -2.462px rgba(203, 199, 209, 0.25) !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#nav-btn {
+  --lib-icon-button-width: auto !important;
+  --lib-icon-button-height: 35px !important;
+  --lib-icon-button-border-radius: 0 !important;
+  --lib-button-background: transparent !important;
+  --lib-button-border: 0 !important;
+}
+
+.hidden {
+  visibility: hidden;
+}
+

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

@@ -0,0 +1,89 @@
+<div class="px-5 py-4 overflow-y-auto">
+  <h2 class="f-[13px]">Created By</h2>
+
+  <div class="my-5 flex justify-between">
+    <div class="flex items-center gap-2" (click)="navToUserProfile()">
+      <img
+        loading="lazy"
+        height="12"
+        width="12"
+        [src]="ICONS['userRedFilled']"
+        alt=""
+        class="mb-auto"
+      />
+      <p class="user-name">Jonathan</p>
+      <p class="last-seen">
+        11 {{ "DATE_TIME.HOURS" | translate }}
+        {{ "DATE_TIME.AGO" | translate }}
+      </p>
+    </div>
+    <div class="flex cursor-pointer" (click)="navigateToAuthorHistory()">
+      <p class="history mr-1">{{ "ITINERARY_DETAIL.HISTORY" | translate }}</p>
+      <img loading="lazy" height="5" width="5" [src]="ICONS['rightArrow']" alt="right arrow" />
+    </div>
+  </div>
+
+  <div class="border-t border-gray-700 mt-2"></div>
+
+  <h2 class="f-[13px] mt-5 mb-3">
+    {{ "ITINERARY_DETAIL.ITINERARY_PASSIONS" | translate }}
+  </h2>
+  <div class="flex flex-wrap gap-2">
+    <lib-selectable
+      [options]="passions"
+      [maxSelectionPossible]="passions.length"
+    ></lib-selectable>
+  </div>
+
+  <div class="border-t border-gray-700 mt-2"></div>
+  <div class="mt-4">
+    <p class="bottom-section-heading mt-2 mb-1">
+      {{ "ITINERARY_DETAIL.UPVOTES" | translate }}
+    </p>
+
+    <div class="comment-card text-white py-2">
+      <p class="text-xs">4.6k {{ "ITINERARY_DETAIL.PEOPLE" | translate }}</p>
+      <app-user-stack-tile
+        label="4.6k people"
+        [buttonText]="'ITINERARY_SUMMARY.VIEW_MORE' | translate"
+        (onClick)="navigateToUpotes()"
+        [maxVisible]="4"
+      ></app-user-stack-tile>
+    </div>
+  </div>
+
+  <div class="border-t border-gray-700 mt-2"></div>
+
+  <div class="mt-4">
+    <p class="bottom-section-heading mt-2 mb-1">
+      {{ "ITINERARY_DETAIL.WATCHING" | translate }}
+    </p>
+
+    <app-user-stack-tile label="17 people" [buttonText]="'ITINERARY_SUMMARY.VIEW_MORE' | translate" [maxVisible]="4"
+      (onClick)="handleUserStackTileClick('watching')"></app-user-stack-tile>
+  </div>
+
+  <div class="border-t border-gray-700 mt-2"></div>
+
+  <div class="mt-5 flex justify-between">
+    <lib-menu-btn (click)="navToComments()">
+      <span class="inline-flex items-center gap-2">
+        <img loading="lazy" [ngSrc]="ICONS['message']" height="12" width="13" />
+        <span class="inline-block">{{
+          "ITINERARY_DETAIL.COMMENTS" | translate
+        }}</span>
+        <p class="inline-block">17</p>
+      </span>
+    </lib-menu-btn>
+
+    <lib-menu-btn (click)="navToBranch()">
+      <span class="inline-flex items-center gap-2">
+        <img loading="lazy" [ngSrc]="ICONS['branch']" height="12" width="13" />
+        <span class="inline-block">{{
+          "ITINERARY_DETAIL.BRANCHES" | translate
+        }}</span>
+        <p class="inline-block">4</p>
+      </span>
+    </lib-menu-btn>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,116 @@
+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',
+    standalone: false
+})
+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,310 @@
+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',
+    standalone: false
+})
+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: google.maps.Map | Event) {
+    if (map instanceof google.maps.Map) {
+      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);
+  }
+}