@necrolab/dashboard 0.4.215 → 0.4.216

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.4.215",
+    "version": "0.4.216",
     "scripts": {
         "build": "npx workbox-cli generateSW workbox-config.js && vite build",
         "dev": "vite",

package/src/components/Filter/Filter.vue

@@ -152,7 +152,7 @@ const getFilterTitle = () => {
             return `${filter.value.section} (first row) ${excluded}`;
         case filterTypes.NORMAL: {
             const selectedRowAmount = filter.value?.rows?.length;
-            const totalRowAmount = document.querySelectorAll(`path[sectionname='${filter.value.section}']`)?.length;
+            const totalRowAmount = document.querySelectorAll(`path[section='${filter.value.section}']`)?.length;
             isAllRows.value = selectedRowAmount === totalRowAmount || !filter.value?.rows?.length;
 
             if (isAllRows.value) return `${filter.value.section} (full section) ${excluded}`;

package/src/libs/Filter.js

@@ -83,15 +83,23 @@ const cleanupFilter = (f) => {
         return ret;
     }
 
-    if (f.rows && document.querySelectorAll(`path[sectionname="${f.section}"]`)?.length === f.rows?.length)
-        delete f.rows;
+    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) => {
+        try {
+            const sec = t.attributes.section.nodeValue.trim();
+            const secName = t.attributes.sectionname.nodeValue.trim();
+            sectionRealName[sec] = secName;
+        } catch {
+            /* empty */
+        }
+    });
+
     [...document.querySelectorAll("tspan")].forEach((t) => {
         const sec = t.attributes.section.nodeValue.trim();
         if (!sectionRealName[sec]) sectionRealName[sec] = t.innerHTML.trim();
@@ -102,6 +110,26 @@ const getSectionNameMapping = () => {
     return sectionRealName;
 };
 
+const getReverseSectionNameMapping = () => {
+    const reverseSectionName = {};
+    [...document.querySelectorAll("path")].forEach((t) => {
+        try {
+            const sec = t.attributes.section.nodeValue.trim();
+            const secName = t.attributes.sectionname.nodeValue.trim();
+            if (!reverseSectionName[secName]) {
+                reverseSectionName[secName] = [];
+            }
+            if (!reverseSectionName[secName].includes(sec)) {
+                reverseSectionName[secName].push(sec);
+            }
+        } catch {
+            /* empty */
+        }
+    });
+    log("getReverseSectionNameMapping", reverseSectionName);
+    return reverseSectionName;
+};
+
 export default class FilterBuilder {
     constructor() {
         this.filters = [];
@@ -164,7 +192,7 @@ export default class FilterBuilder {
             const row = this.rows[i];
             row.onclick = () => {
                 const parsed = {
-                    section: row.attributes.sectionname.nodeValue,
+                    section: row.attributes.section.nodeValue,
                     row: row.attributes.row.nodeValue,
                     id: row.attributes.id.nodeValue
                 };
@@ -191,7 +219,7 @@ export default class FilterBuilder {
 
             row.onmouseover = () => {
                 const parsed = {
-                    section: row.attributes.sectionname.nodeValue,
+                    section: row.attributes.section.nodeValue,
                     row: row.attributes.row.nodeValue,
                     id: row.attributes.id.nodeValue
                 };
@@ -242,6 +270,18 @@ 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);
@@ -295,6 +335,7 @@ export default class FilterBuilder {
                 // eslint-disable-next-line no-unused-vars
                 ([_, v]) => v === filter.section && v.includes(" ")
             )?.[0];
+
             if (tryFindRealName) {
                 log(`Real name for ${filter.section}: ${tryFindRealName}`);
             } else {
@@ -309,15 +350,14 @@ export default class FilterBuilder {
                 case this.filterTypes.NORMAL:
                     // If it has no 'rows' property
                     if (!Array.isArray(filter.rows)) {
-                        const isGA = document.querySelectorAll(`path[sectionname='${filter.section}']`)?.length === 0;
+                        const isGA = document.querySelectorAll(`path[section='${filter.section}']`)?.length === 0;
 
                         if (isGA) this.cssClasses += `path[name="${tryFindRealName}"] {fill: ${color} !important}`;
-                        else this.cssClasses += `path[sectionname="${filter.section}"] {stroke: ${color} !important}`;
+                        else this.cssClasses += `path[section="${filter.section}"] {stroke: ${color} !important}`;
                     } else {
                         this.cssClasses += filter.rows
                             .map(
-                                (row) =>
-                                    `path[sectionname="${filter.section}"][row="${row}"] {stroke: ${color} !important}`
+                                (row) => `path[section="${filter.section}"][row="${row}"] {stroke: ${color} !important}`
                             )
                             ?.join("\n");
                     }
@@ -340,10 +380,10 @@ export default class FilterBuilder {
         });
 
         this.unselectable.forEach((unselectable) => {
-            const [sectionName, row] = unselectable.split("/");
-            log("UpdateCSS: adding unselectable", sectionName, row);
+            const [section, row] = unselectable.split("/");
+            log("UpdateCSS: adding unselectable", section, row);
             const color = colors.UNSELECTABLE;
-            this.cssClasses += `path[sectionname="${sectionName}"][row="${row}"] {stroke: ${color} !important} `;
+            this.cssClasses += `path[section="${section}"][row="${row}"] {stroke: ${color} !important} `;
         });
         log(this.cssClasses);
     }
@@ -364,11 +404,7 @@ 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})`);
                     if (this.expandedFilter === matchingFilter.id) this.setExpandedFilter(null);
@@ -388,9 +424,14 @@ export default class FilterBuilder {
                             event: this.currentEventId
                         });
                     } else {
-                        this.addFilter({
-                            section: section.trim(),
-                            event: this.currentEventId
+                        const reverseMapping = getReverseSectionNameMapping();
+                        const sections = reverseMapping[section.trim()] || [section.trim()];
+                        log("labelHandler: non-ga", sections, section);
+                        sections.forEach((s) => {
+                            this.addFilter({
+                                section: s,
+                                event: this.currentEventId
+                            });
                         });
                     }
                     log("Added labelHandler filter", section);
@@ -477,9 +518,9 @@ export default class FilterBuilder {
             if (this.filters.find((f) => f.section === filter.name)) return;
             newCSS += `path[name="${filter.section || filter.name}"] {fill: ${colors.HIGHLIGHT} !important}`;
         } else if (filter.row) {
-            newCSS += `path[sectionname="${filter.section}"][row="${filter.row}"] {stroke: ${colors.HIGHLIGHT} !important}`;
+            newCSS += `path[section="${filter.section}"][row="${filter.row}"] {stroke: ${colors.HIGHLIGHT} !important}`;
         } else {
-            newCSS += `path[sectionname="${filter.section}"] {stroke: ${colors.HIGHLIGHT} !important}`;
+            newCSS += `path[section="${filter.section}"] {stroke: ${colors.HIGHLIGHT} !important}`;
         }
         this.temporaryCSS += newCSS;
     }

package/src/stores/logger.js

@@ -18,7 +18,6 @@ const LOG_COLORS = {
     yellow: "color: #ffbb33; font-weight: bold", // Yellow
     reset: ""
 };
-
 class Logger {
     constructor() {
         this.ENABLED = true;
@@ -45,11 +44,20 @@ class Logger {
 
         args.unshift(timestamp);
 
+        // Format objects for console output
+        const formattedArgs = args.map((arg) => {
+            if (typeof arg === "object" && arg !== null) {
+                console.log(arg._value ? arg._value : arg);
+                return arg;
+            }
+            return arg;
+        });
+
         // For styled console output in browser
         if (style) {
-            console.log(`%c${args.join(" ")}`, style);
+            console.log(`%c${formattedArgs.join(" ")}`, style);
         } else {
-            console.log(...args);
+            console.log(...formattedArgs);
         }
     }
 

package/src/stores/ui.js

@@ -202,22 +202,16 @@ export const useUIStore = defineStore("ui", () => {
 
         let relevantTasks = Object.values(tasks.value).filter((t) => t.siteId === currentCountry.value.siteId);
         if (currentEvent.value) relevantTasks = relevantTasks.filter((t) => t.eventId === currentEvent.value);
-        // logger.Info("mqm tasks:", relevantTasks);
-        const tasksInQueue = relevantTasks.filter((t) => t.status.includes(" - ETA:"));
 
         queueStats.value.total = 0;
-        queueStats.value.queued =
-            tasksInQueue.length + relevantTasks.filter((t) => t.status?.toLowerCase()?.includes("queueit")).length || 0;
+        queueStats.value.queued = relevantTasks.filter((t) => t.inQueue).length || 0;
         queueStats.value.show = queueStats.value.total > 0;
         const sleepingStatuses = ["sleeping in queue", "waiting for drop", "waiting for carting", "waiting for queue"];
         queueStats.value.sleeping = relevantTasks.filter((t) =>
             sleepingStatuses.includes(t.status.toLowerCase())
         ).length;
-        const positions = tasksInQueue
-            .map((t) => parseInt(t.status.split(" users ahead - ETA:")[0]))
-            .filter((e) => !isNaN(e));
+        const positions = relevantTasks.map((t) => t.queuePosition).filter((e) => !isNaN(e));
         queueStats.value.nextQueuePasses = positions.sort((a, b) => a - b);
-        // logger.Info("Refreshing queue stats", queueStats.value);
     };
 
     const toggleModal = (name, clearValue = false) => {

package/src/views/FilterBuilder.vue

@@ -171,135 +171,135 @@ const activeModal = computed(() => ui.activeModal);
 const ui = useUIStore();
 const hasLoaded = ref(false);
 
-let isShiftPressed = false;
-window.onkeyup = (e) => {
-    if (e.keyCode === 16) isShiftPressed = false;
-};
-window.onkeydown = (e) => {
-    if (e.keyCode === 16) isShiftPressed = true;
-};
-
-const doDragSelect = () => {
-    // https://dragselect.com/docs/API/Settings
-    const ds = new DragSelect({
-        selectables: [
-            ...document.querySelectorAll("path[row]"),
-            ...document.querySelectorAll("path[generaladmission]")
-        ],
-        area: document.getElementById("svg-wrapper"),
-        selectionThreshold: 0.1,
-        multiSelectKeys: []
-    });
-
-    ds.subscribe("DS:start:pre", () => {
-        // ui.logger.Info("DS:start:pre - shift pressed:", isShiftPressed);
-        if (!isShiftPressed) {
-            ds.stop(false, false);
-            ds.start();
-        } else {
-            panzoomInstance.pause();
-        }
-    });
-
-    const parseSelected = (items) => {
-        const parsed = items
-            .map((e) => {
-                return {
-                    section: e.attributes.sectionname?.nodeValue || e.attributes.name?.nodeValue,
-                    row: e.attributes.row?.nodeValue,
-                    GA: e.attributes.generaladmission?.nodeValue,
-                    name: e.attributes.name?.nodeValue
-                };
-            })
-            .filter((e) => !filterBuilder.value.isUnselectable(e.section, e.row));
-
-        const sectionMapping = {};
-        parsed
-            .filter((p) => !p.GA)
-            .forEach((p) => {
-                if (!sectionMapping[p.section]) sectionMapping[p.section] = [];
-                sectionMapping[p.section].push(p);
-            });
-        parsed
-            .filter((p) => p.GA)
-            .forEach((p) => {
-                sectionMapping[p.section] = {
-                    GA: true,
-                    section: p.section,
-                    name: p.name
-                };
-            });
-        return sectionMapping;
-    };
-
-    ds.subscribe("DS:update:pre", (e) => {
-        // ui.logger.Info("DS:update:pre - shift pressed:", isShiftPressed, e.items);
-        filterBuilder.value.isDragging = true;
-        if (!isShiftPressed) return;
-        const sectionMapping = parseSelected(e.items);
-        filterBuilder.value.clearHighlight();
-        Object.entries(sectionMapping).forEach(([section, rows]) => {
-            if (rows.GA) {
-                const isSelected = filterBuilder.value.filters.find(
-                    (f) => filterBuilder.value.isForCurrentEvent(f) && f.section === section
-                );
-                if (isSelected) return;
-                filterBuilder.value.highlight({ section: section }, true);
-            } else
-                rows.forEach((row) => {
-                    const isSelected = filterBuilder.value.filters.find(
-                        (f) =>
-                            (f.section === section && f.rows?.includes(row.row)) ||
-                            (!f.rows && f.section === section && filterBuilder.value.isForCurrentEvent(f))
-                    );
-                    if (isSelected) return;
-
-                    filterBuilder.value.highlight({ section, row: row.row });
-                });
-        });
-    });
-
-    ds.subscribe("DS:end", (e) => {
-        filterBuilder.value.isDragging = false;
-        panzoomInstance.resume();
-        filterBuilder.value.clearHighlight();
-        [...document.querySelectorAll("path")].map((f) => (f.style = ""));
-        if (!isShiftPressed) return;
-        const sectionMapping = parseSelected(e.items);
-        const secNameMapping = filterBuilder.value.getSectionNameMapping();
-
-        Object.entries(sectionMapping).forEach(([section, rows]) => {
-            if (rows.GA) {
-                const isSelected = filterBuilder.value.filters.find(
-                    (f) => filterBuilder.value.isForCurrentEvent(f) && f.section === secNameMapping[section]
-                );
-                if (isSelected) return;
-                filterBuilder.value.addFilter({
-                    event: filterBuilder.value.currentEventId,
-                    section: secNameMapping[section]
-                });
-            } else {
-                const unselectedRows = [];
-                rows.forEach((row) => {
-                    const isSelected = filterBuilder.value.filters.find(
-                        (f) =>
-                            (f.section === section && f.rows?.includes(row.row)) ||
-                            (!f.rows && f.section === section && filterBuilder.value.isForCurrentEvent(f))
-                    );
-                    if (isSelected) return;
-                    unselectedRows.push(row.row);
-                });
-                if (unselectedRows.length === 0) return;
-                filterBuilder.value.addFilter({
-                    event: filterBuilder.value.currentEventId,
-                    section,
-                    rows: unselectedRows
-                });
-            }
-        });
-        isShiftPressed = false;
-    });
-};
+// let isShiftPressed = false;
+// window.onkeyup = (e) => {
+//     if (e.keyCode === 16) isShiftPressed = false;
+// };
+// window.onkeydown = (e) => {
+//     if (e.keyCode === 16) isShiftPressed = true;
+// };
+
+// const doDragSelect = () => {
+//     // https://dragselect.com/docs/API/Settings
+//     const ds = new DragSelect({
+//         selectables: [
+//             ...document.querySelectorAll("path[row]"),
+//             ...document.querySelectorAll("path[generaladmission]")
+//         ],
+//         area: document.getElementById("svg-wrapper"),
+//         selectionThreshold: 0.1,
+//         multiSelectKeys: []
+//     });
+
+//     ds.subscribe("DS:start:pre", () => {
+//         // ui.logger.Info("DS:start:pre - shift pressed:", isShiftPressed);
+//         if (!isShiftPressed) {
+//             ds.stop(false, false);
+//             ds.start();
+//         } else {
+//             panzoomInstance.pause();
+//         }
+//     });
+
+//     const parseSelected = (items) => {
+//         const parsed = items
+//             .map((e) => {
+//                 return {
+//                     section: e.attributes.sectionname?.nodeValue || e.attributes.name?.nodeValue,
+//                     row: e.attributes.row?.nodeValue,
+//                     GA: e.attributes.generaladmission?.nodeValue,
+//                     name: e.attributes.name?.nodeValue
+//                 };
+//             })
+//             .filter((e) => !filterBuilder.value.isUnselectable(e.section, e.row));
+
+//         const sectionMapping = {};
+//         parsed
+//             .filter((p) => !p.GA)
+//             .forEach((p) => {
+//                 if (!sectionMapping[p.section]) sectionMapping[p.section] = [];
+//                 sectionMapping[p.section].push(p);
+//             });
+//         parsed
+//             .filter((p) => p.GA)
+//             .forEach((p) => {
+//                 sectionMapping[p.section] = {
+//                     GA: true,
+//                     section: p.section,
+//                     name: p.name
+//                 };
+//             });
+//         return sectionMapping;
+//     };
+
+//     ds.subscribe("DS:update:pre", (e) => {
+//         // ui.logger.Info("DS:update:pre - shift pressed:", isShiftPressed, e.items);
+//         filterBuilder.value.isDragging = true;
+//         if (!isShiftPressed) return;
+//         const sectionMapping = parseSelected(e.items);
+//         filterBuilder.value.clearHighlight();
+//         Object.entries(sectionMapping).forEach(([section, rows]) => {
+//             if (rows.GA) {
+//                 const isSelected = filterBuilder.value.filters.find(
+//                     (f) => filterBuilder.value.isForCurrentEvent(f) && f.section === section
+//                 );
+//                 if (isSelected) return;
+//                 filterBuilder.value.highlight({ section: section }, true);
+//             } else
+//                 rows.forEach((row) => {
+//                     const isSelected = filterBuilder.value.filters.find(
+//                         (f) =>
+//                             (f.section === section && f.rows?.includes(row.row)) ||
+//                             (!f.rows && f.section === section && filterBuilder.value.isForCurrentEvent(f))
+//                     );
+//                     if (isSelected) return;
+
+//                     filterBuilder.value.highlight({ section, row: row.row });
+//                 });
+//         });
+//     });
+
+//     ds.subscribe("DS:end", (e) => {
+//         filterBuilder.value.isDragging = false;
+//         panzoomInstance.resume();
+//         filterBuilder.value.clearHighlight();
+//         [...document.querySelectorAll("path")].map((f) => (f.style = ""));
+//         if (!isShiftPressed) return;
+//         const sectionMapping = parseSelected(e.items);
+//         const secNameMapping = filterBuilder.value.getSectionNameMapping();
+
+//         Object.entries(sectionMapping).forEach(([section, rows]) => {
+//             if (rows.GA) {
+//                 const isSelected = filterBuilder.value.filters.find(
+//                     (f) => filterBuilder.value.isForCurrentEvent(f) && f.section === secNameMapping[section]
+//                 );
+//                 if (isSelected) return;
+//                 filterBuilder.value.addFilter({
+//                     event: filterBuilder.value.currentEventId,
+//                     section: secNameMapping[section]
+//                 });
+//             } else {
+//                 const unselectedRows = [];
+//                 rows.forEach((row) => {
+//                     const isSelected = filterBuilder.value.filters.find(
+//                         (f) =>
+//                             (f.section === section && f.rows?.includes(row.row)) ||
+//                             (!f.rows && f.section === section && filterBuilder.value.isForCurrentEvent(f))
+//                     );
+//                     if (isSelected) return;
+//                     unselectedRows.push(row.row);
+//                 });
+//                 if (unselectedRows.length === 0) return;
+//                 filterBuilder.value.addFilter({
+//                     event: filterBuilder.value.currentEventId,
+//                     section,
+//                     rows: unselectedRows
+//                 });
+//             }
+//         });
+//         isShiftPressed = false;
+//     });
+// };
 
 const panzoomOptions = {
     maxZoom: 8, // max zoom-in facor
@@ -376,7 +376,7 @@ const updateShownVenue = async () => {
     await nextTick();
     await loadFilter();
     filterBuilder.value.reload(eventId.value);
-    doDragSelect();
+    // doDragSelect();
 };
 
 const loadFilter = async () => {