@necrolab/dashboard 0.4.61 → 0.4.209

package/src/components/Tasks/QuickSettings.vue

@@ -1,72 +1,79 @@
 <template>
     <Modal>
-        <template #header
-            ><span class="mb-4 flex">Quick Settings <GearIcon class="ml-4 w-4" /></span
-        ></template>
+        <template #header> Quick Settings <GearIcon class="ml-4 w-4" /></template>
+
+        <div
+            v-if="ui.profile.admin"
+            class="my-3 flex gap-x-3 justify-between items-center border-dark-550 text-white border-2 bg-dark-500 p-3 rounded w-full h-10 button-default-smaller"
+        >
+            <span>Backup incap</span>
+            <Switch class="scale-75" v-model="quickConfig.incapBackup" />
+        </div>
 
-        <div v-for="(category, categoryName) in quickConfig.keys" :key="categoryName" class="mb-4">
-            <div class="text-light-400 mb-2">{{ categoryName }} Keys</div>
-            <div
-                v-for="(value, keyName) in category"
-                :key="keyName"
-                class="input-container"
-            >
-                <span class="w-1/3 text-light-300 font-medium text-xs">{{ keyName }}</span>
-                <div class="w-2/3 h-full flex items-center">
-                    <input
-                        type="text"
-                        class="quick-settings-input"
-                        :placeholder="`Enter ${keyName} key`"
-                        v-model="quickConfig.keys[categoryName][keyName]"
-                    />
-                </div>
-            </div>
+        <div
+            class="text-white bg-dark-500 mb-3 rounded border-dark-550 border-2 px-3 flex items-center justify-between h-10"
+        >
+            <span class="w-full">HyperAPI key</span>
+            <input
+                type="text"
+                class="transparent w-full bg-transparent border-none text-white placeholder-light-400"
+                placeholder="Enter HyperAPI key"
+            />
         </div>
 
-                    <div class="input-container relative-positioned z-tooltip">
-            <span class="w-1/3 text-light-300 font-medium text-xs">Checkout Proxies</span>
+        <div
+            class="text-white bg-dark-500 mb-3 rounded border-dark-550 border-2 px-3 flex items-center justify-between h-10"
+        >
+            <span class="w-full">Capsolver key</span>
+            <input
+                type="text"
+                class="transparent w-full bg-transparent border-none text-white placeholder-light-400"
+                placeholder="Enter Capsolver key"
+            />
+        </div>
+
+        <div
+            class="text-white bg-dark-500 mb-3 rounded border-dark-550 border-2 px-3 flex items-center justify-between"
+        >
+            <span class="w-full">Checkout Proxies</span>
             <Dropdown
-                class="!w-2/3"
-                variant="transparent"
+                class="rounded text-white pl-2 z-50 special-dropdown"
                 :default="ui.profile.proxyList?.checkout || proxyLists[0]"
-                :value="ui.profile.proxyList?.checkout"
                 :options="proxyLists"
                 :onClick="(f) => saveProxyListUpate('checkout', f)"
                 :allowDefault="false"
+                rightAmount="right-3"
             />
         </div>
 
-                    <div class="input-container relative-positioned z-dropdown">
-            <span class="w-1/3 text-light-300 font-medium text-xs">Queue Proxies</span>
+        <div class="text-white bg-dark-500 rounded border-dark-550 border-2 px-3 flex items-center justify-between">
+            <span class="w-full">Queue Proxies</span>
             <Dropdown
-                class="!w-2/3"
-                variant="transparent"
+                class="rounded text-white pl-2 z-30 special-dropdown"
                 :default="ui.profile.proxyList?.queue || proxyLists[0]"
-                :value="ui.profile.proxyList?.queue"
-                :options="proxyLists"
                 :onClick="(f) => saveProxyListUpate('queue', f)"
+                :options="proxyLists"
                 :allowDefault="false"
+                rightAmount="right-3"
             />
         </div>
-        <div class="flex mt-5 justify-between flex-row items-center quicksettings-bottom">
-            <div class="flex gap-3 items-center quicksettings-versions">
-                <div class="bg-gradient-to-r from-dark-400 to-dark-500 rounded-lg text-xs shadow-lg p-2 px-3 text-white font-medium border border-light-300">
-                    Dashboard v{{ version }}
-                </div>
-                <div class="bg-gradient-to-r from-dark-400 to-dark-500 rounded-lg text-xs shadow-lg p-2 px-3 text-white font-medium border border-light-300">
-                    Bot v{{ ui.botVersion }}
-                </div>
-            </div>
-
-            <div class="flex gap-5 quicksettings-buttons">
+        <div class="flex mt-5 justify-between items-end">
+            <span class="text-light-400 text-sm hidden lg:block">v{{ version }}</span>
+            <div class="flex justify-end gap-5">
                 <button
-                    class="button-default bg-dark-400 w-24 text-xs flex items-center justify-center gap-x-2 border border-light-300 hover:border-light-400"
+                    class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-24 md:w-44 text-xs flex items-center justify-center gap-x-2"
                     @click="checkBalances()"
                 >
                     Balances <img src="@/assets/img/sell.svg" width="14" />
                 </button>
                 <button
