@necrolab/dashboard 0.5.15 → 0.5.17

package/src/composables/useNotchHandling.js

@@ -0,0 +1,306 @@
+import { ref, watch, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useDeviceDetection } from './useDeviceDetection';
+import { DEBUG } from '@/utils/debug';
+
+export function useNotchHandling(logger) {
+    const { isIOS, isIpadOS } = useDeviceDetection();
+    const router = useRouter();
+    const showLandscapeLock = ref(false);
+
+    let notchTimeout;
+    let isNotchBusy = false;
+    let lastNotchState = null;
+
+    function isLandscapeMode() {
+        let orientationLandscape = false;
+
+        if (typeof window.orientation !== "undefined") {
+            orientationLandscape = Math.abs(window.orientation) === 90;
+        } else if (screen.orientation && typeof screen.orientation.angle !== "undefined") {
+            orientationLandscape = Math.abs(screen.orientation.angle) === 90;
+        }
+
+        const dimensionLandscape = window.innerWidth > window.innerHeight;
+        const hasStrongLandscapeRatio = window.innerWidth / window.innerHeight > 1.5;
+
+        if (isIOS() && !isIpadOS() && dimensionLandscape && hasStrongLandscapeRatio) {
+            return true;
+        }
+
+        return orientationLandscape || (dimensionLandscape && hasStrongLandscapeRatio);
+    }
+
+    function hasDeviceNotch() {
+        if (!isIOS() || isIpadOS()) return false;
+
+        return (
+            CSS.supports("padding-left: env(safe-area-inset-left)") &&
+            CSS.supports("padding-right: env(safe-area-inset-right)")
+        );
+    }
+
+    function handleNotch(force = false) {
+        if (isNotchBusy && !force) return;
+
+        try {
+            if (!isIOS() || isIpadOS()) return;
+
+            const wrappers = document.querySelectorAll(".ios-wrapper");
+            if (wrappers.length === 0) {
+                setTimeout(() => handleNotch(force), 100);
+                return;
+            }
+
+            const isLandscape = isLandscapeMode();
+            const hasNotch = hasDeviceNotch();
+
+            let orientation = window.orientation;
+            if (typeof orientation === "undefined" && screen.orientation) {
+                orientation = screen.orientation.angle;
+            }
+
+            const currentState = `${isLandscape}-${hasNotch}-${orientation}-${window.innerWidth}x${window.innerHeight}`;
+            if (lastNotchState === currentState && !force) {
+                return;
+            }
+            lastNotchState = currentState;
+
+            isNotchBusy = true;
+
+            if (DEBUG && logger) {
+                logger.Debug("🔥 Notch Debug:", {
+                    isLandscape,
+                    hasNotch,
+                    orientation,
+                    dimensions: `${window.innerWidth}x${window.innerHeight}`,
+                    state: currentState
+                });
+            }
+
+            if (hasNotch && isLandscape) {
+                const testDiv = document.createElement("div");
+                testDiv.style.position = "fixed";
+                testDiv.style.top = "0";
+                testDiv.style.left = "0";
+                testDiv.style.visibility = "hidden";
+                testDiv.style.paddingLeft = "env(safe-area-inset-left)";
+                testDiv.style.paddingRight = "env(safe-area-inset-right)";
+                document.body.appendChild(testDiv);
+
+                const computedStyle = getComputedStyle(testDiv);
+                const leftInset = parseFloat(computedStyle.paddingLeft) || 0;
+                const rightInset = parseFloat(computedStyle.paddingRight) || 0;
+
+                document.body.removeChild(testDiv);
+
+                if (DEBUG && logger) logger.Debug("🔍 Safe area insets:", { leftInset, rightInset });
+
+                wrappers.forEach((wrapper) => {
+                    if (leftInset > 0) {
+                        wrapper.style.paddingLeft = "env(safe-area-inset-left)";
+                        wrapper.style.paddingRight = "0.5rem";
+                    } else if (rightInset > 0) {
+                        wrapper.style.paddingLeft = "0.5rem";
+                        wrapper.style.paddingRight = "env(safe-area-inset-right)";
+                    } else {
+                        wrapper.style.paddingLeft = "0.5rem";
+                        wrapper.style.paddingRight = "0.5rem";
+                    }
+                });
+            } else {
+                const RESPONSIVE_PADDING = {
+                    XL: { minWidth: 1280, padding: "2.5rem" },
+                    LG: { minWidth: 1030, padding: "1.5rem" },
+                    MD: { minWidth: 768, padding: "0.5rem" },
+                    DEFAULT: { padding: "0.5rem" }
+                };
+
+                const padding =
+                    window.innerWidth > RESPONSIVE_PADDING.XL.minWidth
+                        ? RESPONSIVE_PADDING.XL.padding
+                        : window.innerWidth > RESPONSIVE_PADDING.LG.minWidth
+                        ? RESPONSIVE_PADDING.LG.padding
+                        : window.innerWidth > RESPONSIVE_PADDING.MD.minWidth
+                        ? RESPONSIVE_PADDING.MD.padding
+                        : RESPONSIVE_PADDING.DEFAULT.padding;
+
+                wrappers.forEach((wrapper) => {
+                    wrapper.style.paddingLeft = padding;
+                    wrapper.style.paddingRight = padding;
+                });
+            }
+
+            isNotchBusy = false;
+        } catch (error) {
+            if (DEBUG && logger) logger.Yellow("Notch error:", error);
+            isNotchBusy = false;
+        }
+    }
+
+    function triggerNotch() {
+        clearTimeout(notchTimeout);
+        notchTimeout = setTimeout(handleNotch, 50);
+    }
+
+    function updateLandscapeLock() {
+        if (isIOS() && !isIpadOS()) {
+            showLandscapeLock.value = isLandscapeMode();
+        }
+    }
+
+    function initNotchHandling() {
+        handleNotch(true);
+        setTimeout(() => handleNotch(true), 50);
+        setTimeout(() => handleNotch(true), 150);
+        setTimeout(() => handleNotch(true), 300);
+        setTimeout(() => handleNotch(true), 500);
+        setTimeout(() => handleNotch(true), 1000);
+        setTimeout(() => handleNotch(true), 2000);
+    }
+
+    // Event listeners
+    window.addEventListener("orientationchange", () => {
+        updateLandscapeLock();
+        triggerNotch();
+    });
+
+    window.addEventListener("resize", () => {
+        updateLandscapeLock();
+        triggerNotch();
+    });
+
+    if (screen.orientation) {
+        screen.orientation.addEventListener("change", triggerNotch);
+    }
+
+    // Multiple initialization points
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", initNotchHandling);
+    } else {
+        initNotchHandling();
+    }
+
+    window.addEventListener("load", initNotchHandling);
+
+    document.addEventListener("visibilitychange", () => {
+        if (!document.hidden) {
+            setTimeout(handleNotch, 100);
+        }
+    });
+
+    window.addEventListener("focus", () => {
+        setTimeout(handleNotch, 100);
+    });
+
+    // Watch for ios-wrapper elements appearing in DOM
+    const observer = new MutationObserver((mutations) => {
+        let shouldTrigger = false;
+
+        mutations.forEach((mutation) => {
+            if (mutation.type === "childList") {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        if (node.classList?.contains("ios-wrapper") || node.querySelector?.(".ios-wrapper")) {
+                            shouldTrigger = true;
+                        }
+                    }
+                });
+            }
+        });
+
+        if (shouldTrigger) {
+            setTimeout(() => handleNotch(true), 10);
+            setTimeout(() => handleNotch(true), 100);
+        }
+    });
+
+    if (document.body) {
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+    } else {
+        document.addEventListener("DOMContentLoaded", () => {
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        });
+    }
+
+    // Navigation handling
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+
+    history.pushState = function (...args) {
+        originalPushState.apply(this, args);
+        triggerNotch();
+    };
+
+    history.replaceState = function (...args) {
+        originalReplaceState.apply(this, args);
+        triggerNotch();
+    };
+
+    window.addEventListener("popstate", triggerNotch);
+
+    // Expose for manual triggering
+    window.simulateRotate = handleNotch;
+
+    // Initial landscape lock check
+    updateLandscapeLock();
+
+    // Vue-specific watchers
+    onMounted(() => {
+        let attempts = 0;
+        const maxAttempts = 5;
+        const delays = [0, 50, 150, 300, 500];
+
+        const scheduleNextAttempt = (index) => {
+            if (index >= maxAttempts) return;
+            setTimeout(() => {
+                handleNotch();
+                scheduleNextAttempt(index + 1);
+            }, delays[index]);
+        };
+
+        scheduleNextAttempt(0);
+    });
+
+    if (router) {
+        watch(
+            () => router.currentRoute.value.name,
+            () => {
+                handleNotch();
+                triggerNotch();
+
+                setTimeout(handleNotch, 10);
+                setTimeout(handleNotch, 50);
+                setTimeout(handleNotch, 150);
+                setTimeout(handleNotch, 300);
+                setTimeout(handleNotch, 500);
+            }
+        );
+
+        watch(
+            () => router.currentRoute.value.path,
+            () => {
+                handleNotch();
+                triggerNotch();
+
+                setTimeout(handleNotch, 25);
+                setTimeout(handleNotch, 100);
+                setTimeout(handleNotch, 250);
+            }
+        );
+    }
+
+    return {
+        showLandscapeLock,
+        handleNotch,
+        triggerNotch,
+        updateLandscapeLock,
+        isLandscapeMode
+    };
+}

