@3ddv/software-division-components 1.4.1 → 1.4.3

package/src/dvm/popover/popover.component.html

@@ -0,0 +1,27 @@
+<!-- SECTION POPOVER -->
+@if (sectionData) {
+  <sdc-section-popover
+    [data]="sectionData"
+    id="pano-view"
+    [popoverId]="'popover-' + node.id"
+    [showBestAvailable]="true"
+    [showOpenSeatMap]="true"
+    [excludeSeatMapSections]="['S_BLCHADA', 'S_Bleacher']"
+    (mouseEnter)="onEnter($event)"
+    (mouseLeave)="onLeave($event)"
+    (load3dView)="onLoad3dView()"
+    (selectForBA)="onSelectSectionForBA($event)"
+    (openSeatMap)="onOpenSeatMap()">
+  </sdc-section-popover>
+}
+
+<!-- SEAT POPOVER -->
+@if (seatData) {
+  <sdc-seat-popover
+    id="pano-view"
+    [data]="seatData"
+    [popoverId]="'popover-' + node.id"
+    (mouseEnter)="onEnter($event)"
+    (mouseLeave)="onLeave($event)">
+  </sdc-seat-popover>
+}

package/src/dvm/popover/popover.component.ts

@@ -0,0 +1,236 @@
+import type { MapViewerNode, Viewer3dLoadView3dOptions } from '@3ddv/dvm-internal';
+import type { Viewer3dService } from '@3ddv/ngx-dvm-internal';
+import { CommonModule, CurrencyPipe } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  input,
+  output,
+  OnInit,
+  Input,
+} from '@angular/core';
+import { ThemeClass } from '@shared/types';
+import {
+  CONFIGURATION_SERVICE,
+  DVM_FORMATTER,
+  DVM_SERVICE,
+  IConfigurationService,
+  IDvmFormatter,
+  IDvmService,
+} from './popover.config';
+import { PopoverService } from './popover.service';
+import { AppNodes, SeatPopoverData, SectionPopoverData } from './types';
+import { SeatPopoverComponent } from './seat-popover/seat-popover.component';
+import { SectionPopoverComponent } from './section-popover/section-popover.component';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'sdc-map-popover',
+  standalone: true,
+  imports: [CommonModule, SeatPopoverComponent, SectionPopoverComponent],
+  templateUrl: './popover.component.html',
+  styleUrl: './popover.component.css',
+})
+export class PopoverComponent implements OnInit {
+  // INPUTS
+  /**
+   * The node to attach the popover to.
+   */
+  @Input()
+  public readonly node!: MapViewerNode;
+
+  /**
+   * The current theme applied to the component.
+   */
+  public readonly theme = input<ThemeClass>('theme-sdc');
+
+  // OUTPUTS
+  /**
+   * Emitted when the 3D view should be loaded.
+   */
+  public readonly load3dView = output<{ node: MapViewerNode; section: string | undefined }>();
+
+  /**
+   * Emitted when a section should be selected/deselected for best available.
+   */
+  public readonly selectSectionForBA = output<{
+    node: MapViewerNode;
+    section: string | undefined;
+    selected: boolean;
+  }>();
+
+  /**
+   * Emitted when the seat map should be opened.
+   */
+  public readonly openSeatMap = output<{ node: MapViewerNode; section: string | undefined }>();
+
+  // SERVICES
+  private readonly dvm: IDvmService = inject(DVM_SERVICE);
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly format: IDvmFormatter = inject(DVM_FORMATTER);
+  private readonly configurationService: IConfigurationService = inject(CONFIGURATION_SERVICE);
+  protected readonly popoverService = inject(PopoverService);
+
+  // COMPONENT STATE
+  protected readonly Nodes: typeof AppNodes = AppNodes;
+  protected thumbnail!: string | undefined;
+  protected section!: string | undefined;
+  protected row!: string | undefined;
+  protected seat!: string | undefined;
+  protected prices!: string[] | undefined;
+
+  // Section popover specific properties
+  protected availableQuantity: number = 0;
+  protected adaQuantity: number = 0;
+  protected includedSectionForBA: boolean = false;
+
+  // Transformed data for new components
+  protected get seatData(): SeatPopoverData | null {
+    if (this.node?.type === AppNodes.Seat) {
+      return this.transformToSeatData();
+    }
+    return null;
+  }
+
+  protected get sectionData(): SectionPopoverData | null {
+    if (this.node?.type === AppNodes.Section || this.node?.type === AppNodes.Ga) {
+      return this.transformToSectionData();
+    }
+    return null;
+  }
+
+  // LC METHODS
+  public ngOnInit(): void {
+    this.initComponent();
+  }
+
+  protected onEnter(_: MouseEvent): void {
+    this.popoverService.clearTimer();
+  }
+
+  protected onLeave(_: MouseEvent): void {
+    this.popoverService.setTimer();
+  }
+
+  // GETTERS
+  protected get price(): string | undefined {
+    return this.prices // Existen precios?
+      ? this.prices.length > 1 // Existen precios, pero más de uno?
+        ? Math.min(...this.prices.map(price => Number.parseInt(price))).toString()
+        : this.prices[0] // Si lo hay, sacamos el minimo, si no seteamos el primero ( y unico xd )
+      : undefined; // No existen precios
+  }
+
+  protected get priceRange(): string {
+    if (!this.prices || this.prices.length === 0) {
+      return '';
+    }
+
+    let priceRange = this.prices[0];
+    if (this.prices.length > 1 && this.prices[0] !== this.prices[1]) {
+      priceRange = `${this.prices[0]} - ${this.prices[1]}`;
+    }
+    return priceRange;
+  }
+
+  // METHODS
+  private initComponent(): void {
+    this.setTexts();
+    this.getThumbnail();
+    // this.getPrice();
+  }
+
+  private setTexts(): void {
+    const nodeId: string[] = this.format.transform(this.node?.id).split(' ');
+    // const translated = this.translationData()[this.node().id.split('-')[0]];
+    this.section = nodeId[0];
+    this.row = nodeId[1] ?? null;
+    this.seat = nodeId[2] ?? null;
+  }
+
+  private getThumbnail(): void {
+    const viewer3dService: Viewer3dService = this.dvm.viewer3dService;
+    const options: Viewer3dLoadView3dOptions = {
+      // eslint-disable-next-line camelcase
+      venue_id: this.configurationService.configuration.dvmData.venueId,
+      // eslint-disable-next-line camelcase
+      view_id: this.node?.id,
+    };
+
+    if (!viewer3dService?.isInitialized()) {
+      return;
+    }
+
+    viewer3dService.getThumbnail(options, true).subscribe((thumbnailUrl: string): void => {
+      this.thumbnail = thumbnailUrl;
+      this.cdr.markForCheck();
+    });
+  }
+
+  // Section popover methods
+  protected onLoad3dView(): void {
+    this.load3dView.emit({
+      node: this.node,
+      section: this.section,
+    });
+  }
+
+  protected onSelectSectionForBA(selected: boolean): void {
+    this.includedSectionForBA = selected;
+    this.selectSectionForBA.emit({
+      node: this.node,
+      section: this.section,
+      selected: this.includedSectionForBA,
+    });
+  }
+
+  protected onOpenSeatMap(): void {
+    this.openSeatMap.emit({
+      node: this.node,
+      section: this.section,
+    });
+  }
+
+  // Data transformation methods
+  private transformToSeatData(): SeatPopoverData {
+    const nodeId: string[] = this.format.transform(this.node?.id).split(' ');
+    const section = nodeId[0];
+    const row = nodeId[1] ?? '';
+    const seat = nodeId[2] ?? '';
+
+    return {
+      id: this.node.id,
+      section: section,
+      row: row,
+      seat: seat,
+      price: this.price ? Number.parseFloat(this.price) : 0,
+      thumbnail: this.thumbnail
+    };
+  }
+
+  private transformToSectionData(): SectionPopoverData {
+    const nodeId: string[] = this.format.transform(this.node?.id).split(' ');
+    const section = nodeId[0];
+
+    // Parse price range from existing prices array
+    let priceRange = { min: 0, max: 0 };
+    if (this.prices && this.prices.length > 0) {
+      const minPrice = Number.parseFloat(this.prices[0]);
+      const maxPrice = this.prices.length > 1 ? Number.parseFloat(this.prices[1]) : minPrice;
+      priceRange = { min: minPrice, max: maxPrice };
+    }
+
+    return {
+      id: this.node.id,
+      section: section,
+      priceRange: priceRange,
+      availableQuantity: this.availableQuantity,
+      adaQuantity: this.adaQuantity,
+      thumbnail: this.thumbnail,
+      type: this.node.type === AppNodes.Ga ? 'general_admission' : 'section',
+      isSelectedForBA: this.includedSectionForBA
+    };
+  }
+}

