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

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

@@ -0,0 +1,130 @@
+import { Location } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnInit,
+} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+  EmojiPickerConfig,
+  IText,
+  LibMenuItem,
+  StatusPosition,
+  ToastrDescription,
+  ToastrSeverity,
+  ToastrStackConfig, 
+} from '@naniteninja/ionic-lib';
+import { Subject } from 'rxjs';  
+import { ItinerariesRoutesEnum } from '../../../../_enums/ItenariesRoutes.enum';
+import { ICommentsData } from '../../../../_interface/commentsdata';
+import { Iicon } from '../../../../_interface/icon';
+import { ApiService } from '../../../../_services/api.service';
+import { CustomDropdownMenuService } from '../../../../_services/custom-dropdown-menu.service';
+import { ModalService } from '../../../../_services/modal.service';
+import { ICONS } from '../../../../_constants/constants';
+@Component({
+    selector: 'app-comments-page',
+    templateUrl: './comments-page.component.html',
+    styleUrl: './comments-page.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
+})
+export class CommentsPageComponent implements OnInit {
+  emojiPickerConfig!: EmojiPickerConfig;
+  textModel!: IText | undefined;
+  libMenuItem: LibMenuItem[] = [];
+  commentData: ICommentsData[] = [];
+  attachedImages: string[] = [];
+  comment!: ICommentsData | undefined;
+  ICONS: Iicon = ICONS;
+  StatusPosition = StatusPosition;
+  config$: Subject<ToastrStackConfig> = new Subject<ToastrStackConfig>();
+
+  //LIFE CYCLES
+  constructor(
+    public modalService: ModalService,
+    private _location: Location,
+    private router: Router,
+    private customMenuList: CustomDropdownMenuService,
+    private apiService: ApiService,
+    private activeRoute: ActivatedRoute,
+    private cdr: ChangeDetectorRef,
+  ) {
+    this.emojiPickerConfig = { pickerIcon: ICONS['pickerIcon'] };
+  }
+  ngOnInit(): void {
+    this.libMenuItem = this.customMenuList.getMenuList('stories');
+    this.getCommentsData();
+  }
+
+  //UI LOGIC
+  getCommentsData(): void {
+    this.apiService.get('/assets/commentsData.json').subscribe((data) => {
+      this.commentData = data as ICommentsData[];
+      const id: string = this.activeRoute.snapshot.params['id'];
+      if (id) {
+        this.comment = this.commentData.find((x) => x.id === id)!;
+        if (this.comment) {
+          this.textModel = {
+            message: this.comment?.commentText,
+            attachments: this.comment?.attachments,
+          };
+        }
+      }
+      this.cdr.detectChanges();
+    });
+  }
+
+  SaveComment(): void {
+    if (this.comment && this.comment.id) {
+      this.config$.next({
+        token: 'token',
+        title: 'Comment Updated',
+        description: {
+          content:
+            'Your featured comment will update after being approved by the author.',
+          type: ToastrDescription.STRING,
+        },
+        severity: ToastrSeverity.SUCCESS,
+      });
+    } else {
+      this.comment = {
+        id: '65',
+        upVotes: 55,
+        downVotes: 4,
+        title: 'Adventure',
+        timeAgo: new Date().toISOString(),
+        views: 54,
+        commentText: this.textModel?.message!,
+        attachments: this.textModel?.attachments || [],
+        hasAttachments: true,
+        userimageSrc: ICONS['userimageSrc'],
+        isEditted: false,
+        userName: 'Mr. Nick',
+      };
+
+      this.commentData.unshift(this.comment);
+      this.cdr.detectChanges();
+    }
+
+    this.textModel = { message: ' ', attachments: [] };
+    this.comment = undefined;
+  }
+
+  //NAVIGATIONS
+  navToCommentSearch(_val: void): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.COMMENT_SEARCH,
+    ]);
+  }
+
+  backButton(): void {
+    this._location.back();
+  }
+
+  searchButtonClick(): void {
+    this.router.navigate([ItinerariesRoutesEnum.SEARCH], { state: { selectedCategory: 'Comments' } }).then((_r) => { });
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/comments/handle-update-comment-request/handle-update-comment-request.component.html

@@ -0,0 +1,8 @@
+<div class="relative min-h-screen">
+  <div class="z-auto">
+    <div class="pb-10">
+      <app-header heading="Comments" (firstButton)="backButton()"></app-header>
+      <app-comment-comparison></app-comment-comparison>
+    </div>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/comments/handle-update-comment-request/handle-update-comment-request.component.ts

@@ -0,0 +1,15 @@
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-handle-update-comment-request',
+    templateUrl: './handle-update-comment-request.component.html',
+    styleUrl: './handle-update-comment-request.component.scss',
+    standalone: false
+})
+export class HandleUpdateCommentRequestComponent {
+  constructor(private _location: Location) {}
+  backButton(): void {
+    this._location.back();
+  }
+}

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

@@ -0,0 +1,37 @@
+<div class="z-auto mt-4">
+  <div class="block md:hidden">
+    <lib-search-bar
+      class="search-field"
+      (searchStringChange)="handleSearchStringChange($event)"
+      (cleared)="clear()"
+      [searchIcon]="ICONS['dashboardSearch']"
+      [placeholderText]="'NG_GRID.searchOoo' | translate"
+    >
+    </lib-search-bar>
+    <app-filter-menu (onFilterClick)="navToCommentSearch()"></app-filter-menu>
+  </div>
+  <div class="pb-10">
+    <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"
+          (TitleClicked)="navigateToDetail(item)"
+          (forkClicked)="navToBranchItinerary()"
+          (messageClicked)="navToComments()"
+          (imageClicked)="navToStories()"
+          (eyeClicked)="navToNotifications()"
+          (menuClicked)="menuClicked($event)"
+        ></app-cutom-card>
+      </ng-container>
+    </div>
+  </div>
+</div>
+<lib-popup [isOpen]="modalSendToClientService.toggleModal">
+  <lib-send-to-client></lib-send-to-client>
+</lib-popup>
+<lib-toast></lib-toast>

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

