@necrolab/dashboard 0.4.220 → 0.5.1

package/src/composables/useDropdownPosition.js

@@ -0,0 +1,174 @@
+import { ref, nextTick, onMounted, onUnmounted } from "vue";
+
+export function useDropdownPosition(dropdownRef, options = {}) {
+    const menuStyle = ref({});
+    const {
+        offset = { x: -1, y: 4 },
+        zIndex = 50000,
+        minWidth = null,
+        maxHeight = 160,
+        estimateHeight = null,
+        includeAdjacentButtons = false,
+        containerSelector = null
+    } = options;
+
+    const calculateMenuPosition = () => {
+        if (!dropdownRef.value) return;
+
+        try {
+            const rect = dropdownRef.value.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const viewportWidth = window.innerWidth;
+
+            // Calculate menu dimensions
+            const menuHeight = estimateHeight ? estimateHeight() : maxHeight;
+
+            // Calculate width including adjacent buttons if specified
+            let menuWidth = minWidth || rect.width + 2;
+
+            if (includeAdjacentButtons) {
+                // Look for parent container with buttons
+                const parentContainer = dropdownRef.value.closest(
+                    ".flex, .flex-responsive-wrap, .proxy-controls-row, .filter-controls, .dropdown-container"
+                );
+                if (parentContainer) {
+                    const containerRect = parentContainer.getBoundingClientRect();
+                    // Use the full container width for better alignment
+                    menuWidth = Math.max(menuWidth, containerRect.width);
+                }
+            }
+
+            // Determine if menu should open upward
+            const spaceBelow = viewportHeight - rect.bottom;
+            const spaceAbove = rect.top;
+            const openUpward = spaceBelow < menuHeight && spaceAbove > spaceBelow;
+
+            // Calculate position with improved logic
+            let top, left;
+
+            if (openUpward) {
+                // Position above with better spacing
+                top = rect.top - menuHeight - Math.abs(offset.y) - 2;
+            } else {
+                // Position below with improved spacing
+                top = rect.bottom + offset.y + 2;
+            }
+
+            // Improved horizontal positioning
+            if (includeAdjacentButtons) {
+                // Align with the start of the container for better visual consistency
+                const parentContainer = dropdownRef.value.closest(
+                    ".flex, .flex-responsive-wrap, .proxy-controls-row, .filter-controls, .dropdown-container"
+                );
+                if (parentContainer) {
+                    const containerRect = parentContainer.getBoundingClientRect();
+                    left = containerRect.left + offset.x;
+                } else {
+                    left = rect.left + offset.x;
+                }
+            } else {
+                left = rect.left + offset.x;
+            }
+
+            // Enhanced boundary checking
+            const padding = 12; // Increased padding from screen edges
+
+            // Horizontal boundary checking
+            if (left + menuWidth > viewportWidth - padding) {
+                left = viewportWidth - menuWidth - padding;
+            }
+            if (left < padding) {
+                left = padding;
+            }
+
+            // Vertical boundary checking with better logic
+            if (top < padding) {
+                top = padding;
+            } else if (top + menuHeight > viewportHeight - padding) {
+                if (openUpward) {
+                    // If opening upward and still doesn't fit, position at top
+                    top = padding;
+                } else {
+                    // If opening downward and doesn't fit, try upward
+                    const upwardTop = rect.top - menuHeight - Math.abs(offset.y) - 2;
+                    if (upwardTop >= padding) {
+                        top = upwardTop;
+                    } else {
+                        // If neither direction fits well, center vertically
+                        top = Math.max(padding, (viewportHeight - menuHeight) / 2);
+                    }
+                }
+            }
+
+            menuStyle.value = {
+                position: "fixed",
+                top: `${Math.round(top)}px`,
+                left: `${Math.round(left)}px`,
+                width: `${Math.round(menuWidth)}px`,
+                zIndex,
+                maxHeight: `${maxHeight}px`
+            };
+        } catch (error) {
+            console.warn("Error calculating dropdown position:", error);
+            // Fallback to basic positioning
+            menuStyle.value = {
+                position: "fixed",
+                top: "0px",
+                left: "0px",
+                width: "200px",
+                zIndex,
+                maxHeight: `${maxHeight}px`
+            };
+        }
+    };
+
+    // Event handlers with ultra-smooth responsiveness using requestAnimationFrame
+    let resizeFrame;
+    const handleResize = () => {
+        if (resizeFrame) {
+            cancelAnimationFrame(resizeFrame);
+        }
+        resizeFrame = requestAnimationFrame(() => {
+            calculateMenuPosition();
+        });
+    };
+
+    let scrollFrame;
+    const handleScroll = () => {
+        if (scrollFrame) {
+            cancelAnimationFrame(scrollFrame);
+        }
+        scrollFrame = requestAnimationFrame(() => {
+            calculateMenuPosition();
+        });
+    };
+
+    // Setup event listeners
+    onMounted(() => {
+        window.addEventListener("resize", handleResize, { passive: true });
+        window.addEventListener("scroll", handleScroll, { passive: true, capture: true });
+    });
+
+    onUnmounted(() => {
+        if (resizeFrame) {
+            cancelAnimationFrame(resizeFrame);
+        }
+        if (scrollFrame) {
+            cancelAnimationFrame(scrollFrame);
+        }
+        window.removeEventListener("resize", handleResize);
+        window.removeEventListener("scroll", handleScroll, true);
+    });
+
+    const updatePosition = () => {
+        nextTick(() => {
+            calculateMenuPosition();
+        });
+    };
+
+    return {
+        menuStyle,
+        updatePosition,
+        calculateMenuPosition
+    };
+}

