@necrolab/dashboard 0.5.22 → 0.5.24

package/src/libs/Filter.js

@@ -10,7 +10,48 @@ const colors = {
     UNSELECTABLE: "#311432"
 };
 
-const BASE_CSS = `.svg-wrapper path[generaladmission]:hover {fill: ${colors.HIGHLIGHT};pointer-events:all;cursor:pointer;}`;
+// Color palette for unique filter colors - distinct but professional
+const filterColorPalette = [
+    "#7bc999", // Mint green
+    "#6ba8d6", // Steel blue
+    "#d4a876", // Tan/gold
+    "#a88bc9", // Soft purple
+    "#e89ba3", // Coral pink
+    "#7dc9c9", // Turquoise
+    "#c9a87b", // Warm tan
+    "#8bc99a", // Light green
+    "#9ba8c9", // Periwinkle
+    "#c9b88b"  // Khaki
+];
+
+const getFilterColor = (filterIndex, isExpanded, isExcluded) => {
+    if (isExcluded) {
+        return isExpanded ? colors.EXCLUDED_EXPANDED : colors.EXCLUDED;
+    }
+
+    // Use palette colors for normal filters
+    const baseColor = filterColorPalette[filterIndex % filterColorPalette.length];
+
+    if (!isExpanded) {
+        return baseColor;
+    }
+
+    // Make expanded filters brighter
+    const hex = baseColor.replace('#', '');
+    const r = parseInt(hex.substr(0, 2), 16);
+    const g = parseInt(hex.substr(2, 2), 16);
+    const b = parseInt(hex.substr(4, 2), 16);
+
+    // Lighten by 20%
+    const lighter = (c) => Math.min(255, Math.floor(c + (255 - c) * 0.3));
+    return `#${lighter(r).toString(16).padStart(2, '0')}${lighter(g).toString(16).padStart(2, '0')}${lighter(b).toString(16).padStart(2, '0')}`;
+};
+
+const BASE_CSS = `
+.svg-wrapper path[generaladmission]:hover {fill: ${colors.HIGHLIGHT};pointer-events:all;cursor:pointer;}
+.svg-wrapper path {pointer-events: all; cursor: pointer; touch-action: manipulation;}
+.svg-wrapper {touch-action: manipulation; -webkit-user-select: none; user-select: none;}
+`;
 
 const getAttributeValue = (element, attributeName) => {
     try {
@@ -158,6 +199,8 @@ export default class FilterBuilder {
         };
         this.cssClasses = "";
         this.temporaryCSS = "";
+        this._highlightedElements = null;
+        this._currentlyHighlightedSection = null;
 
         this.filterTypes = {
             INVALID: -1,
@@ -211,9 +254,16 @@ export default class FilterBuilder {
     }
 
     addRowHandlers() {
+        // Track the currently highlighted section across all handlers
+        // This prevents flicker when moving mouse between rows
+        if (!this.lastHighlightedSection) {
+            this.lastHighlightedSection = null;
+        }
+
         for (let i = 0; i < this.rows.length; i++) {
             const row = this.rows[i];
-            row.onclick = () => {
+
+            const clickHandler = () => {
                 const parsed = {
                     section: getAttributeValue(row, "section"),
                     row: getAttributeValue(row, "row"),
@@ -245,6 +295,13 @@ export default class FilterBuilder {
                 });
             };
 
+            // Support both click and touch events
+            row.onclick = clickHandler;
+            row.ontouchend = (e) => {
+                e.preventDefault();
+                clickHandler();
+            };
+
             row.onmouseover = () => {
                 const parsed = {
                     section: getAttributeValue(row, "section"),
@@ -252,6 +309,18 @@ export default class FilterBuilder {
                     id: getAttributeValue(row, "id")
                 };
 
+                const sectionKey = `${parsed.section}`;
+
+                // Skip if already highlighting this section - prevents flickering
+                if (this.lastHighlightedSection === sectionKey) return;
+
+                // Only clear if switching sections
+                if (this.lastHighlightedSection && this.lastHighlightedSection !== sectionKey) {
+                    this.clearHighlight();
+                }
+
+                this.lastHighlightedSection = sectionKey;
+
                 const matchingFilter = this.filters.find(
                     (f) =>
                         this.isForCurrentEvent(f) &&
@@ -265,21 +334,101 @@ export default class FilterBuilder {
                 else this.highlight({ section: matchingFilter.section });
             };
 
-            row.onmouseout = () => {
-                if (!this.isDragging) this.clearHighlight();
-            };
+            // Don't use onmouseout - it causes flicker when moving between rows in the same section
+            // clearHighlight is already handled when switching to a different section (line 312-314)
         }
     }
 
     reload(eventId) {
         const paths = document.querySelectorAll("path");
-        this.rows = [...paths].filter((r) => r.id.startsWith("s_"));
+        // Include ALL paths that have a section attribute, not just rows
+        // This includes section containers, backgrounds, and any other paths
+        this.rows = [...paths].filter((r) => {
+            const hasSection = r.attributes['section'];
+            const isNotGA = !r.attributes['generaladmission'];
+            return hasSection && isNotGA;
+        });
 
         this.addLabelHandlers();
         this.addGAHandlers();
         this.addRowHandlers();
         this.currentEventId = eventId;
 
+        // Handle mouse events on the SVG wrapper
+        const svgWrapper = document.querySelector('.svg-wrapper');
+        if (svgWrapper) {
+            // Clear highlight when mouse leaves the entire SVG area
+            svgWrapper.onmouseleave = () => {
+                this.lastHighlightedSection = null;
+                if (!this.isDragging) this.clearHighlight();
+            };
+
+            // When hovering on SVG background (between rows), maintain current highlight
+            svgWrapper.onmouseover = (e) => {
+                const target = e.target;
+                if (target === svgWrapper || (target.tagName && target.tagName.toLowerCase() === 'svg')) {
+                    e.stopPropagation();
+                    return;
+                }
+            };
+
+            // CRITICAL: Handle clicks on SVG background (empty space)
+            // When user clicks empty space, create filter for currently highlighted section
+            svgWrapper.onclick = (e) => {
+                const target = e.target;
+                // Only handle clicks on background (not on path elements)
+                if (target === svgWrapper || (target.tagName && target.tagName.toLowerCase() === 'svg')) {
+                    // If we have a highlighted section, create filter for it
+                    if (this._currentlyHighlightedSection) {
+                        const matchingFilter = this.filters.find(
+                            (f) => this.isForCurrentEvent(f) && f.section === this._currentlyHighlightedSection
+                        );
+
+                        if (matchingFilter) {
+                            // Toggle expanded state
+                            if (this.expandedFilter === matchingFilter.id) {
+                                this.setExpandedFilter(null);
+                            } else {
+                                this.setExpandedFilter(matchingFilter.id);
+                            }
+                        } else {
+                            // Create new filter
+                            this.addFilter({
+                                section: this._currentlyHighlightedSection,
+                                event: this.currentEventId
+                            });
+                        }
+                    }
+                }
+            };
+
+            // Support touch events on background too
+            svgWrapper.ontouchend = (e) => {
+                const target = e.target;
+                if (target === svgWrapper || (target.tagName && target.tagName.toLowerCase() === 'svg')) {
+                    e.preventDefault();
+                    if (this._currentlyHighlightedSection) {
+                        const matchingFilter = this.filters.find(
+                            (f) => this.isForCurrentEvent(f) && f.section === this._currentlyHighlightedSection
+                        );
+
+                        if (matchingFilter) {
+                            if (this.expandedFilter === matchingFilter.id) {
+                                this.setExpandedFilter(null);
+                            } else {
+                                this.setExpandedFilter(matchingFilter.id);
+                            }
+                        } else {
+                            this.addFilter({
+                                section: this._currentlyHighlightedSection,
+                                event: this.currentEventId
+                            });
+                        }
+                    }
+                }
+            };
+        }
+
         this.updateCss();
     }
 
@@ -360,7 +509,7 @@ export default class FilterBuilder {
         this.cssClasses = BASE_CSS;
         const gaSectionNameMapping = this.getSectionNameMapping();
 
-        this.filters.forEach((filter) => {
+        this.filters.forEach((filter, filterIndex) => {
             if (!this.isForCurrentEvent(filter)) return;
 
             // Try to find the short name (attribute name) from the real name (stored in filter)
@@ -377,12 +526,12 @@ export default class FilterBuilder {
 
             const type = this.getFilterType(filter);
 
-            let color;
-            if (filter.exclude) {
-                color = this.expandedFilter === filter.id ? colors.EXCLUDED_EXPANDED : colors.EXCLUDED;
-            } else {
-                color = this.expandedFilter === filter.id ? colors.SELECTED_EXPANDED : colors.SELECTED;
-            }
+            // Use unique color for each filter
+            const color = getFilterColor(
+                filterIndex,
+                this.expandedFilter === filter.id,
+                filter.exclude
+            );
 
             switch (type) {
                 case this.filterTypes.NORMAL:
@@ -430,6 +579,11 @@ export default class FilterBuilder {
             this.cssClasses += `.svg-wrapper path[section="${section}"][row="${row}"] {stroke: ${color} !important;}\n`;
         });
 
+        // CRITICAL: Add hover styles AFTER filter styles so they win specificity battle
+        // Use BOTH stroke and fill to cover entire section area, not just row lines
+        this.cssClasses += `.svg-wrapper path.hover-highlight-stroke {stroke: ${colors.HIGHLIGHT} !important; fill: ${colors.HIGHLIGHT} !important; fill-opacity: 0.3 !important;}\n`;
+        this.cssClasses += `.svg-wrapper path.hover-highlight-fill {fill: ${colors.HIGHLIGHT} !important;}\n`;
+
         log("Generated CSS:", this.cssClasses);
     }
 
@@ -442,7 +596,7 @@ export default class FilterBuilder {
             const label = labels[i];
             const section = getAttributeValue(label, "section");
 
-            label.onclick = () => {
+            const labelClickHandler = () => {
                 // filter exists already for section - return
                 const matchingFilter = this.filters.find((f) => {
                     if (!this.isForCurrentEvent(f)) return false;
@@ -490,6 +644,43 @@ export default class FilterBuilder {
                     log("Could not add labelHandler", section, e);
                 }
             };
+
+            // Support both click and touch
+            label.onclick = labelClickHandler;
+            label.ontouchend = (e) => {
+                e.preventDefault();
+                labelClickHandler();
+            };
+
+            // Add hover handler to highlight section when hovering over label
+            label.onmouseover = () => {
+                const matchingFilter = this.filters.find((f) => {
+                    if (!this.isForCurrentEvent(f)) return false;
+                    if (f.section !== section && f.section !== gaSectionNameMapping[section]) return false;
+                    return true;
+                });
+
+                if (!matchingFilter) return;
+
+                const sectionKey = matchingFilter.section;
+
+                // Skip if already highlighting this section
+                if (this.lastHighlightedSection === sectionKey) return;
+
+                // Clear if switching sections
+                if (this.lastHighlightedSection && this.lastHighlightedSection !== sectionKey) {
+                    this.clearHighlight();
+                }
+
+                this.lastHighlightedSection = sectionKey;
+
+                // Highlight the section
+                if (Array.isArray(matchingFilter.rows)) {
+                    matchingFilter.rows.forEach((row) => this.highlight({ section: matchingFilter.section, row: row }));
+                } else {
+                    this.highlight({ section: matchingFilter.section });
+                }
+            };
         }
     }
 
@@ -506,7 +697,7 @@ export default class FilterBuilder {
             const section = getAttributeValue(path, "name");
             const sectionName = gaSectionNameMapping[section];
 
-            path.onclick = () => {
+            const gaClickHandler = () => {
                 // filter exists already for section
                 const matchingFilter = this.filters.find((f) => f.section === sectionName && this.isForCurrentEvent(f));
                 if (matchingFilter) {
@@ -525,6 +716,13 @@ export default class FilterBuilder {
                     event: this.currentEventId
                 });
             };
+
+            // Support both click and touch
+            path.onclick = gaClickHandler;
+            path.ontouchend = (e) => {
+                e.preventDefault();
+                gaClickHandler();
+            };
         }
     }
 
@@ -566,21 +764,43 @@ export default class FilterBuilder {
     highlight(filter, isGA = false) {
         if (filter.row && this.isUnselectable(filter.sec, filter.row)) return;
 
-        let newCSS = "";
+        // Check if we're already highlighting this exact section
+        const sectionKey = filter.section || filter.name;
+        if (this._currentlyHighlightedSection === sectionKey) {
+            return; // Already highlighting this section
+        }
 
+        // Clear previous highlight first
+        this.clearHighlight();
+        this._currentlyHighlightedSection = sectionKey;
+
+        // Use direct DOM manipulation instead of CSS injection
+        // This is MUCH faster and prevents flicker
         if (isGA) {
             if (this.filters.find((f) => f.section === filter.name)) return;
-            newCSS += `.svg-wrapper path[name="${filter.section || filter.name}"] {fill: ${colors.HIGHLIGHT} !important}`;
+            const paths = document.querySelectorAll(`path[name="${filter.section || filter.name}"]`);
+            paths.forEach(p => p.classList.add('hover-highlight-fill'));
+            this._highlightedElements = Array.from(paths);
         } else if (filter.row) {
-            newCSS += `.svg-wrapper path[section="${filter.section}"][row="${filter.row}"] {stroke: ${colors.HIGHLIGHT} !important}`;
+            const paths = document.querySelectorAll(`path[section="${filter.section}"][row="${filter.row}"]`);
+            paths.forEach(p => p.classList.add('hover-highlight-stroke'));
+            this._highlightedElements = Array.from(paths);
         } else {
-            newCSS += `.svg-wrapper path[section="${filter.section}"] {stroke: ${colors.HIGHLIGHT} !important}`;
+            const paths = document.querySelectorAll(`path[section="${filter.section}"]`);
+            paths.forEach(p => p.classList.add('hover-highlight-stroke'));
+            this._highlightedElements = Array.from(paths);
         }
-        this.temporaryCSS += newCSS;
     }
 
     clearHighlight() {
-        this.temporaryCSS = "";
+        // Remove classes from previously highlighted elements
+        if (this._highlightedElements) {
+            this._highlightedElements.forEach(el => {
+                el.classList.remove('hover-highlight-stroke', 'hover-highlight-fill');
+            });
+            this._highlightedElements = null;
+        }
+        this._currentlyHighlightedSection = null;
     }
 
     isUnselectable(section, row) {

package/src/libs/tm-renderer/axs/renderer.js

@@ -0,0 +1,97 @@
+import BaseRenderer from "../base-renderer.js";
+import { getEventData, getEventDataUrl } from "./requests.js";
+
+class AXSRenderer extends BaseRenderer {
+    constructor(eventId, options = {}) {
+        super(eventId, options);
+        this.config = this.getDefaultConfig();
+    }
+
+    async render() {
+        if (!this.storage) {
+            this.logger.Error("Cannot render without storage");
+            return false;
+        }
+
+        try {
+            const data = await this.getEventData();
+            this.logger.Debug("Event data loaded");
+
+            if (this.fs) {
+                this.fs.writeFileSync("out.json", JSON.stringify(data));
+            }
+
+            let svgBody = "";
+
+            data.n.forEach((subsection) => {
+                let sectionData = "";
+                switch (subsection.h.t) {
+                    case "seat":
+                        subsection.n.forEach((seat) => {
+                            sectionData += this.createElement("circle", {
+                                cx: seat.c[0],
+                                cy: seat.c[1],
+                                id: seat.i,
+                                r: "0.5",
+                                fill: "#fff",
+                            });
+                        });
+                        break;
+                    case "section":
+                        subsection.n.forEach((polygon) => {
+                            sectionData += this.createElement(
+                                "g",
+                                {
+                                    id: polygon.i,
+                                    transform: `translate(${polygon.c[0]} ${polygon.c[1]})`,
+                                },
+                                this.createElement("path", {
+                                    d: polygon.pt,
+                                    fill: "rgba(100,100,100,0.5)",
+                                }),
+                            );
+                        });
+                        break;
+                    default:
+                        break;
+                }
+                svgBody += this.createElement("g", {}, sectionData);
+            });
+
+            this.svg = this.createElement(
+                "svg",
+                {
+                    width: "1440",
+                    height: "816",
+                    viewBox: "0 0 1200 680",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    version: "1.1",
+                },
+                svgBody,
+            );
+
+            if (this.fs) {
+                this.fs.writeFileSync("test.svg", this.svg);
+            }
+
+            return true;
+        } catch (e) {
+            this.logger.Error(`Couldn't render ${this.eventId} ${e.message}`);
+            return false;
+        }
+    }
+
+    async getEventData() {
+        return await getEventData(this.eventId, this.logger);
+    }
+
+    async getEventDataUrl() {
+        return await getEventDataUrl(this.eventId, this.logger);
+    }
+
+    async fetchBackgroundImage() {
+        throw new Error("Background image fetching not implemented for AXS renderer");
+    }
+}
+
+export default AXSRenderer;

package/src/libs/tm-renderer/axs/requests.js

@@ -0,0 +1,37 @@
+import { getJsonDataWithHeaders } from "../request-utils.js";
+
+function buildAXSEventDataUrl(eventId, data) {
+    const base = data.url.replace("*", "");
+    const policy = data.keys["CloudFront-Policy"];
+    const sig = data.keys["CloudFront-Signature"];
+    const keypair = data.keys["CloudFront-Key-Pair-Id"];
+    const version = "2.6.16";
+    return `${base}maps/main/master_full.json?Policy=${policy}_&Signature=${sig}&Key-Pair-Id=${keypair}&v=${version}`;
+}
+
+async function getEventDataUrl(eventId, logger) {
+    const url = `https://contentdistribution.3ddvapis.com/api/v1/dvm/token/venue/${eventId}`;
+    const customHeaders = {
+        "referer": "https://tickets-de.axs.com/",
+        "user-agent":
+            "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36",
+    };
+
+    return await getJsonDataWithHeaders(url, customHeaders, 0, logger);
+}
+
+async function getEventData(eventId, logger) {
+    const urlData = await getEventDataUrl(eventId, logger);
+    if (!urlData) {
+        throw new Error("Failed to get event data URL");
+    }
+
+    const url = buildAXSEventDataUrl(eventId, urlData);
+    return await getJsonDataWithHeaders(url, {}, 0, logger);
+}
+
+export {
+    getEventData,
+    getEventDataUrl,
+    buildAXSEventDataUrl,
+};

package/src/libs/tm-renderer/base-renderer.js

@@ -0,0 +1,93 @@
+import { createLogger } from "./dependencies/logger.js";
+import * as utils from "./utils.js";
+
+class BaseRenderer {
+    constructor(eventId, options = {}) {
+        this.eventId = eventId;
+        this.options = {
+            proxy: null,
+            country: null,
+            ...options,
+        };
+
+        this.logger = createLogger([this.constructor.name, this.eventId]);
+        this.storage = null;
+        this.svg = null;
+    }
+
+    init(dependencies) {
+        this.storage = dependencies.storage;
+        return this;
+    }
+
+    setHighlightedSeats(placeIds, color = null) {
+        if (!this.highlighted) {
+            this.highlighted = [];
+        }
+
+        const seatsToAdd = (placeIds || []).map((id) => ({
+            id,
+            color: color || this.getDefaultConfig().highlightedSeatColor,
+        }));
+
+        this.highlighted.push(...seatsToAdd);
+        return this;
+    }
+
+    setCustomConfig(config) {
+        this.config = {
+            ...this.getDefaultConfig(),
+            ...config,
+        };
+        return this;
+    }
+
+    getDefaultConfig() {
+        return {
+            // Basic rendering options
+            outputWidth: 2048,
+            includeDetailedAttributes: false,
+            logFullError: true,
+
+            // Colors
+            seatColor: "#0557ae",
+            nonAvSeatColor: "#dadcde",
+            highlightedSeatColor: "#d0006f",
+            GAColor: "#61c6c2",
+            nonAvGAColor: "#b4babe",
+            grayedOutSection: "#a3a3a3",
+
+            // Text styling
+            labelColor: "#000",
+            labelColorOnGA: "#fff",
+            textOpacity: 0.8,
+            textOpacityOnGA: 1,
+            fontSize: "1em",
+            font: "sans-serif",
+            useBig: true,
+
+            // Rendering behavior
+            dontRenderUnusedSections: false,
+            dontRenderSeats: false,
+            seatsAsPins: false,
+            renderRowBlocks: false,
+            increaseHighlightedSeatSize: 6,
+        };
+    }
+
+    async render() {
+        throw new Error("render() method must be implemented by subclass");
+    }
+
+    async renderSeatmap(priceData) {
+        // Store price data for subclasses to use
+        this.priceData = priceData;
+        throw new Error("renderSeatmap() method must be implemented by subclass");
+    }
+
+    createElement(tag, attrs, body = "") {
+        return utils.createElement(tag, attrs, body);
+    }
+}
+
+export default BaseRenderer;