package/src/composables/useRowSelection.js

@@ -12,7 +12,6 @@ export function useRowSelection(toggleCallback) {
   const DOUBLE_TAP_DELAY = 300
 
   const handleDoubleClick = (event) => {
-    // Don't trigger on button or checkbox clicks
     if (event.target.closest('button') || event.target.closest('.checkbox')) {
       return
     }
@@ -24,7 +23,6 @@ export function useRowSelection(toggleCallback) {
     const tapGap = currentTime - lastTapTime
 
     if (tapGap < DOUBLE_TAP_DELAY && tapGap > 0) {
-      // Don't trigger on button or checkbox taps
       if (!event.target.closest('button') && !event.target.closest('.checkbox')) {
         event.preventDefault()
         toggleCallback()
@@ -34,7 +32,6 @@ export function useRowSelection(toggleCallback) {
   }
 
   const handleTouchEnd = (event) => {
-    // Prevent default touch behavior on buttons/checkboxes
     if (event.target.closest('button') || event.target.closest('.checkbox')) {
       return
     }

package/src/composables/useTableRender.js

@@ -0,0 +1,23 @@
+import { ref, computed } from 'vue';
+
+export function useTableRender(items) {
+    const i = ref({});
+
+    const toRender = computed(() => {
+        let c = 0;
+        const rendered = items.value.map((t) => ({ ...t, index: c++ }));
+
+        rendered.forEach((t) => {
+            if (t.id && !(t.id in i.value)) {
+                i.value[t.id] = 0;
+            }
+            if (!(t.index in i.value)) {
+                i.value[t.index] = 0;
+            }
+        });
+
+        return rendered;
+    });
+
+    return { toRender };
+}

package/src/composables/useTicketPricing.js

@@ -0,0 +1,16 @@
+export function useTicketPricing() {
+    const isTotalPrice = (line, index, lines) => {
+        const trimmed = line.trim();
+        if (!trimmed) return false;
+
+        const nonEmptyLines = lines.filter(l => l.trim());
+        const isLastLine = index === lines.lastIndexOf(nonEmptyLines[nonEmptyLines.length - 1]);
+
+        if (!isLastLine) return false;
+
+        const totalPricePattern = /^([$€£¥₹₽¢]|[A-Z]{3})\s*[\d,]+\.?\d*$/;
+        return totalPricePattern.test(trimmed) && !trimmed.includes('(') && !trimmed.includes(')');
+    };
+
+    return { isTotalPrice };
+}

package/src/composables/useWindowDimensions.js

@@ -0,0 +1,21 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+export function useWindowDimensions() {
+    const windowHeight = ref(window.innerHeight);
+    const windowWidth = ref(window.innerWidth);
+
+    const updateDimensions = () => {
+        windowHeight.value = window.innerHeight;
+        windowWidth.value = window.innerWidth;
+    };
+
+    onMounted(() => {
+        window.addEventListener("resize", updateDimensions);
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener("resize", updateDimensions);
+    });
+
+    return { windowHeight, windowWidth };
+}

package/src/composables/useZoomPrevention.js

@@ -0,0 +1,96 @@
+export function useZoomPrevention() {
+    const KEY_CODES = {
+        ESCAPE: 27,
+        EQUAL: 61,
+        NUMPAD_PLUS: 107,
+        FIREFOX_MINUS: 173,
+        NUMPAD_MINUS: 109,
+        CHROME_EQUAL: 187,
+        MINUS: 189
+    };
+
+    // Prevent pinch-to-zoom gestures
+    document.addEventListener('touchstart', (e) => {
+        if (e.touches.length > 1) {
+            e.preventDefault();
+        }
+    }, { passive: false });
+
+    document.addEventListener('touchmove', (e) => {
+        if (e.touches.length > 1) {
+            e.preventDefault();
+        }
+    }, { passive: false });
+
+    document.addEventListener('gesturestart', (e) => {
+        e.preventDefault();
+    }, { passive: false });
+
+    document.addEventListener('gesturechange', (e) => {
+        e.preventDefault();
+    }, { passive: false });
+
+    document.addEventListener('gestureend', (e) => {
+        e.preventDefault();
+    }, { passive: false });
+
+    // Prevent double-tap zoom
+    let lastTouchEnd = 0;
+    document.addEventListener('touchend', (e) => {
+        const now = Date.now();
+        if (now - lastTouchEnd <= 300) {
+            e.preventDefault();
+        }
+        lastTouchEnd = now;
+    }, { passive: false });
+
+    // Prevent ALL keyboard zoom combinations
+    document.addEventListener("keydown", function (event) {
+        if (
+            (event.ctrlKey || event.metaKey) &&
+            (event.which === KEY_CODES.EQUAL ||
+                event.which === KEY_CODES.NUMPAD_PLUS ||
+                event.which === KEY_CODES.FIREFOX_MINUS ||
+                event.which === KEY_CODES.NUMPAD_MINUS ||
+                event.which === KEY_CODES.CHROME_EQUAL ||
+                event.which === KEY_CODES.MINUS ||
+                event.keyCode === KEY_CODES.EQUAL ||
+                event.keyCode === KEY_CODES.NUMPAD_PLUS ||
+                event.keyCode === KEY_CODES.FIREFOX_MINUS ||
+                event.keyCode === KEY_CODES.NUMPAD_MINUS ||
+                event.keyCode === KEY_CODES.CHROME_EQUAL ||
+                event.keyCode === KEY_CODES.MINUS ||
+                event.key === '+' ||
+                event.key === '-' ||
+                event.key === '=' ||
+                event.key === '0')
+        ) {
+            event.preventDefault();
+        }
+    }, { passive: false });
+
+    // Prevent Ctrl/Cmd + Mouse wheel zoom (desktop)
+    document.addEventListener("wheel", function (event) {
+        if (event.ctrlKey || event.metaKey) {
+            event.preventDefault();
+        }
+    }, { passive: false });
+
+    // Also block mousewheel for older browsers
+    document.addEventListener("mousewheel", function (event) {
+        if (event.ctrlKey || event.metaKey) {
+            event.preventDefault();
+        }
+    }, { passive: false });
+
+    // Block DOMMouseScroll for Firefox
+    document.addEventListener("DOMMouseScroll", function (event) {
+        if (event.ctrlKey || event.metaKey) {
+            event.preventDefault();
+        }
+    }, { passive: false });
+
+    return {
+        KEY_CODES
+    };
+}

package/src/constants/tableLayout.js

@@ -0,0 +1,14 @@
+export const TABLE_LAYOUT = {
+    PROFILES: {
+        TOP_RESERVED_SPACE: 180,
+        BOTTOM_BUFFER: 40,
+        ROW_HEIGHT: 64,
+        MIN_ROWS_TO_SHOW: 2
+    },
+    ACCOUNTS: {
+        TOP_RESERVED_SPACE: 180,
+        BOTTOM_BUFFER: 50,
+        ROW_HEIGHT: 64,
+        MIN_ROWS_TO_SHOW: 2
+    }
+};

package/src/libs/Filter.js

@@ -1,5 +1,5 @@
-const debug = false;
-const log = (...args) => debug && console.log("[filter]", ...args);
+import { DEBUG } from "@/utils/debug";
+const log = (...args) => DEBUG && console.log("[filter]", ...args);
 
 const colors = {
     HIGHLIGHT: "#d3f8e2",
@@ -30,27 +30,23 @@ const isWheelchair = (p) => {
 };
 
 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);
+    const reA = /[^a-zA-Z]/g;
+    const reN = /[^0-9]/g;
+    const AInt = parseInt(a, 10);
+    const BInt = parseInt(b, 10);
 
     if (isNaN(AInt) && isNaN(BInt)) {
-        var aA = a.replace(reA, "");
-        var bA = b.replace(reA, "");
+        const aA = a.replace(reA, "");
+        const bA = b.replace(reA, "");
         if (aA === bA) {
-            var aN = parseInt(a.replace(reN, ""), 10);
-            var bN = parseInt(b.replace(reN, ""), 10);
+            const aN = parseInt(a.replace(reN, ""), 10);
+            const 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
+        return -1;
     } else {
         return AInt > BInt ? 1 : -1;
     }
@@ -313,7 +309,7 @@ export default class FilterBuilder {
         });
 
         if (existingFilter) {
-            console.log("Filter already exists:", existingFilter);
+            if (DEBUG) log("Filter already exists:", existingFilter);
             return; // Don't add the filter if it already exists
         }
 
@@ -385,7 +381,7 @@ export default class FilterBuilder {
             } else {
                 color = this.expandedFilter === filter.id ? colors.SELECTED_EXPANDED : colors.SELECTED;
             }
-            
+
             switch (type) {
                 case this.filterTypes.NORMAL:
                     // If it has no 'rows' property
@@ -416,7 +412,6 @@ export default class FilterBuilder {
                     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:
@@ -432,7 +427,7 @@ export default class FilterBuilder {
             const color = colors.UNSELECTABLE;
             this.cssClasses += `.svg-wrapper path[section="${section}"][row="${row}"] {stroke: ${color} !important;}\n`;
         });
-        
+
         log("Generated CSS:", this.cssClasses);
     }
 
@@ -533,7 +528,6 @@ export default class FilterBuilder {
 
     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());

package/src/libs/panzoom.js

@@ -1,7 +1,6 @@
 export default (function (f) {
     const panzoom = f();
     window.panzoom = panzoom;
-    // module.exports = panzoom;
     return panzoom;
 })(function () {
     var define, module, exports;
@@ -718,7 +717,6 @@ export default (function (f) {
                         failTransformOrigin();
                     }
                     function failTransformOrigin(options) {
-                        console.error(options);
                         throw new Error(
                             [
                                 "Cannot parse transform origin.",
@@ -783,7 +781,6 @@ export default (function (f) {
                                     setTimeout(tryAttach, 100);
                                     return;
                                 }
-                                console.error("Cannot find the panzoom element", globalName);
                                 return;
                             }
                             var options = collectOptions(panzoomScript);
@@ -1107,8 +1104,7 @@ export default (function (f) {
                         var easing = typeof options.easing === "function" ? options.easing : animations[options.easing];
                         if (!easing) {
                             if (options.easing) {
-                                console.warn("Unknown easing function in amator: " + options.easing);
-                            }
+                                }
                             easing = animations.ease;
                         }
                         var step = typeof options.step === "function" ? options.step : noop;

package/src/libs/utils/array.js

@@ -0,0 +1,58 @@
+const removeDuplicates = (arr) => [...new Set(arr)];
+
+function betterSort(a, b) {
+    if (a === undefined || a === null) return b === undefined || b === null ? 0 : -1;
+    if (b === undefined || b === null) return 1;
+
+    const aStr = String(a);
+    const bStr = String(b);
+
+    if (!isNaN(aStr) && !isNaN(bStr)) {
+        return Number(aStr) - Number(bStr);
+    }
+
+    const aParts = aStr.split(/(\d+)/).filter(Boolean);
+    const bParts = bStr.split(/(\d+)/).filter(Boolean);
+
+    const len = Math.min(aParts.length, bParts.length);
+    for (let i = 0; i < len; i++) {
+        if (!isNaN(aParts[i]) && !isNaN(bParts[i])) {
+            const numA = parseInt(aParts[i], 10);
+            const numB = parseInt(bParts[i], 10);
+            if (numA !== numB) return numA - numB;
+        } else {
+            const cmp = aParts[i].localeCompare(bParts[i]);
+            if (cmp !== 0) return cmp;
+        }
+    }
+
+    return aParts.length - bParts.length;
+}
+
+function sortTaskIds(a, b) {
+    const parseId = (id) => {
+        if (!id) return { prefix: "", num: -1 };
+
+        if (/^\d+$/.test(id)) {
+            return { prefix: "", num: parseInt(id, 10) };
+        }
+
+        const match = id.match(/^([A-Za-z-]+)(\d+)$/);
+        if (match) {
+            return { prefix: match[1], num: parseInt(match[2], 10) };
+        }
+
+        return { prefix: id, num: -1 };
+    };
+
+    const aInfo = parseId(a);
+    const bInfo = parseId(b);
+
+    if (aInfo.prefix !== bInfo.prefix) {
+        return aInfo.prefix.localeCompare(bInfo.prefix);
+    }
+
+    return aInfo.num - bInfo.num;
+}
+
+export { removeDuplicates, betterSort, sortTaskIds };