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

package/src/lib/itinerary-app/modules/itineraries/pages/builder/components/create-itinerary-modal-item/create-itinerary-modal-item.component.ts

@@ -0,0 +1,42 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';  
+import { Iicon } from '../../../../../../_interface/icon';
+import { ModalService } from '../../../../../../_services/modal.service';
+import { ICONS } from '../../../../../../_constants/constants';
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-create-itinerary-modal-item',
+    templateUrl: './create-itinerary-modal-item.component.html',
+    styleUrl: './create-itinerary-modal-item.component.scss',
+    standalone: false
+})
+export class CreateItineraryModalItemComponent implements OnInit {
+  @Output() clickEvent = new EventEmitter<void>();
+  @Input() icon!: string;
+  @Input() title!: string;
+  @Input() description!: string;
+  @Input() shortTitle!: boolean;
+  titleList: string[] = [];
+  ICONS: Iicon = ICONS;
+
+  constructor(public modalService: ModalService) {}
+
+  ngOnInit(): void {
+    this.titleList = !this.shortTitle ? this.title.split(',') : [this.title];
+    this.modalService.bottomToggleModal = false;
+  }
+
+  clickEventEmitter(): void {
+    this.clickEvent.emit();
+  }
+
+  backButton(): void {
+    this.modalService.bottomToggleModal = !this.modalService.bottomToggleModal;
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary/create-itinerary.component.css

@@ -0,0 +1,6 @@
+.builder-footer {
+  position: fixed;
+  width: 100%;
+  bottom: 0px;
+  z-index: 1000;
+}

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

@@ -0,0 +1,58 @@
+<app-header (firstButton)="back()" heading="Create Itinerary"></app-header>
+<form [formGroup]="form" class="mb-32">
+  <div class="mt-4 ml-3 mr-2 mb-5">
+    <p class="mb-4">
+      Start creating your itinerary with a title and continue to the route
+      details.
+    </p>
+    <lib-text-box
+      formControlName="name"
+      class="textbox-1"
+      label="Itinerary Title"
+    ></lib-text-box>
+    <hr style="margin: 40px 0px 20px 0px" class="divider" />
+
+    <h1 class="text-lg font-Calistoga">Members</h1>
+    <p class="mb-4">The users included will effect the suggested activities.</p>
+    <lib-text-box class="textbox-1" label="User Search"></lib-text-box>
+    <app-users-stack [size]="41" class="mt-2"></app-users-stack>
+    <hr style="margin: 40px 0px 20px 0px" class="divider" />
+
+    <h1 class="text-lg font-Calistoga">Settings</h1>
+    <div class="mt-3 flex items-center justify-between">
+      <div style="width: 85%">
+        <h1>100% Match</h1>
+        <p>
+          Do all the members need to be interested in each experience for it to
+          be suggested?
+        </p>
+      </div>
+      <div style="width: 15%" class="flex justify-end">
+        <lib-dashed-checkbox
+          class="checkbox-sm"
+          formControlName="fullMatch"
+        ></lib-dashed-checkbox>
+      </div>
+    </div>
+    <div class="mt-3 flex items-center justify-between">
+      <div style="width: 85%">
+        <h1>Another Setting</h1>
+        <p>Lorem Ipsum</p>
+      </div>
+      <div style="width: 15%" class="flex justify-end">
+        <lib-dashed-checkbox
+          class="checkbox-sm"
+          formControlName="anotherSettings"
+        ></lib-dashed-checkbox>
+      </div>
+    </div>
+  </div>
+</form>
+
+<div class="builder-footer">
+  <lib-footer-shared
+    (continueButtonClick)="create()"
+    [canContinue]="true"
+    continueButtonText="Continue"
+  ></lib-footer-shared>
+</div>

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

@@ -0,0 +1,96 @@
+import { Location } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  Validators,
+} from '@angular/forms';
+import { Router } from '@angular/router'; 
+import { ItinerariesRoutesEnum } from '../../../../../../_enums/ItenariesRoutes.enum';
+import { Itinerary } from '../../../../../../_models/Itinerary';
+import { ItineraryService } from '../../../../../../_services/itinerary.service';
+
+@Component({
+    selector: 'app-create-itinerary',
+    templateUrl: './create-itinerary.component.html',
+    styleUrl: './create-itinerary.component.css',
+    standalone: false
+})
+export class CreateItineraryComponent implements OnInit {
+  form!: FormGroup;
+  settings: boolean = true;
+
+  constructor(
+    private location: Location,
+    private router: Router,
+    private itineraryService: ItineraryService,
+    private fb: FormBuilder,
+  ) {}
+
+  ngOnInit(): void {
+    this.form = this.fb.group({
+      id: [crypto.randomUUID()],
+      name: ['', [Validators.required]],
+      fullMatch: [false, [Validators.required]],
+      anotherSettings: [false, [Validators.required]],
+    });
+  }
+
+  //UI LOGIC
+  get id(): FormControl {
+    return this.form.get('id') as FormControl;
+  }
+
+  get name(): FormControl {
+    return this.form.get('name') as FormControl;
+  }
+
+  get fullMatch(): FormControl {
+    return this.form.get('fullMatch') as FormControl;
+  }
+
+  get anotherSettings(): FormControl {
+    return this.form.get('anotherSettings') as FormControl;
+  }
+
+  create(): void {
+    const itinerary: Itinerary = {
+      id: this.id.value,
+      name: this.name.value.message,
+      isCompleted: false,
+      description: '',
+      distance: '',
+      distanceValue: '',
+      startLocation: undefined,
+      endLocation: undefined,
+      routeTypes: [],
+      routeRadius: 0,
+      visitingPlaces: [],
+      createdAt: new Date().toISOString(),
+    };
+    this.itineraryService.createOrUpdate(itinerary);
+    this.navToStartLocation();
+  }
+
+  //NAVIGATIONS
+  back(): void {
+    this.location.back();
+  }
+
+  navToStartLocation(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATE_ITINERARY_ORIGIN,
+      this.id.value,
+    ]);
+  }
+
+  navToMemberSearch(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATE_ITINERARY_USER_SEARCH,
+      1,
+    ]);
+  }
+}

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

