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

package/src/lib/itinerary-app/modules/itineraries/pages/stories/story.component.css

@@ -0,0 +1,43 @@
+:host {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: auto;
+  align-items: center;
+}
+.scrollable-content {
+  max-width: 100%;
+  position: relative;
+  display: flex;
+  overflow: hidden !important;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
+  div.slides {
+    text-align: center;
+    min-width: 40px;
+    min-height: 40px;
+    overflow: hidden;
+  }
+}
+@media (max-width: 600px) {
+  .scrollable-content {
+
+  }
+  .scrollable-content div.slides {
+    min-width: 30px;
+    ;
+  }
+  .scrollable-content div.slides img {
+    max-width: 100%;
+    height: 800px !important;
+  }
+  .scrollable-content::after, .scrollable-content::before {
+    display: none;
+  }
+}
+.swiper-slide {
+  transition: transform 0.3s ease;
+}
+.scale-down {
+  transform: scale(0.85);
+  opacity: 0.6;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/stories/story.component.html

@@ -0,0 +1,15 @@
+<div class="draggable-scroll-container w-full ">
+  <div class="scrollable-content " [ngStyle]="{ height: windowHeight + 'px' }" libDraggableScroll
+    [direction]="direction" [includeSidePadding]="false">
+    <div class="slides m-0 " *ngFor="let item of [1, 2, 3]">
+      <div class="z-auto ">
+        <div class="p-0 m-0">
+          <app-custom-story-card [libMenuItem]="libMenuItem"> </app-custom-story-card>
+        </div>
+        <lib-popup [isOpen]="modalService.toggleModal">
+          <app-report-media-modal [popupTitle]="'Report Media'"></app-report-media-modal>
+        </lib-popup>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/stories/story.component.spec.ts

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

package/src/lib/itinerary-app/modules/itineraries/pages/stories/story.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { LibMenuItem, Direction } from '@naniteninja/ionic-lib'; 
+import { CustomDropdownMenuService } from '../../../../_services/custom-dropdown-menu.service';
+import { ModalService } from '../../../../_services/modal.service';
+
+export interface SwiperPagination {
+  el: string;
+  clickable: boolean;
+}
+
+@Component({
+    selector: 'app-story',
+    templateUrl: './story.component.html',
+    styleUrl: './story.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
+})
+export class StoryComponent implements OnInit {
+  libMenuItem: LibMenuItem[] = [];
+  @ViewChildren('slide') slideElements!: QueryList<ElementRef>;
+  @ViewChild('scrollable-content') scrollableContentRef!: ElementRef;
+  direction: Direction = Direction.vertical;
+  transition: boolean = true;
+  slidesPerView: number = 1;
+  freeMode: boolean = false;
+  includeSidePadding: boolean = true;
+  centeredSlides: boolean = true;
+  windowHeight: number = 0;
+  Pagination: SwiperPagination = {
+    el: '.swiper-pagination',
+    clickable: true,
+  };
+  activeSlideIndex = 0;
+  constructor(
+    public modalService: ModalService,
+    public customMenuList: CustomDropdownMenuService,
+  ) {}
+  ngOnInit(): void {
+    this.libMenuItem = this.customMenuList.getMenuList('stories');
+    this.windowHeight = window.screen.height;}
+  ngAfterViewInit() {
+  }
+  onSlideChange(event: { realIndex?: number; activeIndex?: number }) {
+    this.activeSlideIndex = event.realIndex || event.activeIndex || 0;
+  }
+}

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

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

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

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

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

@@ -0,0 +1,314 @@
+/// <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',
+    standalone: false
+})
+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: 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);
+  }
+}

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

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

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

@@ -0,0 +1,34 @@
+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',
+    standalone: false
+})
+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

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

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

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

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

@@ -0,0 +1,24 @@
+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',
+    standalone: false
+})
+export class DefaultDestinationComponent {
+  destination: string = '';
+  newDestination: string = '';
+  ICONS: Iicon = ICONS;
+
+  addDestination(): void {
+    this.newDestination = this.destination;
+  }
+
+  onDestinationAdded(_destination: string): void {
+    this.destination = '';
+  }
+}