package/src/libs/Filter.js

@@ -4,11 +4,13 @@ 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 = `path[generaladmission]:hover {fill: ${colors.HIGHLIGHT};pointer-events:all;cursor:pointer;}`;
+const BASE_CSS = `.svg-wrapper path[generaladmission]:hover {fill: ${colors.HIGHLIGHT};pointer-events:all;cursor:pointer;}`;
 
 const getAttributeValue = (element, attributeName) => {
     try {
@@ -179,6 +181,9 @@ export default class FilterBuilder {
         this.reverseSectionNameMapping = {};
         this.getSectionNameMapping = getSectionNameMapping;
         this.updateHooks = [];
+        this.unselectable = [];
+        this.isDragging = false;
+        this.highlightedSeatColor = "#d3f8e2";
     }
 
     onUpdate(fn) {
@@ -187,6 +192,8 @@ export default class FilterBuilder {
 
     setExpandedFilter(f) {
         this.expandedFilter = f;
+        this.updateCss();
+        this.updateHooks.forEach((fn) => fn());
     }
 
     selectFilter(f) {
@@ -227,9 +234,12 @@ export default class FilterBuilder {
 
                 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();
+                    // Toggle expanded state
+                    if (this.expandedFilter === matchingFilter.id) {
+                        this.setExpandedFilter(null);
+                    } else {
+                        this.setExpandedFilter(matchingFilter.id);
+                    }
                     return;
                 }
 
@@ -347,6 +357,7 @@ export default class FilterBuilder {
         this.rows = [];
         if (hard) this.unselectable = [];
         this.updateCss();
+        this.updateHooks.forEach((fn) => fn());
     }
 
     updateCss() {
@@ -368,32 +379,44 @@ export default class FilterBuilder {
 
             const type = this.getFilterType(filter);
 
-            let color = filter.exclude ? colors.EXCLUDED : colors.SELECTED;
-            if (this.expandedFilter === filter.id) color = colors.HIGHLIGHT;
+            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) this.cssClasses += `path[name="${tryFindRealName}"] {fill: ${color} !important}`;
-                        else this.cssClasses += `path[section="${filter.section}"] {stroke: ${color} !important}`;
+                        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) => `path[section="${filter.section}"][row="${row}"] {stroke: ${color} !important}`
+                                (row) => `.svg-wrapper path[section="${filter.section}"][row="${row}"] {stroke: ${color} !important;}`
                             )
-                            ?.join("\n");
+                            .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 += `path[generaladmission] {fill: ${color} !important}`;
+                    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");
+                    // this.cssClasses += floors.map((f) => `path[name="${f}"] {fill: ${color} !important;}`).join("\n") + "\n";
                     break;
 
                 case this.filterTypes.INVALID:
@@ -407,9 +430,10 @@ export default class FilterBuilder {
             const [section, row] = unselectable.split("/");
             log("UpdateCSS: adding unselectable", section, row);
             const color = colors.UNSELECTABLE;
-            this.cssClasses += `path[section="${section}"][row="${row}"] {stroke: ${color} !important} `;
+            this.cssClasses += `.svg-wrapper path[section="${section}"][row="${row}"] {stroke: ${color} !important;}\n`;
         });
-        log(this.cssClasses);
+        
+        log("Generated CSS:", this.cssClasses);
     }
 
     addLabelHandlers() {
@@ -431,9 +455,12 @@ export default class FilterBuilder {
 
                 if (matchingFilter) {
                     log(`Filter for ${section} already exists (${matchingFilter.id})`);
-                    if (this.expandedFilter === matchingFilter.id) this.setExpandedFilter(null);
-                    else this.setExpandedFilter(matchingFilter.id);
-                    this.updateCss();
+                    // Toggle expanded state
+                    if (this.expandedFilter === matchingFilter.id) {
+                        this.setExpandedFilter(null);
+                    } else {
+                        this.setExpandedFilter(matchingFilter.id);
+                    }
                     return;
                 }
 
@@ -483,13 +510,16 @@ export default class FilterBuilder {
             const sectionName = gaSectionNameMapping[section];
 
             path.onclick = () => {
-                // filter exists already for section - return
+                // 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})`);
-                    if (this.expandedFilter === matchingFilter.id) this.setExpandedFilter(null);
-                    else this.setExpandedFilter(matchingFilter.id);
-                    this.updateCss();
+                    // 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);
@@ -506,6 +536,7 @@ export default class FilterBuilder {
         // this.updateHooks = this.updateHooks.filter((i) => id !== i);
         if (this.expandedFilter === id) this.expandedFilter = "";
         this.updateCss();
+        this.updateHooks.forEach((fn) => fn());
     }
 
     replaceById(id, filter) {
@@ -523,6 +554,7 @@ export default class FilterBuilder {
             id: this.filters[index].id
         };
         this.updateCss();
+        this.updateHooks.forEach((fn) => fn());
         return this.filters[index];
     }
 
@@ -542,11 +574,11 @@ export default class FilterBuilder {
 
         if (isGA) {
             if (this.filters.find((f) => f.section === filter.name)) return;
-            newCSS += `path[name="${filter.section || filter.name}"] {fill: ${colors.HIGHLIGHT} !important}`;
+            newCSS += `.svg-wrapper path[name="${filter.section || filter.name}"] {fill: ${colors.HIGHLIGHT} !important}`;
         } else if (filter.row) {
-            newCSS += `path[section="${filter.section}"][row="${filter.row}"] {stroke: ${colors.HIGHLIGHT} !important}`;
+            newCSS += `.svg-wrapper path[section="${filter.section}"][row="${filter.row}"] {stroke: ${colors.HIGHLIGHT} !important}`;
         } else {
-            newCSS += `path[section="${filter.section}"] {stroke: ${colors.HIGHLIGHT} !important}`;
+            newCSS += `.svg-wrapper path[section="${filter.section}"] {stroke: ${colors.HIGHLIGHT} !important}`;
         }
         this.temporaryCSS += newCSS;
     }
@@ -554,4 +586,8 @@ export default class FilterBuilder {
     clearHighlight() {
         this.temporaryCSS = "";
     }
+
+    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 === "production") {
+if (process.env.NODE_ENV != "development") {
     register(`/sw.js`, {
         ready() {
             console.log(

package/src/stores/connection.js

@@ -164,7 +164,7 @@ export class ConnectionHandler {
             }
 
             case "add-account": {
-                const exists = this.ui.accounts.findIndex((p) => p._id === msg.account._id);
+                const exists = this.ui.accounts.findIndex((p) => p.id === msg.account.id);
                 if (exists !== -1) {
                     Object.keys(msg.account).forEach((k) => (this.ui.accounts[exists][k] = msg.account[k]));
                 } else this.ui.accounts.push(msg.account);
@@ -172,7 +172,7 @@ export class ConnectionHandler {
             }
 
             case "add-profile": {
-                const exists = this.ui.profiles.findIndex((p) => p._id === msg.profile._id);
+                const exists = this.ui.profiles.findIndex((p) => p.id === msg.profile.id);
                 if (exists !== -1) {
                     Object.keys(msg.profile).forEach((k) => (this.ui.profiles[exists][k] = msg.profile[k]));
                 } else this.ui.profiles.push(msg.profile);
@@ -180,7 +180,7 @@ export class ConnectionHandler {
             }
 
             case "delete-profile":
-                this.ui.profiles = this.ui.profiles.filter((p) => p._id !== msg.profile._id);
+                this.ui.profiles = this.ui.profiles.filter((p) => p.id !== msg.profile.id);
                 break;
 
             default:
@@ -380,7 +380,7 @@ export class ConnectionHandler {
     sendDeleteProfile(id) {
         this.sendMessage({
             event: "profiles/delete",
-            data: { _id: id }
+            data: { id: id }
         });
     }