@@ -0,0 +1,53 @@
+<app-create-itinerary-header
+  [progressBarValue]="15"
+  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">
+      <div class="flex items-center">
+        <lib-icon-btn class="checkmark-icon-button">
+          <img
+            [src]="ICONS['startMarkerImage']"
+            alt="icon"
+            height="16"
+            width="16"
+          />
+        </lib-icon-btn>
+        <div class="ml-4">
+          <span>Shan-ul-haq haqee road</span>
+          <p>Starting location</p>
+        </div>
+      </div>
+      <img [src]="ICONS['editPink']" alt="edit" height="13" width="13" />
+    </div>
+
+    <h1 class="font-Calistoga text-lg mt-5">Destination</h1>
+    <p class="mt-3">Select final destination for itinenary route.</p>
+
+    <div class="mt-3"> 
+      <lib-text-box (click)="navToPickStartLocation()" class="textbox-1" label="Where To?"></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-destination/create-itinerary-destination.component.ts

@@ -0,0 +1,56 @@
+import { Location } from '@angular/common';
+import { 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-destination',
+    templateUrl: './create-itinerary-destination.component.html',
+    styleUrl: './create-itinerary-destination.component.css',
+    standalone: false
+})
+export class CreateItineraryDestinationComponent implements OnInit {
+  ICONS: Iicon = ICONS;
+  isOpen: boolean = true;
+  itinerary: Itinerary | undefined;
+
+  //LIFE CYCLE
+  constructor(
+    private location: Location,
+    private router: Router,
+    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;
+  }
+
+  //NAVIGATIONS
+  navToPickStartLocation() {
+    this.router.navigate(
+      [
+        ItinerariesRoutesEnum.ITINERARY,
+        ItinerariesRoutesEnum.LOCATION_PICKER,
+        this.itinerary?.id,
+      ],
+      { queryParams: { mode: 'end' } },
+    );
+  }
+
+  back(): void {
+    this.location.back();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-draw-mode/create-itinerary-draw-mode.component.css

@@ -0,0 +1,47 @@
+:host {
+  --lib-popup-modal-radius: 16px;
+  --border-radius: var(--lib-popup-modal-radius);
+  --lib-popup-modal-background: #28252d !important;
+  --background: #28252d !important;
+  --overflow: hidden !important;
+  --lib-popup-modal-color: #a8a8a8;
+  --color: var(--lib-popup-modal-color, #a8a8a8);
+  --max-width: var(--lib-bottom-modal-max-width, 500px);
+  --lib-popup-modal-shadow:
+    5px 5px 95px 0px rgba(255, 255, 255, 0.32),
+    -3px -3px 16px 0px rgba(255, 255, 255, 0.1) !important;
+  --box-shadow: var(
+    --lib-popup-modal-shadow,
+    5px 5px 95px 0px rgba(255, 255, 255, 0.32),
+    -3px -3px 16px 0px rgba(255, 255, 255, 0.1)
+  );
+}
+
+.selectables {
+  border-radius: 27.9px;
+  background: rgba(40, 37, 45, 1);
+  box-shadow: 4.1px 4.1px 8.2px 0px rgba(0, 0, 0, 0.32) inset;
+  box-shadow: -2.46px -2.46px 3.28px 0px rgba(255, 255, 255, 0.1) inset;
+  border-radius: 27.9px;
+}
+
+.actions {
+  width: 42px;
+  height: 28px;
+  border-radius: 82.05px;
+}
+
+.selected {
+  background: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%);
+  box-shadow: 3.28px 3.28px 6.56px 0px rgba(0, 0, 0, 0.25);
+  box-shadow: -1.64px -1.64px 8.2px 0px rgba(255, 255, 255, 0.25);
+}
+
+.select-places-text, .select-places-description {
+  font-size: var(--font-size-small);
+}
+
+.button-container {
+    background-color: #27242C;
+    box-shadow: inset 0px 6px 6px -6px rgba(138, 138, 138, 0.67);
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/create-itinerary-draw-mode/create-itinerary-draw-mode.component.html

@@ -0,0 +1,71 @@
+<app-create-itinerary-header
+  [progressBarValue]="50"
+  heading="Create Itinerary"
+></app-create-itinerary-header>
+<lib-map #libMap class="maps-100vh"></lib-map>
+<lib-bottom-modal
+  [showArrow]="true"
+  [(isOpen)]="isOpen"
+  [adaptToContentHeight]="true"
+>
+  <div class="">
+    <ng-container *ngIf="!mapDrawn">
+      <div class="flex items-center justify-between pl-4 pr-4">
+        <h3 class="font-Calistoga text-lg">{{ "ITINERARY.DRAW" | translate }}</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 px-4 mb-4">{{ "ITINERARY.DRAW_DESCRIPTION" | translate }}</p>
+    </ng-container>
+    <ng-container *ngIf="mapDrawn">
+      <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>&nbsp;{{ "ITINERARY.SELECT_MIN_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>&nbsp;0 minutes</span>
+            <span class="text-secondary font-thin">(0.0 km)</span>
+        </div>
+      </div>
+      <div class="select-places-description mt-5 text-center mb-4">
+        {{ "ITINERARY.SELECT_PLACES_INSTRUCTION" | translate }}
+      </div>
+    </ng-container>
+
+    <lib-footer-shared
+    (continueButtonClick)="continue()"
+    (secondaryButtonClick)="clearMap()"
+    [canContinue]="true"
+    [continueButtonText]="'COMMON.CONTINUE' | translate"
+    [secondaryButtonText]="'COMMON.CLEAR' | translate"
+    ></lib-footer-shared>
+  </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-draw-mode/create-itinerary-draw-mode.component.spec.ts

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