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

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-start-location/create-itinerary-start-location.component.html

@@ -0,0 +1,45 @@
+<app-create-itinerary-header
+  [progressBarValue]="5"
+  heading="Create Itinerary"
+></app-create-itinerary-header>
+<lib-map class="maps-100vh"></lib-map>
+<lib-bottom-modal
+  (submitModal)="navToPickStartLocation()"
+  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">Along The Way</h3>
+      <div class="selectables flex items-center">
+        <div
+          (click)="updateAction(a)"
+          class="flex items-center justify-center actions"
+          *ngFor="let a of actions"
+          [ngClass]="{ selected: a === selected }"
+        >
+          <img [src]="a" alt="icon" loading="lazy" />
+        </div>
+      </div>
+    </div>
+    <p class="mt-3">Select starting location for itinerary route.</p>
+    <div class="mt-3">
+      <lib-text-box (click)="navToPickStartLocation()" class="textbox-1" label="From Where?"></lib-text-box>
+    </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/create-itinerary-start-location/create-itinerary-start-location.component.ts

@@ -0,0 +1,95 @@
+import { Location } from '@angular/common';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router'; 
+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-create-itinerary-start-location',
+  templateUrl: './create-itinerary-start-location.component.html',
+  styleUrl: './create-itinerary-start-location.component.css',
+})
+export class CreateItineraryStartLocationComponent implements OnInit {
+  ICONS: Iicon = ICONS;
+  actions: string[] = [ICONS['location'], ICONS['pencil'], ICONS['ban']];
+  selected: string = this.actions[0];
+  isOpen: boolean = true;
+  initialLocation = { lat: 24.8607, lng: 67.0011 };
+  itinerary!: Itinerary | undefined;
+  // markers: MapMarkerModel[] = [
+  //   {
+  //     id: '1',
+  //     position: { lat: 24.8607, lng: 67.0011 },
+  //     radius: 0,
+  //     icon: ICONS['enLocation'],
+  //     omitMarkerCircle: true,
+  //   },
+  // ];
+
+  //LIFE CYCLES
+  constructor(
+    private location: Location,
+    private cdr: ChangeDetectorRef,
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private itineraryService: ItineraryService,
+  ) {}
+
+  ngOnInit(): void {
+    const id = this.activatedRoute.snapshot.params['id'];
+    if (id) {
+      this.itinerary = this.itineraryService.getById(id);
+    }
+  }
+
+  //UI LOGIC
+  updateAction(action: string) {
+    this.selected = action;
+    if(action === this.actions[1]) {
+      this.router.navigate([
+        ItinerariesRoutesEnum.ITINERARY,
+        ItinerariesRoutesEnum.CREATE_ITINERARY_DRAW_MODE,
+        ItinerariesRoutesEnum.CREATE_ITINERARY_DRAW_MODE_CREATE,
+        this.itinerary?.id,
+      ]);
+    }
+    if(action === this.actions[2]) {
+      this.router.navigate([
+        ItinerariesRoutesEnum.ITINERARY,
+        ItinerariesRoutesEnum.CREATE_ITINERARY_NO_VISUAL_FILTER_MODE,
+        ItinerariesRoutesEnum.CREATE_ITINERARY_NO_VISUAL_FILTER_MODE_CREATE,
+        this.itinerary?.id,
+      ]);
+    }
+    
+  }
+
+  showBottomModal(): void {
+    this.isOpen = true;
+    this.cdr.detectChanges();
+  }
+
+  markerClick(_event: any) {
+    // console.log('Event');
+    // console.log(event);
+  }
+
+  //NAVIGATIONS
+  back(): void {
+    this.location.back();
+  }
+
+  navToPickStartLocation() {
+    this.router.navigate(
+      [
+        ItinerariesRoutesEnum.ITINERARY,
+        ItinerariesRoutesEnum.LOCATION_PICKER,
+        this.itinerary?.id,
+      ],
+      { queryParams: { mode: 'start' } },
+    );
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-user-search/create-itinerary-user-search.component.html

@@ -0,0 +1,68 @@
+<app-header heading="User Search" (firstButton)="back()"></app-header>
+<div class="p-4">
+  <lib-text-box
+    class="textbox-1"
+    label="Invite people to this place"
+  ></lib-text-box>
+
+  <h3 class="font-Calistoga text-lg mt-3 mb-3">Total Users</h3>
+  <p>4 people</p>
+
+  <ng-container *ngIf="loading">
+    <lib-info-card-placeholder
+      [avatar]="true"
+      [count]="5"
+    ></lib-info-card-placeholder>
+  </ng-container>
+
+  <ng-template #sufixAction>
+    <lib-menu-btn
+      id="lib-menu-btn"
+      class="lib-menu-custom-class lib-menu-bg-none"
+      [disableTextShadow]="true"
+      [menuItems]="libMenuItems"
+    >
+      <img [src]="ICONS['horizontal']" alt="icon" />
+    </lib-menu-btn>
+  </ng-template>
+
+  @if (!loading) {
+    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
+      <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>
+  }
+
+  <hr class="divider mt-3 mb-3" />
+
+  <h3 class="font-Calistoga text-lg mt-5 mb-4">Common interests</h3>
+  <lib-selectable [options]="[option]"></lib-selectable>
+
+  <div class="flex items-center mt-2">
+    <div class="rounded overflow-hidden">
+      <img
+        class="rounded-full"
+        [src]="ICONS['dummyUserProfile']"
+        height="32px"
+        width="32px"
+      />
+    </div>
+    <span class="ml-2">Makenna Levin</span>
+  </div>
+
+  <div class="flex items-center mt-4">
+    <img
+      class="rounded-full"
+      [src]="ICONS['dummyUserProfile']"
+      height="32px"
+      width="32px"
+    />
+    <span class="ml-2">Jakob Vaccaro</span>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-user-search/create-itinerary-user-search.component.ts

@@ -0,0 +1,81 @@
+import { Location } from '@angular/common';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { LibMenuItem, 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 { CustomDropdownMenuService } from '../../../../../../_services/custom-dropdown-menu.service';
+import { ICONS } from '../../../../../../_constants/constants';
+import { AssetsService } from '../../../../../../_services/assets.service';
+
+@Component({
+  selector: 'app-create-itinerary-user-search',
+  templateUrl: './create-itinerary-user-search.component.html',
+  styleUrl: './create-itinerary-user-search.component.css',
+})
+export class CreateItineraryUserSearchComponent implements OnInit, OnDestroy {
+  loading: boolean = false;
+  itineraryMembers: IItineraryMember[] = [];
+  private subscription!: Subscription;
+  ICONS: Iicon = ICONS;
+  option: SelectOption<string> = {
+    value: 'Viynasa',
+    label: 'Viynasa',
+    image: ICONS['food'],
+  };
+  libMenuItems: LibMenuItem[] = [];
+
+  //LIFE CYCLES
+  constructor(
+    private location: Location,
+    private assetService: AssetsService,
+    private cdr: ChangeDetectorRef,
+    private customMenuList: CustomDropdownMenuService,
+    private router: Router,
+  ) {}
+
+  ngOnInit(): void {
+    this.getTotalItineraryMembers();
+    this.libMenuItems = this.customMenuList.getMenuList(
+      'create-itinerary-user-search',
+    );
+
+    this.libMenuItems = this.libMenuItems.map((x) => {
+      return {
+        ...x,
+        command: () => {
+          this.navToMemberDetail();
+        },
+      };
+    });
+  }
+
+  //UI LOGIC
+  getTotalItineraryMembers(): void {
+    this.loading = true;
+    this.subscription = this.assetService.getMembers().subscribe((data) => {
+      this.itineraryMembers = data;
+      this.loading = false;
+      this.cdr.detectChanges();
+    });
+  }
+
+  //NAVIGATIONS
+  navToMemberDetail(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATE_ITINERARY_MEMBER_DETAILS,
+      '1',
+    ]);
+  }
+
+  back(): void {
+    this.location.back();
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/created-itinerary/created-itinerary.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;
+}

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

@@ -0,0 +1,194 @@
+<app-create-itinerary-header
+  [progressBarValue]="65"
+  heading="Create Itinerary"
+></app-create-itinerary-header>
+<lib-map class="maps-100vh"></lib-map>
+<lib-bottom-modal
+  submitButtonTitle="Preview"
+  [showArrow]="true"
+  [(isOpen)]="isOpen"
+  [adaptToContentHeight]="true"
+  (submitModal)="navToNextPage()"
+>
+  <div class="flex items-center justify-center px-5">
+    <div class="flex items-center w-full">
+      <div class="main-itini-preview w-full">
+        <section class="mt-3 w-full">
+          <div class="tracking-widest rounded-t-3xl">
+            <div class="tracking-bottom-com">
+              <div class="ml-auto 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>2 {{ "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
+                  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['startLocation']"
+                        alt=""
+                      />
+                      <img
+                        loading="lazy"
+                        loading="lazy"
+                        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"
+                      >
+                        Shan-ul-haq haqee road
+                      </h2>
+                      <p class="f-xs text-secondary text-xs mb-1">
+                        Starting location
+                      </p>
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-x-3">
+                    <img
+                      class="w-[15px] h-[15px] cursor-pointer"
+                      loading="lazy"
+                      [src]="ICONS['editPink']"
+                      alt=""
+                    />
+                  </div>
+                </div>
+
+                <div
+                  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"
+                        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"
+                      >
+                        Kabul tikka
+                      </h2>
+                      <p class="f-xs text-secondary text-xs mb-1">
+                        Afghan cuisine
+                      </p>
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-x-3">
+                    <img
+                      loading="lazy"
+                      [src]="ICONS['hamburger']"
+                      alt=""
+                      class="w-[15px] h-[15px] cursor-pointer"
+                    />
+                    <img
+                      loading="lazy"
+                      [src]="ICONS['deletePink']"
+                      alt=""
+                      class="w-[15px] h-[15px] cursor-pointer"
+                    />
+                  </div>
+                </div>
+
+                <div
+                  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"
+                        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"
+                      >
+                        Quetta TNT
+                      </h2>
+                      <p class="f-xs text-secondary text-xs mb-1">Tea Coffee</p>
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-x-3">
+                    <img
+                      loading="lazy"
+                      [src]="ICONS['hamburger']"
+                      alt=""
+                      class="w-[15px] h-[15px] cursor-pointer"
+                    />
+                    <img
+                      loading="lazy"
+                      [src]="ICONS['deletePink']"
+                      alt=""
+                      class="w-[15px] h-[15px] cursor-pointer"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </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/created-itinerary/created-itinerary.component.ts

@@ -0,0 +1,59 @@
+import { Location } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnInit,
+} from '@angular/core'; 
+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';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-created-itinerary',
+  templateUrl: './created-itinerary.component.html',
+  styleUrl: './created-itinerary.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CreatedItineraryComponent implements OnInit {
+  ICONS: Iicon = ICONS;
+  isOpen: boolean = 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
+  navToNextPage() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATED_ITINERARY_PREVIEW,
+      this.itinerary?.id,
+    ]);
+  }
+  back(): void {
+    this.location.back();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/created-itinerary-preview/created-itinerary-detail/created-itinerary-detail.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;
+}