@@ -0,0 +1,4 @@
+::ng-deep .search-field .container {
+  margin: 0px !important;
+  padding: 0px !important;
+}

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

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

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

@@ -0,0 +1,98 @@
+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',
+    standalone: false
+})
+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,45 @@
+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',
+    standalone: false
+})
+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,68 @@
+* {
+  --main-color: #fe3c72;
+}
+
+.history {
+  color: var(--main-color);
+  font-size: 10px;
+}
+
+.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;
+}
+
+
+lib-selectable#history.history{
+  --box-shadow: 4.1px 4.1px 8.2px 0px #00000052 inset;
+  --padding-start: 16px !important;
+  --padding-end: 16px !important;
+}
+
+::ng-deep lib-selectable {
+  padding-start: 16px !important;
+  padding-end: 16px !important;
+}
+
+.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,78 @@
+<div class="px-4">
+  <app-header heading="History" (firstButton)="back()"></app-header>
+
+</div>
+<div class="my-6 mx-8 flex flex-col justify-between">
+  <div class="flex items-center gap-3 mb-1">
+    <img height="15" width="15" [src]="ICONS['user']" alt="" />
+    <p class="text-white normal-text-lg">Jonathan</p>
+    <p class="last-seen normal-text-sm">
+      11 {{ "DATE_TIME.HOURS" | translate }}
+      {{ "DATE_TIME.AGO" | translate }}
+    </p>
+  </div>
+  <div class="normal-text-md color-[#939195] mb-3">
+    <span class="normal-text-gray me-1">Added New</span> <span class="text-pink-600">Itinerary Passions</span>
+  </div>
+  <lib-selectable [options]="passions" [maxSelectionPossible]="0"></lib-selectable>
+  <div class="border-t border-gray-700 mt-3"></div>
+  <div class="mt-3">
+    <div class="flex items-center gap-3 mt-2">
+      <img height="10.67" width="10.67" [src]="ICONS['user']" alt="" />
+      <p class="text-white normal-text-lg">Jonathan</p>
+      <p class="normal-text-sm normal-text-gray-2">
+        11 {{ "DATE_TIME.DAYS" | translate }}
+        {{ "DATE_TIME.AGO" | translate }}
+      </p>
+    </div>
+    <div class="mt-2 normal-text-md">
+      <span class="normal-text-gray-2 me-1">Added New</span>
+      <span class="text-pink-600">Location</span>
+    </div>
+    <div class="flex row gap-2 items-center mt-4">
+      <img height="10.67" width="8.2" [src]="ICONS['location']" alt="" />
+      <p class="normal-text-md text-white">London Bridge View Restaurant</p>
+    </div>
+  </div>
+
+  <div class="border-t border-gray-700 mt-3"></div>
+  <div class="mt-3">
+    <div class="flex items-center gap-3 mt-2">
+      <img height="10.67" width="10.67" [src]="ICONS['user']" alt="" />
+      <p class="text-white normal-text-lg">Jonathan</p>
+      <p class="normal-text-sm normal-text-gray-2">
+        11 {{ "DATE_TIME.DAYS" | translate }}
+        {{ "DATE_TIME.AGO" | translate }}
+      </p>
+    </div>
+    <div class="mt-2 normal-text-md">
+      <span class="normal-text-gray-2 me-1">Changed</span>
+      <span class="text-pink-600">Itinerary Title</span>
+    </div>
+    <div class="mt-4 normal-text-md flex">
+      <div class="normal-text-gray-2 min-w-[26px] me-1">From</div>
+      <div class="text-pink-600">Adventuretour</div>
+    </div>
+    <div class="mt-2 normal-text-md flex">
+      <div class="normal-text-gray-2 min-w-[26px] me-1">To</div>
+      <div class="text-pink-600">Adventure Tour</div>
+    </div>
+  </div>
+  <div class="border-t border-gray-700 mt-2"></div>
+
+  <div class="mt-3">
+    <div class="flex items-center gap-3 mt-2">
+      <img height="10.67" width="10.67" [src]="ICONS['user']" alt="" />
+      <p class="text-white normal-text-lg">Jonathan</p>
+      <p class="normal-text-sm normal-text-gray-2">
+        11 {{ "DATE_TIME.DAYS" | translate }}
+        {{ "DATE_TIME.AGO" | translate }}
+      </p>
+    </div>
+    <div class="mt-2 normal-text-md">
+      <span class="normal-text-gray-2 me-1">Created using</span>
+      <span class="text-pink-600">Custom Itinerary</span>
+    </div>
+  </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,48 @@
+import { Component } from '@angular/core';
+import { SelectOption } from '@naniteninja/ionic-lib'; 
+import { Iicon } from '../../../../_interface/icon'; 
+import { ICONS } from '../../../../_constants/constants';
+import { Location } from '@angular/common';
+
+@Component({
+    selector: 'app-itinerary-author-history',
+    templateUrl: './itinerary-author-history.component.html',
+    styleUrl: './itinerary-author-history.component.css',
+    standalone: false
+})
+export class ItineraryAuthorHistoryComponent {
+  ICONS: Iicon = ICONS;
+  constructor(
+    private location: Location
+  ) { }
+  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,
+    }
+  ];
+
+  back() {
+    this.location.back();
+  }
+}