@necrolab/dashboard 0.5.21 → 0.5.23

package/src/libs/tm-renderer/utils.js

@@ -0,0 +1,90 @@
+const manipulateHexColor = (p, c0, c1, l) => {
+    let r,
+        g,
+        b,
+        P,
+        f,
+        t,
+        h,
+        i = parseInt,
+        m = Math.round,
+        a = typeof c1 == "string";
+    if (
+        typeof p != "number" ||
+        p < -1 ||
+        p > 1 ||
+        typeof c0 != "string" ||
+        (c0[0] != "r" && c0[0] != "#") ||
+        (c1 && !a)
+    )
+        return null;
+    if (!this.pSBCr)
+        this.pSBCr = (d) => {
+            let n = d.length,
+                x = {};
+            if (n > 9) {
+                ([r, g, b, a] = d = d.split(",")), (n = d.length);
+                if (n < 3 || n > 4) return null;
+                (x.r = i(r[3] == "a" ? r.slice(5) : r.slice(4))),
+                    (x.g = i(g)),
+                    (x.b = i(b)),
+                    (x.a = a ? parseFloat(a) : -1);
+            } else {
+                if (n == 8 || n == 6 || n < 4) return null;
+                if (n < 6) d = "#" + d[1] + d[1] + d[2] + d[2] + d[3] + d[3] + (n > 4 ? d[4] + d[4] : "");
+                d = i(d.slice(1), 16);
+                if (n == 9 || n == 5)
+                    (x.r = (d >> 24) & 255),
+                        (x.g = (d >> 16) & 255),
+                        (x.b = (d >> 8) & 255),
+                        (x.a = m((d & 255) / 0.255) / 1000);
+                else (x.r = d >> 16), (x.g = (d >> 8) & 255), (x.b = d & 255), (x.a = -1);
+            }
+            return x;
+        };
+    (h = c0.length > 9),
+        (h = a ? (c1.length > 9 ? true : c1 == "c" ? !h : false) : h),
+        (f = this.pSBCr(c0)),
+        (P = p < 0),
+        (t = c1 && c1 != "c" ? this.pSBCr(c1) : P ? { r: 0, g: 0, b: 0, a: -1 } : { r: 255, g: 255, b: 255, a: -1 }),
+        (p = P ? p * -1 : p),
+        (P = 1 - p);
+    if (!f || !t) return null;
+    if (l) (r = m(P * f.r + p * t.r)), (g = m(P * f.g + p * t.g)), (b = m(P * f.b + p * t.b));
+    else
+        (r = m((P * f.r ** 2 + p * t.r ** 2) ** 0.5)),
+            (g = m((P * f.g ** 2 + p * t.g ** 2) ** 0.5)),
+            (b = m((P * f.b ** 2 + p * t.b ** 2) ** 0.5));
+    (a = f.a), (t = t.a), (f = a >= 0 || t >= 0), (a = f ? (a < 0 ? t : t < 0 ? a : a * P + t * p) : 0);
+    if (h) return "rgb" + (f ? "a(" : "(") + r + "," + g + "," + b + (f ? "," + m(a * 1000) / 1000 : "") + ")";
+    else
+        return (
+            "#" +
+            (4294967296 + r * 16777216 + g * 65536 + b * 256 + (f ? m(a * 255) : 0))
+                .toString(16)
+                .slice(1, f ? undefined : -2)
+        );
+};
+
+const pinIcon = `
+    <g>
+    <path d="m 0,0 c -1.25,1.34 -2,3.3 -2,5.14 0,3.85 1.8,5.3 4.56,10.6 1,2.32 2,4.8 3,8.89 0.137,0.6 0.27,1.16 0.33,1.2 0,0 0.2,-0.51 0.33,-1.11 1,-4 2,-6.54 3,-8.87 2.77,-5.3 4.5,-6.75 4.56,-10.6 0,-1.83 -0.75,-3.8 -2,-5.14 -1.43,-1.53 -3.6,-2.66 -5.9,-2.71 -2.31,0 -4.5,1 -5.92,2.62 z" style="display:inline;opacity:1;fill:#ff4646;fill-opacity:1;stroke:#d73534;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"></path>
+    <circle r="3.5" cy="5.3" cx="5.7" style="display:inline;opacity:1;fill:#590000;fill-opacity:1;stroke-width:0"></circle>
+    </g>
+`;
+
+const marshalAttributes = (attrs) => {
+    let out = [];
+    Object.entries(attrs).forEach(([k, v]) => k && v && out.push(`${k}="${v}"`));
+    return out.join(" ");
+};
+
+export const createElement = (tag, attrs, body = "") => `<${tag} ${marshalAttributes(attrs)}>${body}</${tag}>\n`;
+export { manipulateHexColor };
+export { pinIcon };
+export const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+export const binder = (functionsObject, thisClass) => {
+    for (let [functionKey, functionValue] of Object.entries(functionsObject)) {
+        thisClass[functionKey] = functionValue.bind(thisClass);
+    }
+};

