tickera-angular-components 0.0.1-dev.157 → 0.0.1-dev.159
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8695,6 +8695,32 @@ class PerformanceTicketMapComponent {
|
|
|
8695
8695
|
isLoggedIn = true;
|
|
8696
8696
|
stageComponent;
|
|
8697
8697
|
tooltipData = signal(null, ...(ngDevMode ? [{ debugName: "tooltipData" }] : []));
|
|
8698
|
+
renderData = computed(() => {
|
|
8699
|
+
const selected = this.selectionService.selectedTickets();
|
|
8700
|
+
const selByElem = new Map();
|
|
8701
|
+
for (const ticket of selected) {
|
|
8702
|
+
if (ticket.seat_numeration == null)
|
|
8703
|
+
continue;
|
|
8704
|
+
let set = selByElem.get(ticket.room_map_element_id);
|
|
8705
|
+
if (!set) {
|
|
8706
|
+
set = new Set();
|
|
8707
|
+
selByElem.set(ticket.room_map_element_id, set);
|
|
8708
|
+
}
|
|
8709
|
+
set.add(ticket.seat_numeration);
|
|
8710
|
+
}
|
|
8711
|
+
return this.bookingDataService.renderData().map((el) => {
|
|
8712
|
+
const isSeatLike = el.type === RoomMapElementType.SEAT_BLOCK || el.type === RoomMapElementType.TABLE;
|
|
8713
|
+
return isSeatLike
|
|
8714
|
+
? {
|
|
8715
|
+
...el,
|
|
8716
|
+
shapeConfig: {
|
|
8717
|
+
...el.shapeConfig,
|
|
8718
|
+
selectedNumerations: selByElem.get(el.elementId) ?? new Set(),
|
|
8719
|
+
},
|
|
8720
|
+
}
|
|
8721
|
+
: el;
|
|
8722
|
+
});
|
|
8723
|
+
}, ...(ngDevMode ? [{ debugName: "renderData" }] : []));
|
|
8698
8724
|
stageReady = signal(false, ...(ngDevMode ? [{ debugName: "stageReady" }] : []));
|
|
8699
8725
|
autoFitDone = false;
|
|
8700
8726
|
resizeObserver;
|
|
@@ -8712,37 +8738,6 @@ class PerformanceTicketMapComponent {
|
|
|
8712
8738
|
this.zoomService.fitToContainer();
|
|
8713
8739
|
}
|
|
8714
8740
|
});
|
|
8715
|
-
effect(() => {
|
|
8716
|
-
const selectedTickets = this.selectionService.selectedTickets();
|
|
8717
|
-
const renderData = this.bookingDataService.renderData();
|
|
8718
|
-
const stage = this.stageComponent?.getStage();
|
|
8719
|
-
if (!stage)
|
|
8720
|
-
return;
|
|
8721
|
-
const selByElem = new Map();
|
|
8722
|
-
for (const ticket of selectedTickets) {
|
|
8723
|
-
if (ticket.seat_numeration == null)
|
|
8724
|
-
continue;
|
|
8725
|
-
let set = selByElem.get(ticket.room_map_element_id);
|
|
8726
|
-
if (!set) {
|
|
8727
|
-
set = new Set();
|
|
8728
|
-
selByElem.set(ticket.room_map_element_id, set);
|
|
8729
|
-
}
|
|
8730
|
-
set.add(ticket.seat_numeration);
|
|
8731
|
-
}
|
|
8732
|
-
let needsRedraw = false;
|
|
8733
|
-
for (const el of renderData) {
|
|
8734
|
-
if (el.type === RoomMapElementType.SEAT_BLOCK || el.type === RoomMapElementType.TABLE) {
|
|
8735
|
-
const shape = stage.findOne('.' + el.elementId);
|
|
8736
|
-
if (shape) {
|
|
8737
|
-
shape.setAttr('selectedNumerations', selByElem.get(el.elementId) ?? new Set());
|
|
8738
|
-
needsRedraw = true;
|
|
8739
|
-
}
|
|
8740
|
-
}
|
|
8741
|
-
}
|
|
8742
|
-
if (needsRedraw) {
|
|
8743
|
-
stage.find('Shape').forEach((s) => s.getLayer()?.batchDraw());
|
|
8744
|
-
}
|
|
8745
|
-
});
|
|
8746
8741
|
}
|
|
8747
8742
|
get isBrowser() {
|
|
8748
8743
|
return isPlatformBrowser(this.platformId);
|
|
@@ -8890,11 +8885,11 @@ class PerformanceTicketMapComponent {
|
|
|
8890
8885
|
return floor;
|
|
8891
8886
|
}
|
|
8892
8887
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceTicketMapComponent, deps: [{ token: PLATFORM_ID }, { token: PerformanceBookingDataService }, { token: FeedbackModalService }, { token: TicketSelectionService }, { token: TicketMapZoomService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8893
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PerformanceTicketMapComponent, isStandalone: true, selector: "performance-ticket-map", inputs: { readOnly: "readOnly", needsLogin: "needsLogin", isLoggedIn: "isLoggedIn" }, outputs: { selectionChange: "selectionChange", needsLoginError: "needsLoginError" }, viewQueries: [{ propertyName: "stageComponent", first: true, predicate: StageComponent, descendants: true }], ngImport: i0, template: "<div class=\"ticket-map-canvas-container\">\n @if (isBrowser) {\n <ko-stage\n [config]=\"bookingDataService.stageConfig()\"\n (click)=\"handleStageClick($event)\"\n (mousemove)=\"handleStageMouseMove($event)\"\n (mouseleave)=\"handleStageMouseLeave()\"\n (wheel)=\"handleWheel($event)\"\n >\n <ko-layer>\n @for (element of
|
|
8888
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PerformanceTicketMapComponent, isStandalone: true, selector: "performance-ticket-map", inputs: { readOnly: "readOnly", needsLogin: "needsLogin", isLoggedIn: "isLoggedIn" }, outputs: { selectionChange: "selectionChange", needsLoginError: "needsLoginError" }, viewQueries: [{ propertyName: "stageComponent", first: true, predicate: StageComponent, descendants: true }], ngImport: i0, template: "<div class=\"ticket-map-canvas-container\">\n @if (isBrowser) {\n <ko-stage\n [config]=\"bookingDataService.stageConfig()\"\n (click)=\"handleStageClick($event)\"\n (mousemove)=\"handleStageMouseMove($event)\"\n (mouseleave)=\"handleStageMouseLeave()\"\n (wheel)=\"handleWheel($event)\"\n >\n <ko-layer>\n @for (element of renderData(); track trackByElementId($index, element)) {\n <ko-shape [config]=\"element.shapeConfig\" />\n }\n </ko-layer>\n </ko-stage>\n\n @if (tooltipData(); as tooltip) {\n <div class=\"ticket-tooltip\" [style.left.px]=\"tooltip.x\" [style.top.px]=\"tooltip.y\">\n <div class=\"tooltip-header\">{{ tooltip.elementName }}</div>\n @if (tooltip.seatLabel) {\n <div class=\"tooltip-row\">\n <span class=\"tooltip-label\">Asiento:</span>\n <span class=\"tooltip-value\">{{ tooltip.seatLabel }}</span>\n </div>\n }\n <div class=\"tooltip-row\">\n <span class=\"tooltip-label\">Precio:</span>\n <span class=\"tooltip-value\">${{ tooltip.price | number: '1.0-0' }}</span>\n </div>\n <div class=\"tooltip-row\">\n <span class=\"tooltip-label\">Estado:</span>\n <span class=\"tooltip-status\">\n <span class=\"status-dot\" [style.background]=\"tooltip.statusColor\"></span>\n {{ tooltip.statusLabel }}\n </span>\n </div>\n @if (tooltip.isSelected) {\n <div class=\"tooltip-selected-badge\">Seleccionado</div>\n }\n </div>\n }\n }\n</div>\n", styles: [".ticket-map-canvas-container{min-height:500px;overflow:hidden;position:relative;touch-action:pan-x pan-y;width:100%}.ticket-tooltip{position:absolute;z-index:100;background:#1f2937;color:#f9fafb;border-radius:8px;padding:10px 14px;font-size:12px;line-height:1.5;pointer-events:none;min-width:160px;box-shadow:0 4px 12px #00000040}.tooltip-header{font-weight:600;font-size:13px;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid #374151}.tooltip-row{display:flex;justify-content:space-between;gap:12px}.tooltip-label{color:#9ca3af}.tooltip-value{color:#f9fafb;font-weight:500}.tooltip-status{display:flex;align-items:center;gap:6px;color:#f9fafb;font-weight:500}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%}.tooltip-selected-badge{margin-top:6px;padding-top:6px;border-top:1px solid #374151;color:#34d399;font-weight:500;font-size:11px}.zoom-controls{position:absolute;bottom:16px;right:16px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px 8px;box-shadow:0 1px 3px #0000001a}.zoom-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #d1d5db;background:#f9fafb;border-radius:6px;cursor:pointer;font-size:16px;font-weight:600;color:#374151;line-height:1}.zoom-btn:hover{background:#e5e7eb}.zoom-level{font-size:12px;color:#6b7280;min-width:40px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StageComponent, selector: "ko-stage", inputs: ["config"], outputs: ["mouseover", "mousemove", "mouseout", "mouseenter", "mouseleave", "mousedown", "mouseup", "wheel", "contextmenu", "click", "dblclick", "touchstart", "touchmove", "touchend", "tap", "dbltap", "dragstart", "dragmove", "dragend", "transformstart", "transform", "transformend"] }, { kind: "component", type: CoreShapeComponent, selector: "ko-shape, ko-layer, ko-circle, ko-fastlayer, ko-group, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["configChange", "mouseover", "mousemove", "mouseout", "mouseenter", "mouseleave", "mousedown", "mouseup", "wheel", "contextmenu", "click", "dblclick", "touchstart", "touchmove", "touchend", "tap", "dbltap", "dragstart", "dragmove", "dragend", "transformstart", "transform", "transformend"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
|
|
8894
8889
|
}
|
|
8895
8890
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PerformanceTicketMapComponent, decorators: [{
|
|
8896
8891
|
type: Component,
|
|
8897
|
-
args: [{ selector: 'performance-ticket-map', standalone: true, imports: [CommonModule, StageComponent, CoreShapeComponent], template: "<div class=\"ticket-map-canvas-container\">\n @if (isBrowser) {\n <ko-stage\n [config]=\"bookingDataService.stageConfig()\"\n (click)=\"handleStageClick($event)\"\n (mousemove)=\"handleStageMouseMove($event)\"\n (mouseleave)=\"handleStageMouseLeave()\"\n (wheel)=\"handleWheel($event)\"\n >\n <ko-layer>\n @for (element of
|
|
8892
|
+
args: [{ selector: 'performance-ticket-map', standalone: true, imports: [CommonModule, StageComponent, CoreShapeComponent], template: "<div class=\"ticket-map-canvas-container\">\n @if (isBrowser) {\n <ko-stage\n [config]=\"bookingDataService.stageConfig()\"\n (click)=\"handleStageClick($event)\"\n (mousemove)=\"handleStageMouseMove($event)\"\n (mouseleave)=\"handleStageMouseLeave()\"\n (wheel)=\"handleWheel($event)\"\n >\n <ko-layer>\n @for (element of renderData(); track trackByElementId($index, element)) {\n <ko-shape [config]=\"element.shapeConfig\" />\n }\n </ko-layer>\n </ko-stage>\n\n @if (tooltipData(); as tooltip) {\n <div class=\"ticket-tooltip\" [style.left.px]=\"tooltip.x\" [style.top.px]=\"tooltip.y\">\n <div class=\"tooltip-header\">{{ tooltip.elementName }}</div>\n @if (tooltip.seatLabel) {\n <div class=\"tooltip-row\">\n <span class=\"tooltip-label\">Asiento:</span>\n <span class=\"tooltip-value\">{{ tooltip.seatLabel }}</span>\n </div>\n }\n <div class=\"tooltip-row\">\n <span class=\"tooltip-label\">Precio:</span>\n <span class=\"tooltip-value\">${{ tooltip.price | number: '1.0-0' }}</span>\n </div>\n <div class=\"tooltip-row\">\n <span class=\"tooltip-label\">Estado:</span>\n <span class=\"tooltip-status\">\n <span class=\"status-dot\" [style.background]=\"tooltip.statusColor\"></span>\n {{ tooltip.statusLabel }}\n </span>\n </div>\n @if (tooltip.isSelected) {\n <div class=\"tooltip-selected-badge\">Seleccionado</div>\n }\n </div>\n }\n }\n</div>\n", styles: [".ticket-map-canvas-container{min-height:500px;overflow:hidden;position:relative;touch-action:pan-x pan-y;width:100%}.ticket-tooltip{position:absolute;z-index:100;background:#1f2937;color:#f9fafb;border-radius:8px;padding:10px 14px;font-size:12px;line-height:1.5;pointer-events:none;min-width:160px;box-shadow:0 4px 12px #00000040}.tooltip-header{font-weight:600;font-size:13px;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid #374151}.tooltip-row{display:flex;justify-content:space-between;gap:12px}.tooltip-label{color:#9ca3af}.tooltip-value{color:#f9fafb;font-weight:500}.tooltip-status{display:flex;align-items:center;gap:6px;color:#f9fafb;font-weight:500}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%}.tooltip-selected-badge{margin-top:6px;padding-top:6px;border-top:1px solid #374151;color:#34d399;font-weight:500;font-size:11px}.zoom-controls{position:absolute;bottom:16px;right:16px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px 8px;box-shadow:0 1px 3px #0000001a}.zoom-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #d1d5db;background:#f9fafb;border-radius:6px;cursor:pointer;font-size:16px;font-weight:600;color:#374151;line-height:1}.zoom-btn:hover{background:#e5e7eb}.zoom-level{font-size:12px;color:#6b7280;min-width:40px;text-align:center}\n"] }]
|
|
8898
8893
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
8899
8894
|
type: Inject,
|
|
8900
8895
|
args: [PLATFORM_ID]
|