@necrolab/dashboard 0.5.21 → 0.5.23

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.21",
+    "version": "0.5.23",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && vite build && npx workbox-cli generateSW workbox-config.cjs",
@@ -8,13 +8,11 @@
         "bot": "node dev-server.js",
         "expose": "node dev-server.js",
         "postinstall": "node postinstall.js",
-        "updaterenderer": "npm i @necrolab/tm-renderer@latest",
         "preview": "vite preview",
         "lint": "npx eslint src/ --fix"
     },
     "dependencies": {
         "@msgpack/msgpack": "^3.0.0-beta2",
-        "@necrolab/tm-renderer": "^0.1.12",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vueuse/core": "^11.3.0",
         "autoprefixer": "^10.4.21",

package/src/components/Filter/Filter.vue

@@ -10,6 +10,10 @@
         <div class="grid grid-cols-12 items-center py-3 px-2 sm:px-4 gap-2 sm:gap-3">
             <div class="col-span-9 sm:col-span-10">
                 <div class="flex-gap-2 items-center sm:gap-3 cursor-pointer flex-1" @click="handleFilterClick(filter.id)">
+                    <div
+                        class="filter-color-dot flex-shrink-0"
+                        :style="{ backgroundColor: color }">
+                    </div>
                     <div class="filter-type-badge flex-shrink-0">
                         <component :is="getFilterIcon()" class="w-3 h-3 sm:w-4 sm:h-4" />
                     </div>
@@ -169,6 +173,10 @@ const props = defineProps({
     filterBuilder: {
         type: Object,
         required: true
+    },
+    color: {
+        type: String,
+        default: "#7bc999"
     }
 });
 
@@ -292,15 +300,7 @@ props.filterBuilder.onUpdate(() => {
 
 <style scoped>
 .filter-card {
-    @apply bg-dark-500 border border-dark-625/30 relative mb-2 transition-all duration-200;
-}
-
-.filter-card:hover {
-    transform: scale(1.03);
-}
-
-.filter-card:active {
-    transform: scale(0.98);
+    @apply bg-dark-500 border border-dark-625/30 relative mb-2 transition-colors duration-200;
 }
 
 .filter-card:hover:not(.expanded-filter) {
@@ -315,6 +315,11 @@ props.filterBuilder.onUpdate(() => {
     @apply border-t border-t-dark-625/20;
 }
 
+.filter-color-dot {
+    @apply w-2.5 h-2.5 rounded-full flex-shrink-0;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
 .filter-type-badge {
     @apply w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-dark-400 flex items-center justify-center flex-shrink-0;
 }
@@ -353,17 +358,29 @@ props.filterBuilder.onUpdate(() => {
 
 .drag-btn {
     @apply text-light-500;
+    transition: all 0.2s ease;
 
     &:hover {
         @apply bg-dark-300 border-dark-550 text-yellow-400 shadow-md;
+        transform: scale(1.1);
+    }
+
+    &:active {
+        transform: scale(0.95);
     }
 }
 
 .delete-btn {
     @apply bg-error-500/30 border-error-400/50 text-error-300;
+    transition: all 0.2s ease;
 
     &:hover {
         @apply bg-error-400/80 border-error-500 text-white shadow-md;
+        transform: scale(1.1);
+    }
+
+    &:active {
+        transform: scale(0.95);
     }
 }
 

package/src/libs/Filter.js

@@ -3,14 +3,55 @@ const log = (...args) => DEBUG && console.log("[filter]", ...args);
 
 const colors = {
     HIGHLIGHT: "#d3f8e2",
-    SELECTED: "#a9def9",
-    SELECTED_EXPANDED: "#6bb6ff",
+    SELECTED: "#7bc999",
+    SELECTED_EXPANDED: "#a0ddb5",
     EXCLUDED: "#f694c1",
     EXCLUDED_EXPANDED: "#f472b6",
     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 {
@@ -211,9 +252,12 @@ export default class FilterBuilder {
     }
 
     addRowHandlers() {
+        let 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 +289,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 +303,18 @@ export default class FilterBuilder {
                     id: getAttributeValue(row, "id")
                 };
 
+                const sectionKey = `${parsed.section}`;
+
+                // Skip if already highlighting this section - prevents flickering
+                if (lastHighlightedSection === sectionKey) return;
+
+                // Only clear if switching sections
+                if (lastHighlightedSection && lastHighlightedSection !== sectionKey) {
+                    this.clearHighlight();
+                }
+
+                lastHighlightedSection = sectionKey;
+
                 const matchingFilter = this.filters.find(
                     (f) =>
                         this.isForCurrentEvent(f) &&
@@ -266,6 +329,7 @@ export default class FilterBuilder {
             };
 
             row.onmouseout = () => {
+                lastHighlightedSection = null;
                 if (!this.isDragging) this.clearHighlight();
             };
         }
@@ -360,37 +424,39 @@ 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;
 
-            const tryFindRealName = Object.entries(gaSectionNameMapping).find(
-                ([, v]) => v === filter.section && v.includes(" ")
+            // Try to find the short name (attribute name) from the real name (stored in filter)
+            const shortName = Object.entries(gaSectionNameMapping).find(
+                ([, v]) => v === filter.section
             )?.[0];
 
-            if (tryFindRealName) {
-                log(`Real name for ${filter.section}: ${tryFindRealName}`);
-            } else {
-                log(filter.section, "is already real name", gaSectionNameMapping);
+            // Check if this is a GA section by looking for paths with this name attribute
+            const isGA = shortName && document.querySelectorAll(`path[name="${shortName}"][generaladmission="true"]`)?.length > 0;
+
+            if (shortName && isGA) {
+                log(`GA section detected: ${filter.section} -> short name: ${shortName}`);
             }
 
             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:
                     // If it has no 'rows' property
                     if (!Array.isArray(filter.rows)) {
-                        const isGA = document.querySelectorAll(`path[section='${filter.section}']`)?.length === 0;
-
-                        if (isGA && tryFindRealName) {
-                            this.cssClasses += `.svg-wrapper path[name="${tryFindRealName}"] {fill: ${color} !important;}\n`;
+                        if (isGA && shortName) {
+                            // GA sections use 'name' attribute and 'fill' for styling
+                            this.cssClasses += `.svg-wrapper path[name="${shortName}"][generaladmission="true"] {fill: ${color} !important;}\n`;
                         } else {
+                            // Regular sections use 'section' attribute and 'stroke' for styling
                             this.cssClasses += `.svg-wrapper path[section="${filter.section}"] {stroke: ${color} !important;}\n`;
                         }
                     } else {
@@ -440,7 +506,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;
@@ -488,6 +554,13 @@ 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();
+            };
         }
     }
 
@@ -504,7 +577,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) {
@@ -523,6 +596,13 @@ export default class FilterBuilder {
                     event: this.currentEventId
                 });
             };
+
+            // Support both click and touch
+            path.onclick = gaClickHandler;
+            path.ontouchend = (e) => {
+                e.preventDefault();
+                gaClickHandler();
+            };
         }
     }
 

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.options.proxy, this.logger);
+    }
+
+    async getEventDataUrl() {
+        return await getEventDataUrl(this.eventId, this.options.proxy, 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, proxy, 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, proxy, 0, logger);
+}
+
+async function getEventData(eventId, proxy, logger) {
+    const urlData = await getEventDataUrl(eventId, proxy, logger);
+    if (!urlData) {
+        throw new Error("Failed to get event data URL");
+    }
+
+    const url = buildAXSEventDataUrl(eventId, urlData);
+    return await getJsonDataWithHeaders(url, {}, proxy, 0, logger);
+}
+
+export {
+    getEventData,
+    getEventDataUrl,
+    buildAXSEventDataUrl,
+};

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

@@ -0,0 +1,171 @@
+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.sharp = null;
+        this.fs = null;
+        this.svg = null;
+        this.bgImg = null;
+    }
+
+    init(dependencies) {
+        this.storage = dependencies.storage;
+        this.sharp = dependencies.sharp;
+        this.fs = dependencies.fs;
+        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");
+    }
+
+    async outputToSVG(path) {
+        if (!this.svg || !this.fs) {
+            this.logger.Error("No SVG data available or fs not initialized");
+            return this;
+        }
+        this.fs.writeFileSync(path, this.svg);
+        return this;
+    }
+
+    async outputToPNG(filePath) {
+        if (!this.svg || !this.sharp) {
+            this.logger.Error("No SVG data available or sharp not initialized");
+            return this;
+        }
+        const s = await this._png();
+        await s.toFile(filePath);
+        return this;
+    }
+
+    async outputToPNGBuffer() {
+        if (!this.svg || !this.sharp) {
+            return Buffer.from([0x00]);
+        }
+        const s = await this._png();
+        return s.toBuffer();
+    }
+
+    async _png() {
+        let background = await this.storage.getItem(`renderer.background.${this.eventId}`);
+        if (!background) {
+            try {
+                background = await this._fetchSaveBgImage();
+            } catch (e) {
+                this.logger.Error(e.message);
+            }
+        } else if (background) {
+            if (typeof background === "string" && background.startsWith("{")) {
+                background = JSON.parse(background);
+            }
+            background = Buffer.from(background);
+            const bgData = await this.sharp(background).metadata();
+            if (bgData.width !== this.config.outputWidth) {
+                this.config.outputWidth = bgData.width;
+            }
+        }
+
+        const svgBuffer = Buffer.from(this.svg);
+        const png = await this.sharp(svgBuffer).png().resize(this.config.outputWidth).toBuffer();
+
+        if (background) {
+            const foreground = await this.sharp(png).toBuffer();
+            return this.sharp(background).composite([
+                {
+                    input: foreground,
+                    gravity: "southeast",
+                },
+            ]);
+        } else {
+            return this.sharp(png);
+        }
+    }
+
+    async _fetchSaveBgImage() {
+        const bgImgData = await this.fetchBackgroundImage();
+        const background = await this.sharp(bgImgData).png().resize(this.config.outputWidth).toBuffer();
+        await this.storage.setItem(`renderer.background.${this.eventId}`, background);
+        return background;
+    }
+
+    createElement(tag, attrs, body = "") {
+        return utils.createElement(tag, attrs, body);
+    }
+
+    async fetchBackgroundImage() {
+        throw new Error("fetchBackgroundImage() method must be implemented by subclass");
+    }
+}
+
+export default BaseRenderer;