package/src/views/FilterBuilder.vue

@@ -1,18 +1,19 @@
 <template>
     <div class="flex w-full flex-col">
-        <div class="page-header">
+        <div class="page-header flex-wrap gap-3">
             <div class="page-header-card flex-shrink-0">
                 <FilterIcon />
                 <h4>Filter creator</h4>
             </div>
-            <div class="unified-search-group flex w-auto items-center">
+            <div class="unified-search-group flex w-full flex-1 items-center md:w-auto md:flex-initial md:min-w-64">
                 <input
-                    class="h-10 w-32 flex-1 px-3 text-sm text-white placeholder-light-500 sm:w-48 md:w-64"
+                    class="flex-1 h-10 px-3 text-sm text-white placeholder-light-500"
                     placeholder="Event ID"
                     v-model="eventId"
                     aria-label="Event ID" />
                 <button
-                    class="transition-standard hover:bg-dark-450 flex h-10 w-9 flex-shrink-0 items-center justify-center bg-dark-400 text-white"
+                    class="hover:bg-dark-450 flex h-10 w-10 flex-shrink-0 items-center justify-center bg-dark-400 text-white"
+                    style="transition: all 0.2s ease"
                     @click="updateShownVenue"
                     aria-label="Load venue">
                     <ReloadIcon class="icon-md" />
@@ -21,26 +22,29 @@
         </div>
 
         <div
-            class="mb-3 flex flex-1 flex-col overflow-hidden rounded border border-dark-650 bg-dark-400 p-3 shadow-sm md:mb-4">
-            <div class="flex h-full w-full flex-col gap-3 lg:flex-row lg:gap-4">
+            class="mb-3 flex flex-1 flex-col overflow-hidden rounded border border-dark-650 bg-dark-400 p-2 shadow-sm md:p-3 md:mb-4"
+            style="max-height: calc(100vh - 200px);">
+            <div class="flex h-full w-full flex-col gap-2 md:gap-3 lg:flex-row lg:gap-4">
                 <div
-                    class="min-h-75 lg:min-h-125 relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg lg:w-3/5">
-                    <div v-if="svg" class="flex-gap-2 mb-2 items-center">
+                    class="relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg lg:flex-1 lg:w-3/5 svg-container"
+                    :class="{ 'has-svg': svg }">
+                    <div v-if="svg" class="flex-gap-2 mb-2 flex-shrink-0 items-center">
                         <button @click="handleZoom(true)" class="btn-icon-small" aria-label="Zoom in">+</button>
                         <button @click="handleZoom(false)" class="btn-icon-small" aria-label="Zoom out">-</button>
                         <button @click="handleZoom('r')" class="btn-icon-small" aria-label="Reset zoom">
                             <ReloadIcon class="icon-md text-white" />
                         </button>
                     </div>
