@necrolab/dashboard 0.4.3

package/src/stores/ui.js

@@ -0,0 +1,584 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import { ConnectionHandler } from "@/stores/connection.js";
+import { toast } from "vue3-toastify";
+import { createLogger } from "@/stores/logger";
+import { timeDifference, betterSort, sortTaskIds } from "@/stores/utils";
+
+import mockTaskData from "@/stores/sampleData.js";
+import { useRouter } from "vue-router";
+import { DEBUG } from "@/utils/debug";
+
+const ALL_SELECTED = 0;
+const SOME_SELECTED = 1;
+const NO_SELECTED = 2;
+
+export const useUIStore = defineStore("ui", () => {
+    const logger = createLogger("UI");
+    logger.DEBUG = DEBUG;
+
+    logger.Info("Initialized UI");
+
+    const activeModal = ref(null);
+    const accounts = ref([]);
+    const profiles = ref([]);
+    const proxies = ref("");
+    const tasks = ref({});
+
+    const showSpinner = ref(false);
+    const botVersion = ref("-");
+
+    const spinnerMessage = ref("");
+
+    const profile = ref({
+        profileTags: [],
+        accountTags: [],
+        admin: false,
+        name: ""
+    });
+
+    if (DEBUG) {
+        tasks.value = mockTaskData.Tasks;
+        profiles.value = mockTaskData.Profiles;
+        accounts.value = mockTaskData.Accounts;
+        profile.value = mockTaskData.Profile;
+    }
+    const mainCheckbox = ref({
+        profiles: false,
+        tasks: false,
+        accounts: false
+    });
+    const menuOpen = ref(false);
+    const sortData = ref({
+        sortBy: null,
+        reversed: false,
+        lastOrder: []
+    });
+    const taskIdOrder = ref(Object.keys(tasks.value));
+    const modalData = ref({});
+    const taskFilter = ref("All"); // 'All' or 'Checkout'
+    const connection = new ConnectionHandler();
+
+    const startPoint = ref(0);
+    const pullChange = ref(0);
+
+    const currentEvent = ref("");
+    const currentCountry = ref({ id: "US", siteId: "TM_US", url: "https://www.ticketmaster.com" });
+    const currentModule = ref("TM");
+
+    const savedEvent = localStorage.getItem("current-event");
+    const savedCountry = localStorage.getItem("current-country");
+    const savedModule = localStorage.getItem("current-module");
+    if (savedCountry) currentCountry.value = JSON.parse(savedCountry);
+    if (savedEvent) currentEvent.value = savedEvent;
+    if (savedModule) currentModule.value = savedModule;
+
+    const disabledButtons = ref({
+        "add-tasks": false,
+        "add-profiles": false,
+        "add-accounts": false,
+        "mass-edit": false,
+        "create-accounts": false
+    });
+
+    const queueStats = ref({
+        show: false,
+        total: 0,
+        queued: 0,
+        sleeping: 0,
+        nextQueuePasses: []
+    });
+
+    const router = useRouter();
+    const openContextMenu = ref("");
+    const currentlyEditing = ref({});
+    const search = ref({
+        profiles: { query: "", field: "Name", results: [], show: "All", tag: "Any" },
+        accounts: { query: "", results: [], show: "All", tag: "Any" }
+    });
+    const currentDropdown = ref("");
+
+    // Set the _timeLeftString property every second
+    setInterval(() => {
+        const t1 = new Date();
+        for (const [key, value] of Object.entries(tasks.value)) {
+            if (value.expirationTime)
+                tasks.value[key]._timeLeftString = timeDifference(Date.parse(value.expirationTime), t1.getTime());
+            else if (value.noCartholds) tasks.value[key]._timeLeftString = "No Cartholds";
+            else tasks.value[key]._timeLeftString = undefined;
+        }
+
+        if (t1.getSeconds() % 10 === 0) {
+            const allIds = new Set(Object.keys(tasks.value));
+            const orderIds = new Set(taskIdOrder.value);
+
+            const missingIds = [...allIds].filter((id) => !orderIds.has(id));
+            const extraIds = [...orderIds].filter((id) => !allIds.has(id));
+
+            if (missingIds.length > 0 || extraIds.length > 0) {
+                taskIdOrder.value = taskIdOrder.value.filter((id) => allIds.has(id));
+
+                if (missingIds.length > 0) {
+                    missingIds.sort(sortTaskIds);
+                    for (const id of missingIds) {
+                        let pos = taskIdOrder.value.length;
+                        for (let i = 0; i < taskIdOrder.value.length; i++) {
+                            if (sortTaskIds(id, taskIdOrder.value[i]) < 0) {
+                                pos = i;
+                                break;
+                            }
+                        }
+                        taskIdOrder.value.splice(pos, 0, id);
+                    }
+                }
+            }
+        }
+    }, 1000);
+
+    connection.init("/api/updates?type=tasks");
+
+    const pd = (e) => {
+        if (!e.target.closest(".scrollable")) {
+            e.preventDefault();
+        }
+    };
+    const preventScroll = () => {
+        const scrollY = window.scrollY;
+        document.body.style.position = "fixed";
+        document.body.style.top = `-${scrollY}px`;
+        document.body.style.width = "100%";
+        document.body.style.height = "100%";
+        document.body.style.left = "0"; // Add left positioning
+
+        // iOS specific properties
+        document.body.style.overflow = "hidden";
+        document.body.style.overscrollBehavior = "none";
+        document.body.style["-webkit-overflow-scrolling"] = "touch";
+
+        // Prevent text selection issues
+        document.body.style["-webkit-user-select"] = "none";
+        document.body.style.userSelect = "none";
+
+        // Also apply to html element for better iOS compatibility
+        document.documentElement.style.overflow = "hidden";
+        document.documentElement.style.overscrollBehavior = "none";
+        document.documentElement.style["-webkit-overflow-scrolling"] = "touch";
+
+        // Add touch-action prevention
+        document.body.style.touchAction = "none";
+        document.documentElement.style.touchAction = "none";
+
+        // Re-enable text selection only for inputs and textareas
+        const inputs = document.querySelectorAll("input, textarea");
+        inputs.forEach((input) => {
+            input.style["-webkit-user-select"] = "auto";
+            input.style.userSelect = "auto";
+            input.style.touchAction = "pan-x pan-y";
+        });
+
+        // Prevent touch moves
+        document.addEventListener("touchmove", pd, { passive: false });
+    };
+
+    const enableScroll = () => {
+        if (showSpinner.value) return;
+
+        const scrollY = document.body.style.top;
+
+        // Reset body styles
+        document.body.style.position = "";
+        document.body.style.top = "";
+        document.body.style.width = "";
+        document.body.style.height = "";
+        document.body.style.left = "";
+        document.body.style.overflow = "";
+        document.body.style.overscrollBehavior = "";
+        document.body.style["-webkit-overflow-scrolling"] = "";
+        document.body.style["-webkit-user-select"] = "";
+        document.body.style.userSelect = "";
+        document.body.style.touchAction = "";
+
+        // Reset html element styles
+        document.documentElement.style.overflow = "";
+        document.documentElement.style.overscrollBehavior = "";
+        document.documentElement.style["-webkit-overflow-scrolling"] = "";
+        document.documentElement.style.touchAction = "";
+
+        // Reset input styles
+        const inputs = document.querySelectorAll("input, textarea");
+        inputs.forEach((input) => {
+            input.style["-webkit-user-select"] = "";
+            input.style.userSelect = "";
+            input.style.touchAction = "";
+        });
+
+        // Restore scroll position
+        window.scrollTo(0, parseInt(scrollY || "0") * -1);
+
+        // Remove event listener
+        document.removeEventListener("touchmove", pd);
+    };
+
+    const refreshQueueStats = () => {
+        queueStats.value.show = false;
+        queueStats.value.total = 0;
+        queueStats.value.queued = 0;
+        queueStats.value.sleeping = 0;
+        queueStats.value.nextQueuePasses = [];
+
+        let relevantTasks = Object.values(tasks.value).filter((t) => t.siteId === currentCountry.value.siteId);
+        if (currentEvent.value) relevantTasks = relevantTasks.filter((t) => t.eventId === currentEvent.value);
+
+        queueStats.value.total = 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 = relevantTasks.map((t) => t.queuePosition).filter((e) => !isNaN(e));
+        queueStats.value.nextQueuePasses = positions.sort((a, b) => a - b);
+    };
+
+    const toggleModal = (name, clearValue = false) => {
+        if (disabledButtons.value["add-tasks"] && name === "create-task") return;
+        if (clearValue) currentlyEditing.value = {};
+        activeModal.value = name;
+        if (!name) {
+            currentlyEditing.value = {};
+            enableScroll();
+        } else preventScroll();
+    };
+
+    const reverseTasks = () => {
+        logger.Info("Reversing", !sortData.value.reversed);
+        taskIdOrder.value.reverse();
+    };
+
+    const sortTasks = () => {
+        try {
+            if (!sortData.value.sortBy) {
+                // When no specific sort column is set, default to sorting by taskId
+                const taskArr = Object.entries(tasks.value).map(([taskId, task]) => ({ taskId, ...task }));
+                taskArr.sort((a, b) => sortTaskIds(a.taskId, b.taskId));
+                taskIdOrder.value = taskArr.map((task) => task.taskId);
+
+                if (sortData.value.reversed) {
+                    taskIdOrder.value.reverse();
+                }
+                return;
+            }
+
+            logger.Info("Sorting", sortData.value.sortBy);
+            const taskArr = Object.entries(tasks.value).map(([taskId, task]) => ({ taskId, ...task }));
+
+            if (sortData.value.sortBy === "taskId") {
+                taskArr.sort((a, b) => sortTaskIds(a.taskId, b.taskId));
+            } else {
+                taskArr.sort((a, b) => betterSort(a[sortData.value.sortBy], b[sortData.value.sortBy]));
+            }
+
+            taskIdOrder.value = taskArr.map((task) => task.taskId);
+            if (sortData.value.reversed) {
+                taskIdOrder.value.reverse();
+            }
+        } catch (ex) {
+            logger.Error("Error sorting tasks:", ex);
+        }
+    };
+
+    const getTaskSelectionStatus = () => {
+        let selected = {};
+        for (const [key, value] of Object.entries(tasks.value)) if (value.selected) selected[key] = value;
+        if (Object.keys(selected).length === 0) return NO_SELECTED;
+        if (Object.keys(selected).length === Object.keys(tasks.value).length) return ALL_SELECTED;
+        return SOME_SELECTED;
+    };
+
+    const getSelectionStatus = (of) => {
+        let selected = of.filter((o) => o.selected);
+        if (selected.length === 0) return NO_SELECTED;
+        if (selected.length === of.length) return ALL_SELECTED;
+        return SOME_SELECTED;
+    };
+
+    const setMainCheckboxRightValue = (group = "tasks") => {
+        const status = getTaskSelectionStatus();
+        if (status === NO_SELECTED) {
+            mainCheckbox.value[group] = false;
+        } else if (status === SOME_SELECTED) {
+            mainCheckbox.value[group] = false;
+        } else if (status === ALL_SELECTED) {
+            mainCheckbox.value[group] = true;
+        }
+    };
+
+    const toggleMainCheckbox = (group) => {
+        let status;
+        if (group === "tasks") status = getTaskSelectionStatus();
+        else if (group === "profiles") status = getSelectionStatus(profiles.value);
+        else if (group === "accounts") status = getSelectionStatus(accounts.value);
+        const currentValue = mainCheckbox.value[group];
+        mainCheckbox.value[group] = !mainCheckbox.value[group];
+
+        if (status === ALL_SELECTED && !currentValue) return;
+        if (group === "tasks") {
+            for (const value of Object.values(tasks.value))
+                value.selected = status == NO_SELECTED || status == SOME_SELECTED;
+        } else if (group === "profiles")
+            profiles.value.forEach((p) => (p.selected = status == NO_SELECTED || status == SOME_SELECTED));
+        else if (group === "accounts")
+            accounts.value.forEach((p) => (p.selected = status == NO_SELECTED || status == SOME_SELECTED));
+    };
+
+    const getSelectedTasks = () => {
+        let selected = {};
+        for (const [key, value] of Object.entries(tasks.value)) {
+            if (currentCountry.value.siteId && value.siteId !== currentCountry.value.siteId) continue;
+            if (currentEvent.value && value.eventId !== currentEvent.value) continue;
+            if (value.selected) selected[key] = value;
+        }
+        if (Object.keys(selected).length === 0) {
+            const r = {};
+            for (const [key, value] of Object.entries(tasks.value)) {
+                if (currentCountry.value.siteId && value.siteId === currentCountry.value.siteId) r[key] = value;
+            }
+            return r;
+        }
+        return selected;
+    };
+
+    const getSelectedProfiles = () => {
+        const res = search.value.profiles.results.filter((p) => p.selected);
+        if (res.length === 0) return search.value.profiles.results;
+        else return res;
+    };
+    const getSelectedAccounts = () => {
+        const res = search.value.accounts.results.filter((p) => p.selected);
+        if (res.length === 0) return search.value.accounts.results;
+        else return res;
+    };
+
+    const startSpinner = (msg) => {
+        if (router.currentRoute.value.name == "login" || window.location.href.includes(":5173")) return;
+        showSpinner.value = true;
+        spinnerMessage.value = msg;
+        preventScroll();
+    };
+
+    if (!DEBUG) startSpinner("Connecting", true);
+
+    return {
+        // auth
+        profile,
+        setProfile: (pf) => (profile.value = pf),
+
+        // modal
+        activeModal,
+        toggleModal,
+        modalData,
+
+        // sorting
+        toggleSort: (sort = null) => {
+            const sameSortBy = sortData.value.sortBy === sort;
+
+            if (sort) {
+                if (sameSortBy) {
+                    // If clicking on the same sort field, just reverse the current order
+                    reverseTasks();
+                    sortData.value.reversed = !sortData.value.reversed;
+                } else {
+                    // If changing sort field, reset reversed state and sort
+                    sortData.value.sortBy = sort;
+                    sortData.value.reversed = false;
+                    sortTasks();
+                }
+            } else if (sortData.value.sortBy) {
+                // If no sort specified but we have a current sort, just re-sort
+                sortTasks();
+            }
+
+            logger.Info(`toggleSort: sortBy=${sortData.value.sortBy}, reversed=${sortData.value.reversed}`);
+
+            // Update lastOrder after sorting
+            sortData.value.lastOrder = [...taskIdOrder.value];
+        },
+        sortData,
+        taskIdOrder,
+        reverseTasks,
+
+        // refresh
+        startPoint,
+        pullChange,
+        setStartPoint: (point) => (startPoint.value = point),
+        setPullChange: () => (pullChange.value = length),
+        tasks,
+
+        // top main checkbox
+        mainCheckbox,
+        toggleMainCheckbox,
+
+        createAcconts: (cnfg) => connection.sendCreateAccounts(cnfg),
+
+        // single
+        deleteTask: (taskId) => {
+            delete tasks.value[taskId];
+            taskIdOrder.value = taskIdOrder.value.filter((i) => i !== taskId);
+            connection.sendDeleteTask(taskId);
+        },
+        stopTask: (id) => connection.sendStopTask(id),
+        startTask: (id) => connection.sendStartTask(id),
+        continueTask: (id, type) => connection.sendContinueTask(id, type),
+        addNewTask: (task) => {
+            toggleModal("");
+            if (DEBUG) {
+                const tid = `T-${Object.keys(tasks.value).length}`;
+                const t = {
+                    ...task,
+                    siteId: currentCountry.value.siteId,
+                    hidden: false,
+                    active: true,
+                    mode: "CHECKOUT",
+                    taskId: tid,
+                    email: "test@test.de",
+                    password: "test"
+                };
+                tasks.value[tid] = t;
+                logger.Debug("Creating debug task", t);
+                taskIdOrder.value.push(tid);
+                if (sortData.value.sortBy) {
+                    sortTasks(); // Re-sort after adding a new task
+                }
+            } else connection.sendAddTask(task);
+        },
+
+        // selected/all
+        getSelectedTasks,
+        deleteTasks: () => {
+            if (!confirm("Do you want do delete all selected tasks?")) return;
+            const selectedTasks = getSelectedTasks();
+            for (const value of Object.values(selectedTasks)) connection.sendDeleteTask(value.taskId);
+        },
+        foldTasks: () => {
+            const selectedTasks = getSelectedTasks();
+            for (const key of Object.keys(selectedTasks)) tasks.value[key].isExpanded = false;
+        },
+        expandTasks: () => {
+            const selectedTasks = getSelectedTasks();
+            for (const key of Object.keys(selectedTasks)) tasks.value[key].isExpanded = true;
+        },
+        startTasks: () => {
+            const selectedTasks = getSelectedTasks();
+            for (const value of Object.values(selectedTasks)) if (!value.active) connection.sendStartTask(value.taskId);
+        },
+        stopTasks: () => {
+            const selectedTasks = getSelectedTasks();
+            for (const value of Object.values(selectedTasks)) if (value.active) connection.sendStopTask(value.taskId);
+        },
+        toggleTaskSelected: (taskId) => {
+            tasks.value[taskId].selected = !tasks.value[taskId].selected;
+            setMainCheckboxRightValue();
+        },
+
+        toggleProfileSelected: (id) => {
+            const idx = profiles.value.findIndex((p) => p._id === id);
+            profiles.value[idx].selected = !profiles.value[idx].selected;
+        },
+        toggleAccountSelected: (id) => {
+            const idx = accounts.value.findIndex((p) => p._id === id);
+            accounts.value[idx].selected = !accounts.value[idx].selected;
+        },
+
+        // proxy for connection functions
+        checkStock: (eventId, presaleCode, eventDid, clOrigin) =>
+            connection.sendCheckStock(eventId, presaleCode, eventDid, clOrigin),
+        scrapeVenue: (eventId) => connection.sendScrapeMap(eventId),
+        massEditPresaleCode: (eventId, presaleCode) => connection.sendMassEditPresaleCode(eventId, presaleCode),
+
+        // alerts
+        showError: (err) => toast.error(err, { autoClose: 2000 }),
+        showSuccess: (msg) => toast.success(msg, { autoClose: 2000 }),
+        // Country
+        currentCountry,
+        setCurrentCountry: (country, closeModal, newModule) => {
+            currentCountry.value = country;
+            currentModule.value = newModule;
+            if (closeModal) menuOpen.value = false;
+            localStorage.setItem("current-country", JSON.stringify(currentCountry.value));
+            localStorage.setItem("current-module", newModule);
+            refreshQueueStats();
+        },
+        menuOpen,
+
+        // Event
+        currentEvent,
+        setCurrentEvent: (event) => {
+            logger.Info("Setting current event", event);
+            currentEvent.value = event;
+            localStorage.setItem("current-event", currentEvent.value);
+            refreshQueueStats();
+        },
+
+        disabledButtons,
+        queueStats,
+
+        refreshQueueStats,
+
+        openContextMenu,
+        setOpenContextMenu: (taskId) => (openContextMenu.value = taskId),
+
+        accounts,
+        addAccount: (acc) => {
+            if (!DEBUG) return connection.sendSaveAccount(acc);
+            const isEdit = accounts.value.findIndex((p) => p._id === acc._id);
+            if (DEBUG && isEdit !== -1) {
+                Object.keys(acc).forEach((k) => (accounts.value[isEdit][k] = acc[k]));
+            } else accounts.value.push({ ...acc, _id: Math.random() });
+        },
+        setAccounts: (accs) => accounts.value.push(...accs),
+        profiles,
+        addProfile: (profile) => {
+            if (!DEBUG) return connection.sendSaveProfile(profile);
+            const isEdit = profiles.value.findIndex((p) => p._id === profile._id);
+
+            if (DEBUG && isEdit !== -1) {
+                Object.keys(profile).forEach((k) => (accounts.value[isEdit][k] = profile[k]));
+            } else {
+                profiles.value.push({ ...profile, _id: Math.random() });
+            }
+        },
+        deleteProfile: (id) => {
+            if (!DEBUG) return connection.sendDeleteProfile(id);
+            else profiles.value = profiles.value.filter((p) => p._id != id);
+        },
+        setProfiles: (profs) => (profiles.value = profs),
+        proxies,
+        setProxies: (p) => (proxies.value = p),
+
+        currentlyEditing,
+        getSelectedProfiles,
+        getSelectedAccounts,
+        search,
+
+        currentDropdown,
+        setCurrentDropdown: (v) => (currentDropdown.value = v),
+
+        startSpinner,
+        hideSpinner: () => {
+            showSpinner.value = false;
+            enableScroll();
+        },
+        setBotVersion: (version) => {
+            botVersion.value = version;
+        },
+        botVersion,
+
+        spinnerMessage,
+        showSpinner,
+        taskFilter,
+        setTaskFilter: (e) => (taskFilter.value = e),
+        sortTasks,
+        logger,
+        currentModule
+    };
+});