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

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

@@ -0,0 +1,97 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { LibMenuItem } from '@naniteninja/ionic-lib'; 
+import { CustomDropdownMenuService } from '../../../../_services/custom-dropdown-menu.service';
+import { ItinerariesRoutesEnum } from '../../../../_enums/ItenariesRoutes.enum';
+import { Iicon } from '../../../../_interface/icon';
+import { ModalService } from '../../../../_services/modal.service';
+import { ICONS } from '../../../../_constants/constants';
+import { ModalSendClientService } from '../../../../_services/modal.sendclient.service';
+import { ItineraryService } from '../../../../_services/itinerary.service';
+import { Itinerary } from '../../../../_models/Itinerary';
+import { ModalShareUrlClientService } from '../../../../_services/modal.shareurlservice';
+import { SharePopupDataService } from '../../../../_services/share-popup-data';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-explore',
+  templateUrl: './explore.component.html',
+  styleUrl: './explore.component.scss',
+})
+export class ExploreComponent implements OnInit {
+  libMenuItem: LibMenuItem[] = [];
+  libMenuItems: Itinerary[] = [];
+  ICONS: Iicon = ICONS;
+  currentItinerary: Itinerary | undefined = undefined;
+
+  ngOnInit(): void {
+    this.itineraryService.getAllItinararies().subscribe((data) => {
+      this.libMenuItems = data;
+      this.libMenuItem = this.customMenuList.getMenuList('itineraries');
+      this.cd.detectChanges();
+    });
+  }
+
+  constructor(
+    public customMenuList: CustomDropdownMenuService,
+    private router: Router,
+    public modalService: ModalService,
+    public modalSendToClientService: ModalSendClientService,
+    private itineraryService: ItineraryService,
+    private cd: ChangeDetectorRef,
+    public shareModalService: ModalShareUrlClientService,
+    public sharePopupDataService: SharePopupDataService
+  ) {}
+
+  //UI LOGIC
+  handleSearchStringChange(_$event: string) {}
+
+  //NAVIGATIONS
+  clear(): void {}
+  navToCommentSearch() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.COMMENT_SEARCH,
+    ]);
+  }
+
+  navigateToDetail(_item: Itinerary): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.ITINERARY_DETAIL,
+    ]);
+  }
+
+  navToBranchItinerary(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.BRANCHED_ITINERARIES,
+    ]);
+  }
+
+  navToComments(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.COMMENTS_ROUTE,
+    ]);
+  }
+
+  navToStories(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.STORIES,
+    ]);
+  }
+
+  navToNotifications(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.ITINERARY_WATCHING_USERS,
+    ]);
+  }
+
+  menuClicked(item: Itinerary) {
+    this.currentItinerary = item;
+    this.sharePopupDataService.setPopupData(item);
+  }
+}

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

@@ -0,0 +1,34 @@
+<div *ngIf="!loading && libMenuItems.length == 0" class="favourite-main-section">
+  <div class="favourite-sub-section">
+    <div>
+      <img [ngSrc]="ICONS['map']" height="120" width="120" />
+    </div>
+    <h3 class="mt-4">{{ "FAVORITES.NO_ITINERARIES_YET" | translate }}</h3>
+    <p class="mt-3">{{ "FAVORITES.NO_ITINERARIES_FAVORITE" | translate }}</p>
+
+    <lib-primary-btn class="btn-style mt-7">{{
+      "FAVORITES.EXPLORE_ITINERARIES" | translate
+    }}</lib-primary-btn>
+    <lib-primary-btn (click)="goFav()" class="btn-style mt-3">{{
+      "FAVORITES.CREATE_NOW" | translate
+    }}</lib-primary-btn>
+  </div>
+</div>
+
+<div *ngIf="!loading && libMenuItems.length > 0" class="mt-5">
+  <div class="pb-10 w-full">
+    <div
+      class="grid-columns sm:mt-3 md:mt-10 grid grid-cols-1 md:grid-cols-3 sm:gap-y-5 md:gap-y-10 gap-x-10"
+    >
+      <ng-container *ngFor="let item of libMenuItems; let i = index">
+        <app-cutom-card
+          [libMenuItem]="libMenuItem"
+          [cardData]="item"
+          [isDraft]="false"
+          [itineraryStarted]="true"
+          (menuClicked)="menuClicked($event)"
+        ></app-cutom-card>
+      </ng-container>
+    </div>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/favorites/favorites.component.scss