-                    <div class="selecto-wrapper flex-1 overflow-hidden">
+                    <div class="selecto-wrapper flex-1 overflow-hidden" style="max-height: 100%;">
                         <div
                             v-if="svg"
-                            class="hidden-scrollbars min-h-87.5 relative h-full w-full overflow-auto rounded border border-dark-550 bg-dark-500 p-2 shadow">
+                            class="hidden-scrollbars relative h-full w-full overflow-auto rounded border border-dark-550 bg-dark-500 p-1 md:p-2 shadow">
                             <div class="svg-wrapper" id="svg-wrapper" v-html="svg"></div>
                         </div>
                         <div
                             v-else
-                            class="min-h-87.5 relative flex h-full w-full items-center justify-center rounded border border-dark-550 bg-dark-500 p-2 shadow">
+                            class="relative flex h-full w-full items-center justify-center rounded border border-dark-550 bg-dark-500 p-2 shadow"
+                            style="min-height: 200px;">
                             <div class="text-center">
                                 <FilterIcon class="empty-state-icon mx-auto" />
                                 <p class="text-sm text-light-400">No Map</p>
@@ -51,8 +55,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="min-h-75 lg:min-h-125 flex w-full min-w-0 flex-col lg:w-2/5">
-                    <div class="mb-2 flex flex-shrink-0 flex-wrap items-center gap-2 text-white" v-if="hasLoaded">
+                <div class="flex w-full min-w-0 flex-col lg:flex-1 lg:w-2/5 filters-container">
+                    <div class="mb-2 flex flex-shrink-0 flex-wrap items-center gap-1.5 md:gap-2 text-white text-xs md:text-sm" v-if="hasLoaded">
                         <PriceSortToggle
                             :current="filterBuilder.globalFilter.priceSort"
                             class="smooth-hover h-8"
@@ -71,8 +75,8 @@
                             placeholder="999" />
                     </div>
                     <div
-                        class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-dark-550 bg-dark-500 shadow-sm">
-                        <div class="flex-shrink-0 border-b border-dark-550 bg-dark-300 px-4 py-3 text-xs text-white">
+                        class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-dark-550 bg-dark-500 shadow-sm filters-card">
+                        <div class="flex-shrink-0 border-b border-dark-550 bg-dark-300 px-2 md:px-4 py-2 md:py-3 text-xs text-white">
                             <div class="flex w-full items-center justify-between gap-2">
                                 <div class="flex-gap-2 items-center">
                                     <span class="text-sm font-medium text-white">Filters</span>
@@ -98,26 +102,21 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="hidden-scrollbars flex-1 overflow-auto bg-dark-400">
-                            <draggable
+                        <div class="hidden-scrollbars flex-1 overflow-y-auto overflow-x-hidden bg-dark-400" style="max-height: 100%; min-height: 150px;">
+                            <div
                                 v-if="filterBuilder.filters.length"
-                                v-model="draggableFilters"
-                                handle=".handle"
-                                item-key="id"
-                                tag="div"
-                                class="space-y-0 p-1"
-                                ghost-class="opacity-30 border border-dark-550 bg-dark-550/10"
-                                drag-class="z-50 shadow-xl"
-                                :animation="200">
-                                <template #item="{ element: f, index: i }">
-                                    <Filter
-                                        v-show="doesFilterShow(f)"
-                                        :filter="f"
-                                        :index="i"
-                                        :filterBuilder="filterBuilder"
-                                        class="!p-1 !text-xs" />
-                                </template>
-                            </draggable>
+                                ref="filtersListRef"
+                                class="space-y-0 p-1">
+                                <Filter
+                                    v-for="(f, i) in filterBuilder.filters"
+                                    v-show="doesFilterShow(f)"
+                                    :key="f.id"
+                                    :filter="f"
+                                    :index="i"
+                                    :filterBuilder="filterBuilder"
+                                    :color="getFilterColor(i)"
+                                    class="!p-1 !text-xs" />
+                            </div>
                             <div v-else class="empty-state flex flex-col items-center justify-center py-8 text-center">
                                 <FilterIcon class="empty-state-icon" />
                                 <p class="text-sm text-light-400">No filters yet</p>
