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

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>

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

@@ -0,0 +1,89 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+} from '@angular/core';
+import { Router } from '@angular/router';  
+import { ItinerariesRoutesEnum } from '../../../../../../_enums/ItenariesRoutes.enum';
+import { Itinerary } from '../../../../../../_models/Itinerary';
+import { ApiService } from '../../../../../../_services/api.service';
+import { LocationService } from '../../../../../../_services/location.service';
+import { ICONS } from '../../../../../../_constants/constants';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-summary',
+    templateUrl: './summary.component.html',
+    styleUrl: './summary.component.css',
+    standalone: false
+})
+export class SummaryComponent {
+  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,
+    private cdr: ChangeDetectorRef,
+    private router: Router,
+  ) {}
+
+  handleUserStackTileClick(clickedOption: string): void {
+    switch (clickedOption) {
+      case 'upvotes':
+        // Navigate to the upvotes page
+         this.router.navigate([
+            ItinerariesRoutesEnum.ITINERARY,
+            ItinerariesRoutesEnum.ITINERARY_DETAIL,
+            ItinerariesRoutesEnum.ITINERARY_USERS,
+          ]);
+        break;
+    }
+  }
+
+  ngOnInit(): void {
+    this.apiService.get('/assets/ItinerariesData.json').subscribe((data) => {
+      this.places = data as Itinerary[];
+      this.cdr.detectChanges();
+    });
+    this.locationService.getCurrentLocation().subscribe((location) => {
+      this.initialLocation.lat = location.lat;
+      this.initialLocation.lng = location.long;
+    });
+  }
+
+  navToStartLocation() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATE_ITINERARY_ORIGIN,
+      1,
+    ]);
+  }
+
+  navToAddPlace() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.SELECT_ITINERARY_ADD_PLACE,
+      1,
+    ]);
+  }
+
+  navToMembers() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATE_ITINERARY,
+    ]);
+  }
+
+  navToAddPlaceDateTime() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.SELECT_ITINERARY_ADD_PLACE,
+      1,
+      ItinerariesRoutesEnum.SELECT_ITINERARY_PLACE_DATETIME,
+    ]);
+  }
+}

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

@@ -0,0 +1,37 @@
+<div>
+  <ng-template #menuItems>
+    <lib-menu-btn [menuItems]="dropdownMenuItems" class="lib-menu-bg-none">
+      <img [src]="ICONS['horizontal']" alt="right-icon" />
+    </lib-menu-btn>
+  </ng-template>
+
+  <app-header
+    [headerSuffixTemplate]="menuItems"
+    heading="Adventure Tour"
+    (firstButton)="back()"
+    [titleIcon]="ICONS['editPink']"
+    (titleIconClick)="navToMembers()"
+  ></app-header>
+  <lib-tab-menu
+    [items]="tabMenuItems"
+    [activeItem]="activeItem"
+    (activeItemChange)="onActiveItemChange($event)"
+    #libTabMenu
+  ></lib-tab-menu>
+
+  <div class="minScreen">
+    <router-outlet></router-outlet>
+  </div>
+</div>
+
+<ng-container>
+  <lib-popup
+    [isOpen]="isModalOpen"
+    confirmButton="Delete"
+    cancelButton="Keep"
+    title="Delete Itinerary"
+    message="Are you sure you want to permanently delete this history?"
+    (modalConfirm)="onModalConfirmed()"
+    (modalDismiss)="onModalDismissed()"
+  ></lib-popup>
+</ng-container>

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

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

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

