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

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/itinerary-add-place/itinerary-add-place.component.ts

@@ -0,0 +1,71 @@
+import { Location } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MenuItem } from 'primeng/api';  
+import { ItinerariesRoutesEnum } from '../../../../../../_enums/ItenariesRoutes.enum';
+import { Iicon } from '../../../../../../_interface/icon';
+import { Itinerary } from '../../../../../../_models/Itinerary';
+import { ItineraryService } from '../../../../../../_services/itinerary.service';
+import { ICONS } from '../../../../../../_constants/constants';
+
+@Component({
+    selector: 'app-itinerary-add-place',
+    templateUrl: './itinerary-add-place.component.html',
+    styleUrl: './itinerary-add-place.component.css',
+    standalone: false
+})
+export class ItineraryAddPlaceComponent implements OnInit {
+  itinerary: Itinerary | undefined;
+  isOpen: boolean = true;
+  ICONS: Iicon = ICONS;
+  tabMenuItems: MenuItem[] = [];
+
+  //LIFE CYCLES
+  constructor(
+    private location: Location,
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private itineraryService: ItineraryService,
+  ) {}
+
+  ngOnInit(): void {
+    const id = this.activatedRoute.snapshot.params['id'];
+    if (id) {
+      this.itinerary = this.itineraryService.getById(id);
+    }
+    this.tabMenuItems = [
+      {
+        label: 'Basic Info',
+        icon: 'pi pi-fw pi-home',
+        routerLink: `${ItinerariesRoutesEnum.ITINERARY}/${ItinerariesRoutesEnum.SELECT_ITINERARY_ADD_PLACE}/${id}/${ItinerariesRoutesEnum.SELECT_ITINERARY_PLACE_BASIC_INFO}`,
+      },
+      {
+        label: 'Date & Time',
+        icon: 'pi pi-fw pi-map-marker',
+        routerLink: `${ItinerariesRoutesEnum.ITINERARY}/${ItinerariesRoutesEnum.SELECT_ITINERARY_ADD_PLACE}/${id}/${ItinerariesRoutesEnum.SELECT_ITINERARY_PLACE_DATETIME}`,
+      },
+      {
+        label: 'Members',
+        icon: 'pi pi-fw pi-user',
+        routerLink: `${ItinerariesRoutesEnum.ITINERARY}/${ItinerariesRoutesEnum.SELECT_ITINERARY_ADD_PLACE}/${id}/${ItinerariesRoutesEnum.SELECT_ITINERARY_PLACE_MEMBERS}`,
+      },
+    ];
+  }
+
+  //UI LOGIC
+  showBottomModal(): void {
+    this.isOpen = true;
+  }
+
+  //NAVIGATIONS
+  navToNextPage() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATED_ITINERARY,
+      this.itinerary?.id,
+    ]);
+  }
+  back(): void {
+    this.location.back();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/itinerary-add-place/itinerary-place-basic-info/itinerary-place-basic-info.component.css

@@ -0,0 +1,4 @@
+:host ::ng-deep lib-icon-btn {
+  --lib-icon-button-height: 48px;
+  --lib-icon-button-width: 48px;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/itinerary-add-place/itinerary-place-basic-info/itinerary-place-basic-info.component.html

@@ -0,0 +1,35 @@
+<div class="pt-5 pl-4 pr-4">
+  <div class="flex items-center mb-5">
+    <lib-icon-btn class="checkmark-icon-button">
+      <img [src]="ICONS['restu']" height="30" width="30" alt="icon" />
+    </lib-icon-btn>
+    <div class="ml-3">
+      <div class="flex items-center">
+        <span>Ginyaki</span>
+        <img
+          class="ml-2"
+          [src]="ICONS['starYellow']"
+          alt="rating"
+          height="17"
+          width="17"
+        />
+        <span class="ms-2">4.7 (672 reviews)</span>
+      </div>
+      <p>Chinese restuarant</p>
+    </div>
+  </div>
+
+  <span class="text-[12px]"
+    >Lorem ipsum dolor sit amet consectetur adipisicing eliteee. Fugit commodi
+    redllat labore eseere dignissimos uasdllam repudiandae corrupti numquam
+    porro deleniti ipsum.</span
+  >
+
+  <div class="mt-4">
+    <lib-input-field
+      class="textbox-1"
+      label="Add note (optional)"
+      [textarea]="true"
+    ></lib-input-field>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/itinerary-add-place/itinerary-place-basic-info/itinerary-place-basic-info.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';  
+import { Iicon } from '../../../../../../../_interface/icon';
+import { ICONS } from '../../../../../../../_constants/constants';
+
+@Component({
+    selector: 'app-itinerary-place-basic-info',
+    templateUrl: './itinerary-place-basic-info.component.html',
+    styleUrl: './itinerary-place-basic-info.component.css',
+    standalone: false
+})
+export class ItineraryPlaceBasicInfoComponent {
+  ICONS: Iicon = ICONS;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/itinerary-add-place/itinerary-place-date-time/itinerary-place-date-time.component.html

@@ -0,0 +1,18 @@
+<div class="p-4 pb-0">
+  <div class="flex items-center justify-between mt-3 mb-5">
+    <div>
+      <p>6:30 pm</p>
+      <p>Arrival Time</p>
+    </div>
+    <div>
+      <span class="text-end block">40 minutes</span>
+      <p>Average time people spend here</p>
+    </div>
+  </div>
+
+  <lib-range-selector
+    [stepValue]="2"
+    [minValue]="1"
+    [maxValue]="14"
+  ></lib-range-selector>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/itinerary-add-place/itinerary-place-date-time/itinerary-place-date-time.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-itinerary-place-date-time',
+    templateUrl: './itinerary-place-date-time.component.html',
+    styleUrl: './itinerary-place-date-time.component.css',
+    standalone: false
+})
+export class ItineraryPlaceDateTimeComponent {}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/itinerary-add-place/itinerary-place-members/itinerary-place-members.component.html

@@ -0,0 +1,22 @@
+<div class="p-4 pb-0">
+  <span class="mt-5 mb-4">Total Users</span>
+  <p class="mt-2">4 people</p>
+  <app-user-stack-tile
+    buttonText="4 people"
+    (onClick)="navToUserSearch()"
+  ></app-user-stack-tile>
+  <hr class="divider mt-2 mb-4" />
+
+  <span class="mt-5 mb-4">Common Interest</span>
+
+  <app-user-stack-tile
+    buttonText="2 people"
+    [isSelectableVisible]="true"
+    [selectableOption]="option"
+  ></app-user-stack-tile>
+  <app-user-stack-tile
+    buttonText="4 people"
+    [isSelectableVisible]="true"
+    [selectableOption]="option"
+  ></app-user-stack-tile>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/itinerary-add-place/itinerary-place-members/itinerary-place-members.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SelectOption } from '@naniteninja/ionic-lib';  
+import { ItinerariesRoutesEnum } from '../../../../../../../_enums/ItenariesRoutes.enum';
+import { Iicon } from '../../../../../../../_interface/icon';
+import { Itinerary } from '../../../../../../../_models/Itinerary';
+import { ItineraryService } from '../../../../../../../_services/itinerary.service';
+import { ICONS } from '../../../../../../../_constants/constants';
+
+@Component({
+    selector: 'app-itinerary-place-members',
+    templateUrl: './itinerary-place-members.component.html',
+    styleUrl: './itinerary-place-members.component.css',
+    standalone: false
+})
+export class ItineraryPlaceMembersComponent implements OnInit {
+  ICONS: Iicon = ICONS;
+  itinerary: Itinerary | undefined;
+
+  option: SelectOption<string> = {
+    image: ICONS['food'],
+    label: 'Viynasa',
+    value: 'Viynasa',
+    selected: true,
+  };
+
+  //UI LOGIC
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private itineraryService: ItineraryService,
+  ) {}
+
+  ngOnInit(): void {
+    const id = this.route.parent?.snapshot.params['id'];
+    if (id) {
+      this.itinerary = this.itineraryService.getById(id);
+    }
+  }
+
+  //NAVIGATIONS
+  navToUserSearch(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATE_ITINERARY_USER_SEARCH,
+      this.itinerary?.id,
+    ]);
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/location-picker/location-picker.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/location-picker/location-picker.component.html

