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

package/src/lib/itinerary-app/shared/custom-story-card/custom-story-card.component.scss

@@ -0,0 +1,283 @@
+@use "../../_styles/colors" as *;
+
+.card-component {
+  --width: auto;
+  background: $background-color-1;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
+.carousel-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 85vh;
+  overflow: hidden;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
+.carousel {
+  position: relative;
+  width: 90%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+
+}
+
+.card {
+  background-color: gray;
+  position: relative;
+  width: 100%;
+  border-radius: 6.56px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  align-items: center;
+  font-size: 1.5rem;
+  font-weight: bold;
+  transition: transform 0.5s ease-in-out, opacity 0.3s ease;
+  transform: translateY(100%); // Default starting state
+
+
+  &.above {
+    transform: translateY(-100%);
+    border-radius: 0px 0px 6.56px 6.56px;
+    opacity: 0.5;
+    z-index: 1;
+    height: 10%;
+    width: 90%;
+  }
+
+  &.active {
+    transform: translateY(0);
+    opacity: 1;
+    z-index: 2;
+    height: 100%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+
+  &.below {
+    transform: translateY(100%);
+    border-radius: 6.56px 6.56px 0px 0px;
+    opacity: 0.5;
+    z-index: 1;
+    height: 10%;
+    width: 90%;
+  }
+
+  &.slide-up {
+    animation: slideUpIn 0.5s ease-out forwards;
+  }
+
+  &.slide-down {
+    animation: slideDownOut 0.5s ease-in forwards;
+  }
+}
+
+@keyframes slideUpIn {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideDownOut {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+.header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: #1a1a1a;
+  border-radius: 12px 12px 0 0;
+
+  .back-btn,
+  .menu-btn {
+    background: none;
+    border: none;
+    font-size: 20px;
+    color: white;
+    cursor: pointer;
+  }
+
+  .user-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+    }
+
+    .username {
+      color: white;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .icon-crown {
+      color: gold;
+      font-size: 18px;
+    }
+  }
+}
+
+.progress-bar {
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(to right, #eaeaea80, #eaeaea80);
+  margin-top: 4px;
+  border-radius: 2px;
+  margin-left: 2px;
+}
+
+.story-content {
+  background: #27242c;
+  box-shadow:
+    9.0255px 8.205px 22.1535px rgba(17, 16, 20, 0.65),
+    -4.1025px -4.1025px 13.128px rgba(203, 199, 209, 0.25);
+  border-radius: 6.564px;
+}
+
+.votes-Count {
+  font-weight: 600;
+  font-size: 9.846px;
+  color: #ffffff;
+  text-shadow: 0px 1.06548px 2.13097px rgba(0, 0, 0, 0.5);
+}
+
+.story-title {
+  font-weight: 500;
+  font-size: 19.692px;
+  line-height: 100%;
+  display: flex;
+  align-items: center;
+  color: #ffffff;
+  text-shadow: 0px 1.06548px 2.13097px rgba(0, 0, 0, 0.5);
+}
+
+.story-bottom-info-badge {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 8.205px;
+  line-height: 100%;
+  display: flex;
+  align-items: center;
+  text-wrap: nowrap;
+}
+
+.ellipsis {
+  white-space: nowrap;      /* keep text on one line */
+  overflow: hidden;         /* hide extra text */
+  text-overflow: ellipsis;
+}
+
+.story-bottom-buttons-pink {
+  color: #fe3c72;
+}
+
+.story-bottom-buttons-white {
+  color: white;
+}
+
+.story-text {
+  font-weight: 400;
+  font-size: 9.846px;
+  line-height: 150%;
+  text-align: start;
+  letter-spacing: -0.011em;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.read-more-text {
+  font-weight: 400;
+  font-size: 9.846px;
+  line-height: 150%;
+  letter-spacing: -0.011em;
+  color: #fe3c72;
+}
+
+.story-avatar{
+  width: 28px;
+  height: 28px;
+}
+
+.story-img {
+  position: relative;
+  z-index: 0;
+}
+
+.story-img::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.25) 0%,
+    rgba(0, 0, 0, 0.1) 21.35%,
+    rgba(0, 0, 0, 0) 51.04%,
+    rgba(0, 0, 0, 0.22) 69.27%,
+    rgba(0, 0, 0, 0.35) 100%
+  );
+  z-index: 1;
+  pointer-events: none;
+}
+
+.story-img > * {
+  z-index: 2;
+}
+
+.pic-switch-bar {
+  z-index: 100;
+}
+
+.custom-padding {
+  padding-top: 130px;
+}
+.story-bottom-info {
+  bottom: 75px;
+  left: 18px;
+}
+.story-right-info {
+  bottom: 150px;
+  right: 10px;
+}
+// Optional: Responsive handling (you may uncomment and adjust as needed)
+/*
+.imageSize {
+  height: 80%;
+}
+@media screen and (max-width: 375px) and (max-height: 667px) {
+  .imageSize {
+    height: 100%;
+  }
+}
+@media screen and (min-height: 915px) {
+  .imageSize {
+    height: 75%;
+  }
+}
+*/

package/src/lib/itinerary-app/shared/custom-story-card/custom-story-card.component.ts

@@ -0,0 +1,181 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  HostListener,
+  Input,
+  OnInit
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { LibMenuItem } from '@naniteninja/ionic-lib';   
+import { ICONS } from '../../_constants/constants';
+import { ItinerariesRoutesEnum } from '../../_enums/ItenariesRoutes.enum';
+import { ICardData } from '../../_interface/cardData';
+import { Iicon } from '../../_interface/icon';
+import { ApiService } from '../../_services/api.service';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-custom-story-card',
+  templateUrl: './custom-story-card.component.html',
+  styleUrl: './custom-story-card.component.scss',
+})
+export class CustomStoryCardComponent implements OnInit {
+  @Input() libMenuItem!: LibMenuItem[];
+  @Input() isDraft!: boolean;
+  cardData: ICardData | undefined;
+  private scrollTimeout: any;
+   private isScrolling = false;
+  processedCardData: ICardData | undefined;
+  ICONS: Iicon = ICONS;
+  cardDataForLocations = {
+    locationColumn1: [
+      { icon: ICONS['temp'], name: 'Palace' },
+      { icon: ICONS['palace2'], name: 'Template' },
+      { icon: ICONS['palace2'], name: 'Optional' },
+      { icon: ICONS['palace2'], name: 'Optional' },
+    ],
+    locationColumn2: [
+      { icon: ICONS['coffee'], name: 'Coffee shop' },
+      { icon: ICONS['template'], name: 'Optional' },
+      { icon: ICONS['template'], name: 'Optional' },
+      { icon: ICONS['template'], name: 'Optional' },
+    ],
+  };
+
+    images: string[] = [
+      "https://static.gopro.com/assets/blta2b8522e5372af40/blt2d5eb5852c683074/671a428c24f2274281f1fb1a/02_HP_H13CE_375.jpg",
+      "https://static.gopro.com/assets/blta2b8522e5372af40/blt2d5eb5852c683074/671a428c24f2274281f1fb1a/02_HP_H13CE_375.jpg",
+      "https://static.gopro.com/assets/blta2b8522e5372af40/blt2d5eb5852c683074/671a428c24f2274281f1fb1a/02_HP_H13CE_375.jpg"
+    ]
+
+  constructor(
+    private apiService: ApiService,
+    private router: Router,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  @HostListener('window:wheel', ['$event'])
+  onWheel(event: WheelEvent) {
+    if (!this.isScrolling) {
+      this.isScrolling = true;
+
+      if (event.deltaY > 0) {
+        console.log('scroll down');
+        // Trigger your "next video" or content change here
+      } else if (event.deltaY < 0) {
+        console.log('scroll up');
+        // Trigger your "previous video" or content change here
+      }
+
+      // Wait until the gesture is finished
+      this.scrollTimeout = setTimeout(() => {
+        this.isScrolling = false;
+      }, 500); // Adjust this duration to feel smoother or stricter
+    }
+
+    // Optional: reset timeout if new scroll comes before timeout ends
+    clearTimeout(this.scrollTimeout);
+    this.scrollTimeout = setTimeout(() => {
+      this.isScrolling = false;
+    }, 500);
+  }
+
+  ngOnInit(): void {
+    this.loadCardData();
+    this.libMenuItem = this.libMenuItem.map((val) => {
+      if (val.title === 'EDIT_COMMENT') {
+        return {
+          ...val,
+          command: () => {
+            this.navToUpdateComment();
+          },
+        };
+      }
+      return val;
+    });
+  }
+
+  private InvalidDataCheck(data: string | number | null | undefined): boolean {
+    return (
+      data?.toString().length == 0 ||
+      data == null ||
+      data == undefined ||
+      data == '0' ||
+      data == 0 ||
+      data == '-'
+    );
+  }
+
+  private processCardData(data: ICardData): ICardData {
+    return {
+      ...data,
+      id: data.id ?? '0',
+      upVotes: this.InvalidDataCheck(data.upVotes) ? '00' : data.upVotes,
+      title: this.InvalidDataCheck(data.title)
+        ? 'Untitled Itinerary'
+        : data.title,
+      userName: this.InvalidDataCheck(data.userName) ? 'You' : data.userName,
+      timeAgo: this.InvalidDataCheck(data.timeAgo) ? '' : data.timeAgo,
+      users: this.InvalidDataCheck(data.users) ? 0 : data.users,
+      views: this.InvalidDataCheck(data.views) ? 0 : data.views,
+      comments: this.InvalidDataCheck(data.comments) ? 0 : data.comments,
+      shares: this.InvalidDataCheck(data.shares) ? 0 : data.shares,
+      imageSrc: this.InvalidDataCheck(data.imageSrc)
+        ? ICONS['untitled']
+        : data.imageSrc,
+      userimageSrc: this.InvalidDataCheck(data.userimageSrc)
+        ? ICONS['notSpecified']
+        : data.userimageSrc,
+      location: this.InvalidDataCheck(data.location)
+        ? 'Not Specified'
+        : data.location,
+    };
+  }
+
+  loadCardData() {
+    if (!this.isDraft) {
+      this.apiService.get('/assets/data.json').subscribe((data) => {
+        this.cardData = data as ICardData;
+        this.processedCardData = this.processCardData(this.cardData);
+        this.cdr.detectChanges();
+      });
+    } else {
+      this.cardData = this.createDummyCard();
+      this.processedCardData = this.processCardData(this.cardData);
+    }
+  }
+  createDummyCard(): ICardData {
+    let card: ICardData;
+    card = {
+      id: '1',
+      upVotes: '',
+      downVotes: 5,
+      title: '',
+      userName: '',
+      timeAgo: '',
+      location: '',
+      views: 0,
+      comments: 0,
+      shares: 0,
+      users: 0,
+      imageSrc: '',
+      userimageSrc: '',
+      isDraft: true,
+    };
+
+    return card;
+  }
+  handleMenueItemSelect(): void {}
+  handleMenuItemChange(): void {}
+  handleMenuClick(): void {}
+
+  goBack(){
+    window.history.back();
+  }
+
+  //NAVIGATION
+  navToUpdateComment(): void {
+    this.router.navigate([ItinerariesRoutesEnum.COMMENTS, this.cardData?.id]);
+  }
+}

package/src/lib/itinerary-app/shared/cutom-card/cutom-card.component.html

@@ -0,0 +1,120 @@
+<lib-base-card *ngIf="processedCardData" class="card-component px-4 py-4 my-2 rounded-lg outset-downshadow">
+  <div class="flex items-start justify-between mb-2">
+    <div class="flex gap-5 items-start">
+      <div [class]="
+          !isDraft
+            ? ' text-primary'
+            : '' +
+              ' items-center sm:text-[10px] xs:text-[9px] flex flex-col gap-y-[0px]'
+        ">
+        <img [src]="!isDraft ? ICONS['upvote'] : ICONS['upArrowWhite']" alt="" />
+        <span [class]="!isDraft ? 'text-primary' : 'drah-voter-header'">
+          {{ parseStringToNumber(processedCardData.upVotes) | votes }}
+        </span>
+        <img [src]="ICONS['downvote']" alt="" />
+      </div>
+      <div (click)="handleTitleClick()" class="">
+        <h4 class="title medium-14 p-0 m-0">
+          {{ processedCardData.title }}
+        </h4>
+        <h5 class="text-secondary opacity-80 text-[10px] xs:text-[9px] flex gap-[6px] items-center">
+          <img [src]="ICONS['user']" alt="" />
+          <span>{{ processedCardData.userName }} -
+            {{ processedCardData.timeAgo }}</span>
+        </h5>
+      </div>
+    </div>
+    <ng-container *ngIf="displayPublishStatus">
+      <div class="draft-header lg:ml-[36px]" *ngIf="processedCardData.isDraft">
+        {{ "DRAFT_SAVED" | translate }}
+      </div>
+      <div class="draft-header lg:ml-[36px]" *ngIf="!processedCardData.isDraft">
+        Published
+      </div>
+    </ng-container>
+      
+    <div class="flex items-center">
+      <!-- <div *ngIf="itineraryStarted" (click)="handleStartItineraryClick()" class="startItinerary">
+        <img [src]="ICONS['startItinerary']" alt="icon" />
+      </div> -->
+      <lib-menu-btn
+        (select)="handleMenueItemSelect()"
+        (click)="handleMenuClick()"
+        (change)="handleMenuItemChange()"
+        id="lib-menu-btn"
+        class="lib-menu-custom-class lib-menu-bg-none"
+        [disableTextShadow]="true"
+        [menuItems]="libMenuItem"
+      >
+        <img [src]="ICONS['horizontal']" alt="" />
+      </lib-menu-btn>
+    </div>
+  </div>
+  <hr class="h-1 text-secondary opacity-25" />
+  <div class="my-2 flex items-start gap-x-5">
+    <div
+      (click)="handleImageClick()"
+      class="1 mb-0 flex flex-col items-center justify-center w-[80px]"
+    >
+      <img
+        class="card-image"
+        [src]="processedCardData.imageSrc"
+        alt=""
+        width="100"
+      />
+    </div>
+    <div class="2 flex-1">
+      <div *ngIf="!cardData?.isDraft" class="font-normal text-secondary flex items-center gap-x-4 text-sm">
+        <ul class="flex flex-col gap-y-[6px] xs:text-[9px] sm:text-[12px]">
+          <li *ngFor="let location of cardDataForLocations.locationColumn1"
+            class="location-item flex items-center gap-1">
+            <img [src]="location.icon" alt="" />
+            <span class="truncate sm:max-w-10 xs:max-w-11">{{
+              location.name
+              }}</span>
+          </li>
+        </ul>
+        <ul class="flex flex-col gap-y-[6px] xs:text-[9px] sm:text-[12px]">
+          <li *ngFor="let location of cardDataForLocations.locationColumn2"
+            class="location-item flex items-center gap-1">
+            <img [src]="location.icon" alt="" />
+            <span class="truncate sm:max-w-10 xs:max-w-11">{{
+              location.name
+              }}</span>
+          </li>
+        </ul>
+      </div>
+      <p *ngIf="processedCardData.isDraft" class="text-xs draft-description">
+        {{ "FINISH_ITINERARY_CREATION" | translate }}
+      </p>
+    </div>
+  </div>
+  <hr class="h-1 text-secondary opacity-25" />
+  <div class="my-2 flex items-center justify-between">
+    <div
+      class="flex items-center justify-between sm:gap-x-7 xs:gap-x-5 sm:text-sm xs:text-[9px] text-secondary"
+    >
+      <div (click)="handleEyeClicked()" class="flex items-center gap-x-[6px]">
+        <img class="bottom-icons" [src]="ICONS['eye']" alt="" />
+        <span class="bottom-tags">{{ processedCardData.views }}</span>
+      </div>
+      <div (click)="handleMessageClicked()" class="flex items-center gap-x-[6px]">
+        <img class="bottom-icons" [src]="ICONS['comment2']" alt="" />
+        <span class="bottom-tags">{{ processedCardData.comments }}</span>
+      </div>
+      <div (click)="handleForkClick()" class="flex items-center gap-x-[6px]">
+        <img class="bottom-icons" [src]="ICONS['fork']" alt="" />
+        <span class="bottom-tags">{{ processedCardData.shares }}</span>
+      </div>
+    </div>
+    <div (click)="handleUserProfileClicked()" class="flex items-center gap-x-1">
+      <span class="text-[13px] userIconText">
+        {{ processedCardData.users }}
+        <span class="user-icon-text" *ngIf="processedCardData.users > 0">Users</span>
+      </span>
+
+      <app-users-stack [size]="14" [images]="images"></app-users-stack>
+      <!--  <img [src]="processedCardData.userimageSrc" alt="" /> -->
+    </div>
+  </div>
+</lib-base-card>

package/src/lib/itinerary-app/shared/cutom-card/cutom-card.component.scss

@@ -0,0 +1,85 @@
+@use "../../_styles/colors" as *;
+
+.card-component {
+  --width: auto;
+  background: $background-color-1;
+}
+
+.bottom-tags {
+  font-size: 12px;
+}
+
+.draft-header {
+  color: $text-color-4;
+  font-weight: normal !important;
+  font-size: 11px !important;
+  margin-top: 7px;
+  position: relative;
+}
+
+.draft-description {
+  color: $text-color-3;
+}
+
+.usericon-text {
+  color: $text-color-4;
+  margin-top: 2px;
+  font-size: 11px;
+}
+
+.bottom-icons {
+  height: 15px;
+  width: 16px;
+}
+
+.bottom-icons:last-child {
+  height: 16px !important;
+  width: 17px !important;
+}
+
+.card-image {
+  width: 100%;
+}
+
+.bottom-bar-loc {
+  background: $background-color-9 !important;
+  width: 5rem !important;
+  bottom: 1rem !important;
+}
+
+.location-item-main {
+  font-size: 12px;
+}
+
+.location-item-main span {
+  margin-top: 2px;
+  font-size: 12px;
+}
+
+.location-item span {
+  color: $text-color-7 !important;
+  font-size: 13px;
+  margin-top: 2px;
+}
+
+.drah-voter-header {
+  font-family: Gilroy-Thin;
+  margin-top: 5px !important;
+}
+
+.title {
+  font-family: var(--font-gilroy-bold);
+}
+
+.h-1 {
+  opacity: 0.1 !important;
+}
+
+.content-card {
+  padding: 0 !important;
+}
+
+.startItinerary {
+  position: relative;
+  top: -4px;
+}

package/src/lib/itinerary-app/shared/cutom-card/cutom-card.component.spec.ts

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