@@ -0,0 +1,103 @@
+import { Location } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { LibMenuItem } from '@naniteninja/ionic-lib';
+import { MenuItem } from 'primeng/api';  
+import { ItinerariesRoutesEnum } from '../../../../_enums/ItenariesRoutes.enum';
+import { ICONS } from '../../../../_constants/constants';
+
+@Component({
+    selector: 'app-itinerary-detail',
+    templateUrl: './itinerary-detail.component.html',
+    styleUrl: './itinerary-detail.component.css',
+    standalone: false
+})
+export class ItineraryDetailComponent implements OnInit {
+  @Input() itineraryTitle = 'Advance Tour';
+  ICONS = ICONS;
+  tabMenuItems: MenuItem[] = [
+    {
+      label: 'Summary',
+      icon: 'pi pi-fw pi-home',
+      routerLink: `${ItinerariesRoutesEnum.ITINERARY}/${ItinerariesRoutesEnum.ITINERARY_DETAIL}/${ItinerariesRoutesEnum.ITINERARY_SUMMARY}`,
+    },
+    {
+      label: 'Map',
+      icon: 'pi pi-fw pi-map-marker',
+      routerLink: `${ItinerariesRoutesEnum.ITINERARY}/${ItinerariesRoutesEnum.ITINERARY_DETAIL}/${ItinerariesRoutesEnum.ITINERARY_MAP}`,
+    },
+    {
+      label: 'Details',
+      icon: 'pi pi-fw pi-user',
+      routerLink: `${ItinerariesRoutesEnum.ITINERARY}/${ItinerariesRoutesEnum.ITINERARY_DETAIL}/${ItinerariesRoutesEnum.ITINERARY_MORE_DETAIL}`,
+    },
+  ];
+
+  activeItem!: MenuItem;
+
+  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: () => {
+        this.isModalOpen = true;
+      },
+    },
+  ];
+
+  isModalOpen = false;
+
+  constructor(
+    private location: Location,
+    private router: Router,
+  ) {}
+
+  ngOnInit(): void {
+    this.activeItem = this.tabMenuItems.find(
+      (x) => x.routerLink === this.router.url,
+    )!;
+  }
+
+  onModalConfirmed() {
+    this.isModalOpen = false;
+  }
+
+  onModalDismissed() {
+    this.isModalOpen = false;
+  }
+
+  //NAVIGATIONS
+  back() {
+    this.location.back();
+  }
+  navToMembers() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATE_ITINERARY,
+    ]);
+  }
+  onActiveItemChange(event: MenuItem) {
+    this.activeItem = event;
+    this.router.navigate([event.routerLink]);
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/existing-friends/existing-friends.component.css

@@ -0,0 +1,46 @@
+.commonInterests {
+  font-family: "Calistoga";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 19.692px;
+  line-height: 160%;
+  text-transform: capitalize;
+  color: #ffffff;
+}
+
+.commonInterestItem {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1.641px 13.128px 1.641px 1.641px;
+  gap: 6.56px;
+  background: #f7f5dd;
+  box-shadow:
+    -1.641px -1.641px 10.6665px rgba(255, 255, 255, 0.5),
+    3.282px 3.282px 6.564px rgba(0, 0, 0, 0.89);
+  border-radius: 82.05px;
+  width: 27.9px;
+  height: 27.9px;
+  border-radius: 30px;
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+  width: 90px;
+  height: 30px;
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 11.487px;
+  line-height: 160%;
+  color: #000000;
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+}
+
+.selectable-image {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 50%;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/existing-friends/existing-friends.component.html

@@ -0,0 +1,50 @@
+<div class="relative min-h-screen">
+  <div class="z-auto">
+    <div class="pb-10">
+      <ng-container *ngIf="loading">
+        <lib-info-card-placeholder
+          [avatar]="true"
+          [count]="5"
+        ></lib-info-card-placeholder>
+      </ng-container>
+
+      <ng-template #actions>
+        <lib-menu-btn
+          (select)="handleMenueItemSelect()"
+          (click)="handleMenuClick()"
+          (change)="handleMenuItemChange()"
+          class="lib-menu-custom-class lib-menu-bg-none"
+          [disableTextShadow]="true"
+        >
+          <img [src]="ICONS['horizontalWhite']" alt="Horizontal divider" />
+        </lib-menu-btn>
+      </ng-template>
+
+      @if (!loading) {
+        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+          <ng-container *ngFor="let i of itineraryMembers">
+            <app-user-tile
+              [name]="i.memberName"
+              [email]="i.memberEmail"
+              [image]="i.memberPic"
+              [sufixTemplate]="actions"
+            >
+            </app-user-tile>
+          </ng-container>
+        </div>
+      }
+
+      <div class="flex px-4">
+        <img [src]="ICONS['invitePink']" />
+        <button class="pinkTextColor" (click)="navToListFriendUsers()">
+          Friend Request
+        </button>
+      </div>
+
+      <div class="border-t border-gray-700 mt-6 mb-6"></div>
+      <h2 class="commonInterests px-4 mb-4">Common Interests</h2>
+
+      <lib-selectable [options]="passions"></lib-selectable>
+    </div>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/existing-friends/existing-friends.component.ts

@@ -0,0 +1,77 @@
+import { Location } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { SelectOption } from '@naniteninja/ionic-lib';
+import { Subscription } from 'rxjs';  
+import { ItinerariesRoutesEnum } from '../../../../../_enums/ItenariesRoutes.enum';
+import { Iicon } from '../../../../../_interface/icon';
+import { IItineraryMember } from '../../../../../_models/itineraryMember'; 
+import { ICONS } from '../../../../../_constants/constants';
+import { AssetsService } from '../../../../../_services/assets.service';
+
+@Component({
+    selector: 'app-existing-friends',
+    templateUrl: './existing-friends.component.html',
+    styleUrl: './existing-friends.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
+})
+export class ExistingFriendsComponent implements OnInit, OnDestroy {
+  ICONS: Iicon = ICONS;
+  itineraryMembers: IItineraryMember[] | undefined;
+  loading: boolean = false;
+  subscription!: Subscription;
+  image: string = ICONS['userimageSrc'];
+  passions: SelectOption<string>[] = [
+    {
+      image: ICONS['food'],
+      value: 'Viyasa',
+      label: 'Viyasa',
+      selected: true,
+      disabled: true,
+    },
+  ];
+
+  constructor(
+    private router: Router,
+    private _location: Location,
+    private assetService: AssetsService,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  //UI LOGIC
+
+  ngOnInit(): void {
+    this.loading = true;
+    this.subscription = this.assetService.getMembers().subscribe((data) => {
+      this.itineraryMembers = data;
+      this.loading = false;
+      this.cdr.detectChanges();
+    });
+  }
+
+  handleMenueItemSelect(): void {}
+  handleMenuItemChange(): void {}
+  handleMenuClick(): void {}
+
+  //NAVIGATIONS
+  backButton(): void {
+    this._location.back();
+  }
+  navToListFriendUsers(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.LIST_FRIENDS,
+    ]);
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/friend-requests/friend-requests.component.html

@@ -0,0 +1,25 @@
+<div class="pl-4 pr-4">
+  <app-header heading="Friend Requests" (firstButton)="backButton()"></app-header>
+
+  <p class="interestedPeopleHeading mt-3">Invites Sent (3)</p>
+
+  <ng-container *ngIf="loading">
+    <lib-info-card-placeholder [avatar]="true" [count]="5"></lib-info-card-placeholder>
+  </ng-container>
+
+  <ng-template #sufixAction>
+    <div class="flex">
+      <img [src]="ICONS['closePink']" alt="Invite label" />
+      <button class="pinkTextColor">Revoke</button>
+    </div>
+  </ng-template>
+
+  @if (!loading) {
+  <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+    <ng-container *ngFor="let i of itineraryMembers">
+      <app-user-tile [name]="i.memberName" [email]="i.memberEmail" [image]="i.memberPic"
+        [sufixTemplate]="sufixAction"></app-user-tile>
+    </ng-container>
+  </div>
+  }
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/friend-requests/friend-requests.component.scss

@@ -0,0 +1,13 @@
+.interestedPeopleHeading {
+  /* People who might want to join this itinerary */
+
+  font-family: "Calistoga";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13.128px;
+  line-height: 160%;
+  /* identical to box height, or 21px */
+
+  /* Dark/White (100%) */
+  color: #ffffff;
+}