package/src/dvm/popover/popover.config.ts

@@ -0,0 +1,30 @@
+import type { MapViewerService, Viewer3dService } from '@3ddv/ngx-dvm-internal';
+import { InjectionToken } from '@angular/core';
+import type { IThumbnailProvider, IPopoverPositioner, IPopoverManager } from './types';
+
+// This is a placeholder based on usage in popover.component.ts
+export type Configuration = {
+  dvmData: {
+    venueId: string;
+  };
+};
+
+export type IDvmFormatter = {
+  transform(value: string, ...args: unknown[]): string;
+};
+
+export type IConfigurationService = {
+  configuration: Configuration;
+};
+
+export type IDvmService = {
+  readonly viewer3dService: Viewer3dService;
+  readonly viewerService: MapViewerService
+};
+
+export const DVM_FORMATTER = new InjectionToken<IDvmFormatter>('DvmFormatter');
+export const CONFIGURATION_SERVICE = new InjectionToken<IConfigurationService>('ConfigurationService');
+export const DVM_SERVICE = new InjectionToken<IDvmService>('DvmService');
+export const THUMBNAIL_PROVIDER = new InjectionToken<IThumbnailProvider>('ThumbnailProvider');
+export const POPOVER_POSITIONER = new InjectionToken<IPopoverPositioner>('PopoverPositioner');
+export const POPOVER_MANAGER = new InjectionToken<IPopoverManager>('PopoverManager');