@@ -0,0 +1,30 @@
+@use "../../../../_styles/colors" as *;
+
+.favourite-main-section,
+.favourite-sub-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-top: 3rem;
+  width: 100%;
+  height: 100%;
+}
+.favourite-main-section h1 {
+  font-family: "Calistoga";
+  font-size: 30px;
+}
+.favourite-main-section p {
+  color: rgb(255, 255, 255, 0.7) !important;
+}
+
+.btn-style {
+  width: 100%;
+  padding-inline: 40px;
+  text-shadow: 0px 0px 9.846px rgba(254, 60, 114, 0.35) !important;
+  color: $text-color-3 !important;
+}
+
+.btn-style:last-child {
+  margin-top: 15px;
+}

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

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

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

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { LibMenuItem } from '@naniteninja/ionic-lib'; 
+import { CustomDropdownMenuService } from '../../../../_services/custom-dropdown-menu.service';
+import { Iicon } from '../../../../_interface/icon';
+import { ICONS } from '../../../../_constants/constants';
+import { ItineraryService } from '../../../../_services/itinerary.service';
+import { Itinerary } from '../../../../_models/Itinerary';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-favorites',
+  templateUrl: './favorites.component.html',
+  styleUrl: './favorites.component.scss',
+})
+export class FavoritesComponent implements OnInit {
+  libMenuItem: LibMenuItem[] = [];
+  cardList: number[] = [];
+  ICONS: Iicon = ICONS;
+  libMenuItems: Itinerary[] = [];
+  loading: boolean = true;
+
+  ngOnInit(): void {
+    this.itineraryService.getAllItinararies().subscribe((data) => {
+      this.loading = false;
+      this.libMenuItems = data;
+      this.libMenuItem = this.customMenuList.getMenuList('favourite');
+      this.cd.detectChanges();
+    });
+  }
+
+  menuClicked(item: Itinerary) {
+    console.log("Item", item);
+  }
+
+  constructor(
+    public customMenuList: CustomDropdownMenuService,
+    private itineraryService: ItineraryService,
+    private cd: ChangeDetectorRef
+  ) {}
+
+  goFav(): void {
+    this.cardList.push(1);
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-author-history/itinerary-author-history.component.css

@@ -0,0 +1,66 @@
+* {
+  --main-color: #fe3c72;
+}
+
+.last-seen {
+  font-size: 9px;
+}
+
+.small-text{
+    font-size: 13px;
+}
+
+.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-author-history/itinerary-author-history.component.html

@@ -0,0 +1,73 @@
+<app-header heading="History" (firstButton)="back()"></app-header>
+<div class="my-5 flex flex-col gap-3 justify-between p-3">
+  <div class="flex items-center gap-2">
+    <img height="15" width="15" [src]="ICONS['user']" alt="" />
+    <p class="text-white">Jonathan</p>
+    <p class="last-seen">
+      11 {{ "DATE_TIME.HOURS" | translate }}
+      {{ "DATE_TIME.AGO" | translate }}
+    </p>
+  </div>
+  <div class="flex row gap-2">
+    <p class="small-text">Added New</p>
+    <p class="small-text text-pink-600">Itinerary Passions</p>
+  </div>
+  <lib-selectable [options]="passions" [maxSelectionPossible]="0"></lib-selectable>
+
+  <div class="border-t border-gray-700 mt-2"></div>
+
+  <div class="flex items-center gap-2 mt-2">
+    <img height="15" width="15" [src]="ICONS['user']" alt="" />
+    <p class="text-white">Jonathan</p>
+    <p class="last-seen">
+      11 {{ "DATE_TIME.DAYS" | translate }}
+      {{ "DATE_TIME.AGO" | translate }}
+    </p>
+  </div>
+  <div class="flex row gap-2">
+    <p class="small-text">Added New</p>
+    <p class="small-text text-pink-600">Location</p>
+  </div>
+  <div class="flex row gap-2 items-center">
+    <img height="13" width="13" [src]="ICONS['location']" alt="" />
+    <p class="small-text text-white">London Bridge View Restaurant</p>
+  </div>
+  <div class="border-t border-gray-700 mt-2"></div>
+
+
+  <div class="flex items-center gap-2 mt-2">
+    <img height="15" width="15" [src]="ICONS['user']" alt="" />
+    <p class="text-white">Jonathan</p>
+    <p class="last-seen">
+      11 {{ "DATE_TIME.HOURS" | translate }}
+      {{ "DATE_TIME.AGO" | translate }}
+    </p>
+  </div>
+  <div class="flex row gap-2">
+    <p class="small-text">Changed</p>
+    <p class="small-text text-pink-600">Itinerary Title</p>
+  </div>
+  <div class="flex row gap-2 items-center">
+    <p class="small-text">From</p>
+    <p class="small-text text-white">Adventuretour</p>
+  </div>
+  <div class="flex row gap-5 items-center">
+    <p class="small-text">To</p>
+    <p class="small-text text-white">Adventure Tour</p>
+  </div>
+  <div class="border-t border-gray-700 mt-2"></div>
+
+  <div class="flex items-center gap-2 mt-2">
+    <img height="15" width="15" [src]="ICONS['user']" alt="" />
+    <p class="text-white">Jonathan</p>
+    <p class="last-seen">
+      11 {{ "DATE_TIME.HOURS" | translate }}
+      {{ "DATE_TIME.AGO" | translate }}
+    </p>
+  </div>
+  <div class="flex row gap-2">
+    <p class="small-text">Created using</p>
+    <p class="small-text text-pink-600">Custom Itinerary</p>
+  </div>
+  <div class="border-t border-gray-700 mt-2"></div>
+</div>

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

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

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

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { SelectOption } from '@naniteninja/ionic-lib'; 
+import { Iicon } from '../../../../_interface/icon'; 
+import { ICONS } from '../../../../_constants/constants';
+@Component({
+  selector: 'app-itinerary-author-history',
+  templateUrl: './itinerary-author-history.component.html',
+  styleUrl: './itinerary-author-history.component.css'
+})
+export class ItineraryAuthorHistoryComponent {
+  ICONS : Iicon = ICONS;
+
+    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,
+      },
+    ];
+
+    back() {
+      window.history.back();
+    }
+}

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();
+  });
+});