@@ -0,0 +1,30 @@
+<lib-percentage-bar
+  class="primary-percentage-bar"
+  [value]="percentage"
+></lib-percentage-bar>
+<app-header (firstButton)="back()" heading="Location Search"></app-header>
+<div class="mx-6">
+  <lib-input-field
+    #inputField
+    [(ngModel)]="searchText" 
+    label="From where?"
+    [enableGoogleAddress]="true"
+    (locationChange)="onLocationChange($event)"
+  ></lib-input-field>
+</div>
+
+<hr style="margin: 40px 0px 20px 0px" class="divider" />
+
+<div class="mx-6">
+  <a class="text-white flex gap-2">
+    <img [src]="locationIcon" alt="" /> Select from map
+  </a>
+</div>
+
+<div class="builder-footer w-full">
+  <lib-footer-shared
+    (continueButtonClick)="navToNextPage()"
+    [canContinue]="true"
+    continueButtonText="Continue"
+  ></lib-footer-shared>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/location-picker/location-picker.component.ts

@@ -0,0 +1,80 @@
+import { Location } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { LocationAutocompleteConfig, LocationModel } from '@naniteninja/ionic-lib';
+import { Itinerary } from '../../../../../../_models/Itinerary';
+import { ItineraryService } from '../../../../../../_services/itinerary.service';
+import { ICONS } from '../../../../../../_constants/constants';
+import { ItinerariesRoutesEnum } from '../../../../../../_enums/ItenariesRoutes.enum';
+
+@Component({
+    selector: 'app-location-picker',
+    templateUrl: './location-picker.component.html',
+    styleUrl: './location-picker.component.css',
+    standalone: false
+})
+export class LocationPickerComponent implements OnInit {
+  locationIcon: string = ICONS['locationPink'];
+  searchText: string = '';
+  mode: string = '';
+  autoCompleteConfig: LocationAutocompleteConfig = {
+    types: ['(cities)'],
+  };
+  percentage: number = 10;
+  itinerary: Itinerary | undefined;
+
+
+  //LIFE CYCLES
+  constructor(
+    private location: Location,
+    private route: ActivatedRoute,
+    private itineraryService: ItineraryService,
+    private router: Router,
+  ) { }
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe((params) => {
+      this.mode = params['mode'];
+      if (this.mode == 'end') {
+        this.percentage = 20;
+      }
+    });
+
+    const id = this.route.snapshot.params['id'];
+    if (id) {
+      this.itinerary = this.itineraryService.getById(id);
+    }
+  }
+
+  //UI LOGIC
+  onLocationChange(event: LocationModel | undefined) {
+    if (!this.itinerary) return;
+
+    if (this.mode === 'start') {
+      this.itinerary.startLocation = event;
+    } else if (this.mode === 'end') {
+      this.itinerary.endLocation = event;
+    }
+    this.itineraryService.createOrUpdate(this.itinerary);
+  }
+
+  navToNextPage() {
+    if (this.mode == 'start') {
+      this.router.navigate([
+        ItinerariesRoutesEnum.ITINERARY,
+        ItinerariesRoutesEnum.CREATE_ITINERARY_DESTINATION,
+        this.itinerary?.id,
+      ]);
+    } else if (this.mode == 'end') {
+      this.router.navigate([
+        ItinerariesRoutesEnum.ITINERARY,
+        ItinerariesRoutesEnum.SUGGESTED_EVENTS_LOCATION,
+        this.itinerary?.id,
+      ]);
+    }
+  }
+
+  back(): void {
+    this.location.back();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/select-itinerary-event/select-itinerary-event.component.html

@@ -0,0 +1,64 @@
+<app-create-itinerary-header
+  [progressBarValue]="40"
+  heading="Select Events"
+></app-create-itinerary-header>
+<lib-map class="maps-100vh"></lib-map>
+<lib-bottom-modal
+  submitButtonTitle="Continue"
+  [showArrow]="true"
+  [(isOpen)]="isOpen"
+  (submitModal)="navToNextPage()"
+  [adaptToContentHeight]="true"
+>
+  <div class="p-4 pt-0 pb-0" style="height: 220px; overflow: auto">
+    <p class="text-justify text-[12px]">
+      Click the event pins to add/remove them in the itinerary. Hold the event
+      pin to see Event Details. Click map area to exit from Event Details.
+    </p>
+    <span class="block text-center mt-3">Places</span>
+
+    <div class="mt-4">
+      <lib-selectable [options]="options"></lib-selectable>
+    </div>
+
+    <hr
+      class="mt-4 mb-4"
+      style="border: 0.82px solid rgba(255, 255, 255, 0.25)"
+    />
+
+    <span>Select automatically</span>
+    <div class="flex items-end justify-between mt-2">
+      <p class="text-[12px] leading-[150%] mr-2">
+        We will select places which are best for you for your itinerary.
+      </p>
+      <div class="pr-1">
+        <lib-toggle class="toggle-sm"></lib-toggle>
+      </div>
+    </div>
+
+    <div class="mt-5">
+      <div class="flex items-center justify-between">
+        <span>Number of places</span>
+        <span>3</span>
+      </div>
+      <lib-range-selector
+        [stepValue]="2"
+        [minValue]="1"
+        [maxValue]="14"
+      ></lib-range-selector>
+    </div>
+  </div>
+</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>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/select-itinerary-event/select-itinerary-event.component.ts

@@ -0,0 +1,79 @@
+import { Location } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnInit,
+} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SelectOption } from '@naniteninja/ionic-lib';  
+import { ItinerariesRoutesEnum } from '../../../../../../_enums/ItenariesRoutes.enum';
+import { Iicon } from '../../../../../../_interface/icon';
+import { Itinerary } from '../../../../../../_models/Itinerary';
+import { ItineraryService } from '../../../../../../_services/itinerary.service';
+import { ICONS } from '../../../../../../_constants/constants';
+
+@Component({
+    selector: 'app-select-itinerary-event',
+    templateUrl: './select-itinerary-event.component.html',
+    styleUrl: './select-itinerary-event.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
+})
+export class SelectItineraryEventComponent implements OnInit {
+  ICONS: Iicon = ICONS;
+  isOpen: boolean = true;
+  options: SelectOption<string>[] = [
+    {
+      label: 'All',
+      value: 'All',
+      selected: true,
+    },
+    {
+      label: 'My Interests',
+      value: 'My Interests',
+      selected: true,
+    },
+    {
+      label: 'Popular',
+      value: 'Popular',
+      selected: true,
+    },
+  ];
+  itinerary: Itinerary | undefined;
+
+  //LIFE CYCLE
+  constructor(
+    private location: Location,
+    private router: Router,
+    private cdr: ChangeDetectorRef,
+    private route: ActivatedRoute,
+    private itineraryService: ItineraryService,
+  ) {}
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.params['id'];
+    if (id) {
+      this.itinerary = this.itineraryService.getById(id);
+    }
+  }
+
+  //UI LOGIC
+  showBottomModal(): void {
+    this.isOpen = true;
+    this.cdr.detectChanges();
+  }
+
+  //NAVIGATIONS
+  back(): void {
+    this.location.back();
+  }
+
+  navToNextPage() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.SELECT_ITINERARY_ADD_PLACE,
+      this.itinerary?.id,
+    ]);
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/suggested-events-location/suggested-events-location.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: 30px;
+  top: 35px;
+}
+
+.normal-text {
+  color: #ffffff;
+}