-                    class="button-default bg-dark-400 w-24 text-xs flex items-center justify-center gap-x-2 border border-light-300 hover:border-light-400"
+                    class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-24 md:w-44 text-xs flex items-center justify-center gap-x-2"
+                    @click="done(false)"
+                >
+                    Cancel <img src="@/assets/img/close.svg" width="14" />
+                </button>
+                <button
+                    class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-24 md:w-44 text-xs flex items-center justify-center gap-x-2"
                     @click="done(true)"
                 >
                     Save <img src="/img/save.svg" width="14" class="invert" />
@@ -85,125 +92,6 @@
 .transparent {
     background: transparent !important;
 }
-
-.input-container {
-    @apply text-white bg-dark-500 mb-3 px-3 rounded-lg border-dark-550 border-2 flex items-center justify-between h-10;
-    overflow: visible;
-}
-
-.quick-settings-input {
-    @apply w-full h-full text-sm text-white bg-transparent border-0 outline-none px-2 py-1 transition-colors duration-150;
-    
-    &:focus {
-        @apply outline-none border-0 shadow-none bg-transparent;
-    }
-    
-    &:hover:not(:focus) {
-        @apply bg-dark-550;
-    }
-    
-    &::placeholder {
-        @apply text-light-400 opacity-70;
-    }
-}
-
-/* iPhone portrait mode fixes */
-@media (max-width: 430px) and (orientation: portrait) {
-    .quicksettings-bottom {
-        flex-direction: column;
-        gap: 1rem;
-        align-items: stretch;
-    }
-    
-    .quicksettings-versions {
-        justify-content: center;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-    }
-    
-    .quicksettings-versions > div {
-        flex: 1;
-        min-width: 120px;
-        text-align: center;
-    }
-    
-    .quicksettings-buttons {
-        justify-content: center;
-        gap: 0.75rem;
-    }
-    
-    .quicksettings-buttons button {
-        width: 5rem;
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-        gap: 0.25rem;
-    }
-    
-    .quicksettings-buttons button img {
-        width: 12px;
-    }
-}
-
-/* Fix dropdown visibility in modal */
-:deep(.modal-body) {
-    overflow: visible !important;
-}
-
-:deep(.component-modal) {
-    overflow: visible !important;
-}
-
-/* Dropdown styling fixes */
-:deep(.dropdown) {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    padding: 0 !important;
-    height: 40px !important;
-}
-
-:deep(.dropdown:hover),
-:deep(.dropdown:focus-within) {
-    border: none !important;
-    background: transparent !important;
-    box-shadow: none !important;
-}
-
-:deep(.dropdown-display) {
-    height: 100%;
-    padding: 0.625rem;
-}
-
-:deep(.dropdown-value) {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-}
-
-:deep(.dropdown-menu-portal) {
-    z-index: 1000 !important;
-    max-height: 200px !important;
-    overflow-y: auto !important;
-    overscroll-behavior: contain !important;
-    touch-action: pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
-    border: 1px solid #3d3e44 !important;
-    background: linear-gradient(135deg, #2a2b30 0%, #2e2f34 100%) !important;
-}
-
-:deep(.dropdown-item) {
-    padding: 0.625rem 1rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-}
-
-/* Ensure proper z-index stacking */
-.z-tooltip {
-    z-index: 100 !important;
-}
-
-.z-dropdown {
-    z-index: 90 !important;
-}
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
@@ -258,12 +146,10 @@ const loadProxyLists = async () => {
 };
 
 const checkBalances = async () => {
-    const balances = await getBalances();
-    if (typeof balances == "object")
-        Object.entries(balances).forEach(([service, balance]) => {
-            ui.showSuccess(`${service} balance: ${balance}`);
-        });
-    else ui.showError("Could not get balances");
+    const { capsolver, hyper } = await getBalances();
+    if (capsolver) ui.showSuccess("Capsolver balance: " + capsolver);
+    if (hyper) ui.showSuccess("Hyper balance: " + hyper);
+    if (!capsolver && !capsolver) ui.showSuccess("Could not get balances");
 };
 
 loadProxyLists();

package/src/components/Tasks/ScrapeVenue.vue

@@ -4,15 +4,13 @@
         <!-- Event ID -->
         <div class="input-wrapper mt-7 mb-4">
             <label class="label-override mb-2">Event ID or URL <StadiumIcon /></label>
-            <div class="input-default required">
-                <input
-                    :placeholder="!isEU(ui.currentCountry.siteId) ? '102PDA9125510GYU' : '529171'"
-                    v-model="eventId"
-                />
+            <div class="input-default">
+                <input placeholder="102PDA9125510GYU" v-model="eventId" />
+                <span class="text-red-400 my-auto mr-2 mt-3">* </span>
             </div>
         </div>
         <button
-            class="btn-action ml-auto"
+            class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-48 text-xs flex items-center justify-center gap-x-2 ml-auto"
             @click="done()"
         >
             Scrape Venue <ScrapeIcon />
@@ -31,7 +29,6 @@ import Modal from "@/components/ui/Modal.vue";
 import { StadiumIcon, ScrapeIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import { ref } from "vue";
-import { isEU } from "@/stores/utils";
 
 const ui = useUIStore();
 const eventId = ref("");

package/src/components/Tasks/Stats.vue

@@ -1,53 +1,43 @@
 <template>
-    <div class="flex text-white font-bold lg:gap-5 gap-1 lg:mb-1 min-h-[2.5rem]" v-if="ui.queueStats.show" :key="key">
+    <div class="flex text-white font-bold lg:gap-5 gap-1" v-if="show" :key="key">
         <div
             v-if="ui.queueStats.total"
-            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between items-center min-w-0 h-8">
-            <h2 class="font-bold text-sm flex items-center gap-1 whitespace-nowrap">
-                <img width="14px" src="@/assets/img/wildcard.svg" />
-                Total MQM
+            class="bg-dark-500 mb-5 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
+        >
+            <h2 class="font-bold text-sm flex items-center gap-1 scale-100">
+                <img width="14px" src="@/assets/img/wildcard.svg" />Total MQM
             </h2>
-            <span class="text-light-400 text-xs font-black flex items-center justify-center whitespace-nowrap">
-                {{ ui.queueStats.total }}
-            </span>
+            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.total }} </span>
         </div>
         <div
             v-if="ui.queueStats.queued"