@@ -129,9 +128,10 @@
                         <button
                             @click="addWildcardFilter"
                             :disabled="hasWildcardFilter"
-                            class="filter-wildcard-btn"
+                            class="filter-action-btn"
                             :title="hasWildcardFilter ? 'Wildcard filter already exists' : 'Add wildcard filter'">
-                            * Wildcard
+                            <WildcardIcon class="h-3 w-3 flex-shrink-0" />
+                            <span>* Wildcard</span>
                         </button>
                         <button @click="ui.toggleModal('preview-filter')" class="filter-action-btn">
                             <CameraIcon class="h-3 w-3" />
@@ -149,17 +149,19 @@
 </template>
 
 <script setup>
-import draggable from "vuedraggable";
-import { ref, computed, defineAsyncComponent, watch, nextTick } from "vue";
+import Draggable from "vuedraggable";
+import Sortable from "sortablejs";
+import { ref, computed, defineAsyncComponent, watch, nextTick, onMounted } from "vue";
 import { useFilterCSS } from "@/composables/useFilterCSS";
 import Filter from "@/components/Filter/Filter.vue";
-import { FilterIcon } from "@/components/icons";
+import { FilterIcon, WildcardIcon } from "@/components/icons";
 import { ReloadIcon, TrashIcon, EditIcon, CameraIcon } from "@/components/icons";
 import { sendSaveFilter } from "@/stores/requests";
 import PriceSortToggle from "@/components/Filter/PriceSortToggle.vue";
 import { useUIStore } from "@/stores/ui";
 import FilterBuilder from "@/libs/Filter";
 import panzoom from "@/libs/panzoom.js";
+import RendererFactory from "@/libs/tm-renderer/index.js";
 
 // Lazy-loaded modal component
 const FilterPreview = defineAsyncComponent(() => import("@/components/Filter/FilterPreview.vue"));
@@ -190,6 +192,35 @@ const draggableFilters = computed({
     get: () => filterBuilder.value.filters,
     set: (value) => {
         filterBuilder.value.filters = value;
+        filterBuilder.value.updateCss();
+        filterBuilder.value.updateHooks.forEach((fn) => fn());
+    }
+});
+
+const filtersListRef = ref(null);
+let sortableInstance = null;
+
+// Initialize Sortable on the filters list
+watch(filtersListRef, (el) => {
+    if (el && !sortableInstance) {
+        sortableInstance = new Sortable(el, {
+            handle: '.handle',
+            animation: 200,
+            ghostClass: 'sortable-ghost',
+            dragClass: 'sortable-drag',
+            onEnd: (evt) => {
+                const { oldIndex, newIndex } = evt;
+                if (oldIndex !== newIndex) {
+                    // Reorder the filters array
+                    const filters = [...filterBuilder.value.filters];
+                    const [movedItem] = filters.splice(oldIndex, 1);
+                    filters.splice(newIndex, 0, movedItem);
+                    filterBuilder.value.filters = filters;
+                    filterBuilder.value.updateCss();
+                    filterBuilder.value.updateHooks.forEach((fn) => fn());
+                }
+            }
+        });
     }
 });
 
@@ -205,8 +236,6 @@ const addWildcardFilter = () => {
     }
 };
 
