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

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/suggested-events-location/suggested-events-location.component.html

@@ -0,0 +1,140 @@
+<app-create-itinerary-header
+  [progressBarValue]="25"
+  heading="Suggested Events"
+></app-create-itinerary-header>
+<lib-map
+  #libMap
+  [markers]="mapMarkerModel"
+  class="maps-100vh"
+></lib-map>
+<lib-bottom-modal
+  submitButtonTitle="Continue"
+  [showArrow]="true"
+  [(isOpen)]="isOpen"
+  [adaptToContentHeight]="true"
+  (submitModal)="navToNextPage()"
+>
+  <div class="flex items-center justify-center pt-0 p-5 pb-0">
+    <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"
+                      >
+                        {{ itineary?.startLocation?.address }}
+                      </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['enLocation']"
+                        alt=""
+                      />
+                    </div>
+                    <div class="text">
+                      <h2
+                        class="f-sm f-xs flex items-center gap-x-1 text-xs mb-1"
+                      >
+                        {{ itineary?.endLocation?.address }}
+                      </h2>
+                      <p class="f-xs text-secondary text-xs mb-1">
+                        Destination
+                      </p>
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-x-3">
+                    <img
+                      loading="lazy"
+                      [src]="ICONS['editPink']"
+                      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/suggested-events-location/suggested-events-location.component.ts