-            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between items-center min-w-0 h-8">
-            <h2 class="font-bold text-sm flex items-center gap-1 whitespace-nowrap">
-                <SkiIcon />
-                Queued
-            </h2>
-            <span class="text-light-400 text-xs font-black flex items-center justify-center whitespace-nowrap">
-                {{ ui.queueStats.queued }}
-            </span>
+            class="bg-dark-500 mb-5 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
+        >
+            <h2 class="font-bold text-sm flex items-center gap-1"><SkiIcon />Queued</h2>
+            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.queued }} </span>
         </div>
         <div
             v-if="ui.queueStats.sleeping"
-            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between items-center min-w-0 h-8">
-            <h2 class="font-bold text-sm flex items-center gap-1 whitespace-nowrap">
-                <TimerIcon />
-                Sleeping
-            </h2>
-            <span class="text-light-400 text-xs font-black flex items-center justify-center whitespace-nowrap">
-                {{ ui.queueStats.sleeping }}
-            </span>
+            class="bg-dark-500 mb-5 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
+        >
+            <h2 class="font-bold text-sm flex items-center gap-1"><TimerIcon />Sleeping</h2>
+            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.sleeping }} </span>
         </div>
         <div
             v-if="ui.queueStats.nextQueuePasses.length > 0"
-            class="stats-card lg:mb-5 mb-2 rounded-xl text-sm flex justify-between items-center lg:p-3 p-2 lg:gap-3 gap-2 min-w-0 h-8">
-            <h2 class="font-bold flex text-sm items-center gap-1 whitespace-nowrap">
-                <CartIcon />
-                <span class="sm:block hidden">Next Passes</span>
+            class="bg-dark-500 mb-5 rounded-lg text-sm flex justify-between lg:p-2 p-1 lg:gap-3 gap-2"
+        >
+            <h2 class="font-bold flex text-sm items-center gap-1">
+                <CartIcon /><span class="sm:block hidden">Next Passes</span>
                 <span class="sm:hidden block">Pass</span>
             </h2>
-            <span class="text-light-400 text-xs font-black flex items-center text-right truncate">
-                {{ ui.queueStats.nextQueuePasses.slice(0, queuePassAmount).join(", ") }}
-            </span>
+            <span class="text-light-400 text-sm font-black">{{
+                ui.queueStats.nextQueuePasses.slice(0, queuePassAmount).join(", ")
+            }}</span>
         </div>
         <!-- <div
             v-if="ui.queueStats.carts"
-            class="bg-dark-500 mb-2 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
+            class="bg-dark-500 mb-5 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
         >
             <h2 class="font-bold text-sm flex items-center gap-1"><CartIcon />Carts</h2>
             <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.sleeping }} </span>
@@ -68,28 +58,9 @@ const getQueuePassAmount = (width) => {
     return 1;
 };
 
+let show = ref(true);
 let key = ref(0);
 let queuePassAmount = ref(getQueuePassAmount(window.innerWidth));
 
 window.addEventListener("resize", () => (queuePassAmount.value = getQueuePassAmount(window.innerWidth)));
 </script>
-<style lang="scss" scoped>
-.stats-card {
-    @apply bg-dark-500 border border-dark-650 rounded;
-    transition: all 0.15s ease;
-
-    &:hover {
-        @apply bg-dark-550 border-dark-700;
-    }
-
-    h2 {
-        font-weight: 600;
-        color: #d4d4d4;
-    }
-
-    span {
-        font-weight: 700;
-        color: #cccccc;
-    }
-}
-</style>