@necrolab/dashboard 0.4.61 → 0.4.209

package/src/libs/Filter.js

@@ -4,31 +4,27 @@ 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 BASE_CSS =
+    `path[row]:hover {stroke: ${colors.HIGHLIGHT};pointer-events:all;cursor:pointer;}` +
+    `path[generaladmission]:hover {fill: ${colors.HIGHLIGHT};pointer-events:all;cursor:pointer;}`;
 
 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 getWheelChairRows = () => {
+    const rows = [...document.querySelectorAll("path[row]")];
+    return rows
+        .map((p) => {
+            return { row: p.attributes.row.nodeValue, sectionName: p.attributes.sectionname.nodeValue };
+        })
+        .filter(isWheelchair);
+};
 const sortAlphaNum = (a, b) => {
     var reA = /[^a-zA-Z]/g;
     var reN = /[^0-9]/g;
@@ -97,60 +93,52 @@ const cleanupFilter = (f) => {
         return ret;
     }
 
-    if (f.rows && document.querySelectorAll(`path[section="${f.section}"]`)?.length === f.rows?.length) delete f.rows;
+    if (f.rows && document.querySelectorAll(`path[sectionname="${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;
-        }
+const getFirstRows = (rows) => {
+    const firstRows = {};
+    const parsedRows = rows.map((row) => {
+        return { sec: row.attributes.sectionname.nodeValue, row: row.attributes.row.nodeValue };
     });
+    // log("getFirstRows: parsedRows=", parsedRows);
+    parsedRows.forEach((row) => {
+        if (!firstRows[row.sec]) firstRows[row.sec] = [];
+        firstRows[row.sec].push(row.row);
+    });
+    // log("A getFirstRows: firstRows=", firstRows);
+    Object.entries(firstRows).forEach(([sec, rows]) => {
+        log(`sort:`, sec, rows);
+        firstRows[sec] = rows.sort(sortAlphaNum);
+    });
+    // log("B getFirstRows: firstRows=", firstRows);
+    return firstRows;
+};
 
+const getSectionNameMapping = () => {
+    const sectionRealName = {};
     [...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;
-            }
-        }
+        const sec = t.attributes.section.nodeValue.trim();
+        if (!sectionRealName[sec]) sectionRealName[sec] = t.innerHTML.trim();
+        else if (!sectionRealName[sec]?.includes(t.innerHTML)) sectionRealName[sec] += " " + t.innerHTML.trim();
     });
 
     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;
-};
+// const getFloorSections = () => {
+//     const tspans = [...document.querySelectorAll("tspan")];
+//     const blacklist = ["BL", "BARSTOOLS", "BW", "NL"];
+//     return tspans
+//         .map((t) => t.attributes.section.nodeValue)
+//         .filter((t) => t.match(/^[a-zA-Z]+\s?[\w\d]?$/))
+//         .filter((name) => !blacklist.some((b) => name.includes(b)));
+// };
 
 export default class FilterBuilder {
     constructor() {
@@ -169,6 +157,7 @@ export default class FilterBuilder {
             CATCH_ALL_GA: 1,
             NORMAL: 2,
             NORMAL_FIRSTROW: 3,
+            GLOBAL_FIRSTROW: 4,
             CATCH_ALL_FLOOR: 5
         };
 
@@ -181,9 +170,6 @@ export default class FilterBuilder {
         this.reverseSectionNameMapping = {};
         this.getSectionNameMapping = getSectionNameMapping;
         this.updateHooks = [];
-        this.unselectable = [];
-        this.isDragging = false;
-        this.highlightedSeatColor = "#d3f8e2";
     }
 
     onUpdate(fn) {
@@ -192,8 +178,6 @@ export default class FilterBuilder {
 
     setExpandedFilter(f) {
         this.expandedFilter = f;
-        this.updateCss();
-        this.updateHooks.forEach((fn) => fn());
     }
 
     selectFilter(f) {
@@ -210,80 +194,24 @@ export default class FilterBuilder {
         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 && filter.firstRow) return this.filterTypes.NORMAL_FIRSTROW;
+        // else if (!filter.section && filter.firstRow) return this.filterTypes.GLOBAL_FIRSTROW;
         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.addGAHandlers();
         this.currentEventId = eventId;
 
+        const wcRows = getWheelChairRows();
+        log("wcRows:", wcRows);
+        wcRows.forEach((r) => this.makeRowUnselectable(r.sectionName, r.row));
         this.updateCss();
     }
 
@@ -305,18 +233,6 @@ export default class FilterBuilder {
     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);
@@ -357,7 +273,23 @@ export default class FilterBuilder {
         this.rows = [];
         if (hard) this.unselectable = [];
         this.updateCss();
-        this.updateHooks.forEach((fn) => fn());
+    }
+
+    selectFirstRow() {
+        const paths = document.querySelectorAll("path");
+        const rows = [...paths].filter((r) => r.id.startsWith("s_"));
+        const firstRows = getFirstRows(rows);
+
+        Object.entries(firstRows).forEach(([sec, rows]) => {
+            if (this.filters.some((f) => f.section === sec && f.rows.includes(rows[0]) && this.isForCurrentEvent(f))) {
+                log(`Filter for ${sec}/${rows[0]} already exists`);
+                return;
+            }
+            if (this.isUnselectable(sec, rows[0])) return;
+            this.addFilter({ event: this.currentEventId, section: sec, rows: [rows[0]] });
+        });
+
+        this.updateCss();
     }
 
     updateCss() {
@@ -368,9 +300,9 @@ export default class FilterBuilder {
             if (!this.isForCurrentEvent(filter)) return;
 
             const tryFindRealName = Object.entries(gaSectionNameMapping).find(
-                ([, v]) => v === filter.section && v.includes(" ")
+                // eslint-disable-next-line no-unused-vars
+                ([_, v]) => v === filter.section && v.includes(" ")
             )?.[0];
-
             if (tryFindRealName) {
                 log(`Real name for ${filter.section}: ${tryFindRealName}`);
             } else {
@@ -379,44 +311,33 @@ 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;
-            }
-            
+            let color = filter.exclude ? colors.EXCLUDED : colors.SELECTED;
+            if (this.expandedFilter === filter.id) color = colors.HIGHLIGHT;
             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;
+                        const isGA = document.querySelectorAll(`path[sectionname='${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`;
-                        }
+                        if (isGA) this.cssClasses += `path[name="${tryFindRealName}"] {fill: ${color} !important}`;
+                        else this.cssClasses += `path[sectionname="${filter.section}"] {stroke: ${color} !important}`;
                     } else {
                         this.cssClasses += filter.rows
                             .map(
-                                (row) => `.svg-wrapper path[section="${filter.section}"][row="${row}"] {stroke: ${color} !important;}`
+                                (row) =>
+                                    `path[sectionname="${filter.section}"][row="${row}"] {stroke: ${color} !important}`
                             )
-                            .join("\n") + "\n";
+                            ?.join("\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`;
+                    // this.cssClasses += `path[generaladmission] {fill: ${color} !important}`;
                     break;
 
                 case this.filterTypes.CATCH_ALL_FLOOR:
-                    // this.cssClasses += floors.map((f) => `path[name="${f}"] {fill: ${color} !important;}`).join("\n") + "\n";
+                    // this.cssClasses += floors.map((f) => `path[name="${f}"] {fill: ${color} !important}`).join("\n");
                     break;
 
                 case this.filterTypes.INVALID:
@@ -427,13 +348,12 @@ export default class FilterBuilder {
         });
 
         this.unselectable.forEach((unselectable) => {
-            const [section, row] = unselectable.split("/");
-            log("UpdateCSS: adding unselectable", section, row);
+            const [sectionName, row] = unselectable.split("/");
+            log("UpdateCSS: adding unselectable", sectionName, row);
             const color = colors.UNSELECTABLE;
-            this.cssClasses += `.svg-wrapper path[section="${section}"][row="${row}"] {stroke: ${color} !important;}\n`;
+            this.cssClasses += `path[sectionname="${sectionName}"][row="${row}"] {stroke: ${color} !important} `;
         });
-        
-        log("Generated CSS:", this.cssClasses);
+        log(this.cssClasses);
     }
 
     addLabelHandlers() {
@@ -443,7 +363,7 @@ export default class FilterBuilder {
 
         for (let i = 0; i < labels.length; i++) {
             const label = labels[i];
-            const section = getAttributeValue(label, "section");
+            const section = label.attributes.section.nodeValue;
 
             label.onclick = () => {
                 // filter exists already for section - return
@@ -452,40 +372,33 @@ export default class FilterBuilder {
                     if (f.section !== section && f.section !== gaSectionNameMapping[section]) return false;
                     return true;
                 });
-
+                // (((f.section === section || f.section === gaSectionNameMapping[section]) && !f.rows) ||
+                //     (f.section === section &&
+                //         document.querySelectorAll(`path[sectionname="${section}"]`).length ===
+                //             f.rows.length)) &&
+                // this.isForCurrentEvent(f)
                 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);
-                    }
+                    if (this.expandedFilter === matchingFilter.id) this.setExpandedFilter(null);
+                    else this.setExpandedFilter(matchingFilter.id);
+                    this.updateCss();
                     return;
                 }
 
                 if (isWheelchair({ section: gaSectionNameMapping[section] || section })) return;
 
-                const isGA = document.querySelectorAll(`path[sectionname="${section}"][row]`).length === 0;
+                const isGA = document.querySelectorAll(`path[sectionname="${section.trim()}"][row]`).length === 0;
 
                 try {
                     if (isGA) {
-                        const realSectionName = gaSectionNameMapping[section];
-                        if (realSectionName) {
-                            this.addFilter({
-                                section: realSectionName,
-                                event: this.currentEventId
-                            });
-                        }
+                        this.addFilter({
+                            section: gaSectionNameMapping[section].trim(),
+                            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
-                            });
+                        this.addFilter({
+                            section: section.trim(),
+                            event: this.currentEventId
                         });
                     }
                     log("Added labelHandler filter", section);
@@ -506,23 +419,21 @@ export default class FilterBuilder {
 
         for (let i = 0; i < GASections.length; i++) {
             const path = GASections[i];
-            const section = getAttributeValue(path, "name");
+            const section = path.attributes.name.nodeValue;
             const sectionName = gaSectionNameMapping[section];
 
             path.onclick = () => {
-                // filter exists already for section
+                // filter exists already for section - return
                 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);
-                    }
+                    if (this.expandedFilter === matchingFilter.id) this.setExpandedFilter(null);
+                    else this.setExpandedFilter(matchingFilter.id);
+                    this.updateCss();
                     return;
                 }
                 log(`GAHandler: adding filter for ${section} (realname: ${sectionName})`, section, sectionName);
+
                 this.addFilter({
                     section: sectionName,
                     event: this.currentEventId
@@ -531,12 +442,67 @@ export default class FilterBuilder {
         }
     }
 
+    addRowHandlers() {
+        for (let i = 0; i < this.rows.length; i++) {
+            const row = this.rows[i];
+            row.onclick = () => {
+                const parsed = {
+                    section: row.attributes.sectionname.nodeValue,
+                    row: row.attributes.row.nodeValue,
+                    id: row.attributes.id.nodeValue
+                };
+                log(`Adding filter ${parsed.section}/${parsed.row}`);
+                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})`);
+                    if (this.expandedFilter === matchingFilter.id) this.setExpandedFilter(null);
+                    else this.setExpandedFilter(matchingFilter.id);
+                    this.updateCss();
+                    return;
+                }
+
+                if (this.isUnselectable(parsed.section, parsed.row)) return;
+
+                this.addFilter({
+                    section: parsed.section,
+                    rows: [parsed.row],
+                    event: this.currentEventId
+                });
+            };
+
+            row.onmouseover = () => {
+                const parsed = {
+                    section: row.attributes.sectionname.nodeValue,
+                    row: row.attributes.row.nodeValue,
+                    id: row.attributes.id.nodeValue
+                };
+                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();
+            };
+        }
+    }
+
     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) {
@@ -554,7 +520,6 @@ export default class FilterBuilder {
             id: this.filters[index].id
         };
         this.updateCss();
-        this.updateHooks.forEach((fn) => fn());
         return this.filters[index];
     }
 
@@ -574,11 +539,11 @@ export default class FilterBuilder {
 
         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}`;
+            newCSS += `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}`;
+            newCSS += `path[sectionname="${filter.section}"][row="${filter.row}"] {stroke: ${colors.HIGHLIGHT} !important}`;
         } else {
-            newCSS += `.svg-wrapper path[section="${filter.section}"] {stroke: ${colors.HIGHLIGHT} !important}`;
+            newCSS += `path[sectionname="${filter.section}"] {stroke: ${colors.HIGHLIGHT} !important}`;
         }
         this.temporaryCSS += newCSS;
     }
@@ -587,6 +552,11 @@ export default class FilterBuilder {
         this.temporaryCSS = "";
     }
 
+    makeRowUnselectable(section, row) {
+        log("adding unselectable:", section, row);
+        this.unselectable.push(`${section}/${row}`);
+    }
+
     isUnselectable(section, row) {
         return this.unselectable.includes(`${section}/${row}`);
     }

package/src/registerServiceWorker.js

@@ -2,7 +2,7 @@
 
 import { register } from "register-service-worker";
 
-if (process.env.NODE_ENV != "development") {
+if (process.env.NODE_ENV === "production") {
     register(`/sw.js`, {
         ready() {
             console.log(