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

package/projects/software-division-components/src/dvm/popover/popover.component.css

@@ -0,0 +1,227 @@
+/* Loading spinner styles from external popover */
+.lds-dual-ring {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+}
+
+.lds-dual-ring:after {
+  content: ' ';
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 8px;
+  margin-top: 16px;
+  margin-left: 16px;
+  border-radius: 50%;
+  border: 3px solid #fff;
+  border-color: #fff transparent #fff transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Additional styles for better appearance */
+h5 {
+  margin: 0.25rem 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+/* Ensure proper spacing and layout */
+.w-80 {
+  width: 20rem;
+}
+
+.h-48 {
+  height: 12rem;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.text-white {
+  color: #ffffff;
+}
+
+.bg-black {
+  background-color: #000000;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.bg-center {
+  background-position: center;
+}
+
+.bg-cover {
+  background-size: cover;
+}
+
+.bg-no-repeat {
+  background-repeat: no-repeat;
+}
+
+.flex {
+  display: flex;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
+.min-w-max {
+  min-width: max-content;
+}
+
+.text-right {
+  text-align: right;
+}
+
+/* Section popover specific styles */
+.viewer3d-image {
+  cursor: pointer;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 8px;
+  font-size: 12px;
+}
+
+/* Button styles */
+.btn-main {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.btn-white {
+  background-color: white;
+  color: #007bff;
+  border: 1px solid #007bff;
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.btn-white:hover {
+  color: #0056b3;
+}
+
+/* Tooltip image styles for seat popover */
+.tooltip-img {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+/* Responsive utilities */
+.block {
+  display: block;
+}
+
+.md\\:hidden {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .md\\:hidden {
+    display: none;
+  }
+}
+
+/* Text color utilities */
+.text-main {
+  color: #007bff;
+}
+
+.text-main-accent {
+  color: #0056b3;
+}
+
+/* Spacing utilities */
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.h-9 {
+  height: 2.25rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.disabled\\:opacity-30:disabled {
+  opacity: 0.3;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.hover\\:scale-95:hover {
+  transform: scale(0.95);
+}
+
+.disabled\\:hover\\:transform-none:disabled:hover {
+  transform: none;
+}
+
+.hover\\:text-main-accent:hover {
+  color: #0056b3;
+}

package/projects/software-division-components/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/projects/software-division-components/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/projects/software-division-components/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');