@necrolab/dashboard 0.4.3

package/src/views/Accounts.vue

@@ -0,0 +1,191 @@
+<template>
+    <div>
+        <div class="flex-between pt-5 pb-2">
+            <!-- Heading -->
+            <div class="flex-center gap-4">
+                <MailIcon class="cursor-pointer smooth-hover text-white" />
+                <h4 class="text-heading">
+                    Accounts
+                    <span class="text-subheading pl-1">{{ ui.getSelectedAccounts().length }}</span>
+                </h4>
+            </div>
+            <ul class="mobile-icons">
+                <li>
+                    <EyeToggle v-model="privacy" />
+                </li>
+                <li>
+                    <button
+                        :disabled="ui.disabledButtons['create-accounts']"
+                        @click="ui.toggleModal('account-creator', true)"
+                        class="smooth-hover"
+                    >
+                        <PlayIcon class="w-4 h-4" />
+                    </button>
+                </li>
+                <li>
+                    <button
+                        :disabled="ui.disabledButtons['add-accounts']"
+                        @click="ui.toggleModal('create-account', true)"
+                        class="smooth-hover"
+                    >
+                        <PlusIcon class="w-4 h-4" />
+                    </button>
+                </li>
+            </ul>
+        </div>
+
+        <div class="flex items-center mb-3">
+            <div class="flex sm:w-auto w-full justify-start items-center gap-1">
+                <TagToggle
+                    class="smooth-hover rounded-l min-w-9"
+                    :options="['All', 'Enabled', 'Disabled']"
+                    @change="(f) => (ui.search.accounts.show = f)"
+                />
+                <input
+                    class="h-10 w-44 text-white text-sm p-2 bg-dark-500 flex items-center relative border-2 border-dark-550"
+                    placeholder="Search Email"
+                    v-model="ui.search.accounts.query"
+                />
+
+                <!-- <Dropdown
+                    class="min-w-16 text-sm lg:w-24 bg-dark-550 rounded-none"
+                    :onClick="(f) => (ui.search.accounts.show = f)"
+                    default="All"
+                    :chosen="ui.search.accounts.show"
+                    :options="['All', 'Enabled', 'Disabled']"
+                    rightAmount="right-2"
+                /> -->
+                <!-- <TagToggle
+                    class="smooth-hover rounded-r w-32"
+                    :options="allTags"
+                    @change="(f) => (ui.search.accounts.tag = f)"
+                /> -->
+
+                <Dropdown
+                    class="rounded-r-lg min-w-32 bg-dark-500 relative z-50 border-2 border-dark-550 search-dropdown"
+                    style="margin-left: 0 !important; border-width: 2px !important"
+                    rightAmount="right-1"
+                    default="Any"
+                    :value="ui.search.accounts.tag"
+                    :onClick="(f) => (ui.search.accounts.tag = f)"
+                    :options="allTags"
+                    :capitalize="true"
+                />
+            </div>
+
+            <div class="ml-auto gap-2 hidden lg:flex">
+                <div
+                    class="bg-dark-400 border border-light-300 justify-between px-4 w-44 flex text-white text-xs font-medium items-center rounded-md ml-auto h-10"
+                >
+                    <p>Privacy</p>
+                    <Switch class="scale-75" v-model="privacy" />
+                </div>
+                <button
+                    :disabled="ui.disabledButtons['create-accounts']"
+                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-light-300 hover:border-light-400 w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                    @click="ui.toggleModal('account-creator')"
+                >
+                    Create Accounts <PlayIcon class="ml-2" />
+                </button>
+
+                <button
+                    :disabled="ui.disabledButtons['add-accounts']"
+                    class="bg-dark-400 disabled:opacity-70 smooth-hover border border-light-300 hover:border-light-400 w-44 flex text-white text-xs font-medium justify-center items-center rounded-md ml-auto h-10"
+                    @click="ui.toggleModal('create-account')"
+                >
+                    Add Account
+                    <PlusIcon class="ml-2" />
+                </button>
+            </div>
+        </div>
+
+        <!-- Tasks (Table) -->
+        <AccountView :tasks="processedTasks" class="max-h-big-acc" />
+
+        <!-- Modal -->
+        <transition-group name="fade" mode="out-in">
+            <CreateAccount v-if="activeModal === 'create-account'" />
+            <AccountCreator v-if="activeModal === 'account-creator'" />
+        </transition-group>
+    </div>
+</template>
+<style lang="scss" scoped>
+.custom-dropdown-content {
+    top: 2.6rem !important;
+    left: -13px;
+    @apply border border-light-300;
+}
+
+/* Search dropdown should always be h-10 and have no left corners */
+.search-dropdown {
+    height: 2.5rem !important; /* Always 40px regardless of screen size */
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+}
+.max-h-big-acc {
+    max-height: calc(100vh - 14rem);
+    overflow: hidden;
+}
+</style>
+<script setup>
+import { computed, watch, ref } from "vue";
+import AccountView from "@/components/Editors/Account/AccountView.vue";
+import AccountCreator from "@/components/Editors/Account/AccountCreator.vue";
+import CreateAccount from "@/components/Editors/Account/CreateAccount.vue";
+import { useUIStore } from "@/stores/ui";
+import { PlusIcon, PlayIcon, MailIcon } from "@/components/icons";
+import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
+import TagToggle from "@/components/Editors/TagToggle.vue";
+import Switch from "@/components/ui/controls/atomic/Switch.vue";
+import EyeToggle from "@/components/ui/controls/EyeToggle.vue";
+
+const ui = useUIStore();
+const activeModal = computed(() => ui.activeModal);
+const allTags = ref([]);
+const privacy = ref(true);
+
+const filterAccounts = () => {
+    const { query, show, tag } = ui.search.accounts;
+    let accs = ui.accounts;
+    if (show === "Enabled") accs = accs.filter((p) => p.enabled);
+    if (show === "Disabled") accs = accs.filter((p) => !p.enabled);
+    ui.logger.Info(`Filtered accounts for ${ui.currentModule}`);
+
+    accs = accs.filter((acc) => acc.module === ui.currentModule);
+
+    if (tag !== "Any") accs = accs.filter((p) => p.tags.includes(ui.search.accounts.tag));
+    if (!query) return (ui.search.accounts.results = accs);
+    let searchRegex = new RegExp(query, "i");
+    accs = accs.filter((a) => searchRegex.test(a.email));
+    return accs;
+};
+
+ui.search.accounts.results = filterAccounts();
+
+const processedTasks = computed(() => {
+    return ui.search.accounts.results.map((e) => ({ ...e, privacy: privacy.value }));
+});
+
+watch(
+    () =>
+        ui.search.accounts.query +
+        ui.search.accounts.show +
+        ui.accounts.length +
+        ui.search.accounts.tag +
+        ui.currentModule,
+    () => {
+        ui.search.accounts.results = filterAccounts();
+    }
+);
+const getAllTags = () => {
+    let tags = ["Any"];
+    ui.search.accounts.results.forEach((p) =>
+        p.tags.forEach((tag) => {
+            if (!tags.includes(tag)) tags.push(tag);
+        })
+    );
+    return tags;
+};
+
+allTags.value = getAllTags();
+</script>