-let RendererFactory = import("@necrolab/tm-renderer");
-
 useFilterCSS(filterBuilder, svg);
 
 const doesFilterShow = (filter) => {
@@ -216,13 +245,30 @@ const doesFilterShow = (filter) => {
     return shownFilters.value === filterState;
 };
 
-let rendererFactory;
-RendererFactory.then((r) => {
-    rendererFactory = new r.default();
-    rendererFactory.init();
-}).catch((error) => {
-    ui.logger.Error("Failed to initialize renderer:", error);
-});
+// Color palette for unique filter colors (same as Filter.js)
+const filterColorPalette = [
+    "#7bc999", "#6ba8d6", "#d4a876", "#a88bc9", "#e89ba3",
+    "#7dc9c9", "#c9a87b", "#8bc99a", "#9ba8c9", "#c9b88b"
+];
+
+const getFilterColor = (index) => {
+    return filterColorPalette[index % filterColorPalette.length];
+};
+
+// Initialize renderer factory
+const rendererFactory = new RendererFactory();
+let rendererReady = false;
+
+// Initialize renderer and mark as ready
+(async () => {
+    try {
+        await rendererFactory.init();
+        rendererReady = true;
+        ui.logger.Info("Renderer initialized successfully");
+    } catch (error) {
+        ui.logger.Error("Failed to initialize renderer:", error);
+    }
+})();
 
 const updateShownVenue = async () => {
     eventId.value = eventId.value.trim();
@@ -254,19 +300,26 @@ const updateShownVenue = async () => {
     }
 
     try {
-        if (!rendererFactory) {
-            ui.showError("Renderer not initialized yet. Please wait and try again.");
+        if (!rendererFactory || !rendererReady) {
+            ui.showError("Renderer not initialized yet. Please wait a moment and try again.");
             return;
         }
 
+        ui.logger.Info(`Creating renderer for event ${eventId.value} with country: ${country}`);
+
         renderer = rendererFactory.createRenderer(eventId.value, {
             proxy: "",
             country: country,
-            seatColor: "#0557ae",
-            nonAvSeatColor: "#dadcde",
-            highlightedSeatColor: "#d0006f"
+            seatColor: "#b8e6d5",
+            nonAvSeatColor: "#707070",
+            highlightedSeatColor: "#7bc999"
         });
 
+        if (!renderer) {
+            throw new Error("Failed to create renderer instance");
+        }
+
+        ui.logger.Info("Renderer created, setting config...");
         filterBuilder.value.highlightedSeatColor = renderer.config.highlightedSeatColor;
         renderer.setCustomConfig({
             logFullError: true,
@@ -274,20 +327,46 @@ const updateShownVenue = async () => {
             renderRowBlocks: true
         });
 
+        ui.logger.Info("Starting render...");
         await renderer.render();
-        svg.value = renderer.svg;
-
-        if (!svg.value) {
-            throw new Error("Renderer returned empty SVG");
+        ui.logger.Info("Render completed");
+
+        // Add extra validation
+        if (!renderer.svg || renderer.svg.trim() === '') {
+            ui.logger.Error("Renderer SVG is empty or null:", {
+                hasSvg: !!renderer.svg,
+                svgLength: renderer.svg?.length,
+                country,
+                eventId: eventId.value
+            });
+            throw new Error(`Renderer returned empty SVG. Country: ${country}, EventID: ${eventId.value}`);
         }
+
+        ui.logger.Info(`SVG generated successfully, length: ${renderer.svg.length}`);
+        svg.value = renderer.svg;
     } catch (e) {
         ui.logger.Error("COULD NOT RENDER SVG", e);
+        ui.logger.Error("Error details:", {
+            message: e?.message,
+            stack: e?.stack,
+            name: e?.name,
+            cause: e?.cause,
+            renderer: !!renderer,
+            rendererFactory: !!rendererFactory,
+            rendererReady,
+            userAgent: navigator.userAgent
+        });
+
         const errorMsg = e?.message || "Unknown rendering error";
         ui.showError(`Failed to render venue: ${errorMsg}`);
 
         // Try to load existing filter even if rendering fails
-        await loadFilter();
-        filterBuilder.value.reload(eventId.value);
+        try {
+            await loadFilter();
+            filterBuilder.value.reload(eventId.value);
+        } catch (loadErr) {
+            ui.logger.Error("Could not load filter either", loadErr);
+        }
         return;
     }
 
@@ -414,13 +493,139 @@ watch(renderSeats, async () => {
 }
 
 .svg-wrapper path[generaladmission] {
-    pointer-events: auto;
-    cursor: pointer;
+    pointer-events: auto !important;
+    cursor: pointer !important;
+}
+
+/* Hover effects */
+.svg-wrapper path:hover {
+    opacity: 0.8;
 }
 
-/* Hover effects for general admission seats */
 .svg-wrapper path[generaladmission]:hover {
-    pointer-events: all;
-    cursor: pointer;
+    opacity: 1;
+    fill: #7ee8fa !important;
+}
+
+/* Mobile responsiveness - bulletproof on all devices */
+@media (max-width: 768px) {
+    .page-header {
+        flex-direction: column;
+        align-items: stretch !important;
+        gap: 0.75rem;
+    }
+
+    .unified-search-group {
+        width: 100% !important;
+        min-width: 100% !important;
+    }
+}
+
+@media (max-width: 768px) {
+    .page-header {
+        flex-direction: column !important;
+    }
+}
+
+@media (max-width: 480px) {
+    .page-header {
+        padding-bottom: 0.75rem;
+    }
+
+    .unified-search-group input {
+        min-width: 0;
+        font-size: 13px;
+    }
+
+    .filter-action-btn {
+        font-size: 11px;
+        padding: 0.25rem 0.5rem;
+    }
+
+    .btn-icon-small {
+        width: 1.75rem;
+        height: 1.75rem;
+        font-size: 12px;
+    }
+
+}
+
+/* Force filters list to be constrained and scrollable */
+.hidden-scrollbars.flex-1.overflow-y-auto {
+    max-height: 100%;
+    min-height: 150px;
+    overflow-y: auto !important;
+}
+
+/* SVG and Filters container responsive sizing */
+.svg-container {
+    min-height: 200px;
+    max-height: 250px;
+    flex-shrink: 0;
+}
+
+.svg-container.has-svg {
+    min-height: 240px;
+    max-height: 280px;
+    flex-shrink: 0;
+}
+
+.filters-container {
+    min-height: 260px;
+    max-height: 320px;
+    flex-shrink: 1;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Ensure filters card wrapper doesn't grow too large */
+.filters-card {
+    max-height: calc(100% - 3.5rem);
+    min-height: 200px;
+}
+
+/* Add spacing for bottom buttons */
+.filters-container > div:last-child {
+    margin-bottom: 0.5rem;
+}
+
+@media (min-width: 1024px) {
+    .svg-container {
+        min-height: 400px;
+        max-height: 100%;
+        flex-shrink: 1;
+    }
+
+    .svg-container.has-svg {
+        min-height: 400px;
+        max-height: 100%;
+        flex-shrink: 1;
+    }
+
+    .filters-container {
+        min-height: 400px;
+        max-height: 100%;
+        flex-shrink: 1;
+    }
+}
+
+/* Ensure filters list always scrolls */
+.hidden-scrollbars::-webkit-scrollbar {
+    width: 4px;
+}
+
+.hidden-scrollbars::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.hidden-scrollbars::-webkit-scrollbar-thumb {
+    background: oklch(0.35 0 0);
+    border-radius: 4px;
+}
+
+.hidden-scrollbars::-webkit-scrollbar-thumb:hover {
+    background: oklch(0.45 0 0);
 }
 </style>

package/vite.config.js

@@ -10,6 +10,7 @@ export default defineConfig({
     cacheDir: "./node_modules/.vite",
     build: {
         rollupOptions: {
+            external: ['sharp', 'node-persist', 'undici'],
             output: {
                 manualChunks: {
                     vue: ["vue", "vue-router", "pinia"],