@necrolab/dashboard 0.4.3

package/src/libs/Filter.js

@@ -0,0 +1,593 @@
+const debug = false;
+const log = (...args) => debug && console.log("[filter]", ...args);
+
+const colors = {
+    HIGHLIGHT: "#d3f8e2",
+    SELECTED: "#a9def9",
+    SELECTED_EXPANDED: "#6bb6ff",
+    EXCLUDED: "#f694c1",
+    EXCLUDED_EXPANDED: "#f472b6",
+    UNSELECTABLE: "#311432"
+};
+
+const BASE_CSS = `.svg-wrapper path[generaladmission]:hover {fill: ${colors.HIGHLIGHT};pointer-events:all;cursor:pointer;}`;
+
+const getAttributeValue = (element, attributeName) => {
+    try {
+        return element.attributes[attributeName]?.nodeValue?.trim() || "";
+    } catch {
+        return "";
+    }
+};
+
+const getTextContent = (element) => {
+    return element.innerHTML?.trim() || "";
+};
+
+const isWheelchair = (p) => {
+    if (p.row === "W" || p.sectionName === "W") return false;
+    return [("W", "ADA")].some((part) => p.row !== "W" && (p.row?.includes(part) || p.sectionName?.includes(part)));
+};
+
+const sortAlphaNum = (a, b) => {
+    var reA = /[^a-zA-Z]/g;
+    var reN = /[^0-9]/g;
+    var AInt = parseInt(a, 10);
+    var BInt = parseInt(b, 10);
+
+    if (isNaN(AInt) && isNaN(BInt)) {
+        var aA = a.replace(reA, "");
+        var bA = b.replace(reA, "");
+        if (aA === bA) {
+            var aN = parseInt(a.replace(reN, ""), 10);
+            var bN = parseInt(b.replace(reN, ""), 10);
+            return aN === bN ? 0 : aN > bN ? 1 : -1;
+        } else {
+            return aA > bA ? 1 : -1;
+        }
+    } else if (isNaN(AInt)) {
+        //A is not an Int
+        return 1; //to make alphanumeric sort first return -1 here
+    } else if (isNaN(BInt)) {
+        //B is not an Int
+        return -1; //to make alphanumeric sort first return 1 here
+    } else {
+        return AInt > BInt ? 1 : -1;
+    }
+};
+
+const uuidv4 = () => {
+    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+        (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
+    );
+};
+
+const cleanupFilter = (f) => {
+    if (f.priceSort === "null") f.priceSort = false;
+    const ret = {};
+    if (f.eventId) ret.eventId = f.eventId;
+    if (f.event) ret.eventId = f.event;
+    if (f.priceSort) ret.priceSort = f.priceSort;
+    if (typeof f.maxPrice === "number") ret.maxPrice = f.maxPrice;
+    if (typeof f.minPrice === "number") ret.minPrice = f.minPrice;
+    if (f.exclude) ret.exclude = true;
+
+    if (f.floor && !f.buyAny) {
+        ret.floor = true;
+        return ret;
+    }
+
+    // Catch-All
+    if (f.buyAny && !f.floor) {
+        ret.buyAny = true;
+        return ret;
+    }
+
+    // GA Catch-All
+    if (f.generalAdmission) {
+        ret.generalAdmission = true;
+        return ret;
+    }
+
+    if (f.section) ret.section = f.section;
+
+    // First Row
+    if (f.firstRow) {
+        ret.firstRow = true;
+        return ret;
+    }
+
+    if (f.rows && document.querySelectorAll(`path[section="${f.section}"]`)?.length === f.rows?.length) delete f.rows;
+    if (f.rows) ret.rows = f.rows.sort(sortAlphaNum);
+
+    return ret;
+};
+
+const getSectionNameMapping = () => {
+    const sectionRealName = {};
+
+    [...document.querySelectorAll("path")].forEach((t) => {
+        const sec = getAttributeValue(t, "section");
+        const secName = getAttributeValue(t, "sectionname");
+        if (sec && secName) {
+            sectionRealName[sec] = secName;
+        }
+    });
+
+    [...document.querySelectorAll("tspan")].forEach((t) => {
+        const sec = getAttributeValue(t, "section");
+        const content = getTextContent(t);
+
+        if (sec && content) {
+            if (!sectionRealName[sec]) {
+                sectionRealName[sec] = content;
+            } else if (!sectionRealName[sec].includes(content)) {
+                sectionRealName[sec] += " " + content;
+            }
+        }
+    });
+
+    log("getSectionNameMapping:", sectionRealName);
+    return sectionRealName;
+};
+
+const getReverseSectionNameMapping = () => {
+    const reverseSectionName = {};
+
+    [...document.querySelectorAll("path")].forEach((t) => {
+        const sec = getAttributeValue(t, "section");
+        const secName = getAttributeValue(t, "sectionname");
+
+        if (sec && secName) {
+            if (!reverseSectionName[secName]) {
+                reverseSectionName[secName] = [];
+            }
+            if (!reverseSectionName[secName].includes(sec)) {
+                reverseSectionName[secName].push(sec);
+            }
+        }
+    });
+
+    log("getReverseSectionNameMapping", reverseSectionName);
+    return reverseSectionName;
+};
+
+export default class FilterBuilder {
+    constructor() {
+        this.filters = [];
+        this.globalFilter = {
+            minPrice: 0,
+            maxPrice: 1000,
+            priceSort: "asc"
+        };
+        this.cssClasses = "";
+        this.temporaryCSS = "";
+
+        this.filterTypes = {
+            INVALID: -1,
+            CATCH_ALL: 0,
+            CATCH_ALL_GA: 1,
+            NORMAL: 2,
+            NORMAL_FIRSTROW: 3,
+            CATCH_ALL_FLOOR: 5
+        };
+
+        // Expanded filter - used for adding to a filter
+        this.expandedFilter = null;
+
+        // checked filter - used for max price bulk edit
+        this.selectedFilters = [];
+
+        this.reverseSectionNameMapping = {};
+        this.getSectionNameMapping = getSectionNameMapping;
+        this.updateHooks = [];
+        this.unselectable = [];
+        this.isDragging = false;
+        this.highlightedSeatColor = "#d3f8e2";
+    }
+
+    onUpdate(fn) {
+        this.updateHooks.push(fn);
+    }
+
+    setExpandedFilter(f) {
+        this.expandedFilter = f;
+        this.updateCss();
+        this.updateHooks.forEach((fn) => fn());
+    }
+
+    selectFilter(f) {
+        log("select filter", f);
+        if (!this.selectedFilters.includes(f)) this.selectedFilters.push(f);
+    }
+
+    unselectFilter(f) {
+        log("unselect filter", f);
+        this.selectedFilters = this.selectedFilters.filter((x) => x !== f);
+    }
+
+    getFilterType(filter) {
+        if (filter.buyAny) return this.filterTypes.CATCH_ALL;
+        else if (filter.floor) return this.filterTypes.CATCH_ALL_FLOOR;
+        else if (filter.generalAdmission) return this.filterTypes.CATCH_ALL_GA;
+        else if (filter.section) return this.filterTypes.NORMAL;
+        else return this.filterTypes.INVALID;
+    }
+
+    addRowHandlers() {
+        for (let i = 0; i < this.rows.length; i++) {
+            const row = this.rows[i];
+            row.onclick = () => {
+                const parsed = {
+                    section: getAttributeValue(row, "section"),
+                    row: getAttributeValue(row, "row"),
+                    id: getAttributeValue(row, "id")
+                };
+
+                log(`Adding filter ${parsed.section}`);
+                const matchingFilter = this.filters.find(
+                    (f) =>
+                        this.isForCurrentEvent(f) &&
+                        f.section === parsed.section &&
+                        (f.rows?.includes(parsed.row) || !Array.isArray(f.rows))
+                );
+
+                if (matchingFilter) {
+                    log(`Filter for ${parsed.section}/${parsed.row} already exists (${matchingFilter.id})`);
+                    // Toggle expanded state
+                    if (this.expandedFilter === matchingFilter.id) {
+                        this.setExpandedFilter(null);
+                    } else {
+                        this.setExpandedFilter(matchingFilter.id);
+                    }
+                    return;
+                }
+
+                this.addFilter({
+                    section: parsed.section,
+                    event: this.currentEventId
+                });
+            };
+
+            row.onmouseover = () => {
+                const parsed = {
+                    section: getAttributeValue(row, "section"),
+                    row: getAttributeValue(row, "row"),
+                    id: getAttributeValue(row, "id")
+                };
+
+                const matchingFilter = this.filters.find(
+                    (f) =>
+                        this.isForCurrentEvent(f) &&
+                        f.section === parsed.section &&
+                        (f.rows?.includes(parsed.row) || !Array.isArray(f.rows))
+                );
+
+                if (!matchingFilter) return;
+                if (Array.isArray(matchingFilter.rows))
+                    matchingFilter.rows.forEach((row) => this.highlight({ section: parsed.section, row: row }));
+                else this.highlight({ section: matchingFilter.section });
+            };
+
+            row.onmouseout = () => {
+                if (!this.isDragging) this.clearHighlight();
+            };
+        }
+    }
+
+    reload(eventId) {
+        const paths = document.querySelectorAll("path");
+        this.rows = [...paths].filter((r) => r.id.startsWith("s_"));
+
+        this.addLabelHandlers();
+        this.addGAHandlers();
+        this.addRowHandlers();
+        this.currentEventId = eventId;
+
+        this.updateCss();
+    }
+
+    updateGlobalFilter(newValues) {
+        this.globalFilter = {
+            ...this.globalFilter,
+            ...newValues
+        };
+    }
+
+    addFilterToParent(filter, parent) {
+        filter.rows.forEach((r) => {
+            if (!parent.rows.includes(r)) parent.rows.push(r);
+        });
+        this.updateCss();
+        this.updateHooks.forEach((fn) => fn());
+    }
+
+    addFilter(filter) {
+        if (!this.filters) this.filters = [];
+
+        // Check if a filter with the same properties (excluding id) already exists
+        const existingFilter = this.filters.find((f) => {
+            const n = { ...f };
+            delete n.id;
+            return JSON.stringify(n) === JSON.stringify(filter);
+        });
+
+        if (existingFilter) {
+            console.log("Filter already exists:", existingFilter);
+            return; // Don't add the filter if it already exists
+        }
+
+        if (this.expandedFilter) {
+            const parent = this.filters.find((f) => f.event === filter.event && f.section === filter.section);
+            if (parent) return this.addFilterToParent(filter, parent);
+        }
+
+        this.filters.push({
+            id: uuidv4(),
+            ...filter
+        });
+
+        this.updateCss();
+        this.updateHooks.forEach((fn) => fn());
+    }
+
+    out() {
+        return {
+            globalFilter: {
+                priceSort: this.globalFilter.priceSort || null,
+                minPrice: Number(this.globalFilter.minPrice),
+                maxPrice: Number(this.globalFilter.maxPrice)
+            },
+            filters: this.filters.map(cleanupFilter)
+        };
+    }
+
+    log() {
+        const out = this.out();
+        out.filters.map((f) => (f._FILTER_TYPE = this.getFilterType(f)));
+        log(out);
+    }
+
+    swapFilterPos(a, b) {
+        this.filters.splice(a, 1, this.filters.splice(b, 1, this.filters[a])[0]);
+    }
+
+    reset(hard = false) {
+        this.filters = [];
+        this.rows = [];
+        if (hard) this.unselectable = [];
+        this.updateCss();
+        this.updateHooks.forEach((fn) => fn());
+    }
+
+    updateCss() {
+        this.cssClasses = BASE_CSS;
+        const gaSectionNameMapping = this.getSectionNameMapping();
+
+        this.filters.forEach((filter) => {
+            if (!this.isForCurrentEvent(filter)) return;
+
+            const tryFindRealName = Object.entries(gaSectionNameMapping).find(
+                ([, v]) => v === filter.section && v.includes(" ")
+            )?.[0];
+
+            if (tryFindRealName) {
+                log(`Real name for ${filter.section}: ${tryFindRealName}`);
+            } else {
+                log(filter.section, "is already real name", gaSectionNameMapping);
+            }
+
+            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;
+            }
+            
+            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`;
+                        } else {
+                            this.cssClasses += `.svg-wrapper path[section="${filter.section}"] {stroke: ${color} !important;}\n`;
+                        }
+                    } else {
+                        this.cssClasses += filter.rows
+                            .map(
+                                (row) => `.svg-wrapper path[section="${filter.section}"][row="${row}"] {stroke: ${color} !important;}`
+                            )
+                            .join("\n") + "\n";
+                    }
+                    break;
+
+                case this.filterTypes.CATCH_ALL:
+                    // Scope to SVG paths only to prevent global CSS leak
+                    this.cssClasses += `.svg-wrapper path {stroke: ${color} !important;}\n`;
+                    break;
+
+                case this.filterTypes.CATCH_ALL_GA:
+                    this.cssClasses += `.svg-wrapper path[generaladmission] {fill: ${color} !important;}\n`;
+                    break;
+
+                case this.filterTypes.CATCH_ALL_FLOOR:
+                    // this.cssClasses += floors.map((f) => `path[name="${f}"] {fill: ${color} !important;}`).join("\n") + "\n";
+                    break;
+
+                case this.filterTypes.INVALID:
+                default:
+                    log("Can't add filter to CSS:", type, filter);
+                    break;
+            }
+        });
+
+        this.unselectable.forEach((unselectable) => {
+            const [section, row] = unselectable.split("/");
+            log("UpdateCSS: adding unselectable", section, row);
+            const color = colors.UNSELECTABLE;
+            this.cssClasses += `.svg-wrapper path[section="${section}"][row="${row}"] {stroke: ${color} !important;}\n`;
+        });
+        
+        log("Generated CSS:", this.cssClasses);
+    }
+
+    addLabelHandlers() {
+        const labels = document.querySelectorAll("tspan");
+        const gaSectionNameMapping = this.getSectionNameMapping();
+        log("addLabelHandlers: gaSectionNameMapping", gaSectionNameMapping);
+
+        for (let i = 0; i < labels.length; i++) {
+            const label = labels[i];
+            const section = getAttributeValue(label, "section");
+
+            label.onclick = () => {
+                // filter exists already for section - return
+                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) {
+                    log(`Filter for ${section} already exists (${matchingFilter.id})`);
+                    // Toggle expanded state
+                    if (this.expandedFilter === matchingFilter.id) {
+                        this.setExpandedFilter(null);
+                    } else {
+                        this.setExpandedFilter(matchingFilter.id);
+                    }
+                    return;
+                }
+
+                if (isWheelchair({ section: gaSectionNameMapping[section] || section })) return;
+
+                const isGA = document.querySelectorAll(`path[sectionname="${section}"][row]`).length === 0;
+
+                try {
+                    if (isGA) {
+                        const realSectionName = gaSectionNameMapping[section];
+                        if (realSectionName) {
+                            this.addFilter({
+                                section: realSectionName,
+                                event: this.currentEventId
+                            });
+                        }
+                    } else {
+                        const reverseMapping = getReverseSectionNameMapping();
+                        const sections = reverseMapping[section] || [section];
+                        log("labelHandler: non-ga", sections, section);
+                        sections.forEach((s) => {
+                            this.addFilter({
+                                section: s,
+                                event: this.currentEventId
+                            });
+                        });
+                    }
+                    log("Added labelHandler filter", section);
+                } catch (e) {
+                    log("Could not add labelHandler", section, e);
+                }
+            };
+        }
+    }
+
+    isForCurrentEvent(filter) {
+        return filter.event === this.currentEventId || filter.eventId === this.currentEventId;
+    }
+
+    addGAHandlers() {
+        const GASections = document.querySelectorAll("path[generaladmission=true]");
+        const gaSectionNameMapping = this.getSectionNameMapping();
+
+        for (let i = 0; i < GASections.length; i++) {
+            const path = GASections[i];
+            const section = getAttributeValue(path, "name");
+            const sectionName = gaSectionNameMapping[section];
+
+            path.onclick = () => {
+                // filter exists already for section
+                const matchingFilter = this.filters.find((f) => f.section === sectionName && this.isForCurrentEvent(f));
+                if (matchingFilter) {
+                    log(`Filter for ${sectionName} (GA) already exists (${matchingFilter.id})`);
+                    // Toggle expanded state
+                    if (this.expandedFilter === matchingFilter.id) {
+                        this.setExpandedFilter(null);
+                    } else {
+                        this.setExpandedFilter(matchingFilter.id);
+                    }
+                    return;
+                }
+                log(`GAHandler: adding filter for ${section} (realname: ${sectionName})`, section, sectionName);
+                this.addFilter({
+                    section: sectionName,
+                    event: this.currentEventId
+                });
+            };
+        }
+    }
+
+    deleteFilterById(id) {
+        this.filters = this.filters.filter((f) => f.id !== id);
+        // this.updateHooks = this.updateHooks.filter((i) => id !== i);
+        if (this.expandedFilter === id) this.expandedFilter = "";
+        this.updateCss();
+        this.updateHooks.forEach((fn) => fn());
+    }
+
+    replaceById(id, filter) {
+        if (this.selectedFilters.length !== 0 && typeof filter.maxPrice === "number") {
+            this.selectedFilters.forEach((id) => {
+                let filterIndex = this.filters.findIndex((f) => f.id === id);
+                this.filters[filterIndex] = { ...this.filters[filterIndex], ...filter };
+            });
+        }
+        const index = this.filters.findIndex((f) => f.id === id);
+        if (index === -1) return false;
+        this.filters[index] = {
+            ...this.filters[index],
+            ...filter,
+            id: this.filters[index].id
+        };
+        this.updateCss();
+        this.updateHooks.forEach((fn) => fn());
+        return this.filters[index];
+    }
+
+    updateByIndex(i, filter) {
+        this.filters[i] = {
+            ...this.filters[i],
+            ...filter
+        };
+        this.updateCss();
+        this.updateHooks.forEach((fn) => fn());
+    }
+
+    highlight(filter, isGA = false) {
+        if (filter.row && this.isUnselectable(filter.sec, filter.row)) return;
+
+        let newCSS = "";
+
+        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}`;
+        } else if (filter.row) {
+            newCSS += `.svg-wrapper path[section="${filter.section}"][row="${filter.row}"] {stroke: ${colors.HIGHLIGHT} !important}`;
+        } else {
+            newCSS += `.svg-wrapper path[section="${filter.section}"] {stroke: ${colors.HIGHLIGHT} !important}`;
+        }
+        this.temporaryCSS += newCSS;
+    }
+
+    clearHighlight() {
+        this.temporaryCSS = "";
+    }
+
+    isUnselectable(section, row) {
+        return this.unselectable.includes(`${section}/${row}`);
+    }
+}