package/src/views/Console.vue

@@ -0,0 +1,224 @@
+<template>
+    <div>
+        <h4 class="text-white font-bold mb-5 pt-5 flex gap-2 text-xl items-center">Console <ConsoleIcon /></h4>
+
+        <div>
+            <div class="flex items-center justify-between mb-3">
+                <div class="w-64">
+                    <Dropdown
+                        class="console-dropdown input-default w-64 bg-dark-500 border-2 border-dark-550"
+                        rightAmount="right-2"
+                        default="All logs"
+                        :allowDefault="true"
+                        :value="currentTaskLog"
+                        :onClick="(f) => (currentTaskLog = f.split(' ')[0])"
+                        :options="
+                            Object.entries(taskLogMapping)
+                                .map(([k, v]) => `${k} (${v.length})`)
+                                .sort((a, b) => a.localeCompare(b))
+                        "
+                    />
+                </div>
+                <div class="flex items-center gap-3">
+                    <!-- Hide Monitors and Auto buttons only on desktop -->
+                    <div class="hidden ipadlg:flex items-center gap-3">
+                        <button
+                            class="flex rounded gap-3 card-dark px-2 h-10 flex-center"
+                        >
+                            <h3 class="text-sm text-white">Hide Monitors</h3>
+                            <Switch class="scale-75" v-model="filteredLogs" />
+                        </button>
+                        <button
+                            class="flex rounded gap-3 card-dark px-2 h-10 flex-center"
+                        >
+                            <h3 class="text-sm text-white">Auto</h3>
+                            <Switch class="scale-75" v-model="autoscrollToggled" />
+                        </button>
+                    </div>
+                    <!-- Scroll buttons always visible -->
+                    <button
+                        class="rounded card-dark w-10 h-10 flex-center"
+                    >
+                        <UpIcon class="cursor-pointer mx-1 lg:w-4 w-5 h-5" @click="scrollTo('up')" />
+                    </button>
+                    <button
+                        class="rounded card-dark w-10 h-10 flex-center"
+                    >
+                        <DownIcon class="cursor-pointer ml-1 lg:w-4 w-5 h-5" @click="scrollTo('down')" />
+                    </button>
+                </div>
+            </div>
+
+            <Smoothie
+                :weight="0.1"
+                class="hidden-scrollbars console overflow-y-auto overflow-x-hidden font-mono text-white"
+                style="min-height: 14rem !important"
+                ref="$autoscroll"
+            >
+                <pre
+                    class="hidden-scrollbars"
+                    v-for="line in currentTaskLog
+                        ? taskLogMapping[currentTaskLog]
+                        : logLines.filter((l) => (filteredLogs ? !['-DISCORD'].some((s) => l.includes(s)) : true))"
+                    v-bind:key="line"
+                ><code class="md:text-sm lg:text-base" v-html="line"></code></pre>
+            </Smoothie>
+            <div class="flex ipadlg:hidden justify-between mt-3">
+                <button
+                    class="flex rounded gap-3 card-dark px-2 h-10 flex-center"
+                >
+                    <h3 class="text-sm text-white">Hide Monitors</h3>
+                    <Switch class="scale-75" v-model="filteredLogs" />
+                </button>
+                <button
+                    class="flex rounded gap-3 card-dark px-2 h-10 flex-center"
+                >
+                    <h3 class="text-sm text-white">Auto</h3>
+                    <Switch class="scale-75" v-model="autoscrollToggled" />
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.console {
+    @apply bg-dark-400 lg:p-5 p-2 rounded relative border-dark-550 border-2;
+    height: calc(100vh - 16.5rem);
+    textarea {
+        background: transparent;
+        resize: none;
+
+        @apply w-full focus:outline-none text-white;
+    }
+    // $border: 1px;
+    // &:before {
+    //     content: "";
+    //     @apply absolute top-0 left-0 right-0 bottom-0 opacity-60;
+    //     z-index: -2;
+    //     margin: -$border;
+    //     border-radius: inherit;
+    //     background: radial-gradient(rgba(96, 66, 255, 0.6), rgba(255, 255, 255, 0));
+    // }
+}
+
+.text-xxs {
+    font-size: 0.5rem;
+    line-height: 0.8rem;
+}
+
+.header-wrapper {
+    svg {
+        width: 30px;
+        height: 30px;
+    }
+}
+.max-h-big-con {
+    max-height: calc(100vh - 12rem);
+    overflow: hidden;
+}
+
+/* Console dropdown styling - simplified to match input-default pattern */
+.console-dropdown {
+    font-size: 0.875rem !important; /* text-sm */
+    font-weight: 500 !important; /* medium font weight */
+}
+</style>
+<script setup>
+import { Smoothie } from "vue-smoothie";
+import { DEBUG } from "@/utils/debug";
+
+import Filter from "@/libs/ansii.js";
+import { ConsoleIcon, DownIcon, UpIcon } from "@/components/icons";
+import Switch from "@/components/ui/controls/atomic/Switch.vue";
+import WebsocketHeartbeatJs from "websocket-heartbeat-js";
+import { onMounted, ref, nextTick } from "vue";
+import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
+import { sortAlphaNum } from "@/stores/utils";
+
+import { useUIStore } from "@/stores/ui";
+
+const ui = useUIStore();
+
+const $autoscroll = ref(null);
+const logLines = ref([]);
+const ansii = new Filter();
+const autoscrollToggled = ref(true);
+const taskLogMapping = ref({});
+const currentTaskLog = ref(false);
+const filteredLogs = ref(true);
+
+const path = "/api/updates?type=console";
+const url = (window.location.protocol === "http:" ? "ws://" : "wss://") + window.location.host + path;
+const scrollTo = (dir) => {
+    try {
+        if (dir === "up") $autoscroll.value.el.scrollTop = 0;
+        else $autoscroll.value.el.scrollTop = parseInt($autoscroll.value.el.children[1].style.height);
+    } catch (e) {
+        if (DEBUG) console.log("Error scrolling", e);
+    }
+};
+
+const addAnsiToOutput = (a) => {
+    const html = ansii.toHtml(a.log);
+    logLines.value.push(html);
+    if (autoscrollToggled.value)
+        nextTick().then(() => {
+            scrollTo("down");
+        });
+};
+
+const handleWebsocketMessages = (msg) => {
+    const data = msg.log;
+    if (msg.type === "console-init") {
+        logLines.value = [];
+        taskLogMapping.value = {};
+        makeTaskLogMapping(data);
+
+        data.forEach((l) => {
+            addAnsiToOutput(l);
+        });
+    } else if (msg.type === "console") {
+        makeTaskLogMapping([msg]);
+        if (data.includes("Cleared logs")) logLines.value = [];
+        addAnsiToOutput(msg);
+    }
+};
+
+const makeTaskLogMapping = (lines) => {
+    lines.forEach((l) => {
+        if (!l.metadata) {
+            if (DEBUG) console.log("Error getting metadata", l);
+            return;
+        }
+        const region = l.metadata.siteId?.split("_")?.[1];
+        const n = l.metadata.global ? "Global" : `${region}-${l.metadata.taskId}`;
+        if (!taskLogMapping.value[n]) taskLogMapping.value[n] = [];
+        taskLogMapping.value[n].push(ansii.toHtml(l.log));
+    });
+};
+
+window.startDebugConsoleMessages = () => {
+    setInterval(() => {
+        const line = `\u001b[96m[12:16:02.273]\u001b[00m \u001b[96m[TASK-${Math.round(
+            Math.random() * 10
+        )}]\u001b[00m AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Needs To Queue: false - Queue up:  false`;
+        addAnsiToOutput(line);
+        makeTaskLogMapping([line]);
+    }, 500);
+};
+
+if (DEBUG) window.startDebugConsoleMessages();
+
+// Listen for messages
+onMounted(() => {
+    const socket = new WebsocketHeartbeatJs({ url, pingMsg: "ping" });
+
+    socket.onmessage = (event) => {
+        const msg = JSON.parse(event.data);
+        if (DEBUG) console.log("Received message", msg);
+        msg.forEach((e) => {
+            handleWebsocketMessages(e);
+        });
+    };
+});
+</script>