@@ -0,0 +1,84 @@
+import { Location } from '@angular/common';
+import { ChangeDetectorRef, Component, OnInit, ViewChild } 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';
+import { LibMapsComponent, MapMarkerModel } from '@naniteninja/ionic-lib';
+
+@Component({
+    selector: 'app-suggested-events-location',
+    templateUrl: './suggested-events-location.component.html',
+    styleUrl: './suggested-events-location.component.css',
+    standalone: false
+})
+export class SuggestedEventsLocationComponent implements OnInit {
+  ICONS: Iicon = ICONS;
+  isOpen: boolean = true;
+  itineary: Itinerary | undefined;
+  mapMarkerModel: MapMarkerModel[] = [];
+  @ViewChild('libMap') libMap!: LibMapsComponent;
+
+  //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.itineary = this.itineraryService.getById(id);
+
+      const [startlng, startLat] = this.itineary?.startLocation?.coordinates!;
+      this.mapMarkerModel.push({
+        id: '1',
+        position: { lat: startLat, lng: startlng },
+        radius: 1000,
+        icon: this.ICONS['startLocation'],
+        omitMarkerCircle: true
+      });
+
+      const [endlng, endLat] = this.itineary?.endLocation?.coordinates!;
+      this.mapMarkerModel.push({
+        id: '2',
+        position: { lat: endLat, lng: endlng },
+        radius: 1000,
+        icon: this.ICONS['enLocation'],
+        omitMarkerCircle: true
+      });
+
+      setTimeout(() => {
+        if (this.libMap) {
+          const bounds = new google.maps.LatLngBounds();
+          bounds.extend(new google.maps.LatLng(startLat, startlng));
+          bounds.extend(new google.maps.LatLng(endLat, endlng));
+          this.libMap.map.fitBounds(bounds);
+        }
+      });
+    }
+  }
+
+  //UI LOGIC
+  showBottomModal(): void {
+    this.isOpen = true;
+    this.cdr.detectChanges();
+  }
+
+  //NAVIGATIONS
+  navToNextPage() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.SUGGESTED_EVENTS_ROUTE_TYPE,
+      this.itineary?.id,
+    ]);
+  }
+  back(): void {
+    this.location.back();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/suggested-events-route-radius/suggested-events-route-radius.component.html

@@ -0,0 +1,35 @@
+<app-create-itinerary-header
+  [progressBarValue]="35"
+  heading="Suggested Events"
+></app-create-itinerary-header>
+<lib-map class="maps-100vh"></lib-map>
+<lib-bottom-modal
+  submitButtonTitle="Continue"
+  [showArrow]="true"
+  [(isOpen)]="isOpen"
+  [adaptToContentHeight]="true"
+  (submitModal)="navToNextPage()"
+>
+  <span class="text-center block"> Route radius </span>
+  <div class="flex justify-between mt-5 ml-4 mr-5">
+    <p class="text-white">Time from direct router</p>
+    <p class="text-white">1 minute</p>
+  </div>
+
+  <div class="mt-2">
+    <lib-range-selector></lib-range-selector>
+  </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/suggested-events-route-radius/suggested-events-route-radius.component.ts

@@ -0,0 +1,54 @@
+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-suggested-events-route-radius',
+    templateUrl: './suggested-events-route-radius.component.html',
+    styleUrl: './suggested-events-route-radius.component.css',
+    standalone: false
+})
+export class SuggestedEventsRouteRadiusComponent implements OnInit {
+  isOpen: boolean = true;
+  ICONS: Iicon = ICONS;
+  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.SELECT_ITINERARY_EVENTS,
+      this.itinerary?.id,
+    ]);
+  }
+  back(): void {
+    this.location.back();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/pages/suggested-events-route-type/suggested-events-route-type.component.html

@@ -0,0 +1,52 @@
+<app-create-itinerary-header
+  [progressBarValue]="30"
+  heading="Suggested Events"
+></app-create-itinerary-header>
+<lib-map class="maps-100vh"></lib-map>
+<lib-bottom-modal
+  submitButtonTitle="Continue"
+  [showArrow]="true"
+  [(isOpen)]="isOpen"
+  [adaptToContentHeight]="true"
+  (submitModal)="navToNextPage()"
+>
+  <div class="flex items-center justify-center">
+    <div class="flex items-center w-full">
+      <div class="main-itini-preview w-full pt-0 p-5 pb-0">
+        <section class="mt-3 w-full">
+          <div class="tracking-widest rounded-t-3xl">
+            <p class="w-full flex justify-center text-sm text-white mb-5">
+              Route type
+            </p>
+            <div class="flex gap-[10px]">
+              @for (option of recommendedRouteTypes; track $index) {
+                <lib-selectable [options]="option"></lib-selectable>
+              }
+            </div>
+            <div class="border-t border-gray-700 mt-4 mb-3"></div>
+            <p class="text-white text-[13px] mb-[8.54px]">More</p>
+
+            <div class="flex gap-[10px] flex-wrap">
+              @for (option of moreRouteTypes; track $index) {
+                <lib-selectable [options]="option"></lib-selectable>
+              }
+            </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/suggested-events-route-type/suggested-events-route-type.component.ts

@@ -0,0 +1,71 @@
+import { Location } from '@angular/common';
+import { 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-suggested-events-route-type',
+    templateUrl: './suggested-events-route-type.component.html',
+    styleUrl: './suggested-events-route-type.component.css',
+    standalone: false
+})
+export class SuggestedEventsRouteTypeComponent implements OnInit {
+  ICONS: Iicon = ICONS;
+  isOpen: boolean = true;
+  itineary: Itinerary | undefined;
+
+  recommendedRouteTypes: SelectOption<string>[][] = [
+    [{ label: 'City scenic', value: 'city-scenic' }],
+    [{ label: 'Nature scenic', value: 'nature-scenic' }],
+  ];
+
+  moreRouteTypes: SelectOption<string>[][] = [
+    [{ label: 'Containes historic places', value: 'contains-historic-places' }],
+    [{ label: 'Avoid traffic', value: 'avoid-traffic' }],
+    [
+      {
+        label: 'Route Modifier Placeholder',
+        value: 'route-modifier-placeholder',
+      },
+    ],
+  ];
+
+  //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.itineary = this.itineraryService.getById(id);
+    }
+  }
+
+  //UI LOGIC
+  showBottomModal(): void {
+    this.isOpen = true;
+    this.cdr.detectChanges();
+  }
+
+  //NAVIGATIONS
+  navToNextPage() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.SUGGESTED_EVENTS_ROUTE_RADIUS,
+      this.itineary?.id,
+    ]);
+  }
+  back(): void {
+    this.location.back();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/comment-replies/comment-replies.component.css

@@ -0,0 +1,19 @@
+:host ::ng-deep .popover-container {
+  gap: 0;
+}
+
+lib-text-box {
+  --height: 40px;
+  --input-padding: 10.8px;
+  --emoji-picker-trigger-icon-size: 16.41px;
+  --image-attachment-toggle-size: 16.41px;
+  --border-radius: 21px;
+}
+
+.comment-divider {
+  margin: 4px 28px;
+  height: 0.8205000162124634px;
+  border-radius: 6.83px;
+  opacity: 0.15;
+  background-color: #DCDCDC;
+}

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

@@ -0,0 +1,28 @@
+<div>
+    <div class="">
+        <div class="px-4">
+          <app-header heading="Replies" (firstButton)="back()"></app-header>
+        </div>
+        <div class="mt-4 ps-4 pe-2">
+          <app-comment-single [comment]="comment" [featured]="true"></app-comment-single>
+          <div class="flex w-full px-2 mt-2">
+            <lib-text-box class="flex-1 w-full rounded-2 p-1" [includeEmojiPicker]="true" [emojiPickerConfig]="emojiPickerConfig" [(ngModel)]="textModel" [includeImageAttachment]="true" style="max-width: calc(100vw - 94px); font-size: 11.49px;">
+            </lib-text-box>
+            <div class="py-2">
+              <button (click)="postReply()">
+                <img [src]="ICONS['submit']" class="w-10 h-10"/>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div *ngIf="replies.length" class="comment-divider"></div>
+        <div class="grid w-full items-center ps-[54px] pe-2">
+          <div *ngFor="let reply of replies" class="pt-[16px]">
+            <app-comment-single [comment]="reply" [featured]="false"></app-comment-single>
+          </div>
+        </div>
+        <lib-popup  class="lib-menu-custom-class lib-menu-bg-none"[isOpen]="modalService.toggleModal">
+            <app-report-itinerary-modal popupTitle='Report Comment'></app-report-itinerary-modal>
+        </lib-popup>
+    </div>
+</div>

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

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

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

@@ -0,0 +1,65 @@
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
+import { EmojiPickerConfig, IText } from '@naniteninja/ionic-lib';
+import { ModalService } from '../../../../_services/modal.service';
+import { ICONS } from '../../../../_constants/constants';
+import { ICommentsData } from '../../../../_interface/commentsdata';
+
+@Component({
+    selector: 'app-comment-replies',
+    templateUrl: './comment-replies.component.html',
+    styleUrl: './comment-replies.component.css',
+    standalone: false
+})
+export class CommentRepliesComponent {
+  ICONS = ICONS;
+  emojiPickerConfig!: EmojiPickerConfig;
+  textModel!: IText | undefined;
+
+  comment = {
+    id: '1',
+    upVotes: 10,
+    downVotes: 5,
+    title: 'Adventuretour',
+    userName: 'Jonathan',
+    timeAgo: '2 hours ago',
+    location: 'WESTMINSITERO',
+    views: 100,
+    hasAttachments: false,
+    isEditted: false,
+    attachments: [],
+    userimageSrc: '/assets/images/user-image.png',
+    commentText:
+      'I had Great Experience out there. I would say its perfect for a coffee lover.',
+  };
+
+  replies: ICommentsData[] = [];
+
+  constructor(
+    private location: Location,
+    public modalService: ModalService,
+  ) {
+    this.emojiPickerConfig = { pickerIcon: ICONS['pickerIcon'] };
+  }
+
+  back() {
+    this.location.back();
+  }
+
+  postReply() {
+    const new_reply = { ...this.comment };
+    const raw_Reply = this.textModel;
+    if (raw_Reply?.attachments) {
+      new_reply.attachments = raw_Reply.attachments as never[];
+      new_reply.hasAttachments = true;
+    }
+    new_reply.commentText = raw_Reply?.message!;
+
+    this.replies.push(new_reply);
+    this.textModel = undefined;
+  }
+  ngOnInit(): void {
+
+  }
+
+}

package/src/lib/itinerary-app/modules/itineraries/pages/comment-replies/components/comment-single/comment-single.component.css

@@ -0,0 +1,32 @@
+.comment-title {
+  font-weight: 400;
+  font-size: 9.85px;
+  line-height: 150%;
+  letter-spacing: -1.1%;
+  color: #BDBDBD;
+}
+
+.comment-content {
+  font-weight: 400;
+  font-size: 11.49px;
+  line-height: 150%;
+  letter-spacing: -1.1%;
+  color: white;
+}
+
+.comment-control {
+  font-weight: 400;
+  font-size: 9.85px;
+  line-height: 150%;
+  letter-spacing: -1.1%;
+  color: #BDBDBD;
+}
+
+lib-menu-btn {
+
+}
+
+.comment-card img.object-cover {
+  width: 118.15;
+  height: 72.2;
+}