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

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

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

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

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

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

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

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

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

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

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

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