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

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,83 @@
+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',
+})
+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,53 @@
+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',
+})
+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,70 @@
+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',
+})
+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.html

@@ -0,0 +1,19 @@
+<div>
+    <div class="ps-5 pe-5">
+        <app-header heading="Replies" (firstButton)="back()"></app-header>
+        <app-comment-single [comment]="comment" [featured]="true"></app-comment-single>
+        <div class="flex w-full items-center px-2">
+            <lib-text-box class="flex-1 w-full rounded-2" [includeEmojiPicker]="true" [emojiPickerConfig]="emojiPickerConfig" [(ngModel)]="textModel" [includeImageAttachment]="true" style="max-width: calc(100vw - 94px); padding: 2px 4px;">
+            </lib-text-box>
+            <button (click)="postReply()">
+                <img [src]="ICONS['submit']" class="w-10 h-10" />
+            </button>
+        </div>
+        <div class="grid w-full items-center px-5">
+            <app-comment-single *ngFor="let reply of replies" [comment]="reply" [featured]="false"></app-comment-single>
+        </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,62 @@
+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';
+
+@Component({
+  selector: 'app-comment-replies',
+  templateUrl: './comment-replies.component.html',
+  styleUrl: './comment-replies.component.css',
+})
+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: any[] = [];
+
+  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);
+  }
+  ngOnInit(): void {
+
+  }
+
+}

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

@@ -0,0 +1,23 @@
+.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;
+}

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

@@ -0,0 +1,65 @@
+<ng-container *ngIf="comment">
+    <div class="comment-card text-white p-4 rounded-xl w-full">
+        <div class="flex items-start justify-between">
+            <!-- Left Side: Profile & Details -->
+            <div class="flex space-x-3">
+                <!-- Profile Image -->
+                <div>
+                  <img [src]="ICONS['user']" alt="User" class="w-<10> h-<10> rounded-full mt-1 mb-3" />
+                  <!-- Upvote/Downvote -->
+                  <div class="flex flex-col items-center text-pink-500 gap-1">
+                      <img [src]="ICONS['upvote']" alt="Upvote" class="cursor-pointer" />
+                      <span class="text-[7px] font-semibold">{{ comment.upVotes }}</span>
+                      <img [src]="ICONS['downvote']" alt="Downvote" class="cursor-pointer" />
+                  </div>
+                </div>
+
+                <!-- Username & Timestamp -->
+                <div>
+                    <h4 class="comment-title">{{ comment.userName }} - {{ comment.timeAgo }}
+                      {{comment.isEditted == true ? "(Edited)" : ""}}
+                    </h4>
+                    <p class="comment-content mt-1">{{ comment.commentText }}</p>
+                    <!-- Reply & Feature Comment -->
+                    <div class="flex space-x-4 text-gray-400 text-sm comment-control mt-3">
+                      <button class="flex items-center space-x-1 hover:text-white me-4">
+                          <img [src]="ICONS['comment2']" alt="Reply" />
+                          <span>Reply</span>
+                      </button>
+                      <button class="flex items-center space-x-1 hover:text-white">
+                          <ng-container *ngIf="featured; else notFeatured">
+                              <img [src]="ICONS['removeFeature']" alt="Feature" />
+                              <span>Featured</span>
+                          </ng-container>
+                          <ng-template #notFeatured>
+                              <img [src]="ICONS['addFeature']" alt="Feature" />
+                              <span>Feature Comment</span>
+                          </ng-template>
+                      </button>
+                    </div>
+                </div>
+            </div>
+
+            <lib-menu-btn (select)="handleMenueItemSelect()" (click)="handleMenuClick()"
+                (change)="handleMenuItemChange()" class="lib-menu-custom-class lib-menu-bg-none" [disableTextShadow]="true"
+                [menuItems]="libMenuItem">
+                <img [src]="ICONS['horizontalWhite']" alt="" />
+            </lib-menu-btn>
+        </div>
+
+        <!-- Attachments Section (Visible Only If hasAttachment is True) -->
+        <div *ngIf="comment.hasAttachments===true" class="grid grid-cols-2 gap-2 mt-3">
+            <ng-container *ngFor="let image of comment.attachments; let i = index">
+                <div class="relative" *ngIf="i < 4">
+                    <img [src]="image" alt="Attachment" class="w-full h-28 rounded-lg object-cover" />
+                    <div *ngIf="i === 3 && comment.attachments"
+                        class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center text-white text-xl font-bold">
+                        +{{ i }}
+                    </div>
+                </div>
+            </ng-container>
+        </div>
+        <!-- Separator Line -->
+        <div *ngIf="!featured" class="border-t border-gray-700 mt-1"></div>
+    </div>
+</ng-container>

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

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